:root{--ungu:#563f7a;--krem:#fcfbf8;--teks:#201c23;--oranye:#f4952f;--hijau:#3ea65a;--teal:#2f8f8a;--garis:#e5e5e5;--lembut:#f4effa}
*{box-sizing:border-box}body{margin:0;font-family:Poppins,"Segoe UI",system-ui,sans-serif;background:var(--krem);color:var(--teks);line-height:1.6}
a{color:var(--ungu)}header.top{background:var(--ungu);color:#fff;padding:.6rem 1rem;display:flex;gap:1rem;align-items:center;position:sticky;top:0;z-index:5}
header.top a{color:#fff;text-decoration:none;font-weight:700}header.top .judul{flex:1;font-size:.9rem;opacity:.9}
.layout{display:grid;grid-template-columns:250px 1fr;max-width:1320px;margin:0 auto}
nav.menu{padding:1rem;border-right:1px solid var(--garis);position:sticky;top:48px;align-self:start;max-height:calc(100vh - 48px);overflow:auto;font-size:.82rem}
nav.menu a{display:block;padding:.18rem .5rem;border-radius:8px;text-decoration:none;color:var(--teks)}nav.menu a:hover{background:var(--lembut)}nav.menu a.aktif{background:var(--ungu);color:#fff}
nav.menu h4{margin:.9rem 0 .2rem;font-size:.72rem;text-transform:uppercase;color:#7a6c8a}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.35rem;background:#ccc}.dot.ok{background:var(--hijau)}.dot.wait{background:var(--oranye)}
main{padding:1.5rem 1.8rem 4rem;min-width:0}h1{font-size:1.9rem;margin:.2rem 0 .5rem;color:var(--ungu)}
h2{margin:1.8rem 0 .6rem;color:var(--ungu);font-size:1.25rem;border-bottom:2px solid var(--lembut);padding-bottom:.2rem}h3{margin:.1rem 0 .4rem;font-size:1rem}
.lead{font-size:1.02rem}.crumb{color:#7a6c8a;font-size:.85rem;margin:0}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:1rem 1.2rem;margin:.8rem 0}.lembut{background:var(--lembut)}
.cerita p{font-size:1.05rem;margin:0}.dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.9rem;margin:.8rem 0}.frames figure{margin:0}
.frames img{width:100%;border-radius:10px;border:1px solid var(--garis);display:block;aspect-ratio:3/2;object-fit:cover;background:#eee}
.frames figure.draf img{opacity:.75;filter:saturate(.6)}figcaption{font-size:.82rem;color:#5d5368;margin-top:.3rem}.warn{color:#a95d00}
ol.level{padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.6rem}
ol.level li{background:#fff;border:1px solid var(--garis);border-radius:10px;padding:.6rem .8rem}ol.level p{margin:.2rem 0}
.lama{color:#6b6276;font-size:.86rem;background:#faf8f3;border-radius:8px;padding:.4rem .6rem}details summary{cursor:pointer;font-size:.8rem;color:#7a6c8a}
.kecil{font-size:.8rem;color:#7a6c8a}.ganti{background:#fff3cd;border:1px solid #e0c36a;border-radius:8px;padding:.5rem .8rem;margin:.5rem 0;font-size:.9rem}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.88rem;border-radius:12px;overflow:hidden}th,td{border:1px solid var(--garis);padding:.45rem .6rem;text-align:left;vertical-align:top}th{background:var(--lembut);color:var(--ungu)}
.nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.nav a{background:var(--ungu);color:#fff;padding:.6rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem}
@media(max-width:820px){.layout{grid-template-columns:1fr}nav.menu{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--garis)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.peta svg{width:100%;height:auto;border-radius:12px;border:1px solid var(--garis);display:block}
.peta .t text{font:700 15px Poppins,system-ui,sans-serif;fill:#fff;text-anchor:middle;pointer-events:none}
.peta .t circle{stroke:#fff;stroke-width:3}.peta a:hover circle{stroke:#201c23;stroke-width:4}
.pil{display:inline-block;padding:.15rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;margin:.1rem .25rem .1rem 0}
.putus{background:#e6f5ea;border:1px solid #9fd4ae;border-radius:8px;padding:.5rem .8rem;margin:.5rem 0;font-size:.9rem}
.tog{display:flex;gap:.5rem;margin:.6rem 0}.tog button{border:1px solid var(--ungu);background:#fff;color:var(--ungu);border-radius:999px;padding:.4rem 1rem;cursor:pointer;font-weight:600}.tog button.on{background:var(--ungu);color:#fff}
.peta .t text{font-size:20px}
.wils{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}.wils a{text-decoration:none;color:var(--teks);font-size:.88rem}.wils img{width:100%;border-radius:10px;border:1px solid var(--garis);display:block;aspect-ratio:16/9;object-fit:cover;margin-bottom:.3rem}
ol.daftar{columns:2;padding-left:1.2rem}ol.daftar li{break-inside:avoid;margin-bottom:.5rem;list-style:none}
@media(max-width:820px){ol.daftar{columns:1}}
.tabelwrap{overflow-x:auto}table.audit td{font-size:.82rem}table.audit tr.besar td:first-child{border-left:4px solid #e0763a}table.audit tr.kecil td:first-child{border-left:4px solid #e0c36a}table.audit tr.ok td:first-child{border-left:4px solid #5bb36f}
.st{display:inline-block;border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:700}.st.besar{background:#fde4d6;color:#a3461a}.st.kecil{background:#fff3cd;color:#8a6a00}.st.ok{background:#e6f5ea;color:#1f7a3d}
code{background:#f4effa;padding:0 .3rem;border-radius:4px}
ol.lvls{grid-template-columns:1fr}
li.lvl{padding:.8rem 1rem}
.lvl-head{color:var(--ungu)}
.lvl-cerita{font-size:.95rem}
.lvl-konsep{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:.5rem 0;font-size:.86rem;background:#faf8f3;border-radius:8px;padding:.6rem .8rem}
.tag-a,.tag-o{display:inline-block;border-radius:999px;padding:.05rem .55rem;font-size:.72rem;font-weight:700;margin-right:.25rem}
.tag-a{background:#e6f5ea;color:#1f7a3d}.tag-o{background:#f1edf7;color:#563f7a}
.lvl-shots{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lvl-shots figure{margin:0}.lvl-shots img{width:100%;border-radius:8px;border:1px solid var(--garis);display:block}
.lvl-shots figcaption{font-size:.75rem;color:#7a6c8a}
.noshot{display:grid;place-items:center;aspect-ratio:16/10;border:1px dashed #cbbfd9;border-radius:8px;font-size:.8rem;color:#7a6c8a}
.konsep p{margin:.3rem 0 0;font-size:.9rem}
@media(max-width:760px){.lvl-konsep,.lvl-shots{grid-template-columns:1fr}}
/* Audit bahasa instruksi orang tua */
.tk{display:inline-block;border-radius:999px;padding:.05rem .55rem;font-size:.72rem;font-weight:700;white-space:nowrap}
.tk-tinggi{background:#fde2e1;color:#9b1c1c}.tk-sedang{background:#fff3cd;color:#7a5200}.tk-rendah{background:#eef0f3;color:#4b5563}
table.audit{width:100%;border-collapse:collapse;font-size:.84rem;margin:.5rem 0 1rem;background:#fff}
table.audit th,table.audit td{border:1px solid var(--garis);padding:.45rem .55rem;vertical-align:top;text-align:left}
table.audit th{background:#f6f3fa;color:var(--ungu)}table.audit td.usul{background:#f3faf5}
table.audit q{color:#5b4b6b}.audit-misi{margin:1.4rem 0;scroll-margin-top:4rem}.audit-misi h3{margin-bottom:.3rem}
.tujuan{font-size:.86rem;background:#faf8f3;border-radius:8px;padding:.5rem .7rem}
.filter{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 1rem}.filter button{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:.35rem .9rem;cursor:pointer;font:inherit;font-size:.85rem}
.filter button.on{background:var(--ungu);color:#fff;border-color:var(--ungu)}
.audit-mini ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.86rem}.audit-mini li{margin:.25rem 0}
@media (max-width:760px){table.audit thead{display:none}table.audit tr{display:block;border:1px solid var(--garis);border-radius:8px;margin:.5rem 0}table.audit td{display:block;border:0;border-bottom:1px solid var(--garis)}}