@font-face{font-family:'AmiriQuran';src:url('fonts/AmiriQuran.ttf') format('truetype');font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
#sekolah,#skJalur,#skLesson,#skRapor{font-family:'AmiriQuran','Nunito',system-ui,sans-serif}
/* BiAthena — Sekolah BiAthena (Sesi 1). Semua kelas berawalan sk- agar tidak bentrok. */
.sk-hero{position:relative;margin:0 16px 8px;min-height:62px;border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#059669,#047857 60%,#065f46);box-shadow:0 6px 16px rgba(4,120,87,.35);-webkit-tap-highlight-color:transparent}
.sk-hero:active{transform:scale(.97)}
.sk-hero-img{height:54px;width:auto;margin-top:-4px;animation:skBob 2.6s ease-in-out infinite;z-index:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.sk-hero-txt{display:flex;flex-direction:column;color:#fff;flex:1;min-width:0;z-index:1}
.sk-hero-txt b{font-size:1.02rem;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.sk-hero-txt span{font-size:.72rem;font-weight:800;opacity:.92}
.sk-hero-arrow{color:#fff;font-size:1.7rem;font-weight:900;z-index:1}
.sk-hero:after{content:"";position:absolute;top:-40%;left:-30%;width:40%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(18deg);animation:zoShine 3.6s ease-in-out infinite}

.sk-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 14px 28px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#ede9fe,#f5f3ff 40%,#fdf4ff)}
.sk-top{display:flex;align-items:flex-end;gap:10px}
.sk-top img{height:84px;width:auto;animation:skBob 2.6s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.sk-bubble{position:relative;flex:1;background:#fff;border:2px solid #ddd6fe;border-radius:18px;padding:9px 12px;font-weight:800;font-size:.82rem;color:#3b0764;line-height:1.3;min-height:44px;display:flex;align-items:center}
.sk-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;flex-shrink:0}
.sk-chips::-webkit-scrollbar{display:none}
.sk-chip{flex:none;min-height:42px;padding:0 14px;border-radius:21px;border:2px solid #ddd6fe;background:#fff;color:#3b0764;font-weight:900;font-size:.85rem;cursor:pointer;font-family:inherit}
.sk-chip.on{background:#6d28d9;border-color:#6d28d9;color:#fff}
.sk-hint{background:#fff;border:2px solid #ddd6fe;border-radius:14px;padding:9px 12px;font-size:.8rem;font-weight:800;color:#3b0764;line-height:1.35}
.sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fnb-card.sk-card,.sk-card{width:auto;height:auto;min-height:172px;padding:10px 8px 12px;justify-content:space-between;border-radius:22px;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk-card:active{transform:scale(.95)}
.sk-card .fnb-img{width:80px;height:80px}
.sk-card .sk-ico{width:80px;height:80px;display:block}
.sk-card .sk-t{font-size:.95rem;font-weight:900;text-align:center;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.sk-card .sk-s{font-size:.66rem;font-weight:800;text-align:center;opacity:.95;line-height:1.2}
.sk-badge{align-self:flex-end;background:rgba(0,0,0,.35);border-radius:12px;padding:2px 9px;font-size:.62rem;font-weight:900;color:#fff}
.sk-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.3);width:88%;margin-top:5px}
.sk-bar i{display:block;height:7px;border-radius:4px;background:#fcd34d}
.sk-card.arb{background:linear-gradient(160deg,#0f5e6e,#1b8499)}
.sk-card.man{background:linear-gradient(160deg,#a31d17,#d03a2e)}
.sk-card.sci{background:linear-gradient(160deg,#065f46,#10b981)}
.sk-card.cod{background:linear-gradient(160deg,#0b5d4b,#1e8a6e)}
.sk-card.kri{background:linear-gradient(160deg,#6a2a8a,#9a45c2)}
.sk-note{background:#fcd34d;border-radius:16px;padding:10px 14px;font-size:.8rem;font-weight:900;color:#3b2a00;line-height:1.35}
.sk-rapor-btn{align-self:flex-start;border:none;background:#6d28d9;color:#fff;font-weight:900;border-radius:20px;padding:9px 16px;font-family:inherit;font-size:.82rem;cursor:pointer}

/* animasi ikon */
@keyframes skBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes skSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes skTw{0%,100%{transform:scale(.5);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@keyframes skBd{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes skBu{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes skBlink{50%{opacity:0}}
@keyframes skPan{0%,100%{transform:translate(0,0)}25%{transform:translate(10px,-4px)}50%{transform:translate(4px,8px)}75%{transform:translate(-8px,2px)}}
@keyframes skSpin{to{transform:rotate(360deg)}}
@keyframes skShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes skPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.sk-sway{animation:skSway 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.sk-tw{animation:skTw 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sk-fl{animation:skBob 2.2s ease-in-out infinite}
.sk-bd{animation:skBd 2.4s ease-in-out infinite}
.sk-bu{animation:skBu 2.4s ease-in-out infinite}
.sk-bk{animation:skBlink 1s steps(1) infinite}
.sk-pan{animation:skPan 3.5s ease-in-out infinite}
.sk-sp{animation:skSpin 14s linear infinite;transform-box:fill-box;transform-origin:center}

/* halaman jalur */
.sk-jhead{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#fff;flex-shrink:0}
.sk-jhead h2{flex:1;margin:0;font-size:1.1rem;font-weight:900;line-height:1.1}
.sk-jhead small{display:block;font-size:.68rem;font-weight:800;opacity:.92}
.sk-lv{background:#fff;border:2px solid #e9e3fb;border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sk-lv.lock{opacity:.78}
.sk-lv-top{display:flex;align-items:center;gap:10px}
.sk-lv-n{width:44px;height:44px;border-radius:22px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;flex:none;text-align:center;line-height:1}
.sk-lv-t{flex:1;min-width:0}
.sk-lv-t b{display:block;font-size:.95rem;font-weight:900;color:#2a1b4d}
.sk-lv-t span{font-size:.72rem;font-weight:800;color:#6b5a8e;line-height:1.25;display:block}
.sk-ls{display:flex;flex-wrap:wrap;gap:7px}
.sk-l{border:2px solid var(--c,#6d28d9);background:#fff;color:var(--c,#6d28d9);font-weight:900;font-family:inherit;font-size:.8rem;border-radius:16px;padding:8px 12px;min-height:42px;cursor:pointer;text-align:left}
.sk-l.done{background:var(--c,#6d28d9);color:#fff}
.sk-l.off{opacity:.55;cursor:default}
.sk-soon{font-size:.72rem;font-weight:800;color:#6b5a8e;background:#f5f3ff;border-radius:12px;padding:7px 10px}

/* pelajaran */
.sk-lbody{flex:1;min-height:0;overflow-y:auto;padding:10px 14px 18px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#ecfdf5,#f5f3ff)}
.sk-steps{display:flex;gap:5px;padding:0 12px 6px;flex-shrink:0}
.sk-steps div{flex:1;text-align:center;font-size:.6rem;font-weight:900;color:#fff}
.sk-steps div i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.35);margin-bottom:3px}
.sk-steps div.on i,.sk-steps div.done i{background:#fcd34d}
.sk-guru{display:flex;align-items:flex-end;gap:8px}
.sk-guru img{height:96px;width:auto;flex:none;animation:skBob 2.6s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.sk-card2{background:#fff;border:2px solid #d1fae5;border-radius:22px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:skPop .35s ease-out}
.sk-big{font-size:5.4rem;line-height:1.15;font-weight:700;color:#2a1b4d;text-align:center}
.sk-big.sm{font-size:1.7rem;line-height:2.4;font-weight:700;padding:0 4px}
.sk-cap{font-size:1.15rem;font-weight:900;color:#065f46;text-align:center}
.sk-txt{font-size:.88rem;font-weight:800;color:#374151;text-align:center;line-height:1.35}
.sk-q{font-size:1.05rem;font-weight:900;color:#2a1b4d;text-align:center;line-height:1.3}
.sk-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.sk-opts.t{grid-template-columns:1fr}
.sk-opt{min-height:64px;border-radius:18px;border:3px solid #e5e7eb;background:#fff;color:#2a1b4d;font-family:inherit;font-weight:900;font-size:1.05rem;cursor:pointer;padding:6px}
.sk-opt.ar{font-size:2.4rem;font-weight:700}
.sk-opt.ok{background:#d1fae5;border-color:#059669}
.sk-opt.no{background:#fee2e2;border-color:#dc2626;animation:skShake .35s}
.sk-btn{border:none;border-radius:26px;min-height:50px;padding:0 22px;font-family:inherit;font-weight:900;font-size:1rem;cursor:pointer;background:#059669;color:#fff;box-shadow:0 4px 0 #047857}
.sk-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #047857}
.sk-btn.sec{background:#fff;color:#047857;border:3px solid #059669;box-shadow:none}
.sk-btn[disabled]{opacity:.45;cursor:default}
.sk-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sk-fb{min-height:24px;font-weight:900;font-size:.95rem;text-align:center}
.sk-gm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.sk-gm button{min-height:84px;border-radius:20px;border:3px solid #a7f3d0;background:#fff;font-size:2.6rem;font-weight:700;cursor:pointer;font-family:inherit;color:#2a1b4d}
.sk-stars{display:flex;gap:6px;justify-content:center;font-size:3rem}
.sk-stars span{animation:skPop .5s ease-out both}
.sk-stars span.off{filter:grayscale(1);opacity:.35}
.sk-big-score{font-size:2.2rem;font-weight:900;color:#065f46;text-align:center}

/* rapor */
.sk-rrow{background:#fff;border:2px solid #e9e3fb;border-radius:16px;padding:10px 12px}
.sk-rrow b{font-size:.9rem;font-weight:900;color:#2a1b4d;display:flex;justify-content:space-between}
.sk-rbar{height:10px;border-radius:5px;background:#ede9fe;margin-top:6px}
.sk-rbar i{display:block;height:10px;border-radius:5px;background:#7c3aed}
.sk-rstat{display:flex;gap:10px}
.sk-rstat div{flex:1;background:#fcd34d;border-radius:18px;padding:10px;text-align:center;font-weight:900;color:#3b2a00}
.sk-rstat div b{display:block;font-size:1.7rem}

@media (prefers-reduced-motion:reduce){.sk-hero-img,.sk-top img,.sk-guru img,.sk-sway,.sk-tw,.sk-fl,.sk-bd,.sk-bu,.sk-bk,.sk-pan,.sk-sp,.sk-hero:after,.sk-card2{animation:none}}

.sk-svg{display:flex;justify-content:center;margin:6px 0}.sk-svg svg{height:150px;width:auto;max-width:100%}
.sk-emb{position:fixed;inset:0;z-index:99999;background:#fff;display:flex;flex-direction:column}.sk-emb-bar{flex:none;display:flex;align-items:center;gap:12px;background:#0b5d4b;color:#fff;padding:6px 10px;font-weight:900}.sk-emb-bar button{border:none;border-radius:16px;background:#fff;color:#0b5d4b;font-weight:900;padding:8px 14px;min-height:40px;cursor:pointer;font-family:inherit}.sk-emb iframe{flex:1;width:100%;border:0;background:#fff}
.sk-link-btn{align-self:flex-start;border:2px solid #ddd6fe;background:#fff;color:#4c1d95;font-weight:900;border-radius:20px;padding:8px 14px;font-family:inherit;font-size:.78rem;cursor:pointer;margin-top:6px}.sk-src{background:#fff;border:2px solid #ede9fe;border-radius:14px;padding:10px 12px;margin:8px 0;font-size:.82rem;line-height:1.45;color:#3b0764}

/* ───── Tema Mandarin (Sesi 7): layar penuh tanpa geser, hanzi timbul 3D ───── */
.sk-card.man .sk-ico text{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
#skLesson.sk-zh{height:100%}
#skLesson.sk-zh .sk-lbody{position:relative;overflow:hidden;padding:4px 10px 8px;gap:6px;background:radial-gradient(circle at 20% 15%,rgba(255,215,0,.18) 0 60px,transparent 61px),radial-gradient(circle at 85% 70%,rgba(255,215,0,.14) 0 80px,transparent 81px),linear-gradient(180deg,#b91c1c,#7f1d1d)}
#skLesson.sk-zh .sk-guru{flex:none;align-items:center;z-index:1}
#skLesson.sk-zh .sk-guru img{height:50px}
#skLesson.sk-zh .sk-bubble{min-height:0;padding:6px 10px;font-size:.78rem;border-color:#fcd34d;background:#fffbeb;color:#7f1d1d}
#skLesson.sk-zh .sk-card2{flex:1;min-height:0;background:rgba(255,255,255,.06);border:2px solid rgba(252,211,77,.55);padding:8px 8px 10px;gap:6px;justify-content:space-between;z-index:1}
#skLesson.sk-zh .sk-cap{color:#fde68a;font-size:1rem;flex:none}
#skLesson.sk-zh .sk-txt{color:#fff;font-size:.8rem;flex:none;max-height:4.9em;overflow:hidden}
#skLesson.sk-zh .sk-q{color:#fff;font-size:.95rem;flex:none}
#skLesson.sk-zh .sk-fb{min-height:20px;flex:none;color:#fff}
#skLesson.sk-zh .sk-fb span{color:#fde68a!important}
#skLesson.sk-zh .sk-row{flex:none;flex-wrap:nowrap;gap:7px;width:100%}
#skLesson.sk-zh .sk-btn{min-height:46px;padding:0 14px;font-size:.92rem;background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#7f1d1d;box-shadow:0 4px 0 #b45309;flex:1 1 auto;white-space:nowrap}
#skLesson.sk-zh .sk-btn.sec{background:#fffbeb;border:3px solid #fcd34d;color:#991b1b;box-shadow:none;flex:0 1 auto}
#skLesson.sk-zh .sk-big{color:#fde68a}
#skLesson.sk-zh .sk-opts{flex:none;gap:7px}
#skLesson.sk-zh .sk-opt{min-height:52px;font-size:.95rem;border-color:#fcd34d;background:#fffbeb;color:#7f1d1d;padding:4px}
#skLesson.sk-zh .sk-opt.zh{font-size:2rem;font-weight:900;min-height:64px;font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;text-shadow:0 2px 0 #fcd34d}
#skLesson.sk-zh .sk-opt.ok{background:#bbf7d0;border-color:#16a34a}
#skLesson.sk-zh .sk-opt.no{background:#fecaca;border-color:#dc2626}
#skLesson.sk-zh .sk-opts.t .sk-opt{min-height:46px}
#skLesson.sk-zh .sk-gm{flex:1;min-height:0;grid-auto-rows:1fr}
#skLesson.sk-zh .sk-gm button{min-height:0;border-color:#fcd34d;background:#fffbeb;color:#991b1b;font-size:clamp(1.6rem,8vw,2.6rem);font-weight:900;font-family:'Noto Sans SC','PingFang SC',sans-serif;text-shadow:0 3px 0 #fcd34d}
#skLesson.sk-zh .sk-svg.zh-sv{margin:0;flex:none}#skLesson.sk-zh .sk-svg.zh-sv svg{height:58px}#skLesson.sk-zh .sk-q+.sk-svg.zh-sv{flex:1;min-height:0}#skLesson.sk-zh .sk-q+.sk-svg.zh-sv svg{height:100%;max-height:180px}
#skLesson.sk-zh .sk-stars{font-size:2.6rem}
#skLesson.sk-zh .sk-big-score{color:#fde68a}
.zh-lan{position:absolute;top:-4px;font-style:normal;font-size:34px;z-index:0;transform-origin:50% 0;animation:zhSwing 3s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.zh-lan.l{left:4px}.zh-lan.r{right:4px;animation-delay:-1.5s}
.zh-stage{flex:1;min-height:0;width:100%;display:flex;align-items:stretch;justify-content:center}
.zh-stage.sm{flex:1 1 0}
.zh-grid{position:relative;flex:1;min-height:0;max-width:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;overflow:hidden;cursor:pointer;
  background:linear-gradient(rgba(252,211,77,.35),rgba(252,211,77,.35)) center/100% 2px no-repeat,linear-gradient(90deg,rgba(252,211,77,.35),rgba(252,211,77,.35)) center/2px 100% no-repeat,linear-gradient(160deg,#dc2626,#991b1b);
  border:4px solid #fcd34d;box-shadow:inset 0 0 0 4px #991b1b,inset 0 0 0 6px rgba(252,211,77,.6),0 8px 18px rgba(0,0,0,.35)}
.zh-grid.tl{cursor:default;touch-action:none}
.zh-py{flex:none;font-size:1.3rem;font-weight:900;color:#fff;letter-spacing:.5px;text-shadow:0 2px 0 #7f1d1d;padding-top:4px}
.zh-mean{flex:none;font-size:1rem;font-weight:900;color:#fde68a;text-align:center;padding:0 8px 6px;line-height:1.2;text-shadow:0 2px 0 #7f1d1d}
.zh-mean span{font-size:1.4rem}
.zh-han{font-family:'Noto Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif;font-weight:900;line-height:1;color:#ffe14d;white-space:nowrap;font-size:120px;
  text-shadow:0 .01em 0 #f5b800,0 .02em 0 #e9aa00,0 .03em 0 #dc9c00,0 .04em 0 #cf8e00,0 .05em 0 #c28000,0 .06em 0 #b47200,0 .07em 0 #a66400,0 .08em 0 #8f5300,0 .1em .04em rgba(0,0,0,.35),0 .14em .12em rgba(0,0,0,.35);
  -webkit-text-stroke:.012em #fff3b0;animation:zhIn .65s cubic-bezier(.2,1.5,.4,1) both,zhFloat 3.4s ease-in-out .65s infinite;display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.zh-han.bn{animation:zhBounce .5s ease-out}
.zh-han.wr{animation:none;gap:4px}
.zh-wbox{filter:drop-shadow(0 4px 0 #a66400) drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.zh-wbox svg{display:block}
@keyframes zhIn{from{opacity:0;transform:perspective(700px) rotateX(75deg) scale(.3)}to{opacity:1;transform:none}}
@keyframes zhFloat{0%,100%{transform:perspective(700px) rotateY(-9deg) translateY(0)}50%{transform:perspective(700px) rotateY(9deg) translateY(-6px)}}
@keyframes zhBounce{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-4deg)}70%{transform:scale(.94) rotate(2deg)}100%{transform:scale(1)}}
@keyframes zhSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.zh-han,.zh-lan{animation:none}}
.sk-kam-list{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:10px;background:#fff7ed}
.sk-kam-list button{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid #fcd34d;background:#fff;border-radius:14px;padding:8px 6px;font-family:inherit;cursor:pointer;color:#7f1d1d}
.sk-kam-list b{font-size:1.9rem;font-family:'Noto Sans SC','PingFang SC',sans-serif;font-weight:900}
.sk-kam-list i{font-style:normal;font-weight:900;font-size:.85rem;color:#b91c1c}
.sk-kam-list span{font-size:.72rem;font-weight:800;text-align:center;line-height:1.2;color:#374151}
/* ───── Tema Inggris (Sesi 7): biru langit, huruf putih timbul 3D ───── */
.zh-han{width:100%;text-align:center}
.zh-han.lg{white-space:normal;line-height:1.08;padding:0 6px}
#skLesson.sk-en .sk-lbody{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.25) 0 50px,transparent 51px),radial-gradient(circle at 82% 72%,rgba(255,255,255,.18) 0 70px,transparent 71px),linear-gradient(180deg,#38bdf8,#1d4ed8)}
#skLesson.sk-en .sk-bubble{border-color:#93c5fd;background:#eff6ff;color:#1e3a8a}
#skLesson.sk-en .sk-card2{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
#skLesson.sk-en .sk-cap{color:#fef08a}
#skLesson.sk-en .sk-opt{border-color:#93c5fd;background:#fff;color:#1e3a8a}
#skLesson.sk-en .sk-opt.ok{background:#bbf7d0;border-color:#16a34a}
#skLesson.sk-en .sk-opt.no{background:#fecaca;border-color:#dc2626}
#skLesson.sk-en .sk-btn{color:#1e3a8a}
#skLesson.sk-en .sk-btn.sec{background:#fff;border-color:#93c5fd;color:#1d4ed8}
#skLesson.sk-en .sk-big,#skLesson.sk-en .sk-big-score{color:#fef08a}
#skLesson.sk-en .zh-grid{background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) center/100% 2px no-repeat,linear-gradient(160deg,#6366f1,#4338ca);border-color:#fef08a;box-shadow:inset 0 0 0 4px #3730a3,inset 0 0 0 6px rgba(254,240,138,.55),0 8px 18px rgba(0,0,0,.3)}
#skLesson.sk-en .zh-py{text-shadow:0 2px 0 #312e81}
#skLesson.sk-en .zh-mean{color:#fef08a;text-shadow:0 2px 0 #312e81}
#skLesson.sk-en .zh-han{font-family:'Nunito','Baloo 2',system-ui,sans-serif;color:#fff;-webkit-text-stroke:.01em #e0e7ff;
  text-shadow:0 .01em 0 #c7d2fe,0 .02em 0 #a5b4fc,0 .03em 0 #818cf8,0 .04em 0 #6366f1,0 .05em 0 #4f46e5,0 .06em 0 #4338ca,0 .07em 0 #3730a3,0 .08em 0 #312e81,0 .1em .04em rgba(0,0,0,.3),0 .14em .12em rgba(0,0,0,.3)}
#skLesson.sk-en .sk-gm.en button{min-height:0;border-color:#93c5fd;background:#fff;color:#1d4ed8;font-size:clamp(1rem,5.2vw,1.5rem);font-weight:900;font-family:'Nunito',system-ui,sans-serif;text-shadow:0 2px 0 #c7d2fe;word-break:break-word}
#skLesson.sk-en .sk-gm.en{flex:1;min-height:0;grid-auto-rows:1fr}
/* navigasi bawah 6 tombol (Sesi 7): muat di layar 320px */
.bnav .ni{flex:1 1 0;min-width:0;padding:2px 1px}
.bnav .ni-lbl{white-space:nowrap;font-size:.58rem;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:360px){.bnav .ni-lbl{font-size:.52rem;letter-spacing:-.2px}}
/* Sesi 8: tema Kesehatan (hl, merah muda) & Sains Alam (sc, hijau) — huruf putih timbul 3D, layar penuh tanpa geser */
.zh-ico{flex:none;font-size:clamp(34px,8.5vh,70px);line-height:1.1;padding-top:4px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25)) drop-shadow(0 8px 10px rgba(0,0,0,.3));animation:zhFloat 3.4s ease-in-out infinite}
.zh-stage.sm .zh-ico{font-size:clamp(26px,6vh,46px)}
#skLesson.sk-hl .zh-han,#skLesson.sk-sc .zh-han{font-family:'Nunito','Baloo 2',system-ui,sans-serif;color:#fff;white-space:normal;line-height:1.08;padding:0 6px;text-align:center}
#skLesson.sk-hl .zh-han{-webkit-text-stroke:.01em #fce7f3;text-shadow:0 .01em 0 #fbcfe8,0 .02em 0 #f9a8d4,0 .03em 0 #f472b6,0 .04em 0 #ec4899,0 .05em 0 #db2777,0 .06em 0 #be185d,0 .07em 0 #9d174d,0 .08em 0 #831843,0 .1em .04em rgba(0,0,0,.3),0 .14em .12em rgba(0,0,0,.3)}
#skLesson.sk-sc .zh-han{-webkit-text-stroke:.01em #dcfce7;text-shadow:0 .01em 0 #bbf7d0,0 .02em 0 #86efac,0 .03em 0 #4ade80,0 .04em 0 #22c55e,0 .05em 0 #16a34a,0 .06em 0 #15803d,0 .07em 0 #166534,0 .08em 0 #14532d,0 .1em .04em rgba(0,0,0,.3),0 .14em .12em rgba(0,0,0,.3)}
#skLesson.sk-hl .sk-lbody{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.22) 0 50px,transparent 51px),radial-gradient(circle at 82% 72%,rgba(255,255,255,.16) 0 70px,transparent 71px),linear-gradient(180deg,#f472b6,#9d174d)}
#skLesson.sk-sc .sk-lbody{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.22) 0 50px,transparent 51px),radial-gradient(circle at 82% 72%,rgba(255,255,255,.16) 0 70px,transparent 71px),linear-gradient(180deg,#34d399,#065f46)}
#skLesson.sk-hl .zh-grid{background:linear-gradient(160deg,#ec4899,#9d174d);border-color:#fde68a;box-shadow:inset 0 0 0 4px #831843,inset 0 0 0 6px rgba(253,230,138,.55),0 8px 18px rgba(0,0,0,.3)}
#skLesson.sk-sc .zh-grid{background:linear-gradient(160deg,#10b981,#065f46);border-color:#fde68a;box-shadow:inset 0 0 0 4px #064e3b,inset 0 0 0 6px rgba(253,230,138,.55),0 8px 18px rgba(0,0,0,.3)}
#skLesson.sk-hl .zh-mean{color:#fef08a;text-shadow:0 2px 0 #831843}
#skLesson.sk-sc .zh-mean{color:#fef08a;text-shadow:0 2px 0 #064e3b}
#skLesson.sk-hl .sk-bubble{border-color:#f9a8d4;background:#fdf2f8;color:#831843}
#skLesson.sk-sc .sk-bubble{border-color:#86efac;background:#f0fdf4;color:#14532d}
#skLesson.sk-hl .sk-card2,#skLesson.sk-sc .sk-card2{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
#skLesson.sk-hl .sk-cap,#skLesson.sk-sc .sk-cap{color:#fef08a}
#skLesson.sk-hl .sk-cap:empty,#skLesson.sk-sc .sk-cap:empty{display:none}
#skLesson.sk-hl .sk-opt{border-color:#f9a8d4;background:#fff;color:#831843}
#skLesson.sk-sc .sk-opt{border-color:#86efac;background:#fff;color:#14532d}
#skLesson.sk-hl .sk-opt.ok,#skLesson.sk-sc .sk-opt.ok{background:#bbf7d0;border-color:#16a34a}
#skLesson.sk-hl .sk-opt.no,#skLesson.sk-sc .sk-opt.no{background:#fecaca;border-color:#dc2626}
#skLesson.sk-hl .sk-btn{color:#831843}#skLesson.sk-sc .sk-btn{color:#14532d}
#skLesson.sk-hl .sk-btn.sec{background:#fff;border-color:#f9a8d4;color:#9d174d}
#skLesson.sk-sc .sk-btn.sec{background:#fff;border-color:#86efac;color:#166534}
#skLesson.sk-hl .sk-big,#skLesson.sk-hl .sk-big-score,#skLesson.sk-sc .sk-big,#skLesson.sk-sc .sk-big-score{color:#fef08a}
#skLesson.sk-hl .sk-txt,#skLesson.sk-sc .sk-txt{font-size:.84rem;line-height:1.3;max-height:5.3em}
.sk-acu{grid-template-columns:1fr!important}
.sk-acu div{display:flex;flex-direction:column;gap:2px;border:2px solid #e5e7eb;background:#fff;border-radius:12px;padding:8px 10px}
.sk-acu div b{font-size:.85rem!important;font-family:inherit!important;color:#1f2937}
.sk-acu div.no{border-color:#fca5a5;background:#fef2f2}
.sk-acu div span{text-align:left!important}
.sk-kam.lat .sk-kam-list b{font-size:1.05rem;font-family:inherit;text-align:center;line-height:1.15}
@media (prefers-reduced-motion:reduce){.zh-ico{animation:none}}
.sk-opt.emo{font-size:2.3rem!important;min-height:72px!important;line-height:1}
.zh-3d{position:relative;flex:1.5 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;cursor:grab}
.zh-3d .zh-ico{font-size:clamp(40px,10vh,80px)}
.zh-3c{position:absolute;inset:0}
.zh-3d.on .zh-ico{visibility:hidden}
.zh-3h{position:absolute;right:8px;bottom:2px;font-size:.66rem;font-weight:900;color:#fff;opacity:0;background:rgba(0,0,0,.25);border-radius:9px;padding:1px 7px;pointer-events:none;z-index:2}
.zh-3d.on .zh-3h{opacity:.85}
.zh-stage.m3 .zh-han{flex:1 1 0}
/* ───── Sesi 10: ikon 3D Fluent, huruf lebih seimbang, latar alam lembut ───── */
.emi{width:1em;height:1em;object-fit:contain;vertical-align:-.12em;display:inline-block;pointer-events:none;-webkit-user-drag:none}
.zh-ico .emi{width:1.15em;height:1.15em}
.zh-ico{font-size:clamp(56px,15vh,128px);line-height:1}
.zh-stage.sm .zh-ico{font-size:clamp(40px,9vh,70px)}
.zh-3d .zh-ico{font-size:clamp(56px,14vh,120px)}
.sk-opt.emo .emi{width:1.35em;height:1.35em}
.sk-kam-list span .emi{width:1.5em;height:1.5em}
#skLesson.sk-hl .zh-han,#skLesson.sk-sc .zh-han,#skLesson.sk-en .zh-han{padding:0 7%;box-sizing:border-box}
/* kartu Sains: langit-ke-padang, sinar lembut di atas, bukit di bawah */
#skLesson.sk-sc .zh-grid{border:3px solid rgba(255,255,255,.85);
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 Q100 20 200 60 T400 50 V120 H0Z' fill='%2334d399' fill-opacity='.35'/%3E%3Cpath d='M0 95 Q120 55 240 90 T400 80 V120 H0Z' fill='%23065f46' fill-opacity='.45'/%3E%3C/svg%3E") bottom/100% 22% no-repeat,
   radial-gradient(ellipse 70% 45% at 50% 22%,rgba(255,255,255,.38),rgba(255,255,255,0) 70%),
   radial-gradient(circle at 15% 70%,rgba(255,255,255,.10) 0 26px,transparent 27px),
   radial-gradient(circle at 88% 35%,rgba(255,255,255,.10) 0 18px,transparent 19px),
   linear-gradient(180deg,#5eead4 0%,#22c3a6 38%,#0f9f7c 70%,#0b7a5f 100%);
  box-shadow:0 0 0 4px rgba(6,95,70,.35),0 10px 24px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.5)}
#skLesson.sk-sc .sk-lbody{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.35) 0 60px,transparent 61px),radial-gradient(circle at 85% 80%,rgba(255,255,255,.18) 0 80px,transparent 81px),linear-gradient(180deg,#a7f3d0,#34d399 45%,#059669)}
#skLesson.sk-hl .zh-grid{border:3px solid rgba(255,255,255,.85);
  background:radial-gradient(ellipse 70% 45% at 50% 22%,rgba(255,255,255,.38),rgba(255,255,255,0) 70%),radial-gradient(circle at 15% 70%,rgba(255,255,255,.10) 0 26px,transparent 27px),linear-gradient(180deg,#f9a8d4 0%,#ec4899 45%,#be185d 100%);
  box-shadow:0 0 0 4px rgba(131,24,67,.3),0 10px 24px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.5)}
#skLesson.sk-sc .zh-mean{margin-bottom:10px;color:#fff;background:rgba(6,78,59,.55);border-radius:14px;padding:2px 12px;text-shadow:0 1px 0 #064e3b}
#skLesson.sk-hl .zh-mean{margin-bottom:10px;color:#fff;background:rgba(131,24,67,.5);border-radius:14px;padding:2px 12px;text-shadow:0 1px 0 #831843}
/* Sesi 10 (v24): ikon di tengah separuh atas kartu & lebih besar */
.zh-stage:not(.sm) .zh-grid>.zh-ico{flex:1.15 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:10px 0 0;box-sizing:border-box}
.zh-stage:not(.sm) .zh-grid>.zh-ico .emi{height:80%;width:auto;aspect-ratio:1/1;max-height:210px;max-width:78%;min-height:56px;vertical-align:middle}
.zh-stage:not(.sm) .zh-grid>.zh-han{flex:1 1 0}
/* v24: tombol kembali modern — lingkaran putih kontras, ikon ‹ garis tebal (berlaku di semua halaman) */
.back-btn,.zo-pbtn[aria-label="Kembali"]{width:40px!important;height:40px!important;min-width:40px;border-radius:50%!important;padding:0!important;font-size:0!important;color:transparent!important;
  background:#fff!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 0 0 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.22)!important;
  display:flex!important;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.back-btn::before,.zo-pbtn[aria-label="Kembali"]::before{content:"";width:20px;height:20px;background:#1e1b4b;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;margin-left:-2px}
.back-btn:active,.zo-pbtn[aria-label="Kembali"]:active{transform:scale(.9)}
.sk-btn.sec.prv{display:flex;align-items:center;justify-content:center;font-size:0}
.sk-btn.sec.prv::before{content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== Sesi 11: beranda satu layar — aktivitas pindah ke Taman, dua kartu besar mengisi sisa layar ===== */
#home #homeAktCards,#home #homeAktPill{display:none!important}
#home>.zo-hero,#home>.sk-hero{flex:1 1 0;min-height:96px;max-height:300px;margin:0 14px 12px;border-radius:26px;padding:14px 18px;gap:14px}
#home>.zo-hero .zo-hero-ico{font-size:64px}
#home>.zo-hero .zo-hero-txt b,#home>.sk-hero .sk-hero-txt b{font-size:1.5rem;line-height:1.15}
#home>.zo-hero .zo-hero-txt span,#home>.sk-hero .sk-hero-txt span{font-size:.95rem;margin-top:4px;line-height:1.3}
#home>.zo-hero .zo-hero-dot{width:16px;height:16px}
#home>.sk-hero .sk-hero-img{height:auto;max-height:86%;width:28%;max-width:120px;object-fit:contain;align-self:flex-end;margin:0 0 -14px}
#home>.sk-hero .sk-hero-arrow{font-size:2.4rem}
#home>.zo-hero .zo-fl{font-size:26px}
#home .home-bnav-pad{flex:0 0 auto;height:var(--bnavH,84px)}
@media (max-height:600px){#home>.zo-hero .zo-hero-ico{font-size:46px}#home>.zo-hero .zo-hero-txt b,#home>.sk-hero .sk-hero-txt b{font-size:1.25rem}#home>.zo-hero .zo-hero-txt span,#home>.sk-hero .sk-hero-txt span{font-size:.8rem}#home>.zo-hero,#home>.sk-hero{margin-bottom:8px}}

/* Sesi 11: mode miring untuk game layar lebar (PhET, Music Blocks, Blockly, Piskel) */
.zo-pwrap.rot{overflow:hidden}
.zo-pwrap.rot #zoFrame{inset:auto;top:0;left:var(--zrw,100%);width:var(--zrh,100%);height:var(--zrw,100%);transform-origin:0 0;transform:rotate(90deg)}
.zo-rotbtn{font-size:1.05rem;opacity:.55;transition:transform .3s}
.zo-rotbtn.on{opacity:1;transform:rotate(90deg);background:#fde047}
.zo-rothint{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:6;background:rgba(30,27,75,.88);color:#fff;font-weight:900;font-size:1.05rem;text-align:center;padding:14px 18px;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .4s;line-height:1.35}
.zo-rothint small{font-size:.72rem;font-weight:700;opacity:.85}
.zo-rothint.show{opacity:1}

/* ===== Sesi 11 (v30): BERANDA BARU sesuai mockup Halo ===== */
#home{background:linear-gradient(180deg,#cdbdfd 0%,#e2d6fe 30%,#efe7ff 58%,#dccbfc 100%)!important}
#home .bh-old{display:none!important}
#bhHead{position:relative;flex:0 0 auto;width:100%;z-index:3}
#bhHead .bh-kepala{display:block;width:100%;height:auto;pointer-events:none}
#bhHead .bh-ava{position:absolute;left:82.6%;top:15%;width:13.2%;aspect-ratio:1;border:none;background:transparent;border-radius:50%;cursor:pointer}
#bhHead .bh-sound{position:absolute;right:3%;top:auto;bottom:-8px;width:34px;height:34px;font-size:.95rem;z-index:4}
.bh-card{position:relative;flex:1 1 0;min-height:140px;max-height:330px;margin:0 12px 14px;border-radius:26px;cursor:pointer;
 box-shadow:0 0 0 3px #fff,0 0 0 5px #f6d98b,0 12px 26px rgba(91,33,182,.28);transition:transform .15s}
.bh-card:active{transform:scale(.98)}
.bh-card .bh-art{position:absolute;inset:0;border-radius:26px;overflow:hidden}
.bh-card .bh-bg{width:100%;height:100%;object-fit:cover;display:block}
.bh-taman .bh-bg{object-position:22% 62%}
.bh-sekolah .bh-bg{object-position:88% 38%;filter:saturate(1.05)}
.bh-kid{position:absolute;left:1%;bottom:0;height:112%;max-width:58%;width:auto;object-fit:contain;object-position:left bottom;z-index:2;pointer-events:none;
 transform-origin:50% 100%;animation:bhBreath 3.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(60,20,120,.25))}
.bh-kid2{left:2%;height:110%;animation-delay:-1.6s;animation-name:bhBreath2}
@keyframes bhBreath{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-3px) rotate(-1.2deg) scale(1.018)}}
@keyframes bhBreath2{0%,100%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-2px) rotate(1deg) scale(1.012)}70%{transform:translateY(-4px) rotate(-.6deg) scale(1.02)}}
.bh-panel{position:absolute;right:0;top:0;bottom:0;width:47%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;
 padding:8px 10px 8px 14px;border-radius:44px 26px 26px 44px;background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(246,240,255,.95));box-shadow:-6px 0 18px rgba(91,33,182,.12)}
.bh-panel h3{margin:0;display:flex;flex-direction:column;line-height:1.02;color:#3b0f8c;font-weight:900;letter-spacing:-.3px}
.bh-panel h3 span{font-size:clamp(15px,5.2vw,23px)}
.bh-taman .bh-panel h3 b{font-size:clamp(26px,9.6vw,42px)}
.bh-sekolah .bh-panel h3 b{font-size:clamp(17px,6vw,27px);color:#14532d}
.bh-panel p{margin:0;display:flex;align-items:center;gap:5px;font-size:clamp(10px,3vw,13px);font-weight:800;color:#4c1d95;line-height:1.25;text-align:left}
.bh-panel p img{width:clamp(20px,6.5vw,28px);flex-shrink:0}
.bh-crown{width:clamp(28px,9vw,40px);margin-bottom:-2px;animation:bhCrown 2.8s ease-in-out infinite}
@keyframes bhCrown{50%{transform:translateY(-3px) rotate(-4deg)}}
.bh-btn{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:7px 8px 7px 14px;border-radius:99px;color:#fff;font-weight:900;font-size:clamp(12px,3.7vw,16px);white-space:nowrap;
 background:linear-gradient(180deg,#a26bff,#7c3aed 55%,#6d28d9);box-shadow:0 4px 0 #4c1d95,0 6px 12px rgba(76,29,149,.35),inset 0 2px 0 rgba(255,255,255,.35)}
.bh-btn i{font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.bh-sekolah .bh-panel{background:linear-gradient(140deg,rgba(250,255,240,.97),rgba(232,247,220,.95))}
.bh-sekolah .bh-panel p{color:#14532d}
.bh-sekolah .bh-btn{background:linear-gradient(180deg,#4ade80,#16a34a 55%,#15803d);box-shadow:0 4px 0 #14532d,0 6px 12px rgba(20,83,45,.35),inset 0 2px 0 rgba(255,255,255,.35)}
.bh-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 12px 3px 6px;border-radius:99px;background:linear-gradient(180deg,#22a046,#15803d);color:#fde68a;font-weight:900;font-size:clamp(11px,3.4vw,14px);box-shadow:0 2px 0 #14532d}
.bh-pill img{width:22px}
.bh-star{position:absolute;width:24px;z-index:4;pointer-events:none;animation:bhTw 2.2s ease-in-out infinite}
.bh-st1{left:50%;top:-10px}.bh-st2{right:5%;top:-12px;animation-delay:-1s}
@keyframes bhTw{50%{transform:scale(1.25) rotate(15deg);opacity:.8}}
/* menu bawah: kaca melengkung + ikon 3D */
#home .bh-nav{left:10px!important;right:10px!important;bottom:8px!important;border-radius:26px;background:rgba(255,255,255,.86)!important;border:2px solid rgba(255,255,255,.95)!important;
 box-shadow:0 8px 22px rgba(91,33,182,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 2px 7px!important}
#home .bh-nav .ni{flex:1;padding:2px 0;border-radius:16px;position:relative;background:none}
#home .bh-nav .ni+.ni:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(139,92,246,.18)}
#home .bh-nav .ni-icon{width:34px;height:34px;background:none!important;border:none!important;box-shadow:none!important;filter:none!important}
#home .bh-nav .ni-icon img{width:30px;height:30px}
#home .bh-nav .ni.active .ni-icon{transform:scale(1.12) translateY(-2px)}
#home .bh-nav .ni-lbl{font-size:.62rem;color:#4c1d95;font-weight:800}
#home .bh-nav .ni.active .ni-lbl{color:#7c3aed}
#home .bh-nav .ni.active:after{content:"";position:absolute;left:28%;right:28%;bottom:-4px;height:4px;border-radius:4px;background:#8b5cf6}
@media (prefers-reduced-motion:reduce){.bh-kid,.bh-crown,.bh-star{animation:none}}
.bh-kid2{z-index:4;max-width:57%}
#home .bh-nav .ni-lbl{font-size:clamp(8.5px,2.6vw,10.5px);white-space:nowrap;letter-spacing:-.2px}

/* ===== Sesi 11 (v31): beranda lebih mirip mockup — gambar dominan, panel ringkas, kepala lebih tinggi, menu bawah mewah ===== */
#bhHead .bh-ava{top:13%;height:auto}
#bhHead .bh-sound{bottom:6px;right:2.5%;width:30px;height:30px;font-size:.85rem;opacity:.9}
.bh-card{flex:0 0 auto;height:clamp(132px,47vw,215px);min-height:0;max-height:none;margin:0 12px;border-radius:24px;
 box-shadow:0 0 0 2px #fff,0 0 0 4px #f3d27a,0 0 0 5px rgba(255,255,255,.7),0 12px 24px rgba(91,33,182,.28)}
.bh-taman{margin-top:auto}
.bh-sekolah{margin-top:clamp(16px,4.5vw,24px);margin-bottom:auto}
.bh-card .bh-art{border-radius:24px}
.bh-taman .bh-bg{object-position:18% 70%}
.bh-sekolah .bh-bg{object-position:92% 30%}
.bh-kid{left:0;height:118%;max-width:60%}
.bh-kid2{height:116%;max-width:60%;z-index:4}
.bh-panel{width:39%;right:6px;top:7px;bottom:7px;gap:3px;padding:6px 8px 6px 10px;border-radius:38px 18px 18px 38px;
 background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(246,240,255,.93));border:1.5px solid rgba(243,210,122,.9);box-shadow:-4px 0 14px rgba(91,33,182,.15)}
.bh-sekolah .bh-panel{background:linear-gradient(150deg,rgba(252,255,245,.96),rgba(234,248,222,.93))}
.bh-panel h3 span{font-size:clamp(13px,4.4vw,20px)}
.bh-taman .bh-panel h3 b,.bh-sekolah .bh-panel h3 b{font-size:clamp(20px,7vw,32px)}
.bh-sekolah .bh-panel h3{color:#14532d}
.bh-sekolah .bh-panel h3 b{color:#14532d}
.bh-panel p{font-size:clamp(9px,2.65vw,12px);gap:4px}
.bh-panel p img{width:clamp(16px,5vw,24px)}
.bh-crown{width:clamp(22px,7vw,34px)}
.bh-pill{font-size:clamp(10px,2.9vw,13px);padding:2px 10px 2px 5px}.bh-pill img{width:18px}
.bh-btn{font-size:clamp(10.5px,3.2vw,14px);padding:5px 6px 5px 11px;gap:4px;margin-top:2px}
.bh-btn i{width:18px;height:18px;font-size:15px}
.bh-st1{left:56%;top:-12px}
/* menu bawah mewah */
#home .bh-nav{left:8px!important;right:8px!important;bottom:8px!important;border-radius:30px;padding:7px 2px 8px!important;
 background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(243,236,255,.95))!important;border:2px solid #f3d27a!important;
 box-shadow:0 0 0 3px rgba(255,255,255,.85),0 10px 24px rgba(91,33,182,.28),inset 0 2px 0 #fff}
#home .bh-nav .ni-icon{width:40px;height:40px}
#home .bh-nav .ni-icon img{width:36px;height:36px;filter:drop-shadow(0 2px 2px rgba(60,20,120,.2))}
#home .bh-nav .ni-lbl{color:#3b0f8c;font-size:clamp(8.5px,2.7vw,11px)}
#home .bh-nav .ni.active .ni-lbl{color:#7c3aed}
#home .bh-nav .ni+.ni:before{background:linear-gradient(180deg,transparent,rgba(139,92,246,.28),transparent)}
.bh-card{flex:1 1 0;height:auto;min-height:128px;max-height:290px}
.bh-taman{margin-top:4px}
.bh-sekolah{margin-top:clamp(18px,5vw,26px);margin-bottom:12px}
.bh-kid2{height:108%}

/* ===== Sesi 11 (v32): kartu menyatu dengan latar + bingkai emas timbul, menu bawah kaca ===== */
#home{background:linear-gradient(180deg,#c4b3fb 0%,#d9cbfd 28%,#e6dcfe 55%,#cdb9fa 100%)!important}
.bh-clouds{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bh-clouds img{position:absolute;opacity:.85;filter:blur(.3px)}
.bh-clouds .c1{left:-40px;top:30%;width:190px}.bh-clouds .c2{right:-50px;top:47%;width:200px}
.bh-clouds .c3{left:-30px;bottom:4%;width:230px}.bh-clouds .c4{right:-40px;bottom:2%;width:240px}.bh-clouds .c5{left:30%;bottom:-20px;width:260px;opacity:.7}
.bh-card{box-shadow:none!important;background:none;z-index:1}
/* gambar: atas memudar ke langit, menyembul di atas kartu */
.bh-card .bh-art{top:-16%;border-radius:0 0 26px 26px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 24%)}
.bh-taman .bh-bg{object-position:20% 68%}
/* bingkai emas timbul: samping & bawah, memudar ke atas */
.bh-card:before,.bh-card:after{content:"";position:absolute;pointer-events:none;border-radius:28px;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bh-card:before{inset:-5px;padding:5px;z-index:2;
 background:linear-gradient(180deg,rgba(246,215,122,0) 0%,rgba(246,215,122,0) 20%,#fbe7a6 42%,#f1c75a 62%,#d69a22 85%,#a8700c 100%);
 filter:drop-shadow(0 2px 1px rgba(120,70,0,.45)) drop-shadow(0 -1px 0 rgba(255,250,225,.9))}
.bh-card:after{inset:-1.5px;padding:2px;z-index:3;border-radius:25px;
 background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.95) 52%,rgba(255,255,255,.9) 100%)}
/* panel: bingkai emas sendiri, sedikit lebih tinggi dari kartu */
.bh-panel{top:-6px;bottom:6px;right:8px;border:2.5px solid #f0c55e;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),0 2px 0 #b9831a,0 0 0 1.5px rgba(255,248,220,.9),-6px 6px 16px rgba(91,33,182,.18)}
.bh-st1{top:-24px}
.bh-kid{z-index:4}
/* menu bawah: kaca tembus pandang + bingkai emas timbul */
#home .bh-nav{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(245,238,255,.62))!important;
 -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
 border:2.5px solid #f0c55e!important;border-radius:34px;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 3px 6px rgba(255,255,255,.7),0 3px 0 #b9831a,0 0 0 1.5px rgba(255,248,220,.9),0 12px 26px rgba(91,33,182,.3)}
.bh-taman{z-index:2}.bh-sekolah{z-index:1;margin-top:clamp(24px,7vw,34px)}
.bh-sekolah .bh-art{top:-11%}

/* ===== Sesi 11 (v33): satu bingkai, gambar kartu tidak di-zoom, latar penuh awan ===== */
#home{background:linear-gradient(180deg,#c6b2fb 0%,#cdbbfc 35%,#d2c1fc 65%,#cab6fa 100%)!important}
.bh-clouds:before,.bh-clouds:after{content:"";position:absolute;inset:0;background:
 radial-gradient(60% 9% at 8% 34%,rgba(255,255,255,.75),transparent 70%),radial-gradient(55% 8% at 96% 46%,rgba(255,255,255,.7),transparent 70%),
 radial-gradient(70% 10% at 0% 62%,rgba(255,255,255,.65),transparent 70%),radial-gradient(60% 9% at 100% 74%,rgba(255,255,255,.7),transparent 70%),
 radial-gradient(80% 9% at 20% 98%,rgba(255,255,255,.85),transparent 70%),radial-gradient(80% 9% at 85% 99%,rgba(255,255,255,.85),transparent 70%),
 radial-gradient(45% 6% at 50% 88%,rgba(255,255,255,.6),transparent 70%)}
.bh-clouds:after{filter:blur(6px);opacity:.8;transform:translateY(-8%)}
.bh-clouds img{opacity:.92}
.bh-clouds .c1,.bh-clouds .c2,.bh-clouds .c3,.bh-clouds .c4,.bh-clouds .c5{display:none}
.bh-clouds .k0{left:-60px;top:14%;width:170px}.bh-clouds .k1{right:-70px;top:12%;width:180px;opacity:.75}
.bh-clouds .k2{left:-80px;top:36%;width:210px}.bh-clouds .k3{right:-60px;top:40%;width:190px}
.bh-clouds .k4{left:-50px;top:56%;width:180px;opacity:.8}.bh-clouds .k5{right:-80px;top:62%;width:220px}
.bh-clouds .k6{left:-70px;bottom:6%;width:240px}.bh-clouds .k7{right:-70px;bottom:5%;width:250px}
.bh-clouds .k8{left:18%;bottom:-30px;width:260px}.bh-clouds .k9{right:10%;bottom:-36px;width:280px}
.bh-clouds .k10{left:38%;top:47%;width:150px;opacity:.55}.bh-clouds .k11{left:30%;top:8%;width:160px;opacity:.5}
/* gambar latar kartu: tidak di-zoom — selebar kartu, menempel bawah, atas memudar ke langit */
.bh-card .bh-art{top:-18%}
.bh-card .bh-bg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;min-height:72%;object-fit:cover}
.bh-taman .bh-bg{object-position:50% 80%}.bh-sekolah .bh-bg{object-position:70% 60%}
/* satu bingkai: emas utuh di sisi kanan (panel), memudar di kiri atas */
.bh-card:before{background:
 linear-gradient(180deg,#fbe7a6 0%,#f1c75a 45%,#d69a22 80%,#a8700c 100%) right/44% 100% no-repeat,
 linear-gradient(180deg,rgba(246,215,122,0) 0%,rgba(246,215,122,0) 20%,#fbe7a6 42%,#f1c75a 62%,#d69a22 85%,#a8700c 100%)}
.bh-card:after{background:
 linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.9)) right/43% 100% no-repeat,
 linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.95) 52%,rgba(255,255,255,.9) 100%)}
.bh-panel{top:0;bottom:0;right:0;width:42%;border:none;border-radius:44px 26px 26px 44px;
 box-shadow:-8px 0 16px rgba(91,33,182,.16),inset 3px 0 0 rgba(255,255,255,.9)}
.bh-st1{left:52%;top:-14px}
.bh-card .bh-art{-webkit-mask-image:none;mask-image:none}
.bh-card .bh-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 32%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 12%,#000 32%)}

/* ===== Sesi 12 (v35): beranda bergerak tipis, bingkai emas utuh, dock, header & Ruang Orang Tua luxury (mockup gen/mockup_luxury.png) ===== */
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/lora-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/lora-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/lora-latin-600-italic.woff2') format('woff2')}
:root{--lx-gold:#e3bf6e;--lx-gold2:#f0c96a;--lx-ink:#1a0d33}
/* kepala: bintang logo & istana bergerak tipis (lapisan terpisah dari kepala2.webp) */
#bhHead .bh-istana,#bhHead .bh-bintang{position:absolute;pointer-events:none;height:auto;will-change:transform}
#bhHead .bh-istana{left:53.333%;top:0;width:34.667%;animation:bhFloat 4.6s ease-in-out infinite}
#bhHead .bh-bintang{left:51.111%;top:12.698%;width:9.667%;animation:bhWiggle 5.2s ease-in-out infinite}
@keyframes bhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes bhWiggle{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(1.6px,-1.2px) rotate(4deg)}50%{transform:translate(0,-2px) rotate(0)}75%{transform:translate(-1.6px,-1px) rotate(-4deg)}}
/* bingkai emas utuh melingkar rata (tidak lagi memudar/terputus di kiri atas) */
.bh-card:before{background:linear-gradient(180deg,#fdeeb8 0%,#f3cf6a 30%,#e0ab3a 70%,#a8700c 100%)!important}
.bh-card:after{background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.9))!important}
/* menu bawah: efek dock Apple */
#home .bh-nav{touch-action:none;overflow:visible}
#home .bh-nav .ni{overflow:visible}
#home .bh-nav .ni-icon{overflow:visible}
#home .bh-nav .ni-icon img{transform-origin:50% 100%;transform:translateY(calc((var(--dk,1) - 1) * -18px)) scale(var(--dk,1));transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
#home .bh-nav.dk-on .ni-icon img{transition:transform .09s ease-out}
#home .bh-nav .ni-lbl{transition:transform .2s}
#home .bh-nav.dk-on .ni-lbl{transform:translateY(calc((var(--dk,1) - 1) * 4px))}
#home .bh-nav .ni.active .ni-icon img{animation:dkBob 2.8s ease-in-out infinite}
#home .bh-nav .ni.dk-bo .ni-icon img{animation:dkBounce .55s cubic-bezier(.3,.7,.4,1)}
#home .bh-nav.dk-wave .ni .ni-icon{animation:dkWave .6s cubic-bezier(.34,1.56,.64,1) both}
#home .bh-nav.dk-wave .ni:nth-child(2) .ni-icon{animation-delay:.05s}#home .bh-nav.dk-wave .ni:nth-child(3) .ni-icon{animation-delay:.1s}
#home .bh-nav.dk-wave .ni:nth-child(4) .ni-icon{animation-delay:.15s}#home .bh-nav.dk-wave .ni:nth-child(5) .ni-icon{animation-delay:.2s}#home .bh-nav.dk-wave .ni:nth-child(6) .ni-icon{animation-delay:.25s}
@keyframes dkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes dkBounce{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.28)}55%{transform:translateY(0) scale(.95,1.04)}75%{transform:translateY(-5px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes dkWave{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.14)}100%{transform:translateY(0) scale(1)}}
#home .bh-nav:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 48%,rgba(255,250,230,.35) 52%,transparent 64%) -150% 0/60% 100% no-repeat;animation:dkShine 7s ease-in-out infinite}
@keyframes dkShine{0%,62%{background-position:-150% 0}100%{background-position:260% 0}}
@media (prefers-reduced-motion:reduce){#bhHead .bh-istana,#bhHead .bh-bintang,#home .bh-nav .ni-icon img,#home .bh-nav:after,#home .bh-nav.dk-wave .ni .ni-icon{animation:none!important}}
/* HEADER LUXURY untuk semua layar (judul diubah lewat luxHdrScan di home.html) */
.hdr{background:radial-gradient(90% 160% at 92% -30%,rgba(167,96,255,.38),transparent 60%),linear-gradient(180deg,#2a1158 0%,#371569 55%,#3f1a7c 100%)!important;
 border-bottom:1px solid rgba(227,191,110,.55)!important;box-shadow:0 6px 18px rgba(26,8,56,.32)!important;padding:9px 12px!important;gap:10px!important;min-height:58px;box-sizing:border-box}
.hdr h2{display:flex!important;flex-direction:column;justify-content:center;min-width:0;flex:1;margin:0;color:#fff!important;font-family:'Lora',Georgia,serif!important;font-weight:600!important;font-size:clamp(17px,5.3vw,22px)!important;line-height:1.08!important;letter-spacing:.1px;text-shadow:none!important}
.hdr h2 .lx-k{font-size:9.5px;letter-spacing:.34em;color:var(--lx-gold);font-weight:600;font-style:normal;margin-bottom:2px;white-space:nowrap}
.hdr h2 .lx-t{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:normal}
.hdr h2 .lx-t i{color:var(--lx-gold2);font-style:italic;font-weight:500}
/* tombol kembali: lingkaran ungu tua, garis emas tipis, panah terang (semua layar) */
.back-btn,.zo-pbtn[aria-label="Kembali"]{background:radial-gradient(circle at 35% 30%,#4a2390,#2a1158 75%)!important;border:1.5px solid rgba(227,191,110,.7)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px rgba(42,17,88,.18),0 4px 12px rgba(26,8,56,.35)!important}
.back-btn::before,.zo-pbtn[aria-label="Kembali"]::before{background:#f6e7c1!important}
.hdr .home-btn.bw-logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
/* bilah pemutar game */
.zo-pbar{background:radial-gradient(90% 160% at 92% -30%,rgba(167,96,255,.38),transparent 60%),linear-gradient(180deg,#2a1158,#3f1a7c)!important;border-bottom:1px solid rgba(227,191,110,.55)}
.zo-ptitle{font-family:'Lora',Georgia,serif;font-weight:600;color:#fff}
/* ===== RUANG ORANG TUA luxury ===== */
#orangtua{background:radial-gradient(130% 55% at 50% 0%,#2a1352 0%,#190d33 55%,#120926 100%)!important;color:#efe6ff}
#orangtua .hdr{background:radial-gradient(90% 160% at 92% -30%,rgba(167,96,255,.35),transparent 60%),linear-gradient(180deg,#2a1158,#33145f)!important}
#orangtua .lx-login{background:linear-gradient(180deg,#f8dd93,#e0b354 60%,#c8962f)!important;color:#2a1158!important;font-weight:800!important;font-size:.78rem!important;padding:8px 14px!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.3)!important;white-space:nowrap}
#orangtua .ot-body{gap:12px;padding:14px 14px 28px}
#orangtua .lx-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(190,160,240,.2);border-radius:22px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#orangtua .lx-lbl{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--lx-gold);margin-bottom:10px}
#orangtua .lx-two{display:flex;gap:12px}#orangtua .lx-two .lx-card{flex:1;min-width:0}
#orangtua .lx-num{font-family:'Lora',Georgia,serif;font-weight:600;font-size:2.6rem;line-height:1;color:var(--lx-gold2);margin:2px 0 8px}
#orangtua .lx-sub{font-size:.8rem;color:#b9a8d8}
#orangtua .lx-prof{display:flex;justify-content:space-around;gap:6px}
#orangtua .lx-pbtn{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;color:#d9cdf1;-webkit-tap-highlight-color:transparent}
#orangtua .lx-ava{width:min(19vw,76px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,#efe9fb);display:flex;align-items:center;justify-content:center;overflow:hidden;
 box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .2s}
#orangtua .lx-ava img{width:88%;height:88%;object-fit:contain}
#orangtua .lx-pbtn.on .lx-ava{background:radial-gradient(circle at 50% 35%,#e9d8ff,#a98ae6);box-shadow:0 0 0 3px #e3bf6e,0 0 0 7px rgba(227,191,110,.22),0 8px 20px rgba(0,0,0,.4);transform:scale(1.06)}
#orangtua .lx-pbtn:active .lx-ava{transform:scale(.95)}
#orangtua .lx-pname{font-family:'Lora',Georgia,serif;font-size:.95rem;font-weight:500}
#orangtua .lx-pbtn.on .lx-pname{color:var(--lx-gold2);font-weight:600}
#orangtua .lx-pact{font-size:.72rem;color:var(--lx-gold);margin-top:-4px}
#orangtua .chart-wrap{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;padding:14px 16px}
#orangtua .lx-chart{position:relative}
#orangtua #otChart{background:none!important;border-radius:0}
#orangtua .lx-empty{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:'Lora',Georgia,serif;font-style:italic;font-size:.88rem;color:#a897c9;pointer-events:none}
#orangtua .leg-item{color:#cbbde6;font-size:.75rem;font-weight:500}
#orangtua .chart-legend{gap:14px;margin-top:8px}
#orangtua .lx-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#orangtua .lx-galempty{grid-column:1/-1;display:flex;align-items:center;gap:14px;color:#d9cdf1;font-size:.88rem;line-height:1.4}
#orangtua .lx-galico{width:58px;height:58px;flex-shrink:0;border:1.5px dashed rgba(227,191,110,.45);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
#orangtua .stat-cards{gap:8px;padding:2px 0 4px}
#orangtua .stat-card{width:78px;height:auto;padding:10px 4px;transform:none;background:rgba(255,255,255,.04)!important;border:1px solid rgba(190,160,240,.2);box-shadow:none;border-radius:16px}
#orangtua .stat-card .sc-icon{font-size:1.3rem}
#orangtua .stat-card .sc-val{font-family:'Lora',Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--lx-gold2)}
#orangtua .stat-card .sc-lbl{color:#b9a8d8;font-weight:600}
#orangtua .ot-card{padding:14px 16px}
#orangtua .ot-row+.ot-row{border-top:1px solid rgba(190,160,240,.15)}
#orangtua .ot-ico{background:rgba(227,191,110,.12)!important;border:1px solid rgba(227,191,110,.3)}
#orangtua .ot-info b{color:#efe6ff;font-weight:700}#orangtua .ot-info span{color:#a897c9}
#orangtua input[type=range]{accent-color:#e0b354}
#orangtua .toggle{background:linear-gradient(135deg,#f3cf6a,#c8962f)}#orangtua .toggle.off{background:#4b3a6e}
@media (max-width:374px){#orangtua .lx-login{padding:8px 10px!important}#orangtua .lx-login .lx-lt{display:none}.hdr .home-btn.bw-logo{transform:scale(.9);transform-origin:right center}}

/* ===== Sesi 13 (v40): bilah atas Jalur & Pelajaran ikut gaya luxury ===== */
.sk-jhead.lx-bar{background:radial-gradient(90% 160% at 92% -30%,rgba(167,96,255,.38),transparent 60%),linear-gradient(180deg,#2a1158 0%,#371569 100%);padding:8px 12px 6px;min-height:56px;box-sizing:border-box;gap:10px}
#skJhead.lx-bar{border-bottom:1px solid rgba(227,191,110,.55);box-shadow:0 6px 18px rgba(26,8,56,.32);padding-bottom:8px;position:relative;z-index:2}
.sk-steps.lx-bar{background:linear-gradient(180deg,#371569,#3f1a7c);border-bottom:1px solid rgba(227,191,110,.55);box-shadow:0 6px 16px rgba(26,8,56,.3);padding:2px 12px 7px;position:relative;z-index:2}
.lx-bar h2{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;margin:0;color:#fff;font-family:'Lora',Georgia,serif;font-weight:600;font-size:clamp(16px,5vw,21px);line-height:1.1}
.lx-bar h2 .lx-k{display:flex;align-items:center;gap:6px;font-family:'Nunito',system-ui,sans-serif;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lx-gold,#e3bf6e);font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lx-bar h2 .lx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--kc,#e3bf6e);box-shadow:0 0 0 1.5px rgba(246,231,193,.85),0 0 8px var(--kc,#e3bf6e)}
.lx-bar h2 .lx-t{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.lx-bar h2 .lx-t i{color:var(--lx-gold2,#f3d48c);font-style:italic;font-weight:500}
.lx-bar h2 small{font-family:'Nunito',system-ui,sans-serif;font-size:.68rem;font-weight:700;color:#cbb8ee;opacity:1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-steps.lx-bar div{color:#d9cdf1;font-family:'Nunito',system-ui,sans-serif}
.sk-steps.lx-bar div i{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(227,191,110,.25)}
.sk-steps.lx-bar div.done i{background:linear-gradient(90deg,#c8962f,#e3bf6e)}
.sk-steps.lx-bar div.on i{background:linear-gradient(90deg,#f8dd93,#e0b354);box-shadow:0 0 8px rgba(248,221,147,.7)}
.sk-steps.lx-bar div.on{color:#f6e7c1}
.sk-lbody.fit1{gap:8px;padding:8px 12px 10px}.sk-lbody.fit1 .sk-guru img{height:62px}.sk-lbody.fit1 .sk-card2{padding:10px 10px;gap:7px}

.sk-lbody.fit2 .sk-guru img{height:52px}.sk-lbody.fit2 .sk-q{font-size:.95rem}.sk-lbody.fit2 .sk-opts{gap:7px}.sk-lbody.fit2 .sk-opt{min-height:54px}.sk-lbody.fit2 .sk-opts.t .sk-opt{min-height:46px}
.sk-lbody.fit2 .sk-fb{min-height:20px}.sk-lbody.fit2 .sk-cap{font-size:1.05rem}.sk-lbody.fit2 .sk-bubble{min-height:36px;padding:7px 10px}
.sk-lbody.fit3 .sk-guru img{height:44px}.sk-lbody.fit3 .sk-opt{min-height:48px;font-size:.95rem}.sk-lbody.fit3 .sk-opt.emo{min-height:56px!important}.sk-lbody.fit3 .sk-opts.t .sk-opt{min-height:40px}
.sk-lbody.fit3 .sk-btn{min-height:44px}.sk-lbody.fit3 .sk-txt{font-size:.82rem}.sk-lbody.fit3 .sk-card2{padding:8px;gap:5px}.sk-lbody.fit3{gap:6px;padding:6px 10px 8px}
.sk-lbody.fit3 .sk-big.sm{line-height:1.9}
.sk-lbody.fit4{overflow:hidden}.sk-lbody.fit4 .sk-card2{flex:1;min-height:0;overflow-y:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
.sk-lbody.fit4 .sk-card2>*{flex:none}
.sk-lbody.fit4 .sk-card2>.sk-row{position:sticky;bottom:-8px;width:100%;margin-top:auto;padding:12px 0 6px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 35%);z-index:2}
.sk-lbody.fit3 .sk-opts.t .sk-opt{font-size:.84rem;line-height:1.25;padding:4px 8px}

/* ===== Sesi 13 (v42): ISTANA ILMU LATAR PUTIH BERSIH (seperti kelas) + ikon 3D melayang kontras ===== */
#sekolah,#skJalur,#skLesson,#skRapor{background:#fff}
#sekolah>*:not(.sk-deco),#skJalur>*:not(.sk-deco),#skLesson>*:not(.sk-deco),#skRapor>*:not(.sk-deco){position:relative;z-index:1}
#sekolah .sk-body,#skJalur .sk-body,#skRapor .sk-body,#skLesson .sk-lbody{background:transparent!important}
.sk-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sk-deco img{position:absolute;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(30,20,70,.18));will-change:transform;animation:skFlA 7s ease-in-out infinite}
.sk-deco .d0{top:15%;left:-7px;width:38px;height:38px}
.sk-deco .d1{top:11%;right:-6px;width:44px;height:44px;animation-name:skFlB;animation-duration:8s;animation-delay:-2s}
.sk-deco .d2{top:44%;left:-9px;width:34px;height:34px;animation-name:skFlB;animation-duration:9s;animation-delay:-4s}
.sk-deco .d3{top:56%;right:-8px;width:40px;height:40px;animation-duration:7.5s;animation-delay:-1s}
.sk-deco .d4{bottom:6%;left:5%;width:42px;height:42px;animation-duration:8.5s;animation-delay:-3s}
.sk-deco .d5{bottom:13%;right:7%;width:34px;height:34px;animation-name:skFlB;animation-duration:6.5s;animation-delay:-5s}
@keyframes skFlA{0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(5px,-12px,0) rotate(7deg)}}
@keyframes skFlB{0%,100%{transform:translate3d(0,0,0) rotate(6deg) scale(1)}50%{transform:translate3d(-5px,10px,0) rotate(-6deg) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.sk-deco img{animation:none}}
/* kartu & panel timbul lembut di atas putih */
#sekolah .sk-hint,#skJalur .sk-lv,#skRapor .sk-lv{box-shadow:0 8px 20px rgba(46,16,101,.08),0 1px 0 rgba(46,16,101,.04)}
#sekolah .sk-card{box-shadow:0 10px 22px rgba(30,20,70,.16),0 2px 0 rgba(255,255,255,.4) inset}
#skLesson .sk-card2{background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.09),0 2px 0 rgba(15,23,42,.03)}
#skLesson .sk-bubble{box-shadow:0 4px 12px rgba(15,23,42,.06)}
/* pelajaran bertema (Mandarin, Inggris, Kesehatan, Sains): tulisan gelap berwarna kursus di atas putih; kartu huruf 3D tetap berwarna = kontras */
#skLesson.sk-zh{--tc:#b91c1c;--tl:#fca5a5}
#skLesson.sk-en{--tc:#1d4ed8;--tl:#93c5fd}
#skLesson.sk-hl{--tc:#be185d;--tl:#f9a8d4}
#skLesson.sk-sc{--tc:#047857;--tl:#86efac}
#skLesson.sk-zh .sk-card2{background:#fff;border:2px solid var(--tl)}
#skLesson.sk-zh .sk-cap{color:var(--tc)}
#skLesson.sk-zh .sk-txt,#skLesson.sk-zh .sk-fb{color:#334155}
#skLesson.sk-zh .sk-q{color:#1e293b}
#skLesson.sk-zh .sk-fb span{color:#b45309!important}
#skLesson.sk-zh .sk-big,#skLesson.sk-zh .sk-big-score{color:var(--tc)}
#skLesson.sk-zh .zh-grid{box-shadow:0 14px 28px rgba(15,23,42,.22),0 4px 0 rgba(15,23,42,.12)}
#skLesson.sk-zh .sk-opt:not(.ok):not(.no),#skLesson.sk-zh .sk-gm button{box-shadow:0 4px 0 var(--tl)}

/* Sesi 14 (v43): huruf/kata Arab besar di soal kuis & game (Iqra) */
.sk-big.qb{font-size:3.2rem;line-height:1.9;margin:.1rem 0 .35rem}
.sk-big.qb.sm{font-size:1.75rem;line-height:2}
.sk-big.qb.em{font-size:2.1rem;line-height:1.35;letter-spacing:.05em}
.sk-big.qb.em .emi{width:1.15em;height:1.15em;vertical-align:-.2em}

/* ===== Sesi 15 (v47): KURSUS ISLAMI SEPERTI MOKAP HALO (ungu–emas, header masjid melayang di atas awan, anak Halo) ===== */
.isl-foot:empty{display:none}
#skJalur.isl,#skLesson.isl{background:radial-gradient(120% 60% at 50% 100%,#efe4ff 0,rgba(239,228,255,0) 70%),linear-gradient(180deg,#f5efff 0%,#fdfaff 45%,#f6effe 100%)}
#skJalur.isl>.sk-deco,#skLesson.isl>.sk-deco{display:none}
/* header */
.sk-jhead.isl-hd{position:relative;overflow:hidden;display:block;padding:0;min-height:0;background:linear-gradient(180deg,#2b0f73 0%,#5a2bc0 55%,#b49ae8 100%)!important;border:0!important;box-shadow:none!important;z-index:2}
#skJhead.isl-hd{height:clamp(170px,29vh,236px)}
#skLhead.isl-hd{height:clamp(126px,24.5vh,212px)}
.isl-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.isl-sky img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.isl-bg{filter:blur(5px) saturate(1.1);opacity:.9}
.isl-mq{-webkit-mask-image:radial-gradient(58% 62% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(58% 62% at 50% 50%,#000 62%,transparent 100%);animation:islMq 5s ease-in-out infinite;will-change:transform}
#skLhead .isl-sky img{object-position:50% 46%}
@keyframes islMq{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.isl-arc{position:absolute;left:0;bottom:0;width:100%;height:24px;z-index:3;pointer-events:none}
.isl-arc .f{fill:var(--pg,#f6f0ff)}
.isl-arc path:not(.f){fill:none;stroke:#e9c46a;vector-effect:non-scaling-stroke}
.isl-arc .g1{stroke-width:1.8;stroke:#e3b34c}.isl-arc .g2{stroke-width:1.1;opacity:.75}.isl-arc .g3{stroke-width:.8;opacity:.45}
.isl-back{position:absolute;left:10px;top:10px;z-index:5;width:42px;height:42px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff 0,#f3ecff 70%);border:2.5px solid #e9c46a;box-shadow:0 4px 10px rgba(30,10,80,.35),inset 0 -2px 0 rgba(var(--ar2,91,43,181),.15);cursor:pointer}
.isl-back svg{width:22px;height:22px;fill:none;stroke:var(--a2,#4c1d95);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sk-jhead.isl-hd h2.isl-tt{position:absolute;z-index:4;left:56px;right:56px;top:8px;display:flex;flex-direction:column;align-items:center;margin:0;font-family:'Nunito',system-ui,sans-serif;line-height:1;color:#fff}
.isl-t1{font-size:clamp(25px,8vw,32px);font-weight:900;letter-spacing:.01em;color:#ffd968;background:linear-gradient(180deg,#fff3b8 0%,#ffd45a 45%,#f0a92a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1.5px 0 var(--a3,#3b1688)) drop-shadow(0 -1px 0 var(--a3,#3b1688)) drop-shadow(1.5px 0 0 var(--a3,#3b1688)) drop-shadow(-1.5px 0 0 var(--a3,#3b1688)) drop-shadow(0 4px 5px rgba(20,5,60,.55))}
.sk-jhead.isl-hd h2 .lx-k.isl-sub{display:block;margin:4px 0 0;padding:4px 14px;border-radius:12px;background:linear-gradient(180deg,var(--a2,#4a1fa8),var(--a3,#33117e));border:1.5px solid rgba(233,196,106,.85);
  font-family:'Nunito',system-ui,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:none;color:#fff;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 8px rgba(20,5,60,.35)}
.isl-ic{position:absolute;z-index:4;right:12px;top:12px;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(20,5,60,.45));animation:islMq 3.6s ease-in-out infinite}
.isl-ic.tr{right:auto;left:58px;top:auto;bottom:30px;width:34px;height:34px;animation-delay:-1.2s}
.isl-kid{position:absolute;z-index:4;height:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(20,5,60,.35));animation:islKid 4.2s ease-in-out infinite;will-change:transform;pointer-events:none}
@keyframes islKid{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-3px)}50%{transform:translate(0,-5px)}75%{transform:translate(-3px,-2px)}}
#skJhead .isl-kid.l{right:6px;bottom:14px;height:72%}
#skLhead .isl-kid.p{left:4px;bottom:12px;height:76%}
.isl-bub{position:absolute;z-index:4;right:10px;top:calc(50% + 2px);max-width:44%;padding:6px 10px;border-radius:14px;background:#fff;color:var(--a3,#3b1688);font:800 11.5px/1.25 'Nunito',system-ui,sans-serif;box-shadow:0 4px 10px rgba(20,5,60,.3);border:1.5px solid #e9dcff}
.isl-bub:before{content:'';position:absolute;left:-7px;top:12px;border:7px solid transparent;border-right-color:#fff;border-left:0}
.isl-pill{position:absolute;z-index:5;left:50%;bottom:9px;transform:translateX(-36%);display:flex;align-items:center;gap:6px;max-width:66%;height:34px;padding:0 4px 0 14px;border-radius:18px;
  background:linear-gradient(180deg,var(--a1,#5d2fc4),var(--a2,#3d168f));border:2px solid #e9c46a;box-shadow:0 4px 10px rgba(30,10,80,.35)}
.isl-pill span{flex:1;min-width:0;color:#fff;font:900 14px/1 'Nunito',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isl-pill button{flex:none;width:28px;height:28px;border-radius:50%;border:0;padding:3px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.isl-pill button img{width:20px;height:20px}
@media (max-height:600px){#skLhead .isl-bub{display:none}}
@media (max-width:340px){.isl-bub{font-size:10.5px}}
/* menu kartu jilid */
#skJalur.isl .sk-body{padding:12px 14px 16px;gap:12px}
.sk-lv.isl-card{flex-direction:row;align-items:stretch;gap:10px;padding:10px;border-radius:24px;background:linear-gradient(180deg,#fffdf8,#fff8ef);border:1.5px solid #f0d99c;box-shadow:0 8px 18px rgba(var(--ar2,91,43,181),.12),inset 0 0 0 3px #fff;cursor:pointer}
.sk-lv.isl-card.lock{opacity:.8;cursor:default}
.isl-art{flex:none;width:30%;max-width:112px;min-height:96px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 42% at 50% 92%,#fff 0 55%,transparent 56%),radial-gradient(circle at 50% 40%,var(--lt,#efe3ff) 0,#dcc9fb 70%,#cdb5f6 100%)}
.isl-art img{width:72%;max-width:76px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(60,20,120,.3));animation:islMq 4.5s ease-in-out infinite}
.isl-card:nth-child(2n) .isl-art img{animation-delay:-1.5s}.isl-card:nth-child(3n) .isl-art img{animation-delay:-3s}
.isl-ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-family:'Nunito',system-ui,sans-serif}
.isl-jn{font-size:1.2rem;font-weight:900;color:var(--a4,#2e1065);line-height:1.1}
.isl-jt{font-size:.86rem;font-weight:900;color:var(--a3,#3b1688);line-height:1.2}
.isl-jd{font-size:.72rem;font-weight:700;color:#6b5a8e;line-height:1.25}
.isl-act{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.isl-act small{flex:1;font-size:.68rem;font-weight:800;color:#8b7aa8}
.isl-go{border:0;border-radius:18px;min-height:36px;padding:0 16px;background:linear-gradient(180deg,var(--a1,#7c4ae0),var(--a2,#4c1d95));color:#fff;font:900 .92rem 'Nunito',system-ui,sans-serif;box-shadow:0 3px 0 var(--a4,#2e1065),0 4px 10px rgba(var(--ar,76,29,149),.3);cursor:pointer}
.isl-go b{margin-left:4px}
.isl-lk{font-size:.7rem;font-weight:800;color:#6b5a8e;background:#f3ecff;border-radius:12px;padding:6px 10px}
#skJalur.isl .sk-link-btn{align-self:center;border-color:#e9c46a;color:var(--a3,#3b1688)}
#skJalur.isl .sk-note{color:#5b4a7e}
/* daftar pelajaran 1 jilid */
.sk-lv.isl-jcard{border-radius:26px;background:linear-gradient(180deg,#fffdf8,#fff7ec);border:1.5px solid #f0d99c;box-shadow:0 10px 22px rgba(var(--ar2,91,43,181),.13),inset 0 0 0 3px #fff;padding:12px 12px 14px;gap:10px}
.isl-jtop{display:flex;align-items:center;gap:12px}
.isl-badge{flex:none;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:#fff;font-family:'Nunito',system-ui,sans-serif;
  background:radial-gradient(circle at 35% 30%,#ffe9a6 0,#f5c14a 45%,#d48d14 100%);border:3px solid #fff3c4;box-shadow:0 0 0 2px #e3a92e,0 5px 10px rgba(150,90,10,.35);text-shadow:0 1.5px 0 #a8650a}
.isl-badge small{font-size:.72rem;font-weight:900}.isl-badge b{font-size:1.5rem;font-weight:900}
.isl-badge.e img{width:40px;height:40px;object-fit:contain}
.isl-jh{flex:1;min-width:0;font-family:'Nunito',system-ui,sans-serif}
.isl-jh b{display:block;font-size:1.3rem;font-weight:900;color:var(--a4,#2e1065);line-height:1.1}
.isl-jh span{display:block;font-size:.9rem;font-weight:900;color:var(--a3,#3b1688);line-height:1.2;margin-top:2px}
.isl-jd2{font:700 .76rem/1.35 'Nunito',system-ui,sans-serif;color:#4b3b6b;text-align:center;padding:0 4px}
.isl-rows{display:flex;flex-direction:column;gap:8px}
.sk-l.isl-row{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 8px 0 16px;border-radius:24px;border:1.5px solid #eadbbf;background:linear-gradient(180deg,#fffefb,#fdf3e3);
  color:var(--a3,#3b1688);font:900 .95rem 'Nunito',system-ui,sans-serif;box-shadow:0 3px 6px rgba(var(--ar2,91,43,181),.08);text-align:left}
.sk-l.isl-row i{font-style:normal;flex:none;min-width:22px}
.sk-l.isl-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-l.isl-row em{flex:none;font-style:normal}
.sk-l.isl-row em.pl{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a6,#f5b829 70%);box-shadow:0 0 0 2px #fff2c4,0 2px 4px rgba(150,90,10,.35);position:relative}
.sk-l.isl-row em.pl:after{content:'';position:absolute;left:11px;top:8px;border:6px solid transparent;border-left:9px solid var(--a2,#4c1d95);border-right:0}
.sk-l.isl-row em.ok{color:#d99a15;font-size:.9rem;letter-spacing:-1px}
.sk-l.isl-row em.lk{font-size:.9rem;opacity:.7}
.sk-l.isl-row.done{background:linear-gradient(180deg,#fffefb,#fdf3e3);color:var(--a3,#3b1688)}
.sk-l.isl-row.off{opacity:.55}
.sk-l.isl-row.cur{background:linear-gradient(180deg,var(--a1,#7c4ae0),var(--a2,#4c1d95));color:#fff;border:2px solid #e9c46a;box-shadow:0 0 0 3px rgba(233,196,106,.25),0 6px 12px rgba(var(--ar,76,29,149),.35);min-height:48px}
.sk-l.isl-row.cur em.pl{box-shadow:0 0 0 2px #fff,0 0 10px #ffd45a}
.isl-jcard .sk-link-btn{align-self:center;border-color:#e9c46a;color:var(--a3,#3b1688)}
/* bawah: kartu jilid berikut & navigasi */
.isl-foot{flex:none;position:relative;z-index:2;padding:6px 12px calc(8px + env(safe-area-inset-bottom,0px))}
.isl-next{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px 8px 10px;border-radius:22px;border:2px solid #e9c46a;background:linear-gradient(180deg,#fffdf6,#fbefd9);box-shadow:0 -2px 12px rgba(var(--ar2,91,43,181),.12),0 6px 12px rgba(var(--ar2,91,43,181),.15);cursor:pointer;text-align:left;font-family:'Nunito',system-ui,sans-serif}
.isl-next img{width:46px;height:46px;object-fit:contain;flex:none;padding:4px;border-radius:14px;background:var(--lt,#efe3ff)}
.isl-next div{flex:1;min-width:0}.isl-next b{display:block;font-size:1.05rem;font-weight:900;color:var(--a4,#2e1065)}
.isl-next span{display:block;font-size:.76rem;font-weight:800;color:#4b3b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isl-next i{font-style:normal;font-size:1.6rem;font-weight:900;color:var(--a3,#3b1688)}
.isl-nav{display:flex;gap:8px;padding:6px;border-radius:26px;background:linear-gradient(180deg,#fffdf8,#f8eedd);border:1.5px solid #ecd59a;box-shadow:0 -2px 12px rgba(var(--ar2,91,43,181),.1),0 6px 14px rgba(var(--ar2,91,43,181),.14)}
.isl-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;border:0;border-radius:20px;background:transparent;color:var(--a3,#3b1688);font:900 .74rem 'Nunito',system-ui,sans-serif;cursor:pointer}
.isl-nav button:nth-child(2){background:#fff;box-shadow:0 2px 8px rgba(var(--ar2,91,43,181),.15)}
.isl-nav button img{width:24px;height:24px;object-fit:contain}
.isl-nav button b{font-size:1.4rem;line-height:.9;color:#c99216}
.isl-nav button[disabled]{opacity:.4;cursor:default}
.isl-cheer{display:none;position:relative;height:74px;margin-bottom:-14px}
.isl-cheer .isl-kid.l2{left:2px;bottom:6px;height:88px;z-index:1}
.isl-bub2{position:absolute;left:84px;bottom:22px;padding:7px 14px;border-radius:16px;background:linear-gradient(180deg,var(--a1,#5d2fc4),var(--a2,#3d168f));border:2px solid #e9c46a;color:#fff;font:900 .86rem 'Nunito',system-ui,sans-serif;box-shadow:0 4px 10px rgba(30,10,80,.3)}
#skLfoot .isl-nav{display:none}
@media (min-height:700px){#skLfoot .isl-nav{display:flex}}
@media (min-height:800px){#skLfoot .isl-cheer{display:block}}
/* pelajaran */
#skLesson.isl .sk-steps.lx-bar{background:none;border:0;box-shadow:none;padding:6px 26px 0;gap:6px}
#skLesson.isl .sk-steps.lx-bar div{font-size:0;line-height:0}
#skLesson.isl .sk-steps.lx-bar div i{height:5px;margin:0;background:var(--lt2,#e5d9fa);box-shadow:none}
#skLesson.isl .sk-steps.lx-bar div.done i{background:linear-gradient(90deg,#c8962f,#e3bf6e)}
#skLesson.isl .sk-steps.lx-bar div.on i{background:linear-gradient(90deg,var(--a1,#7c4ae0),var(--a2,#4c1d95));box-shadow:0 0 6px rgba(124,74,224,.6)}
#skLesson.isl .sk-guru img{display:none}
#skLesson.isl .sk-guru{align-items:center;gap:6px}
#skLesson.isl .sk-guru .sk-bubble{flex:1;min-height:0;padding:6px 10px 6px 34px;border-radius:14px;border:1.5px solid #f0d99c;background:url(em/1f4a1.webp) no-repeat 7px 50%/22px,#fffaf0;color:var(--a3,#3b1688);font-size:.8rem;font-weight:800;line-height:1.25;box-shadow:none}
#skLesson.isl .sk-guru .sk-bubble:before,#skLesson.isl .sk-guru .sk-bubble:after{display:none}
#skLesson.isl .sk-card2{background:linear-gradient(180deg,#fffdf8,#fff7ec);border:1.5px solid #f0d99c;border-radius:26px;box-shadow:0 10px 22px rgba(var(--ar2,91,43,181),.13),inset 0 0 0 3px #fff}
#skLesson.isl .sk-big{align-self:stretch;color:var(--a2,#4c1d95);border-radius:24px;border:1.5px solid #efe3fb;padding:2px 34px;text-shadow:0 3px 0 rgba(var(--ar,76,29,149),.15);
  background:url(em/2b50.webp) no-repeat 6px 50%/24px,url(em/2b50.webp) no-repeat calc(100% - 6px) 50%/24px,radial-gradient(120% 90% at 50% 0,#fff 60%,#fbf6ff 100%);box-shadow:inset 0 -3px 0 rgba(var(--ar2,91,43,181),.05)}
#skLesson.isl .sk-big.em{padding:4px 8px}
#skLesson.isl .sk-big+.sk-cap{margin-top:-24px;position:relative;z-index:1}
#skLesson.isl .sk-cap{padding:5px 22px;border-radius:18px;background:linear-gradient(180deg,var(--a1,#7c4ae0),var(--a2,#4c1d95));color:#fff;box-shadow:0 4px 8px rgba(var(--ar,76,29,149),.3);max-width:100%}
#skLesson.isl .sk-txt{color:var(--a3,#3b1688)}
#skLesson.isl .sk-q{color:var(--a4,#2e1065)}
#skLesson.isl .sk-btn{background:linear-gradient(180deg,#ffd968,#f2a922);color:var(--a3,#3b1688);box-shadow:0 4px 0 #b9770e;border:2px solid #fff0bf}
#skLesson.isl .sk-btn:active{box-shadow:0 2px 0 #b9770e}
#skLesson.isl .sk-btn.sec{background:linear-gradient(180deg,var(--a1,#7c4ae0),var(--a2,#4c1d95));color:#fff;border:2px solid var(--lt3,#b89af0);box-shadow:0 4px 0 var(--a4,#2e1065)}
#skLesson.isl .sk-opt{border-color:#e6d8fb;color:var(--a3,#3b1688);background:#fff;box-shadow:0 3px 0 #e6d8fb}
#skLesson.isl .sk-opt.ok{background:#d1fae5;border-color:#059669}
#skLesson.isl .sk-opt.no{background:#fee2e2;border-color:#dc2626}
#skLesson.isl .sk-gm button{border-color:#e6d8fb;color:var(--a2,#4c1d95);box-shadow:0 3px 0 #e6d8fb}
#skLesson.isl .sk-big-score{color:var(--a2,#4c1d95)}
#skLesson.isl .sk-lbody.fit4 .sk-card2>.sk-row{background:linear-gradient(180deg,rgba(255,248,236,0),#fff8ec 35%)}
@media (prefers-reduced-motion:reduce){.isl-mq,.isl-kid,.isl-ic,.isl-art img{animation:none}}
.isl-back:active{transform:scale(.92)}
#skLesson.isl .sk-big{padding-top:10px;padding-bottom:6px;display:flex;align-items:center;justify-content:center}
#skLesson.isl .sk-big.sm{display:block}
#skLesson.isl .sk-lbody:not(.fit4)>.sk-card2{flex:1 0 auto;justify-content:center}
#skLesson.isl .sk-lbody:not(.fit4)>.sk-card2>.sk-big:not(.qb){flex:1 0 auto;max-height:260px}
#skLesson.isl .sk-big:not(.sm):not(.em):not(.qb){font-size:clamp(5.4rem,12.5vh,7.6rem)}
@media (max-height:720px){#skLhead .isl-bub{display:none}}
@media (max-width:350px){#skLesson.isl .sk-btn{padding:0 15px;font-size:.95rem}#skLesson.isl .sk-row{gap:8px}}
#skLesson.isl .sk-lbody:not(.fit4)>.sk-card2>.sk-big.sm{flex:0 0 auto}
/* Sesi 15: isi sangat panjang → header Islami diringkas (70px) supaya tombol & pilihan tetap terlihat */
#skLesson.isl-c #skLhead.isl-hd{height:70px}
#skLesson.isl-c #skLhead h2.isl-tt,#skLesson.isl-c #skLhead .isl-bub{display:none}
#skLesson.isl-c #skLhead .isl-kid.p{height:64px;bottom:2px;left:auto;right:4px}
#skLesson.isl-c .isl-pill{height:32px;bottom:auto;top:12px;left:56px;right:62px;transform:none;max-width:none}
#skLesson.isl-c .isl-back{width:38px;height:38px;top:10px;left:8px}
#skLesson.isl-c .isl-arc{height:16px}
/* ===== Sesi 15 (v48 prototipe): masjid UTUH, kartu bacaan krem-coklat luxury, ikon Jilid Halo ===== */
#skJhead.isl-hd{height:clamp(190px,31vh,260px)}
#skLhead.isl-hd{height:clamp(170px,33vh,290px)}
.isl-sky .isl-mq{left:50%;top:2%;width:auto;height:74%;max-width:none;object-fit:contain;transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 74%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 74%,transparent 100%);animation:islMq2 5s ease-in-out infinite}
#skJhead .isl-sky .isl-mq{height:80%}
@keyframes islMq2{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
/* judul: pita ungu tua seperti mokap, di bawah masjid */
.sk-jhead.isl-hd h2.isl-tt{top:auto;bottom:24px;left:20%;right:20%}
#skLhead.isl-hd h2.isl-tt{left:36%;right:3%;bottom:auto;top:43%}
.isl-t1{font-size:clamp(24px,7.4vw,31px)}
#skLhead .isl-kid.p{left:2px;bottom:10px;height:74%}
#skLhead .isl-bub{top:auto;bottom:26px;right:8px;max-width:46%}
#skJhead .isl-kid.l{height:66%}
#skJhead .isl-ic{right:12px;top:10px}
/* kartu bacaan krem-coklat */
#skLesson.isl .sk-lbody{padding-top:22px}
#skLesson.isl .sk-card2{position:relative;padding-top:30px;background:radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),linear-gradient(180deg,#fbf3e4 0%,#f4e3c8 100%);
  border:2px solid #d8b571;border-radius:30px 30px 26px 26px;box-shadow:0 0 0 4px #fbf1dc,0 0 0 5.5px #e3c483,0 12px 26px rgba(120,80,20,.22)}
#skLesson.isl .sk-card2>.isl-pill{position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:max-content;max-width:86%;bottom:auto;z-index:3;height:38px}
#skLesson.isl .sk-big{background:url(em/2b50.webp) no-repeat 6px 50%/24px,url(em/2b50.webp) no-repeat calc(100% - 6px) 50%/24px,radial-gradient(110% 90% at 50% 20%,#fffdf8 0,#f8eddb 70%,#f0e0c4 100%);
  border:1.5px solid #e6cf9f;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 10px rgba(160,110,40,.12),0 3px 8px rgba(120,80,20,.12)}
#skLesson.isl .sk-txt{color:#4a2f10}
#skLesson.isl .sk-q{color:#3d250b}
#skLesson.isl .sk-guru.isl-tip{align-self:stretch}
#skLesson.isl .sk-guru.isl-tip .sk-bubble{background:url(em/1f4a1.webp) no-repeat 2px 50%/22px;border:0;padding:2px 4px 2px 30px;color:#4a2f10;text-align:center;font-size:.84rem}
#skLesson.isl .sk-btn{background:linear-gradient(180deg,#ffe28a,#f1b02e 60%,#d98f12);color:#5a3510;box-shadow:0 4px 0 #a8670c,0 6px 12px rgba(150,90,10,.25);border:2px solid #fff1c2}
#skLesson.isl .sk-btn.sec{background:linear-gradient(180deg,var(--a1,#8656ea),var(--a2,#4c1d95));color:#fff;border:2px solid #d7b46a;box-shadow:0 4px 0 var(--a4,#2e1065),0 6px 12px rgba(var(--ar,76,29,149),.3)}
#skLesson.isl .sk-opt{background:linear-gradient(180deg,#fffdf8,#f8ecd8);border-color:#e6cf9f;color:#3d250b;box-shadow:0 3px 0 #e2c89a}
#skLesson.isl .sk-gm button{background:linear-gradient(180deg,#fffdf8,#f8ecd8);border-color:#e6cf9f;box-shadow:0 3px 0 #e2c89a}
#skLesson.isl .sk-lbody.fit4 .sk-card2>.sk-row{background:linear-gradient(180deg,rgba(244,227,200,0),#f4e3c8 35%)}
/* ikon Jilid kiriman Halo, melayang tipis */
.isl-art.jl{background:radial-gradient(70% 40% at 50% 96%,rgba(255,255,255,.9) 0 50%,transparent 52%),radial-gradient(circle at 50% 40%,#f6efff 0,#e7dafc 75%)}
.isl-art.jl img{width:94%;max-width:108px;filter:drop-shadow(0 6px 6px rgba(60,20,120,.28))}
.isl-next img[src*="jilid"]{background:none;padding:0}
/* layar pendek */
@media (max-height:700px){#skLhead.isl-hd{height:clamp(150px,30vh,200px)}}
#skLesson.isl-c .sk-lbody{padding-top:20px}
#skLesson.isl-c .isl-sky .isl-mq{display:none}
/* v48 revisi Halo: blur secukupnya, judul di area blur (tidak menimpa masjid tajam), ikon Jilid tanpa kotak */
.isl-bg{filter:blur(2px) saturate(1.05);opacity:1}
.isl-sky .isl-mq{top:3%;height:58%}
#skJhead .isl-sky .isl-mq{height:58%}
.sk-jhead.isl-hd h2.isl-tt{top:auto;bottom:22px;left:22%;right:22%}
#skLhead.isl-hd h2.isl-tt{top:auto;bottom:22px;left:38%;right:6%}
#skLhead .isl-kid.p{height:68%;bottom:12px}
#skLhead .isl-bub{bottom:auto;top:22%;right:6px;max-width:27%;font-size:11px;padding:6px 8px}
#skLhead .isl-bub:before{display:none}
.isl-art.jl{background:none}
.isl-art.jl img{width:100%;max-width:116px}
.isl-sky .isl-bg{object-position:50% 100%}
/* v48 revisi 2: masjid lebih besar, latar TANPA blur */
.isl-sky .isl-bg{filter:none}
.isl-sky .isl-mq,#skJhead .isl-sky .isl-mq{top:1%;height:76%;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 80%,transparent 100%)}
.sk-jhead.isl-hd h2.isl-tt,#skLhead.isl-hd h2.isl-tt{bottom:16px}
/* v48 revisi 3: latar + masjid SATU gambar utuh (gambar Halo dilebarkan dengan pantulan awan di tepi), seluruh gambar naik-turun pelan */
.isl-sky img.isl-mq1{top:-6px;height:calc(100% + 12px);filter:none;object-fit:cover;object-position:50% 45%;animation:islMq 5s ease-in-out infinite;will-change:transform}
/* v48: bawah layar Islami diberi awan dari gambar header (gambar Halo) */
#skJalur.isl,#skLesson.isl{background:url(isl/awan.webp) no-repeat 50% 100%/100% auto,radial-gradient(120% 60% at 50% 100%,#efe4ff 0,rgba(239,228,255,0) 70%),linear-gradient(180deg,#f5efff 0%,#fdfaff 45%,#f3eaff 100%)}
#skLesson.isl-c .sk-lbody{padding-top:16px}
#skLesson.isl-c .sk-card2{padding-top:20px}
#skLesson.isl-c .sk-card2>.isl-pill{height:30px;top:-15px}
#skLesson.isl-c .sk-guru.isl-tip .sk-bubble{padding-top:0;padding-bottom:0;font-size:.78rem}
#skLesson.isl-c .sk-steps.lx-bar{padding-top:4px}
.isl-hp{display:none!important}
#skLesson.isl-c .isl-hp{display:flex!important;padding-right:14px}
#skLesson.isl-c .sk-card2>.isl-pill{display:none}
#skLesson.isl-c .sk-card2{padding-top:10px}
#skLesson.isl-c .sk-lbody{padding-top:8px}

/* ===== Sesi 15 (v49): palet & latar per tema (Matematika, Mandarin, Inggris) — gaya Islami ===== */
#skJalur.th-matematika,#skLesson.th-matematika{--a1:#3b6fe0;--a2:#1e3a8a;--a3:#172f6e;--a4:#0f1f4d;--ar:30,58,138;--ar2:37,72,170;--pg:#eef4ff;--lt:#e3ecff;--lt2:#d8e4fb;--lt3:#9db8f0}
#skJalur.th-inggris,#skLesson.th-inggris{--a1:#3a6ae6;--a2:#1d3a9c;--a3:#172f7a;--a4:#0f1f55;--ar:29,58,156;--ar2:37,72,180;--pg:#eef4ff;--lt:#e3ecff;--lt2:#d8e4fb;--lt3:#9db8f0}
#skJalur.th-mandarin,#skLesson.th-mandarin{--a1:#e0393e;--a2:#9b1218;--a3:#7f1015;--a4:#5c0b0f;--ar:155,18,24;--ar2:170,40,40;--pg:#fff4ef;--lt:#ffe6dc;--lt2:#f8d6cc;--lt3:#f0a39a}
#skJalur.th-matematika,#skLesson.th-matematika{background:url(tema/mat_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#eef4ff 0%,#fbfcff 45%,#e9f0ff 100%)}
#skJalur.th-inggris,#skLesson.th-inggris{background:url(tema/en_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#eef4ff 0%,#fbfcff 45%,#e9f0ff 100%)}
#skJalur.th-mandarin,#skLesson.th-mandarin{background:url(tema/zh_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#fff4ef 0%,#fffaf7 45%,#ffeee6 100%)}
#skJalur:not(.th-islam) .isl-sky img.isl-mq1{object-position:50% 40%}
/* ikon level: ikon sama, tulisan level di pita emas bawah ikon */
.isl-art{position:relative}
.isl-lvt{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);white-space:nowrap;padding:2px 10px;border-radius:10px;background:linear-gradient(180deg,#ffe28a,#e9a91f);border:1.5px solid #fff3c4;color:var(--a4);font:900 .78rem 'Nunito',system-ui,sans-serif;box-shadow:0 2px 5px rgba(120,80,20,.3)}
.isl-badge.t b{font-size:.95rem}
/* tema bawaan Mandarin/Inggris (sk-zh) di dalam gaya Islami: latar badan transparan, kartu krem */
#skLesson.isl.sk-zh .sk-lbody{background:transparent!important}
#skLesson.isl.sk-zh .sk-card2{background:radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),linear-gradient(180deg,#fbf3e4 0%,#f4e3c8 100%)}
#skLesson.isl .sk-cap{color:#fff}

/* ===== Sesi 16 (v50): Berpikir Kritis, Coding, Kesehatan Tubuh — mokap Halo (header latar + judul kiri + anak kanan, kartu Unit krem-emas) ===== */
#skJalur.th-kritis,#skLesson.th-kritis{--a1:#8b4fd0;--a2:#4f1f86;--a3:#3d1769;--a4:#280f47;--ar:79,31,134;--ar2:91,43,160;--pg:#fbf5ff;--lt:#f1e6ff;--lt2:#e7d9fb;--lt3:#c4a6ef}
#skJalur.th-coding,#skLesson.th-coding{--a1:#18a57d;--a2:#0b5d4b;--a3:#094b3d;--a4:#06322a;--ar:11,93,75;--ar2:14,110,88;--pg:#eefbf6;--lt:#dcf5ec;--lt2:#cdeee2;--lt3:#8fd6bd}
#skJalur.th-tubuh,#skLesson.th-tubuh{--a1:#e23b5e;--a2:#b0123f;--a3:#8d0f33;--a4:#5f0a22;--ar:176,18,63;--ar2:190,30,75;--pg:#fff2f5;--lt:#ffe3ea;--lt2:#fad3dc;--lt3:#f19aaf}
#skJalur.th-kritis,#skLesson.th-kritis{background:url(tema/kr_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#fbf3ff 0%,#fffaf2 45%,#fbefe0 100%)}
#skJalur.th-coding,#skLesson.th-coding{background:url(tema/co_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#eef6ff 0%,#fbfdff 45%,#e9f2ff 100%)}
#skJalur.th-tubuh,#skLesson.th-tubuh{background:url(tema/tb_awan.webp) no-repeat 50% 100%/100% auto,linear-gradient(180deg,#fff2f5 0%,#fffafa 45%,#eef4ff 100%)}
#skJalur.th-kritis #skJhead.isl-hd,#skJalur.th-coding #skJhead.isl-hd,#skJalur.th-tubuh #skJhead.isl-hd{height:clamp(150px,24vh,200px)}
#skJalur.th-kritis .isl-sky img.isl-mq1{object-position:50% 30%}
#skJalur.th-coding .isl-sky img.isl-mq1{object-position:50% 35%}
#skJalur.th-tubuh .isl-sky img.isl-mq1{object-position:60% 30%}
#skJhead .isl-sky::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--ar),.82) 0%,rgba(var(--ar),.5) 45%,rgba(var(--ar),0) 75%)}
#skJalur.th-islam #skJhead .isl-sky::after,#skJalur.th-matematika #skJhead .isl-sky::after,#skJalur.th-mandarin #skJhead .isl-sky::after,#skJalur.th-inggris #skJhead .isl-sky::after{display:none}
.sk-jhead.isl-hd h2.isl-tt.u{left:62px;right:35%;top:13px;bottom:auto;align-items:flex-start;text-align:left}
.isl-tt.u .un-k{font:900 .66rem 'Nunito',system-ui,sans-serif;letter-spacing:.2em;color:#ffe08a;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.isl-tt.u .isl-t1{font-family:'Lora',Georgia,serif;font-weight:600;font-size:clamp(19px,6vw,27px);line-height:1.08;margin-top:3px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.isl-tt.u .un-sub{margin-top:5px;font:800 .74rem/1.25 'Nunito',system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
#skJhead .isl-kid.u{right:2px;bottom:12px;height:84%;max-width:37%;object-position:100% 100%}
.sk-l.un-l{padding:6px 10px!important;font-size:.78rem!important}
/* pelajaran: anak (gambar lebar) di kiri, judul di kanan */
#skLesson.th-kritis #skLhead .isl-kid.p,#skLesson.th-coding #skLhead .isl-kid.p,#skLesson.th-tubuh #skLhead .isl-kid.p{max-width:44%;object-position:0 100%}
#skLesson.th-kritis #skLhead.isl-hd h2.isl-tt,#skLesson.th-coding #skLhead.isl-hd h2.isl-tt,#skLesson.th-tubuh #skLhead.isl-hd h2.isl-tt{left:45%;right:2%}
#skLesson.th-kritis .isl-t1,#skLesson.th-coding .isl-t1,#skLesson.th-tubuh .isl-t1{font-size:clamp(18px,5.6vw,25px);text-align:center;line-height:1.05}
/* kartu Unit */
.sk-lv.un-card{position:relative;margin:0 0 12px;padding:12px 12px 12px;border-radius:22px;background:radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,#fffaf0 0%,#f6e8cc 100%);
  border:2px solid #e3bf6a;box-shadow:inset 0 0 0 3px #fff9ea,inset 0 0 0 4px rgba(227,191,106,.55),0 6px 14px rgba(var(--ar),.14)}
.un-top{display:flex;align-items:center;gap:10px}
.un-badge{flex:none;position:relative;width:58px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:8px;
  background:linear-gradient(180deg,var(--a1),var(--a3));border:2px solid #f0c75e;border-radius:14px 14px 30px 30px / 14px 14px 22px 22px;box-shadow:0 3px 7px rgba(var(--ar),.35),inset 0 0 0 2px rgba(255,255,255,.18)}
.un-badge svg{position:absolute;top:-9px;width:30px;height:20px;fill:url(#unG);fill:#ffd45a;stroke:#b07a12;stroke-width:1.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.un-badge b{color:#fff3c4;font:900 .82rem 'Nunito',system-ui,sans-serif;white-space:nowrap}
.un-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.un-t b{color:var(--a4);font:900 1rem/1.2 'Nunito',system-ui,sans-serif}
.un-t span{color:#5b4a36;font:700 .78rem/1.25 'Nunito',system-ui,sans-serif}
.un-sp{position:absolute;top:8px;right:12px;color:#e0b04c;font-style:normal;font-size:.9rem}
.un-ls{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0 4px}
.sk-l.un-l{display:inline-flex;align-items:center;gap:5px;margin:0;padding:7px 12px;border-radius:16px;background:linear-gradient(180deg,#fffdf6,#fbf0d8);border:1.5px solid #e6c77c;color:var(--a2);font:800 .8rem 'Nunito',system-ui,sans-serif;box-shadow:0 2px 4px rgba(150,110,30,.12)}
.sk-l.un-l i{font-style:normal;color:#c28a1c}
.sk-l.un-l.cur{background:linear-gradient(180deg,#ffe592,#f0b73a);border-color:#d39a24;color:var(--a4);box-shadow:0 3px 6px rgba(190,130,20,.35)}
.sk-l.un-l.cur i{color:var(--a4)}
.sk-l.un-l img{width:16px;height:16px}
.sk-l.un-l.done{background:linear-gradient(180deg,#fff,#f6efe0)}
.sk-l.un-l em{font-style:normal;color:#e0a417}
.sk-l.un-l.off{opacity:.55}
.un-k2.sk-link-btn{margin:2px 0 0;padding:7px 12px;border-radius:16px;background:#fffdf6;border:1.5px solid #e6c77c;color:var(--a3);font:800 .78rem 'Nunito',system-ui,sans-serif}
.un-card .sk-soon{margin-top:8px}
/* Islami: ikon Doa/Al-Qur'an/Asmaul Husna gambar Halo, tanpa kotak (sama dengan ikon Jilid) */
.isl-badge.e img{width:100%;height:100%;object-fit:contain}
#skLesson.th-tubuh .zh-lan{display:none}
/* v50 revisi: tanpa tulisan BIATHENA, judul sejajar tombol kembali; ikon Unit = gambar Halo + pita "Unit N" */
.isl-tt.u .isl-t1{margin-top:0;min-height:40px;display:flex;align-items:center}
.un-ico{flex:none;position:relative;width:76px;height:80px;display:flex;align-items:flex-start;justify-content:center}
.un-ico img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(var(--ar),.3));animation:islMq 4.5s ease-in-out infinite}
.un-card:nth-child(2n) .un-ico img{animation-delay:-1.5s}.un-card:nth-child(3n) .un-ico img{animation-delay:-3s}
.un-ico .isl-lvt{bottom:-2px;font-size:.72rem;padding:1px 8px}
@media (prefers-reduced-motion:reduce){.un-ico img{animation:none}}
#skJalur.th-tubuh .isl-tt.u .isl-t1{font-size:clamp(17px,5.5vw,23px);white-space:nowrap}
/* v50 revisi 2: latar halus di kartu Unit (gambar latar kursus, pudar, hanya sisi kanan) + titik kilau tipis */
#skJalur.th-kritis{--ubg:url(tema/kr_bg.webp)}#skJalur.th-coding{--ubg:url(tema/co_bg.webp)}#skJalur.th-tubuh{--ubg:url(tema/tb_bg.webp)}
.sk-lv.un-card{overflow:hidden;isolation:isolate}
.sk-lv.un-card::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ubg) 70% 35%/cover no-repeat;opacity:.2;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 95%);mask-image:linear-gradient(100deg,transparent 30%,#000 95%)}
.sk-lv.un-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(circle at 12% 88%,rgba(227,191,106,.35) 0 2px,transparent 3px),radial-gradient(circle at 48% 14%,rgba(227,191,106,.4) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 64% 80%,rgba(227,191,106,.35) 0 2px,transparent 3px),radial-gradient(circle at 88% 52%,rgba(255,255,255,.9) 0 2px,transparent 3px),
  radial-gradient(120% 80% at 100% 100%,rgba(var(--ar),.08),transparent 60%)}
.sk-lv.un-card{flex-shrink:0}

/* ───── Sesi 17 (v52): Istana Ilmu luxury — mokap Halo ───── */
#sekolah.ist{background:#fbf0d9}
#sekolah.ist>.sk-deco{display:none}
.ist-head{position:relative;flex-shrink:0;aspect-ratio:1672/941;max-height:300px;min-height:170px;overflow:hidden;z-index:4;transition:height .35s ease;
  background:#7c4dd6 url(tema/ist_bg.webp) center 40%/cover no-repeat}
.ist-head.mini{height:118px;aspect-ratio:auto;min-height:0}
.ist-head:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(46,10,96,.82) 0%,rgba(76,29,149,.5) 38%,transparent 62%),linear-gradient(180deg,rgba(46,10,96,.35),transparent 45%)}
.ist-back{position:absolute;left:12px;top:18px;width:48px;height:48px;border-radius:50%;border:2.5px solid #e9c46a;background:rgba(59,15,114,.55);
  box-shadow:0 0 0 2px rgba(255,236,170,.25),inset 0 0 10px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;padding:0}
.ist-back svg{width:22px;height:22px;fill:none;stroke:#f6d77a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ist-tt{position:absolute;left:72px;top:15px;z-index:6;color:#fff}
.ist-k{display:block;font-weight:800;font-size:.68rem;line-height:1;letter-spacing:.2em;color:#f2cf6b}
.ist-k img{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.ist-t{display:block;font:600 1.75rem/1.15 'Lora',Georgia,serif;color:#fff6e2;text-shadow:0 2px 6px rgba(0,0,0,.35);margin-top:4px}
.ist-sc{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:30px;z-index:4;fill:#fbf0d9;filter:drop-shadow(0 -3px 3px rgba(90,40,150,.28))}
.ist-head.mini .ist-sc{height:20px}
.ist-kid{position:absolute;left:4px;bottom:0;height:56%;z-index:5;transition:opacity .3s;filter:drop-shadow(0 6px 8px rgba(60,20,90,.25));animation:istKid 7s ease-in-out infinite}
.ist-head.mini .ist-kid{opacity:0;pointer-events:none;animation:none}
#sekolah.ist .sk-body{background:#fbf0d9;padding:4px 14px 18px;gap:12px}
#sekolah.ist .sk-body>*{flex-shrink:0}
.ist-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 6px 14px;margin:-4px -6px -10px}
.ist-chips::-webkit-scrollbar{display:none}
.ist-chip{flex-shrink:0;padding:9px 18px;border-radius:99px;border:2px solid #e2c27a;background:linear-gradient(180deg,#fffaf0,#f8ecd0);font-family:inherit;
  font-weight:900;font-size:.92rem;line-height:1;color:#4c1d95;box-shadow:0 2px 6px rgba(140,100,30,.15);cursor:pointer}
.ist-chip.on{background:linear-gradient(180deg,#8b5cf6,#6d28d9);color:#fff;border-color:#c4a6ff;box-shadow:0 3px 10px rgba(109,40,217,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.ist-hint{background:linear-gradient(180deg,#fffdf7,#fbf2dc);border:2px solid #ead198;border-radius:18px;padding:10px 14px;font-weight:800;font-size:.86rem;line-height:1.3;color:#4c1d95;box-shadow:inset 0 0 0 2px #fff}
.ist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px;padding-top:30px}
.ist-card{position:relative;display:flex;flex-direction:column;aspect-ratio:1/1.25;border-radius:22px;padding:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(160deg,#fff3c4,#d9a93f 35%,#fbe6a2 60%,#b8862b);box-shadow:0 6px 14px rgba(110,70,10,.28)}
.ist-card:active{transform:scale(.96)}
.ist-in{position:relative;flex:1;min-height:0;border-radius:19px;overflow:hidden;display:flex;flex-direction:column;background:var(--c1)}
.ist-art{position:relative;flex:1;min-height:0;background:radial-gradient(80% 70% at 50% 45%,var(--c3),var(--c1) 75%)}
.ist-art .sp{position:absolute;width:12px;height:12px;background:#fff3b0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:istTw 2.4s ease-in-out infinite}
.ist-pop{position:absolute;left:4%;right:4%;top:-26px;height:calc(75% + 10px);z-index:3;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;
  animation:istSway 4s ease-in-out infinite;transform-origin:50% 90%}
.ist-pop img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.ist-band{position:relative;margin:auto 4px 4px;padding:6px 36px 7px 9px;border-radius:14px;background:linear-gradient(180deg,var(--c2),var(--c1));
  border:1.5px solid rgba(255,226,140,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ist-ct{font-weight:900;font-size:1.02rem;line-height:1.1;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.ist-cs{font-weight:800;font-size:.6rem;line-height:1.2;color:#fff;opacity:.95;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ist-pg{height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin-top:4px;overflow:hidden}.ist-pg i{display:block;height:100%;background:linear-gradient(90deg,#fde68a,#f5b82e)}
.ist-go{position:absolute;right:6px;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b0,#e0a92e 60%,#a8741a);
  box-shadow:0 2px 4px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center}
.ist-go svg{width:14px;height:14px;fill:none;stroke:#5b2a00;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ist-card.c-isl{--c1:#0b5a3c;--c2:#13804f;--c3:#2bb673}.ist-card.c-eng{--c1:#14389a;--c2:#1f55c9;--c3:#4f8cf0}
.ist-card.c-man{--c1:#8f1414;--c2:#bb2222;--c3:#e8503a}.ist-card.c-smp{--c1:#a8400c;--c2:#d4600f;--c3:#ff9a2e}
.ist-card.c-hlt{--c1:#9c1446;--c2:#cc2a62;--c3:#ff6f9a}.ist-card.c-sci{--c1:#1f6b1f;--c2:#2f8f2a;--c3:#7ccf4a}
.ist-card.c-cod{--c1:#0a5b55;--c2:#11807a;--c3:#2bbfb0}.ist-card.c-kri{--c1:#4a1785;--c2:#6a2bb0;--c3:#a55ff0}
.ist-note{background:linear-gradient(180deg,#fff2b8,#f6cf5a);border:2px solid #d8a634;border-radius:99px;padding:10px 16px;text-align:center;font-weight:900;font-size:.82rem;line-height:1.25;color:#5b3200;box-shadow:0 3px 8px rgba(150,100,10,.25),inset 0 1px 0 #fff}
.ist-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:18px;padding:13px;font-family:inherit;font-weight:900;font-size:.95rem;line-height:1;cursor:pointer}
.ist-btn img{width:22px;height:22px}
.ist-btn.a{background:linear-gradient(180deg,#7c3aed,#4c1d95);color:#ffe9a8;border:2px solid #e2b956;box-shadow:0 4px 12px rgba(76,29,149,.35)}
.ist-btn.b{background:#fffaf0;color:#4c1d95;border:2px solid #ead198}
@keyframes istKid{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-4px)}50%{transform:translate(0,-6px)}75%{transform:translate(-4px,-3px)}}
@keyframes istSway{0%,100%{transform:translateX(-3px) rotate(-1.5deg)}50%{transform:translateX(3px) rotate(1.5deg)}}
@keyframes istTw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@media (max-width:360px){.ist-t{font-size:1.45rem}.ist-tt{left:68px}.ist-kid{height:58%}.ist-pop{top:-20px}.ist-card{aspect-ratio:1/1.3}.ist-ct{font-size:.86rem}.ist-cs{font-size:.56rem}
  .ist-band{padding-right:32px}.ist-go{width:24px;height:24px;margin-top:-12px;right:5px}}
@media (prefers-reduced-motion:reduce){.ist-kid,.ist-pop,.ist-art .sp{animation:none}}
/* Sesi 17: tab Islami Iqra | Hafalan | Bahasa Arab */
.isl-nav.tabs button{background:transparent !important;box-shadow:none !important}
.isl-nav.tabs button.on{background:linear-gradient(180deg,#8b5cf6,#6d28d9) !important;color:#fff;box-shadow:0 3px 10px rgba(109,40,217,.45),inset 0 0 0 2px #e2b956 !important}
.isl-nav.tabs img{width:30px;height:30px;object-fit:contain}