/* Juara Kelas v2 — tema "Navy Adem" (docs/DESIGN.md). Semua warna lewat token. */
:root {
  /* Navy Adem v2: warna dasar Juara Kelas lama (navy dalam, kaca, coral, emas). Lihat docs/DESIGN.md. */
  --bg: #172e52; --bg-deep: #112543; --surface: #243f68; --surface-2: #2d4c78; --line: #3a5683;
  --text: #edf4ff; --text-muted: #a9c0da; --kicker: #91d7df;
  --paper: #e9f2fc; --paper-2: #ffffff; --ink: #1b2a4e; --ink-muted: #55618a; --paper-line: #c8d9ec; /* es biru (24 Okt 2026) */
  --coral: #ff806b; --coral-deep: #c95a4a; --gold: #f7c76c; --mint: #74d4c0; --sky: #8fc3ff;
  --ok: #17734b; --ok-bg: #e2f5ec; --bad: #a8322b; --bad-bg: #fdeae7;
  --ok-bubble: #d3eddf; --bad-bubble: #f9d5cf; /* gelembung pembahasan: halus, supaya nomor langkah emas tetap terlihat */
  --ilu-putih: #fdf3e1;
  /* Panel berwarna (kelas, bab, kepala bab, hero) satu warna datar, tanpa gradasi dan pendar (28 Okt 2026). Nama token --g-* dipertahankan supaya semua komponen ikut. */
  --g-hero: #34508a;
  --g-senja: #bb7560;
  --g-biru: #4d72b2;
  --g-toska: #468391;
  --g-ungu: #8467a3;
  --g-laut: #4f7590;
  --g-mawar: #9c6f93;
  --t-senja: #f6c8ab; --t-biru: #b9cdf2; --t-toska: #a9dccb; --t-ungu: #d6bdea; --t-laut: #b4d3ee; --t-mawar: #ecc0d6;
  --f-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-d: var(--f-ui); /* satu keluarga font untuk seluruh antarmuka (28 Okt 2026); Baloo 2 hanya tersisa di angka dalam gambar SVG soal */
  --r-s: 12px; --r-m: 20px; --r-l: 24px; --r-pill: 999px;
  --lift: 0 18px 40px -18px rgba(4, 12, 30, .7);
  --bayang-panel: 0 12px 20px -12px rgba(6, 14, 38, .6); /* panel datar: hanya bayangan lembut di bawah (28 Okt 2026) */
  --biru-tinta: #2459a8; /* teks tautan/angka biru di atas kertas */
  --tekan: 0 5px 0 var(--coral-deep);
  --cepat: 180ms; --sedang: 320ms; --lentur: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--f-ui); font-size: 16px; line-height: 1.55; color: var(--text);
  background-image:
    radial-gradient(1.2px 1.2px at 24px 40px, rgba(255,255,255,.22) 50%, transparent 52%),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.16) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 190px 160px, rgba(255,255,255,.14) 50%, transparent 52%);
  background-size: 220px 200px;
}
/* background-color <html> = warna ujung BAWAH (--bawah), sebab itulah yang tampak di balik bilah bawah Safari iPhone; gradasi di atasnya tetap atas→bawah (30 Okt 2026, percobaan terakhir). Warna latar ada di <html> (bukan body) supaya gradasi terus sampai ujung bawah halaman panjang dan area tarik-lewat di HP/iPad. Nilai --la..--lg dipasang lewat html[data-lat]. */
html { background-color: var(--bawah, #172e52); background-image: linear-gradient(180deg, var(--atas, #172e52), var(--bawah, #172e52)); transition: --la 700ms ease, --lb 700ms ease, --lc 700ms ease, --lg 700ms ease; }

/* ---------- latar menu berganti per level (dibuka dari pembekuan owner, 28 Okt 2026) ----------
   Hanya untuk layar navigasi: Beranda navy, Pilih Kelas berona biru, Pilih Mapel navy berpendar ungu, daftar Bab ikut warna mapel.
   Layar bab, misi, soal, dan pembahasan tetap navy tenang (nilai dasar di bawah). Gelap dan teduh: ujung bawah paling terang, tetap gelap.
   Properti terdaftar (@property) supaya warna berubah halus; bila peramban belum mendukung, warna berganti langsung. */
@property --la { syntax: "<color>"; inherits: true; initial-value: #172e52; }
@property --lb { syntax: "<color>"; inherits: true; initial-value: #172e52; }
@property --lc { syntax: "<color>"; inherits: true; initial-value: #172e52; }
@property --lg { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0); }
/* --atas/--bawah: warna ujung atas/bawah latar, sengaja TIDAK terdaftar (@property) supaya berganti langsung tanpa animasi.
   Safari iOS/iPad mengambil warna status bar dari sini; bila ikut dianimasikan, warna mapel sebelumnya "nyangkut". */
html { --la: #172e52; --lb: #172e52; --lc: #172e52; --lg: rgba(0, 0, 0, 0); --atas: #172e52; --bawah: #172e52; }
html[data-lat="beranda"] { --la: #1b2a58; --lb: #33295f; --lc: #5b3562; --lg: rgba(247, 199, 108, .16); --atas: #1b2a58; --bawah: #5b3562; }
html[data-lat="kelas"] { --la: #1d2a5a; --lb: #4a2c68; --lc: #8a4262; --lg: rgba(255, 160, 150, .22); --atas: #1d2a5a; --bawah: #8a4262; }
html[data-lat="akun"] { --la: #2a1745; --lb: #52266b; --lc: #8a3f7c; --lg: rgba(236, 192, 214, .26); --atas: #2a1745; --bawah: #8a3f7c; } /* plum, 29 Okt 2026 */
html[data-lat="admin"] { --la: #231046; --lb: #3d1d74; --lc: #5f2f9b; --lg: rgba(190, 170, 255, .2); --atas: #231046; --bawah: #5f2f9b; } /* panel admin: ungu, bukan biru (29 Okt 2026) */
html[data-lat="akses"] { --la: #231f4f; --lb: #4a2f5e; --lc: #7e4a58; --lg: rgba(247, 199, 108, .22); --atas: #231f4f; --bawah: #7e4a58; }
html[data-lat="pilih-mapel"] { --la: #1c2a5e; --lb: #3b2f80; --lc: #5a3a9a; --lg: rgba(143, 195, 255, .2); --atas: #1c2a5e; --bawah: #5a3a9a; }
html[data-lat^="mapel-"] { --lb: #1b3a6b; --lc: #1f4673; --lg: rgba(143, 195, 255, .14); --bawah: #1f4673; }
html[data-lat="mapel-matematika"] { --la: #1f2650; --lb: #382a5a; --lc: #55325a; --lg: rgba(255, 128, 107, .2); --atas: #1f2650; --bawah: #55325a; }
html[data-lat="mapel-ipas"] { --la: #0f2d4b; --lb: #0e4258; --lc: #0f4f56; --lg: rgba(116, 212, 192, .22); --atas: #0f2d4b; --bawah: #0f4f56; }
html[data-lat="mapel-bahasa-inggris"] { --la: #251f4f; --lb: #452860; --lc: #682f60; --lg: rgba(236, 192, 214, .16); --atas: #251f4f; --bawah: #682f60; }
html[data-lat="mapel-bahasa-indonesia"] { --la: #1f2a49; --lb: #3a3a47; --lc: #4e4036; --lg: rgba(247, 199, 108, .18); --atas: #1f2a49; --bawah: #4e4036; }
/* Halaman bab (Misi, Ringkasan, Lab, Rapor): warna latar mengikuti nuansa kartu bab yang diketuk, dengan satu benda langit. */
html[data-lat="bab"][data-nu="senja"] { --la: #1f2650; --lb: #4a2f5e; --lc: #7a3f55; --lg: rgba(255, 128, 107, .22); --atas: #1f2650; --bawah: #7a3f55; }
html[data-lat="bab"][data-nu="biru"] { --la: #14305e; --lb: #1d4a8a; --lc: #2a64a8; --lg: rgba(143, 195, 255, .2); --atas: #14305e; --bawah: #2a64a8; }
html[data-lat="bab"][data-nu="toska"] { --la: #0f2d4b; --lb: #0e4a58; --lc: #137066; --lg: rgba(116, 212, 192, .22); --atas: #0f2d4b; --bawah: #137066; }
html[data-lat="bab"][data-nu="ungu"] { --la: #231f55; --lb: #43308a; --lc: #6a3fa0; --lg: rgba(190, 170, 255, .2); --atas: #231f55; --bawah: #6a3fa0; }
html[data-lat="bab"][data-nu="laut"] { --la: #0e2f55; --lb: #0f5170; --lc: #1688a0; --lg: rgba(140, 225, 240, .2); --atas: #0e2f55; --bawah: #1688a0; }
html[data-lat="bab"][data-nu="mawar"] { --la: #2a1d4d; --lb: #5a2866; --lc: #8c3560; --lg: rgba(236, 192, 214, .2); --atas: #2a1d4d; --bawah: #8c3560; }
/* Latar dibuat lebih tinggi dari layar (30 Okt 2026): di HP, area di bawah bilah browser ikut terlihat saat gulir mentok. Tanpa tambahan ini yang tampak warna <html> yang berbeda (navy rata, pendar terpotong garis). Gradasi dan pendar tetap seukuran layar (100lvh); sisanya diisi warna ujung bawah (--lc). */
#latar { position: fixed; top: 0; left: 0; right: 0; height: calc(100lvh + 60vh); z-index: -2; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 90% 50% at 92% 106%, var(--lg), transparent 70%) top left / 100% 100lvh no-repeat, linear-gradient(180deg, var(--la) 0%, var(--lb) 55%, var(--lc) 100%) top left / 100% 100lvh no-repeat, var(--lc); }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
a { color: var(--sky); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
img { max-width: 100%; height: auto; } /* height:auto wajib: tanpa ini gambar ketarik di HP */
.d { font-family: var(--f-d); }
.muted { color: var(--text-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- kerangka ---------- */
.top {
  position: sticky; top: 0; z-index: 30; background: rgba(23, 46, 82, .92); background: color-mix(in srgb, var(--la) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 60px;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #f9d489, #ffab78); display: grid; place-items: center; flex: none; }
.brand b { font-weight: 800; font-size: 17px; letter-spacing: -.01em; display: block; line-height: 1.05; }
.brand b span { color: var(--coral); }
.brand small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--text-muted); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border-radius: var(--r-pill);
  padding: 6px 11px; font-weight: 800; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip.xp { color: var(--gold); }
.chip.api { color: #ffb19e; }
.btn-akun {
  min-width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--surface); color: var(--text);
  display: grid; place-items: center; font-weight: 800; padding: 0 12px;
}
.btn-akun.masuk { background: var(--paper); color: var(--ink); }
/* HP sempit: bilah atas memuat chip XP, api, tombol layar penuh, dan akun; rapatkan jarak supaya tidak melebar. */
@media (max-width: 400px) {
  .top-in { gap: 6px; }
  .top-right { gap: 4px; }
  .top-right .chip { padding: 6px 8px; gap: 4px; }
  .top-right .btn-akun { min-width: 40px; height: 40px; padding: 0 8px; }
}
@media (max-width: 340px) { .brand-mark { display: none; } }

main {
  max-width: 980px; margin: 0 auto; padding-block: 20px 120px;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
.stack { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--kicker); }
.crumb { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.crumb a { color: var(--kicker); text-decoration: none; }
.crumb a:hover { color: var(--text); }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 14px; border: 0; font-weight: 800; font-size: 15px; text-decoration: none;
  transition: transform var(--cepat) var(--lentur), box-shadow var(--cepat) var(--lentur), background-color var(--cepat);
}
.btn:active:not([disabled]) { transform: translateY(2px); }
.btn-coral { background: var(--coral); color: var(--ink); box-shadow: var(--tekan); }
.btn-coral:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 6px 0 var(--coral-deep); }
.btn-coral:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-deep); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-soft { background: var(--surface-2); color: var(--text); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-ghost-ink { background: transparent; color: var(--ink); border: 2px solid var(--paper-line); }
.btn-ghost { background: rgba(255, 255, 255, .12); color: var(--text); border: 1px solid rgba(255, 255, 255, .22); }
.btn[disabled] { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
.paper .btn[disabled], dialog .btn[disabled] { background: #efe6d4; color: var(--ink-muted); }
.btn-wide { width: 100%; }
.panah { transition: transform var(--cepat) var(--lentur); }
a:hover .panah, button:hover .panah { transform: translateX(3px); }

/* ---------- panel & kertas ---------- */
.panel { background: var(--surface); border-radius: var(--r-m); padding: 18px; }
.paper { background: var(--paper); color: var(--ink); border-radius: var(--r-m); padding: 18px; }
.paper .muted { color: var(--ink-muted); }
.paper a:not(.btn) { color: #2459a8; }
.paper a.btn-ghost-ink { color: var(--ink); }

/* ---------- beranda ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; align-items: center;
  background: var(--g-hero); border: 1px solid rgba(143, 177, 214, .25); border-radius: 28px; padding: 28px 28px 0; overflow: hidden;
  box-shadow: var(--lift);
}
.hero-teks { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; }
.hero h1 { font-size: clamp(30px, 6vw, 48px); font-weight: 800; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: #d7e3f3; font-size: 16px; max-width: 44ch; }
.hero .eyebrow { color: #ffd2b8; }
.hero-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.hero-cek { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #d2e4f3; }
.hero-cek span { display: inline-flex; gap: 6px; align-items: center; }
.hero-cek svg { color: var(--mint); }
.hero-gambar { align-self: end; justify-self: center; width: min(360px, 100%); }
@media (max-width: 680px) {
  .hero { grid-template-columns: 1fr; padding: 22px 20px 0; }
  .hero-teks { padding-bottom: 0; }
  .hero-gambar { width: min(300px, 86%); }
}
.judul-bagian { display: flex; flex-direction: column; gap: 4px; }
.judul-bagian h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.015em; }
.judul-bagian p { color: var(--text-muted); font-size: 14.5px; }

/* Kartu berwarna (kelas dan bab). Nuansa dipilih berurutan agar tiap kartu berbeda warna. */
.n-senja { --g: var(--g-senja); --t: var(--t-senja); }
.n-biru { --g: var(--g-biru); --t: var(--t-biru); }
.n-toska { --g: var(--g-toska); --t: var(--t-toska); }
.n-ungu { --g: var(--g-ungu); --t: var(--t-ungu); }
.n-laut { --g: var(--g-laut); --t: var(--t-laut); }
.n-mawar { --g: var(--g-mawar); --t: var(--t-mawar); }
.kartu-warna {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; border-radius: var(--r-l);
  background: var(--g, var(--g-biru)); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: transform var(--sedang) var(--lentur), box-shadow var(--sedang) var(--lentur);
}
a.kartu-warna:hover, a.kartu-warna:focus-visible { transform: translateY(-4px); box-shadow: var(--lift); }
a.kartu-warna:active { transform: translateY(-1px) scale(.99); }
.kartu-warna .no-besar { font-family: var(--f-d); font-size: 38px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .92); }
.kartu-warna .ilu { width: 70%; max-width: 190px; align-self: center; margin: -8px 0 6px; overflow: visible; }
.kartu-warna .kecil { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.kartu-warna h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.kartu-warna p { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .88); margin-bottom: 12px; }
.kartu-warna .tombol-kartu {
  margin-top: auto; min-height: 44px; border-radius: 12px; background: var(--t, #fff); color: var(--ink); font-weight: 800; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 3px 0 rgba(10, 20, 45, .22);
}
.kartu-warna .pita { position: absolute; top: 16px; right: 16px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); color: #fff; }
.kartu-warna .pita.emas { background: var(--gold); color: var(--ink); }
.kartu-warna.nanti { filter: saturate(.55); opacity: .72; }
.kartu-warna.nanti .tombol-kartu { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.meter { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; background: #fff; border-radius: inherit; }

.grid-kelas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .grid-kelas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kartu-kelas { min-height: 230px; justify-content: flex-end; }
.kartu-kelas .ilu { width: 100%; max-width: 240px; margin: 0 auto 4px; }
.kartu-kelas h3 { font-size: 22px; }
.kartu-kelas p { margin-bottom: 0; }

.statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.stat b { display: block; font-family: var(--f-d); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.statistik .semangat { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 2px 4px 0; }

/* Blok isi Juara Kelas: grafik batang bertumpuk per kelas. Hanya token yang sudah ada. */
.band-isi { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; display: grid; gap: 18px; }
.isi-besar { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.isi-besar b { font-size: clamp(48px, 12vw, 72px); font-weight: 800; letter-spacing: -.02em; line-height: .95; color: var(--gold); font-variant-numeric: tabular-nums; }
.isi-besar span { font-size: 15px; font-weight: 700; color: var(--text-muted); line-height: 1.3; }
.grafik-isi { display: grid; gap: 10px; }
.gr-baris { display: grid; grid-template-columns: 58px minmax(0, 1fr) 52px; gap: 10px; align-items: center; min-height: 44px; padding: 4px 8px; margin: 0 -8px; width: calc(100% + 16px); border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; transition: background-color var(--cepat), opacity var(--cepat); }
.gr-baris:hover, .gr-baris.pilih { background: var(--surface-2); }
.gr-kelas { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.gr-lintasan { display: block; height: 26px; border: 1px dashed var(--line); border-radius: 10px; padding: 2px; }
.gr-isi { height: 100%; display: flex; gap: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 1000ms cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.jalan .gr-isi { transform: scaleX(1); }
.gr-isi i { display: block; border-radius: 7px; min-width: 4px; transition: opacity var(--cepat); }
.band-isi.fokus .gr-baris:not(.pilih) { opacity: .5; }
.gr-isi i.redup { opacity: .22; }
.gr-angka { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.legenda span, .legenda .leg { display: inline-flex; align-items: center; gap: 6px; }
.legenda .leg { min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 700; transition: background-color var(--cepat), color var(--cepat); }
.legenda .leg:hover { background: var(--surface-2); }
.legenda .leg.pilih { background: var(--surface-2); color: var(--text); border-color: var(--kicker); }
.legenda i { width: 10px; height: 10px; border-radius: 4px; }
.legenda .legenda-putus i { background: none; border: 1px dashed var(--text-muted); }
.isi-hari { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-muted); line-height: 1.5; }
.isi-hari b { color: var(--gold); font-weight: 800; }
.gr-detail { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-height: 96px; }
.gr-detail.ganti { animation: gr-ganti var(--sedang) var(--lentur); }
@keyframes gr-ganti { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gr-ajak { font-size: 14.5px; font-weight: 600; color: var(--text-muted); align-self: center; }
.gr-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gr-judul b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.gr-judul span { font-size: 14px; font-weight: 700; color: var(--gold); }
.gr-rincian { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gr-rincian li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.gr-rincian li i { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.gr-rincian li span { flex: 1; }
.gr-rincian li b { font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-detail p:not(.gr-ajak) { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.gr-buka { justify-self: start; }
.isi-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.isi-mini b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.isi-mini div:nth-child(1) b { color: var(--mint); } .isi-mini div:nth-child(2) b { color: var(--sky); } .isi-mini div:nth-child(3) b { color: var(--kicker); }
.isi-mini span { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.grid-manfaat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.manfaat { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--text); transition: transform var(--sedang) var(--lentur), background-color var(--cepat), border-color var(--cepat); }
.manfaat:hover { transform: translateY(-2px); background: var(--surface-2); }
.manfaat[aria-expanded="true"] { background: var(--surface-2); border-color: var(--kicker); }
.manfaat .ik { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); margin-bottom: 4px; }
.manfaat .ik svg { width: 32px; height: 32px; overflow: visible; }
.manfaat:nth-child(1) .ik { background: var(--coral); } .manfaat:nth-child(2) .ik { background: var(--mint); }
.manfaat:nth-child(3) .ik { background: var(--sky); } .manfaat:nth-child(4) .ik { background: var(--gold); }
.manfaat b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.manfaat .mf-teks { font-size: 13.5px; font-weight: 600; color: var(--text-muted); line-height: 1.45; }
.manfaat .mf-lebih { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.5; }
.manfaat .mf-tutup { position: absolute; top: 14px; right: 14px; color: var(--text-muted); }
.manfaat .mf-tutup .panah { transition: transform var(--sedang) var(--lentur); transform: rotate(90deg); }
.manfaat[aria-expanded="true"] .mf-tutup .panah { transform: rotate(-90deg); }
@media (max-width: 760px) { .grid-manfaat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .band-isi { padding: 18px; } .gr-baris { grid-template-columns: 52px minmax(0, 1fr) 46px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .gr-isi { transform: none; transition: none; } .gr-detail.ganti { animation: none; } .manfaat:hover { transform: none; } }
.lanjut { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none; transition: transform var(--sedang) var(--lentur); }
.lanjut:hover { transform: translateY(-2px); }
.lanjut .ilu { width: 72px; flex: none; }
.lanjut b { display: block; font-size: 15.5px; } .lanjut small { color: var(--ink-muted); font-size: 12.5px; font-weight: 600; }
.lanjut .panah { margin-left: auto; }
.akses-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #f4bd84; color: var(--ink); border-radius: var(--r-l); padding: 22px; }
.akses-band .eyebrow { color: #8a3a2a; }
.akses-band p { color: #4d3a45; }
@media (max-width: 620px) { .akses-band { grid-template-columns: 1fr; } }

/* ---------- daftar mapel & bab ---------- */
.kepala-mapel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kepala-mapel h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.015em; }
.segera { font-size: 12px; font-weight: 800; color: var(--text-muted); background: var(--surface); border: 1px solid var(--line); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.bab-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.mapel-kosong { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-m); padding: 14px 16px; color: var(--text-muted); font-size: 14px; }
.mapel-kosong .ilu { width: 80px; flex: none; }

/* ---------- halaman bab ---------- */
.bab-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; align-items: center; background: var(--g, var(--g-ungu)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 26px; padding: 20px; overflow: hidden; }
.bab-head .eyebrow { color: rgba(255, 255, 255, .85); }
.bab-head h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.bab-head p { color: rgba(255, 255, 255, .88); font-size: 14.5px; margin-top: 6px; }
.bab-head .maskot { width: 150px; margin: -6px -6px -24px 0; }
@media (max-width: 520px) { .bab-head { grid-template-columns: minmax(0, 1fr) 96px; } .bab-head .maskot { width: 104px; } }
.segmen { display: flex; gap: 4px; margin-top: 12px; }
.segmen span { flex: 1; height: 7px; border-radius: 9px; background: rgba(255, 255, 255, .25); }
.segmen span.isi { background: #fff; }

.peta { position: relative; padding: 8px 0 20px; }
.peta svg.jalur { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.titik { position: relative; display: flex; padding: 10px 4%; }
.titik { justify-content: flex-start; }
.titik.kanan { justify-content: flex-end; }
.titik.aktif { justify-content: center !important; }
.node { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); text-align: left; padding: 0; text-decoration: none; }
.titik.kanan .node { flex-direction: row-reverse; text-align: right; }
.bulat { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-d); font-weight: 800; font-size: 22px; flex: none; }
.bulat.selesai { background: var(--mint); color: var(--ink); }
.bulat.kunci { border: 2.5px dashed #6c80b5; color: var(--text-muted); }
.bulat.buka { background: var(--surface-2); color: var(--text); border: 2.5px solid var(--sky); }
.node:hover .bulat:not(.kunci) { transform: scale(1.06); }
.bulat { transition: transform var(--cepat) var(--lentur); }
.bulat.bos { border-radius: 18px; background: var(--coral); color: var(--ink); font-size: 14px; }
.bulat.bos.kunci { background: transparent; color: var(--text-muted); }
.node b { display: block; font-size: 15px; }
.node small { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.bintang { display: inline-flex; gap: 1px; color: var(--gold); letter-spacing: 0; }
.bintang .off { color: #4b6197; }
.misi-aktif { width: min(400px, 100%); background: var(--paper); color: var(--ink); border-radius: var(--r-m); padding: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--lift); }
.misi-aktif .bulat { background: var(--coral); color: var(--ink); animation: denyut 2.4s ease-in-out infinite; }
.misi-aktif .isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.misi-aktif b { font-size: 16px; }
.misi-aktif small { color: var(--ink-muted); font-size: 12.5px; font-weight: 600; }
.misi-aktif.bos .bulat { border-radius: 18px; font-size: 14px; }
.label-gratis { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; background: var(--mint); color: var(--ink); border-radius: var(--r-pill); padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }

.navbawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  pointer-events: none; transition: transform .35s var(--lentur), opacity .3s ease;
}
.navbawah.turun { transform: translateY(130%); opacity: 0; }
.navbawah nav { pointer-events: auto; width: min(520px, 100%); background: rgba(14, 24, 50, .52); border: 0; backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25); border-radius: 22px; padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: 0 16px 36px -14px rgba(4, 12, 30, .6); }
.navbawah a { color: #d6e2f3 !important; transition: background-color var(--cepat), color var(--cepat); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 16px; color: var(--text-muted); text-decoration: none; font-weight: 700; font-size: 11.5px; }
.navbawah a[aria-current="page"] { background: var(--gold); color: var(--ink) !important; font-weight: 800; box-shadow: 0 3px 0 rgba(150, 105, 20, .45); }
.navbawah a:not([aria-current]):hover { background: rgba(255, 255, 255, .1); }
/* Kabut di bawah menu supaya isi yang lewat di belakangnya tidak bertabrakan dengan ikon. */
.navbawah svg { width: 21px; height: 21px; }

/* ---------- ringkasan ---------- */
.ring { display: flex; flex-direction: column; gap: 12px; }
.ring h2 { font-size: 21px; display: flex; gap: 10px; align-items: baseline; }
.ring h2 .n { font-family: var(--f-d); color: var(--coral-deep); font-size: 20px; }
.ring p { max-width: 68ch; }
.rumus { display: flex; flex-wrap: wrap; gap: 8px; }
.rumus span { background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 12px; padding: 6px 12px; font-weight: 700; }
.contoh { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; border: 2px dashed var(--paper-line); }
.contoh .eyebrow { color: var(--coral-deep); }
.contoh ol { margin: 6px 0 0; padding-left: 20px; }
.tips { display: flex; flex-direction: column; gap: 8px; }
.tips li { margin: 0; }
.tips ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- visual ---------- */
.viz { background: var(--paper-2); border-radius: 16px; padding: 12px; display: flex; justify-content: center; overflow-x: auto; }
.viz svg { display: block; max-width: 100%; height: auto; }
.viz-cap { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); text-align: center; margin-top: 4px; }

/* ---------- misi / soal ---------- */
.misi-bar { display: flex; align-items: center; gap: 12px; }
.kembali { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; flex: none; border: 0; color: var(--text); text-decoration: none; }
.prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prog-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.prog-seg { display: flex; gap: 4px; }
.prog-seg i { flex: 1; height: 8px; border-radius: 9px; background: var(--surface-2); }
.prog-seg i.ok { background: var(--mint); }
.prog-seg i.no { background: #ff9b85; }
.prog-seg i.kini { background: var(--text); }
.prog-seg i.isi { background: var(--sky); }
.btn-ikon { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--surface); color: var(--text); display: grid; place-items: center; flex: none; }

.kartu-soal { display: flex; flex-direction: column; gap: 14px; }
.tag-soal { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 10px; background: #d8e6f6; color: var(--ink); }
.tag.lv-penalaran { background: #ffe1d8; color: #8a2f17; }
.tag.lv-aplikasi { background: #fff0c6; color: #6b4b00; }
.tag.lv-paham { background: #dcf3ec; color: #0f5a48; }
.teks-soal { font-size: 18px; font-weight: 700; line-height: 1.5; }
.petunjuk { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }

.opsi { display: grid; gap: 8px; }
.opsi.viz-opsi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px; border-radius: 14px; text-align: left;
  border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 16px;
}
.op:hover:not([disabled]) { border-color: var(--ink-muted); }
.op .huruf { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--f-d); font-weight: 800; flex: none; }
.op.cek .huruf { border-radius: 9px; }
.op[aria-pressed="true"] { border-color: var(--ink); background: #f1f5ff; }
.op[aria-pressed="true"] .huruf { background: var(--ink); color: var(--paper); }
.op.benar { border-color: var(--ok); background: var(--ok-bg); }
.op.benar .huruf { background: var(--ok); border-color: var(--ok); color: #fff; }
.op.salah { border-color: var(--bad); background: var(--bad-bg); }
.op.salah .huruf { background: var(--bad); border-color: var(--bad); color: #fff; }
.op[disabled] { cursor: default; }
.viz-opsi .op { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
.viz-opsi .op .huruf { align-self: flex-start; }
.viz-opsi .op svg { width: 100%; height: auto; max-height: 150px; }

.kat { display: flex; flex-direction: column; gap: 8px; }
.kat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 14px; padding: 10px 12px; }
.kat-row.benar { border-color: var(--ok); background: var(--ok-bg); }
.kat-row.salah { border-color: var(--bad); background: var(--bad-bg); }
.bs { display: flex; gap: 6px; }
.bs button { min-width: 64px; min-height: 44px; border-radius: 12px; border: 2px solid var(--paper-line); background: var(--paper); color: var(--ink); font-weight: 800; }
.bs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kunci-kecil { font-size: 12.5px; font-weight: 800; }
.kunci-kecil.ok { color: var(--ok); } .kunci-kecil.no { color: var(--bad); }

.isian { display: flex; align-items: center; gap: 10px; }
.isian input { flex: 1; min-width: 0; min-height: 56px; border-radius: 14px; border: 2px solid var(--ink); background: var(--paper-2); padding: 0 16px; font-size: 22px; font-weight: 800; color: var(--ink); font-family: var(--f-d); }
.isian input.benar { border-color: var(--ok); background: var(--ok-bg); }
.isian input.salah { border-color: var(--bad); background: var(--bad-bg); }
.isian .satuan { font-weight: 800; color: var(--ink-muted); }

/* Kertas Susun (hitung bersusun): kertas coret-coret di soal dan di Lab Susun Hitung. Hanya token. */
.kertas-luar, .kertas-bungkus { display: flex; flex-direction: column; gap: 10px; }
.btn-kertas { align-self: flex-start; min-height: 44px; padding: 0 16px; }
.kertas { background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.kertas-baris { display: grid; grid-template-columns: 22px repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; }
.kertas-op { font: 800 28px/1 var(--f-d); color: var(--ink); text-align: center; align-self: center; }
.kertas-angka { font: 800 28px/1 var(--f-d); color: var(--ink); min-height: 44px; display: grid; place-items: end center; }
.kertas-simpan, .kertas-isi { width: 100%; min-width: 0; box-sizing: border-box; padding: 0; text-align: center; font-family: var(--f-d); font-weight: 800; background: var(--paper-2); color: var(--ink); }
.kertas-simpan { height: 34px; font-size: 18px; border: 2px dashed var(--paper-line); border-radius: 8px; color: var(--coral-deep); }
.kertas-isi { height: 50px; font-size: 26px; border: 2px solid var(--ink); border-radius: 12px; }
.kertas-isi.benar { border-color: var(--ok); background: var(--ok-bg); }
.kertas-isi.salah { border-color: var(--bad); background: var(--bad-bg); }
.kertas-garis { height: 3px; background: var(--ink); border-radius: 2px; margin: 2px 0 2px 22px; }
.kertas-atas { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px 0; border: 0; border-radius: 10px; background: var(--paper); font: 800 28px/1.1 var(--f-d); color: var(--ink); }
.kertas-atas[disabled] { background: transparent; }
.kertas-atas:active:not([disabled]) { transform: translateY(1px); }
.kertas-atas .baru { font-size: 20px; color: var(--coral-deep); }
.kertas-atas .coret { font-size: 18px; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--coral-deep); text-decoration-thickness: 2px; }
.kertas-atas .coret:last-child { font-size: 28px; }
.kertas-info { font-size: 14px; font-weight: 700; color: var(--ink-muted); min-height: 20px; }
.kertas-aksi { display: flex; gap: 10px; }
.kertas-aksi .btn { flex: 1; }

.jodoh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.jodoh .kolom { display: flex; flex-direction: column; gap: 8px; }
.jd { min-height: 50px; border-radius: 14px; border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; }
.jd[aria-pressed="true"] { border-color: var(--ink); background: #f1f5ff; }
.jd .pas { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--ink); flex: none; }
.jd.benar { border-color: var(--ok); background: var(--ok-bg); } .jd.salah { border-color: var(--bad); background: var(--bad-bg); }

.aksi-soal { display: flex; gap: 10px; flex-wrap: wrap; }
.aksi-soal .btn { flex: 1; }

.umpan { border-radius: var(--r-m); padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); color: var(--ink); }
.umpan-head { display: flex; align-items: center; gap: 12px; }
.umpan-head .ikon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok); }
.umpan.salah .umpan-head .ikon { background: var(--bad); }
.umpan-head h2 { font-size: 21px; }
.umpan-head p { font-size: 13.5px; color: var(--ink-muted); font-weight: 600; }
.xp-dapat { margin-left: auto; background: var(--gold); color: var(--ink); border-radius: var(--r-pill); padding: 4px 12px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.langkah { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.langkah li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; position: relative; }
.langkah li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--paper-line); }
.langkah .n { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 13.5px; }
.langkah p { font-size: 15.5px; padding-top: 3px; }
.jebakan { background: #fff0e9; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.jebakan b { color: var(--bad); }
.kunci-jawab { font-size: 14px; font-weight: 700; }

.hasil { text-align: center; align-items: center; }
.hasil .bintang-besar { display: flex; gap: 6px; justify-content: center; }
.hasil .bintang-besar svg { width: 60px; height: 60px; }
.hasil .skor { font-family: var(--f-d); font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hasil img { width: 130px; }
.review { display: flex; flex-direction: column; gap: 12px; }
.review details { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 12px 14px; }
.review summary { cursor: pointer; font-weight: 800; display: flex; gap: 10px; align-items: center; min-height: 32px; }
.review summary .tanda { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; flex: none; }
/* Pembahasan (latihan dan ujian): soal di kartu krem, pembahasan di gelembung chat berwarna di bawahnya. */
.umpan { position: relative; margin: 6px 0 0 12px; padding: 14px 16px; gap: 12px; border-radius: 4px 20px 20px 20px; background: var(--ok-bubble); }
.umpan.salah { background: var(--bad-bubble); }
.umpan::before { content: ""; position: absolute; top: 0; left: -10px; width: 14px; height: 16px; background: inherit; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.umpan .jebakan { background: var(--paper-2); }
.umpan .langkah li:not(:last-child)::before { background: rgba(27, 42, 78, .16); }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes naik { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
@keyframes geleng { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pop { animation: pop .35s ease-out both; }
.geleng { animation: geleng .3s; }
.percikan { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.percikan i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--w); animation: muncrat .75s cubic-bezier(.15, .7, .3, 1) var(--d, 0s) forwards; }
.percikan i.bt { left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 0; clip-path: polygon(50% 0, 62% 36%, 98% 38%, 69% 60%, 80% 96%, 50% 74%, 20% 96%, 31% 60%, 2% 38%, 38% 36%); }
@keyframes muncrat { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); opacity: 0; } }
@keyframes cincin { 0% { box-shadow: 0 0 0 0 rgba(23, 115, 75, .5); } 100% { box-shadow: 0 0 0 20px rgba(23, 115, 75, 0); } }
.umpan:not(.salah) .umpan-head .ikon { animation: pop .4s ease-out both, cincin .8s ease-out .1s both; }
.kombo { background: var(--ink); color: var(--gold); border-radius: var(--r-pill); padding: 4px 12px; font-family: var(--f-d); font-weight: 800; font-size: 16px; white-space: nowrap; animation: pop .4s ease-out .15s both; }
.xp-terbang { position: fixed; z-index: 60; pointer-events: none; background: var(--gold); color: var(--ink); font-weight: 800; border-radius: var(--r-pill); padding: 3px 12px; animation: naik .9s ease-out forwards; }

/* ---------- lab ---------- */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .lab { grid-template-columns: 1fr; } }
.lab-grid { display: grid; gap: 6px; justify-content: center; }
.lab-sel { width: 64px; height: 64px; border-radius: 14px; border: 2px solid var(--paper-line); background: var(--paper-2); font-family: var(--f-d); font-weight: 800; font-size: 28px; color: var(--ink); touch-action: manipulation; }
.lab-sel.isi { background: #dff5ef; border-color: #7fcdbb; }
.lab-garis > :first-child { order: 2; }
/* Di HP, garis waktu + info menempel di bawah header selagi anak memilih peristiwa, jadi hasil ketukan selalu terlihat tanpa gulir naik-turun. */
@media (max-width: 760px) {
  .lab-garis > :first-child { order: 0; position: sticky; top: 62px; z-index: 5; background: var(--paper); padding: 4px 0 8px; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
}
.lab-label { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--ink-muted); }
.mode { display: flex; background: #d8e6f6; border-radius: 14px; padding: 4px; gap: 4px; }
.mode button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: transparent; font-weight: 800; color: var(--ink); }
.mode button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tampak3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tampak3 .viz { padding: 8px; flex-direction: column; align-items: center; }
.tantangan { display: flex; flex-direction: column; gap: 8px; }
.tantangan li { list-style: none; display: flex; gap: 10px; align-items: center; background: var(--paper-2); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: 14.5px; }
.tantangan ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tantangan .cek { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper-line); display: grid; place-items: center; flex: none; }
.tantangan li.ok { background: var(--ok-bg); }
.tantangan li.ok .cek { background: var(--ok); border-color: var(--ok); }

/* ---------- dialog & formulir ---------- */
dialog {
  border: 0; border-radius: 22px; padding: 0; width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(4, 12, 30, .8);
}
dialog[open] { animation: dlg-masuk var(--sedang) var(--lentur); }
dialog::backdrop { background: rgba(8, 16, 36, .62); backdrop-filter: blur(3px); }
/* Pop-up terbuka = halaman di belakangnya tidak bisa digulir (30 Okt 2026). scrollbar-gutter menjaga lebar halaman supaya tidak bergeser saat gulir dikunci; overscroll-behavior mencegah gulir menembus dari dalam pop-up. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
dialog { overscroll-behavior: contain; }
.dlg-tutup { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1e7d4; color: var(--ink); display: grid; place-items: center; }
.dlg-kepala { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.dlg-kepala img { width: 56px; flex: none; }
.dlg { position: relative; padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { font-size: 22px; letter-spacing: -.01em; padding-right: 36px; }
.dlg > .muted { font-size: 14.5px; line-height: 1.5; }
.dlg .field { gap: 4px; }
.dlg .field label { font-size: 13.5px; }
.dlg .field input { min-height: 46px; font-size: 16px; }
.dlg .btn { min-height: 46px; }
.dlg-eyebrow { color: #3f7d8a; }
.dlg-link { text-align: center; font-weight: 800; font-size: 14px; color: #2459a8; text-decoration: none; padding: 4px 0; }
.dlg-sekunder { background: #e9eef6; color: var(--ink); }
.dlg-catatan { text-align: center; font-size: 12.5px; color: var(--ink-muted); }
.dlg-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff0c6; color: #8a5a00; }
@media (max-width: 380px) { .dlg { padding: 20px 16px 16px; } .dlg h2 { font-size: 20px; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; font-size: 14px; }
.field input, .field select { min-height: 50px; border-radius: 12px; border: 2px solid var(--paper-line); background: var(--paper-2); padding: 0 14px; font-size: 16px; color: var(--ink); }
.field input:focus { border-color: var(--ink); outline: none; }
.galat { background: var(--bad-bg); color: var(--bad); border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: 14px; }
.info { background: #e6f0ff; color: #1e3f78; border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 14px; }
.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 70; transform: translateX(-50%);
  width: max-content; max-width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1.4; padding: 12px 16px 12px 12px;
  border-radius: 16px; box-shadow: var(--lift); animation: toast-masuk var(--sedang) var(--lentur);
}
.toast .tanda { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok); color: #fff; }
.toast.galat .tanda { background: var(--bad); }
.toast.info .tanda { background: var(--sky); color: var(--ink); }
.toast.keluar { animation: toast-keluar var(--cepat) ease-in forwards; }

.memuat { display: grid; gap: 14px; min-height: 40vh; align-content: start; }
.kerangka { border-radius: var(--r-l); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: kilau 1.4s linear infinite; }
.kosong { text-align: center; padding: 32px 16px; color: var(--text-muted); }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--paper-line); }
.tabel-wrap { overflow-x: auto; }
footer.kaki { max-width: 980px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right)) 120px max(16px, env(safe-area-inset-left)); color: var(--text-muted); font-size: 13px; }

.viz-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .85em; line-height: 1.05; margin: 0 .12em; }
.frac > span:first-child { border-bottom: 1.6px solid currentColor; padding: 0 .2em; }

.paper input, .paper select, .paper textarea, dialog input { color-scheme: light; background: var(--paper-2); color: var(--ink); }

/* ---------- navigasi atas (laptop/tablet) ---------- */
.top-nav { display: flex; gap: 4px; margin-left: 18px; }
.top-nav a { color: #cad7ec; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 10px; transition: background-color var(--cepat), color var(--cepat); }
.top-nav a:hover, .top-nav a[aria-current="page"] { background: var(--surface-2); color: #fff; }
@media (max-width: 760px) { .top-nav { display: none; } }

/* ---------- gerak: melayang, transisi halaman, umpan ---------- */
/* Ilustrasi: tiap bagian melayang pelan dengan jeda berbeda supaya halaman terasa hidup. */
.ilu .fl-a, .ilu .fl-b, .ilu .fl-c { transform-box: fill-box; transform-origin: center; }
.ilu .fl-a { animation: melayang 5.5s ease-in-out infinite; }
.ilu .fl-b { animation: melayang 4.2s ease-in-out -1.2s infinite; }
.ilu .fl-c { animation: melayang-miring 6.5s ease-in-out -2.4s infinite; }
.maskot, .hero-gambar { animation: melayang-besar 6s ease-in-out infinite; }
.kartu-warna:nth-child(2n) .ilu .fl-a { animation-delay: -2s; }
.kartu-warna:nth-child(3n) .ilu .fl-a { animation-delay: -3.4s; }
@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes melayang-miring { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -5px) rotate(6deg); } }
@keyframes melayang-besar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 128, 107, .45); } 60% { box-shadow: 0 0 0 10px rgba(255, 128, 107, 0); } }

/* Transisi masuk halaman: isi naik sedikit dan muncul; kartu dalam daftar menyusul satu per satu. */
.hal-masuk > * { animation: masuk-naik var(--sedang) var(--lentur) both; }
.hal-masuk > *:nth-child(2) { animation-delay: 40ms; }
.hal-masuk > *:nth-child(3) { animation-delay: 80ms; }
.hal-masuk > *:nth-child(n+4) { animation-delay: 120ms; }
.hal-masuk .berurut > * { animation: masuk-naik var(--sedang) var(--lentur) both; animation-delay: calc(120ms + var(--i, 0) * 50ms); }
.isi-tab { animation: masuk-naik var(--sedang) var(--lentur) both; }
.hal-kembali > * { animation: masuk-geser var(--sedang) var(--lentur) both; }
@keyframes masuk-naik { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes masuk-geser { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes dlg-masuk { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lembar-naik { from { transform: translateY(100%); } to { transform: none; } }
@keyframes toast-masuk { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-keluar { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- perbaikan kecil konsistensi ---------- */
dialog .muted { color: var(--ink-muted); }
.umpan { scroll-margin-top: 80px; }
/* Di HP, kartu bab dibuat ringkas: teks di kiri, ilustrasi di kanan, supaya daftar tidak terlalu panjang. */
@media (max-width: 560px) {
  .bab-list .kartu-warna { display: grid; grid-template-columns: minmax(0, 1fr) 104px; column-gap: 8px; align-items: center; padding: 16px; }
  .bab-list .kartu-warna > * { grid-column: 1; }
  .bab-list .kartu-warna .ilu { grid-column: 2; grid-row: 1 / span 4; width: 104px; margin: 0; }
  .bab-list .kartu-warna .no-besar { font-size: 30px; }
  .bab-list .kartu-warna .tombol-kartu { grid-column: 1 / -1; margin-top: 10px; }
  .bab-list .kartu-warna .pita { position: static; justify-self: start; grid-row: auto; margin-bottom: 2px; }
  .bab-list .kartu-warna.nanti .tombol-kartu { display: none; }
}

/* Kepala halaman: tombol kembali besar + judul kecil (navigasi ketuk, tanpa menu panel). */
.kepala-hal { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; color: var(--text-muted); }
.kepala-hal .kembali { width: 48px; height: 48px; border-radius: 16px; border: 1px solid var(--line); transition: transform var(--cepat) var(--lentur); }
.kepala-hal .kembali:active { transform: scale(.94); }
.kepala-hal .kembali { flex: none; }
/* Jejak halaman: Kelas 6 › Matematika › Bab 2. Tiap bagian bisa diketuk, bagian terakhir = halaman ini. */
.jejak { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.jejak::-webkit-scrollbar { display: none; }
.jejak a, .jejak span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 10px; font-size: 14px; }
.jejak a { color: var(--kicker); text-decoration: none; }
.jejak a:hover { background: rgba(255, 255, 255, .08); }
.jejak span { color: var(--text); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.jejak i { font-style: normal; color: var(--text-muted); flex: none; }

/* ---------- dunia menu (28 Okt 2026): kartu besar di kiri + isi pilihan di kanan; benda langit berganti per level ---------- */
main:has(.dunia) { max-width: 1160px; }
.dunia { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.dunia-kiri { position: sticky; top: 84px; }
.dunia-kanan { min-width: 0; }
.dunia-kanan .grid-kelas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartu-dunia { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 300px; padding: 24px;
  border-radius: var(--r-l); background: var(--g, var(--g-biru)); border: 1px solid rgba(255, 255, 255, .18); color: #fff; box-shadow: var(--lift); }
.kartu-dunia .eyebrow { color: rgba(255, 255, 255, .85); }
.kartu-dunia h1 { font-family: var(--f-d); font-size: clamp(30px, 4vw, 38px); font-weight: 800; letter-spacing: -.01em; margin-top: 4px; }
.kartu-dunia p { color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 600; margin-top: 6px; }
.kartu-dunia .btn { align-self: flex-start; }
.kartu-dunia .prog-mapel { color: #fff; font-size: 13px; font-weight: 700; }
.kd-benda { position: absolute; z-index: -1; top: -58px; right: -44px; width: 220px; }
@media (max-width: 860px) {
  .dunia { grid-template-columns: 1fr; gap: 16px; }
  .dunia-kiri { position: static; }
  .kartu-dunia { min-height: 0; padding: 22px 20px; }
  .kd-benda { width: 150px; top: -22px; right: -26px; }
  .kd-teks { padding-right: 84px; }
}

/* Benda langit: satu set SVG (engine/benda.js), melayang pelan. Latar menampilkan yang cocok dengan layar. */
.bd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bd-svg .fl-a { transform-box: fill-box; transform-origin: center; animation: apung 8s ease-in-out infinite; }
@keyframes apung { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-3deg); } }
.bd { position: absolute; top: 76px; right: max(-30px, 3vw); width: clamp(150px, 22vw, 280px); opacity: 0; transition: opacity 700ms ease; }
body[data-lat="beranda"] .bd-matahari, body[data-lat="kelas"] .bd-bulan, body[data-lat="pilih-mapel"] .bd-planet,
body[data-lat="mapel-matematika"] .bd-cincin, body[data-lat="mapel-ipas"] .bd-saturnus,
body[data-lat="mapel-bahasa-inggris"] .bd-komet, body[data-lat="mapel-bahasa-indonesia"] .bd-bintang { opacity: .8; }
body[data-nu="senja"][data-lat="bab"] .bd-cincin, body[data-nu="biru"][data-lat="bab"] .bd-bulan, body[data-nu="toska"][data-lat="bab"] .bd-saturnus,
body[data-nu="ungu"][data-lat="bab"] .bd-planet, body[data-nu="laut"][data-lat="bab"] .bd-komet, body[data-nu="mawar"][data-lat="bab"] .bd-bintang { opacity: .6; }

/* Halaman akun (plum): bulan besar di kanan atas dan planet kecil di kiri bawah, melayang pelan di belakang kartu. */
body[data-lat="akun"] .bd-bulan { opacity: .78; }
body[data-lat="akun"] .bd-planet { opacity: .62; top: auto; right: auto; bottom: calc(60vh + 36px); left: max(-40px, 2vw); width: clamp(110px, 14vw, 180px); }
body[data-lat="akun"] .bd-planet .fl-a { animation-duration: 10s; animation-delay: -3s; }
@media (max-width: 860px) {
  body[data-lat="akun"] .bd-bulan { right: 66px; top: 4px; width: 92px; }
  body[data-lat="akun"] .bd-planet { left: -34px; bottom: calc(60vh + 24px); width: 120px; }
}

/* Di halaman dunia, benda langit sudah ada di kartu besar, jadi benda latar disembunyikan supaya tidak ganda. */
body:has(.dunia) .bd { opacity: 0 !important; }
@media (max-width: 860px) { body[data-lat="bab"] .bd { right: -64px; } } /* di HP, benda halaman bab menepi supaya tidak menimpa jejak halaman */

/* Kartu bab */
.kb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 168px; padding: 16px 18px 18px; border-radius: var(--r-l);
  background: var(--g, var(--g-biru)); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .18);
  font: inherit; text-align: left; width: 100%; transition: transform var(--sedang) var(--lentur), box-shadow var(--sedang) var(--lentur); }
.kb-lebar { grid-column: 1 / -1; min-height: 150px; }
a.kb:hover, button.kb:hover, a.kb:focus-visible { transform: translateY(-4px); box-shadow: var(--lift); }
a.kb:active, button.kb:active { transform: translateY(-1px) scale(.99); }
.kb-no { position: absolute; top: 10px; left: 16px; font-family: var(--f-d); font-size: 54px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .92); }
.kb-ilu { position: absolute; z-index: -1; top: 6px; right: 6px; width: 46%; max-width: 150px; transition: transform var(--sedang) var(--lentur); }
.kb-lebar .kb-ilu { width: 34%; max-width: 210px; }
.kb-ilu .ilu { display: block; width: 100%; overflow: visible; }
a.kb:hover .kb-ilu, button.kb:hover .kb-ilu { transform: scale(1.08) rotate(-2deg); }
.kb-teks { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; width: 100%; }
.kb-judul { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.kb-pil { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); }
.kb .segmen { width: 100%; margin-top: 4px; }
.kb-lencana { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgba(4, 12, 30, .6); }
.kb-lencana svg { width: 20px; height: 20px; }
.kb-ok { background: var(--mint); color: var(--ink); }
.kb-aktif { outline: 3px solid var(--coral); outline-offset: 3px; animation: denyut 2.4s ease-in-out infinite; }
.kb-kunci { filter: saturate(.6) brightness(.9); }
.kb-nanti { opacity: .62; filter: saturate(.55); border-style: dashed; }
@media (max-width: 560px) {
  .kb-grid { grid-template-columns: 1fr; gap: 12px; }
  .kb, .kb-lebar { min-height: 104px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 14px 100px 14px 76px; }
  .kb-no { top: 50%; left: 16px; transform: translateY(-50%); font-size: 44px; }
  .kb-ilu, .kb-lebar .kb-ilu { top: 50%; right: 2px; width: 92px; transform: translateY(-50%); }
  a.kb:hover .kb-ilu, button.kb:hover .kb-ilu { transform: translateY(-50%) scale(1.08); }
  .kb-lencana { top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 10px; }
  .kb-lencana svg { width: 16px; height: 16px; }
  .kb-judul { font-size: 17px; }
}

/* Kartu mapel di halaman kelas */
.km-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.km { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; min-height: 200px; padding: 18px; border-radius: var(--r-l);
  background: var(--g, var(--g-biru)); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .18);
  transition: transform var(--sedang) var(--lentur), box-shadow var(--sedang) var(--lentur); }
a.km:hover, a.km:focus-visible { transform: translateY(-4px); box-shadow: var(--lift); }
.km-benda { position: absolute; z-index: -1; top: -14px; right: -18px; width: 150px; }
.km h3 { font-family: var(--f-d); font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.km-pil { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); }
.km.nanti { opacity: .62; filter: saturate(.55); }
@media (max-width: 560px) { .km { min-height: 170px; padding: 16px; } .km-benda { width: 118px; } .km h3 { font-size: 21px; } }

/* Pita ujian: penanda jenis di kiri, warna beda per jenis */
.up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .up-grid { grid-template-columns: 1fr; } }
.up { display: flex; align-items: center; min-height: 72px; padding: 0; border-radius: var(--r-m); overflow: hidden; background: var(--g, var(--g-biru)); color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .18); font: inherit; text-align: left; width: 100%; transition: transform var(--cepat) var(--lentur), box-shadow var(--cepat) var(--lentur); }
a.up:hover, button.up:hover, a.up:focus-visible { transform: translateY(-3px); box-shadow: var(--lift); }
.up-tag { align-self: stretch; display: grid; place-items: center; min-width: 84px; padding: 0 22px 0 14px; font-family: var(--f-d); font-size: 22px; font-weight: 800; letter-spacing: .02em;
  background: var(--t, var(--t-biru)); color: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); margin-right: -6px; }
.up-judul { flex: 1; min-width: 0; padding: 0 12px 0 16px; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.up-ik { flex: none; padding-right: 16px; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; }
.up-ik svg { width: 20px; height: 20px; }
.up-sts { --g: var(--g-biru); --t: var(--t-biru); }
.up-sas { --g: var(--g-ungu); --t: var(--t-ungu); }
.up-uji { --g: var(--g-laut); --t: var(--t-laut); }
.up-tka { --g: none; background: var(--gold); color: var(--ink); }
.up-tka .up-tag { background: var(--ink); color: var(--gold); }
.up-kunci { filter: saturate(.6) brightness(.92); }
.up.nanti { opacity: .6; filter: saturate(.55); border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .bd-svg .fl-a, .kb-aktif { animation: none; } .bd { transition: none; } }

.prog-mapel { display: flex; align-items: center; gap: 10px; }
.prog-mapel .bar { flex: 1; height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .2); overflow: hidden; }
.prog-mapel .bar i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
.prog-mapel span { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* ---------- jalur misi (pengganti peta zigzag) ---------- */
.jalur-misi { list-style: none; margin: 0 auto; padding: 4px 0 0; max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.lm { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.lm:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 50%; height: calc(100% + 12px); width: 3px; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.lm.selesai:not(:last-child)::before { background: var(--mint); }
.lm-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-d); font-weight: 800; font-size: 21px; background: var(--surface-2); color: var(--text); border: 3px solid var(--line); }
.lm-node svg { width: 22px; height: 22px; }
.lm.selesai .lm-node { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.lm.aktif .lm-node { background: var(--coral); color: var(--ink); border-color: var(--coral); animation: denyut 2.4s ease-in-out infinite; }
.lm.kunci .lm-node { background: transparent; color: var(--text-muted); border-style: dashed; }
.lm.bos .lm-node { border-radius: 16px; background: var(--gold); color: var(--ink); border-color: var(--gold); }
.lm.bos.kunci .lm-node { background: transparent; color: var(--text-muted); border-color: var(--line); }
.lm-kartu { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px 12px 16px; border-radius: 18px; text-decoration: none; text-align: left; width: 100%;
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  transition: transform var(--sedang) var(--lentur), background-color var(--cepat), box-shadow var(--sedang) var(--lentur); }
.lm-kartu:hover { transform: translateX(4px); background: var(--surface-2); }
.lm-kartu:active { transform: scale(.985); }
.lm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.lm-info b { font-size: 16.5px; line-height: 1.25; }
.lm-info small { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.lm-bintang { margin-top: 2px; }
.lm-aksi { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--kicker); }
.lm.aktif .lm-kartu { background: var(--paper); color: var(--ink); border-color: transparent; box-shadow: var(--lift); padding-block: 16px; }
.lm.aktif .lm-label { color: var(--coral-deep); }
.lm.aktif .lm-info small { color: var(--ink-muted); }
.lm.aktif .lm-info b { font-size: 18px; }
.lm-mulai { flex: none; min-height: 44px; padding: 0 18px; }
.lm.kunci .lm-kartu { opacity: .72; }
.lm.bos:not(.kunci) .lm-kartu { background: #f4bd84; color: var(--ink); border-color: transparent; }
.lm.bos:not(.kunci) .lm-label { color: #8a3a2a; }
.lm.bos:not(.kunci) .lm-info small, .lm.bos:not(.kunci) .lm-aksi { color: #5b4256; }
@media (max-width: 520px) {
  .lm { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .lm-node { width: 44px; height: 44px; font-size: 18px; }
  .lm:not(:last-child)::before { left: 21px; }
  .lm.aktif .lm-kartu { flex-wrap: wrap; }
  .lm.aktif .lm-mulai { width: 100%; }
}

/* Kartu terkunci (tamu): tombol yang membuka penawaran. */
button.kartu-warna { font: inherit; text-align: left; width: 100%; cursor: pointer; }
.kartu-warna.terkunci { filter: saturate(.7); }
.kartu-warna.terkunci:hover { transform: translateY(-3px); }
.kartu-warna .pita svg, .kartu-warna .tombol-kartu svg { width: 15px; height: 15px; vertical-align: -2px; }
.kartu-warna.terkunci .tombol-kartu { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }

/* Pindah halaman: isi lama meredup sebentar saat data dimuat, lalu isi baru masuk. */
#app { transition: opacity 140ms ease; }
#app.hal-pergi { opacity: .55; pointer-events: none; }

/* ---------- gerak lebih hidup (tetap ringan: hanya transform/opacity, diproses GPU) ---------- */
.ilu .fl-a { animation: melayang 4.6s ease-in-out infinite; }
.ilu .fl-b { animation: denyut-gelembung 3.8s ease-in-out -1.2s infinite; }
.ilu .fl-c { animation: melayang-miring 5.4s ease-in-out -2.4s infinite; }
@keyframes melayang { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(-3deg); } }
@keyframes melayang-miring { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(7px, -11px) rotate(12deg); } }
@keyframes denyut-gelembung { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-9px) scale(1.18); opacity: .7; } }
@keyframes melayang-besar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(-2deg); } }
.maskot, .hero-gambar { animation: melayang-besar 5s ease-in-out infinite; will-change: transform; }
a.kartu-warna:hover .ilu, button.kartu-warna:hover .ilu { transform: scale(1.08) rotate(-2deg); }
.kartu-warna .ilu { transition: transform var(--sedang) var(--lentur); }
/* Bintang latar berkelip pelan. */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 52%), radial-gradient(2px 2px at 78% 12%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 62% 64%, rgba(255,255,255,.6) 50%, transparent 52%), radial-gradient(2.2px 2.2px at 30% 82%, rgba(247,199,108,.8) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 90% 48%, rgba(145,215,223,.8) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 45% 35%, rgba(255,255,255,.5) 50%, transparent 52%);
  animation: kelip 4s ease-in-out infinite alternate; }
/* Debu emas hanyut pelan ke atas di latar. Pola berulang tiap 40vh, jadi putarannya tidak terlihat melompat. */
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 140vh; z-index: -1; pointer-events: none;
  background-size: 100% 40vh; background-repeat: repeat-y; opacity: .85;
  background-image: radial-gradient(2.6px 2.6px at 9% 80%, rgba(247, 199, 108, .9) 50%, transparent 55%), radial-gradient(2px 2px at 24% 30%, rgba(247, 199, 108, .7) 50%, transparent 55%),
    radial-gradient(3px 3px at 41% 64%, rgba(247, 199, 108, .85) 50%, transparent 55%), radial-gradient(1.8px 1.8px at 57% 12%, rgba(116, 212, 192, .7) 50%, transparent 55%),
    radial-gradient(2.4px 2.4px at 71% 48%, rgba(247, 199, 108, .8) 50%, transparent 55%), radial-gradient(2px 2px at 86% 86%, rgba(143, 195, 255, .7) 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 95% 24%, rgba(247, 199, 108, .7) 50%, transparent 55%);
  animation: hanyut 34s linear infinite; }
@keyframes hanyut { from { transform: translateY(0); } to { transform: translateY(-40vh); } }
@keyframes kelip { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: .6; } body::before { animation: none; opacity: .5; } #app { transition: none; } }

/* ---------- mode ujian ---------- */
.ujian { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ujian-atas { display: flex; align-items: center; gap: 12px; }
.ujian-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ujian-judul b { font-size: 18px; line-height: 1.2; }
.ujian-judul span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.ujian-atas .btn { min-height: 44px; padding: 0 16px; }
.nomor { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.nomor button { height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--f-d); font-weight: 800; font-size: 17px; transition: transform var(--cepat) var(--lentur), background-color var(--cepat); }
.nomor button:hover { transform: translateY(-2px); }
.nomor button.isi { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.nomor button.ragu { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nomor button.kini { outline: 3px solid var(--paper); outline-offset: 2px; }
.nomor-ket { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.nomor-ket span { display: inline-flex; align-items: center; gap: 6px; }
.nomor-ket i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); background: var(--surface); }
.nomor-ket i.k-isi { background: var(--mint); border-color: var(--mint); }
.nomor-ket i.k-ragu { background: var(--gold); border-color: var(--gold); }
.ujian-kartu { display: flex; flex-direction: column; gap: 14px; }
.ujian-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ragu { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 800; font-size: 13.5px; }
.ragu[aria-pressed="true"] { background: var(--gold); border-color: #d9a43b; }
.ujian-aksi { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ujian-aksi .btn { flex: 1; min-width: 140px; }
.ujian-aksi .btn svg { width: 16px; height: 16px; }
.konfirmasi { border-top: 6px solid var(--gold); }

/* ---------- tips ringkasan ---------- */
.tips-kotak { border-radius: var(--r-l); padding: 20px; background: #ffe9c4; color: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.tips-kepala { display: flex; align-items: center; gap: 12px; }
.tips-kepala .eyebrow { color: #8a5a00; }
.tips-kepala h2 { font-size: 21px; }
.lampu { width: 54px; height: 54px; border-radius: 16px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 0 rgba(150, 105, 20, .25); animation: lampu-nyala 2.6s ease-in-out infinite; }
@keyframes lampu-nyala { 0%, 100% { box-shadow: 0 4px 0 rgba(150, 105, 20, .25), 0 0 0 0 rgba(247, 199, 108, .0); } 50% { box-shadow: 0 4px 0 rgba(150, 105, 20, .25), 0 0 0 10px rgba(247, 199, 108, .45); } }
.tips-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.tips-daftar li { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .78); border-radius: 14px; padding: 12px 14px; transition: transform var(--sedang) var(--lentur); }
.tips-daftar li:hover { transform: translateY(-3px) rotate(-.4deg); }
.tips-no { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--coral); color: var(--ink); font-family: var(--f-d); font-weight: 800; }
.tips-daftar p { font-size: 15px; line-height: 1.5; padding-top: 2px; }

/* ---------- kartu terkunci (tamu): berkabut, isi masih terlihat ---------- */
.kartu-warna.terkunci { background: #c3cde0; color: var(--ink); filter: none; border-color: rgba(255, 255, 255, .35); }
.kartu-warna.terkunci .ilu { filter: blur(3.5px) grayscale(.5); opacity: .75; }
.kartu-warna.terkunci .no-besar { color: var(--ink); }
.kartu-warna.terkunci .kecil, .kartu-warna.terkunci p { color: #3d4a6e; }
.kartu-warna.terkunci .pita { position: absolute !important; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 0; box-shadow: 0 6px 14px -6px rgba(4, 12, 30, .6); }
.kartu-warna.terkunci .pita svg { width: 20px; height: 20px; }
.kartu-warna.terkunci .tombol-kartu { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 rgba(10, 20, 45, .18); display: flex !important; }
@media (max-width: 560px) { .bab-list .kartu-warna.terkunci .ilu { grid-row: 1 / span 4; } .bab-list .kartu-warna.terkunci { padding-right: 16px; } .bab-list .kartu-warna.terkunci .ilu { margin-top: 36px; } }

/* ---------- tipografi lebih ringan: kartu terkunci & pop-up ---------- */
.kartu-warna.terkunci h3 { font-weight: 700; }
.kartu-warna.terkunci .tombol-kartu { font-weight: 700; font-size: 14px; gap: 8px; align-items: center; justify-content: center; white-space: nowrap; }
.kartu-warna.terkunci .tombol-kartu svg { width: 15px; height: 15px; flex: none; vertical-align: 0; }
.dlg h2 { font-weight: 700; font-size: 21px; }
.dlg > .muted { font-weight: 500; color: #5d6888; }
.dlg .btn { font-weight: 700; font-size: 15px; }
.dlg .btn-coral { box-shadow: none; }
.dlg .btn-coral:hover:not([disabled]) { transform: none; box-shadow: none; filter: brightness(1.04); }
.dlg .btn-coral:active:not([disabled]) { transform: scale(.98); box-shadow: none; }
.dlg-tombol { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.dlg-sekunder { background: transparent; color: var(--ink); border: 1.5px solid var(--paper-line); }
.dlg-sekunder:hover { background: #f6eedf; }
.dlg-catatan { font-weight: 500; line-height: 1.5; }
.dlg-catatan b { font-weight: 700; color: var(--ink); }
.dlg-ikon { width: 42px; height: 42px; border-radius: 12px; }
.dlg .field label { font-weight: 700; }
.dlg-link { font-weight: 700; }
/* Pindah dari pop-up penawaran ke login: login masuk halus dari kanan, tanpa kedip latar. */
dialog.alih[open] { animation: dlg-alih var(--sedang) var(--lentur); }
dialog.alih::backdrop { animation: none; }
@keyframes dlg-alih { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- akun: tombol tutup di kanan ---------- */
.akun-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tutup-bulat { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--paper); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(4, 12, 30, .7); transition: transform var(--cepat) var(--lentur); }
.tutup-bulat:hover { transform: rotate(90deg); }
.tutup-bulat svg { width: 16px; height: 16px; }

/* ---------- pop-up penawaran: tombol hijau + manfaat ---------- */
.btn-hijau { background: var(--mint); color: var(--ink); font-weight: 700; }
.btn-hijau:hover { filter: brightness(1.05); }
.dlg-ikon.hijau { background: #dcf3ec; color: #0f5a48; }
.dlg-manfaat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dlg-manfaat li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dlg-manfaat svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--ink); }

/* ---------- tombol & pop-up lembar latihan ---------- */
.btn-lembar { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; font-size: 13.5px; }
.btn-lembar:hover { background: rgba(255, 255, 255, .26); }
.pilih-jumlah { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pilih-jumlah legend { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; padding: 0; }
.pilih-jumlah label { flex: 1; }
.pilih-jumlah input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-jumlah span { display: grid; place-items: center; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--paper-line); background: var(--paper-2); font-family: var(--f-d); font-weight: 800; font-size: 18px; cursor: pointer; }
.pilih-jumlah input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pilih-jumlah input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.cek-kunci { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; cursor: pointer; }
.cek-kunci input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }

/* ---------- lembar cetak (A4) ---------- */
#cetak { display: none; }
/* ---------- Engine IPAS: gambar 3D, diagram bisa diketuk, alur, garis waktu, cerita, kelompok, memori ---------- */
img.emo { display: inline-block; vertical-align: middle; object-fit: contain; }
img.emo-i { width: 1.5em; height: 1.5em; margin: -0.2em 0.08em 0; }
.emo-baris { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: flex-end; }
.emo-baris figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-s); }
.emo-baris figcaption { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); text-align: center; max-width: 96px; }
.viz .bag { transition: opacity var(--cepat), filter var(--cepat); }
.viz svg.ada-sorot .bag:not(.sorot) { opacity: .38; }
.viz svg .bag.sorot { filter: drop-shadow(0 0 2px var(--coral)) drop-shadow(0 0 4px var(--coral)); }
.ketuk .bag { cursor: pointer; }
.ketuk svg .bag:hover { filter: drop-shadow(0 0 3px var(--sky)); }
.ketuk svg .bag.pilih { filter: drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 6px var(--coral)); opacity: 1; }
.ketuk svg .bag.benar { filter: drop-shadow(0 0 3px var(--ok)) drop-shadow(0 0 6px var(--ok)); }
.ketuk svg:has(.bag.pilih) .bag:not(.pilih) { opacity: .5; }
.ketuk.selesai svg .bag:not(.benar):not(.salah) { opacity: .3; }
.ketuk svg .bag.salah { filter: drop-shadow(0 0 3px var(--bad)) drop-shadow(0 0 6px var(--bad)); }
.ketuk :is(figure, div, li).bag { outline: 2px dashed transparent; outline-offset: 2px; }
.ketuk :is(figure, div, li).bag:hover { outline-color: var(--sky); }
.ketuk :is(figure, div, li).bag.pilih { outline: 3px solid var(--coral); }
.ketuk :is(figure, div, li).bag.benar { outline: 3px solid var(--ok); background: var(--ok-bg); }
.ketuk :is(figure, div, li).bag.salah { outline: 3px solid var(--bad); background: var(--bad-bg); }
.ketuk-pilihan { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); text-align: center; min-height: 20px; }
.alur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.alur-k { background: var(--paper); border: 2px solid var(--paper-line); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 78px; max-width: 132px; font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.25; }
.bag-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--f-d); font-weight: 800; font-size: 13px; }
.gw-no { position: absolute; left: -6px; }
.alur-k.ulang { border-style: dashed; color: var(--ink-muted); font-size: 12px; }
.alur-panah { color: var(--ink-muted); display: grid; place-items: center; }
.gwaktu { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; position: relative; }
.gwaktu::before { content: ""; position: absolute; left: 40px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--paper-line); }
.gwaktu li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; border-radius: 14px; position: relative; }
.gw-tahun { justify-self: center; background: var(--ink); color: var(--paper); font-family: var(--f-d); font-weight: 800; font-size: 15px; border-radius: var(--r-pill); padding: 2px 10px; min-width: 56px; text-align: center; }
.gw-teks { background: var(--paper); border: 2px solid var(--paper-line); border-radius: 14px; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.zona { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.zona-k { background: var(--paper); border: 2px solid var(--paper-line); border-top-width: 8px; border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--ink); }
.zona-k b { font-family: var(--f-d); font-size: 18px; }
.zona-jam { font-family: var(--f-d); font-weight: 800; font-size: 26px; line-height: 1.1; }
.zona-k small { font-size: 11px; font-weight: 600; color: var(--ink-muted); line-height: 1.3; }
.cerita { background: var(--paper-2); border: 2px dashed var(--paper-line); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.cerita > img.emo { flex: none; }
.cerita h3 { font-size: 15px; font-weight: 800; color: var(--coral-deep); margin-bottom: 4px; }
.cerita p { font-size: 15px; line-height: 1.55; color: var(--ink); }
.cerita p + p { margin-top: 6px; }
.kr-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 56px; padding: 8px; border: 2px dashed var(--paper-line); border-radius: 16px; background: var(--paper-2); align-items: center; }
.kr-pool:empty::after { content: "Semua sudah masuk keranjang"; font-size: 13px; font-weight: 700; color: var(--ink-muted); margin: 0 auto; }
.kr-item { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 12px; border-radius: var(--r-pill); border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.kr-item[aria-pressed="true"] { border-color: var(--ink); background: #f1f5ff; }
.kr-item.benar { border-color: var(--ok); background: var(--ok-bg); }
.kr-item.salah { border-color: var(--bad); background: var(--bad-bg); }
.kr-item .kunci-kecil { font-size: 11.5px; }
.kr-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kr-bin { border: 2px solid var(--paper-line); border-radius: 16px; background: var(--paper-2); padding: 8px; min-height: 104px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--ink); }
.kr-bin.siap { border-color: var(--coral); border-style: dashed; }
.kr-bin.di-atas { background: #fff1ec; }
.kr-judul { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.kr-isi { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .92; transform: translate(-50%, -60%) scale(1.06); box-shadow: var(--lift); }
/* Seret-lepas bersama: lab seret dan soal urut (engine/seret.js). */
.diseret { opacity: .35; }
.kr-item.goyang { animation: geleng .35s; border-color: var(--bad); background: var(--bad-bg); }
.sr-lab .kr-item { min-height: 48px; font-size: 15px; }
.sr-pool { justify-content: center; }
.sr-terkunci { touch-action: auto; }
.sr-urut { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sr-slot { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px; border: 2px dashed var(--paper-line); border-radius: 14px; background: var(--paper-2); color: var(--ink); }
.sr-slot.siap, .sr-target.siap { border-color: var(--coral); }
.sr-slot.di-atas, .sr-target.di-atas { background: #fff1ec; border-color: var(--coral); }
.sr-no { width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--f-d); font-weight: 800; flex: none; }
.sr-isi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.sr-cocok { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.sr-target { border: 2px dashed var(--paper-line); border-radius: 16px; background: var(--paper-2); padding: 10px 8px; min-height: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--ink); }
.sr-nama { font-size: 14px; }
.sr-target .sr-isi { flex: none; justify-content: center; min-height: 44px; }
.sr-kosong { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
/* Pegangan seret pada baris soal urut: hanya pegangan ini yang menahan gulir, jadi baris tetap bisa digulir dengan jari. */
.sr-pegang { width: 34px; height: 44px; display: grid; place-items: center; flex: none; margin-left: -4px; color: var(--ink-muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.op.di-atas { background: #fff1ec; border-color: var(--coral); }
.opsi.selesai .sr-pegang { visibility: hidden; }
.mem-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mem-bar span { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }
.mem { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.mem-k { position: relative; min-height: 92px; border: 0; padding: 0; background: none; perspective: 600px; color: var(--ink); }
.mem-isi { position: absolute; inset: 0; transition: transform var(--sedang) var(--lentur); transform-style: preserve-3d; }
.mem-k.buka .mem-isi, .mem-k.pas .mem-isi { transform: rotateY(180deg); }
.mem-muka, .mem-belakang { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mem-belakang { background: var(--ink); color: var(--gold); font-family: var(--f-d); font-weight: 800; font-size: 30px; border: 3px solid #2c3f6b; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12) 0 8px, transparent 9px), radial-gradient(circle at 72% 70%, rgba(255,255,255,.1) 0 6px, transparent 7px); }
.mem-muka { background: var(--paper-2); border: 3px solid var(--paper-line); transform: rotateY(180deg); font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; }
.mem-k.pas .mem-muka { border-color: var(--warna-pas, var(--ink)); }
.mem-k .mem-no { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; display: grid; place-items: center; background: var(--warna-pas, transparent); color: var(--ink); }
.mem-k.benar .mem-muka { border-color: var(--ok); background: var(--ok-bg); }
.mem-k.salah .mem-muka { border-color: var(--bad); background: var(--bad-bg); }
@media (prefers-reduced-motion: reduce) { .mem-isi { transition: none; } }

/* ---------- Engine bahasa: soal dengar, isi rumpang (bank kata), susun kalimat ---------- */
.dengar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dengar .btn { flex: none; }
.dengar-teks, .dengar-hasil { background: var(--paper-2); border: 2px dashed var(--paper-line); border-radius: 14px; padding: 10px 14px; font-size: 15px; color: var(--ink); }
.dengar-hasil { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dengar-hasil p { font-family: var(--f-d); font-size: 20px; font-weight: 800; line-height: 1.3; }
.kata { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px 16px; border-radius: var(--r-pill); border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 16px; user-select: none; -webkit-user-select: none; }
.kata:hover:not([disabled]) { border-color: var(--ink-muted); }
.kata.dipakai { opacity: .35; border-style: dashed; cursor: default; }
.kata.benar { border-color: var(--ok); background: var(--ok-bg); }
.kata.salah { border-color: var(--bad); background: var(--bad-bg); }
.kata[disabled] { cursor: default; }
.rm-kalimat { font-size: 19px; font-weight: 700; line-height: 2.5; color: var(--ink); background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 16px; padding: 8px 14px; }
.rm-lubang { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 88px; min-height: 40px; margin: 0 4px; padding: 2px 12px; border: 0; border-bottom: 3px solid var(--ink); border-radius: 10px 10px 0 0; background: #f1f5ff; color: var(--ink); font-weight: 800; font-size: 17px; vertical-align: middle; }
.rm-lubang.terpilih { background: #fff1ec; border-bottom-color: var(--coral); }
.rm-lubang.benar { border-bottom-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.rm-lubang.salah { border-bottom-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.rm-lubang[disabled] { cursor: default; }
.rm-bank, .sn-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px; border: 2px dashed var(--paper-line); border-radius: 16px; background: var(--paper-2); }
.sn-jawab { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-height: 68px; padding: 10px; border: 2px solid var(--paper-line); border-radius: 16px; background: var(--paper-2); }
.sn-jawab:empty::after { content: "Ketuk kata di bawah untuk mulai menyusun"; font-size: 13.5px; font-weight: 700; color: var(--ink-muted); margin: auto; }
.lab-panggung { background: var(--paper-2); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lab-tombol { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lab-info { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink); border-left: 5px solid var(--mint); }
.lab-info b { color: var(--ink); }
.lab-pilih { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lab-pilih button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--paper-line); background: var(--paper-2); color: var(--ink); font-weight: 700; font-size: 12.5px; min-width: 72px; }
.lab-pilih button[aria-pressed="true"] { border-color: var(--ink); background: #f1f5ff; }
.lab-meter { width: 100%; height: 14px; border-radius: var(--r-pill); background: #e8edf5; overflow: hidden; }
.lab-meter i { display: block; height: 100%; border-radius: inherit; background: var(--mint); transition: width var(--sedang) var(--lentur); }
.lab input[type="range"] { width: 100%; accent-color: var(--coral); }
/* Lab interaktif Kelas 3 (sudut, penggaris, blok): seret di gambar, angka besar, lencana, baris geser dengan tombol − dan +. */
.lab-lencana { display: inline-block; background: var(--mint); color: var(--ink); border-radius: var(--r-pill); padding: 4px 14px; font-weight: 700; font-size: 14.5px; }
.lab-seret { display: flex; justify-content: center; width: 100%; user-select: none; -webkit-user-select: none; }
.lab-seret svg { display: block; max-width: 100%; height: auto; }
.lab-seret.bisa-seret { touch-action: none; cursor: grab; }
.lab-seret.bisa-seret:active { cursor: grabbing; }
.lab-baca { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lab-baca .d { font-size: 44px; line-height: 1; font-weight: 800; color: var(--ink); }
.lab-atur { display: flex; align-items: center; gap: 8px; }
.lab-atur .btn-ikon, .blok-baris .btn-ikon { background: var(--paper-line); color: var(--ink); font-size: 24px; font-weight: 800; }
.lab-atur .btn-ikon[disabled], .blok-baris .btn-ikon[disabled] { opacity: .4; }
/* Lab blok: tiga baris tempat berwarna (ratusan mint, puluhan biru, satuan emas, sama dengan warna blok), gambar blok menempel di atas di HP. */
.blok-baris { display: flex; align-items: center; gap: 10px; }
.blok-chip { flex: 1; min-width: 0; border-radius: var(--r-s); padding: 10px 14px; font-weight: 800; color: var(--ink); }
.blok-angka { width: 44px; text-align: center; font-size: 32px; line-height: 1; font-weight: 800; color: var(--ink); }
.blok-gambar { display: flex; justify-content: center; align-items: center; min-height: 120px; width: 100%; }
.blok-gambar svg { display: block; max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .lab-lekat { display: flex; flex-direction: column; gap: 14px; }
  .lab-lekat > :first-child { position: sticky; top: 62px; z-index: 5; background: var(--paper); padding: 4px 0 8px; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
}

@media print {
  @page { size: A4; margin: 14mm 14mm 18mm; }
  html, body { background: #fff !important; color: #1b2a4e; }
  body { background-image: none !important; font-size: 11pt; }
  body > *:not(#cetak), body::before, body::after { display: none !important; }
  #cetak { display: block !important; font-family: var(--f-ui); line-height: 1.45; }
  #cetak * { animation: none !important; transition: none !important; }
  .ls-kop { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; border-bottom: 2.5px solid #1b2a4e; padding-bottom: 8px; margin-bottom: 12px; }
  .ls-merek { font-size: 8.5pt; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c95a4a; }
  .ls-kop h1 { font-size: 17pt; margin: 2px 0; }
  .ls-sub { font-size: 9.5pt; color: #55618a; font-weight: 600; }
  .ls-isi-nama { display: grid; gap: 6px; font-size: 9.5pt; font-weight: 700; min-width: 190px; }
  .ls-isi-nama span { border-bottom: 1px solid #9aa3bd; padding-bottom: 2px; }
  .ls-soal { break-inside: avoid; padding: 10px 0 12px; border-bottom: 1px dashed #c9d0e0; display: flex; flex-direction: column; gap: 8px; }
  .ls-kepala-soal { display: flex; gap: 10px; align-items: flex-start; }
  .ls-nomor { width: 24px; height: 24px; border-radius: 50%; background: #1b2a4e; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 10pt; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ls-teks { font-weight: 600; padding-top: 2px; }
  .ls-dengar { margin-left: 34px; font-size: 10pt; border-left: 3px solid #c9d0e0; padding-left: 8px; }
  #cetak .viz-box { align-items: flex-start; }
  #cetak .viz { background: #fff; border: 1px solid #dfe4ee; padding: 4px; max-width: 60%; margin-left: 34px; }
  #cetak .viz svg { max-height: 135px; width: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ls-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding-left: 34px; }
  .ls-ops.gambar { grid-template-columns: repeat(4, 1fr); }
  .ls-ops.gambar svg { width: 100%; height: auto; max-height: 110px; }
  .ls-op { display: flex; gap: 8px; align-items: center; }
  .ls-bulat, .ls-kotak, .ls-no { width: 20px; height: 20px; flex: none; border: 1.5px solid #1b2a4e; display: grid; place-items: center; font-size: 9pt; font-weight: 800; }
  .ls-bulat { border-radius: 50%; } .ls-kotak { border-radius: 4px; } .ls-no { border: 0; }
  .ls-kotak.isi { width: 26px; height: 22px; }
  .ls-petunjuk { padding-left: 34px; font-size: 9.5pt; font-style: italic; color: #55618a; }
  .ls-tabel { margin-left: 34px; border-collapse: collapse; width: calc(100% - 34px); font-size: 10pt; }
  .ls-tabel th, .ls-tabel td { border: 1px solid #c9d0e0; padding: 5px 8px; text-align: left; }
  .ls-tabel td.c { width: 54px; text-align: center; } .ls-tabel td.c .ls-kotak { margin: 0 auto; }
  .ls-isian { padding-left: 34px; font-weight: 700; }
  .ls-garis { display: inline-block; width: 160px; border-bottom: 1.5px solid #1b2a4e; margin: 0 6px; }
  .ls-garis.panjang { width: calc(100% - 12px); }
  .ls-kalimat { padding-left: 34px; font-size: 12pt; line-height: 2.4; font-weight: 600; }
  .ls-lubang { display: inline-block; min-width: 72px; border-bottom: 1.5px solid #1b2a4e; margin: 0 4px; }
  .ls-bank { display: flex; flex-wrap: wrap; gap: 6px 8px; padding-left: 34px; }
  .ls-kata { border: 1.5px solid #1b2a4e; border-radius: 999px; padding: 1px 12px; font-weight: 700; }
  .ls-jodoh { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding-left: 34px; }
  .ls-jodoh > div { display: grid; gap: 6px; }
  .ls-kunci { break-before: page; }
  .ls-kunci h2 { font-size: 15pt; border-bottom: 2.5px solid #1b2a4e; padding-bottom: 6px; margin-bottom: 8px; }
  .ls-bahas { break-inside: avoid; padding: 6px 0; border-bottom: 1px dashed #c9d0e0; font-size: 10pt; }
  .ls-bahas ol { margin: 4px 0 0; padding-left: 20px; }
  .ls-jebakan { margin-top: 4px; font-size: 9.5pt; color: #a8322b; }
  #cetak .viz-cap { text-align: left; margin-left: 34px; }
  .ls-penutup { margin-top: 14px; text-align: center; font-size: 8pt; color: #8a93ad; break-inside: avoid; }
}

/* ---------- Beranda v3 (28 Okt 2026): panel datar dan terang, tanpa glow ----------
   Permintaan owner: biru gelap terlalu dark; glow di sisi panel diganti datar + bayangan di bawah.
   Panel isi memakai kertas es biru; kartu manfaat dan statistik memakai warna pastel nuansa (--t-*). */
.hero { background: #34508a; border: 0; box-shadow: var(--bayang-panel); }
.kartu-warna { box-shadow: var(--bayang-panel); }
a.kartu-warna:hover, a.kartu-warna:focus-visible { box-shadow: var(--lift); }
.lanjut, .akses-band { box-shadow: var(--bayang-panel); }

.band-isi { background: var(--paper); color: var(--ink); border: 0; box-shadow: var(--bayang-panel); }
.band-isi .eyebrow { color: var(--biru-tinta); }
.isi-besar b { color: var(--coral-deep); }
.isi-besar span, .isi-hari, .gr-kelas, .legenda, .isi-mini span { color: var(--ink-muted); }
.isi-hari b, .gr-judul span { color: var(--coral-deep); }
.gr-lintasan { border-color: var(--paper-line); }
.gr-baris:hover, .gr-baris.pilih { background: var(--paper-2); }
.gr-angka, .gr-rincian li, .gr-judul b { color: var(--ink); }
.legenda .leg { border-color: var(--paper-line); color: var(--ink-muted); }
.legenda .leg:hover { background: var(--paper-2); }
.legenda .leg.pilih { background: var(--paper-2); color: var(--ink); border-color: var(--biru-tinta); }
.legenda .legenda-putus i { border-color: var(--ink-muted); }
.gr-detail { background: var(--paper-2); border-color: var(--paper-line); }
.gr-ajak, .gr-detail p:not(.gr-ajak) { color: var(--ink-muted); }
.gr-buka { background: var(--ink); color: #fff; }
.isi-mini { border-top-color: var(--paper-line); }
.isi-mini div:nth-child(1) b { color: var(--ok); } .isi-mini div:nth-child(2) b { color: var(--biru-tinta); } .isi-mini div:nth-child(3) b { color: var(--coral-deep); }

.stat { border: 0; box-shadow: var(--bayang-panel); color: var(--ink); }
div.stat:nth-of-type(1) { background: var(--t-senja); } div.stat:nth-of-type(2) { background: var(--t-mawar); } div.stat:nth-of-type(3) { background: var(--t-toska); }
.stat b { color: var(--ink) !important; }
.stat span { color: #3d4a6e; }

.manfaat { border: 0; color: var(--ink); box-shadow: var(--bayang-panel); }
.manfaat:nth-child(1) { background: var(--t-senja); } .manfaat:nth-child(2) { background: var(--t-toska); }
.manfaat:nth-child(3) { background: var(--t-biru); } .manfaat:nth-child(4) { background: var(--t-ungu); }
.manfaat:hover { background-blend-mode: normal; filter: brightness(1.04); }
.manfaat[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--ink), var(--bayang-panel); }
.manfaat:nth-child(n) .ik { background: rgba(255, 255, 255, .62); }
.manfaat .mf-teks, .manfaat .mf-tutup { color: #3d4a6e; }
.manfaat .mf-lebih { color: var(--ink); border-top-color: rgba(27, 42, 78, .28); }


/* ---------- Patch 28 Okt 2026 (malam): menu bawah baru + benda lintas saat mengerjakan soal ---------- */
/* Menu bawah: pilihan aktif = kaca terang berbingkai toska (bukan emas, supaya tidak menabrak kartu Ujian Bab); ikon dua warna yang bergerak saat aktif. */
.navbawah a { gap: 3px; font-size: 12px; position: relative; }
.navbawah a[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #fff !important; font-weight: 800; box-shadow: none; }
.navbawah a[aria-current="page"]::after { content: ""; position: absolute; bottom: 4px; width: 16px; height: 3px; border-radius: 3px; background: var(--kicker); }
.navbawah a[aria-current="page"] { padding-bottom: 8px; }
.navbawah svg { width: 28px; height: 28px; overflow: visible; }
.navbawah a:not([aria-current]) svg { opacity: .85; }
.nv-isi { fill: rgba(255, 255, 255, .14); }
.nv-gelembung { fill: var(--mint); opacity: .9; }
.nv-cecair { fill: var(--mint); opacity: .85; }
.nv-sinar { stroke: var(--gold); opacity: 0; }
.nv-bohlam { fill: var(--gold); }
.nv-pin { fill: var(--coral); transform-box: fill-box; transform-origin: 50% 100%; }
.nv-cek { stroke: var(--mint); stroke-dasharray: 20; stroke-dashoffset: 0; }
@keyframes nv-naik { 0% { transform: translateY(2px); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes nv-kedip { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes nv-loncat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes nv-gambar { 0% { stroke-dashoffset: 20; } 45%, 100% { stroke-dashoffset: 0; } }
.navbawah a[aria-current="page"] .nv-gelembung { animation: nv-naik 1.9s ease-in infinite; transform-box: fill-box; }
.navbawah a[aria-current="page"] .nv-gelembung:nth-of-type(2) { animation-delay: -.7s; }
.navbawah a[aria-current="page"] .nv-gelembung:nth-of-type(3) { animation-delay: -1.3s; }
.navbawah a[aria-current="page"] .nv-sinar { animation: nv-kedip 1.8s ease-in-out infinite; }
.navbawah a[aria-current="page"] .nv-pin { animation: nv-loncat 1.6s ease-in-out infinite; }
.navbawah a[aria-current="page"] .nv-cek { animation: nv-gambar 2.6s ease-out infinite; }
.navbawah a:not([aria-current="page"]) .nv-gelembung { opacity: .5; }

/* Benda lintas: roket, satelit, dan komet lewat pelan di latar HANYA saat anak mengerjakan soal (body[data-lat="fokus"]).
   Kecil, samar, di belakang isi, tidak bisa diketuk. Tiap benda bergerak sebentar lalu diam di luar layar (siklus panjang). */
.lt { display: none; position: absolute; left: 0; pointer-events: none; opacity: .55; will-change: transform; }
.lt svg { display: block; width: 100%; height: auto; overflow: visible; }
body[data-lat="fokus"] .lt { display: block; }
.lt-roket { top: calc(100lvh * .22); width: 74px; animation: lt-roket 150s linear 18s infinite backwards; }
.lt-satelit { top: calc(100lvh * .68); width: 64px; animation: lt-satelit 190s linear 70s infinite backwards; }
.lt-komet { top: calc(100lvh * .1); width: 70px; animation: lt-komet 230s linear 120s infinite backwards; }
@keyframes lt-roket { 0% { transform: translate(-14vw, 0) rotate(-8deg); } 28% { transform: translate(112vw, -60px) rotate(-8deg); } 100% { transform: translate(112vw, -60px) rotate(-8deg); } }
@keyframes lt-satelit { 0% { transform: translate(112vw, 0) rotate(10deg); } 30% { transform: translate(-16vw, 40px) rotate(14deg); } 100% { transform: translate(-16vw, 40px) rotate(14deg); } }
@keyframes lt-komet { 0% { transform: translate(-14vw, -20px) rotate(24deg); } 12% { transform: translate(112vw, 46vh) rotate(24deg); } 100% { transform: translate(112vw, 46vh) rotate(24deg); } }
@media (prefers-reduced-motion: reduce) { .lt { display: none !important; } }
/* Kaca menu bawah: putih smoked (lihat patch 29 Okt 2026 sore di akhir berkas). */
.navbawah nav { background: rgba(232, 241, 255, .5); }

/* ---------- Patch 29 Okt 2026: menu bawah kaca smoked tanpa bingkai; ikon kartu beranda = ikon menu bawah; buka kartu lebih halus ---------- */
.manfaat .ik { transition: transform .5s var(--lentur); }
.manfaat[aria-expanded="true"] .ik { transform: scale(1.1) rotate(-5deg); }
.manfaat:active { transform: scale(.985); }
.manfaat .nv-isi { fill: rgba(27, 42, 78, .08); }
.manfaat .nv-sinar { animation: nv-kedip 1.8s ease-in-out infinite; }
.manfaat .nv-pin { animation: nv-loncat 1.6s ease-in-out infinite; }
.manfaat .nv-cek { animation: nv-gambar 2.6s ease-out infinite; }
.manfaat .nv-gelembung { animation: nv-naik 1.9s ease-in infinite; transform-box: fill-box; }
.manfaat .nv-gelembung:nth-of-type(2) { animation-delay: -.7s; }
.manfaat .nv-gelembung:nth-of-type(3) { animation-delay: -1.3s; }
/* Isi tambahan membuka dengan tinggi yang meluncur (0fr ke 1fr), bukan muncul tiba-tiba. */
.manfaat .mf-lebih { display: grid; grid-template-rows: 0fr; margin-top: -6px; opacity: 0; visibility: hidden; transition: grid-template-rows .5s var(--lentur), margin-top .5s var(--lentur), opacity .3s ease, visibility 0s .5s; }
.manfaat .mf-isi { overflow: hidden; min-height: 0; }
.manfaat .mf-isi > span { display: block; padding-top: 8px; margin-top: 4px; border-top: 1px dashed rgba(27, 42, 78, .28); transform: translateY(-6px); transition: transform .5s var(--lentur); }
.manfaat[aria-expanded="true"] .mf-lebih { grid-template-rows: 1fr; margin-top: 0; opacity: 1; visibility: visible; transition: grid-template-rows .5s var(--lentur), margin-top .5s var(--lentur), opacity .4s ease .08s, visibility 0s; }
.manfaat[aria-expanded="true"] .mf-isi > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .manfaat .nv-sinar, .manfaat .nv-pin, .manfaat .nv-cek, .manfaat .nv-gelembung { animation: none; }
  .manfaat .nv-sinar { opacity: .8; }
  .manfaat .mf-lebih, .manfaat .mf-isi > span, .manfaat .ik { transition: none; }
}

/* ---------- Patch 29 Okt 2026 (sore): menu bawah putih smoked ----------
   Kaca putih berkabut + blur kuat, jadi kartu misi biru yang lewat di belakangnya terlihat jelas bedanya.
   Teks dan ikon memakai --ink supaya terbaca di atas kaca terang. Tanpa token baru. */
.navbawah nav {
  background: linear-gradient(180deg, rgba(240, 246, 255, .56), rgba(222, 234, 252, .46));
  backdrop-filter: blur(28px) saturate(1.1) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.1) brightness(1.08);
  box-shadow: 0 14px 34px -14px rgba(4, 12, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.navbawah a { color: var(--ink) !important; }
.navbawah a:not([aria-current]) svg { opacity: .9; }
.navbawah a:not([aria-current]):hover { background: rgba(255, 255, 255, .4); }
.navbawah a[aria-current="page"] { background: rgba(255, 255, 255, .62); color: var(--ink) !important; }
.navbawah a[aria-current="page"]::after { background: var(--coral-deep); }
.navbawah .nv-isi { fill: rgba(27, 42, 78, .1); }
.navbawah .nv-gelembung, .navbawah .nv-cecair, .navbawah .nv-cek { fill: #3fae98; stroke: #3fae98; }
.navbawah .nv-cecair, .navbawah .nv-gelembung { stroke: none; }
.navbawah .nv-cek { fill: none; }
.navbawah .nv-sinar { stroke: #c98a1e; }

/* ---------- Beranda hidup (A), 29 Okt 2026: sapaan jam, api streak, kartu muncul saat digulir, kilau Lanjutkan ---------- */
.statistik .sapa { grid-column: 1 / -1; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); padding: 0 4px 2px; }
.api-ayun { display: inline-block; vertical-align: -2px; margin-right: 4px; transform-origin: 50% 90%; animation: api-ayun 2.4s ease-in-out infinite; }
.api-ayun svg { width: 15px; height: 15px; }
@keyframes api-ayun { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.12); } }
.sbl { opacity: 0; transform: translateY(18px); }
.sbl.sbl-ok { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s var(--lentur); transition-delay: calc(var(--i, 0) * 70ms); }
.lanjut { position: relative; }
.lanjut::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--sky) 55%, transparent) 50%, transparent 58%) no-repeat; background-size: 260% 100%;
  animation: kilau-lanjut 5.5s ease-in-out 1.2s infinite; }
@keyframes kilau-lanjut { 0% { background-position: 120% 0; } 28%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .sbl { opacity: 1; transform: none; } .lanjut::after { display: none; } }

/* Menu bawah di atas kartu putih (Ringkasan): cincin tipis dan bayangan lebih tegas supaya batasnya terlihat. */
.navbawah nav { box-shadow: 0 14px 30px -10px rgba(4, 12, 30, .62), 0 0 0 1px rgba(27, 42, 78, .16), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* ---------- Beranda hidup (B), 29 Okt 2026: Berang berkedip, bergoyang, melompat saat diketuk ---------- */
button.hero-berang { position: relative; display: block; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.hero-berang img { display: block; width: 100%; height: auto; }
.hb-lompat, .hb-isi { display: block; position: relative; }
.hb-isi { transform-origin: 50% 100%; animation: berang-goyang 7s ease-in-out infinite; }
.hb-lompat.hop { animation: berang-hop .6s var(--lentur); }
.kdp { position: absolute; display: block; border-radius: 50%; background: #c98a5e; transform: scaleY(0); transform-origin: 50% 0; transition: transform .06s ease-out; pointer-events: none; }
.kdp::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 22%; height: 2px; border-radius: 2px; background: #3b2418; }
.k1 { left: 35.1%; top: 22.8%; width: 5.6%; height: 7.9%; }
.k2 { left: 47.3%; top: 30.4%; width: 4.7%; height: 7.1%; }
.hb-isi.kedip .kdp { transform: scaleY(1); }
.hb-bicara { position: absolute; left: 2%; top: -6%; max-width: 62%; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: left; padding: 8px 12px; border-radius: 12px; box-shadow: var(--bayang-panel); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .25s ease, transform .3s var(--lentur); pointer-events: none; }
.hb-bicara::after { content: ""; position: absolute; left: 26px; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.hb-bicara.tampil { opacity: 1; transform: none; }
@keyframes berang-goyang { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg) scale(1.012); } }
@keyframes berang-hop { 0% { transform: none; } 22% { transform: translateY(4px) scale(1.05, .93); } 52% { transform: translateY(-26px) scale(.97, 1.05); } 80% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hb-isi { animation: none; } .hb-lompat.hop { animation: none; } .hb-bicara { transition: none; } }


/* ---- Dashboard orang tua (29 Okt 2026, izin owner). Halaman akun; hanya token yang sudah ada. ---- */
.dash { display: grid; gap: 18px; }
.dash-tile-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-tile { border-radius: var(--r-s); padding: 12px 14px; color: var(--ink); }
.dash-tile.t1 { background: var(--t-senja); } .dash-tile.t2 { background: var(--t-toska); } .dash-tile.t3 { background: var(--t-biru); } .dash-tile.t4 { background: var(--t-mawar); }
.dash-tile b { display: block; font-family: var(--f-d); font-size: 26px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-tile span { font-size: 13px; font-weight: 700; color: var(--ink); }
.dash-terakhir { margin: -6px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.dash-blok { display: grid; gap: 10px; }
.dash-blok h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.dash-blok h3.dash-sub { margin-top: 8px; }
.dash-minggu { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--r-s); padding: 12px 10px 8px; }
.dash-hari { display: grid; grid-template-rows: 16px 96px 18px; justify-items: center; gap: 4px; }
.dash-angka { font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-bar { width: 100%; max-width: 34px; height: 96px; display: flex; align-items: flex-end; }
.dash-bar i.d-total { display: flex; align-items: flex-end; width: 100%; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--biru-tinta) 28%, transparent); overflow: hidden; }
.dash-bar i.d-benar { display: block; width: 100%; background: var(--ok); }
.dash-bar i.d-nol { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--paper-line); }
.dash-nama { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.dash-hari.kini .dash-nama { color: var(--biru-tinta); font-weight: 800; }
.dash-legenda { display: flex; gap: 14px; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.dash-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.dash-legenda i.d-benar { background: var(--ok); } .dash-legenda i.d-total { background: color-mix(in srgb, var(--biru-tinta) 28%, transparent); }
.dash-kalimat { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.dash-daftar { display: grid; gap: 8px; }
.dash-mapel { background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--r-s); padding: 12px 14px; display: grid; gap: 8px; }
.dash-mapel-atas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-mapel small { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.dash-prog { height: 10px; border-radius: var(--r-pill); background: var(--paper-line); overflow: hidden; }
.dash-prog i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--ok); transform-origin: left center; }
.dash-bab { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--r-s); padding: 10px 14px; color: var(--ink); text-decoration: none; transition: transform var(--cepat) var(--lentur), box-shadow var(--cepat); }
.paper a.dash-bab { color: var(--ink); }
.dash-bab:hover { transform: translateY(-1px); box-shadow: var(--bayang-panel); }
.dash-bab:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.dash-bab-teks { display: grid; gap: 2px; min-width: 0; }
.dash-bab-teks b { font-size: 15px; font-weight: 700; }
.dash-bab-teks small { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.dash-pil { flex: none; font-size: 13px; font-weight: 800; border-radius: var(--r-pill); padding: 3px 10px; font-variant-numeric: tabular-nums; }
.dash-pil.tinggi { background: var(--ok-bg); color: var(--ok); }
.dash-pil.rendah { background: var(--t-senja); color: var(--ink); }
.dash-pil.netral { background: var(--paper); color: var(--ink); border: 1px solid var(--paper-line); }
.dash-kosong { background: var(--paper-2); border: 1px dashed var(--paper-line); border-radius: var(--r-s); padding: 16px; }
.dash-kosong b { font-size: 17px; } .dash-kosong p { margin: 6px 0 0; color: var(--ink-muted); }
.dash-catatan { margin: 0; font-size: 13px; }
@media (max-width: 560px) { .dash-tile-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-tile b { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .dash-bab { transition: none; } .dash-bab:hover { transform: none; } }

/* ---- Dashboard: kelompok lipat + animasi (29 Okt 2026, permintaan owner). Hanya token; gerak hanya transform/opacity. ---- */
.dash-rincian { display: grid; gap: 10px; }
.dash-akor h3 { margin: 0; }
.dash-akor-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px 10px 14px; background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--r-s); color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow var(--cepat), border-color var(--cepat), transform var(--cepat) var(--lentur); }
.dash-akor-btn:hover { box-shadow: var(--bayang-panel); }
.dash-akor-btn:active { transform: scale(.985); }
.dash-akor-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.dash-akor.buka .dash-akor-btn { border-color: var(--biru-tinta); }
.dash-akor-judul { flex: 1; min-width: 0; }
.dash-panah { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--biru-tinta); transition: transform .4s var(--lentur); }
.dash-akor.buka .dash-panah { transform: rotate(180deg); }
/* Isi membuka dengan tinggi yang meluncur (0fr ke 1fr); tertutup = tidak bisa difokus (visibility). */
.dash-akor-isi { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .45s var(--lentur), opacity .3s ease, visibility 0s .45s; }
.dash-akor-dalam { overflow: hidden; min-height: 0; }
.dash-akor-isi-pad { padding: 10px 4px 4px; }
.dash-akor.buka .dash-akor-isi { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .45s var(--lentur), opacity .4s ease .05s, visibility 0s; }
.dash-semua-kuat { margin: 0; font-size: 14px; }

/* Animasi masuk: hanya bila JS menandai .siap-anim (tidak ada bila gerak dikurangi); mulai (.jalan) saat dashboard terlihat. */
@keyframes dash-muncul { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dash-tumbuh { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dash-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes dash-isi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dash-tile.t2 { --i: 1; } .dash-tile.t3 { --i: 2; } .dash-tile.t4 { --i: 3; }
.dash-bar i.d-total { transform-origin: 50% 100%; }
.siap-anim:not(.jalan) .dash-tile, .siap-anim:not(.jalan) .dash-akor, .siap-anim:not(.jalan) .dash-angka,
.siap-anim:not(.jalan) .dash-legenda, .siap-anim:not(.jalan) .dash-kalimat, .siap-anim:not(.jalan) .dash-terakhir { opacity: 0; }
.siap-anim:not(.jalan) .dash-bar i.d-total { transform: scaleY(0); }
.siap-anim.jalan .dash-tile { animation: dash-muncul .55s var(--lentur) both; animation-delay: calc(var(--i, 0) * 90ms); }
.siap-anim.jalan .dash-terakhir { animation: dash-pudar .5s ease .45s both; }
.siap-anim.jalan .dash-bar i.d-total { animation: dash-tumbuh .8s var(--lentur) both; animation-delay: calc(380ms + var(--i, 0) * 80ms); }
.siap-anim.jalan .dash-angka { animation: dash-pudar .4s ease both; animation-delay: calc(900ms + var(--i, 0) * 80ms); }
.siap-anim.jalan .dash-legenda { animation: dash-pudar .5s ease 1s both; }
.siap-anim.jalan .dash-kalimat { animation: dash-pudar .5s ease 1.15s both; }
.siap-anim.jalan .dash-akor { animation: dash-muncul .5s var(--lentur) both; }
.siap-anim.jalan .dash-akor:nth-of-type(1) { animation-delay: .9s; } .siap-anim.jalan .dash-akor:nth-of-type(2) { animation-delay: 1s; } .siap-anim.jalan .dash-akor:nth-of-type(3) { animation-delay: 1.1s; }
.siap-anim.jalan .dash-hari.kini .d-total { animation: dash-tumbuh .8s var(--lentur) calc(380ms + var(--i, 0) * 80ms) both, dash-denyut 3.2s ease-in-out 2.2s infinite; }
@keyframes dash-denyut { 0%, 100% { filter: none; } 50% { filter: brightness(1.12); } }
/* Batang progres mapel terisi tiap kali kelompoknya dibuka. */
.dash-akor.buka .dash-prog i { animation: dash-isi .9s var(--lentur) .2s both; }
@media (prefers-reduced-motion: reduce) {
  .dash-akor-isi, .dash-panah, .dash-akor-btn { transition: none; }
  .dash-akor.buka .dash-prog i, .siap-anim.jalan * { animation: none !important; }
}

/* ---------- Beranda tamu (29 Okt 2026, permintaan owner): janji, bab gratis, cara membeli. Hanya token. ---------- */
.pita-gratis { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-l); background: var(--t-toska); color: var(--ink); box-shadow: var(--bayang-panel); }
.pita-gratis b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.pita-gratis span { font-size: 14.5px; font-weight: 600; }
.judul-bagian.kecil h2 { font-size: 20px; }

/* ---------- Beranda anggota (29 Okt 2026, permintaan owner): Berang kecil beraura, Lanjutkan di atas, titik mapel, Cara belajarnya lipat. Hanya token. ---------- */
.sapa-kartu { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--bayang-panel); }
.sapa-kartu h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.sapa-kartu p { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.sapa-teks { min-width: 0; }
button.berang-mini { width: 78px; flex: none; z-index: 2; }
.berang-mini::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 82%, var(--surface)); }
.berang-mini .hb-bicara { left: 0; top: calc(100% + 8px); width: max-content; max-width: min(240px, 72vw); z-index: 6; }
.berang-mini .hb-bicara::after { bottom: auto; top: -6px; left: 30px; }
.lanjut .lj-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--biru-tinta); }
.lanjut .lj-panah { margin-left: auto; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--ink); }
.lanjut .lj-panah .panah { margin: 0; }
.titik-mapel { position: absolute; top: 16px; left: 18px; display: flex; gap: 6px; }
.titik-mapel i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); }
.kartu-kelas .titik-mapel + h3 { margin-top: 0; }
.cara-lipat > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; border-radius: var(--r-m); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; }
.cara-lipat > summary::-webkit-details-marker { display: none; }
.cara-lipat > summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2.5px solid var(--kicker); border-bottom: 2.5px solid var(--kicker); transform: rotate(45deg); transition: transform var(--sedang) var(--lentur); }
.cara-lipat[open] > summary::after { transform: rotate(-135deg); }
.cara-lipat > summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.cara-isi { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.cara-isi .muted-navy { font-size: 14.5px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .cara-lipat > summary::after { transition: none; } }

/* ---------- Halaman Privasi dan Syarat (30 Okt 2026) ----------
   Layar baru dari komponen yang ada: kartu baca .paper, kepala halaman, tombol. Hanya token. */
.legal { max-width: 720px; margin: 0 auto; }
.legal-tanggal { color: var(--text-muted); font-size: 14px; margin-top: -6px; }
.legal .paper { gap: 20px; }
.legal .ringkas { background: var(--paper-2); border-radius: var(--r-m); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.legal-bagian { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal code { font-size: .92em; background: var(--paper-2); border-radius: 6px; padding: 1px 5px; }
.legal .btn { align-self: flex-start; }
.legal-catatan { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.dlg-catatan a { color: var(--biru-tinta); font-weight: 700; }
footer.kaki .kaki-hukum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
footer.kaki .kaki-hukum a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }