html[data-tkl="balok"]{
  --kt-bg:#fff8e7;--kt-bgimg:radial-gradient(circle at 12% 18%,rgba(253,216,53,.28),transparent 32%),radial-gradient(circle at 88% 64%,rgba(30,136,229,.16),transparent 36%);
  --kt-card:#fff;--kt-card2:#fff1c9;--kt-ink:#1e2a3a;--kt-mut:#6b7385;--kt-line:rgba(30,42,58,.12);
  --kt-acc:#e53935;--kt-acc-ink:#fff;--kt-acc2:#fdd835;--kt-acc2-ink:#1e2a3a;--kt-price:#e53935;--kt-star:#fb8c00;
  --kt-rad:16px;--kt-rad-s:12px;--kt-rad-btn:14px;--kt-disp:'Baloo 2',system-ui,sans-serif;--kt-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;--kt-h2w:800;
  --kt-shadow:0 8px 0 #f0d58a;--kt-bd:3px solid #1e2a3a;--kt-btn-sh:0 5px 0 #a8221f;--kt-eic-rad:12px;
  --kt-bar:rgba(255,248,231,.92);--kt-foot:#1e2a3a;--kt-foot-ink:#fff8e7;--kt-sum:linear-gradient(135deg,#fdd835,#fb8c00);--kt-sum-ink:#1e2a3a;--kt-wallet:linear-gradient(135deg,#1e88e5,#8e24aa);--kt-wallet-ink:#fff;
  --kt-buy-label:'Ambil balok';--kt-cart-label:'Kotak mainan';--kt-login-back:rgba(30,42,58,.55);--kt-login-card:#fff;--kt-ring:rgba(229,57,53,.2);color-scheme:light}
#tkL .bl-page .kt-step-i{color:#fff;background:#1e88e5;border:3px solid #1e2a3a;border-radius:12px}
#tkL .bl-page .kt-step:nth-child(2) .kt-step-i{background:#43a047}
#tkL .bl-page .kt-step:nth-child(3) .kt-step-i{background:#e53935}
#tkL .bl-page .kt-step{box-shadow:0 8px 0 #f0d58a}
#tkL .bl-page .kt-step em{color:#fdd835}
#tkL .bl-page .kt-head h2{letter-spacing:-.01em}

#tkL .bl-studs{display:flex;justify-content:space-around;gap:6px}
#tkL .bl-studs i{display:block;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.75),transparent 34%),color-mix(in srgb,var(--c,#e53935) 88%,#fff);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 2px rgba(0,0,0,.12)}

#tkL .bl-hero{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,5vw,60px) clamp(16px,4vw,44px) 0}
#tkL .bl-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;background:#fdd835;border:3px solid #1e2a3a;box-shadow:0 4px 0 #1e2a3a;font-size:13.5px;font-weight:800;color:#1e2a3a}
#tkL .bl-hero h1{margin:20px 0 14px;font:800 clamp(40px,5.6vw,72px)/1 var(--kt-disp);color:var(--kt-ink)}
#tkL .bl-hero h1 span{color:var(--kt-acc);-webkit-text-stroke:0}
#tkL .bl-copy>p{max-width:46ch;margin:0 0 22px;color:var(--kt-mut);font-size:16.5px;line-height:1.6;font-weight:600}
#tkL .bl-page .kt-search{border:3px solid #1e2a3a;box-shadow:0 6px 0 #1e2a3a}

#tkL .bl-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:500px;perspective:1200px;padding-bottom:30px}
#tkL .bl-tower{display:flex;flex-direction:column-reverse;align-items:center;gap:30px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-28deg);animation:blSway 9s ease-in-out infinite alternate}
@keyframes blSway{to{transform:rotateX(-18deg) rotateY(-12deg)}}
#tkL .bl-stage:hover .bl-tower{animation-play-state:paused}
#tkL .bl-brick{--W:230px;--H:62px;--Z:31px;position:relative;width:var(--W);height:var(--H);padding:0!important;transform-style:preserve-3d;animation:blDrop .8s cubic-bezier(.3,1.4,.5,1) var(--d) backwards}
#tkL .bl-brick:nth-child(even){margin-left:56px}
#tkL .bl-brick:nth-child(3n){--W:200px}
@keyframes blDrop{from{transform:translateY(-420px);opacity:0}60%{opacity:1}}
#tkL .bl-face{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px;transform:translateZ(var(--Z));border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 92%,#fff),var(--c));box-shadow:inset 0 -6px 0 rgba(0,0,0,.14);color:#fff;text-align:left}
#tkL .bl-brick .bl-side{position:absolute;top:0;left:calc(100% - var(--Z));width:calc(var(--Z) * 2);height:100%;transform:rotateY(90deg);border-radius:6px;background:color-mix(in srgb,var(--c) 66%,#000)}
#tkL .bl-brick>.bl-studs{position:absolute;left:0;top:calc(var(--Z) * -1);width:100%;height:calc(var(--Z) * 2);padding:0 14px;align-items:center;transform:rotateX(90deg);border-radius:6px;background:color-mix(in srgb,var(--c) 82%,#fff)}
#tkL .bl-brick>.bl-studs i{width:30px;height:30px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.18)}
#tkL .bl-face-pic{flex:0 0 44px;height:44px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
#tkL .bl-face-t{display:flex;flex-direction:column;min-width:0}
#tkL .bl-face-t b{font:800 14.5px/1.15 var(--kt-disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(0,0,0,.25)}
#tkL .bl-face-t small{font:800 12.5px var(--kt-body);opacity:.95}
#tkL .bl-face-t small small{font-size:10px}
#tkL .bl-brick[style*="#fdd835"] .bl-face{color:#1e2a3a}
#tkL .bl-brick[style*="#fdd835"] .bl-face-t b{text-shadow:none}
#tkL button.bl-brick:hover .bl-face{filter:brightness(1.08)}
#tkL button.bl-brick:hover{transform:translateZ(16px);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
#tkL .bl-brick[data-habis] .bl-face{filter:grayscale(.7)}
#tkL .bl-base{display:block;width:min(420px,92%);margin-top:18px;padding:12px 18px;border-radius:12px;background:#43a047;box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),0 16px 22px -12px rgba(30,42,58,.6);--c:#43a047}
#tkL .bl-base i{width:20px;height:20px}
@media(max-width:900px){#tkL .bl-hero{grid-template-columns:minmax(0,1fr)}#tkL .bl-stage{min-height:440px}}
@media(max-width:480px){#tkL .bl-stage{min-height:400px;overflow:hidden;margin:0 -16px}#tkL .bl-brick{--W:200px;--H:56px;--Z:28px}#tkL .bl-brick:nth-child(3n){--W:178px}#tkL .bl-brick:nth-child(even){margin-left:34px}#tkL .bl-tower{gap:26px}}

#tkL .bl-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:30px 16px;padding-top:14px}
#tkL .bl-cat{position:relative;display:flex!important;flex-direction:column;align-items:stretch;padding:0!important;text-align:left;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
#tkL .bl-cat>.bl-studs{position:absolute;left:12px;right:12px;top:-14px;justify-content:space-around}
#tkL .bl-cat>.bl-studs i{width:30px;height:16px;border-radius:6px 6px 2px 2px;border:3px solid #1e2a3a;border-bottom:0;box-shadow:inset 0 4px 0 rgba(255,255,255,.4)}
#tkL .bl-cat-body{position:relative;display:flex;flex-direction:column;gap:2px;min-height:96px;padding:16px;border-radius:10px;background:var(--c);border:3px solid #1e2a3a;box-shadow:inset 0 -8px 0 rgba(0,0,0,.15),0 7px 0 #1e2a3a;color:#fff}
#tkL .bl-cat b{font:800 18px/1.15 var(--kt-disp);overflow-wrap:anywhere}
#tkL .bl-cat small{font:700 12.5px var(--kt-body);opacity:.9}
#tkL .bl-cat[style*="#fdd835"] .bl-cat-body{color:#1e2a3a}
#tkL .bl-cat:hover{transform:translateY(-6px) rotate(-1.5deg)}
#tkL .bl-cat:active{transform:translateY(5px)}
#tkL .bl-cat:active .bl-cat-body{box-shadow:inset 0 -8px 0 rgba(0,0,0,.15),0 2px 0 #1e2a3a}

#tkL .bl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:36px 18px;padding-top:16px}
#tkL .bl-card{position:relative;display:flex!important;flex-direction:column;padding:0!important;text-align:left;transition:transform .15s}
#tkL .bl-card>.bl-studs{position:absolute;left:14px;right:14px;top:-15px;z-index:1}
#tkL .bl-card>.bl-studs i{width:32px;height:17px;border-radius:7px 7px 2px 2px;border:3px solid #1e2a3a;border-bottom:0;box-shadow:inset 0 4px 0 rgba(255,255,255,.45)}
#tkL .bl-card-in{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;padding:14px;border-radius:12px;background:var(--c);border:3px solid #1e2a3a;box-shadow:inset 0 -9px 0 rgba(0,0,0,.14),0 9px 0 #1e2a3a;transition:box-shadow .15s}
#tkL .bl-card:hover{transform:translateY(-5px)}
#tkL .bl-card:active{transform:translateY(7px)}
#tkL .bl-card:active .bl-card-in{box-shadow:inset 0 -9px 0 rgba(0,0,0,.14),0 2px 0 #1e2a3a}
#tkL .bl-pic{display:block;aspect-ratio:1.2;margin-bottom:10px;border-radius:9px;overflow:hidden;border:3px solid #1e2a3a;background:#fff}
#tkL .bl-card small{font:700 12px var(--kt-body);color:rgba(255,255,255,.88)}
#tkL .bl-card strong{font:800 18px/1.15 var(--kt-disp);color:#fff;overflow-wrap:anywhere}
#tkL .bl-price{font:800 16px var(--kt-body);color:#fff}
#tkL .bl-price small{font-size:11px;color:inherit;opacity:.85}
#tkL .bl-card[style*="#fdd835"] :is(small,strong,.bl-price){color:#1e2a3a}
#tkL .bl-go{margin-top:auto;padding:9px 12px;border-radius:10px;background:#fff;color:#1e2a3a;font:800 13.5px var(--kt-body);text-align:center;border:3px solid #1e2a3a}
#tkL .bl-price+.bl-go{margin-top:12px}
#tkL .bl-off{position:absolute;right:-10px;top:-8px;z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fdd835;color:#1e2a3a;font:800 13px var(--kt-disp);border:3px solid #1e2a3a;transform:rotate(12deg)}
#tkL .bl-closed{position:absolute;left:50%;top:32%;z-index:2;transform:translate(-50%,-50%) rotate(-5deg);padding:6px 12px;border-radius:8px;background:#1e2a3a;color:#fff;font:800 12px var(--kt-body);white-space:nowrap}
#tkL .bl-card.is-off .bl-card-in{filter:grayscale(.75)}

#tkL .bl-sets{display:flex;gap:30px;overflow-x:auto;padding:16px 10px 30px;scroll-snap-type:x mandatory;perspective:1000px;scrollbar-width:thin}
#tkL .bl-set{flex:0 0 200px;scroll-snap-align:start;padding:0!important}
#tkL .bl-set-3d{--Z:22px;position:relative;display:block;height:250px;transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(6deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
#tkL .bl-set:hover .bl-set-3d{transform:rotateY(-6deg) rotateX(2deg) translateZ(14px)}
#tkL .bl-set-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;transform:translateZ(var(--Z));border-radius:10px;border:3px solid #1e2a3a;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));color:#fff;text-align:center}
#tkL .bl-set-side{position:absolute;top:0;left:calc(100% - var(--Z));width:calc(var(--Z) * 2);height:100%;transform:rotateY(90deg);border-radius:8px;background:color-mix(in srgb,var(--c) 60%,#000);border:3px solid #1e2a3a}
#tkL .bl-set-top{position:absolute;left:0;top:calc(var(--Z) * -1);width:100%;height:calc(var(--Z) * 2);transform:rotateX(90deg);border-radius:8px;background:color-mix(in srgb,var(--c) 75%,#fff);border:3px solid #1e2a3a}
#tkL .bl-set-no{align-self:flex-start;padding:2px 8px;border-radius:6px;background:#1e2a3a;color:#fdd835;font:800 11px var(--kt-disp);letter-spacing:.06em}
#tkL .bl-set-pic{display:block;width:96px;height:96px;margin:6px 0;border-radius:14px;overflow:hidden;border:3px solid #1e2a3a;background:#fff}
#tkL .bl-set b{font:800 15px/1.15 var(--kt-disp);overflow-wrap:anywhere}
#tkL .bl-set strong{font:800 15px var(--kt-body)}
#tkL .bl-set strong small{font-size:10px}
#tkL .bl-set em{font-style:normal;padding:2px 10px;border-radius:999px;background:#fdd835;color:#1e2a3a;font:800 12px var(--kt-body)}
#tkL .bl-set[style*="#fdd835"] .bl-set-front{color:#1e2a3a}
#tkL .bl-set.is-off{opacity:.55}

html[data-tkl="balok"] #app .pcard{border:3px solid #1e2a3a!important;box-shadow:0 7px 0 #1e2a3a!important;border-radius:14px!important}

html[data-tkl="balok"] .bl-ltower{display:flex;flex-direction:column;align-items:center;margin:0 0 14px}
html[data-tkl="balok"] .bl-lflag{display:flex;align-items:flex-end;gap:0;height:40px;opacity:0;transform:translateY(10px);transition:.4s cubic-bezier(.3,1.6,.5,1)}
html[data-tkl="balok"] .bl-lflag i{display:block;width:3px;height:40px;background:#1e2a3a}
html[data-tkl="balok"] .bl-lflag b{align-self:flex-start;max-width:130px;padding:4px 10px;background:#e53935;color:#fff;font:800 11.5px 'Baloo 2',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);animation:blWave 1.6s ease-in-out infinite;transform-origin:left}
@keyframes blWave{50%{transform:skewY(-6deg)}}
html[data-tkl="balok"] .bl-ltower.is-full .bl-lflag{opacity:1;transform:none}
html[data-tkl="balok"] .bl-lstack{display:flex;flex-direction:column-reverse;align-items:center;min-height:126px;justify-content:flex-start}
html[data-tkl="balok"] .bl-lb{position:relative;display:block;width:var(--w);height:18px;margin-top:2px;border-radius:4px;background:var(--c);border:2px solid #1e2a3a;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);opacity:0;transform:translateY(-40px) scale(.8);transition:transform .35s cubic-bezier(.3,1.7,.5,1),opacity .2s}
html[data-tkl="balok"] .bl-lb:before{content:'';position:absolute;left:6px;right:6px;top:-7px;height:6px;background:radial-gradient(circle at 6px 6px,var(--c) 5px,transparent 5.5px) 0 0/16px 7px repeat-x}
html[data-tkl="balok"] .bl-lb.on{opacity:1;transform:none}
html[data-tkl="balok"] .bl-lb:nth-child(even){margin-left:14px}
html[data-tkl="balok"] .bl-lbase{display:block;width:130px;height:12px;border-radius:4px;background:#43a047;border:2px solid #1e2a3a}
html[data-tkl="balok"] .bl-lsay{margin-top:10px;font:700 12.5px 'Nunito',sans-serif;color:var(--kt-mut)}
html[data-tkl="balok"] .bl-ltower.is-full .bl-lsay{color:var(--kt-acc)}
html[data-tkl="balok"] .bl-ltower-sm .bl-lsay{display:none}
html[data-tkl="balok"] :is(#loginModal,#forgotModalTk) .modal{border:3px solid #1e2a3a!important;box-shadow:0 10px 0 #1e2a3a!important}

@media(max-width:640px){
  html[data-tkl="balok"] #bottomNav{background:#1e88e5!important;border:3px solid #1e2a3a!important;box-shadow:0 7px 0 #1e2a3a!important;border-radius:14px!important;margin-top:12px}
  html[data-tkl="balok"] #bottomNav::after{content:'';position:absolute;left:16px;right:16px;top:-11px;height:10px;background:radial-gradient(ellipse at 50% 100%,#1e88e5 9px,transparent 9.5px) 0 0/34px 10px repeat-x;filter:drop-shadow(0 -2px 0 #1e2a3a);pointer-events:none}
  html[data-tkl="balok"] #bottomNav .bn-item{color:#e3f0ff!important}
  html[data-tkl="balok"] #bottomNav .bn-item.on{color:#1e2a3a!important}
  html[data-tkl="balok"] #bottomNav .bn-item::before{background:#fdd835;border-radius:10px;border:3px solid #1e2a3a;box-shadow:0 4px 0 #1e2a3a}
}
@media(prefers-reduced-motion:reduce){#tkL .bl-tower,#tkL .bl-brick{animation:none}}