:root {
    --ink: #1c1730;
    --muted: #5c5470;
    --paper: #f6f1e8;
    --card: #fffdf9;
    --line: #eadfce;
    --plum: #1b1430;
    --gold: #e3a008;
    --rumus: #fff3c4;
    --teori: #e5fbf7;
    --peneliti: #ffe0f3;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Outfit, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
a { color: #5b3df5; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 560; }
button, input, select, textarea { font: inherit; }
.app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar { background: var(--plum); color: #f6f1e8; padding: 22px 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 28px; line-height: 1; }
.brand small, .sisi-user small, .hero-dosen { color: #c8bddf; letter-spacing: .04em; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #ff5d8f, #7c5cff 55%, #22d3ee); color: white; font-family: Fraunces, Georgia, serif; font-size: 24px; }
.brand-mark.besar { width: 64px; height: 64px; font-size: 34px; margin-bottom: 8px; }
.nav-label { margin: 18px 8px 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9b90b5; }
.nav-link, .nav-kursus { display: flex; align-items: center; gap: 10px; color: #f6f1e8; text-decoration: none; padding: 10px 12px; border-radius: 12px; }
.nav-link.aktif, .nav-kursus.aktif, .nav-link:hover, .nav-kursus:hover { background: rgba(255,255,255,.08); }
.titik { width: 10px; height: 10px; border-radius: 50%; background: var(--aks, #f6c445); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aks, #f6c445) 25%, transparent); }
.nav-kosong { color: #9b90b5; font-size: 13px; margin: 0 12px; }
.lonceng { margin-left: auto; background: #ff5d8f; color: white; border-radius: 999px; min-width: 22px; text-align: center; font-size: 12px; padding: 2px 6px; }
.sisi-user { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sisi-user strong, .sisi-user small { display: block; }
.utama { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 22px 28px 0; }
.topbar h1 { margin: 0; font-size: 32px; }
#buka-menu { display: none; }
.isi { padding: 18px 28px 48px; display: grid; gap: 16px; }
.kartu { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: 0 10px 30px rgba(28, 23, 48, .04); }
.pengantar, .petunjuk, .kosong { color: var(--muted); }
.kisi, .kisi-2, .kisi-3, .kisi-ai, .kisi-kursus, .kisi-form { display: grid; gap: 14px; }
.angka { grid-template-columns: repeat(6, 1fr); }
.kisi-2, .kisi-form { grid-template-columns: 1.1fr .9fr; }
.kisi-3 { grid-template-columns: repeat(3, 1fr); }
.kisi-ai { grid-template-columns: repeat(2, 1fr); }
.kisi-kursus { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.angka .kartu strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 36px; }
.angka .kartu span { color: var(--muted); font-size: 13px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
label.lebar { grid-column: 1 / -1; }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 12px 14px; color: var(--ink); }
textarea { resize: vertical; }
.tombol, .tombol-kedua, .tombol-bahaya, .tombol-kecil, .tombol-cover, .pil {
    border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.tombol { background: linear-gradient(120deg, #ff5d8f, #7c5cff 55%, #22d3ee); color: white; font-weight: 700; }
.tombol-kedua, .tombol-kecil, .tombol-cover, .pil { background: #f3ecff; color: var(--plum); }
.tombol-bahaya { background: #ffe4e6; color: #9f1239; }
.tombol-kecil, .tombol-bahaya { padding: 7px 12px; font-size: 13px; }
.alert { border-radius: 14px; padding: 12px 14px; }
.alert-sukses { background: #e7f8ef; color: #166534; }
.alert-galat { background: #ffe4e6; color: #9f1239; }
.alert-info { background: #e0f2fe; color: #075985; }
.alert-peringatan { background: #fff7ed; color: #9a3412; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.aksi, .form-sejajar, .baris-judul, .aksi-cari { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.baris-judul { justify-content: space-between; }
.form-sejajar input { min-width: 180px; }
.lencana { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.lencana-aktif { background: #e0f2fe; color: #075985; }
.lencana-selesai { background: #ede9fe; color: #5b21b6; }
.lencana-keluar { background: #ffedd5; color: #9a3412; }
.lencana-aman { background: #dcfce7; color: #166534; }
.lencana-gagal { background: #ffe4e6; color: #9f1239; }
.kartu-kursus { display: grid; gap: 4px; padding: 16px; border-radius: 18px; text-decoration: none; color: inherit; background: white; border-top: 6px solid var(--aks); }
.kartu-ai { border-top: 6px solid var(--aks); display: grid; gap: 10px; }
.pilih-aktif { display: flex; align-items: center; gap: 8px; }
.pilih-aktif input, .pilihan-status input { width: auto; }
.hero-kuliah { display: flex; justify-content: space-between; gap: 12px; align-items: end; padding: 8px 4px 0; }
.hero-kuliah h2 { margin: 0; }
.hero-dosen { margin: 0 0 4px; color: var(--muted); }
.subnav { display: flex; gap: 8px; flex-wrap: wrap; }
.subnav a { text-decoration: none; color: var(--plum); background: white; border-radius: 999px; padding: 8px 14px; border: 1px solid var(--line); }
.subnav a.aktif { background: var(--plum); color: white; }
.sapaan h2 { margin: 0; font-size: 40px; }
.langkah ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.langkah .beres { color: #166534; }
.cari-bingkai { position: sticky; top: 12px; z-index: 4; padding: 3px; border-radius: 20px; background: linear-gradient(120deg, #ff5d8f, #f6c445, #22d3ee, #7c5cff, #ff5d8f); background-size: 300% 300%; animation: geser 5s ease infinite; }
@keyframes geser { 50% { background-position: 100% 50%; } }
.kotak-cari { background: white; border-radius: 17px; padding: 12px; display: grid; gap: 8px; }
.kotak-cari input { border: 0; background: #f8f4ee; }
.legenda { display: flex; gap: 8px; flex-wrap: wrap; }
.pil.aktif { outline: 2px solid var(--plum); }
.pil-rumus { background: var(--rumus); }
.pil-teori { background: #b7f3ea; }
.pil-peneliti { background: var(--peneliti); }
.blok { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; line-height: 1.55; }
.blok-rumus { background: var(--rumus); box-shadow: inset 4px 0 0 #e3a008; }
.blok-teori { background: var(--teori); box-shadow: inset 4px 0 0 #0f9d8a; }
.blok-peneliti:not(.blok-rumus):not(.blok-teori) { background: #fff7fb; }
.pil-teori { background: #0f9d8a; color: white; border-radius: 999px; padding: 0 7px; font-size: .85em; }
.pil-peneliti { background: var(--peneliti); color: #9d174d; border-bottom: 2px solid #db2777; border-radius: 6px; padding: 0 4px; }
.pil-rumus { background: #ffe08a; border-radius: 6px; padding: 0 4px; }
mark.cari { background: linear-gradient(90deg, #ffe14a, #ff9ecb, #9af7ff); color: var(--ink); border-radius: 6px; padding: 0 3px; font-weight: 700; }
mark.cari-aktif { outline: 2px solid #7c5cff; }
.sembunyi { display: none !important; }
.pembaca:not(.mode-saring) .materi-isi { display: none; }
.pembaca.mode-saring .tampilan-asli { display: none; }
.penampil-pdf { width: 100%; height: 78vh; min-height: 640px; border: 0; border-radius: 16px; background: #3a3a3a; }
.penampil-word { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 42px 48px; max-width: 820px; margin: 0 auto; line-height: 1.55; box-shadow: 0 12px 30px rgba(28, 23, 48, .06); }
.penampil-word p { margin: 0 0 10px; }
.penampil-word table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.penampil-word td { border: 1px solid #d9d0c3; padding: 6px 8px; vertical-align: top; }
.penampil-word img { max-width: 100%; height: auto; }
.penampil-txt { white-space: pre-wrap; background: white; border-radius: 12px; padding: 20px; border: 1px solid var(--line); }
.dek-ppt { display: grid; gap: 10px; }
.dek-alat { display: flex; gap: 10px; align-items: center; justify-content: center; }
.dek-bingkai { position: relative; width: 100%; overflow: hidden; background: #241c33; border-radius: 16px; min-height: 240px; }
.slide { display: none; position: absolute; left: 0; top: 0; transform-origin: top left; overflow: hidden; }
.slide.aktif { display: block; }
.bentuk { position: absolute; box-sizing: border-box; overflow: hidden; }
.bentuk-gambar { object-fit: fill; }
.lapisan-gambar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.isi-teks { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 4px 6px; }
.isi-teks p { margin: 0; line-height: 1.15; }
.tabel-slide { width: 100%; height: 100%; border-collapse: collapse; color: inherit; }
.tabel-slide td { border: 1px solid rgba(28, 23, 48, .25); vertical-align: top; }
.gambar-materi, .pratinjau-logo { max-width: 100%; border-radius: 16px; }
.pratinjau-logo { max-height: 140px; }
.gambar-materi { max-height: 360px; object-fit: contain; background: white; }
.prose h2, .prose h3 { margin-bottom: 6px; }
.prose p, .prose li { line-height: 1.6; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px; }
.luar { background: #fff7ed; border-left: 4px solid #f59e0b; padding: 10px 12px; border-radius: 10px; }
.soal { white-space: pre-wrap; background: #f8f4ee; padding: 12px; border-radius: 12px; }
.pilihan-cover { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tombol-cover.aktif { background: var(--plum); color: white; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.foto-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; }
.daftar-rapi, .daftar-notif { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.daftar-notif a { display: grid; gap: 4px; text-decoration: none; color: inherit; padding: 10px; border-radius: 12px; }
.daftar-notif .belum a { background: #fff7ed; }
.timeline { display: grid; gap: 12px; }
.kartu-logo { display: grid; gap: 12px; max-width: 520px; }
.opsional { font-weight: 400; color: var(--muted); }
.turun { align-content: end; }
.halaman-masuk { min-height: 100vh; }
.latar-masuk {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(circle at 12% 18%, #ffd0e2 0, transparent 32%),
        radial-gradient(circle at 88% 12%, #d9d4ff 0, transparent 34%),
        radial-gradient(circle at 78% 82%, #b8fff3 0, transparent 28%),
        var(--paper);
}
.kartu-masuk { width: min(440px, 100%); display: grid; gap: 12px; }
.kartu-masuk h1 { margin: 0; font-size: 56px; }
@media (max-width: 1100px) {
    .angka { grid-template-columns: repeat(3, 1fr); }
    .kisi-2, .kisi-form, .kisi-ai { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 20; transform: translateX(-105%); width: min(280px, 88vw); transition: transform .2s ease; }
    body.menu-buka .sidebar { transform: none; }
    #buka-menu { display: inline-flex; }
    .angka, .kisi-3 { grid-template-columns: 1fr 1fr; }
    .isi, .topbar { padding-left: 16px; padding-right: 16px; }
}
@media print {
    .sidebar, .topbar, .subnav, .form-unduh, .pilihan-cover, .aksi, .no-print { display: none !important; }
    .app { display: block; }
    .kartu { box-shadow: none; }
}