/* PsiKuis — tema Tropis Ceria (2026-10-12, perintah Arkasha: terapkan
   tampilan berkas referensi "Website Baru — Tropis Ceria" ke situs live;
   TAMPILAN SAJA — isi/data/fitur/logika tidak berubah).
   Palet: latar krem pucat #F6F7D7, teal utama #3EC1D3, oranye #FF9A00,
   pink #FF165D. Turunan keterbacaan (sama seperti berkas referensi):
   teal gelap #155E6B (bingkai/bayangan keras/teks aksen), teal gelap-2
   #177A8E (hover/batas opsi benar), teal terdalam #104B57, slate teal
   #2F4F57 (teks lunak), tint teal #CFF0F4, teal muda #7ED3E4, oranye
   terang #FFB84D, tint pink #FFDCE7, krem gelap #DDE3B8 (garis halus),
   ink #26241F; tambahan: #C77400 = oranye palet digelapkan untuk teks/
   batas peringatan, #FF7BA9 + #FFEDF2 + #F2A9C4 = turunan pink untuk
   panel salah & kartu ranking. Nama variabel lama dipertahankan agar
   semua aturan beralih palet tanpa mengubah struktur: --sage kini teal
   utama, --sage-dark teal gelap, --violet pink, --olive teal muda,
   --cream tint teal, --line krem gelap.
   Tanpa gambar dekoratif — gambar isi hanya stimulus soal bergambar
   (.soal-gambar, pilot Statistika II); satu pengecualian: logo situs
   (assets/logo-psikuis.jpg, foto panda merah) di bilah atas.
   Revisi 2026-10-12 02:02 (umpan balik Arkasha dari skrinsut):
   (1) state jawaban BENAR kini hijau jelas (--benar #2E9E5B /
   --benar-bg #DFF5E4), bukan teal; (2) header pil meluncur sembunyi
   saat scroll ke bawah, muncul lagi saat scroll ke atas (kelas
   .topbar-sembunyi; listener pasif di app.js); (3) warna kartu per
   semester dibedakan satu-satu — S1 teal, S2 oranye, S3 pink — lewat
   variabel --sem-* pada kartu (bawaan kartu = keluarga teal). */
:root{
  --paper:#F6F7D7;
  --card:#FFFFFF;
  --ink:#26241F;
  --ink-soft:#2F4F57;
  --sage:#3EC1D3;
  --sage-dark:#155E6B;
  --violet:#FF165D;
  --olive:#7ED3E4;
  --line:#DDE3B8;
  --cream:#CFF0F4;
  --good:#177A8E;
  --good-bg:#CFF0F4;
  --benar:#2E9E5B;
  --benar-bg:#DFF5E4;
  --bad:#FF165D;
  --bad-bg:#FFDCE7;
  --warn:#C77400;
  --oranye:#FF9A00;
  --oranye-terang:#FFB84D;
  --teal-dalam:#104B57;
  --radius:14px;
  --shadow:0 5px 0 rgba(21,94,107,.22);
  --bayang-keras:0 6px 0 rgba(21,94,107,.24);
  --potong:clamp(.7rem,2.2vw,1.4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;font-size:16px;
}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--sage-dark)}
a{color:var(--sage-dark)}
.wrap{max-width:1020px;margin:0 auto;padding:0 18px}
.muted{color:var(--ink-soft)}
.loading{padding:40px 0;text-align:center;color:var(--ink-soft)}

/* bilah atas */
.topbar{
  position:sticky;top:12px;z-index:20;background:#fff;
  border:2px solid var(--sage-dark);border-radius:999px;
  box-shadow:0 6px 0 rgba(38,36,31,.13);
  display:flex;align-items:center;gap:22px;padding:9px 12px 9px 18px;flex-wrap:wrap;
  margin:12px 12px 0;
  transition:transform .25s ease,opacity .25s ease;
}
/* Header meluncur hilang ke atas saat pengguna scroll ke bawah (kelas
   dipasang app.js); muncul lagi saat scroll ke atas / di puncak. */
.topbar-sembunyi{transform:translateY(-170%);opacity:0;pointer-events:none}
@media(min-width:1068px){.topbar{max-width:1020px;margin-left:auto;margin-right:auto}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-logo{
  width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--cream);
}
.brand-text{font-size:19px;letter-spacing:.2px;font-weight:700}
.wm-psi{color:var(--sage)}
.wm-kuis{color:var(--violet)}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.mainnav a{
  text-decoration:none;color:var(--ink-soft);padding:7px 12px;border-radius:999px;font-size:15px;
}
.mainnav a:hover{background:var(--cream);color:var(--ink)}
.mainnav a.aktif{background:var(--oranye);color:var(--ink);font-weight:700}
.badge{
  background:var(--bad);color:#fff;border-radius:999px;font-size:12px;
  padding:1px 7px;margin-left:4px;vertical-align:2px;
}

/* hero & kartu */
.hero{
  position:relative;background:var(--paper);
  border:none;border-radius:0;
  clip-path:polygon(var(--potong) 0,100% 0,100% calc(100% - var(--potong)),calc(100% - var(--potong)) 100%,0 100%,0 var(--potong));
  box-shadow:inset 0 0 0 2px var(--sage-dark),inset 0 0 0 8px var(--oranye-terang),inset 0 0 0 10px var(--sage-dark);
  padding:36px 34px;margin:26px 0 8px;
}
.hero::after{
  content:"✦";position:absolute;right:26px;top:20px;font-size:2rem;line-height:1;
  color:var(--sage);animation:putar 24s linear infinite;pointer-events:none;
}
@keyframes putar{to{transform:rotate(360deg)}}
.hero h1{margin:0 0 8px;font-size:30px}
.hero p{margin:0;color:var(--ink-soft);max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:18px 0 30px}
.card{
  --frame:#3EC1D3;
  --sem-dalam:#155E6B;
  --sem-tint:#CFF0F4;
  --sem-pinggir:#7ED3E4;
  --sem-teks:#155E6B;
  background:var(--card);border:none;border-radius:0;
  clip-path:polygon(var(--potong) 0,100% 0,100% calc(100% - var(--potong)),calc(100% - var(--potong)) 100%,0 100%,0 var(--potong));
  box-shadow:inset 0 0 0 2px var(--sem-dalam),inset 0 0 0 7px var(--frame),inset 0 0 0 9px var(--sem-dalam);
  padding:24px;display:flex;flex-direction:column;gap:6px;
  transition:transform .25s cubic-bezier(0,0,.25,1);
}
.card:hover{transform:translateY(-4px)}
/* Warna kartu per semester — dibedakan satu-satu (perintah Arkasha
   2026-10-12): S1 teal, S2 oranye, S3 pink. --frame = pita warna kartu;
   --sem-dalam = turunan gelap keluarganya utk bingkai/bayangan keras +
   teks pil; --sem-tint + --sem-pinggir utk pil "Semester N". Semester
   di luar 1-3 jatuh ke bawaan kartu (keluarga teal). */
.card.sem-1{--frame:#3EC1D3;--sem-dalam:#155E6B;--sem-tint:#CFF0F4;--sem-pinggir:#7ED3E4;--sem-teks:#155E6B}
.card.sem-2{--frame:#FF9A00;--sem-dalam:#C77400;--sem-tint:#FFF3D6;--sem-pinggir:#FFB84D;--sem-teks:#C77400}
.card.sem-3{--frame:#FF165D;--sem-dalam:#B30D42;--sem-tint:#FFDCE7;--sem-pinggir:#FF7BA9;--sem-teks:#B30D42}
.card h3{margin:0;font-size:18px}
.card .meta{color:var(--ink-soft);font-size:14px}
.card .spacer{flex:1}
.btn{
  display:inline-block;background:var(--sage);color:#fff;cursor:pointer;
  border:2px solid var(--sage-dark);box-shadow:0 5px 0 rgba(21,94,107,.35);
  padding:9px 16px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;text-align:center;
  transition:transform .15s cubic-bezier(0,0,.25,1),box-shadow .15s,background .15s;
}
.btn:hover{background:var(--sage-dark);transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(21,94,107,.35)}
.btn.ghost{background:#fff;color:var(--sage-dark);border:2px solid var(--sage-dark)}
.btn.ghost:hover{background:var(--cream)}
.btn.kecil{padding:6px 12px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.pill{
  display:inline-block;background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:2px 10px;font-size:13px;margin:0 4px 4px 0;
}
.pill.hijau{background:var(--good-bg);border-color:var(--olive);color:var(--good)}
h2.bab{margin:30px 0 4px;font-size:23px}
p.lead{color:var(--ink-soft);margin-top:2px}

/* Filter semester (Latihan & Belajar): chip pemilih + pengelompokan daftar
   matkul per semester + lencana semester di kartu. Palet kertas/sage sama. */
.sem-filter{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 2px}
.sem-chip{
  background:#fff;border:2px solid var(--sage-dark);color:var(--sage-dark);
  border-radius:999px;padding:7px 15px;font-size:14.5px;cursor:pointer;
  box-shadow:0 4px 0 rgba(38,36,31,.13);
}
.sem-chip:hover{background:var(--cream)}
.sem-chip.aktif{background:var(--oranye);border-color:var(--sage-dark);color:var(--ink);font-weight:700}
.subbab-sem{margin:26px 0 0;font-size:19px}
.subbab-sem .subket{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px;font-weight:400;color:var(--ink-soft);
}
.lencana-sem{
  align-self:flex-start;background:var(--sem-tint,#CFF0F4);border:1px solid var(--sem-pinggir,#7ED3E4);color:var(--sem-teks,#155E6B);
  border-radius:999px;padding:1px 10px;font-size:12.5px;font-weight:600;letter-spacing:.2px;
}
.crumb{font-size:14px;color:var(--ink-soft);margin:20px 0 0}
.crumb a{color:var(--ink-soft)}

/* halaman materi — sejak penyeragaman format 2026-10-11 semua halaman
   materi memakai aliran baca .arsip-isi yang sama (tanpa kartu/kotak);
   aturan khusus .materi-isi/.deflist/.contoh yang lama sudah tidak
   dipakai dan dihapus. */
.sumber{font-size:14px;color:var(--ink-soft);border-top:1px dashed var(--line);margin-top:22px;padding-top:10px}

/* Uji WM🧠 — penanda mikro per blok baca + panel mini sebaris di halaman
   arsip (dulu "Uji STM" di halaman ringkasan Klinis; kini semua matkul).
   Penanda sengaja senyap: teks kecil hijau sage, opacity .55, penuh hanya saat
   hover/sentuh/fokus atau panelnya terbuka. Mode baca bersih menyembunyikan
   semua penanda (kelas .baca-bersih pada artikel arsip). */
.wm-dot{
  display:inline-block;font:inherit;font-size:.72em;line-height:1.35;
  color:var(--sage-dark);background:transparent;
  border:1px solid var(--olive);border-radius:999px;
  padding:.14em .6em;margin-left:.45em;vertical-align:.18em;
  cursor:pointer;opacity:.55;white-space:nowrap;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease;
}
.wm-dot:hover,.wm-dot:focus-visible,.wm-dot:active,.wm-dot.aktif{
  opacity:1;background:var(--cream);
}
.wm-dot.aktif{border-color:var(--sage-dark);font-weight:600}
.baca-bersih .wm-dot{display:none}
.wm-inline{margin:12px 0 16px}
.materi-kontrol{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.sakelar-bersih,.sakelar-buku{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--ink-soft);cursor:pointer;
}
.sakelar-bersih input,.sakelar-buku input{accent-color:var(--sage);width:15px;height:15px;cursor:pointer;margin:0}
/* Lapisan opsional "Add informasi buku" (field buku halaman arsip):
   seksi tambahan di LUAR .wm-badan, sesudah isi deck — kartu krem
   lembut berbingkai agar jelas terpisah dari aliran baca deck, tanpa
   warna kontras. Disembunyikan atribut hidden sampai dicentang. */
.info-buku{
  margin:26px 0 6px;background:var(--cream);border:1px solid var(--line);
  border-left:3px solid var(--sage);border-radius:12px;padding:18px 20px 8px;
}
.info-buku[hidden]{display:none}
.info-buku-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.info-buku .info-buku-judul{margin:0 0 4px;font-size:20px}
.info-buku-tutup{
  flex:0 0 auto;font:inherit;font-size:13px;line-height:1.35;color:var(--sage-dark);
  background:var(--card);border:1px solid var(--olive);border-radius:999px;
  padding:5px 11px;cursor:pointer;white-space:nowrap;
}
.info-buku-tutup:hover,.info-buku-tutup:focus-visible{background:var(--good-bg);border-color:var(--sage)}
.info-buku-kaki{border-top:1px dashed var(--line);margin-top:14px;padding:10px 0 8px;text-align:right}
.info-buku-ket{font-size:14px;margin:0 0 6px}
.info-buku-buku{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}
.info-buku-sumber{margin:0 0 2px;font-size:17px}
.info-buku-meta{font-size:14px;margin:0 0 8px}
.info-buku-seksi{margin:14px 0 4px;font-size:15.5px;color:var(--sage-dark)}
.info-buku-teks{margin:0 0 .8em}
.info-buku-sitasi{color:var(--ink-soft);font-size:.93em;white-space:nowrap}
/* Bagian "Konsep & Definisi Penting" (field konsep halaman arsip):
   <details> yang bawaan tertutup di BAWAH blok latihan halaman baca,
   di luar .wm-badan — kartu kertas berbingkai sage sekeluarga info-buku
   tapi lebih ringan karena isinya daftar definisi materi itu sendiri. */
.konsep-blok{
  margin:20px 0 6px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--sage);border-radius:12px;padding:14px 20px 16px;
}
.konsep-blok summary{cursor:pointer;list-style-position:inside}
.konsep-judul{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:19px;color:var(--sage-dark)}
.konsep-jumlah{font-size:14px;margin-left:6px}
.konsep-daftar{margin:12px 0 2px}
.konsep-daftar dt{
  font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--ink);
  margin-top:13px;
}
.konsep-daftar dt:first-child{margin-top:0}
.konsep-daftar dd{margin:2px 0 0;color:var(--ink-soft);line-height:1.6}
.wm-panel{
  border:1px solid var(--line);background:var(--paper);border-radius:12px;
  padding:16px 18px;
}
.wm-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-weight:600;color:var(--sage-dark);font-size:15px;margin-bottom:8px;
}
.wm-tutup{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:15px;padding:2px 6px;line-height:1}
.wm-tutup:hover{color:var(--ink)}
.wm-panel .qmeta{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.wm-panel .qtext{font-size:16px;margin:0 0 10px}
.wm-panel .opsi{font-size:15px;padding:10px 14px;margin:6px 0}
.wm-fb{font-weight:600;margin:12px 0 0}
.wm-fb.b{color:var(--benar)} .wm-fb.s{color:var(--bad)}
.wm-nav{margin-top:14px;text-align:right}
.wm-skor{font-size:18px;margin:4px 0}

/* daftar set & progres */
.setrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;margin:10px 0;box-shadow:var(--shadow);
}
.setrow .nama{font-weight:600}
.setrow .info{color:var(--ink-soft);font-size:14px}
.setrow .tombol{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.skor{font-size:13px;border-radius:999px;padding:2px 10px;background:var(--cream);border:1px solid var(--line)}
.skor.bagus{background:var(--good-bg);color:var(--good);border-color:var(--olive)}
/* Bagian khusus UTS/UAS di halaman Latihan (pola baku, 2026-10-11):
   wadah beraksen untuk paket ujian (setKhusus ber-grup + deskriptor
   bagianSetKhusus di data matkul) — tampil jelas berbeda dari daftar
   materi biasa, tetap di palet kertas/sage. Kelas grup (.bagian-uts,
   .bagian-uas) berbagi gaya dasar .bagian-ujian ini. */
.bagian-ujian{
  margin:30px 0 8px;padding:18px 18px 8px;
  background:linear-gradient(180deg,#FFF3D6,var(--cream));
  border:1px solid var(--olive);border-left:6px solid var(--sage-dark);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.bagian-ujian-kepala h3{margin:8px 0 2px}
.bagian-ujian-kepala p{margin:0 0 6px;color:var(--ink-soft);font-size:14px}
.lencana-ujian{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--sage-dark);
  border-radius:999px;padding:3px 12px;
}
.bagian-ujian .setrow{border-color:var(--olive)}
/* Bagan Materi (pilot RPM, 2026-10-11): bagian khusus di daftar
   Belajar (.bagian-bagan, sekeluarga .bagian-ujian tapi untuk peta
   materi), blok mindmap di halaman baca (.bagan-blok, sekeluarga
   .konsep-blok — tepat di atas blok latihan per materi), dan panggung
   MINDMAP RADIAL SVG vektor (.bagan-viewport): akar di tengah, cabang
   menyebar ke segala arah; warna tepi/kotak/lencana per keluarga
   cabang diatur sebaris (inline) dari app.js (BAGAN_KELUARGA) —
   aturan di sini hanya kerangka & cadangan. Klik kembang/tutup,
   seret geser, zoom tajam karena vektor. */
.bagian-bagan{
  margin:22px 0 8px;padding:18px 18px 10px;
  background:linear-gradient(180deg,#FFF3D6,var(--cream));
  border:1px solid var(--olive);border-left:6px solid var(--sage-dark);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.bagian-bagan-kepala h3{margin:8px 0 2px}
.bagian-bagan-kepala p{margin:0 0 6px;color:var(--ink-soft);font-size:14px}
.lencana-bagan{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--sage-dark);
  border-radius:999px;padding:3px 12px;
}
.bagan-blok{
  margin:18px 0 6px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--sage);border-radius:12px;padding:14px 18px 16px;
}
.bagan-blok-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bagan-blok-kepala h2{margin:0;font-size:20px}
.bagan-alat{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.bagan-viewport{
  position:relative;height:360px;overflow:hidden;touch-action:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
}
.bagan-viewport.besar{height:min(74vh,720px)}
.bagan-viewport:fullscreen{height:100%;border-radius:0}
.bagan-svg{width:100%;height:100%;display:block;cursor:grab}
.bagan-svg:active{cursor:grabbing}
.bagan-tepi{fill:none;stroke:var(--olive);stroke-width:1.5;opacity:.8}
.bagan-kotak{stroke-width:1.3}
.bagan-titik{fill:var(--sage)}
.bagan-lencana circle{fill:var(--card);stroke:var(--sage-dark);stroke-width:1.3}
.bagan-lencana-teks{
  font:700 12px system-ui,sans-serif;fill:var(--sage-dark);text-anchor:middle;
  pointer-events:none;
}
.bar{height:12px;background:var(--cream);border:2px solid var(--sage-dark);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--oranye) 0 10px,var(--sage) 10px 20px)}

/* kuis */
.kuis-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 6px}
.kuis-head .timer{font-variant-numeric:tabular-nums;font-weight:600;background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.soal{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow);margin:12px 0;
}
.soal .qmeta{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.soal .qtext{font-size:18px;margin:0 0 16px}
/* stimulus soal bergambar (field gambar per soal; dirender app.js DI ATAS
   pertanyaan pada mode Latihan & Ujian, panel Uji WM🧠, dan Pembahasan):
   bingkai tipis lembut + latar krem sekeluarga palet situs, lebar
   responsif mengikuti kontainer, ketuk membuka berkas penuh. */
.soal-gambar{
  margin:0 0 16px;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:10px;
}
.soal-gambar a{display:block}
.soal-gambar img{
  display:block;width:100%;max-width:100%;height:auto;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.soal-gambar figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;text-align:center}
.review .item .soal-gambar{margin:8px 0}
.wm-panel .soal-gambar{margin:0 0 10px}
/* figur ilustrasi di tengah teks baca materi (field figur halaman
   arsip; disisipkan app.js sesudah blok bab sumbernya dan dikeluarkan
   dari hitungan blok Uji WM): kartu krem sekeluarga .soal-gambar,
   mengalir mengikuti lebar kolom baca, keterangan kecil menyebut
   sumbernya. */
.figur-materi{
  margin:18px 0;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:10px;
}
.figur-materi a{display:block}
.figur-materi img{
  display:block;max-width:100%;height:auto;margin:0 auto;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.figur-materi figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px}
.opsi{display:block;width:100%;text-align:left;background:var(--paper);
  border:2px solid var(--sage-dark);border-radius:10px;padding:12px 16px;margin:8px 0;
  box-shadow:0 4px 0 rgba(21,94,107,.25);
  font-size:16px;cursor:pointer;color:var(--ink);
  transition:transform .15s cubic-bezier(0,0,.25,1)}
.opsi:hover{transform:translateY(-2px)}
.opsi.terpilih{border-color:var(--teal-dalam);background:var(--cream)}
.opsi.benar{border-color:var(--benar);background:var(--benar-bg);font-weight:600;animation:pop .45s cubic-bezier(.34,1.56,.64,1)}
.opsi.salah{border-color:var(--bad);background:var(--bad-bg);animation:shake .45s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.opsi:disabled{cursor:default;opacity:.92}
.panel{
  border:1px solid var(--olive);background:var(--good-bg);border-radius:10px;
  padding:14px 18px;margin-top:14px;
}
.panel.salahp{border-color:#FF7BA9;background:var(--bad-bg)}
.panel.kenapa-salah{border-color:var(--oranye-terang);background:#FFF3D6}
.panel h4{margin:0 0 6px;font-size:15px}
.panel p{margin:6px 0}
.panel .rujukan{font-size:14px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:8px;margin-top:10px}
.kuis-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:14px 0 30px;flex-wrap:wrap}
.nomor-grid{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.nomor-grid button{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:14px;
}
.nomor-grid button.isi{background:var(--cream);border-color:var(--sage)}
.nomor-grid button.kini{outline:2px solid var(--sage-dark)}
.hasil{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);margin:18px 0 30px;text-align:center;
}
.hasil::before{content:"✦";display:block;font-size:26px;line-height:1;color:var(--oranye);
  animation:putar 24s linear infinite;margin-bottom:8px}
.hasil .angka{font-family:Georgia,serif;font-size:44px;color:var(--sage-dark)}
.review{margin:0 0 30px}
.review .item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:10px 0}
.review .item .status{font-weight:700}
.review .item .status.b{color:var(--benar)} .review .item .status.s{color:var(--bad)}
/* Tanya Materi — chatbot jawaban-siap. Gelembung percakapan dengan palet
   kertas/sage yang sama; tanpa gambar. Area chat dibatasi tingginya agar
   ringan di HP, masukan selalu terlihat di bawahnya. */
.chat-info{
  border:1px solid var(--olive);background:var(--good-bg);border-radius:12px;
  padding:12px 16px;margin:12px 0;font-size:15px;
}
.chat-alur{
  display:flex;flex-direction:column;gap:10px;
  max-height:62vh;overflow-y:auto;padding:16px 14px;margin:0 0 12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.gelembung{
  max-width:88%;padding:10px 14px;border-radius:14px;font-size:15px;
  background:var(--paper);border:1px solid var(--line);
}
.gelembung p{margin:5px 0}
.gelembung.bot{align-self:flex-start;border-bottom-left-radius:4px}
.gelembung.kamu{
  align-self:flex-end;border-bottom-right-radius:4px;
  background:var(--sage);color:#fff;border-color:var(--sage);
}
.chat-meta{font-size:13px;color:var(--ink-soft);margin-bottom:2px}
.chat-judul{font-weight:700;color:var(--sage-dark)}
.chat-tombol{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chip{
  background:#fff;border:2px solid var(--sage-dark);color:var(--sage-dark);
  border-radius:999px;padding:6px 13px;font-size:14px;cursor:pointer;text-align:left;
  box-shadow:0 4px 0 rgba(38,36,31,.13);
}
.chip:hover{background:var(--cream)}
.chat-lanjut{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.chat-form{display:flex;gap:8px;margin:0 0 8px}
.chat-form input{
  flex:1;min-width:0;padding:11px 15px;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--sage);border-radius:999px;
}
.chat-form input:focus{outline:2px solid var(--olive);outline-offset:1px}
@media(max-width:640px){.gelembung{max-width:95%}.chat-alur{max-height:58vh}}

.foot{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;padding-bottom:26px;color:var(--ink-soft);font-size:14px}
.foot-brand{font-size:17px;font-weight:700;margin:0 0 4px}
.kosong{
  border:1px dashed var(--sage);border-radius:var(--radius);padding:26px;text-align:center;
  color:var(--ink-soft);margin:18px 0 30px;background:var(--card);
}

/* ===== Revisi akun & arsip (2026-10-11) ===== */
.userbox{margin-left:6px;font-size:14px}
.userbox a{text-decoration:none;color:var(--sage-dark);background:var(--cream);padding:6px 11px;border-radius:999px}
.userbox a:hover{background:var(--olive);color:var(--ink)}

/* gerbang masuk & pilih semester */
.gerbang{max-width:560px;margin:26px auto;background:var(--card);border:2px solid var(--sage-dark);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px}
.gerbang h1{margin-top:0}
.gerbang-brand{font-size:25px;font-weight:700;letter-spacing:.2px;margin:0 0 2px}
.info-mode{background:var(--good-bg);border:1px solid var(--olive);border-radius:10px;
  padding:10px 14px;font-size:14.5px;margin:14px 0 18px}
.form-masuk label{display:block;font-weight:600;margin:16px 0 6px;color:var(--sage-dark)}
.form-masuk input{width:100%;padding:12px 14px;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--sage);border-radius:10px}
.form-masuk input:focus{outline:2px solid var(--olive);outline-offset:1px}
.form-masuk .petunjuk{font-size:13.5px;color:var(--ink-soft);margin:5px 0 0}
.galat{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);
  border-radius:10px;padding:10px 14px;font-size:14.5px;margin-top:16px}
.btn.besar{width:100%;padding:13px;font-size:16.5px;margin-top:20px}
.pilih-sem{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pilih-sem .btn{flex:1;min-width:140px;margin-top:0;width:auto}

/* halaman Soal Salah per matkul: pemilih jumlah sesi latihan ulang
   (muncul sesudah tombol "Mulai sesi latihan ulang" diklik) + resume
   singkat asal kebanyakan soal salah */
.pilih-jumlah{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 12px}
.pilih-jumlah[hidden]{display:none}
.resume-salah{font-size:14.5px;color:var(--ink-soft);margin:0 0 16px}

/* daftar matkul bersih (beranda personal) */
.daftar-matkul{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);margin:6px 0 10px}
.baris-matkul{display:flex;align-items:center;gap:12px;padding:15px 18px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.baris-matkul:last-child{border-bottom:none}
.baris-matkul:hover{background:var(--cream)}
.baris-isi{flex:1;min-width:0}
.baris-judul{display:block;font-family:Georgia,serif;font-weight:600;font-size:17.5px;color:var(--sage-dark)}
.baris-meta{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.baris-panah{font-size:24px;color:var(--olive);flex:none}
.banner-gabung{background:#FFF3D6;border:1px solid var(--warn);border-radius:var(--radius);
  padding:16px 18px;margin:18px 0;font-size:15px}

/* profil */
.profil-kartu{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px 20px}
.profil-baris{padding:13px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profil-baris:last-child{border-bottom:none}
.profil-label{min-width:130px;color:var(--ink-soft);font-size:14.5px}
.profil-baris select{padding:8px 10px;font-size:15px;border:1px solid var(--sage);border-radius:8px;background:#fff;color:var(--ink)}

/* halaman baca arsip */
.arsip-isi{max-width:820px}
.arsip-isi h1{font-size:30px;line-height:1.25}
.arsip-isi h2{font-size:23px;margin:28px 0 8px}
.arsip-isi h3{font-size:19.5px;margin:22px 0 6px}
.arsip-isi h4,.arsip-isi h5{font-size:17px;margin:18px 0 5px}
.arsip-isi p{margin:9px 0}
.arsip-isi ul,.arsip-isi ol{margin:8px 0 12px;padding-left:24px}
.arsip-isi li{margin:4px 0}
.arsip-isi blockquote{border-left:3px solid var(--olive);margin:12px 0;padding:2px 0 2px 14px;color:var(--ink-soft)}
.arsip-isi code{background:var(--cream);padding:1px 5px;border-radius:5px;font-size:.92em}
.arsip-isi pre{background:var(--cream);border-radius:10px;padding:12px 14px;overflow-x:auto;font-size:13.5px}
.tabel-bungkus{overflow-x:auto;margin:12px 0}
.arsip-isi table{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--card)}
.arsip-isi th,.arsip-isi td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.arsip-isi th{background:var(--cream);color:var(--sage-dark)}

/* ===== Poles tipografi baca materi (2026-10-11) =====
   Arahan Arkasha + contoh visualnya: (1) konsep/istilah di teks baca
   ditandai halus — tebal + garis bawah sage transparan, garis tipis
   lembut di bawah kata, BUKAN sorotan blok dan bukan warna kontras;
   (2) paragraf area baca lebih senggang (line-height 1,8 + jarak
   antarparagraf jelas) dan lebar baris baca dijaga nyaman.
   Hanya area baca materi yang disentuh (artikel baca .arsip-isi — sejak
   2026-10-11 halaman ringkasan Klinis memakai artikel yang sama);
   font global tidak berubah. */

/* tanda istilah hasil render app.js (span.istilah-tanda) */
.istilah-tanda{
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(21,94,107,.55);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-skip-ink:auto;
}
/* istilah tebal bawaan deck di halaman arsip (<strong> hasil pra-render):
   perlakuan sama, tapi garisnya lebih tipis & lebih pudar — strong di
   arsip sangat padat (rata-rata ±40 per halaman), jadi versi penuh akan
   terasa ramai. */
.arsip-isi strong{
  text-decoration:underline;
  text-decoration-color:rgba(21,94,107,.30);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-skip-ink:auto;
}

/* spasi baca: semua halaman materi adalah satu artikel .arsip-isi, jadi
   aturan spasi .arsip-isi di bawah berlaku untuk semuanya (dulu ada blok
   .materi-isi .baca-unit terpisah — dihapus saat penyeragaman format
   2026-10-11). Panel Uji WM🧠, tombol, dan catatan sumber di luar
   cakupan ini. */
/* tanda istilah Klinis (span.istilah-tanda) di dalam aliran arsip diberi
   perlakuan yang sama persis dengan <strong> arsip: garis lebih tipis &
   lebih pudar daripada gaya .istilah-tanda bawaan. */
.arsip-isi .istilah-tanda{
  text-decoration-color:rgba(21,94,107,.30);
  text-decoration-thickness:1.5px;
}

/* spasi baca: halaman arsip */
.arsip-isi p{line-height:1.8;margin:0 0 1.05em}
.arsip-isi li{line-height:1.8;margin:0 0 .35em}
.arsip-isi blockquote{line-height:1.8}

/* ---------- Laporkan soal ----------
   Baris tombol di kartu soal (gambarSoal) & butir Pembahasan, plus
   dialog laporannya. Selama BP_LAPORAN_ENDPOINT kosong tombol tidak
   dirender sama sekali (lihat app.js: laporanAktif). */
.lapor-baris{margin-top:14px;text-align:right}
.review .item .lapor-baris{margin-top:10px}
.lapor-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(38,36,31,.45);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:28px 14px;box-sizing:border-box;
}
.lapor-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:520px;padding:18px 20px;box-sizing:border-box;
}
.lapor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.lapor-head strong{font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--sage-dark);font-size:18px}
.lapor-card .qmeta{font-size:13px;color:var(--ink-soft);margin:0 0 6px}
.lapor-soal{font-size:15px;margin:0 0 10px}
.lapor-kat{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.lapor-kat label{
  display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:15px;
  background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
}
.lapor-kat input{margin-top:3px}
.lapor-catatan{
  width:100%;box-sizing:border-box;font:inherit;font-size:15px;resize:vertical;
  border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px;color:var(--ink);
}
.lapor-status{font-weight:600;margin:10px 0 0}
.lapor-status.terkonfirmasi{color:var(--good)}
.lapor-status.gagal{color:var(--bad)}
.lapor-status.tak-terkonfirmasi{color:var(--warn)}
.lapor-aksi{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ===== Papan Ranking (2026-10-11) =====
   Meniru pratinjau yang disetujui Arkasha lapis demi lapis: podium
   juara 1-3 TANPA avatar (mahkota #1, username/—, satu baris Skor%),
   tabel publik ringkas (hanya #, Nama, Skor%), elipsis + gugus
   peringkat sendiri, kartu profil ungu lembut berisi statistik
   lengkap pemilik akun, dan kartu centang opt-in tampil nama. */
.bab2{font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--sage-dark);font-size:19px;margin:22px 0 8px}
.rk-podium{display:flex;align-items:flex-end;gap:8px;margin:14px 0 20px}
.rk-pod{flex:1;text-align:center;min-width:0}
.rk-crown{font-size:30px;line-height:1}
.rk-uname{font-weight:700;font-size:15px;word-break:break-word}
.rk-ustat{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.rk-step{margin-top:8px;border-radius:8px 8px 0 0;background:var(--cream);color:var(--sage-dark);font-weight:700;padding:8px 0}
.rk-pod.pertama .rk-step{background:var(--sage);color:#fff;padding:20px 0}
.rk-pod.kedua .rk-step{padding:13px 0}
.rk-pod.ketiga .rk-step{padding:10px 0}
.rk-tabelbungkus{overflow-x:auto;margin-bottom:6px}
.rk-tabel{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rk-tabel th{background:var(--sage);color:#fff;text-align:left;padding:8px 10px;font-size:13.5px}
.rk-tabel td{padding:7px 10px;border-top:1px solid var(--line)}
.rk-tabel .rk-nama{font-weight:600}
.rk-tabel .rk-skor{font-weight:700}
.rk-tabel tr.rk-kamu td{background:var(--bad-bg)}
.rk-tabel tr.rk-elipsis td{text-align:center;color:var(--ink-soft);letter-spacing:3px}
.rk-kartu{background:#FFEDF2;border:1px solid #F2A9C4;border-radius:var(--radius);padding:14px 16px;font-size:14.5px;margin-top:16px}
.rk-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rk-stat{flex:1 1 30%;background:#fff;border:1px solid #F2A9C4;border-radius:8px;padding:7px 9px;text-align:center}
.rk-stat b{display:block;font-size:16px}
.rk-stat span{font-size:11.5px;color:var(--ink-soft)}
.rk-atur{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-top:14px;font-size:14.5px}
.rk-atur label{display:flex;gap:8px;align-items:center;font-weight:600;cursor:pointer}
.rk-atur input{width:17px;height:17px;accent-color:var(--violet)}
.rk-atur p{color:var(--ink-soft);font-size:13px;margin:6px 0 0}
.rk-menuju{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px;font-size:14.5px;margin-bottom:8px}
.rk-menuju div{padding:7px 0;border-top:1px dashed var(--line)}
.rk-menuju div:first-child{border-top:none}