/* 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(min(260px, 100%), 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); }
/* ⚠️ Judul modul MENGECIL saat judulnya panjang.
   `var(--fs-h1)` datar dibuat untuk judul pendek. Judul kurikulum ditulis model
   dan rutin melewati 60 karakter: "Modul 1 — Bekerja di Awan: Akun, Drive, dan
   Kebiasaan Menyimpan yang Benar" terpecah jadi LIMA baris dan memakan 450 px
   sendirian, mendorong seluruh isi modul ke bawah lipatan. Terukur 6 Sep 2026:
   peragaan modul itu duduk di 9.799 px pada halaman 32.915 px — videonya sehat,
   terlihat, dan bisa diputar, hanya tidak pernah ditemukan siapa pun.
   `clamp` menahan langit-langitnya tanpa mengecilkan judul pendek. */
.kur-kelas-head h1 {
  font-size: clamp(1.5rem, 2.4vw + 0.8rem, 2.35rem);
  margin: 8px 0 12px; line-height: 1.18; text-wrap: balance;
}
.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 {
  /* ⚠️ `width: 100%` WAJIB, dan bukan hiasan. Dengan `aspect-ratio` + `min-height`
     dan lebar `auto`, peramban MENURUNKAN lebar kotak ini dari tingginya lewat
     rasio (124px × 56/9 = 772px) alih-alih dari wadahnya. Selama halaman kelas
     dirender tanpa kerangka, wadahnya kebetulan 772px juga di tablet — jadi
     kotaknya pas, dan tidak ada yang tahu lebarnya tidak pernah mengikuti wadah.
     Begitu halaman masuk kerangka (rel 62px memakan lebar), wadahnya menyusut ke
     670px sementara kotak ini tetap 772px: tumpah 38px keluar layar, tanpa satu
     pun galat. Diukur di peramban 23 Agustus 2026, bukan dibaca dari kode. */
  position: relative; display: block; width: 100%; 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); }

/* ── Peragaan langsung ────────────────────────────────────────────────────
   Hanya dirender saat ada meja yang benar-benar menyiarkan, jadi gayanya boleh
   menonjol: kalau ia terlihat, ia memang bisa ditekan. */
.kur-live-ajak { margin: 10px 0 14px; }
.kur-live-tombol {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-card); color: var(--txt);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.kur-live-tombol:hover { border-color: var(--accent); }
.kur-live-titik {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  animation: kur-live-denyut 1.6s ease-in-out infinite;
}
@keyframes kur-live-denyut { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .kur-live-titik { animation: none; } }

/* Modul yang PUNYA peragaan langsung tetapi mejanya belum menyala. Sengaja
   dibuat tenang — ini keterangan, bukan tombol; tidak ada yang bisa ditekan
   sampai bimbingan suara dimulai. Tanpa baris ini modul yang sudah siap
   tampak persis sama dengan modul yang tidak punya peragaan sama sekali. */
.kur-live-siap {
  margin: 10px 0 14px; padding: 9px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--txt-2, var(--txt)); font-size: var(--fs-sm); line-height: 1.55;
}
.kur-live-siap strong { color: var(--txt); }
.kur-live-siap a { margin-left: .45em; color: var(--accent); font-weight: 600; }
.kur-live-siap a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Pita peragaan (atas modul) ───────────────────────────────────────────
   Jalan pintas ke peragaan, ditaruh di tempat mata jatuh pertama kali: figure
   peragaannya sendiri bisa berada beberapa layar di bawah. */
.kur-pita-peraga {
  margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-card);
}
.kur-pita-judul {
  display: block; margin-bottom: 9px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-muted);
}
.kur-pita-peraga ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; }
.kur-pita-peraga a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--line); text-decoration: none;
  color: var(--txt); font-size: var(--fs-sm); font-weight: 600; max-width: 340px;
}
.kur-pita-peraga a:hover { border-color: var(--accent); }
.kur-pita-peraga img {
  width: 96px; height: 54px; object-fit: cover; flex: none;
  border-radius: 4px; border: 1px solid var(--line);
}
.kur-tanda-peraga { color: var(--accent); font-size: .8em; margin-left: 5px; }
@media (max-width: 640px) {
  .kur-pita-peraga a { max-width: 100%; }
  .kur-pita-peraga img { width: 64px; height: 36px; }
}


/* ── Mode Presentasi (kurikulum-slide.js) ─────────────────────────────
   Slide disimpan sebagai DATA, jadi panggung ini merendernya dengan tipografi
   halaman — bukan menampilkan gambar. Warnanya diambil dari token yang sama
   dengan seluruh situs supaya presentasi ikut tema terang/gelap pengguna,
   bukan memaksakan satu warna yang benar di salah satunya saja. */
.kur-presentasi {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; padding: 9px 16px;
  background: var(--accent-soft, rgba(56,189,248,.12)); color: var(--accent, #38BDF8);
  border: 1px solid var(--accent, #38BDF8); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.kur-presentasi:hover { background: var(--accent, #38BDF8); color: #fff; }
.kur-presentasi:focus-visible { outline: 2px solid var(--accent, #38BDF8); outline-offset: 3px; }

.kps-bg {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(6, 12, 26, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.kps-bg[hidden] { display: none; }

.kps-panel {
  /* ⚠️ CADANGAN WAJIB, DAN BUKAN KERAPIAN.
     `--bg-elev` TIDAK didefinisikan di `:root` telanjang — hanya di dalam
     `:root[data-theme="dark"]` dan `[data-theme="light"]` (tokens.css:305 &
     415). Halaman yang belum sempat menyetel temanya, atau yang JS temanya
     gagal dimuat, membuat panel ini TEMBUS PANDANG: teks slide bertumpuk di
     atas isi halaman di baliknya, dan tak seorang pun bisa membaca keduanya.
     Terukur saat menguji berkas ini. Cadangannya gelap karena itulah rupa
     bawaan situs sebelum tema dipilih. */
  background: var(--bg-elev, #0F1729); border: 1px solid var(--line, #22304C);
  border-radius: var(--r-lg);
  width: min(980px, 100%); max-height: min(88vh, 700px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .6);
}

.kps-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line, #22304C);
}
.kps-hitung {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--fg-faint, #8494B0); letter-spacing: .06em;
}
.kps-bar-kanan { display: flex; align-items: center; gap: 10px; }

.kps-tanya {
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--accent-soft, rgba(56,189,248,.12)); color: var(--accent, #38BDF8);
  border: 1px solid var(--accent, #38BDF8);
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.kps-tanya:hover { background: var(--accent, #38BDF8); color: #fff; }
.kps-tanya[hidden] { display: none; }

.kps-tutup {
  background: none; border: 0; color: var(--fg-muted, #B6C3DA);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: var(--r-md);
}
.kps-tutup:hover { color: var(--fg, #E8EEF9); background: var(--bg-card, #131A2E); }

/* Isi slide: bidang yang lapang. Presentasi yang dipadatkan seperti kartu
   daftar kehilangan satu-satunya alasannya untuk ada. */
.kps-isi {
  flex: 1 1 auto; overflow-y: auto;
  padding: 36px 44px 30px; min-height: 0;
}
.kps-judul {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.2;
  margin: 0 0 24px; color: var(--fg, #E8EEF9); text-wrap: balance;
}
.kps-poin { margin: 0; padding-left: 26px; display: grid; gap: 14px; }
.kps-poin li {
  font-size: clamp(1rem, 1.9vw, 1.22rem); line-height: 1.55; color: var(--fg, #E8EEF9);
}
.kps-poin li::marker { color: var(--accent, #38BDF8); }

@keyframes kps-masuk-anim {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.kps-masuk { animation: kps-masuk-anim .26s ease-out; }
@media (prefers-reduced-motion: reduce) { .kps-masuk { animation: none; } }

.kps-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line, #22304C);
}
.kps-tombol {
  padding: 9px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line, #22304C); background: var(--bg-card, #131A2E);
  color: var(--fg, #E8EEF9); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.kps-tombol:hover:not(:disabled) { border-color: var(--accent, #38BDF8); color: var(--accent, #38BDF8); }
.kps-tombol:disabled { opacity: .38; cursor: default; }
.kps-tombol--utama { background: var(--accent, #38BDF8); color: #fff; border-color: var(--accent, #38BDF8); }
.kps-tombol--utama:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.kps-tombol:focus-visible { outline: 2px solid var(--accent, #38BDF8); outline-offset: 3px; }

.kps-titik { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kps-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line, #22304C); transition: background .2s, transform .2s;
}
.kps-dot--kini { background: var(--accent, #38BDF8); transform: scale(1.35); }

@media (max-width: 640px) {
  .kps-bg { padding: 0; }
  .kps-panel { max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .kps-isi { padding: 24px 20px 20px; }
  .kps-nav { padding: 11px 14px; }
  .kps-tombol { padding: 9px 13px; font-size: var(--fs-xs); }
}

/* Peragaan Meja Peraga di dalam unit ajar. */
.kur-peraga { margin: 16px 0 18px; }
.kur-peraga video {
  width: 100%; max-width: 860px; display: block;
  border-radius: var(--r-md, 8px); border: 1px solid var(--line, #22304C);
  background: #0A0E1A;
}
.kur-peraga figcaption {
  margin-top: 7px; font-size: var(--fs-xs);
  color: var(--fg-faint, #8494B0);
}

/* Bilah "Angkat tangan" di bawah peragaan — posisi + tombol bertanya. */
.kur-peraga-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.kur-peraga-posisi {
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: var(--fs-xs); color: var(--fg-faint, #8494B0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.kur-peraga-tanya {
  flex: 0 0 auto; padding: 7px 15px; border-radius: var(--r-pill, 999px);
  background: var(--accent-soft, rgba(56,189,248,.12));
  color: var(--accent, #38BDF8); border: 1px solid var(--accent, #38BDF8);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.kur-peraga-tanya:hover { background: var(--accent, #38BDF8); color: #fff; }
.kur-peraga-tanya:focus-visible { outline: 2px solid var(--accent, #38BDF8); outline-offset: 3px; }