/* Persiapan TKA — desain bersama semua halaman */
:root{
  --biru:#0b5cff; --biru-tua:#0a3fb8; --biru-muda:#e8efff; --gelap:#0a1733;
  --abu:#5b6b85; --abu-muda:#f4f7fd; --garis:#dde5f4; --hijau:#0f9d58; --kuning:#f2a20c;
  --merah:#d92d3a; --radius:14px; --shadow:0 10px 30px rgba(10,23,51,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--gelap); background:#fff; line-height:1.6; -webkit-text-size-adjust:100%;
}
img{max-width:100%}
a{color:var(--biru);text-decoration:none}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,5vw,2.7rem)}
h2{font-size:clamp(1.3rem,3.6vw,1.9rem)}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 18px}
.sempit{max-width:760px}
.tengah{text-align:center}

/* nav */
header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis)}
.nav-in{display:flex;align-items:center;gap:14px;padding:12px 18px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--gelap);font-size:1.02rem}
.brand span.dot{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--biru),#5c8bff);color:#fff;display:grid;place-items:center;font-size:.85rem}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{color:var(--gelap);padding:8px 11px;border-radius:9px;font-size:.93rem;font-weight:600}
.nav-links a:hover{background:var(--biru-muda)}
.nav-links a.cta{background:var(--biru);color:#fff}
.nav-links a.cta:hover{background:var(--biru-tua)}
.menu-btn{display:none}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:11px;
  border:1px solid transparent;font-weight:700;font-size:.97rem;cursor:pointer;transition:.15s;font-family:inherit}
.btn-biru{background:var(--biru);color:#fff!important}
.btn-biru:hover{background:var(--biru-tua)}
.btn-garis{border-color:var(--garis);background:#fff;color:var(--gelap)!important}
.btn-garis:hover{background:var(--abu-muda)}
.btn-putih{background:#fff;color:var(--biru)!important}
.btn-hijau{background:var(--hijau);color:#fff!important}
.btn-merah{background:var(--merah);color:#fff!important}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-besar{padding:15px 26px;font-size:1.05rem}
.btn-penuh{width:100%}

/* hero */
.hero{background:linear-gradient(160deg,#071233 0%,#0d2a72 55%,#0b5cff 130%);color:#fff;padding:44px 0 54px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06);top:-160px;right:-120px}
.hero .wrap{position:relative;z-index:2}
.badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:6px 13px;border-radius:99px;font-size:.82rem;font-weight:700;margin-bottom:16px}
.hero h1{color:#fff}
.hero p.lead{font-size:1.06rem;color:#d5e0f8;max-width:620px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:620px}
.hero-stats div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 13px}
.hero-stats b{display:block;font-size:1.25rem}
.hero-stats small{color:#c8d6f6;font-size:.78rem}

/* seksi */
section{padding:46px 0}
section.abu{background:var(--abu-muda)}
.kicker{color:var(--biru);font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:1.05rem;margin-bottom:.35em}
.card p{color:var(--abu);margin:0;font-size:.94rem}
.ico{width:44px;height:44px;border-radius:12px;background:var(--biru-muda);color:var(--biru);display:grid;place-items:center;font-size:1.3rem;margin-bottom:12px}

/* paket */
.paket{display:flex;flex-direction:column;gap:10px}
.paket-top{display:flex;align-items:flex-start;gap:10px}
.tag{font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap}
.tag-aktif{background:#e3f7ec;color:#0b7a45}
.tag-segera{background:#fff3da;color:#9a6205}
.tag-jenjang{background:var(--biru-muda);color:var(--biru-tua)}

/* form */
label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 6px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--garis);border-radius:11px;font-size:1rem;font-family:inherit;background:#fff;color:var(--gelap)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--biru-muda);border-color:var(--biru)}
.hint{color:var(--abu);font-size:.83rem;margin-top:5px}
.pesan{border-radius:11px;padding:12px 14px;font-size:.93rem;margin:14px 0;display:none;font-weight:600}
.pesan.tampil{display:block}
.pesan.ok{background:#e3f7ec;color:#0b6b3e;border:1px solid #b6e6cb}
.pesan.err{background:#fdeaec;color:#a1141f;border:1px solid #f6c7cc}
.pesan.info{background:var(--biru-muda);color:var(--biru-tua);border:1px solid #c7d8ff}
.pesan.warn{background:#fff6e3;color:#8a5605;border:1px solid #f3dcaa}

/* member */
.topbar{background:linear-gradient(120deg,#071233,#0b5cff);color:#fff;padding:22px 0}
.identitas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.identitas div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:9px 12px;font-size:.88rem}
.identitas small{display:block;color:#c9d7f8;font-size:.75rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--garis)}
th{color:var(--abu);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.kode-box{display:flex;align-items:center;gap:10px;background:#0a1733;color:#fff;border-radius:11px;padding:12px 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.02rem;word-break:break-all}
.kode-box b{color:#7fa8ff}
.salin{background:#1d2f5c;color:#dbe6ff;border:none;border-radius:9px;padding:7px 12px;font-weight:700;cursor:pointer;font-size:.83rem;font-family:inherit}

/* ujian */
.ujian-head{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--garis);padding:10px 0}
.ujian-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.timer{background:#0a1733;color:#fff;border-radius:10px;padding:7px 14px;font-weight:800;font-variant-numeric:tabular-nums}
.timer.waspada{background:var(--merah)}
.soal-box{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;margin:18px 0;box-shadow:var(--shadow)}
.soal-teks{font-size:1.05rem;margin:6px 0 16px;white-space:pre-wrap}
.opsi{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--garis);border-radius:11px;padding:12px;margin-bottom:9px;cursor:pointer}
.opsi:hover{background:var(--abu-muda)}
.opsi.pilih{border-color:var(--biru);background:var(--biru-muda)}
.opsi input{width:auto;margin-top:4px}
.opsi .huruf{font-weight:800;color:var(--biru);min-width:18px}
.opsi .teks{flex:1}
.nav-soal{display:flex;gap:10px;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
#numGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:7px;margin-top:10px}
#numGrid button{height:38px;border-radius:9px;border:1px solid var(--garis);background:#fff;color:var(--abu);font-weight:700;cursor:pointer;font-family:inherit}
#numGrid button.dijawab{background:var(--biru);border-color:var(--biru);color:#fff}
#numGrid button.ragu{background:var(--kuning);border-color:var(--kuning);color:#fff}
#numGrid button.aktif{outline:2px solid var(--gelap)}
.overlay{position:fixed;inset:0;background:rgba(7,15,33,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:90}
.overlay.tampil{display:flex}
.overlay .kotak{background:#fff;border-radius:16px;padding:24px;max-width:460px;width:100%;text-align:center}
.pita{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--garis);padding:10px 18px;display:none;z-index:35}
.pita.tampil{display:block}
.badge-lap{font-size:.78rem;font-weight:800;padding:5px 11px;border-radius:99px}

/* footer */
footer{background:#07122c;color:#9fb1d4;padding:34px 0 24px;font-size:.9rem}
footer a{color:#cfdcf7}
footer .kaki{border-top:1px solid #1b2b4d;margin-top:18px;padding-top:14px;font-size:.83rem;color:#7f92b6}

@media(max-width:860px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .identitas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .nav-links{position:fixed;inset:56px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:10px 14px 16px;border-bottom:1px solid var(--garis);display:none}
  .nav-links.buka{display:flex}
  .menu-btn{display:inline-flex;margin-left:auto;background:var(--biru-muda);border:none;border-radius:9px;
    padding:9px 13px;font-weight:800;color:var(--biru-tua);cursor:pointer;font-family:inherit}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  section{padding:34px 0}
  .soal-box{padding:16px}
}