:root {
  --bg: #F2EDFC;
  --surface: #FFFFFF;
  --ink: #24135F;
  --muted: #665C8C;
  --line: #DDD3F3;
  --purple: #5B33C4;
  --purple-deep: #3A1D93;
  --purple-soft: #E9E0FB;
  --cyan: #19C3D1;
  --cyan-ink: #0E2A57;
  --red: #E0293E;
  --red-soft: #FCDDE1;
  --lemon: #F7D548;
  --good: #1E8A4C;
  --good-soft: #D9F0E2;
  --bad: #C7283A;
  --bad-soft: #FBDDE0;
  --hero-a: #4A24B0;
  --hero-b: #2E1678;
  --on-hero: #FFFFFF;
  --f-display: 'Poppins', 'Trebuchet MS', sans-serif;
  --f-body: 'Poppins', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  padding-inline: 16px;
}
.wrap { max-width: 1080px; margin-inline: auto; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 6.4vw, 4.2rem); font-weight: 800; letter-spacing: -.02em; font-style: italic; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font: 700 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--purple); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn { display: inline-block; border: 0; border-radius: 999px; padding: .75rem 1.4rem; font-weight: 700; background: var(--purple-deep); color: #fff; text-decoration: none; text-align: center; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.cyan { background: var(--cyan); color: var(--cyan-ink); }
.btn.ghost { background: transparent; border: 2px solid currentColor; color: var(--purple); }
.btn.onhero.ghost { color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

:root{
  --bg:#F2EDFC; --surface:#FFFFFF; --ink:#24135F; --muted:#665C8C; --line:#DDD3F3;
  --purple:#5B33C4; --purple-deep:#3A1D93; --purple-soft:#E9E0FB;
  --cyan:#19C3D1; --cyan-ink:#0E2A57; --red:#E0293E; --red-soft:#FCDDE1;
  --lemon:#F7D548; --good:#1E8A4C; --good-soft:#D9F0E2; --bad:#C7283A; --bad-soft:#FBDDE0;
  --hero-a:#4A24B0; --hero-b:#2E1678; --on-hero:#FFFFFF;
  --f-display:'Poppins','Trebuchet MS',sans-serif; --f-body:'Poppins',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);padding-inline:16px}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,6.4vw,4.2rem);font-weight:800;letter-spacing:-.02em;font-style:italic}
h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;letter-spacing:-.015em}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font:700 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--purple)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn{display:inline-block;border:0;border-radius:999px;padding:.75rem 1.4rem;font-weight:700;background:var(--purple-deep);color:#fff;text-decoration:none;text-align:center;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.cyan{background:var(--cyan);color:var(--cyan-ink)}
.btn.ghost{background:transparent;border:2px solid currentColor;color:var(--purple)}
.btn.onhero.ghost{color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:-16px;padding:.55rem 16px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.logo{font:700 1.3rem var(--f-display);display:flex;align-items:center;gap:.45rem;letter-spacing:-.02em;color:var(--purple-deep)}
:root[data-theme="dark"] .logo{color:var(--ink)}
.logo svg{width:22px;height:22px}
.nav{display:flex;gap:1rem;margin-left:auto;font-size:.85rem;font-weight:500}
.nav a{color:var(--muted);text-decoration:none}.nav a:hover{color:var(--ink)}
.xp{display:flex;align-items:center;gap:.6rem;min-width:0}
.xp .lvl{font:700 .7rem var(--f-mono);background:var(--cyan);color:var(--cyan-ink);padding:.25rem .6rem;border-radius:99px;white-space:nowrap}
.xp .track{width:80px;height:8px;background:var(--line);border-radius:9px;overflow:hidden}
.xp .fill{height:100%;background:var(--purple);width:0;transition:width .5s}
.xp small{color:var(--muted);font:500 .7rem var(--f-mono)}
@media(max-width:700px){.nav{display:none}}

.hero{margin-top:1.2rem;border-radius:28px;color:var(--on-hero);position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--hero-a),var(--hero-b));padding:clamp(1.4rem,5vw,3.2rem);
  display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.hero>*{position:relative;min-width:0}
.hero .eyebrow{color:var(--cyan)}
.hero h1{margin-top:.8rem}
.hero h1 em{font-style:inherit;color:var(--cyan)}
.hero p.lead{font-size:1.05rem;opacity:.9;max-width:34em;margin-block:1rem 1.5rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap}
.stats{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap}
.stats b{display:block;font:800 1.5rem var(--f-display)}
.stats span{font-size:.75rem;opacity:.8}
.poster{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:1.2rem;display:grid;gap:.9rem;backdrop-filter:blur(2px)}
.poster .ttl{font:800 1.9rem/1 var(--f-display);font-style:italic;position:relative;padding-right:5.2rem}
.tag{position:absolute;right:-.4rem;top:-.7rem;background:var(--red);color:#fff;font:800 .85rem var(--f-display);letter-spacing:.06em;padding:.45rem 1.3rem .45rem 1.6rem;transform:rotate(30deg);clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.plaque{border-radius:12px;padding:.7rem;text-align:center;font:800 1.1rem var(--f-display);font-style:italic;color:var(--cyan-ink);
  background:linear-gradient(115deg,#9FD9FF,#E3C4FF 30%,#FFD9F0 50%,#BDF3E8 75%,#A9C8FF)}
.tl{display:grid;gap:.5rem}
.tl>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border-radius:12px;padding:.5rem .8rem}
.tl small{display:block;font-size:.68rem;opacity:.75;letter-spacing:.05em;text-transform:uppercase}
.tl b{font:700 .95rem var(--f-mono)}
.chip{font:700 .66rem var(--f-mono);padding:.25rem .6rem;border-radius:99px;background:rgba(255,255,255,.2);white-space:nowrap}
.chip.now{background:var(--cyan);color:var(--cyan-ink)}.chip.done{opacity:.6}
@media(max-width:820px){.hero{grid-template-columns:1fr}}

section{padding-block:clamp(2rem,5vw,3.4rem)}
.sec-head{display:grid;gap:.6rem;margin-bottom:1.5rem;max-width:40rem}
.sec-head p{color:var(--muted)}
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.step{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:1.1rem;display:grid;gap:.45rem;align-content:start;text-align:left;transition:.2s}
.step:hover,.step[aria-pressed="true"]{border-color:var(--purple);transform:translateY(-3px)}
.step[aria-pressed="true"]{background:var(--purple-soft)}
.step .tg{font:700 .7rem var(--f-mono);color:var(--red)}
.step p{font-size:.85rem;color:var(--muted)}
#stepInfo{margin-top:1rem;background:var(--purple-deep);color:#fff;border-radius:16px;padding:1.1rem 1.3rem;min-height:4.4rem}
@media(max-width:820px){.funnel{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.funnel{grid-template-columns:1fr}}

.arena{background:var(--surface);border:2px solid var(--line);border-radius:24px;overflow:hidden}
.tabs{display:flex;border-bottom:2px solid var(--line);overflow-x:auto;background:var(--purple-soft)}
.tabs button{flex:1;min-width:max-content;border:0;background:transparent;padding:1rem 1.2rem;font-weight:700;color:var(--muted);border-bottom:4px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--cyan);background:var(--surface)}
.pane{padding:clamp(1rem,3vw,2rem);min-height:420px}
.pane>*+*{margin-top:1rem}
label{display:grid;gap:.3rem;font-weight:600;font-size:.85rem}
input[type=text],input[type=tel],input[type=password]{font:inherit;padding:.8rem 1rem;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
input:focus{border-color:var(--purple);outline:none}
.err{color:var(--bad);font-size:.82rem;min-height:1.1em;font-weight:500}
.note{font-size:.8rem;color:var(--muted)}
.callout{background:var(--purple-soft);border-radius:14px;padding:.9rem 1.1rem;font-size:.9rem}
.formgrid{display:grid;gap:1rem;max-width:34rem}
.reqs{display:grid;gap:.5rem;background:var(--purple-soft);border-radius:16px;padding:1rem}
.reqs label{display:flex;align-items:flex-start;gap:.7rem;font-weight:500;font-size:.88rem;cursor:pointer}
.reqs input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--purple);flex:none}

.to-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.timer{font:700 1.3rem var(--f-mono);padding:.3rem .9rem;border-radius:99px;background:var(--bg);border:2px solid var(--line)}
.timer.low{color:var(--bad);border-color:var(--bad)}
.prog{height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--cyan);transition:width .3s}
.qgrid{display:flex;gap:.4rem;flex-wrap:wrap}
.qgrid button{width:2.4rem;height:2.4rem;border-radius:10px;border:2px solid var(--line);background:var(--bg);font:700 .8rem var(--f-mono)}
.qgrid button.done{background:var(--purple-soft);border-color:var(--purple)}
.qgrid button.flag{background:var(--lemon);border-color:#C9A800;color:#24135F}
.qgrid button.cur{outline:3px solid var(--cyan);outline-offset:1px}
.q-cat{font:700 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.q-text{font:700 1.2rem/1.4 var(--f-display);margin-top:.4rem}
.opts{display:grid;gap:.6rem}
.opt{display:flex;gap:.8rem;align-items:flex-start;text-align:left;width:100%;padding:.8rem 1rem;border:2px solid var(--line);border-radius:14px;background:var(--bg);transition:.15s}
.opt:hover{border-color:var(--purple)}
.opt .k{font:700 .8rem var(--f-mono);width:1.7rem;height:1.7rem;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--line)}
.opt.sel{border-color:var(--purple);background:var(--purple-soft)}.opt.sel .k{background:var(--purple-deep);color:#fff}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.row .sp{margin-left:auto}
.confirm{background:var(--red-soft);border-radius:14px;padding:1rem;display:grid;gap:.7rem}

.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.pkg{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:1.2rem;display:grid;gap:.6rem;align-content:start;transition:all 0.2s ease}
.pkg:hover{background:var(--purple-soft)!important;border-color:var(--cyan)!important;transform:translateY(-3px)}
.pkg .when{font:700 .68rem var(--f-mono);color:var(--purple);letter-spacing:.08em}
.pkg .big{font:800 1.9rem/1 var(--f-display);color:var(--purple-deep)}
.pkg ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.85rem}
.rec{margin-top:1.4rem;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:1.2rem;display:grid;gap:.9rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips button{border:2px solid var(--line);background:var(--bg);border-radius:99px;padding:.5rem 1rem;font-weight:600;font-size:.85rem}
.chips button[aria-pressed="true"]{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
#recOut{background:var(--purple-soft);border-radius:14px;padding:1rem;display:grid;gap:.6rem}

details{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:.9rem 1.1rem}
details+details{margin-top:.6rem}
summary{font-weight:700;cursor:pointer}
details p{margin-top:.6rem;color:var(--muted);font-size:.92rem}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.links a{display:grid;gap:.2rem;background:var(--purple-deep);color:#fff;border-radius:16px;padding:1rem 1.1rem;text-decoration:none;transition:transform .15s}
.links a:hover{transform:translateY(-3px)}
.links small{opacity:.75;font-size:.78rem}
footer{padding-block:2.2rem;margin-top:1rem;border-top:2px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,40px);background:var(--purple-deep);color:#fff;padding:.7rem 1.2rem;border-radius:99px;font-weight:600;opacity:0;transition:.3s;z-index:50;pointer-events:none;max-width:calc(100% - 32px);text-align:center;font-size:.9rem}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* --- LOGIN OVERLAY & PROFIL --- */
#loginOverlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 1000; display: none;
  justify-content: center; align-items: center; backdrop-filter: blur(4px);
}
.login-card {
  background: #fff; padding: 2.5rem; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(91, 51, 196, 0.2); width: 100%; max-width: 400px;
  text-align: center;
}
.login-card h2 { color: var(--purple-deep); margin-bottom: 1.5rem; font-size: 1.8rem; }
.login-card input {
  width: 100%; padding: 1rem; margin-bottom: 1rem;
  border: 2px solid var(--line); border-radius: 12px; font-size: 0.95rem; outline: none; background: #fff; color: #000;
}
.login-card input:focus { border-color: var(--purple); }
.login-card .lupa { display: block; text-align: right; font-size: 0.8rem; color: var(--purple); margin-top: -0.5rem; margin-bottom: 1.5rem; text-decoration: underline; cursor: pointer; }
.btn-login {
  width: 100%; background: var(--purple-deep); color: #fff;
  padding: 1rem; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; margin-bottom: 0.8rem; font-size: 1rem;
}
.btn-google {
  width: 100%; background: #2A303C; color: #fff; display: flex; justify-content: center; align-items: center; gap: 0.6rem;
  padding: 1rem; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; font-size: 1rem;
}
.user-profile {
  display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--ink); cursor: pointer; margin-left: 1rem;
}
.user-profile .ava {
  width: 36px; height: 36px; color: var(--purple-deep);
  display: flex; justify-content: center; align-items: center;
}

/* --- MODE UJIAN (HALAMAN PUTIH FULL SCREEN) --- */
body.mode-ujian > header,
body.mode-ujian .hero,
body.mode-ujian #alur,
body.mode-ujian #paket,
body.mode-ujian #faq,
body.mode-ujian #komunitas,
body.mode-ujian footer,
body.mode-ujian .sec-head,
body.mode-ujian .tabs,
body.mode-ujian #demoNote {
  display: none !important;
}

body.mode-ujian { background: var(--surface) !important; }
body.mode-ujian .wrap { max-width: 100% !important; padding: 0 !important; }
body.mode-ujian section#arena { padding: 0 !important; }
body.mode-ujian .arena { border: none !important; border-radius: 0 !important; min-height: 100vh; }
body.mode-ujian .pane { max-width: 800px; margin: 0 auto; padding: 5rem 2rem !important; }
body.mode-ujian .eyebrow { font-size: 1.1rem; }
body.mode-ujian h3 { font-size: 2.2rem; margin-bottom: 0.5rem; }
body.mode-ujian p.note { font-size: 1.1rem; margin-bottom: 2.5rem; }
body.mode-ujian .formgrid { max-width: 100%; } 
body.mode-ujian label { font-size: 1.2rem; }
body.mode-ujian input[type=text] { font-size: 1.5rem; padding: 1.2rem; border-radius: 16px; }
body.mode-ujian .btn[type="submit"] { font-size: 1.3rem; padding: 1.2rem; border-radius: 16px; }
body.mode-ujian .q-text { font-size: 1.6rem; line-height: 1.5; margin-bottom: 1.5rem; }
body.mode-ujian .opt { font-size: 1.2rem; padding: 1.2rem; border-radius: 16px; margin-bottom: 0.8rem; }
body.mode-ujian .opt .k { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
body.mode-ujian .timer { font-size: 2rem; padding: 0.5rem 1.5rem; }
body.mode-ujian button#btnKeluar { font-size: 1rem; padding: 0.6rem 1.2rem; margin-bottom: 2rem !important; }

/* --- MENU DROPDOWN PROFIL --- */
.profile-menu {
  position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 220px;
  display: none; flex-direction: column; z-index: 100; overflow: hidden; text-align: left;
}
.profile-menu.show { display: flex; }
.profile-menu .p-header { padding: 1rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.profile-menu .p-name { font-weight: 700; color: var(--ink); display: block; }
.profile-menu .p-email { font-size: 0.75rem; color: var(--muted); }
.profile-menu a {
  padding: 0.8rem 1rem; color: var(--ink); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;
}
.profile-menu a:hover { background: var(--purple-soft); color: var(--purple-deep); }

/* --- HALAMAN PROFIL PENGGUNA --- */
#halamanProfil { display: none; padding: 2rem 0; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 800px; margin: 0 auto; background: #fff; padding: 2rem; border-radius: 16px; border: 1px solid var(--line); color: #000; }
@media(max-width: 600px){ .profile-grid { grid-template-columns: 1fr; } }
.profile-header { grid-column: 1 / -1; margin-bottom: 1rem; border-bottom: 2px solid var(--line); padding-bottom: 1rem; }
.profile-header h2 { font-size: 1.8rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.form-group input, .form-group select {
  padding: 0.8rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: var(--bg); color: #000;
}
.form-group input:focus, .form-group select:focus { border-color: var(--purple); outline: none; }
.profile-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }

/* match (Pasang Kapsul) */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem}
.mgrid>div{display:grid;gap:.6rem;align-content:start}
.tile{border:2px solid var(--line);border-radius:14px;background:var(--bg);padding:.8rem;font-weight:600;font-size:.9rem;text-align:center;min-height:3.2rem;overflow-wrap:anywhere}
.tile.drug{font-family:var(--f-mono);font-size:.9rem;font-weight:700}
.tile.sel{border-color:var(--cyan);background:var(--purple-soft)}
.tile.gone{visibility:hidden}
.tile.shake{animation:sh .35s;border-color:var(--bad)}
@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hud{display:flex;gap:1.2rem;flex-wrap:wrap;font:700 .9rem var(--f-mono)}
.hud span b{color:var(--red)}

/* kilat (Benar-Salah Kilat) */
.kcard{border-radius:20px;background:var(--purple-deep);color:#fff;padding:clamp(1.2rem,4vw,2.2rem);text-align:center;display:grid;gap:1rem;min-height:170px;align-content:center}
.kcard .stmt{font:700 clamp(1.1rem,3vw,1.5rem)/1.3 var(--f-display);text-wrap:balance}
.kbtns{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.kbtns .btn{padding:1rem;font-size:1rem}
.kbtns .t{background:var(--good);color:#fff}
.kbtns .f{background:var(--red);color:#fff}
.flash{min-height:3rem;font-size:.9rem;color:var(--muted)}

/* result (Hasil Try Out) */
.rtitle{display:grid;justify-items:start;gap:.3rem}
.rtitle span{font:800 1.5rem/1 var(--f-display);font-style:italic;padding:.35rem 1.3rem;border-radius:99px;color:#fff}
.rtitle .a{background:var(--red)}.rtitle .b{background:var(--cyan);color:var(--cyan-ink)}
.res-top{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.res-top>*{min-width:0}
.ring{width:150px;height:150px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 2.3rem var(--f-display)}
.bars{display:grid;gap:.6rem}
.bars .b{display:grid;grid-template-columns:7.5rem 1fr 2.8rem;gap:.6rem;align-items:center;font-size:.82rem}
.bars .t{height:10px;border-radius:9px;background:var(--line);overflow:hidden}
.bars .t i{display:block;height:100%;border-radius:9px}
.review{display:grid;gap:.7rem}
.rv{border:2px solid var(--line);border-radius:14px;padding:.9rem 1rem;font-size:.9rem}
.rv.ok{border-left:8px solid var(--good)}.rv.no{border-left:8px solid var(--bad)}
.rv .ex{color:var(--muted);margin-top:.4rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{font:700 .72rem var(--f-mono);padding:.35rem .7rem;border-radius:99px;background:var(--lemon);color:#24135F}
.badge.off{background:var(--line);color:var(--muted)}
@media(max-width:560px){.res-top{grid-template-columns:1fr;justify-items:center}.bars{width:100%}.bars .b{grid-template-columns:6rem 1fr 2.6rem}}

/* --- DESAIN HALAMAN HASIL UJIAN (DUA KOLOM) - STRETCH REVISI --- */
body.mode-ujian .pane { 
  max-width: 1250px !important; /* Membuat layar membentang jauh lebih lebar (stretch) */
  padding: 3rem 2rem !important; /* Mengurangi ruang kosong berlebih di atas */
}

.res-layout {
  display: grid;
  grid-template-columns: 380px 1fr; /* Kolom kiri 380px, kolom kanan bebas stretch memenuhi layar */
  gap: 4rem; /* Jarak antar kolom dilonggarkan agar lebih elegan */
  align-items: start;
}

.res-left {
  display: grid;
  gap: 1.2rem;
}

/* Memperbaiki ukuran teks nama peserta agar sejajar rapi dengan lingkaran skor */
.res-top h3 {
  font-size: 1.3rem !important; 
  margin-bottom: 0.2rem !important;
  line-height: 1.3 !important;
}

.res-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.q-nums {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.q-nums button {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 600 0.85rem var(--f-mono);
  transition: 0.2s;
  cursor: pointer;
}

.q-nums button:hover {
  border-color: var(--purple);
}

.q-nums button.active {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: #fff;
  box-shadow: 0 4px 10px rgba(58, 29, 147, 0.3);
}

/* Mengurangi ukuran font agar tidak terkesan zoom-in */
.rev-content {
  font-size: 0.95rem; 
  color: var(--ink);
}

.rev-content .q-text {
  font-size: 1.05rem; /* Ukuran teks soal proporsional */
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.rev-content .ans {
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.rev-content .exp {
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Supaya di layar HP/Tablet tidak kesempitan (otomatis tumpuk atas-bawah) */
@media(max-width: 900px) {
  .res-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .res-right { padding-top: 2rem; border-top: 2px dashed var(--line); }
}

/* --- DESAIN KOTAK RIWAYAT SKOR --- */
.score-badge {
  background: var(--purple-soft);
  border: 1px dashed var(--purple);
  color: var(--purple-deep);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  width: 100%; /* Memaksa kotak selebar tombol di bawahnya */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-sizing: border-box;
}
.score-badge b {
  font-size: 0.95rem;
  font-weight: 800;
}
.score-badge .try-count {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
}

/* 1. Memperbesar ukuran font teks "PAKET TRY OUT & BUKU UKMPPAI 2026" */
.sec-head .eyebrow {
  font-size: 0.95rem; /* Ukuran lebih proporsional (di atas 0.72rem bawaan, tapi di bawah ukuran h2) */
  letter-spacing: 0.1em;
}

/* 2. Membuat teks deskripsi stretch lebar memenuhi margin (full width) */
#paket .sec-head {
  max-width: 100% !important; /* Menghilangkan batasan max-width 40rem agar membentang penuh */
}