@font-face{font-family:'Nunito';font-style:normal;font-weight:500 900;font-display:swap;src:url(/assets/fonts/nunito-v1.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/fredoka-v1.woff2) format('woff2')}
/* SiapTKA.app v2: "Belajar cerdik bareng Cil". Lihat docs/konsep-ui.md */
:root{
  --ink:#1b2140; --ink2:#3a4266; --muted:#5f6788; --line:#e3e7f5; --line2:#eef1fa;
  --bg:#f3f5ff; --card:#fff;
  --brand:#3d5afe; --brand2:#2a3fcc; --brandSoft:#e9edff; --brandLine:#c8d1ff;
  --sun:#ffc21a; --sun2:#e0a100; --sunSoft:#fff5d6; --sunInk:#7a5600;
  --ok:#1fa971; --ok2:#0f6e48; --okSoft:#e3f7ee;
  --bad:#f0506e; --bad2:#b3203f; --badSoft:#fde8ec;
  --mtk:#5b5bf7; --bin:#c2410c;
  --accent:var(--sun); --accentSoft:var(--sunSoft); --accentInk:var(--sunInk);
  --r:22px; --rs:16px;
  --sh1:0 1px 2px rgba(27,33,64,.05),0 8px 24px rgba(27,33,64,.06);
  --sh2:0 14px 30px rgba(61,90,254,.28);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Fredoka','Nunito',system-ui,sans-serif;
  --top:58px; --navh:68px; --safe:env(safe-area-inset-bottom,0px); --safeT:env(safe-area-inset-top,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:var(--font);font-size:16.5px;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}
a{color:var(--brand)}
button{font:inherit;color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0 0 .45em;letter-spacing:.005em}
h1{font-size:1.55rem} h2{font-size:1.2rem} h3{font-size:1.04rem}
p{margin:0 0 .9em}
.muted{color:var(--muted)} .small{font-size:.87rem} .center{text-align:center} .nowrap{white-space:nowrap}
.hidden{display:none!important} [hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}

/* ---------- kerangka */
.top{position:sticky;top:0;z-index:30;height:calc(var(--top) + var(--safeT));padding-top:var(--safeT);background:rgba(243,245,255,.86);backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px)}
.top-in{max-width:760px;margin:0 auto;height:var(--top);padding:0 14px;display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none;margin-right:auto}
.logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(160deg,#5b74ff,#2a3fcc);display:grid;place-items:center;overflow:hidden;box-shadow:0 4px 10px rgba(61,90,254,.3)}
.logo-mark img{width:34px;height:34px;object-fit:cover;object-position:50% 18%;transform:scale(1.25) translateY(3px)}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:600;font-size:.95rem;padding:5px 11px 5px 7px;border-radius:999px;background:#fff;box-shadow:var(--sh1);white-space:nowrap}
.pill img{width:22px;height:22px}
.kid-chip{display:inline-flex;align-items:center;gap:7px;border:0;background:#fff;border-radius:999px;padding:4px 12px 4px 4px;font-weight:800;font-size:.9rem;cursor:pointer;max-width:42vw;box-shadow:var(--sh1)}
.kid-chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem;background:var(--brand);overflow:hidden}
.av img{width:100%;height:100%;display:block}
.av.lg{width:48px;height:48px;font-size:1.05rem}
.av.xl{width:84px;height:84px;font-size:1.6rem;box-shadow:0 0 0 4px #fff,var(--sh1)}
.view{max-width:760px;margin:0 auto;padding:10px 16px calc(var(--navh) + 30px + var(--safe))}
.view.no-nav{padding-bottom:40px}
.view.enter>*{animation:pageIn .26s cubic-bezier(.2,.7,.3,1) both}
.view.enter>*:nth-child(2){animation-delay:.03s} .view.enter>*:nth-child(3){animation-delay:.06s} .view.enter>*:nth-child(4){animation-delay:.09s} .view.enter>*:nth-child(n+5){animation-delay:.12s}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:var(--safe);box-shadow:0 -8px 24px rgba(27,33,64,.06)}
.nav-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);height:var(--navh)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#5f6788;font-size:.75rem;font-weight:800;white-space:nowrap}
.nav a svg{width:24px;height:24px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.nav a.on{color:var(--brand)}
.nav a.on .ico-bg{background:var(--brandSoft)}
.nav a.on svg{transform:translateY(-1px) scale(1.08)}
.nav a.on svg .fill{fill:currentColor;fill-opacity:.18}
.ico-bg{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .2s}

/* ---------- komponen dasar */
.card{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--sh1)}
.card.pad-lg{padding:22px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-h h2,.card-h h3{margin:0}
.sec-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--ink);margin:24px 2px 10px}
.sec-t a,.sec-t button{font-family:var(--font);font-size:.85rem;font-weight:800;color:var(--brand);text-decoration:none;background:none;border:0;cursor:pointer;padding:12px 8px;margin:-12px -8px}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 2px 14px}
.page-h h1{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:var(--rs);padding:.82em 1.35em;font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,background .15s ease,filter .15s;-webkit-tap-highlight-color:transparent;user-select:none;position:relative}
.btn:active{transform:translateY(3px)}
.btn[disabled]{cursor:default;transform:none!important}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand2)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{box-shadow:0 1px 0 var(--brand2)}
.btn-primary[disabled]{background:#c9cfe6;box-shadow:0 4px 0 #b1b8d3;color:#fff}
.btn-ok{background:#12804f;color:#fff;box-shadow:0 4px 0 #0b5a3b}
.btn-ok:active{box-shadow:0 1px 0 #0b5a3b}
.btn-sun{background:var(--sun);color:#3d2a00;box-shadow:0 4px 0 var(--sun2)}
.btn-sun:active{box-shadow:0 1px 0 var(--sun2)}
.btn-bad{background:#c93250;color:#fff;box-shadow:0 4px 0 #a8233d}
.btn-ghost{background:#fff;color:var(--brand);box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line)}
.btn-ghost:active{box-shadow:0 0 0 2px var(--line) inset,0 0 0 var(--line)}
.btn-soft{background:var(--brandSoft);color:var(--brand2);box-shadow:0 3px 0 var(--brandLine)}
.btn-soft:active{box-shadow:0 0 0 var(--brandLine)}
.btn-danger{background:#fff;color:var(--bad2);box-shadow:0 0 0 2px #f6c9d2 inset,0 3px 0 #f6c9d2}
.btn-white{background:#fff;color:var(--brand2);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.btn-block{width:100%}
.btn-sm{padding:.5em 1em;font-size:.92rem;border-radius:12px;min-height:44px}
.btn-ghost[disabled],.btn-soft[disabled]{opacity:.45;cursor:not-allowed}
.btn-round{width:44px;height:44px;padding:0;border-radius:50%;flex:0 0 auto}
.btn-round svg{width:20px;height:20px}
.link{background:none;border:0;padding:0;color:var(--brand);font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:800;padding:.28em .75em;border-radius:999px;background:var(--line2);color:var(--ink2);white-space:nowrap}
.chip.brand{background:var(--brandSoft);color:var(--brand2)}
.chip.acc{background:var(--sunSoft);color:var(--sunInk)}
.chip.ok{background:var(--okSoft);color:var(--ok2)}
.chip.bad{background:var(--badSoft);color:var(--bad2)}
.chip.ist{background:linear-gradient(90deg,#ffe07a,#ffc21a);color:#4a3300}
.st-kuat{background:var(--okSoft);color:var(--ok2)} .st-cukup{background:var(--sunSoft);color:var(--sunInk)}
.st-lemah{background:var(--badSoft);color:var(--bad2)} .st-baru{background:var(--line2);color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.stack>*+*{margin-top:10px}
.bar{height:10px;background:var(--line2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.bar i.ok{background:var(--ok)} .bar i.mid{background:var(--sun)} .bar i.bad{background:var(--bad)}
.ring{--p:0;--c:var(--brand);width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),#e6eaf8 0);flex:0 0 auto;transition:--p .8s}
.ring span{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.4rem}
.ring.sm{width:60px;height:60px} .ring.sm span{width:47px;height:47px;font-size:1rem}
.ring.lg{width:132px;height:132px} .ring.lg span{width:106px;height:106px;font-size:2.3rem;flex-direction:column;line-height:1}
.ring.lg span small{font-family:var(--font);font-size:.75rem;font-weight:800;color:var(--muted);margin-top:4px}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.empty{text-align:center;color:var(--muted);padding:22px 12px}
.empty img{width:120px;display:block;margin:0 auto 8px}
.note{background:var(--sunSoft);border-radius:14px;padding:11px 13px;font-size:.92rem;color:#5c4100}
.note.blue{background:var(--brandSoft);color:var(--brand2)}
.note.red{background:var(--badSoft);color:#8a1f30}
.list{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:#fff;border:0;border-radius:18px;padding:12px 14px;text-decoration:none;color:inherit;width:100%;text-align:left;cursor:pointer;box-shadow:var(--sh1);transition:transform .1s}
.item:active{transform:scale(.985)}
.item .chev{color:#8a91ad;flex:0 0 auto;font-size:1.3rem;line-height:1}
.item.locked{opacity:.6;cursor:default}
.item b{font-weight:800}
.tile{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--display);font-weight:600;background:var(--brandSoft);color:var(--brand2)}
.tile svg{width:22px;height:22px}
.tile.acc{background:var(--sunSoft);color:var(--sunInk)}
.tile.ok{background:var(--okSoft);color:var(--ok2)}
.tile.bad{background:var(--badSoft);color:var(--bad2)}
.tile.bin{background:#ffeee5;color:#c2410c}

/* ---------- form */
.field{margin-bottom:16px}
.field label,.field .lbl{display:block;font-weight:800;font-size:.93rem;margin-bottom:7px}
.field .hint{font-size:.83rem;color:var(--muted);margin-top:6px}
.input{width:100%;font:inherit;font-size:1.08rem;font-weight:700;padding:.85em 1em;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(61,90,254,.14)}
.input:focus-visible{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(61,90,254,.3)}
.input::placeholder{color:#a7adc4;font-weight:600}
.input.pin{letter-spacing:.6em;text-align:center;font-family:var(--display);font-size:1.5rem;padding:.6em .5em}
.err{color:var(--bad2);font-size:.9rem;font-weight:800;margin-top:6px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{border:2px solid var(--line);background:#fff;border-radius:16px;padding:14px 12px;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .08s}
.choice:active{transform:translateY(2px)}
.choice b{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem}
.choice small{color:var(--muted);font-weight:700}
.choice[aria-checked="true"]{border-color:var(--brand);background:var(--brandSoft);box-shadow:0 3px 0 var(--brandLine)}
.choice[disabled]{cursor:not-allowed;opacity:.55}
.av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.av-opt{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;aspect-ratio:1;position:relative;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.av-opt img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 0 3px #fff,0 3px 10px rgba(27,33,64,.12)}
.av-opt[aria-checked="true"]{transform:scale(1.06)}
.av-opt[aria-checked="true"] img{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--brand)}
.av-opt[aria-checked="true"]::after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;font-size:.8rem;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}

/* ---------- masuk & PIN */
.auth{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.auth-hero{position:relative;background:linear-gradient(165deg,#4358ec 0%,#3d5afe 55%,#2a3fcc 100%);margin:0 -16px;padding:calc(18px + var(--safeT)) 22px 64px;color:#fff;overflow:hidden;border-radius:0 0 34px 34px}
.auth-hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.04);right:-70px;top:-90px}
.auth-hero::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,194,26,.25);left:-70px;bottom:-95px}
.auth-hero .logo{color:#fff;position:relative;z-index:1}
.auth-hero .logo-mark{background:#fff}
.auth-hero h1{color:#fff;font-size:1.7rem;margin:18px 0 6px;position:relative;z-index:1;max-width:62%}
.auth-hero p{color:#fff;margin:0;position:relative;z-index:1;max-width:60%;font-weight:600;text-wrap:balance}
.auth-hero .cil{position:absolute;right:6px;bottom:-6px;width:150px;z-index:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.auth-card{background:#fff;border-radius:26px;box-shadow:0 14px 40px rgba(27,33,64,.12);padding:22px 18px;margin:-40px 0 16px;position:relative;z-index:2}
.auth-card h2{margin-bottom:4px}
.auth .foot{margin-top:auto;padding:8px 0 22px}
.auth .foot a{display:inline-block;padding:12px 4px}
.pin-dots{display:flex;justify-content:center;gap:12px;margin:14px 0 8px}
.pin-dot{width:16px;height:16px;border-radius:50%;background:var(--line);transition:transform .15s cubic-bezier(.3,1.8,.5,1),background .15s}
.pin-dot.on{background:var(--brand);transform:scale(1.18)}
.pin-dots.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;user-select:none}
.pp-key{height:58px;border:0;border-radius:18px;background:var(--line2);font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .06s,background .1s}
.pp-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line);background:var(--brandSoft)}
.pp-key.fn{background:transparent;box-shadow:none;font-size:1.05rem;color:var(--muted)}
.pp-key svg{width:26px;height:26px}
.pin-label{text-align:center;font-weight:800;color:var(--ink2);margin-top:4px}

/* ---------- beranda */
.home-hero{position:relative;margin:4px 0 16px;border-radius:28px;padding:18px 18px 16px;color:#fff;background:linear-gradient(150deg,#4a60f2 0%,#3d5afe 52%,#2f43d6 100%);box-shadow:var(--sh2);overflow:hidden;min-height:184px}
.home-hero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05);right:-60px;top:-80px}
.home-hero .hh-txt{position:relative;z-index:1;max-width:64%}
.home-hero h1{color:#fff;font-size:1.5rem;margin:0 0 2px}
.home-hero .sub{font-weight:700;color:#fff;font-size:.92rem}
.home-hero .cil{position:absolute;right:-4px;bottom:-12px;width:138px;z-index:1;filter:drop-shadow(0 10px 16px rgba(0,0,0,.2));animation:bob 3.4s ease-in-out infinite}
.lvl{margin-top:14px;position:relative;z-index:1;max-width:64%}
.lvl-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:800;font-size:.82rem;color:#fff;margin-bottom:6px}
.lvl-h b{font-family:var(--display);font-weight:600;font-size:1rem;color:#fff}
.xpbar{height:12px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.xpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd75e,#ffc21a);box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);transition:width .9s cubic-bezier(.2,.7,.3,1)}
.hh-stats{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1;flex-wrap:wrap}
.hh-stat{display:inline-flex;align-items:center;gap:6px;background:rgba(10,20,110,.22);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 11px 5px 6px;font-weight:800;font-size:.85rem}
.hh-stat img{width:22px;height:22px}
.hh-stat b{font-family:var(--display);font-weight:600;font-size:1rem}
.mission{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh1);margin-bottom:12px}
.mission .ring{--c:var(--sun)}
.mission .ring span{font-size:1.15rem}
.mission h2{margin:0 0 2px;font-size:1.12rem}
.mission p{margin:0 0 10px;font-size:.9rem;color:var(--muted);font-weight:600}
.mission.done .ring{--c:var(--ok)}
.week7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:#fff;border-radius:var(--r);padding:12px 10px;box-shadow:var(--sh1);margin-bottom:6px}
.week7 .dd{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.75rem;font-weight:800;color:var(--muted)}
.week7 .dot{width:34px;height:34px;border-radius:50%;background:var(--line2);display:grid;place-items:center}
.week7 .dot img{width:24px;height:24px;filter:grayscale(1) opacity(.35)}
.week7 .dd.on .dot{background:#fff1d1}
.week7 .dd.on .dot img{filter:none}
.week7 .dd.today{color:var(--brand)}
.week7 .dd.today .dot{box-shadow:0 0 0 2px var(--brand)}
.subj-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subj{position:relative;display:flex;flex-direction:column;min-height:176px;border-radius:var(--r);padding:14px 14px 12px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:var(--sh1);transition:transform .1s}
.subj:active{transform:scale(.98)}
.subj.mtk{background:linear-gradient(155deg,#5b5bf7,#4f56f2 60%,#3d47d9)}
.subj.bin{background:linear-gradient(155deg,#c2410c,#b13a0e 55%,#9a3412)} /* semua titik >= 5:1 untuk teks putih */
.subj img{position:absolute;right:-16px;top:-6px;width:120px;opacity:.95;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
.subj .s-name{position:relative;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.15;margin-top:auto;max-width:90%}
.subj .s-sub{position:relative;font-size:.8rem;font-weight:700;color:#fff;margin:3px 0 9px}
.subj .s-cta{position:relative;align-self:flex-start;background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:.88rem;border-radius:999px;padding:.35em .95em;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.subj .s-prog{position:relative;display:flex;gap:4px;margin-bottom:8px}
.subj .s-prog i{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.3)}
.subj .s-prog i.on{background:#fff}
.badges-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.badges-row::-webkit-scrollbar{display:none}
.badge{flex:0 0 auto;width:86px;scroll-snap-align:start;text-align:center;border:0;background:#fff;border-radius:18px;padding:10px 6px 8px;box-shadow:var(--sh1);cursor:pointer;font:inherit}
.badge img{width:58px;height:58px;display:block;margin:0 auto 4px;transition:transform .2s}
.badge span{display:block;font-size:.75rem;font-weight:800;line-height:1.2;color:var(--ink2);min-height:2.4em}
.badge.locked img{filter:grayscale(1) opacity(.35)}
.badge.locked span{color:var(--muted)}
.badge:not(.locked):hover img{transform:rotate(-6deg) scale(1.06)}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge-grid .badge{width:auto}
.badge .prog{height:5px;border-radius:9px;background:var(--line2);margin:6px 6px 0;overflow:hidden}
.badge .prog i{display:block;height:100%;background:var(--sun)}
.install-card{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#fff7df,#fff);border:2px dashed #ffd56a;border-radius:var(--r);padding:12px 14px;margin:14px 0}
.install-card img{width:44px;height:44px;border-radius:12px}
.install-card .x{flex:0 0 auto}

/* ---------- latihan */
.seg-tabs{display:grid;grid-template-columns:1fr 1fr;background:#e4e8f8;border-radius:16px;padding:4px;gap:4px;margin-bottom:14px}
.seg-tabs button{border:0;background:transparent;border-radius:12px;padding:.6em .6em;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.seg-tabs button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(27,33,64,.1)}
.seg-tabs button[data-m="MTK"][aria-pressed="true"]{color:var(--mtk)}
.seg-tabs button[data-m="BIN"][aria-pressed="true"]{color:#c2410c}
.subj-banner{position:relative;border-radius:var(--r);padding:16px 16px;color:#fff;overflow:hidden;margin-bottom:14px;min-height:112px;display:flex;flex-direction:column;justify-content:center}
.subj-banner.mtk{background:linear-gradient(135deg,#5b5bf7,#3d47d9)}
.subj-banner.bin{background:linear-gradient(135deg,#c2410c,#a8380e)}
.subj-banner img{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:150px}
.subj-banner h2{color:#fff;margin:0 0 2px;max-width:62%}
.subj-banner p{margin:0;font-weight:700;font-size:.86rem;color:#fff;max-width:60%}
.kel{background:#fff;border-radius:var(--r);padding:6px 14px;margin-bottom:12px;box-shadow:var(--sh1)}
.kel-h{display:flex;align-items:center;justify-content:space-between;padding:10px 0 6px}
.kel-h h3{margin:0}
.topic-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line2)}
.topic-row .grow b{display:block;font-weight:800;line-height:1.3}
.topic-row .meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.topic-row .meta .bar{flex:1;height:7px}
.topic-row .meta small{font-size:.75rem;font-weight:800;color:var(--muted);white-space:nowrap}
.play{width:44px;height:44px;border-radius:14px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;box-shadow:0 3px 0 var(--brand2);transition:transform .08s}
.play:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brand2)}
.play svg{width:18px;height:18px;margin-left:2px}
.play.bin{background:var(--bin);box-shadow:0 3px 0 #9a3412}

/* ---------- soal */
.q-card{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh1);margin-bottom:12px}
.q-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;align-items:center}
.q-no{font-family:var(--display);font-weight:600;font-size:1rem;margin-right:2px}
.stim{background:#fbfbff;border:2px solid var(--line);border-radius:18px;padding:12px 14px;margin:0 0 14px;font-size:1.07rem;color:var(--ink2);line-height:1.65}
.stim-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:6px}
.stim-h span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bin);margin-right:8px;vertical-align:2px}
.stim-body{max-height:none}
.stim.clip .stim-body{max-height:40vh;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.stim-more{margin-top:10px;font-family:var(--display)}
.stim table,.q-text table,.explain table,.opt table{border-collapse:collapse;width:100%;font-size:.92rem;background:#fff;margin:6px 0}
.stim td,.stim th,.q-text td,.q-text th,.explain td,.explain th,.opt td,.opt th{border:1px solid var(--line);padding:6px 7px;text-align:center}
.stim th,.q-text th,.explain th{background:var(--line2);font-weight:800}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.q-text{font-weight:700;margin-bottom:12px;font-size:1.1rem;line-height:1.6}
.q-text p,.stim p{margin:0 0 .6em}
.fig{margin:4px 0 14px;text-align:center;background:#fff;border-radius:14px}
.fig svg{max-width:100%;height:auto;max-height:min(300px,38vh)}
.q-hint{margin:-4px 0 10px;font-size:.86rem;font-weight:700;color:var(--muted)}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 13px;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:border-color .12s,background .12s,transform .06s;font-weight:700;line-height:1.45;font-size:1.07rem}
.opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.opt:hover:not(:disabled){border-color:#b9c4ff}
.opt .key{flex:0 0 32px;height:32px;border-radius:10px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink2);transition:all .12s}
.opt.multi .key{border-radius:8px}
.opt[aria-checked="true"]{border-color:var(--brand);background:var(--brandSoft);box-shadow:0 3px 0 var(--brandLine)}
.opt[aria-checked="true"] .key{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.correct{border-color:var(--ok);background:var(--okSoft);box-shadow:0 3px 0 #b6e6cf}
.opt.correct .key{background:#12804f;border-color:#12804f;color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badSoft);box-shadow:0 3px 0 #f6c3cd}
.opt.wrong .key{background:#c93250;border-color:#c93250;color:#fff}
.opt.missed{border-color:var(--ok);border-style:dashed}
.opt:disabled{cursor:default}
.opt .txt{min-width:0;overflow-wrap:anywhere}
.bs{display:grid;gap:10px}
.bs-row{display:grid;grid-template-columns:1fr;gap:10px;border:2px solid var(--line);border-radius:16px;padding:12px 13px;background:#fff;font-weight:700;font-size:1.07rem}
.bs-no{color:var(--muted);margin-right:2px}
.bs-row.correct{border-color:var(--ok);background:var(--okSoft)}
.bs-row.wrong{border-color:var(--bad);background:var(--badSoft)}
.bs-row .ans{font-size:.84rem;font-weight:800;color:var(--ok2)}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;gap:6px;justify-self:start;min-width:220px}
.seg button{border:2px solid var(--line);background:#fff;border-radius:12px;font-family:var(--display);font-weight:600;font-size:.95rem;padding:.45em 1em;cursor:pointer;color:var(--ink2);box-shadow:0 2px 0 var(--line);min-height:44px}
.seg button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 0 var(--brand2)}
.seg button:disabled{cursor:default}
.explain{margin-top:14px;padding:14px;border-radius:18px;background:#fff;border:2px solid var(--brandSoft);font-size:1.07rem;line-height:1.65}
.explain b.t{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--brand2)}
.explain b.t img{width:30px;height:30px}
.verdict{display:flex;align-items:center;gap:10px;border-radius:16px;padding:11px 14px;font-weight:800;margin:14px 0 0}
.verdict.ok{background:var(--okSoft);color:var(--ok2)}
.verdict.no{background:var(--badSoft);color:var(--bad2)}
.verdict.part{background:var(--sunSoft);color:var(--sunInk)}
.verdict .k{font-weight:700;font-size:.9rem;margin-top:2px}

/* ---------- runner latihan & ujian */
body.exam .nav,body.exam .top{display:none}
body.exam{background:#f6f7ff}
.exam-top{position:sticky;top:0;z-index:35;background:rgba(246,247,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:var(--safeT)}
.exam-top-in{max-width:1100px;margin:0 auto;padding:10px 14px 6px;display:flex;align-items:center;gap:10px}
.exam-title{min-width:0;flex:1}
.exam-title b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-title small{display:block;color:var(--muted);font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:600;font-size:1.1rem;padding:.3em .8em;border-radius:999px;background:#fff;box-shadow:var(--sh1);display:inline-flex;align-items:center;gap:6px}
.timer::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok)}
.timer.warn{background:var(--badSoft);color:var(--bad2)}
.timer.warn::before{background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.save-st{font-size:.75rem;color:var(--muted);white-space:nowrap}
.save-st.err{color:var(--bad2);font-weight:800}
.net-banner{max-width:1072px;margin:0 14px 8px;padding:8px 12px;border-radius:12px;background:var(--badSoft);color:#8a1f30;font-weight:800;font-size:.86rem;line-height:1.4}
@media (min-width:1100px){.net-banner{margin-left:auto;margin-right:auto}}
.exam-prog{height:6px;background:#e3e7f8;margin:0 14px 6px;border-radius:9px;overflow:hidden;max-width:1072px}
@media (min-width:1100px){.exam-prog{margin-left:auto;margin-right:auto}}
.exam-prog i{display:block;height:100%;background:var(--brand);border-radius:9px;transition:width .3s}
.segbar{display:flex;gap:4px;padding:0 14px 8px;max-width:1100px;margin:0 auto}
.segbar i{flex:1;height:8px;border-radius:9px;background:#e1e5f6;transition:background .3s}
.segbar i.ok{background:var(--ok)} .segbar i.no{background:var(--bad)} .segbar i.part{background:var(--sun)}
.segbar i.cur{background:var(--brandLine);box-shadow:inset 0 0 0 2px var(--brand)}
.exam-body{max-width:1100px;margin:0 auto;padding:8px 14px 150px}
.exam-cols{display:block}
.exam-bottom{position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--line);padding:12px 14px calc(12px + var(--safe));box-shadow:0 -8px 24px rgba(27,33,64,.07);transition:background .2s}
.exam-bottom-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.exam-bottom-in.one{grid-template-columns:1fr;max-width:640px}
.exam-bottom .btn{padding:.8em 1em}
.x{border:0;background:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.05rem;line-height:1;box-shadow:var(--sh1);color:var(--ink2);flex:0 0 auto}
.flag-btn{border:2px solid #ffd56a;background:#fff;color:var(--sunInk);border-radius:999px;padding:.5em .9em;font-weight:800;font-size:.85rem;cursor:pointer;white-space:nowrap;min-height:44px}
.flag-btn[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#3d2900}
.q-meta .flag-btn{margin-left:auto}
.grid-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.gn{aspect-ratio:1;border-radius:13px;border:2px solid var(--line);background:#fff;font-family:var(--display);font-weight:600;cursor:pointer;position:relative;font-size:1rem;box-shadow:0 2px 0 var(--line)}
.gn.ans{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 0 var(--brand2)}
.gn.flag{background:var(--sun);border-color:var(--sun);color:#3d2900;box-shadow:0 2px 0 var(--sun2)}
.gn.part{background:var(--brandSoft);border-color:var(--brand);color:var(--brand2);box-shadow:0 2px 0 var(--brandLine)}
.gn.ans.flag{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 0 var(--brand2)}
.gn.part.flag{background:var(--brandSoft);border-color:var(--brand);color:var(--brand2);box-shadow:0 2px 0 var(--brandLine)}
.gn.ans.flag::after,.gn.part.flag::after{content:"";position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px #fff}
.gn.cur{outline:3px solid var(--ink);outline-offset:2px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;font-weight:700;color:var(--muted);margin:12px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-1px;border:2px solid var(--line)}
.legend .l-ans{background:var(--brand);border-color:var(--brand)} .legend .l-flag{background:var(--sun);border-color:var(--sun)}
.legend .l-part{background:var(--brandSoft);border-color:var(--brand)}
/* panel umpan balik latihan */
.fb{display:flex;align-items:center;gap:10px;margin-bottom:10px;max-width:640px;margin-left:auto;margin-right:auto}
.fb img{width:62px;height:62px;flex:0 0 auto;margin:-26px 0 -4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));animation:pop .45s cubic-bezier(.3,1.7,.5,1) both}
.fb .fb-t{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.2}
.fb .fb-s{font-size:.88rem;font-weight:800}
.fb .xp{margin-left:auto;font-family:var(--display);font-weight:600;font-size:.95rem;background:rgba(255,255,255,.7);border-radius:999px;padding:.25em .7em;white-space:nowrap;animation:pop .5s .1s cubic-bezier(.3,1.7,.5,1) both}
.exam-bottom.ok{background:#e3f7ee;border-top-color:#bfe9d4} .exam-bottom.ok .fb{color:var(--ok2)}
.exam-bottom.no{background:#fde8ec;border-top-color:#f8c6d0} .exam-bottom.no .fb{color:var(--bad2)}
.exam-bottom.part{background:#fff5d6;border-top-color:#ffe59a} .exam-bottom.part .fb{color:var(--sunInk)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.combo{display:inline-flex;align-items:center;gap:4px;background:var(--sun);color:#3d2900;font-weight:900;font-size:.75rem;border-radius:999px;padding:.15em .6em;margin-left:6px;vertical-align:2px}

/* ---------- lembar, toast, muat */
.sheet-bg{position:fixed;inset:0;background:rgba(27,33,64,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s ease}
.sheet{background:#fff;width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:28px 28px 0 0;padding:10px 18px calc(18px + var(--safe));animation:up .26s cubic-bezier(.2,.8,.3,1)}
.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 10px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheet-h h2{margin:0}
.sheet .x{background:var(--line2);box-shadow:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:calc(var(--navh) + 18px + var(--safe));transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:.75em 1.15em;border-radius:16px;font-size:.93rem;font-weight:700;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;width:max-content;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 10px 30px rgba(27,33,64,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* di ujian: di bawah bar atas, tidak menutupi tombol bawah; saat lembar terbuka: di atas, tidak menutupi tombol lembar */
body.exam .toast{bottom:auto;top:calc(var(--safeT) + 78px)}
body:has(.sheet-bg) .toast{bottom:auto;top:calc(var(--safeT) + 12px)}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-weight:700;padding:60px 0}
.loading img{width:96px;animation:bob 1.6s ease-in-out infinite}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--brandSoft);border-top-color:var(--brand);animation:rot .8s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.skel{border-radius:var(--r);background:linear-gradient(90deg,#e8ebf8 25%,#f3f5fd 50%,#e8ebf8 75%);background-size:200% 100%;animation:shim 1.2s infinite;margin-bottom:12px}
@keyframes shim{to{background-position:-200% 0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90}
.reward{text-align:center;padding:4px 4px 0}
.reward img.big{width:150px;display:block;margin:-6px auto 6px;animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.reward h2{font-size:1.45rem;margin:0 0 4px}
.reward .badge-list{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 16px}
.reward .badge-list div{width:96px;font-size:.78rem;font-weight:800}
.reward .badge-list img{width:72px;height:72px;display:block;margin:0 auto 4px;animation:pop .6s .15s cubic-bezier(.3,1.6,.5,1) both}

/* ---------- ringkasan & hasil */
.celebrate{position:relative;text-align:center;border-radius:28px;padding:18px 18px 20px;background:#fff;box-shadow:var(--sh1);margin-bottom:14px;overflow:hidden}
.celebrate::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:radial-gradient(circle at 50% 120%,rgba(61,90,254,.14),transparent 70%)}
.celebrate .cel-img{width:150px;position:relative;margin:0 auto 4px;display:block;animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.celebrate h1{font-size:1.6rem;margin:0 0 4px}
.celebrate .pills{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.xp-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:.35em .9em .35em .45em;font-family:var(--display);font-weight:600;background:var(--sunSoft);color:var(--sunInk)}
.xp-pill img{width:24px;height:24px}
.xp-pill.blue{background:var(--brandSoft);color:var(--brand2)}
.xp-pill.green{background:var(--okSoft);color:var(--ok2)}
.result-hero{position:relative;border-radius:28px;padding:18px;color:#fff;overflow:hidden;margin-bottom:14px;box-shadow:var(--sh2);background:linear-gradient(150deg,#4a60f2,#3d5afe 55%,#2f43d6)}
.result-hero.k-kurang,.result-hero.k-memadai{color:var(--ink);box-shadow:var(--sh1)}
.result-hero.k-kurang{background:linear-gradient(150deg,#eef1ff,#e9edff 60%,#dfe5ff)}
.result-hero.k-memadai{background:linear-gradient(150deg,#fff9e6,#fff5d6 60%,#ffefc2)}
.result-hero.k-kurang h1,.result-hero.k-kurang .sub,.result-hero.k-memadai h1,.result-hero.k-memadai .sub{color:var(--ink)}
.result-hero.k-kurang .kat:not(.ulang){background:var(--badSoft);color:var(--bad2);box-shadow:inset 0 0 0 1.5px #f6c3cd}
.result-hero.k-memadai .kat:not(.ulang){background:var(--sun);color:#3d2900}
.result-hero.k-kurang :focus-visible,.result-hero.k-memadai :focus-visible{outline-color:var(--brand2)}
.result-hero.k-baik{background:linear-gradient(150deg,#12804f,#0f6e48 60%,#0b5a3b);box-shadow:0 14px 30px rgba(18,128,79,.28)}
.result-hero.k-istimewa{background:linear-gradient(150deg,#6a5cf5,#5b5bf7 50%,#3d47d9);box-shadow:var(--sh2)}
.result-hero .cil{position:absolute;right:-6px;bottom:-10px;width:128px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}
.result-hero h1{color:#fff;margin:0 0 2px;font-size:1.3rem;max-width:60%}
.result-hero .sub{font-weight:700;font-size:.86rem;color:#fff;position:relative;z-index:1;max-width:66%}
.result-hero .score{display:flex;align-items:flex-end;gap:10px;margin-top:12px;position:relative;z-index:1}
.result-hero .score b{font-family:var(--display);font-weight:600;font-size:3.4rem;line-height:.9}
.result-hero .score span{font-weight:800;padding-bottom:4px}
.result-hero .kat{display:inline-flex;margin-top:10px;background:rgba(255,255,255,.95);color:var(--ink);font-weight:800;font-size:.85rem;border-radius:999px;padding:.3em .85em;position:relative;z-index:1}
.stat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-tiles div{background:#fff;border-radius:18px;padding:12px 8px;text-align:center;box-shadow:var(--sh1)}
.stat-tiles b{display:block;font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.1}
.stat-tiles span{font-size:.75rem;color:var(--muted);font-weight:800}
.score-head{display:flex;align-items:center;gap:16px}
.score-head h1{margin:0 0 4px}
.dom-row{margin-bottom:12px}
.dom-row .row{font-size:.93rem;font-weight:700;margin-bottom:6px}
.dom-row b{font-family:var(--display);font-weight:600}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:#fff;border-radius:999px;padding:.5em 1em;font-weight:800;font-size:.88rem;cursor:pointer;white-space:nowrap;box-shadow:var(--sh1);color:var(--ink2);min-height:44px}
.tab[aria-pressed="true"]{background:var(--ink);color:#fff}
.rv{border-radius:18px;background:#fff;margin-bottom:10px;overflow:hidden;box-shadow:var(--sh1)}
.rv-h{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fff;padding:12px 14px;text-align:left;cursor:pointer}
.rv-h .mark{flex:0 0 auto;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-weight:900;color:#fff}
.mark.ok{background:#12804f} .mark.no{background:#c93250} .mark.empty{background:#6b7394} .mark.part{background:var(--sun);color:#3d2900}
.rv-h .t{flex:1;min-width:0;font-size:.92rem}
.rv-h .t b{display:block;font-weight:800}
.rv-h .t span{color:var(--muted);font-size:.83rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-h .chev{color:#8a91ad;font-size:1.3rem;transition:transform .15s}
.rv-h[aria-expanded="true"] .chev{transform:rotate(90deg)}
.rv-b{padding:4px 14px 16px;border-top:1px solid var(--line2)}
.rv-b .exam-cols{margin-top:12px}

/* ---------- simulasi */
.sim-banner{position:relative;border-radius:var(--r);padding:16px 18px;background:linear-gradient(135deg,#1b2140,#2f3a78);color:#fff;overflow:hidden;margin-bottom:6px;min-height:128px}
.sim-banner img{position:absolute;right:-4px;bottom:-12px;width:122px}
.sim-banner h1{color:#fff;font-size:1.35rem;margin:0 0 4px;max-width:66%}
.sim-banner p{margin:0;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.86);max-width:64%}
.ticket{display:flex;align-items:stretch;background:#fff;border:0;border-radius:20px;box-shadow:var(--sh1);width:100%;padding:0;text-align:left;cursor:pointer;overflow:hidden;font:inherit;color:inherit;transition:transform .1s}
.ticket:active{transform:scale(.985)}
.ticket .stub{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;background:linear-gradient(160deg,#5b5bf7,#3d47d9)}
.ticket.bin .stub{background:linear-gradient(160deg,#c2410c,#a8380e)}
.ticket .stub b{font-family:var(--display);font-weight:600;font-size:1.9rem;line-height:1}
.ticket .stub small{font-size:.75rem;font-weight:800;letter-spacing:.02em}
.ticket .stub::after{content:"";position:absolute;right:-7px;top:0;bottom:0;width:14px;background:radial-gradient(circle at 7px 7px,#fff 5px,transparent 5.5px) 0 0/14px 16px repeat-y}
.ticket .info{flex:1;min-width:0;padding:12px 12px 12px 18px}
.ticket .info b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem}
.ticket .info small{display:block;color:var(--muted);font-weight:700;font-size:.82rem}
.ticket .st{display:flex;align-items:center;padding-right:12px}
.ticket.locked{opacity:.6;cursor:default}
.ticket.done .stub{background:linear-gradient(160deg,#12804f,#0b5a3b)}
.rules{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.rules li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:.95rem}
.rules li i{flex:0 0 32px;height:32px;border-radius:11px;background:var(--brandSoft);display:grid;place-items:center;font-style:normal}

/* ---------- rapor & akun */
.rapor-head{display:flex;align-items:center;gap:14px;margin:6px 2px 16px}
.rapor-head h1{margin:0}
.page-h h1,.rapor-head h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.subj-card{border-radius:var(--r);background:#fff;box-shadow:var(--sh1);margin-bottom:14px;overflow:hidden}
.subj-card .sc-h{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff}
.subj-card.mtk .sc-h{background:linear-gradient(135deg,#5b5bf7,#3d47d9)}
.subj-card.bin .sc-h{background:linear-gradient(135deg,#c2410c,#a8380e)}
.subj-card .sc-h h2{color:#fff;margin:0}
/* cincin: busur kuning, lubang putih, angka gelap (terbaca di header biru maupun oranye) */
.subj-card .sc-h .ring{background:conic-gradient(var(--sun) calc(var(--p)*1%),rgba(255,255,255,.35) 0)}
.subj-card .sc-h .ring span{background:#fff;color:var(--ink)}
.subj-card .sc-h small{font-weight:700;color:#fff}
.subj-card .sc-b{padding:12px 16px 14px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:118px;margin:8px 0 4px}
.week .d{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.week .d i{display:block;width:100%;max-width:30px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#6a7dff,#3d5afe);min-height:3px}
.week .d i.zero{background:var(--line)}
.week .d small{font-size:.75rem;color:var(--muted);font-weight:800}
.week .d em{font-style:normal;font-size:.75rem;font-weight:900}
.trend svg{width:100%;height:auto;max-width:640px;margin:0 auto;display:block}
.topic{padding:10px 0;border-top:1px solid var(--line2)}
.topic:first-child{border-top:0}
details.dom{border-top:1px solid var(--line2);padding:12px 0}
details.dom summary{list-style:none;cursor:pointer}
details.dom summary::-webkit-details-marker{display:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
.kv dt{color:var(--muted);font-weight:700} .kv dd{margin:0;font-weight:800}
.profile-head{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:28px;padding:22px 16px 16px;box-shadow:var(--sh1);margin:8px 0 14px}
.profile-head h1{margin:12px 0 2px}
.av.av-ini{font-family:var(--display);font-weight:600;font-size:2.2rem;background:linear-gradient(160deg,#5b74ff,#2a3fcc)}
.switch{position:relative;width:52px;height:30px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:#d5dbef;transition:background .2s}
.switch span::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(22px)}
.switch input:focus-visible+span{box-shadow:0 0 0 3px var(--brand2)}
.choose-kid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.choose-kid button{border:0;background:#fff;border-radius:24px;padding:18px 10px 14px;box-shadow:var(--sh1);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s}
.choose-kid button:active{transform:scale(.97)}
.choose-kid .av{width:86px;height:86px}
.choose-kid b{font-family:var(--display);font-weight:600;font-size:1.1rem}
.choose-kid small{color:var(--muted);font-weight:700;margin-top:-6px}
.splash{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-weight:800}
.splash img{width:120px;animation:bob 1.6s ease-in-out infinite}
.view:focus,#sheetT:focus{outline:none}
:focus-visible{outline:3px solid var(--brand2);outline-offset:2px}
.home-hero :focus-visible,.auth-hero :focus-visible,.result-hero :focus-visible,.subj:focus-visible,.subj-banner :focus-visible{outline-color:#fff}

@media (min-width:900px){
  .view{padding-top:22px}
  .exam-cols.has-stim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
  .exam-cols.has-stim .stim{position:sticky;top:96px;max-height:calc(100vh - 230px);overflow:auto;margin:0}
  .exam-cols.has-stim .stim .stim-body{max-height:none;-webkit-mask-image:none;mask-image:none}
  .exam-cols.has-stim [data-stim]{display:none}
  .grid-nav{grid-template-columns:repeat(10,1fr)}
  .sheet-bg{align-items:center}
  .sheet{border-radius:28px}
  .sheet::before{display:none}
  .home-hero{padding:24px}
  .home-hero .cil{width:170px}
  .badge-grid{grid-template-columns:repeat(4,1fr)}
  .auth-hero{margin:0;border-radius:0 0 34px 34px}
}
/* desktop: semua lencana terlihat (tanpa geser mendatar) */
@media (min-width:768px){
  .badges-row{flex-wrap:wrap;overflow:visible;margin:0;padding:4px 0 10px}
}
@media (max-width:360px){
  .home-hero .hh-txt,.lvl{max-width:70%}
  .home-hero .cil{width:112px}
  .subj img{width:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .top,.nav,.no-print,.toast,.play,.slow-note{display:none!important}
  body{background:#fff}
  .view{padding:0;max-width:none}
  .card,.subj-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
}
.view.bare{max-width:none;padding:0}

/* ---------- tambahan v2.1: ikon SVG, kartu kecil, mode keyboard */
.view.auth-v{padding-top:0}
.cil-md{width:118px;display:block;margin:0 auto 6px}
.kid-chip{max-width:36vw}
.pill svg{width:20px;height:20px}
.pill.dim svg{filter:grayscale(1);opacity:.45}
.pill.bump{animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
.hh-stat svg{width:20px;height:20px}
.home-hero .hh-stats{max-width:66%}
.ring span svg{width:28px;height:28px}
.week7 .dot svg{width:20px;height:20px;filter:grayscale(1) opacity(.3)}
.week7 .dd.on .dot svg{filter:none}
.chip svg{width:14px;height:14px}
.xp-pill svg{width:22px;height:22px}
.combo svg{width:13px;height:13px}
.rules li i svg{width:18px;height:18px;color:var(--brand2)}
.rules li span{padding-top:5px}
.kel>.topic-row:first-child{border-top:0}
.topic-row .tile{width:40px;height:40px;border-radius:13px}
.topic-row .grow .small{display:block}
.badge .prog{display:block}
.reward img.big.dim{filter:grayscale(1) opacity(.45)}
.explain{scroll-margin:96px 0 170px}
.btn-primary .spin,.btn-ok .spin,.btn-bad .spin,.play .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
ol.steps{margin:0 0 6px;padding-left:1.3em;display:grid;gap:8px;font-weight:600}
.choose-kid .add-kid{border:2px dashed var(--brandLine);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--brand2);font-weight:800;text-decoration:none;min-height:160px;background:rgba(255,255,255,.55)}
.add-kid span{width:64px;height:64px;border-radius:50%;background:var(--brandSoft);display:grid;place-items:center;font-family:var(--display);font-size:2rem;line-height:1}
.install-card b{display:block}
.subj-grid>.card{grid-column:1/-1;margin:0}
.mission .grow{min-width:0}
/* ukuran maskot: gambar Cil potret (lebar 200-330, tinggi 440), jadi diatur lewat tinggi */
.splash img{width:auto;height:160px}
.loading img{width:auto;height:118px}
.empty img{width:auto;height:112px}
.cil-md{width:auto;height:124px}
.celebrate .cel-img{width:auto;height:176px}
.reward img.big{width:auto;height:156px}
.fb img{width:auto;height:74px;object-fit:contain;margin:-30px 0 -6px}
.explain b.t img{width:auto;height:34px}
.sim-banner img{width:auto;height:150px;bottom:-14px}
.result-hero .cil{width:auto;height:178px}
.auth-hero .cil{width:auto;height:206px}
.home-hero .cil{width:auto;height:226px;bottom:-30px}
.exam-bottom .fb{width:100%}
.install-card{position:relative}
.install-card .x{position:absolute;top:-12px;right:-10px;width:30px;height:30px;font-size:.8rem}
.install-card .x::after{content:"";position:absolute;inset:-7px} /* area sentuh 44px, tampilan tetap 30px */
@media (min-width:900px){.home-hero .cil{width:auto;height:250px}}
@media (max-width:360px){.home-hero .cil{width:auto;height:190px}}
/* ruang pesan tetap 2 baris: papan angka tidak bergeser saat pesan muncul */
.pin-err{min-height:3em;margin:0;line-height:1.5;display:flex;align-items:center;justify-content:center}
.auth-hero .cil{height:188px}

/* ---------- tambahan v2.2: target sentuh, layar pendek, kontras */
.top .logo{min-height:44px}
.kid-chip{min-height:44px}
.tap{display:inline-block;padding:11px 2px;margin:-11px 0}
.slow-note{margin:6px 0 0}
@media (max-height:760px){
  .auth-hero{padding-bottom:40px}
  .auth-hero .cil{height:150px}
  .pp-key{height:50px}
  .pinpad{gap:8px}
}
/* v2.5 (AP3-03): layar setinggi 681-760px (mis. HP 360x740): baris terakhir papan PIN dan tautan bantuan Lupa PIN terlihat
   tanpa gulir. Setiap properti di sini juga diatur oleh tingkat max-height:680px di bawah, jadi layar 680px ke bawah tetap
   sama. Teks pesan .pin-err tetap dua baris dan tombol angka tetap di atas 44px. */
@media (max-height:760px){
  .auth-hero{padding-top:calc(8px + var(--safeT))}
  .auth-hero h1{margin:8px 0 4px}
  .auth-card{padding-top:18px}
  .auth-card .field{margin-bottom:10px}
  .auth-card .field label{margin-bottom:4px}
  .auth-card .input{padding:.7em .95em}
  .pin-label{margin-top:0}
  .pin-dots{margin:6px 0 2px}
  .pinpad{gap:6px;margin-top:6px}
  .pp-key{height:48px}
  #pph{margin-top:6px!important} /* jarak bawaan ditulis di markup (style) */
}

/* v2.3: catatan simulasi (ulangan, simulasi lain berjalan), tab ganda, set latihan pendek */
.net-banner.info{background:var(--brandSoft);color:var(--brand2)}
.start-note{margin:0 0 14px}
.start-note p{margin:0 0 10px}
.set-note{margin:0 0 12px}
.chip.ulang{background:var(--sunSoft);color:var(--sunInk);vertical-align:2px}
.result-hero .kat.ulang{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;margin-left:6px}

/* v2.4: layar pendek (mis. HP 320x640): papan PIN sampai baris terakhir, juga tautan bantuan di bawahnya,
   terlihat tanpa gulir. Teks pesan .pin-err tidak dikecilkan dan ruangnya tetap dua baris; tombol angka tetap di atas 44px. */
@media (max-height:680px){
  .auth-hero{padding:calc(8px + var(--safeT)) 18px 32px}
  .auth-hero h1{font-size:1.4rem;margin:8px 0 2px}
  .auth-hero p{font-size:.9rem;line-height:1.4}
  .auth-hero .cil{height:118px}
  .auth-hero::after{display:none} /* AP4-10: hero pendek, lingkaran kuning tidak berada di bawah teks */
  .auth-card{padding:16px 16px 18px;margin-top:-32px}
  .auth-card h2{font-size:1.1rem}
  .auth-card .field{margin-bottom:8px}
  .auth-card .field label{margin-bottom:3px}
  .auth-card .input{padding:.5em .85em}
  .pin-label{margin-top:0}
  .pin-dots{margin:4px 0 2px}
  .pinpad{gap:5px;margin-top:2px}
  .pp-key{height:45px}
  #pph{margin-top:6px!important} /* jarak bawaan ditulis di markup (style) */
}

/* v2.5: kontrak 21, kata A-Labs (juga di pesan server) tidak terpotong di tanda hubung */
.nw{white-space:nowrap}
/* v2.5 (AP3-02): catatan jawaban simulasi yang belum terkirim di halaman hasil, dengan tombol Coba lagi */
.late-note{margin:0 0 14px}
.late-note p{margin:0 0 10px}

/* v2.6 (putaran 4) */
/* AP4-14: masih ada isi di bawah bar tombol (mis. pilihan D): bayangan lembut di atas bar */
.exam-bottom::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(to top,rgba(27,33,64,.13),rgba(27,33,64,0))}
body.more-below .exam-bottom::before{opacity:1}
/* AP4-04: HP sangat kecil: merek di header cukup logo (teks tetap terbaca pembaca layar), XP di hero tidak tertutup Cil */
.logo-t{white-space:nowrap}
@media (max-width:340px){
  .top .logo-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .home-hero .hh-txt{max-width:66%}
  .home-hero .lvl,.home-hero .hh-stats{max-width:calc(100% - 92px)}
  .lvl-h span:last-child{white-space:nowrap}
  .home-hero .cil{height:160px;right:-14px;bottom:-24px}
}
/* AP4-02: kartu luring */
.offline-card .note{text-align:left;margin:0 0 14px}
/* AP4-09: tombol muat riwayat lebih lama */
.more-wrap{margin-top:14px}

/* Uji gabung 4: baris level tidak terpecah, tombol kartu luring/galat berjarak, judul kartu simulasi di atas ilustrasi */
.lvl-n{white-space:nowrap}
@media (max-width:340px){ .lvl-h{flex-wrap:wrap;row-gap:2px} }
.offline-card .btn{margin:5px 3px}
@media (max-width:640px){
  .subj{min-height:196px}
  .subj img{width:104px;top:-8px}
  .subj .s-name{text-shadow:0 1px 8px rgba(20,24,80,.35)}
}

/* Gambar bacaan (6 Nov): ilustrasi hiasan di atas teks. Latihan = pita 2:1; simulasi (body.ujian) = pita tipis supaya tetap tenang
   dan teks bacaan cepat terlihat. Gambar SVG bacaan MTK ada di dalam .stim-body (ikut dipotong "Baca selengkapnya"). */
.stim-art{margin:2px 0 10px;border-radius:14px;overflow:hidden;background:#eef1fb;aspect-ratio:2/1}
.stim-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ujian .stim-art{aspect-ratio:auto;height:72px}
.stim-body .fig{margin:10px 0 4px}
@media (min-width:900px){ .stim-art{aspect-ratio:5/2} .ujian .stim-art{height:80px} }

/* Gambar soal: tombol bawah ujian satu baris di HP 320 px */
@media (max-width:359px){ .exam-bottom .btn{padding:.8em .55em;white-space:nowrap} }