/* Kurikulum — peta rumpun, kisi kelas, halaman kelas, ruang belajar.
   Warna SELURUHNYA dari token (tokens.css lapisan unified). Tidak ada satu pun
   hex mentah: penjaga scripts/audit_theme_coverage.py memeriksanya, dan lebih
   penting lagi, hex mentah tidak ikut berubah saat tema terang/gelap ditukar. */

/* ── Peta rumpun ─────────────────────────────────────────────────────────── */
.kur-hero { padding: 48px 0 28px; }
.kur-hero h1 { font-size: var(--fs-h1); margin: 0 0 10px; line-height: 1.15; }
.kur-hero p  { color: var(--fg-muted); max-width: 62ch; margin: 0 0 18px; font-size: var(--fs-lede); }
.kur-angka { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.kur-angka b { display: block; font-size: var(--fs-h2); line-height: 1; }
.kur-angka span { color: var(--fg-muted); font-size: var(--fs-sm); }

.kur-rak-grid {
  display: grid; gap: 14px; margin: 26px 0 40px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.kur-rak {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.kur-rak:hover { border-color: var(--accent); transform: translateY(-2px); }
.kur-rak-ikon {
  flex: 0 0 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent);
}
.kur-rak-ikon svg { width: 20px; height: 20px; }
.kur-rak strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.kur-rak small  { color: var(--fg-muted); display: block; line-height: 1.45; }
.kur-rak-n { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }

/* Rak yang belum berisi: ditampilkan sebagai rencana, TIDAK sebagai tautan.
   Aturan produk Risos melarang rak yang dibuka lalu kosong — tapi
   menyembunyikannya sama sekali membuat peta kurikulum terlihat bohong. Jadi
   ia tampak, redup, dan tidak bisa diklik. */
.kur-rak--rencana { opacity: .55; pointer-events: none; }
.kur-rak--rencana .kur-rak-n { color: var(--fg-faint); }

/* ── Kisi kartu kelas ─────────────────────────────────────────────────────── */
.kur-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.kur-card {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.kur-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.kur-card-top { padding: 15px 15px 0; }
.kur-card h3 { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.35; }
.kur-card p  { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0 0 12px;
               line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3;
               -webkit-box-orient: vertical; overflow: hidden; }
.kur-card-fakta {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 12px; margin-top: auto;
}
.kur-fakta {
  font-size: var(--fs-xs); color: var(--fg-muted);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap;
}
.kur-fakta--std { color: var(--accent); border-color: var(--accent); }
.kur-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 15px; border-top: 1px solid var(--line);
  background: var(--bg-elev); font-size: var(--fs-sm);
}
.kur-harga { font-weight: 600; }
.kur-harga.gratis { color: var(--ok); }

/* ── Halaman kelas ───────────────────────────────────────────────────────── */
.kur-kelas-head { padding: 34px 0 20px; border-bottom: 1px solid var(--line); }
.kur-kelas-head h1 { font-size: var(--fs-h1); margin: 8px 0 12px; line-height: 1.15; }
.kur-kelas-head .kur-lede { color: var(--fg-muted); max-width: 70ch; font-size: var(--fs-lede); }
.kur-remah { font-size: var(--fs-sm); color: var(--fg-muted); }
.kur-remah a { color: var(--accent); text-decoration: none; }

.kur-modul-list { list-style: none; padding: 0; margin: 24px 0 40px; display: grid; gap: 10px; }
.kur-modul {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color var(--t-fast);
}
.kur-modul:hover { border-color: var(--accent); }
.kur-modul-no {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--bg-elev);
  border: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm);
}
.kur-modul.selesai .kur-modul-no { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.kur-modul-isi { flex: 1 1 auto; min-width: 0; }
.kur-modul-isi strong { display: block; margin-bottom: 3px; }
.kur-modul-isi small  { color: var(--fg-muted); }
.kur-modul-kunci { color: var(--fg-faint); }
.kur-modul-kunci svg { width: 17px; height: 17px; }

.kur-capaian { margin: 0 0 24px; padding-left: 20px; }
.kur-capaian li { margin-bottom: 7px; color: var(--fg-muted); line-height: 1.55; }

/* ── Ruang belajar ───────────────────────────────────────────────────────── */
.kur-belajar { display: grid; gap: 28px; grid-template-columns: minmax(0,1fr) 250px; }
@media (max-width: 900px) { .kur-belajar { grid-template-columns: 1fr; } }
.kur-unit { padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 76px; }
.kur-unit:last-child { border-bottom: 0; }
.kur-unit-tag {
  display: inline-block; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); margin-bottom: 8px;
}
.kur-unit h2 { font-size: var(--fs-h3); margin: 0 0 14px; line-height: 1.3; }
.kur-md { line-height: 1.72; }
.kur-md h2, .kur-md h3 { margin: 1.5em 0 .5em; line-height: 1.3; }
.kur-md p, .kur-md li { color: var(--fg); }
.kur-md ul, .kur-md ol { padding-left: 22px; }
.kur-md blockquote {
  margin: 1.2em 0; padding: 10px 16px; border-left: 3px solid var(--accent);
  background: var(--bg-elev); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--fg-muted);
}
.kur-md code { background: var(--bg-elev); padding: 2px 5px; border-radius: 5px;
               font-family: var(--ff-mono); font-size: .92em; }
.kur-md table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.kur-md th, .kur-md td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

/* Slide dirender di peramban dari JSON, BUKAN diambil sebagai gambar.
   1 juta gambar WebP ≈ 80 GB dan antrean konversinya berhari-hari; sebagai data
   ia ±2 KB per slide dan lahir seketika. Unduhan PPTX/PDF dibuat saat diminta. */
.kur-slides { display: grid; gap: 12px; margin: 18px 0; }
.kur-slide {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.kur-slide-n { font-size: var(--fs-xs); color: var(--fg-faint); }
.kur-slide h4 { margin: 4px 0 10px; font-size: 1.05rem; }
.kur-slide ul { margin: 0; padding-left: 20px; }
.kur-slide li { margin-bottom: 6px; line-height: 1.5; }
.kur-slide-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
                  color: var(--fg-muted); font-size: var(--fs-sm); }

/* ── Kuis ────────────────────────────────────────────────────────────────── */
.kur-kuis { display: grid; gap: 18px; margin: 18px 0; }
.kur-soal { background: var(--bg-card); border: 1px solid var(--line);
            border-radius: var(--r-lg); padding: 18px 20px; }
.kur-soal p { margin: 0 0 12px; line-height: 1.6; }
.kur-opsi { display: grid; gap: 8px; }
.kur-opsi label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
                  padding: 9px 12px; border: 1px solid var(--line);
                  border-radius: var(--r-md); transition: border-color var(--t-fast); }
.kur-opsi label:hover { border-color: var(--accent); }
.kur-opsi input { margin-top: 3px; }
.kur-soal.benar { border-color: var(--ok); }
.kur-soal.salah { border-color: var(--bad); }
.kur-bahas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
             color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.6; }
.kur-skor { font-size: var(--fs-h3); margin: 0 0 6px; }
.kur-skor.lulus { color: var(--ok); }
.kur-skor.belum { color: var(--warn); }

/* ── Sisi kanan ruang belajar ────────────────────────────────────────────── */
.kur-sisi { position: sticky; top: 76px; align-self: start; }
.kur-sisi h4 { font-size: var(--fs-sm); text-transform: uppercase;
               letter-spacing: .06em; color: var(--fg-faint); margin: 0 0 10px; }
.kur-daftar { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 3px; }
.kur-daftar a { display: block; padding: 7px 10px; border-radius: var(--r-md);
                color: var(--fg-muted); text-decoration: none; font-size: var(--fs-sm);
                line-height: 1.45; }
.kur-daftar a:hover { background: var(--bg-elev); color: var(--fg); }
.kur-daftar a.aktif { background: var(--accent-soft); color: var(--accent); }

.kur-terkunci {
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--r-lg); padding: 22px; text-align: center; margin: 26px 0;
}
.kur-terkunci h3 { margin: 0 0 8px; }
.kur-terkunci p  { color: var(--fg-muted); margin: 0 0 16px; line-height: 1.55; }

.kur-kosong { text-align: center; padding: 56px 20px; color: var(--fg-muted); }
.kur-lanjut { display: block; margin: 26px auto 0; }

/* Audio narasi per unit. `preload="none"` disengaja: satu modul bisa punya 7
   unit ber-audio, dan memuat ketujuhnya di muka membuang kuota data pembelajar
   untuk berkas yang mungkin tidak satu pun diputar. */
.kur-audio { width: 100%; max-width: 520px; margin: 6px 0 16px; display: block; }

/* ── Sampul generatif kelas ────────────────────────────────────────────────
   Dirakit dari data, bukan berkas: 10.500 thumbnail sebagai gambar berarti
   puluhan gigabyte yang harus dibuat, disimpan, dan dibangun ulang tiap kali
   gayanya berubah. Rasio dikunci lewat aspect-ratio, bukan padding-hack —
   tidak ada apa pun yang "selesai dimuat", jadi kartu tidak pernah melompat. */
.kur-sampul {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--sp-sudut),
      var(--sp-gelap) 0%, var(--sp-tengah) 58%, var(--sp-terang) 132%);
}
/* Cahaya diletakkan per-kelas. Inilah yang membuat dua kelas serak — warna
   dasar sama persis — tetap punya wajah sendiri tanpa menambah palet baru. */
.kur-sampul-cahaya {
  position: absolute; inset: 0;
  background: radial-gradient(58% 78% at var(--sp-cx) var(--sp-cy),
    color-mix(in srgb, var(--sp-terang) var(--sp-kuat), transparent) 0%,
    transparent 68%);
}
.kur-sampul-pola {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.2); stroke-width: 1.1;
  transition: fill var(--t-fast), stroke var(--t-fast);
}
.kur-sampul-pola path { fill: none; }
/* Scrim bawah. Dulu hanya meredam tepi; sekarang ia menopang KETERBACAAN
   judul yang dicetak di atasnya, jadi kepekatannya dinaikkan. Sembilan geseran
   rona berarti sebagian sampul jauh lebih terang dari yang lain, dan teks putih
   tanpa peredam akan hilang di antaranya. */
.kur-sampul-scrim {
  position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(transparent, rgba(2, 10, 26, .55));
}
/* Plat ikon — titik fokus. Kaca buram, bukan bidang penuh: ia harus terbaca di
   atas gradien apa pun, termasuk yang paling terang. */
/* ⚠️ IKON DIKECILKAN JADI AKSEN, bukan lagi plat besar di kiri-bawah.
   Judul sekarang menempati sudut itu, dan dua titik fokus berarti tidak ada
   titik fokus sama sekali — mata melompat bolak-balik lalu melewatkan keduanya. */
.kur-sampul-ikon {
  position: absolute; right: 11px; bottom: 10px;
  display: flex; opacity: .82;
}
.kur-sampul-ikon svg {
  width: 22px; height: 22px; stroke: #fff; stroke-width: 1.7; fill: none;
  filter: drop-shadow(0 1px 3px rgba(2, 10, 26, .45));
}

/* Judul di sampul — inilah yang membuat kartu diklik.
   Dicetak sebagai SVG ber-viewBox supaya ukurannya menskala persis mengikuti
   lebar kartu: sama proporsional di kartu 250 px maupun hero 1.100 px, tanpa
   satu pun media query. Bayangannya WAJIB — gradien di sini bergerak sembilan
   rona dan teks putih polos akan hilang di sebagian di antaranya. */
.kur-sampul-judul {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.kur-sampul-judul text {
  fill: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  paint-order: stroke;
  stroke: rgba(2, 10, 26, .38); stroke-width: 2.2px; stroke-linejoin: round;
}
/* Label rak: penanda yang bisa DIPINDAI MATA. Dengan 10.500 kelas, "kelas ini
   dari rak mana" adalah pertanyaan pertama yang muncul — dan menjawabnya lewat
   warna saja menuntut orang menghafal 14 palet. */
.kur-sampul-label {
  position: absolute; right: 11px; top: 10px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fff;
  background: rgba(2,10,26,.34); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.kur-card:hover .kur-sampul-pola { fill: rgba(255,255,255,.2); stroke: rgba(255,255,255,.3); }
.kur-card:hover .kur-sampul-ikon { opacity: 1; }
/* Tema terang: sedikit diredam supaya judul di bawahnya tetap yang pertama
   dibaca — sampul ini penanda, bukan pusat perhatian. */
:root[data-theme="light"] .kur-sampul { filter: saturate(.95) brightness(.97); }

/* ── Sampul HERO di halaman kelas ──────────────────────────────────────────
   ⚠️ NAMANYA `kur-kelas-hero`, BUKAN `kur-hero`. Percobaan pertama memakai
   `.kur-hero` — nama yang SUDAH dipakai sebagai kepala halaman /kurikulum dan
   /kurikulum/{rak} sejak lama (lihat baris ~7). Aturan baru menimpanya dengan
   `margin-bottom: -46px`, `min-height: 168px`, dan `overflow: hidden`, jadi
   judul kedua halaman itu tertarik turun 46px dan TUMPANG TINDIH dengan teks di
   bawahnya. Tidak ada galat di mana pun — CSS memang tidak mengeluh saat dua
   aturan berebut nama yang sama, ia hanya memakai yang terakhir.

   Sampul yang SAMA dengan kartunya, hanya lebih besar dan lebih rendah
   rasionya. Orang yang mengklik kartu biru-teal berpola lingkaran harus
   mendarat di halaman yang terasa seperti tempat yang sama; sampul berbeda
   antara daftar dan tujuan membuat orang ragu ia mengklik yang benar. */
.kur-kelas-hero {
  position: relative; display: block; margin: 0 0 -46px;
  aspect-ratio: 40 / 9; min-height: 168px; border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(var(--sp-sudut),
    var(--sp-gelap) 0%, var(--sp-tengah) 58%, var(--sp-terang) 132%);
}
.kur-kelas-hero .kur-sampul-cahaya { position: absolute; inset: 0;
  background: radial-gradient(58% 78% at var(--sp-cx) var(--sp-cy),
    color-mix(in srgb, var(--sp-terang) var(--sp-kuat), transparent) 0%, transparent 68%); }
.kur-kelas-hero .kur-sampul-pola { position: absolute; inset: 0; width: 100%; height: 100%;
  fill: rgba(255,255,255,.13); stroke: rgba(255,255,255,.19); stroke-width: 1; }
.kur-kelas-hero .kur-sampul-pola path { fill: none; }
/* Judul duduk DI ATAS tepi bawah hero (margin negatif), jadi bagian bawahnya
   diredam supaya teks tetap yang pertama terbaca. */
.kur-kelas-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(transparent, rgba(2,10,26,.5));
}

.kur-kelas-hero-label {
  position: absolute; right: 18px; top: 20px; z-index: 1;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  background: rgba(2,10,26,.36); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Kepala kelas naik ke atas hero, dengan latar kartu supaya terbaca penuh. */
.kur-kelas-head--berhero {
  position: relative; z-index: 1; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; margin: 0 14px 26px;
  box-shadow: 0 6px 22px rgba(2,10,26,.22);
}
@media (max-width: 640px) {
  .kur-kelas-hero { aspect-ratio: 24 / 9; min-height: 132px; margin-bottom: -34px; }
  .kur-kelas-head--berhero { margin: 0 8px 20px; padding: 15px 16px; }
}

/* Penanda rak di baris jalur belajar. Sengaja kecil: jalur adalah daftar
   BERURUTAN, dan nomor langkahnya harus tetap yang paling menonjol. */
.kur-jalur-chip {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-right: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
}
.kur-jalur-chip svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 1.8; fill: none; }

/* Cermin pola — satu bit hash yang MENGGANDAKAN jumlah wajah tanpa menambah
   satu bentuk pun. Dipantulkan secara horizontal saja; memantulkan vertikal
   membuat pola bertangga dan berbatang terlihat terbalik dan salah. */
.kur-pola-cermin { transform: scaleX(-1); }

/* Sampul modul: lebih pendek dari hero kelas. Halaman modul isinya panjang —
   tujuh unit ditambah kuis — dan sampul setinggi hero kelas mendorong materinya
   turun sampai orang harus menggulir sebelum membaca kalimat pertama. */
.kur-modul-hero { aspect-ratio: 56 / 9; min-height: 124px; margin-bottom: -38px; }
@media (max-width: 640px) {
  .kur-modul-hero { aspect-ratio: 30 / 9; min-height: 104px; margin-bottom: -30px; }
}

/* Kartu katalog yang berupa kelas kurikulum memakai sampul penuh; wadah cover
   bawaan disembunyikan supaya tidak ada dua kotak bertumpuk. */
.er-card .kur-sampul { border-radius: 0; border-bottom: 1px solid var(--line); }