/* Invesmentpedia — Versi Belajar (buku interaktif bergambar)
   Dimuat hanya di halaman /belajar/<modul>. Komponen didokumentasikan di
   tools/belajar/PANDUAN.md. Semua kelas berawalan jelas agar tidak bentrok dengan app.css. */

:root{
  --bj-tinta:#16213e; --bj-tinta-2:#3b4766; --bj-redup:#6b7590;
  --bj-kertas:#fffaf1; --bj-kertas-2:#fff3dc; --bj-garis:#ecdcc0;
  --bj-navy:#0A2647; --bj-biru:#2C74B3; --bj-biru-muda:#e6f0fb;
  --bj-emas:#f2a900; --bj-emas-muda:#fff1c7;
  --bj-hijau:#16936a; --bj-hijau-muda:#e2f6ee;
  --bj-merah:#d9434b; --bj-merah-muda:#fde8e8;
  --bj-ungu:#6c4bd8; --bj-ungu-muda:#efeafe;
  --bj-oranye:#ef7d22;
  --bj-r:16px; --bj-bayang:0 6px 0 rgba(22,33,62,.08), 0 10px 30px rgba(22,33,62,.08);
  --bj-judul:'Baloo 2', 'Trebuchet MS', sans-serif;
  --bj-teks:'Atkinson Hyperlegible', 'Segoe UI', Roboto, sans-serif;
  --bj-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
}

body.halaman-belajar{background:var(--bj-kertas)}
body.halaman-belajar main{padding-top:0}
body.halaman-belajar main > .bungkus{max-width:1180px}

.bj{font-family:var(--bj-teks);color:var(--bj-tinta);font-size:1.075rem;line-height:1.75}
.bj p{margin:0 0 1em}
.bj strong{color:var(--bj-navy)}
.bj a{color:var(--bj-biru);text-decoration:underline;text-underline-offset:3px}
.bj h1,.bj h2,.bj h3,.bj h4{font-family:var(--bj-judul);color:var(--bj-tinta);line-height:1.15;letter-spacing:-.2px}
.bj h2{font-size:clamp(1.6rem,3.6vw,2.15rem);margin:0 0 14px}
.bj h3{font-size:1.3rem;margin:26px 0 8px}
.bj h4{font-size:1.1rem;margin:0 0 6px}
.bj ul,.bj ol{margin:0 0 1em 1.3em}
.bj li{margin:.25em 0}
.bj mark{background:linear-gradient(transparent 55%, var(--bj-emas-muda) 55%);color:inherit;padding:0 2px}
.bj .angka{font-family:var(--bj-mono);font-weight:700;letter-spacing:-.3px}
.bj .kecil{font-size:.9rem;color:var(--bj-redup)}

/* ── bilah alat ───────────────────────────────────────────── */
.bj-alat{position:sticky;top:62px;z-index:40;background:rgba(255,250,241,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bj-garis);margin:0 -20px 0;padding:10px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bj-alat .bj-tbl-isi{font-family:var(--bj-judul);font-weight:700;border:2px solid var(--bj-tinta);background:#fff;
  border-radius:999px;padding:4px 14px;cursor:pointer;color:var(--bj-tinta);font-size:.95rem}
.bj-alat .bj-modul{font-family:var(--bj-mono);font-size:.78rem;color:var(--bj-redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.bj-tingkat{margin-left:auto;display:flex;align-items:center;gap:8px}
.bj-tingkat span{font-family:var(--bj-mono);font-size:.7rem;letter-spacing:1px;color:var(--bj-redup)}
.bj-tingkat .pil{display:flex;background:#fff;border:2px solid var(--bj-tinta);border-radius:999px;padding:2px}
.bj-tingkat button{border:0;background:transparent;font-family:var(--bj-judul);font-weight:700;font-size:.9rem;
  padding:3px 12px;border-radius:999px;cursor:pointer;color:var(--bj-tinta)}
.bj-tingkat button[aria-pressed="true"]{background:var(--bj-ungu);color:#fff}
.bj-progres{position:absolute;left:0;bottom:-1px;height:3px;background:var(--bj-emas);width:0;transition:width .15s}

/* laci daftar isi */
.bj-laci{position:fixed;inset:0;z-index:90;display:none}
.bj-laci.buka{display:block}
.bj-laci .tirai{position:absolute;inset:0;background:rgba(10,20,40,.35)}
.bj-laci nav{position:absolute;left:0;top:0;bottom:0;width:min(340px,86vw);background:#fff;padding:22px 18px;overflow:auto;
  box-shadow:4px 0 30px rgba(0,0,0,.2);animation:bjLaci .25s ease}
.bj-laci h4{font-family:var(--bj-judul);margin-bottom:10px}
.bj-laci ol{list-style:none;margin:0;padding:0;counter-reset:bab}
.bj-laci li{counter-increment:bab;margin:2px 0}
.bj-laci a{display:flex;gap:10px;padding:8px 10px;border-radius:10px;color:var(--bj-tinta);text-decoration:none;font-weight:600}
.bj-laci a::before{content:counter(bab,decimal-leading-zero);font-family:var(--bj-mono);color:var(--bj-ungu);font-size:.8rem;padding-top:3px}
.bj-laci a:hover,.bj-laci a.kini{background:var(--bj-ungu-muda)}
@keyframes bjLaci{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}

/* ── pembuka ──────────────────────────────────────────────── */
.bj-buka{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:42px 0 26px}
.bj-buka .kicker-bj{font-family:var(--bj-mono);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--bj-merah);margin-bottom:10px}
.bj-buka h1{font-size:clamp(2.3rem,6vw,3.9rem);margin:0 0 14px;line-height:1.02}
.bj-buka h1 em{font-style:normal;color:var(--bj-ungu);background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--bj-ungu-muda) 6px 12px);padding:0 6px;border-radius:8px}
.bj-buka .lead{font-size:1.18rem;color:var(--bj-tinta-2)}
.bj-buka .seni{background:#fff;border:2px solid var(--bj-tinta);border-radius:24px;box-shadow:var(--bj-bayang);padding:12px;min-height:220px}
.bj-buka .seni svg{width:100%;height:auto;display:block}
.bj-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.bj-meta span{font-family:var(--bj-mono);font-size:.76rem;background:#fff;border:1.5px solid var(--bj-garis);border-radius:999px;padding:3px 10px;color:var(--bj-tinta-2)}

/* ── bab ──────────────────────────────────────────────────── */
.bj-isi{max-width:860px;margin:0 auto}
.bab{padding:34px 0 10px;border-top:2px dashed var(--bj-garis);scroll-margin-top:130px}
.bab:first-of-type{border-top:0}
.bab > .nomor{display:inline-block;font-family:var(--bj-mono);font-weight:700;font-size:.8rem;color:#fff;background:var(--bj-tinta);
  border-radius:8px;padding:2px 9px;margin-bottom:10px;letter-spacing:1px}
.lebar{width:min(1100px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}

/* kotak-kotak */
.tujuan,.analogi,.intinya,.tahu,.awas,.dalam,.contoh{border-radius:var(--bj-r);padding:18px 20px 6px;margin:22px 0;position:relative}
.tujuan{background:#fff;border:2px solid var(--bj-tinta);box-shadow:var(--bj-bayang)}
.tujuan h3{margin:0 0 8px;font-size:1.15rem}
.tujuan ul{list-style:none;margin-left:0}
.tujuan li{padding-left:30px;position:relative}
.tujuan li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:6px;background:var(--bj-hijau-muda);border:2px solid var(--bj-hijau)}
.tujuan li::after{content:"";position:absolute;left:5px;top:.72em;width:8px;height:4px;border-left:2.5px solid var(--bj-hijau);border-bottom:2.5px solid var(--bj-hijau);transform:rotate(-45deg)}
.analogi{background:var(--bj-biru-muda);border-left:6px solid var(--bj-biru)}
.analogi::before{content:"Bayangkan…";display:block;font-family:var(--bj-judul);font-weight:800;color:var(--bj-biru);margin-bottom:4px}
.analogi[data-label]::before{content:attr(data-label)}
.intinya{background:var(--bj-emas-muda);border:2px solid var(--bj-emas)}
.intinya::before{content:"💡 Intinya";display:block;font-family:var(--bj-judul);font-weight:800;color:#8a5a00;margin-bottom:4px}
.tahu{background:var(--bj-ungu-muda);border:2px dashed var(--bj-ungu)}
.tahu::before{content:"Tahukah kamu?";display:inline-block;font-family:var(--bj-judul);font-weight:800;color:#fff;background:var(--bj-ungu);
  border-radius:999px;padding:0 12px;margin-bottom:8px;transform:rotate(-2deg)}
.awas{background:var(--bj-merah-muda);border-left:6px solid var(--bj-merah)}
.awas::before{content:"⚠️ Hati-hati";display:block;font-family:var(--bj-judul);font-weight:800;color:var(--bj-merah);margin-bottom:4px}
.awas[data-label]::before{content:"⚠️ " attr(data-label)}
.contoh{background:#fff;border:2px solid var(--bj-garis)}
.contoh > h4{color:var(--bj-hijau)}
.dalam{background:#f6f7fb;border:2px solid #d5d9e8}
.dalam::before{content:"🔬 Mode Mendalam";display:block;font-family:var(--bj-mono);font-size:.75rem;letter-spacing:1px;color:var(--bj-ungu);margin-bottom:6px;font-weight:700}
.bj[data-tingkat="mudah"] .dalam{display:none}
.bj[data-tingkat="mudah"] .hanya-dalam{display:none}
.bj[data-tingkat="dalam"] .hanya-mudah{display:none}
.dalam-ajak{font-size:.88rem;color:var(--bj-redup);border:1.5px dashed #c9cde0;border-radius:12px;padding:8px 12px;margin:14px 0;cursor:pointer;background:#fff}
.bj[data-tingkat="dalam"] .dalam-ajak{display:none}

/* rumus */
.rumus{background:#fff;border:2px solid var(--bj-tinta);border-radius:20px;padding:16px 20px 10px;margin:22px 0;box-shadow:var(--bj-bayang)}
.rumus-tex{font-size:1.18rem;overflow-x:auto;padding:4px 0}
.rumus-arti{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 6px;padding:12px 0 0;border-top:1.5px dashed var(--bj-garis)}
.rumus-arti dt{font-weight:700;text-align:right}
.rumus-arti dd{margin:0;color:var(--bj-tinta-2)}
.rumus-kata{background:var(--bj-hijau-muda);border-radius:12px;padding:10px 14px;margin:10px 0 6px}
.rumus-kata::before{content:"Dalam bahasa sehari-hari: ";font-weight:700;color:var(--bj-hijau)}

/* tabel */
.tabel{overflow-x:auto;margin:18px 0}
.bj table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border:2px solid var(--bj-tinta);border-radius:14px;overflow:hidden;font-size:.98rem}
.bj th{background:var(--bj-tinta);color:#fff;font-family:var(--bj-judul);font-weight:700;padding:9px 12px;text-align:left}
.bj td{padding:8px 12px;border-top:1px solid #eee5d3}
.bj tr:nth-child(even) td{background:#fffcf6}
.bj td.k,.bj th.k{text-align:right;font-family:var(--bj-mono);font-size:.92rem}

/* istilah */
.bj dfn{font-style:normal;border-bottom:2px dotted var(--bj-ungu);cursor:help;position:relative}
.bj dfn .arti{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(260px,80vw);
  background:var(--bj-tinta);color:#fff;font-size:.86rem;line-height:1.45;padding:8px 11px;border-radius:10px;pointer-events:none;
  z-index:20;font-weight:400;animation:bjMuncul .15s ease}
.bj dfn:hover .arti,.bj dfn:focus .arti,.bj dfn.buka .arti{display:block}
.kamus{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;border:2px solid var(--bj-tinta);border-radius:14px;overflow:hidden;background:#fff;margin:16px 0}
.kamus dt,.kamus dd{padding:9px 14px;border-top:1px solid #eee5d3;margin:0}
.kamus dt{font-family:var(--bj-judul);font-weight:700;background:var(--bj-kertas-2)}
.kamus dt:first-of-type,.kamus dt:first-of-type + dd{border-top:0}

/* versus & mitos-fakta */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:22px 0}
.versus > div{background:#fff;border:2px solid var(--bj-tinta);border-radius:18px;padding:16px 18px 6px;box-shadow:var(--bj-bayang)}
.versus > .vs{align-self:center;font-family:var(--bj-judul);font-weight:800;font-size:1.4rem;background:var(--bj-merah);color:#fff;border:0;border-radius:50%;
  width:52px;height:52px;display:grid;place-items:center;padding:0;box-shadow:none}
.versus .kiri{border-color:var(--bj-merah)} .versus .kanan{border-color:var(--bj-hijau)}
.versus .kiri h4{color:var(--bj-merah)} .versus .kanan h4{color:var(--bj-hijau)}
.mitos-fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}
.mitos-fakta[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.kartu-balik{perspective:900px;cursor:pointer;min-height:190px}
.kartu-balik .dalamnya{position:relative;width:100%;height:100%;min-height:190px;transition:transform .55s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.kartu-balik.terbalik .dalamnya{transform:rotateY(180deg)}
.kartu-balik .muka,.kartu-balik .belakang{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:16px 18px;border:2px solid var(--bj-tinta);
  display:flex;flex-direction:column;justify-content:center}
.kartu-balik .muka{background:var(--bj-merah-muda)}
.kartu-balik .belakang{background:var(--bj-hijau-muda);transform:rotateY(180deg)}
.kartu-balik .muka::before{content:"MITOS";font-family:var(--bj-mono);font-weight:700;color:var(--bj-merah);font-size:.78rem;letter-spacing:2px;margin-bottom:6px}
.kartu-balik .belakang::before{content:"FAKTA";font-family:var(--bj-mono);font-weight:700;color:var(--bj-hijau);font-size:.78rem;letter-spacing:2px;margin-bottom:6px}
.kartu-balik .muka::after{content:"ketuk untuk membalik ↻";position:absolute;right:14px;bottom:10px;font-size:.75rem;color:var(--bj-redup)}
.kartu-balik p{margin:0;font-size:1rem;line-height:1.5}

/* langkah (contoh bertahap) */
.langkah{list-style:none;margin:20px 0;padding:0;counter-reset:lk;background:#fff;border:2px solid var(--bj-tinta);border-radius:20px;overflow:hidden;box-shadow:var(--bj-bayang)}
.langkah-judul{background:var(--bj-hijau);color:#fff;font-family:var(--bj-judul);font-weight:700;padding:10px 18px;font-size:1.08rem}
.langkah > li{counter-increment:lk;padding:14px 18px 6px 62px;position:relative;border-top:1.5px dashed var(--bj-garis);margin:0}
.langkah > li::before{content:counter(lk);position:absolute;left:16px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--bj-hijau-muda);
  color:var(--bj-hijau);font-family:var(--bj-judul);font-weight:800;display:grid;place-items:center;border:2px solid var(--bj-hijau)}
.langkah > li.tersembunyi{display:none}
.langkah > li.baru{animation:bjMuncul .45s ease both}
.langkah-kendali{display:flex;gap:8px;padding:10px 18px 14px;border-top:1.5px dashed var(--bj-garis);flex-wrap:wrap}

/* tombol */
.bj-tbl{font-family:var(--bj-judul);font-weight:700;font-size:1rem;border:2px solid var(--bj-tinta);background:var(--bj-emas);color:var(--bj-tinta);
  border-radius:999px;padding:6px 18px;cursor:pointer;box-shadow:0 3px 0 var(--bj-tinta);transition:transform .08s, box-shadow .08s;text-decoration:none;display:inline-block}
.bj-tbl:hover{transform:translateY(-1px);text-decoration:none}
.bj-tbl:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bj-tinta)}
.bj-tbl.kedua{background:#fff}
.bj-tbl.ungu{background:var(--bj-ungu);color:#fff}

/* komik */
.komik{background:#fff;border:2px solid var(--bj-tinta);border-radius:20px;padding:14px;margin:26px 0;box-shadow:var(--bj-bayang)}
.komik-judul{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.komik-judul b{font-family:'Bangers', var(--bj-judul);font-size:1.5rem;letter-spacing:1px;color:var(--bj-tinta);font-weight:400}
.komik-judul span{font-family:var(--bj-mono);font-size:.72rem;color:var(--bj-redup);letter-spacing:1px}
.komik-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.komik-panel[data-n="3"],.komik-panel[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.komik-panel[data-n="1"]{grid-template-columns:1fr;max-width:460px;margin:0 auto}
.panel{border:3px solid var(--bj-tinta);border-radius:6px;background:#fdfdff;display:flex;flex-direction:column;overflow:hidden;position:relative}
.panel .cakap-cakap{padding:10px 10px 4px;display:flex;flex-direction:column;gap:8px}
.cakap{margin:0 !important;background:#fff;border:2px solid var(--bj-tinta);border-radius:14px;padding:6px 11px 7px;font-size:.93rem;line-height:1.42;position:relative}
.cakap::before{content:attr(data-nama);display:block;font-family:var(--bj-mono);font-size:.66rem;letter-spacing:1px;color:var(--bj-redup);text-transform:uppercase}
.cakap::after{content:"";position:absolute;bottom:-9px;left:26px;width:14px;height:14px;background:#fff;border-right:2px solid var(--bj-tinta);border-bottom:2px solid var(--bj-tinta);transform:rotate(45deg)}
.cakap.kanan::after{left:auto;right:26px}
.cakap.batin{border-style:dashed;border-radius:22px}
.cakap.batin::after{border:2px dashed var(--bj-tinta);border-radius:50%;width:10px;height:10px;transform:none;bottom:-12px}
.adegan{margin-top:auto;position:relative;background:linear-gradient(#f1f4ff,#f1f4ff)}
.adegan svg{display:block;width:100%;height:auto}
.sfx{position:absolute;font-family:'Bangers', var(--bj-judul);font-size:1.6rem;color:var(--bj-merah);-webkit-text-stroke:1px var(--bj-tinta);transform:rotate(-8deg);right:10px;bottom:8px;letter-spacing:1px;animation:bjSfx 1.6s ease-in-out infinite}
.sfx.kiri{right:auto;left:10px}
@keyframes bjSfx{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.12)}}

/* ilustrasi */
.ilustrasi{background:#fff;border:2px solid var(--bj-tinta);border-radius:20px;padding:12px;margin:22px 0;box-shadow:var(--bj-bayang)}
.ilustrasi svg{display:block;width:100%;height:auto}
.ilustrasi figcaption{font-size:.9rem;color:var(--bj-redup);padding:8px 6px 2px;text-align:center}

/* animasi bawaan untuk SVG ilustrasi */
.anim-melayang{animation:bjMelayang 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.anim-denyut{animation:bjDenyut 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.anim-putar{animation:bjPutar 8s linear infinite;transform-box:fill-box;transform-origin:center}
.anim-goyang{animation:bjGoyang 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.anim-kedip{animation:bjKedip 1.4s steps(2) infinite}
.anim-jatuh{animation:bjJatuh 2.6s ease-in infinite;transform-box:fill-box}
.anim-naik{animation:bjNaik 2.6s ease-out infinite;transform-box:fill-box}
.anim-garis{stroke-dasharray:var(--panjang,1000);stroke-dashoffset:var(--panjang,1000)}
.terlihat .anim-garis,.anim-garis.terlihat{animation:bjGaris 2.2s ease forwards}
.anim-tumbuh{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.terlihat .anim-tumbuh,.anim-tumbuh.terlihat{animation:bjTumbuh .9s cubic-bezier(.3,1.3,.5,1) forwards}
.anim-tunda-1{animation-delay:.15s !important}.anim-tunda-2{animation-delay:.3s !important}.anim-tunda-3{animation-delay:.45s !important}
.anim-tunda-4{animation-delay:.6s !important}.anim-tunda-5{animation-delay:.75s !important}.anim-tunda-6{animation-delay:.9s !important}
@keyframes bjMelayang{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bjDenyut{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bjPutar{to{transform:rotate(360deg)}}
@keyframes bjGoyang{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes bjKedip{50%{opacity:.25}}
@keyframes bjJatuh{0%{transform:translateY(-14px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes bjNaik{0%{transform:translateY(16px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-22px);opacity:0}}
@keyframes bjGaris{to{stroke-dashoffset:0}}
@keyframes bjTumbuh{to{transform:scaleY(1)}}
@keyframes bjMuncul{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.muncul{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.muncul.terlihat{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .muncul{opacity:1;transform:none;transition:none}
  [class*="anim-"]{animation:none !important}
  .anim-tumbuh{transform:none}.anim-garis{stroke-dashoffset:0}
}

/* ── widget interaktif ────────────────────────────────────── */
.widget{background:#fff;border:2px solid var(--bj-tinta);border-radius:22px;margin:26px 0;box-shadow:var(--bj-bayang);overflow:hidden}
.w-kepala{display:flex;align-items:center;gap:10px;background:var(--bj-tinta);color:#fff;padding:10px 18px}
.w-kepala b{font-family:var(--bj-judul);font-size:1.1rem;font-weight:700}
.w-kepala span{margin-left:auto;font-family:var(--bj-mono);font-size:.68rem;letter-spacing:1.5px;background:var(--bj-emas);color:var(--bj-tinta);border-radius:999px;padding:2px 10px}
.w-badan{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;padding:16px 18px}
.w-badan.satu{grid-template-columns:1fr}
.w-masukan label{display:block;font-weight:700;font-size:.92rem;margin:0 0 2px}
.w-masukan .baris-geser{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.w-masukan input[type=range]{flex:1;accent-color:var(--bj-ungu);min-width:0}
.w-masukan output{font-family:var(--bj-mono);font-weight:700;font-size:.88rem;background:var(--bj-ungu-muda);color:var(--bj-ungu);border-radius:8px;padding:2px 8px;min-width:96px;text-align:right;white-space:nowrap}
.w-hasil{display:flex;flex-direction:column;gap:10px;min-width:0}
.w-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.w-angka div{background:var(--bj-kertas);border:1.5px solid var(--bj-garis);border-radius:14px;padding:8px 12px}
.w-angka small{display:block;font-size:.76rem;color:var(--bj-redup);line-height:1.3}
.w-angka strong{font-family:var(--bj-mono);font-size:1.12rem;color:var(--bj-tinta);display:block;word-break:break-word}
.w-angka .hijau strong{color:var(--bj-hijau)} .w-angka .merah strong{color:var(--bj-merah)} .w-angka .ungu strong{color:var(--bj-ungu)}
.w-grafik{position:relative;width:100%}
.w-grafik svg{width:100%;height:auto;display:block;overflow:visible}
.w-grafik text{font-family:var(--bj-mono);font-size:11px;fill:var(--bj-redup)}
.w-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem}
.w-legenda i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.w-pesan{background:var(--bj-hijau-muda);border-radius:12px;padding:9px 13px;font-size:.95rem}
.w-pesan.merah{background:var(--bj-merah-muda)}
.w-kaki{padding:0 18px 14px;font-size:.82rem;color:var(--bj-redup)}
.w-chip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.w-chip input{width:74px;font-family:var(--bj-mono);font-size:.9rem;border:2px solid var(--bj-garis);border-radius:10px;padding:4px 6px;text-align:right}
.w-chip input.neg{color:var(--bj-merah)} .w-chip input.pos{color:var(--bj-hijau)}

/* cek pemahaman */
.cek{background:#fff;border:2px solid var(--bj-tinta);border-radius:22px;margin:28px 0;overflow:hidden;box-shadow:var(--bj-bayang)}
.cek-kepala{display:flex;justify-content:space-between;align-items:center;background:var(--bj-ungu);color:#fff;padding:10px 18px}
.cek-kepala b{font-family:var(--bj-judul);font-size:1.15rem}
.cek-kepala span{font-family:var(--bj-mono);font-size:.8rem;background:#fff;color:var(--bj-ungu);border-radius:999px;padding:2px 10px}
.cek .soal{padding:14px 18px 8px;border-top:1.5px dashed var(--bj-garis)}
.cek .soal:first-of-type{border-top:0}
.cek .soal > p:first-child{font-weight:700}
.cek .pilihan{display:grid;gap:8px;margin:8px 0}
.cek .pilihan button{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;font-size:.98rem;background:var(--bj-kertas);border:2px solid var(--bj-garis);
  border-radius:12px;padding:8px 12px;cursor:pointer;color:var(--bj-tinta);line-height:1.45}
.cek .pilihan button b{font-family:var(--bj-mono);background:#fff;border:1.5px solid var(--bj-garis);border-radius:6px;padding:0 6px;font-size:.85rem}
.cek .pilihan button:hover:not(:disabled){border-color:var(--bj-ungu)}
.cek .pilihan button.benar{background:var(--bj-hijau-muda);border-color:var(--bj-hijau)}
.cek .pilihan button.salah{background:var(--bj-merah-muda);border-color:var(--bj-merah)}
.cek .pilihan button:disabled{cursor:default}
.cek .alasan{display:none;background:var(--bj-kertas-2);border-radius:12px;padding:9px 13px;font-size:.95rem}
.cek .alasan.tampil{display:block;animation:bjMuncul .35s ease}
.cek .alasan b.ok{color:var(--bj-hijau)} .cek .alasan b.no{color:var(--bj-merah)}

/* penutup */
.bj-tutup{background:var(--bj-tinta);color:#fff;border-radius:26px;padding:28px 26px;margin:40px 0 10px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.bj-tutup h2{color:#fff;margin-bottom:6px}
.bj-tutup p{color:#d9def0;margin:0}
.bj-tutup .aksi{display:flex;flex-direction:column;gap:10px}
.bj-navbab{display:flex;justify-content:space-between;gap:12px;margin:18px 0 0;flex-wrap:wrap}
.bj-navbab a{font-family:var(--bj-judul);font-weight:700;background:#fff;border:2px solid var(--bj-tinta);border-radius:16px;padding:10px 16px;color:var(--bj-tinta);text-decoration:none;max-width:48%}
.bj-navbab a small{display:block;font-family:var(--bj-mono);font-size:.7rem;color:var(--bj-redup);font-weight:400}
.bj-navbab a.lanjut{margin-left:auto;text-align:right}

@media (max-width:760px){
  body.halaman-belajar header.atas{position:relative}
  .bj dfn .arti{position:fixed;left:16px;right:16px;bottom:16px;top:auto;transform:none;width:auto;max-width:none;font-size:.95rem;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
  .bj-alat{top:0;padding:8px 16px;gap:8px}
  .bj-tingkat span{display:none}
  .bj{font-size:1.02rem}
  .bj-buka{grid-template-columns:1fr;padding-top:26px}
  .w-badan{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
  .mitos-fakta[data-n="4"]{grid-template-columns:1fr}
  .komik-panel,.komik-panel[data-n="3"],.komik-panel[data-n="6"]{grid-template-columns:1fr}
  .versus > .vs{justify-self:center}
  .bj-tutup{grid-template-columns:1fr}
  .bj-alat .bj-modul{display:none}
  .bj-navbab a{max-width:100%}
  .lebar{width:auto;margin-left:0;transform:none}
}
@media print{
  .bj-alat,.bj-laci,.widget .w-masukan{display:none}
  .bj .dalam{display:block !important}
  .muncul{opacity:1;transform:none}
}