@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')}
/* Landing SiapTKA.app. Bahasa visual sama dengan aplikasi (/app/app.css): token warna, Fredoka + Nunito,
   tombol 3D, kartu bundar, maskot Cil. Juga menata ulang dialog checkout (.co-*, dari /assets/checkout.js)
   supaya terlihat seperti lembar bawah aplikasi. checkout.css dimuat belakangan oleh checkout.js, tetapi disisipkan
   sebelum berkas ini, jadi aturan .co-* di sini tetap menimpanya. */
:root{
  --ink:#1b2140; --ink2:#3a4266; --muted:#5d6588; --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:#168a5b; --okInk:#0e7a4c; --okSoft:#e3f7ee;
  --bad:#f0506e; --bad2:#d63a58; --badInk:#b42345; --badSoft:#fde8ec;
  --mtk:#5b5bf7; --bin:#ff7a45;
  --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);
  --sh3:0 2px 4px rgba(27,33,64,.04),0 22px 50px rgba(27,33,64,.12);
  --shadow:var(--sh1);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Fredoka','Nunito',system-ui,sans-serif;
  --top:62px; --safe:env(safe-area-inset-bottom,0px);
  --phone:min(252px,64vw);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 10px)}
body{margin:0;font-family:var(--font);font-size:16.5px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--brand2)}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.18;letter-spacing:.005em;margin:0 0 .45em;color:var(--ink);text-wrap:balance}
h2{font-size:clamp(1.6rem,5.4vw,2.3rem)}
h3{font-size:1.16rem}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}   /* "A-Labs" tidak terpotong di tanda hubung (kontrak 21) */
.num{font-family:var(--display);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid rgba(61,90,254,.6);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:var(--brand2);font-weight:800;padding:10px 14px;border-radius:12px;box-shadow:var(--sh1)}
.skip:focus{top:10px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}

/* ---------- tombol (sama dengan aplikasi) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;border:0;border-radius:var(--rs);padding:.78em 1.35em;font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.2;letter-spacing:.01em;text-align:center;text-decoration:none;cursor:pointer;position:relative;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.btn:active{transform:translateY(3px)}
.btn[disabled]{transform:none!important}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand2)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{box-shadow:0 1px 0 var(--brand2)}
.btn-ghost{background:#fff;color:var(--brand2);box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line)}
.btn-ghost:hover{box-shadow:0 0 0 2px var(--brandLine) inset,0 3px 0 var(--brandLine)}
.btn-ghost:active{box-shadow:0 0 0 2px var(--line) inset,0 0 0 var(--line)}
.btn-block{width:100%}
.btn-lg{min-height:56px;font-size:1.14rem;padding:.8em 1.5em;border-radius:18px}
.btn-sm{min-height:44px;padding:.45em 1.1em;font-size:1rem;border-radius:14px}
.btn svg{width:20px;height:20px;flex:0 0 auto}

/* ---------- komponen kecil */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:800;padding:.3em .8em;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(--okInk)}
.chip.mtk{background:#ececff;color:#3434c4}
.chip.bin{background:#ffeee5;color:#a8390b}
.kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--brand2);background:var(--brandSoft);border-radius:999px;padding:5px 13px;margin-bottom:12px}
.tile{flex:0 0 auto;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--brandSoft);color:var(--brand2)}
.tile svg{width:23px;height:23px}
.tile.acc{background:var(--sunSoft);color:var(--sunInk)}
.tile.ok{background:var(--okSoft);color:var(--okInk)}
.tile.bad{background:var(--badSoft);color:var(--badInk)}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--sh1)}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- bilah atas */
.top{position:sticky;top:0;z-index:30;background:rgba(243,245,255,.86);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}
.top-in{max-width:1160px;margin:0 auto;height:var(--top);padding:0 16px;display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:.55em;color:var(--ink);text-decoration:none;margin-right:auto;min-height:44px;border-radius:12px}
.logo-mark{flex:0 0 auto;width:38px;height:38px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#5b74ff,#2a3fcc);box-shadow:0 4px 10px rgba(61,90,254,.3)}
.logo-mark img{display:block;width:38px;height:38px}
.logo-t{display:flex;flex-direction:column;line-height:1.05}
.logo-t b{font-family:var(--display);font-weight:600;font-size:1.2rem}
.logo-t small{font-size:.74rem;font-weight:800;color:var(--muted);margin-top:2px}
.top-nav{display:none}
.top-cta{white-space:nowrap}

/* ---------- hero */
.hero{position:relative;padding:14px 0 30px;overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-260px;top:-240px;background:radial-gradient(circle,rgba(61,90,254,.1),rgba(61,90,254,0) 68%);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:22px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;max-width:100%;background:#fff;border-radius:20px;padding:5px 14px 5px 5px;box-shadow:var(--sh1);font-weight:800;font-size:.84rem;color:var(--ink2);margin:8px 0 16px;text-wrap:balance}
.avs{display:flex;flex:0 0 auto}
.avs img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.avs img+img{margin-left:-9px}
.hero h1{font-size:clamp(2rem,7.6vw,3.4rem);line-height:1.1;margin-bottom:.4em}
.hl{color:var(--bad2);white-space:nowrap;text-decoration:underline wavy var(--sun);text-decoration-thickness:3px;text-underline-offset:.2em;text-decoration-skip-ink:none}
.lead{font-size:1.1rem;font-weight:600;color:var(--ink2);max-width:33em;margin-bottom:0}
.lead b{color:var(--ink);font-weight:800}
.cta-row{display:grid;gap:12px;margin:22px 0 16px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:6px 13px 6px 7px;font-weight:800;font-size:.86rem;color:var(--ink2);box-shadow:var(--sh1)}
.trust svg{width:20px;height:20px;flex:0 0 auto}
.hero-art{position:relative;display:flex;justify-content:center;padding:8px 0 6px}
.hero-art::before{content:"";position:absolute;left:50%;top:4%;width:min(440px,112%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#dde3ff 0,#e6eaff 42%,rgba(233,237,255,0) 70%);pointer-events:none}
.phone{position:relative;z-index:1;width:var(--phone);padding:8px;border-radius:44px;background:linear-gradient(150deg,#323b6e,#1b2140 60%);box-shadow:0 34px 60px -12px rgba(27,33,64,.36),0 0 0 1.5px rgba(255,255,255,.55) inset}
.phone-in{position:relative;border-radius:36px;overflow:hidden;background:var(--bg)}
.phone-bar{position:relative;height:28px;display:flex;align-items:center;justify-content:space-between;padding:2px 20px 0 24px;font-family:var(--display);font-weight:600;font-size:.74rem;color:var(--ink)}
.phone-bar .isl{position:absolute;left:50%;top:6px;width:30%;height:18px;transform:translateX(-50%);border-radius:99px;background:#1b2140}
.phone-bar svg{height:11px;width:auto}
.phone-shot{display:block;width:100%;height:auto}
.hero-cil{position:absolute;z-index:2;height:150px;width:auto;left:max(0px,calc(50% - var(--phone) / 2 - 62px));bottom:4px;filter:drop-shadow(0 12px 16px rgba(27,33,64,.18));animation:bob 3.4s ease-in-out infinite}
.float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 13px 6px 7px;font-weight:800;font-size:.82rem;color:var(--ink2);white-space:nowrap;box-shadow:0 12px 26px rgba(27,33,64,.15);animation:floaty 5s ease-in-out infinite}
.float svg{width:22px;height:22px;flex:0 0 auto}
.float b{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.f-api{top:66px;left:max(0px,calc(50% - var(--phone) / 2 - 52px))}
.f-xp{top:40%;right:max(0px,calc(50% - var(--phone) / 2 - 46px));background:var(--sunSoft);color:var(--sunInk);animation-delay:-1.7s}
.f-xp b{color:#5c4100}
.f-ok{display:none;bottom:21%;right:max(0px,calc(50% - var(--phone) / 2 - 30px));background:var(--okSoft);color:var(--okInk);animation-delay:-3.2s}

/* ---------- bagian umum */
.sec{padding:42px 0}
.sec-head{max-width:700px;margin:0 0 24px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head p{font-size:1.05rem;color:var(--ink2);margin:0}
.rv{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.rv-on .rv:not(.in){opacity:0;transform:translateY(18px)}

/* ---------- kenapa (data nasional) */
.why{display:grid;gap:14px}
.nat{padding:18px 18px 14px}
.nat-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.nat-h h3{margin:0}
.dom-row{margin-bottom:14px}
.dom-row .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;font-size:.97rem;color:var(--ink2);margin-bottom:6px}
.dom-row .lbl b{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums}
.dom-row .lbl b.low{color:var(--badInk)}
.bar{height:12px;background:var(--line2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--brand);transition:width 1s cubic-bezier(.2,.7,.3,1) .15s}
.bar i.low{background:linear-gradient(90deg,#f0506e,#d63a58)}
.rv-on .nat:not(.in) .bar i{width:0}
.src{font-size:.8rem;font-weight:600;color:var(--muted);border-top:2px dashed var(--line2);padding-top:10px;margin:4px 0 0}
.facts{display:grid;gap:12px}
.fact{display:flex;gap:14px;align-items:flex-start;padding:16px}
.fact b{display:block;font-family:var(--display);font-weight:600;font-size:1.32rem;line-height:1.15;color:var(--ink);margin:1px 0 4px}
.fact p{margin:0;color:var(--ink2);font-size:.96rem}

/* ---------- fitur */
.feats{display:grid;gap:16px}
.feat{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:26px;box-shadow:var(--sh1);overflow:hidden}
.feat-h{display:flex;align-items:flex-end;gap:10px;padding:18px 16px 0 18px}
.feat-t{flex:1;min-width:0;padding-bottom:14px}
.feat-t h3{font-size:1.24rem;margin:8px 0 5px}
.feat-t p{margin:0;color:var(--ink2);font-size:.98rem}
.feat-cil{flex:0 0 auto;height:90px;width:auto;margin:0 -2px 6px 0;filter:drop-shadow(0 6px 10px rgba(27,33,64,.14))}
.feat-shots{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0 10px 10px;padding:10px 6px;border-radius:20px;background:#f2f5ff}
.shot{display:block;width:100%;max-width:360px;margin:0;border-radius:14px;overflow:hidden}
.shot img{display:block;width:100%;height:auto}

/* ---------- demo 5 soal (gaya layar latihan aplikasi) */
.demo{background:linear-gradient(180deg,var(--bg) 0,#e8ecff 18%,#e8ecff 82%,var(--bg) 100%)}
.demo-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}   /* kolom boleh menyempit: tabel soal digeser di dalam .tbl, halaman tidak melebar di HP 320 px */
.demo-intro h2{margin-bottom:.35em}
.demo-intro p{color:var(--ink2);font-size:1.05rem}
.cil-say{display:flex;align-items:flex-end;gap:10px;margin:6px 0 0}
.cil-say img{flex:0 0 auto;height:112px;width:auto;filter:drop-shadow(0 8px 12px rgba(27,33,64,.14))}
.bubble{position:relative;background:#fff;border-radius:20px 20px 20px 6px;padding:12px 15px;font-weight:700;color:var(--ink2);box-shadow:var(--sh1);margin:0 0 42px;font-size:.98rem}
.demo-list{display:none}
.quiz{background:#f6f7ff;border-radius:28px;box-shadow:var(--sh3);overflow:hidden;overflow:clip;border:2px solid #fff;max-width:720px;width:100%}
.quiz-bar{position:sticky;top:var(--top);z-index:5;background:rgba(246,247,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 14px 8px}
.qb-row{display:flex;align-items:center;gap:10px}
.qb-t{flex:1;min-width:0}
.qb-t b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.25}
.qb-t small{font-size:.82rem;font-weight:700;color:var(--muted)}
.qb-t small b{display:inline;font-family:inherit;font-size:inherit;color:var(--ink)}
.timer{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:1.08rem;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;border-radius:999px;padding:.3em .85em;box-shadow:var(--sh1)}
.timer::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok)}
.segbar{display:flex;gap:5px;margin-top:10px}
.segbar i{flex:1;height:8px;border-radius:9px;background:#dfe3f6;transition:background .25s}
.segbar i.on{background:var(--brand)}
.segbar i.ok{background:var(--ok)}
.segbar i.no{background:var(--bad)}
.q{background:#fff;border-radius:var(--r);box-shadow:var(--sh1);padding:16px 14px;margin:10px 10px 12px;scroll-margin-top:calc(var(--top) + 90px)}
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.q-no{font-family:var(--display);font-weight:600;font-size:1.04rem;margin-right:2px}
.verdict{display:none;margin-left:auto;align-items:center;gap:4px;font-weight:900;font-size:.8rem;padding:.3em .8em;border-radius:999px}
.done .verdict{display:inline-flex}
.verdict.ok{background:var(--okSoft);color:var(--okInk)}
.verdict.no{background:var(--badSoft);color:var(--badInk)}
.stim{background:#fbfbff;border:2px solid var(--line);border-radius:18px;padding:12px 14px;margin:0 0 14px;color:var(--ink2);line-height:1.65}
.stim-h{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;color:var(--ink);margin-bottom:6px}
.stim-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bin)}
.stim table{border-collapse:collapse;width:100%;font-size:.92rem;background:#fff}
.stim td,.stim th{border:1px solid var(--line);padding:7px 6px;text-align:center}
.stim th{background:var(--line2);font-weight:800}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.q-text{font-weight:700;font-size:1.04rem;line-height:1.6;margin-bottom:12px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 13px;font-weight:700;line-height:1.45;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--line);transition:border-color .12s,background .12s,transform .06s}
.opt:hover:not(:disabled){border-color:#b9c4ff}
.opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.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:background .12s,border-color .12s,color .12s}
.opt.multi .key{border-radius:8px}
.opt .txt{min-width:0;overflow-wrap:anywhere}
.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:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badSoft);box-shadow:0 3px 0 #f6c3cd}
.opt.wrong .key{background:var(--bad);border-color:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.hint{font-size:.86rem;font-weight:700;color:var(--muted);margin-top:9px}
.bs{display:grid;gap:10px}
.bs-row{display:grid;gap:10px;border:2px solid var(--line);border-radius:16px;padding:12px 13px;background:#fff;font-weight:700;line-height:1.5}
.bs-row.correct{border-color:var(--ok);background:var(--okSoft)}
.bs-row.wrong{border-color:var(--bad);background:var(--badSoft)}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;gap:8px;justify-self:start;min-width:224px}
.seg button{min-height:44px;border:2px solid var(--line);background:#fff;border-radius:12px;font-family:var(--display);font-weight:600;font-size:.98rem;padding:.35em 1em;color:var(--ink2);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.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{display:none;margin-top:14px;padding:14px;border-radius:18px;background:#fff;border:2px solid var(--brandSoft);line-height:1.65;color:var(--ink2)}
.done .explain{display:block}
.explain .t{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--display);font-weight:600;font-size:1.04rem;color:var(--brand2)}
.explain .t img{height:36px;width:auto}
.quiz-foot{padding:6px 14px 18px}
.quiz-foot .hint{text-align:center}
.result{display:none;padding:6px 10px 16px;scroll-margin-top:calc(var(--top) + 6px)}
/* Sesudah hasil keluar timer berhenti: bilah soal tidak lengket lagi supaya judul hasil tidak tertutup (JUAL-01) */
.quiz.done .quiz-bar{position:static}
.result.show{display:block}
.res-hero{position:relative;overflow:hidden;border-radius:24px;padding:18px;min-height:156px;color:#fff;background:linear-gradient(150deg,#3d5afe,#2f43d6 60%,#2a3fcc);box-shadow:var(--sh2)}
.res-hero::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.08)}
.res-hero .cil{position:absolute;right:2px;bottom:-10px;height:142px;width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2));animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
.res-hero h3{position:relative;color:#fff;font-size:1.22rem;margin:0 0 4px;max-width:64%}
.res-hero .sub{position:relative;font-weight:700;font-size:.9rem;max-width:62%;margin:0}
.res-score{position:relative;display:flex;align-items:flex-end;gap:8px;margin-top:12px}
.res-score b{font-family:var(--display);font-weight:600;font-size:3.2rem;line-height:.9}
.res-score span{font-weight:800;padding-bottom:5px}
.rapor{background:#fff;border-radius:var(--r);box-shadow:var(--sh1);margin:14px 0;overflow:hidden}
.rapor-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;font-family:var(--display);font-weight:600;font-size:1.02rem}
.rapor-h .muted{font-family:var(--font);font-weight:800;font-size:.8rem;white-space:nowrap}
.rapor-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:2px solid var(--line2);font-weight:700;font-size:.93rem}
.st{flex-shrink:0;font-weight:800;font-size:.78rem;padding:.25em .8em;border-radius:999px;white-space:nowrap}
.st.ok{background:var(--okSoft);color:var(--okInk)}
.st.no{background:var(--badSoft);color:var(--badInk)}
.advice{background:var(--sunSoft);border-radius:16px;padding:12px 14px;font-size:.95rem;color:#5c4100;margin-bottom:16px}
.advice b{color:#3d2a00}
.retry{text-align:center;margin-top:12px}

/* ---------- cara kerja */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.step{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px 16px}
.step-n{flex:0 0 auto;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--brand);color:#fff;font-family:var(--display);font-weight:600;font-size:1.35rem;box-shadow:0 3px 0 var(--brand2)}
.step h3{margin:2px 0 4px}
.step p{margin:0;color:var(--ink2);font-size:.98rem}
.step-art{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.qris{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink);background:var(--line2);border-radius:12px;padding:5px 10px 5px 6px}
.qris svg{width:24px;height:24px}
.pin-dots{display:inline-flex;gap:8px;background:var(--line2);border-radius:12px;padding:10px 12px}
.pin-dots i{width:12px;height:12px;border-radius:50%;background:var(--brand)}
.mini-pill{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:.84rem;color:var(--ink2);background:var(--line2);border-radius:999px;padding:5px 11px 5px 6px}
.mini-pill svg{width:20px;height:20px}

/* ---------- harga (tiket) */
.harga-grid{display:grid;gap:30px;justify-items:center}
.harga-copy{text-align:center;max-width:640px}
.harga-copy p{font-size:1.05rem;color:var(--ink2);margin:0}
.ticket{position:relative;max-width:500px;width:100%;margin:0 auto;filter:drop-shadow(0 2px 3px rgba(27,33,64,.06)) drop-shadow(0 18px 30px rgba(27,33,64,.12))}
.tk-top{position:relative;border-radius:28px 28px 0 0;padding:22px 20px 26px;color:#fff;background:linear-gradient(150deg,#3d5afe,#2f43d6 58%,#2a3fcc);overflow:hidden;-webkit-mask:radial-gradient(circle at 0 100%,transparent 13px,#000 13.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 13px,#000 13.5px) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle at 0 100%,transparent 13px,#000 13.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 13px,#000 13.5px) 100% 0/51% 100% no-repeat}
.tk-top::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;bottom:-120px;background:rgba(255,255,255,.08)}
.tk-top::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;left:-40px;top:-55px;background:rgba(255,194,26,.22)}
.tk-row{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tk-name{font-family:var(--display);font-weight:600;font-size:1.15rem}
.tk-tag{font-size:.76rem;font-weight:800;background:rgba(255,255,255,.95);color:var(--brand2);border-radius:999px;padding:.25em .75em}
.price{position:relative;z-index:1;font-family:var(--display);font-weight:600;line-height:1}
.price-old{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:8px;max-width:calc(100% - 92px)}
.price-was{font-family:var(--font);font-size:1.2rem;font-weight:800;color:#fff;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#ffc21a}
.price-hemat{font-family:var(--font);font-size:.8rem;font-weight:900;line-height:1.2;color:var(--sunInk);background:var(--sun);border-radius:999px;padding:.3em .75em;white-space:nowrap}
.price-now{display:block;font-size:clamp(2.8rem,12vw,3.4rem);letter-spacing:-.01em}
.price-sub{position:relative;z-index:1;font-weight:800;font-size:1.05rem;margin:12px 0 0}
.price-note{position:relative;z-index:1;font-size:.86rem;font-weight:600;margin:4px 0 0;text-wrap:balance}
.tk-cil{position:absolute;z-index:2;right:10px;top:-38px;height:150px;width:auto;filter:drop-shadow(0 10px 14px rgba(27,33,64,.22));animation:bob 3.6s ease-in-out infinite}
.tk-body{position:relative;background:#fff;border-radius:0 0 28px 28px;padding:22px 18px 18px;-webkit-mask:radial-gradient(circle at 0 0,transparent 13px,#000 13.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 13px,#000 13.5px) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle at 0 0,transparent 13px,#000 13.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 13px,#000 13.5px) 100% 0/51% 100% no-repeat}
.tk-body::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:2px dashed var(--brandLine)}
.checks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.checks li{position:relative;padding-left:32px;font-weight:700;color:var(--ink2);line-height:1.45}
.checks li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%231fa971'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.checks li b{color:var(--ink)}
.garansi{display:flex;gap:12px;align-items:flex-start;background:var(--okSoft);border-radius:18px;padding:13px 14px;margin-top:16px;color:var(--ink2);font-size:.93rem}
.garansi svg{flex:0 0 auto;width:34px;height:34px}
.garansi b{display:block;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--okInk);margin-bottom:2px}
.garansi a{font-weight:800}
.garansi .gr-faq{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:-4px}   /* area sentuh 44px */
.kontak a,#mailLink{overflow-wrap:anywhere}
.pay-note{text-align:center;font-size:.85rem;font-weight:600;color:var(--muted);margin:12px 0 0}

/* ---------- FAQ */
.faq-grid{display:grid;gap:18px}
.faq-side p{color:var(--ink2);font-size:1.05rem}
.faq-side img{display:none}
.faq-list{display:grid;gap:10px}
.faq-list details{background:#fff;border-radius:18px;box-shadow:var(--sh1);overflow:hidden;scroll-margin-top:20px}   /* jarak dari header walau daftar FAQ masih bergeser (animasi muncul) */
.faq-list summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:13px 16px;cursor:pointer;list-style:none;font-weight:800;line-height:1.4;border-radius:18px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 auto;width:30px;height:30px;margin-left:auto;border-radius:10px;background:var(--brandSoft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 10 4 4 4-4' fill='none' stroke='%232a3fcc' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(180deg)}
.faq-list summary:hover{background:#fafbff}
.faq-a{padding:0 16px 16px;color:var(--ink2)}
.faq-a p{margin:0}
.faq-a p+p{margin-top:.7em}

/* ---------- kaki */
.foot{background:#fff;border-top:2px solid var(--line2);padding:30px 0 calc(110px + var(--safe));color:var(--ink2);font-size:.92rem}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand p{margin:0;font-size:1rem}
.foot-brand b{font-family:var(--display);font-weight:600}
.foot p{margin:0 0 .6em}
.foot a{font-weight:800}
.foot-masuk a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}   /* area sentuh 44px */

/* ---------- bilah pesan di HP + toast */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(27,33,64,.08);padding:10px 14px calc(10px + var(--safe));transform:translateY(115%);transition:transform .25s ease;visibility:hidden}
.sticky.show{transform:none;visibility:visible}
.sticky .p{line-height:1.15;min-width:0}
.sticky .p b{font-family:var(--display);font-weight:600;font-size:1.3rem}
.sticky .p small{display:block;font-weight:700;color:var(--muted);font-size:.78rem;margin-top:2px}
.sticky .btn{margin-left:auto;flex:0 0 auto}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:80;width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:#fff;padding:.75em 1.15em;border-radius:16px;font-size:.93rem;font-weight:700;text-align:center;opacity:0;pointer-events:none;box-shadow:0 10px 30px rgba(27,33,64,.25);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- layar sedang & lebar */
@media (min-width:560px){
  .cta-row{display:flex;flex-wrap:wrap}
  .cta-row .btn{flex:0 0 auto}
  .f-ok{display:inline-flex}
  .facts{grid-template-columns:repeat(3,1fr)}
  .fact{flex-direction:column}
}
@media (min-width:760px){
  .sec{padding:72px 0}
  .sticky{display:none}
  .foot{padding-bottom:36px}
  .toast{bottom:28px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat.wide{grid-column:1/-1}
  .feat.wide .feat-shots{grid-template-columns:1fr 1fr;align-items:start}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step{flex-direction:column}
  .q{padding:18px 18px;margin:12px 14px 14px}
  .quiz-bar{padding:14px 18px 10px}
  .result{padding:8px 14px 18px}
}
@media (min-width:960px){
  :root{--top:68px;--phone:300px}
  .top-nav{display:flex;gap:2px;margin-right:10px}
  .top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:12px;font-weight:800;font-size:.95rem;color:var(--ink2);text-decoration:none}
  .top-nav a:hover{background:#fff;color:var(--brand2)}
  .hero{padding:26px 0 56px}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px}
  .hero-art{padding:10px 0}
  .hero-cil{height:210px;left:calc(50% - var(--phone) / 2 - 104px);bottom:10px}
  .f-api{top:84px;left:calc(50% - var(--phone) / 2 - 96px)}
  .f-xp{right:calc(50% - var(--phone) / 2 - 86px)}
  .f-ok{right:calc(50% - var(--phone) / 2 - 64px)}
  .lead{font-size:1.18rem}
  .why{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;gap:18px}
  .facts{grid-template-columns:1fr}
  .fact{flex-direction:row;align-items:center}
  .feats{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  .feat{grid-column:span 3}
  .feat.g4{grid-column:span 4}
  .feat.g2{grid-column:span 2}
  .feat.wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .feat.wide .feat-h{flex:0 0 34%;flex-direction:column;align-items:flex-start;padding:28px 10px 22px 28px}
  .feat.wide .feat-cil{height:150px;margin:auto 0 0}
  .feat.wide .feat-shots{margin:14px 14px 14px 0}
  .feat.wide .feat-shots,.feat.g4 .feat-shots{flex-direction:row;align-items:center}
  .feat-h{padding:22px 20px 0 24px}
  .feat-cil{height:112px}
  .feat-shots{margin:0 14px 14px;padding:22px 18px}
  .demo-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:44px;align-items:start}
  .demo-intro{position:sticky;top:calc(var(--top) + 28px)}
  .cil-say img{height:150px}
  .demo-list{display:grid;gap:10px;list-style:none;padding:0;margin:26px 0 0}
  .demo-list li{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink2)}
  .quiz-bar{top:var(--top)}
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
  .faq-side{position:sticky;top:calc(var(--top) + 28px)}
  .faq-side img{display:block;height:170px;width:auto;margin-top:12px}
  .foot-in{display:grid;grid-template-columns:auto 1fr;gap:4px 40px;align-items:start}
  .foot-brand{grid-row:span 3;margin:0}
}
@media (max-width:370px){
  body{font-size:16px}
  .hero h1{font-size:1.85rem}
  .trust li{font-size:.82rem}
  .float{font-size:.76rem}
  .float b{font-size:.94rem}
  .stim td,.stim th{padding:7px 3px}   /* tabel soal demo tetap utuh di HP 340-370 px (kolom .demo-grid kini tidak melebar) */
}

/* ---------- dialog checkout: lembar bawah gaya aplikasi */
.co-backdrop{background:rgba(27,33,64,.45)}
.co-panel{font-family:var(--font);border-radius:28px 28px 0 0;box-shadow:0 -16px 44px rgba(27,33,64,.2)}
.co-grab{width:44px;height:5px;background:var(--line);margin-top:10px}
.co-head{border-bottom:0;padding:6px 12px 4px 20px}
.co-head h2{font-family:var(--display);font-weight:600;font-size:1.32rem}
.co-x{flex:0 0 44px;width:44px;height:44px;background:var(--line2);color:var(--ink2)}
.co-x:hover{background:var(--line)}
.co-body{padding:12px 20px calc(22px + var(--safe))}
.co :focus-visible{outline:3px solid rgba(61,90,254,.55);outline-offset:2px}
.co-field{margin-bottom:16px}
.co-label{font-weight:800;font-size:.95rem;margin-bottom:7px}
.co-label small{font-weight:700;color:var(--muted)}
.co-input{min-height:52px;border:2px solid var(--line);border-radius:14px;font-weight:700;font-size:1.05rem;padding:.75em 1em;color:var(--ink)}
.co-input::placeholder{color:#a0a7c0;font-weight:600}
.co-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(61,90,254,.14)}
.co-input[aria-invalid="true"]{border-color:var(--bad);background:#fffafb}
select.co-input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%232a3fcc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9em center/18px no-repeat;padding-right:2.6em}
.co-hint{color:var(--muted);font-weight:600;font-size:.84rem;margin-top:6px}
.co-err{color:var(--badInk);font-weight:800}
.co-set legend{font-weight:800;font-size:.95rem;margin-bottom:8px}
.co-cards{gap:12px}
.co-card span{min-height:80px;border:2px solid var(--line);border-radius:16px;padding:13px 14px 12px;box-shadow:0 3px 0 var(--line);transition:border-color .12s,background .12s,box-shadow .12s,transform .06s}
.co-card:active span{transform:translateY(2px)}
.co-card b{font-family:var(--display);font-weight:600;font-size:1.35rem}
.co-card i{color:var(--muted);font-weight:700}
.co-card span::after{border-color:var(--brandLine)}
.co-card:hover span{border-color:#b9c4ff}
.co-card input:checked+span{border-color:var(--brand);background:var(--brandSoft);box-shadow:0 3px 0 var(--brandLine)}
.co-card input:checked+span::after{border:6px solid var(--brand)}
.co-card input:focus-visible+span{outline:3px solid rgba(61,90,254,.55)}
.co-total{background:var(--brandSoft);border:0;border-radius:18px;padding:14px 16px;margin:6px 0 16px}
.co-total span{color:var(--brand2);font-weight:800}
.co-total span small{color:var(--ink2);font-weight:600}
.co-total b{font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--ink)}
.co-fine{color:var(--muted);font-weight:600;font-size:.83rem}
.co-spin{border-width:3px}
.co-amt{font-family:var(--display);font-weight:600;font-size:2.15rem}
.co-amt-l{color:var(--muted);font-weight:800}
.co-timer{color:var(--muted);font-weight:700}
.co-timer b{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--sunInk);background:var(--sunSoft);border:0;padding:.18em .75em}
.co-timer.low b{color:var(--badInk);background:var(--badSoft)}
.co-qrcard{border:0;border-radius:24px;box-shadow:var(--sh1),inset 0 0 0 2px var(--line2);padding:16px 14px 14px}
.co-qrtop{font-family:var(--display);font-weight:600;letter-spacing:.04em;color:var(--ink)}
.co-qrtop em{font-family:var(--font);font-weight:700}
.co-merchant{font-weight:600}
.co-acts{gap:10px}
.co-how li{font-weight:600;padding-left:34px;min-height:24px}
.co-how li::before{width:24px;height:24px;border-radius:8px;background:var(--brandSoft);color:var(--brand2);font-family:var(--display);font-weight:600;font-size:.82rem}
.co-wait{background:var(--line2);border:0;border-radius:16px;font-weight:700}
.co-dot{background:var(--sun)}
.co-note{background:var(--sunSoft);border:0;border-radius:14px;color:#5c4100;font-weight:600}
.co-links{gap:2px 16px}
.co-link{display:inline-flex;align-items:center;min-height:44px;color:var(--brand2);font-weight:800}
.co-meta{color:var(--muted);font-weight:600}
.co-meta b{color:var(--ink)}
.co-state h3{font-family:var(--display);font-weight:600;font-size:1.45rem}
.co-paid{font-family:var(--display);font-weight:600;font-size:1.75rem}
.co-last{background:var(--brandSoft);border-radius:16px;color:var(--brand2);font-weight:800}
.co-keep{color:var(--muted);font-weight:600}
.co-state .co-keep{margin:16px 0 0;line-height:1.55}
.co-keep .co-link,.co-note .co-link{display:inline;min-height:0;position:relative}
.co-keep .co-link::after,.co-note .co-link::after{content:"";position:absolute;inset:-12px -6px}
.co-forget .co-link{color:var(--muted);font-weight:700}
.co-state .co-note{text-align:left}
.co-last.co-lain{background:#FFF6DC;color:#6B4A00;border:1px solid #F1D48A;font-weight:700;line-height:1.5}
.co-test{background:var(--line2);color:var(--ink2)}
.co-step[data-step="done"] .co-state::before,.co-step[data-step="expired"] .co-state::before,.co-step[data-step="refund"] .co-state::before{content:"";display:block;margin:0 auto;background:center bottom/contain no-repeat;animation:pop .55s cubic-bezier(.3,1.6,.5,1) both}
.co-step[data-step="done"] .co-state::before{width:160px;height:124px;background-image:url(/assets/img/cil-senang-s.webp)}
.co-step[data-step="expired"] .co-state::before{width:150px;height:112px;background-image:url(/assets/img/cil-tidur-s.webp)}
.co-step[data-step="refund"] .co-state::before{width:150px;height:118px;background-image:url(/assets/img/cil-baca-s.webp)}
.co-step[data-step="done"] .co-badge,.co-step[data-step="expired"] .co-badge,.co-step[data-step="refund"] .co-badge{position:relative;width:44px;height:44px;margin:-20px auto 10px;box-shadow:0 0 0 4px #fff}
.co-badge svg{width:24px;height:24px}
.co-confirm{background:rgba(27,33,64,.45)}
.co-confirm-box{border-radius:24px;padding:24px 20px 14px}
.co-confirm-box h3{font-family:var(--display);font-weight:600;font-size:1.25rem}
.co-loading{font-weight:700}
.co-loading i{border-color:var(--brandSoft);border-top-color:var(--brand)}
@media (min-width:760px){
  .co-panel{width:min(500px,100%);border-radius:28px;box-shadow:0 30px 70px rgba(27,33,64,.3)}
  .co-head{padding:16px 14px 4px 24px}
  .co-body{padding:14px 24px 24px}
}

/* ---------- kurangi gerak */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv-on .rv:not(.in){opacity:1;transform:none}
  .rv-on .nat:not(.in) .bar i{width:var(--w)}
}

/* Uji gabung 4: HP sangat sempit, maskot di kartu harga tidak menutupi label "SD dan SMP" */
@media (max-width:359px){
  .tk-cil{height:112px;top:-30px;right:6px}
  .logo{gap:.4em}
  .logo-t b{font-size:1.05rem}
  .top-cta{padding-left:.8em;padding-right:.8em;font-size:.86rem}
  .tk-row{padding-right:84px}
}