:root{--ungu:#563f7a;--krem:#fcfbf8;--teks:#201c23;--oranye:#f4952f;--hijau:#3ea65a;--biru:#3f78e0;--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:.95rem}
.layout{display:grid;grid-template-columns:230px 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:.85rem}
nav.menu a{display:block;padding:.2rem .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:.75rem;text-transform:uppercase;color:#7a6c8a}.dot{display:inline-block;width:.6rem;height:.6rem;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 .3rem;color:var(--ungu)}h2{margin:2rem 0 .6rem;color:var(--ungu);font-size:1.35rem;border-bottom:2px solid var(--lembut);padding-bottom:.2rem}h3{margin:.2rem 0}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:14px;padding:1rem 1.2rem;margin:1rem 0}.lembut{background:var(--lembut)}
.pil{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;margin:.1rem .2rem .1rem 0;background:var(--lembut);color:var(--ungu)}.pil.I{background:#e4f5ea;color:#1f7a3d}.pil.L{background:#e6efff;color:#2455b5}.pil.U{background:#fff1de;color:#a95d00}
.status{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600}.status.ok{background:#dff3e5;color:#1f7a3d}.status.wait{background:#fff1de;color:#a95d00}.status.todo{background:#eee;color:#666}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.8rem;margin:.8rem 0}.frames figure{margin:0}.frames img{width:100%;border-radius:10px;border:1px solid var(--garis);display:block}
.kosong{aspect-ratio:16/9;border:2px dashed #cbbfd9;border-radius:10px;padding:.8rem;font-size:.85rem;color:#6b5d7a;background:#faf7ff;overflow:auto}
.level{border-left:6px solid var(--ungu)}.level h3 small{color:#7a6c8a;font-weight:400}table{border-collapse:collapse;width:100%;font-size:.9rem}td,th{border:1px solid var(--garis);padding:.4rem .6rem;text-align:left;vertical-align:top}th{background:var(--lembut)}
.dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.catatan{font-size:.88rem;color:#4a3d58}.nav-bawah{display:flex;justify-content:space-between;margin-top:2.5rem}
.tokoh img{width:100%;border-radius:10px}.waktu{font-weight:700;color:var(--oranye)}
details summary{cursor:pointer;font-weight:600;color:var(--ungu)}
@media(max-width:860px){.layout{grid-template-columns:1fr}nav.menu{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--garis)}}