:root{
  --paper:#fff; --cream:#FFF6E5; --ink:#1D2B53; --ink-2:#34477A; --muted:#4A5878; --line:#E6E8EF;
  --gold:#F5A623; --orange:#E8641B; --orange-btn:#C2410C; --teal:#0E7C75; --teal-ink:#0B6E6A;
  --hijau:#1F8A5B; --merah:#B42318;
  --font-body:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif; --font-game:'Baloo 2','Trebuchet MS',sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#FAFAF7;color:var(--ink);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--teal-ink)}
h1,h2,h3{font-family:var(--font-game);font-weight:800;line-height:1.1;margin:0 0 10px}
h1{font-size:clamp(28px,4vw,38px)} h2{font-size:24px} h3{font-size:19px;margin-top:20px}
p{margin:0 0 12px}
code{background:var(--cream);border-radius:6px;padding:1px 6px;font-size:.92em}
.redup{color:var(--muted)} .kecil{font-size:13px} .kanan{text-align:right}
.retro{display:block;font-family:var(--font-game);font-weight:700;color:var(--teal-ink);letter-spacing:.3px}
.retro.kecil{font-size:13px}

.atas{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 24px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.merek{text-decoration:none;color:var(--ink)}
.logo{font-size:24px;font-weight:800;letter-spacing:-1px}
.atas nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-weight:600;font-size:14px}
.atas nav a{text-decoration:none;color:var(--ink)} .atas nav a:hover{color:var(--teal-ink)}
.atas nav form{margin:0}
.siapa{color:var(--muted);font-weight:600}
.wadah{max-width:1100px;margin:0 auto;padding:28px 20px 60px}
.bawah{text-align:center;color:var(--muted);font-size:13px;padding:24px}

.kartu{background:#fff;border:2px solid var(--line);border-radius:22px;padding:24px;margin-bottom:20px}
.kartu.sempit{max-width:520px;margin:30px auto}
.sapa{margin:6px 0 20px}
.baris{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dua-kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.dua-kolom.rapat{gap:0 16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:11px 22px;font:inherit;font-weight:700;font-size:15px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink-2)}
.btn.oranye{background:var(--orange-btn);border-color:var(--orange-btn)} .btn.oranye:hover{background:#9A3A0C}
.btn.garis{background:transparent;color:var(--ink)} .btn.garis:hover{background:var(--cream)}
.btn.merah{color:var(--merah);border-color:var(--merah)}
.btn.wa{background:#128C4A;border-color:#128C4A}
.btn.besar{width:100%;padding:14px;margin-top:8px}
.btn.kecil{padding:6px 13px;font-size:13px}

label{display:block;font-weight:700;font-size:14px;margin:12px 0}
label.cek{display:flex;gap:8px;align-items:center}
input:not([type=checkbox]):not([type=hidden]),select,textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border:2px solid var(--line);border-radius:14px;font:inherit;font-weight:500;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{resize:vertical;margin-bottom:12px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--teal)}
.saring{justify-content:flex-start;margin-bottom:12px}
.saring select,.saring input{width:auto;margin:0;flex:1 1 180px}

.pesan{border-radius:14px;padding:12px 16px;margin-bottom:18px;border-left:5px solid var(--hijau);background:#E2F4EA;font-weight:600}
.pesan.galat{border-color:var(--merah);background:#FCE8E6}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:700;border-bottom:2px solid var(--ink)}
tr.mati td{opacity:.55}
.gulir{overflow-x:auto}
td.aksi{white-space:nowrap}
td.aksi form{display:inline;margin:0}
.akses td:nth-child(2){width:60px}

.lencana{display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;background:var(--cream);color:#7A3A10}
.lencana.hijau{background:#DDF3EC;color:#0B5F59} .lencana.abu{background:var(--line);color:var(--muted)} .lencana.merah{background:#FCE8E6;color:var(--merah)}

.kisi-dunia{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:24px}
.dunia{background:#fff;border:2px solid var(--line);border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--ink)}
.dunia.buka{border-color:var(--ink);box-shadow:5px 5px 0 var(--gold)}
.dunia.tautan{text-decoration:none}
.dunia .meta{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px}
.dunia h2{font-size:26px;margin:0}

.ringkas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.ringkas div{background:var(--cream);border-radius:16px;padding:12px;text-align:center}
.ringkas b{display:block;font-family:var(--font-game);font-size:26px;line-height:1.1}
.ringkas span{font-size:12px;font-weight:600;color:var(--muted)}
.saran{background:#FFF1C9;border-radius:14px;padding:10px 14px;margin:10px 0}
.tab{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-top:14px}
.tab a{padding:10px 0;text-decoration:none;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.tab a.aktif{color:var(--ink);border-color:var(--orange)}
.daftar{padding-left:18px}
.gedung{margin-bottom:14px}
table.materi td:first-child{width:45%}
.bintang{color:var(--gold);letter-spacing:1px;white-space:nowrap}
td.bar span{display:block;height:10px;background:var(--line);border-radius:99px;overflow:hidden;min-width:80px}
td.bar i{display:block;height:100%;background:var(--hijau)} td.bar i.sedang{background:var(--gold)} td.bar i.rendah{background:var(--merah)}

.kartu-akun{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.kartu-akun div{border:2px dashed var(--ink);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.kartu-akun b{font-family:var(--font-game);font-size:19px}
.kartu.cetak{border-color:var(--gold);background:#FFFCF3}

/* panel materi */
.alat{display:flex;gap:6px;flex-wrap:wrap}
.alat .unggah{cursor:pointer;margin:0;font-size:13px}
.alat .unggah input{display:none!important}
textarea.kode{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#FBFCFD;tab-size:2}
.pratinjau{width:100%;min-height:200px;border:2px dashed var(--line);border-radius:14px;background:#fff;margin-top:12px}
.soal-baris{border:2px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:12px}
.soal-baris label{margin:8px 0}
.pilihan-soal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 14px}
.pilihan-soal .pil{display:flex;align-items:center;gap:8px;margin:4px 0;font-weight:700}
.pilihan-soal .pil input[data-k=pilihan]{margin:0;flex:1}
.pilihan-soal input[type=radio]{width:20px;height:20px;accent-color:var(--hijau);flex:none}

@media print{
  .atas,.bawah,.btn,form,.tab{display:none!important}
  body{background:#fff}
  .kartu{border:0;padding:0}
  body:has(.kartu.cetak) main>*:not(.kartu.cetak){display:none!important}
}
@media (max-width:600px){.atas{padding:10px 16px}.wadah{padding:20px 14px 50px}.kartu{padding:18px;border-radius:18px}}
.akses tr.punya-paket td{border-bottom:0;padding-bottom:0}
.akses tr.baris-paket label{margin:0 0 4px;font-size:13px;color:var(--muted)}