/* ============================================================
   RUANG KELAS
   Memakai token warna/font dari styles.css (:root, .button-dark,
   .button-outline, .button-pink, .text-link, .section-kicker, dan
   mekanisme reveal [data-reveal] sudah didefinisikan di sana). File
   ini hanya berisi layout dan state khusus halaman ini.

   Struktur dua zona:
   - .kelas-hero   gelap, ber-shader (dipakai ulang dari index.html),
                   isinya gerbang login lalu sapaan personal
   - .kelas-functional  terang, isinya kartu-kartu aksi -- kontras
                   tinggi karena di sinilah orang benar-benar mengklik
   ============================================================ */

.kelas-body {
  min-height: 100vh;
  background: var(--paper);
}

/* Atribut [hidden] bawaan browser kalah dari class display apa pun di
   sini (kelas-signin-box dst pakai display:flex), berapa pun spesifik
   selectornya -- stylesheet penulis selalu menang atas stylesheet
   browser. Tanpa baris ini, state yang harusnya tersembunyi tetap
   kelihatan walau kelas.js sudah benar men-toggle atribut hidden-nya.
   Bug ini sudah pernah kejadian sekali di halaman ini. */
[hidden] {
  display: none !important;
}

/* ============================================================
   ZONA GERBANG (gelap, ber-shader)
   ============================================================ */

.kelas-hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
  background: var(--black);
}

.hero-shader {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Scrim menjaga teks putih tetap terbaca berapa pun terangnya keluaran
   shader -- perhitungan sama seperti di index.html: worst-case warna
   shader (#ffd7ef) dikomposit dengan alpha ini masih kontras tinggi
   terhadap teks putih. Sengaja lebih gelap/redup daripada hero
   index.html; halaman ini "ruang privat", bukan halaman jualan. */
.kelas-hero-scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.7) 45%,
    rgba(0, 0, 0, 0.9) 100%
  );
  pointer-events: none;
}

/* Fallback CSS murni kalau WebGL tidak tersedia. shader-background.js
   menambahkan .has-shader ke parentElement canvas begitu berhasil,
   yang mematikan glow ini karena shader sudah menyediakan gerakan
   serupa. */
.kelas-hero-glow {
  position: absolute;
  z-index: 0;
  top: -20%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgba(255, 172, 223, 0.16), rgba(255, 172, 223, 0) 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.kelas-hero.has-shader .kelas-hero-glow {
  opacity: 0;
}

.kelas-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.6rem 0;
  color: var(--white);
}

.kelas-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
}

.kelas-brand img {
  width: 84px;
  height: auto;
}

.kelas-brand > span {
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.kelas-back {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
}

.kelas-back:hover,
.kelas-back:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-underline-offset: 0.2em;
}

.kelas-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rem 0 6rem;
  text-align: center;
}

.kelas-hero-content .section-kicker {
  margin-bottom: 1.3rem;
}

/* Dipakai di kelima state gerbang (signin/loading/welcome/denied/error).
   text-align:center yang diwariskan dari .kelas-hero-content HANYA
   merapikan teks DI DALAM kotak sebuah elemen -- elemen yang punya
   max-width (mis. .kelas-hero-desc) tetap nempel ke kiri kotak
   induknya kalau tidak ada margin:auto atau flexbox aktif, karena
   text-align tidak pernah mengatur POSISI kotak, cuma isinya. Flexbox
   di sini yang benar-benar memusatkan setiap kotak anak, apa pun
   lebar max-width masing-masing. */
.kelas-gate-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kelas-hero-content h1 {
  max-width: 720px;
  margin: 0 0 1.3rem;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.kelas-hero-content h1 em {
  color: var(--white);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.08em;
}

.kelas-hero-desc {
  max-width: 460px;
  margin: 0 0 2.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

/* Kartu kaca tipis di sekitar tombol Google -- menahan tombol putih
   Google agar tidak terasa mengambang begitu saja di atas shader. */
.kelas-signin-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.kelas-hint {
  max-width: 380px;
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

/* Dipusatkan secara eksplisit lewat flex, bukan mengandalkan text-align
   warisan -- nama Indonesia sering panjang dan bisa membungkus 3-4
   baris, jadi pemusatannya harus pasti berapa pun lebar barisnya. */
.kelas-avatar {
  width: 88px;
  height: 88px;
  margin: 0 0 1.5rem;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

/* Lebih kecil daripada .kelas-hero-content h1 biasa (yang dirancang
   untuk headline pendek seperti "Materi kelasmu, satu langkah lagi").
   Nama orang bisa jauh lebih panjang, jadi avatar yang jadi fokus
   utama di sini, bukan ukuran teksnya. */
#kelas-greeting {
  max-width: 520px;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}

.kelas-status {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.kelas-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: kelas-spin 700ms linear infinite;
}

/* prefers-reduced-motion dihormati lewat aturan global di styles.css
   (menimpa animation-duration jadi 0.01ms untuk semua elemen), jadi
   tidak perlu duplikasi aturan itu di sini. */
@keyframes kelas-spin {
  to {
    transform: rotate(360deg);
  }
}

.kelas-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  color: var(--white);
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
}

.kelas-scroll-cue span {
  display: inline-block;
  color: var(--pink);
  animation: kelas-bob 1.6s ease-in-out infinite;
}

@keyframes kelas-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

.kelas-scroll-cue:hover,
.kelas-scroll-cue:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-underline-offset: 0.22em;
}

#kelas-gate-denied h1,
#kelas-gate-error h1 {
  max-width: 560px;
  margin: 0 0 1rem;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.04em;
}

#kelas-gate-denied strong,
#kelas-gate-error strong {
  color: var(--white);
}

/* ============================================================
   ZONA FUNGSIONAL (terang)

   Bahasa visual di sini terinspirasi dari layout grid kartu ala Hims
   (headline besar + kata aksen berwarna, grid kartu bulat dengan ikon
   dan chevron) -- tapi warnanya tetap palet EQUAL sendiri (pink/hitam/
   paper), bukan cream/oranye Hims, supaya konsisten sama .kelas-hero
   di atas (yang sengaja TIDAK diubah) dan index.html.

   Kartu "aksen pink" pada kata di judul (h3 em) sengaja dibikin sebagai
   HIGHLIGHT BACKGROUND (bukan warna teks pink), karena pink (#ffacdf)
   sebagai warna TEKS di atas putih/paper kontrasnya jauh di bawah
   standar WCAG (~1.75:1, minimum 3:1 untuk teks besar) -- baru cocok
   dipakai di headline raksasa index.html yang skalanya jauh lebih
   besar. Di skala judul kartu (h3, ~1.1-1.3rem) itu bakal kebaca pudar
   dan susah dibaca, jadi solusinya: teks tetap hitam, pink jadi
   BACKGROUND highlight di belakangnya -- kontras tetap penuh, efek
   "kata beraksen" tetap dapat.
   ============================================================ */

.kelas-functional {
  position: relative;
  padding: 4.2rem 0 6rem;
  overflow: hidden;
  background: var(--black);
}

/* ---- Latar morphic (partikel pink yang saling meleleh) ----
   Dua lapis: .kelas-morphic sebagai kotak pembatas (clip + z-index),
   .kelas-morphic-particles sebagai kanvas tempat partikel SVG dibuat
   morphic-background.js. Filter goo-nya dipasang di lapisan dalam saja,
   supaya blur besarnya tidak ikut kena ke apa pun selain partikel.

   pointer-events:none supaya lapisan ini tidak pernah mencuri klik dari
   kartu di atasnya (link Zoom/Drive/kuis semuanya harus tetap bisa
   diklik). */
.kelas-morphic {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kelas-morphic-particles {
  position: absolute;
  inset: 0;
  filter: url("#goo");
}

/* Definisi <filter> tidak boleh ikut memakan tempat di layout. width/
   height 0 saja tidak cukup di sebagian browser, jadi dikunci absolut. */
.kelas-morphic-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Partikel murni dekoratif: begitu pengguna minta gerakan dikurangi,
   morphic-background.js berhenti membuat partikel sama sekali, dan
   lapisannya disembunyikan supaya tidak ada sisa bulatan yang diam di
   tempat (yang justru bikin latar kelihatan "rusak", bukan tenang). */
@media (prefers-reduced-motion: reduce) {
  .kelas-morphic {
    display: none;
  }
}

.kelas-shell {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100% - 3rem));
  margin: 0 auto;
}

/* Warna di sini SENGAJA putih/putih-pudar, bukan var(--ink-muted)/
   var(--black) seperti sisa situs -- zona ini sekarang berlatar gelap
   (lihat .kelas-functional), jadi token warna "teks di atas terang"
   yang dipakai di mana-mana lainnya justru nyaris tak kebaca di sini. */
.kelas-welcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.kelas-welcome-bar strong {
  color: var(--white);
}

#kelas-signout {
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

#kelas-signout:hover,
#kelas-signout:focus-visible {
  color: var(--white);
}

/* ---- Headline "Ruang kelasmu, siap dipakai." -- satu-satunya
   headline besar di zona fungsional, ganti peran .kelas-welcome-bar
   sebagai pembuka visual (welcome-bar sekarang cuma strip kecil di
   atasnya, bukan lagi elemen utama). ---- */

.kelas-materi-head {
  margin-bottom: 2.4rem;
}

.kelas-materi-title {
  margin: 0 0 0.6rem;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}

.kelas-materi-title em {
  /* color eksplisit HITAM di sini -- bukan cuma estetika. Aturan
     global "h2 em { color: var(--pink) }" di styles.css otomatis
     kena ke elemen ini juga (judul ini memang <h2>), dan cascade CSS
     jalan per-PROPERTY, bukan per-selector -- jadi tanpa baris ini,
     teks pink itu tetap kepasang DI ATAS background pink-light di
     bawahnya, nyaris tak terbaca (pink-di-atas-pink). Ketauan lewat
     tes langsung di browser, bukan cuma baca kode. */
  color: var(--black);
  font-style: normal;
  background: var(--pink-light);
  padding: 0.03em 0.25em;
  border-radius: 8px;
}

.kelas-materi-lede {
  margin: 0;
  max-width: 420px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.96rem;
  line-height: 1.55;
}

/* ---- Bahasa kartu bersama: dipakai baik oleh kartu Zoom (hero),
   kartu standar (Drive/WhatsApp), maupun kartu lebar (Jadwal/Latihan/
   Pengumuman) di bawah. Radius lebih besar (20px, dari 4px versi
   lama) dan tanpa border tegas -- kesan lebih lunak/ramah, sejalan
   dengan referensi. ---- */

.kelas-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.kelas-tile:hover {
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.28);
  transform: translateY(-3px);
}

.kelas-tile:hover .kelas-tile-icon {
  transform: scale(1.06);
}

.kelas-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.1rem;
}

.kelas-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--paper);
  border-radius: 14px;
  transition: transform 240ms var(--ease-out);
}

.kelas-tile-icon img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}

/* Badge pink solid (kontras tinggi, hitam-di-atas-pink sudah teruji
   -- lihat pola yang sama di .kelas-schedule-badge) dipakai buat
   penanda "LIVE" di kartu Zoom. Varian "quiet" (garis tipis, tanpa
   isian) dipakai buat label kategori kartu lebar yang tidak butuh
   urgensi (Jadwal/Latihan Soal/Pengumuman). */
.kelas-tile-badge {
  padding: 0.28rem 0.62rem;
  color: var(--black);
  background: var(--pink);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.kelas-tile-badge-quiet {
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line);
}

.kelas-tile h3 {
  margin: 0 0 0.5rem;
  color: var(--black);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.kelas-tile h3 em {
  font-style: normal;
  background: var(--pink-light);
  padding: 0.03em 0.25em;
  border-radius: 5px;
}

.kelas-tile-desc {
  margin: 0 0 1.2rem;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Link bergaya chevron (bukan tombol solid seperti sebelumnya) --
   lebih ringan, cocok buat kartu yang isinya cuma "satu tujuan, satu
   link". Anak panah "↗" (bukan ">" ala referensi) sengaja dipertahankan
   -- sudah jadi konvensi seluruh situs buat link yang buka tab baru,
   ganti ke ">" di sini doang bakal bikin dua bahasa link berbeda di
   satu situs yang sama. */
.kelas-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.2rem;
  color: var(--black);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 700;
}

.kelas-tile-link span {
  transition: transform 200ms var(--ease-out);
}

.kelas-tile:hover .kelas-tile-link span,
.kelas-tile-link:focus-visible span {
  transform: translate(2px, -2px);
}

.kelas-tile-link:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Grid utama: Zoom jadi tile "hero" selebar penuh (paling
   nonjol, sesuai timer live di dalamnya butuh ruang), Drive & WhatsApp
   berbagi baris standar di bawahnya. ---- */

.kelas-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kelas-tile-live {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.4rem;
  background: var(--pink-light);
  border-color: var(--black);
}

.kelas-tile-live .kelas-tile-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: var(--white);
}

.kelas-tile-live .kelas-tile-icon img {
  width: 42px;
  height: 42px;
}

.kelas-tile-live-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.kelas-tile-live-body .kelas-tile-top {
  margin-bottom: 0.7rem;
}

/* Chip timer -- putih di atas dasar pink-light kartu, supaya angka
   yang jalan tiap detik ("2 jam 13 menit lagi...") tetap kelihatan
   "hidup" dan beda dari dasar kartunya sendiri. */
.kelas-zoom-timer {
  margin: 0 0 1.2rem;
  padding: 0.5rem 0.75rem;
  color: var(--black);
  background: var(--white);
  border-radius: 10px;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Tumpukan kartu lebar: Jadwal, Latihan Soal, Pengumuman --
   masing-masing butuh lebar penuh karena isinya panjang/variabel
   (daftar sesi, tiga sub-item kuis, teks bebas pengumuman). ---- */

.kelas-wide-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kelas-tile-wide {
  width: 100%;
}

/* Pengumuman: kartu paling "diam" -- isinya teks bebas, bukan ajakan
   bertindak, jadi sengaja tidak ikut hover-lift seperti kartu aksi
   lainnya supaya tidak terasa "bisa diklik" padahal bukan. */
.kelas-tile-quiet:hover {
  box-shadow: none;
  transform: none;
}

/* ---- Latihan soal EPT UI (Wayground): satu kotak, tiga kartu ala
   .program-symbol index.html (huruf gede, label kecil, angka urut).
   BEDA PENTING dari index.html: huruf di sini normal-flow, BUKAN
   position:absolute. .program-symbol absolut ukuran tetap (18rem) itu
   yang bikin bug nabrak judul waktu card menyempit ke satu kolom di
   mobile (lihat catatan di index.html). Karena huruf di sini ikut alur
   dokumen biasa, dia otomatis mendorong judul turun -- jadi bug yang
   sama tidak mungkin terulang di lebar kartu manapun, termasuk saat
   grid ini turun ke satu kolom di bawah 640px. ---- */

.kelas-practice-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.kelas-practice-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.3rem;
  background: var(--paper);
  border-radius: 14px;
}

.kelas-practice-pink { background: var(--pink); }
.kelas-practice-white { background: var(--white); border: 1px solid var(--line); }
.kelas-practice-paper { background: var(--paper); }

.kelas-practice-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: var(--black);
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.kelas-practice-letter {
  color: var(--black);
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.kelas-practice-white .kelas-practice-letter { color: var(--pink); }

.kelas-practice-name {
  color: var(--black);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.kelas-practice-item .button {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.6rem 1.1rem;
  font-size: 0.8rem;
}

/* ---- Kuis terkunci: server (computePracticeUnlocks di
   api/verify-access.js) menentukan status ini lewat jadwal, JS
   (applyPracticeLock di kelas.js) yang menerapkannya ke DOM. Huruf
   raksasa & nama tetap kelihatan normal (biar siswa tetap tau kuis
   apa aja yang ada), cuma tombolnya yang berubah jadi non-aktif. ---- */

.kelas-practice-item.is-locked .kelas-practice-letter,
.kelas-practice-item.is-locked .kelas-practice-name {
  opacity: 0.45;
}

.kelas-practice-item.is-locked .button {
  color: var(--ink-muted);
  cursor: not-allowed;
  background: transparent;
  border: 1px solid var(--line);
}

.kelas-practice-item.is-locked .button:hover {
  color: var(--ink-muted);
  background: transparent;
}

/* Dipakai bareng kuis (di dalam .kelas-practice-item) dan kartu Zoom
   (di dalam .kelas-tile-live-body) -- makanya nama class-nya generik,
   bukan .kelas-practice-*. */
.kelas-lock-note {
  margin: -0.4rem 0 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* ---- Kartu Zoom terkunci: link jadi non-aktif, mirip tombol kuis
   terkunci tapi .kelas-tile-link punya style beda dari .button. ---- */

.kelas-tile-link[aria-disabled="true"] {
  color: var(--ink-muted);
  cursor: not-allowed;
}

.kelas-tile-link[aria-disabled="true"] span {
  transform: none !important;
}

.kelas-announcement {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---- Jadwal kelas: daftar sesi yang akan datang, diambil dari sheet
   utama EQUAL. Sesi pertama (is-next) ditonjolkan dengan badge dan
   warna beda -- itu juga sesi yang jadi acuan timer di kartu Zoom. ---- */

/* Progres batch di kartu jadwal. Angkanya dari server, karena daftar
   sesi di bawahnya cuma memuat yang belum lewat (lihat renderProgres
   di kelas.js). Ditaruh di atas daftar supaya yang pertama terbaca
   adalah "sudah sampai mana", baru kemudian "berikutnya kapan". */
.kelas-progres {
  /* .kelas-tile memakai align-items:flex-start, jadi anak yang mau
     selebar kartu harus menyatakannya sendiri. */
  width: 100%;
  margin: 0 0 1.1rem;
}

.kelas-progres-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.kelas-progres-teks {
  font-size: 0.85rem;
  font-weight: 600;
}

.kelas-progres-persen {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.kelas-progres-rel {
  height: 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.kelas-progres-isi {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--pink);
  transition: width 600ms var(--ease-out);
}

/* Bar yang tumbuh dari nol itu hiasan, bukan informasi -- angkanya
   sudah tertulis di sebelahnya. Jadi boleh dimatikan sepenuhnya. */
@media (prefers-reduced-motion: reduce) {
  .kelas-progres-isi {
    transition: none;
  }
}

.kelas-schedule-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kelas-schedule-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-radius: 14px;
}

.kelas-schedule-item.is-next {
  background: var(--pink-light);
}

.kelas-schedule-date {
  color: var(--black);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
}

.kelas-schedule-topic {
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.kelas-schedule-badge {
  margin-left: auto;
  padding: 0.22rem 0.55rem;
  color: var(--black);
  background: var(--pink);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ============================================================
   RESPONSIF
   ============================================================ */

@media (max-width: 900px) {
  .kelas-hero-content { padding: 7.4rem 0 5rem; }
  .kelas-header { width: min(100% - 2rem, 1180px); }
}

@media (max-width: 640px) {
  .kelas-hero { min-height: 92vh; }
  .kelas-hero-content { padding: 6.6rem 0 4.4rem; }
  .kelas-brand > span { display: none; }
  .kelas-tile-grid { grid-template-columns: 1fr; }
  .kelas-practice-grid { grid-template-columns: 1fr; }
  /* Sama seperti IS_NARROW di morphic-background.js (breakpoint 640px
     yang sama, sengaja disamakan): partikelnya dimatikan total lewat JS
     (running() selalu false), jadi kotak ini kosong -- disembunyikan
     juga di CSS supaya filter goo tidak diproses sama sekali buat
     elemen kosong. */
  .kelas-morphic { display: none; }
}

/* Tile Zoom (kelas-tile-live) turun jadi tumpukan vertikal di layar
   sempit -- ikon 60px + body di sampingnya kebentur lebar kalau tetap
   dipaksa horizontal di bawah ~480px. */
@media (max-width: 480px) {
  .kelas-tile-live {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .kelas-signin-box { padding: 1.2rem; }
  .kelas-tile {
    padding: 1.3rem;
  }
  .kelas-welcome-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   FORM TESTIMONI (di kartu Final Test)
   ============================================================
   Kartunya berdiri di zona fungsional yang terang, jadi isiannya
   memakai gaya yang sama dengan formulir /daftar: kotak terang,
   border tipis, fokus pink. */

.testi-form {
  width: 100%;
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.testi-field {
  display: block;
}

.testi-field > span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Penanda "(boleh dikosongkan)" dan "(wajib)" di dalam label. Dibedakan
   dengan warna dan berat font, bukan cuma tanda kurung, supaya terbaca
   sekilas tanpa harus membaca seluruh labelnya. */
.testi-field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-muted);
}

.testi-field input[type='text'],
.testi-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--black);
}

.testi-field textarea {
  resize: vertical;
}

.testi-field input[type='text']:focus,
.testi-field textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--white);
}

.testi-field small {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.testi-aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.testi-status-kirim {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.45;
  /* Pesan gagal bisa panjang (berisi langkah yang harus dikerjakan),
     jadi harus boleh membungkus, bukan mendorong tombolnya menyempit. */
  min-width: 0;
}

.testi-status-kirim[data-state='ok'] {
  color: #1a7f37;
}

.testi-status-kirim[data-state='error'] {
  color: var(--red);
}

/* Izin menampilkan cerita di halaman publik. Sengaja TIDAK dicentang
   dari awal: ini menerbitkan nama dan kalimat seseorang di halaman yang
   bisa dibaca siapa saja, jadi harus jadi pilihan sadar, bukan sesuatu
   yang terlewat karena sudah tercentang duluan. */
.testi-centang {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

.testi-centang input[type='checkbox'] {
  /* margin-top kecil menyejajarkan kotaknya dengan baris pertama teks,
     bukan dengan tengah seluruh paragraf yang bisa dua baris. */
  margin: 3px 0 0;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--pink);
  cursor: pointer;
}

.testi-catatan-izin {
  margin: 0;
  padding-left: 27px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Hitung mundur sampai Final Test dibuka. Dipisah dari teks status di
   atasnya karena angkanya berubah tiap detik, dan kalimat yang ikut
   berkedip tiap detik jadi susah dibaca. */
.final-timer {
  width: 100%;
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-muted);
}