/* =========================================================
   Kaigo Fukushishi Exam Prep — Custom styles
   Tailwind menangani utility; file ini untuk token & komponen.
   ========================================================= */

:root {
  --bg: #F3EEE1;
  --bg-deep: #EAE3D0;
  --surface: #FFFFFF;
  --ink: #1F2A3C;
  --indigo: #223A5E;
  --indigo-deep: #142235;
  --gold: #C9A24A;
  --beni: #B23A2E;
  --line: #DCD3BC;
  --success: #2E6F4E;
  --error: #B0413E;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20, 34, 53, 0.10);
}

html { scroll-behavior: smooth; }

/* Cegah halaman bisa digeser ke kanan (horizontal scroll).
   Penyebabnya biasanya satu elemen yang sedikit melebihi lebar layar
   — mis. teks Jepang panjang, tabel admin, atau grid yang tak muat di HP.
   `overflow-x: clip` mengunci sumbu X tanpa mematikan `position: sticky`
   pada header (berbeda dengan `overflow: hidden` yang merusaknya).
   `max-width: 100%` memastikan body tak pernah lebih lebar dari viewport. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 58, 94, 0.04), transparent 40%),
    var(--bg);
}

/* Jaring pengaman isi halaman: gambar/media tidak boleh melebihi kolomnya. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

/* Kata Jepang/URL panjang dipatahkan alih-alih memaksa halaman melebar. */
#view-root {
  overflow-wrap: anywhere;
}


/* =========================================================
 * HEADER — perilaku di layar smartphone
 * =========================================================
 * Di bawah 768px bar header hanya berisi judul + ikon ☰.
 * Tombol "Masuk" / "Lihat Paket" dipindah ke dalam menu ☰
 * (#auth-guest-mobile) supaya header tidak tinggi dan tidak melebar.
 *
 * Dipakai class CSS (bukan `md:flex` dari Tailwind) karena JS
 * `toggleFlex()` menambahkan `display:flex` inline-level lewat class
 * `.flex`; aturan di sini memakai `!important` agar tetap menang di
 * layar kecil apa pun urutan class-nya.
 */
@media (max-width: 767px) {
  #auth-guest.header-guest { display: none !important; }
}
@media (min-width: 768px) {
  /* Di desktop hanya tampil bila tamu (JS melepas class `hidden`). */
  #auth-guest.header-guest:not(.hidden) { display: flex; }
}

/* Versi mobile tombol tamu — hanya muncul di dalam menu ☰. */
#auth-guest-mobile:not(.hidden) { display: flex; }
@media (min-width: 768px) {
  #auth-guest-mobile { display: none !important; }
}

/* Tombol ☰ dan panel navigasi mobile.
 * Keduanya sudah memakai `md:hidden`, tetapi `.btn` di file ini
 * menetapkan `display: inline-flex` dan dimuat SETELAH tailwind.css —
 * karena spesifisitasnya seri (satu class lawan satu class), aturan
 * belakangan yang menang dan ☰ tetap muncul di desktop. Aturan berikut
 * mengembalikan perilaku yang dimaksud: hilang mulai 768px ke atas. */
@media (min-width: 768px) {
  #btn-menu,
  #mobile-nav { display: none !important; }
}


/* Tekstur washi tipis */

.washi-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(31, 42, 60, 0.015) 0 1px,
    transparent 1px 90px
  );
}

/* ===================== KOMPONEN ===================== */

/* Kartu dasar.
 * `styles.css` dimuat SETELAH `tailwind.css`, jadi `background` di sini
 * mengalahkan utility Tailwind seperti `bg-indigoK` meski spesifisitasnya
 * sama (bila seri, aturan yang ditulis belakangan yang menang). Itulah
 * sebab blok CTA `class="card bg-indigoK"` sempat berubah jadi putih.
 * Penanganannya ada pada blok "Kartu berwarna" tepat di bawah.
 */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

/* Kartu berwarna (blok CTA di beranda: `class="card bg-indigoK"`).
 *
 * Warnanya disamakan dengan tombol utama `.btn-primary`, yaitu
 * `var(--indigo)` (#223A5E) — satu nada indigo yang sama dipakai di
 * seluruh aksi utama situs, sehingga CTA dan tombolnya terasa menyatu.
 *
 * Ditulis eksplisit di sini karena `.card` (dimuat setelah tailwind.css)
 * akan menimpa utility `bg-indigoK` bila spesifisitasnya seri; selektor
 * dua-class di bawah membuat aturan ini yang menang. */
.card.bg-indigoK {
  background: var(--indigo);
  border-color: transparent;
}

/* Varian kartu berwarna lain memakai pola yang sama. */
.card.bg-gold      { background: var(--gold);     border-color: transparent; }
.card.bg-beni      { background: var(--beni);     border-color: transparent; }
.card.bg-successK  { background: var(--success);  border-color: transparent; }
.card.bg-washiDeep { background: var(--bg-deep);  border-color: transparent; }




.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-deep); }

.btn-outline { background: transparent; color: var(--indigo); border-color: var(--line); }
.btn-outline:hover { background: var(--bg-deep); }

/* Varian di atas latar gelap (blok CTA `card bg-indigoK`).
 * `.btn-outline` memakai warna indigo yang sama dengan latarnya, sehingga
 * tulisan "Masuk" nyaris tak terbaca. Utility `text-white` dari Tailwind
 * kalah karena styles.css dimuat belakangan — jadi dipaksa putih di sini.
 * Selektor `.btn-outline.text-white` (dua class) juga menang atas
 * `.btn-outline` biasa tanpa perlu !important. */
.btn-outline.text-white { color: #fff; }
.btn-outline.text-white:hover { background: rgba(255, 255, 255, .12); color: #fff; }


/* Tombol aksi destruktif (hapus) di Panel Admin */
.btn-danger { background: transparent; color: var(--beni); border-color: var(--beni); }
.btn-danger:hover { background: rgba(178, 58, 46, .08); }

/* Tombol KONTAK ADMIN via WhatsApp.
 * Sejak paket dijual lewat store.kaigokiroku.id, WhatsApp bukan lagi CTA
 * utama — jadi varian `outline` yang dipakai di kebanyakan tempat supaya
 * tidak bersaing dengan tombol "Lihat Paket". */
.btn-wa { background: #25D366; color: #0b2e1a; }
.btn-wa:hover { background: #1EBE5B; }
.btn-wa-outline { background: transparent; color: #128C7E; border-color: #25D366; }
.btn-wa-outline:hover { background: rgba(37, 211, 102, .12); }

/* Tombol "Lihat Paket" → store.kaigokiroku.id.
 * Emas: satu-satunya warna hangat pada palet, jadi CTA beli langsung
 * menonjol di atas latar krem maupun kartu indigo gelap. */
.btn-store { background: var(--gold); color: #2b2110; }
.btn-store:hover { filter: brightness(.95); }
.btn-store-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-store-outline:hover { background: rgba(201, 162, 74, .14); }

/* =========================================================
   FOOTER — baris kontak & media sosial
   ========================================================= */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .6rem;
}
/* `.hidden` bawaan Tailwind punya kekhususan sama dengan `.footer-links`
 * di atas, jadi hasilnya bergantung urutan berkas. Selektor dua-class ini
 * memastikan penyembunyian untuk pengguna yang sudah login selalu menang. */
.footer-links.hidden { display: none; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 700;
  color: var(--indigo);
  transition: border-color .18s ease, color .18s ease, transform .12s ease;
}
.footer-link:hover { border-color: var(--indigo); transform: translateY(-1px); }
.footer-link svg { flex: 0 0 auto; }

/* Warna khas tiap kanal saat disentuh, supaya barisnya tidak terasa
 * seragam-datar tetapi tetap tenang saat diam. */
.footer-link--tiktok:hover    { border-color: #010101; color: #010101; }
.footer-link--ig:hover        { border-color: #C13584; color: #C13584; }
.footer-link--wa:hover        { border-color: #25D366; color: #128C7E; }
.footer-link--store {
  border-color: var(--gold);
  color: #6b5217;
  background: rgba(201, 162, 74, .12);
}
.footer-link--store:hover { border-color: var(--gold); color: #4d3a0e; }



.btn-ghost { background: transparent; color: var(--indigo); }
.btn-ghost:hover { background: rgba(34, 58, 94, .08); }

.btn-gold { background: var(--gold); color: #2b2110; }
.btn-gold:hover { filter: brightness(.96); }

.label {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--indigo);
}

.input {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(34, 58, 94, .12); }

.nav-link {
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}
.nav-link:hover { background: rgba(34, 58, 94, .08); }
.nav-link[aria-current="page"] { background: var(--indigo); color: #fff; }

/* ---------------------------------------------------------
 * Dropdown header ("Kaigofukushishi")
 * Menampung 3 mode soal: 練習問題 / 過去問題 / 復習テスト.
 * ------------------------------------------------------- */
.dropdown-menu {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 40;
  min-width: 12.5rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 32, 51, .14);
  animation: fade-up .16s ease-out;
}

.dropdown-item {
  display: block;
  padding: .5rem .7rem;
  border-radius: .6rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--indigo-deep);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.dropdown-item:hover { background: rgba(34, 58, 94, .08); }
.dropdown-item[aria-current="page"] { background: var(--indigo); color: #fff; }

/* Tombol pemicu saat panel terbuka / salah satu isinya sedang aktif */
[data-dropdown-toggle][aria-expanded="true"] { background: rgba(34, 58, 94, .08); }
[data-dropdown-toggle][aria-expanded="true"] [data-dropdown-caret] { transform: rotate(180deg); }
[data-dropdown-toggle][data-active="1"] { background: var(--indigo); color: #fff; }

/* Label kelompok pada navigasi mobile (pengganti dropdown) */
.nav-group-label {
  margin-top: .35rem;
  padding: .45rem .8rem .15rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(34, 58, 94, .6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--indigo);
}

/* Pilihan jawaban kuis */
.choice {
  width: 100%;
  text-align: left;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--indigo); }
.choice[data-state="selected"] { border-color: var(--indigo); background: rgba(34, 58, 94, .06); }
.choice[data-state="correct"]  { border-color: var(--success); background: rgba(46, 111, 78, .10); }
.choice[data-state="wrong"]    { border-color: var(--error);   background: rgba(176, 65, 62, .10); }
.choice .key {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--bg-deep);
  font-size: .78rem; font-weight: 800;
  color: var(--indigo);
}

/* Toast */
/* =========================================================
 * POP-UP AJAKAN MENDAFTAR (tamu selesai sesi gratis)
 * ======================================================= */
.guest-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 27, 45, .6);
  backdrop-filter: blur(3px);
  animation: guestFade .18s ease-out;
}

.guest-modal__box {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid var(--line, #E3DCCD);
  border-radius: 1.25rem;
  background: #fff;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(20, 27, 45, .28);
  animation: guestUp .22s ease-out;
}

.guest-modal__x {
  position: absolute;
  top: .6rem;
  right: .75rem;
  font-size: 1rem;
  line-height: 1;
  color: rgba(34, 58, 94, .55);
}
.guest-modal__x:hover { color: #223A5E; }

.guest-modal__title {
  margin-top: .6rem;
  font-family: var(--font-display, inherit);
  font-size: 1.4rem;
  font-weight: 800;
  color: #16233B;
}

.guest-modal__text {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(34, 58, 94, .85);
}

.guest-modal__list {
  margin: 1rem 0 1.25rem;
  display: grid;
  gap: .35rem;
  text-align: left;
  font-size: .8rem;
  color: rgba(34, 58, 94, .85);
}

.guest-modal__actions { display: grid; gap: .5rem; }

/* =========================================================
   PROGRAM AJAK TEMAN (REFERRAL)
   =========================================================
   Memakai kerangka .guest-modal (lapisan + animasi) dan menambah
   isi khusus: spanduk gradien, kotak kode, kartu hadiah, langkah. */
.ref-box { max-width: 28rem; text-align: left; }

/* --- spanduk atas --- */
.ref-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 1.35rem 1rem 1.15rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo) 55%, #33578a 100%);
}
/* Kilau emas lembut di sudut kanan atas. */
.ref-hero::after {
  content: '';
  position: absolute;
  top: -45%; right: -18%;
  width: 68%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,74,.45), transparent 70%);
  pointer-events: none;
}
.ref-hero > * { position: relative; z-index: 1; }
.ref-hero__icon { display: block; font-size: 2.1rem; line-height: 1; }
.ref-hero__kicker {
  margin-top: .5rem;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.ref-hero__title {
  margin-top: .25rem;
  font-family: var(--font-display, inherit);
  font-size: 1.3rem; font-weight: 800; line-height: 1.3;
}
.ref-hero__title b { color: var(--gold); }
.ref-hero__sub { margin-top: .35rem; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.82); }

/* --- kotak kode referral --- */
.ref-code { margin-top: 1rem; }
.ref-code__label {
  font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(31,42,60,.55);
}
.ref-code__row { margin-top: .35rem; display: flex; align-items: stretch; gap: .5rem; }
.ref-code__value {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .7rem .75rem;
  border: 2px dashed var(--gold); border-radius: 12px;
  background: rgba(201,162,74,.10);
  font-size: 1.05rem; font-weight: 800; letter-spacing: .04em;
  color: var(--indigo-deep);
  text-align: center; word-break: break-word;
}
.ref-code__copy {
  flex: 0 0 auto;
  padding: 0 .9rem; border-radius: 12px;
  background: var(--indigo); color: #fff;
  font-size: .78rem; font-weight: 800;
  transition: background-color .15s ease;
}
.ref-code__copy:hover { background: var(--indigo-deep); }

/* --- tiga kartu hadiah --- */
.ref-rewards {
  margin-top: .9rem;
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
}
.ref-reward {
  padding: .6rem .35rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-align: center;
}
.ref-reward__val { display: block; font-size: .9rem; font-weight: 800; line-height: 1.2; color: var(--indigo); }
.ref-reward__cap {
  display: block; margin-top: .15rem;
  font-size: .6rem; font-weight: 700; line-height: 1.3;
  color: rgba(31,42,60,.6);
}
.ref-reward--max { border-color: var(--gold); background: rgba(201,162,74,.10); }
.ref-reward--max .ref-reward__val { color: #8a6a1f; }
.ref-reward--friend { border-color: var(--success); background: rgba(46,111,78,.08); }
.ref-reward--friend .ref-reward__val { color: var(--success); }

/* --- tiga langkah --- */
.ref-steps {
  margin: .9rem 0 1.1rem;
  display: grid; gap: .5rem;
  counter-reset: ref;
  font-size: .82rem; line-height: 1.5;
  color: rgba(31,42,60,.85);
}
.ref-steps li { position: relative; padding-left: 1.9rem; counter-increment: ref; }
.ref-steps li::before {
  content: counter(ref);
  position: absolute; left: 0; top: .05rem;
  width: 1.35rem; height: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--indigo); color: #fff;
  font-size: .7rem; font-weight: 800;
}

.ref-note {
  margin-top: .8rem;
  font-size: .68rem; line-height: 1.5;
  color: rgba(31,42,60,.55); text-align: center;
}

/* --- kartu pintasan di Dashboard --- */
.ref-cta {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; text-align: left;
  padding: .9rem 1rem;
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(201,162,74,.18), rgba(201,162,74,.05));
  transition: transform .15s ease, box-shadow .15s ease;
}
.ref-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ref-cta__icon { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
.ref-cta__title {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 1rem; font-weight: 800; line-height: 1.3;
  color: var(--indigo-deep);
}
.ref-cta__desc {
  display: block; margin-top: .15rem;
  font-size: .76rem; line-height: 1.45;
  color: rgba(31,42,60,.75);
}
.ref-cta__go {
  flex: 0 0 auto; margin-left: auto;
  font-size: .75rem; font-weight: 800;
  color: var(--indigo); white-space: nowrap;
}
@media (max-width: 420px) {
  .ref-cta__go { display: none; }   /* ruang sempit: cukup ikon + teks */
}

/* --- papan bonus di Dashboard (angka diisi admin) --- */
.ref-stats { padding: 1rem 1.1rem; }
.ref-stats__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem;
}
.ref-stats__title {
  font-family: var(--font-display, inherit);
  font-size: 1.05rem; font-weight: 800; line-height: 1.3;
  color: var(--indigo-deep);
}
.ref-stats__cap { font-size: .7rem; font-weight: 700; color: rgba(31,42,60,.55); }

.ref-stats__code {
  margin-top: .5rem;
  font-size: .78rem;
  color: rgba(31,42,60,.75);
}
.ref-stats__code b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--indigo-deep);
}

.ref-stats__grid {
  margin-top: .75rem;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.ref-stat {
  padding: .7rem .75rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff;
}
.ref-stat__label {
  font-size: .64rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(31,42,60,.55);
}
.ref-stat__value {
  margin-top: .2rem;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem; font-weight: 800; line-height: 1.2;
  color: var(--indigo-deep);
  word-break: break-word;
}
.ref-stat--avail { border-color: var(--gold); background: rgba(201,162,74,.10); }
.ref-stat--avail .ref-stat__value { color: #8a6a1f; }
.ref-stat--paid { border-color: var(--success); background: rgba(46,111,78,.08); }
.ref-stat--paid .ref-stat__value { color: var(--success); }

/* Batang kemajuan jumlah referral (0 → maks. teman). */
.ref-stats__bar {
  margin-top: .7rem;
  height: .4rem; border-radius: 999px;
  background: rgba(34,58,94,.12); overflow: hidden;
}
.ref-stats__fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo), var(--gold));
  transition: width .35s ease;
}

.ref-stats__note {
  margin-top: .7rem;
  font-size: .72rem; line-height: 1.5;
  color: rgba(31,42,60,.7);
}

@keyframes guestFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes guestUp {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.toast {
  padding: .6rem 1rem;
  border-radius: 999px;
  background: var(--indigo-deep);
  color: #fff;
  font-size: .85rem;
  box-shadow: var(--shadow);
  animation: toast-in .2s ease-out both;
}
.toast[data-type="error"]   { background: var(--error); }
.toast[data-type="success"] { background: var(--success); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flashcard flip */
.flip { perspective: 1200px; }
.flip-inner {
  position: relative;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
  min-height: 240px;
}
.flip[data-flipped="true"] .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
}
.flip-back { transform: rotateY(180deg); }

/* =========================================================
   FURIGANA (ruby) — bisa dimatikan
   ========================================================= */
.furigana-scope ruby { ruby-position: over; }
.furigana-scope rt {
  font-size: .62em;
  font-weight: 600;
  color: var(--indigo);
  opacity: .85;
  letter-spacing: .02em;
}
/* Saat OFF: <rt> disembunyikan tanpa mengubah tinggi baris terlalu drastis */
.furigana-scope.furigana-off rt {
  display: none;
}

/* FURIGANA SELALU ON (halaman Materi: Audio Podcast & Video Pembahasan).
   Tidak dipengaruhi tombol ON/OFF global karena bukan .furigana-scope. */
.furigana-always ruby { ruby-position: over; }
.furigana-always rt {
  font-size: .62em;
  font-weight: 600;
  color: var(--indigo);
  opacity: .85;
  letter-spacing: .02em;
  display: revert;
}


.furigana-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: .72rem;
  font-weight: 800;
  color: var(--indigo);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.furigana-btn:hover { border-color: var(--indigo); }
.furigana-btn__state {
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--bg-deep);
  font-size: .68rem;
}
.furigana-btn[aria-checked="true"] .furigana-btn__state {
  background: var(--indigo);
  color: #fff;
}

/* =========================================================

   PEMILIH MATERI (大分類 → 中分類 → 小分類)
   ========================================================= */
.materi-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.materi-picker__head { padding: 1rem 1rem .25rem; }
.materi-picker__title { font-family: 'Shippori Mincho', serif; font-size: 1.05rem; font-weight: 800; color: var(--indigo-deep); }
.materi-picker__note { margin-top: .2rem; font-size: .75rem; color: rgba(31,42,60,.7); }

.materi-tabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line);
}
.materi-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: .85rem; font-weight: 700; color: var(--indigo);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.materi-tab:hover { border-color: var(--indigo); }
.materi-tab--active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.materi-tab__no {
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--bg-deep); color: var(--indigo);
  font-size: .7rem; font-weight: 800;
}
.materi-tab--active .materi-tab__no { background: rgba(255,255,255,.22); color: #fff; }

.materi-picker__body { padding: .75rem 1rem 1rem; display: grid; gap: 1rem; }
.materi-group__title {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  color: var(--indigo); margin-bottom: .45rem;
  padding-left: .5rem; border-left: 3px solid var(--gold);
}
.materi-group__grid { display: grid; gap: .4rem; }
@media (min-width: 640px) { .materi-group__grid { grid-template-columns: 1fr 1fr; } }

.materi-sub {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.materi-sub:hover { border-color: var(--indigo); transform: translateY(-1px); }
.materi-sub--active { border-color: var(--indigo); background: rgba(34,58,94,.06); }
.materi-sub--empty { opacity: .55; }
.materi-sub__jp { flex: 1 1 auto; font-size: .92rem; font-weight: 700; color: var(--ink); }
.materi-sub__badge {
  flex: 0 0 auto;
  font-size: .68rem; font-weight: 800;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--bg-deep); color: var(--indigo);
}
.materi-sub__badge--zero { background: transparent; color: rgba(31,42,60,.45); font-weight: 700; }

/* Varian pemilih Flashcard (pengguna login): kotak materi menampung baris
 * nama 科目 + rincian progres pribadi (tersedia / direview / belum). */
.materi-sub--stat { flex-direction: column; align-items: stretch; gap: .5rem; }
.materi-sub__row { display: flex; align-items: center; gap: .5rem; }
.materi-sub__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  padding-top: .5rem; border-top: 1px dashed var(--line);
}
.materi-sub__stat {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .4rem; border-radius: 9px;
  background: var(--bg-deep); text-align: center;
}
.materi-sub__stat-label {
  font-size: .6rem; font-weight: 700; line-height: 1.2;
  color: rgba(31,42,60,.6);
}
.materi-sub__stat-val { font-size: 1.05rem; font-weight: 800; color: var(--indigo); }
.materi-sub__stat-val--done { color: var(--success, #2f855a); }
.materi-sub__stat-val--new { color: var(--beni, #b83250); }

/* =========================================================
 * PENANDA "SUDAH DIPELAJARI" (checkpoint hijau)
 * =========================================================
 * Dipakai pemilih Latihan Soal, Soal Tahun Lalu, Rangkuman,
 * Audio, Video, Recall — blok materi yang pernah dibuka jadi hijau.
 * (Flashcard tidak memakai ini; ia punya rincian stat sendiri.) */
.materi-sub--studied {
  border-color: var(--success);
  background: rgba(46,111,78,.08);
}
.materi-sub--studied .materi-sub__jp { color: var(--success); }
.materi-sub__check {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: var(--success); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}

/* Kartu bergambar (Audio / Video) */
.materi-thumb--studied .materi-thumb__media {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(46,111,78,.28);
}
.materi-thumb--studied .materi-thumb__title { color: var(--success); }
.materi-thumb__check {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--success); color: #fff;
  font-size: .8rem; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Kartu tahun (Soal Tahun Lalu) */
.year-card--studied {
  position: relative;
  border-color: var(--success);
  background: rgba(46,111,78,.08);
}
.year-card--studied .year-card__year { color: var(--success); }
.year-card__check {
  position: absolute; top: .35rem; right: .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--success); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
}

/* =========================================================
 * KARTU MATERI BERGAMBAR (gaya YouTube) — halaman Materi
 * =========================================================
 * Thumbnail 16:9 di ATAS, nama 科目 di BAWAH. Grid auto-fill:
 *   ponsel  → 2 kolom (kartu kecil, hemat ruang)
 *   tablet+ → 3–4 kolom mengikuti lebar yang tersedia
 * Tanpa media query bertingkat: `auto-fill` + `minmax` sudah responsif.
 */
.materi-group__grid--thumb {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
@media (min-width: 640px) {
  .materi-group__grid--thumb { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

.materi-thumb {
  display: flex; flex-direction: column; gap: .45rem;
  text-decoration: none; color: inherit;
  transition: transform .15s ease;
}
.materi-thumb:hover { transform: translateY(-2px); }
.materi-thumb:hover .materi-thumb__media { border-color: var(--indigo); }
.materi-thumb:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 14px; }

/* Kotak gambar: rasio tetap 16:9 supaya grid tidak "melompat" saat gambar dimuat */
.materi-thumb__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(34,58,94,.06);
}
.materi-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.materi-thumb__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; opacity: .45;
}

/* Jumlah video/audio — pojok kanan bawah thumbnail, seperti label durasi YouTube */
.materi-thumb__count {
  position: absolute; right: .35rem; bottom: .35rem;
  border-radius: 6px; padding: .05rem .35rem;
  background: rgba(20,24,33,.82); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1.5;
}
.materi-thumb__count--zero { background: rgba(20,24,33,.5); font-weight: 600; }

.materi-thumb__title {
  font-size: .85rem; font-weight: 700; line-height: 1.35;
  color: var(--ink);
  /* Judul panjang dipotong 2 baris agar tinggi kartu tetap seragam */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.materi-thumb--empty { opacity: .5; }
.materi-thumb--active .materi-thumb__media { border-color: var(--indigo); box-shadow: 0 0 0 2px rgba(34,58,94,.18); }


/* Pemilih tahun (過去問題) */
.year-picker { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .year-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.year-card {
  display: grid; place-items: center; gap: .1rem;
  padding: .9rem .5rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; transition: border-color .15s ease, transform .15s ease;
}
.year-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.year-card--active { border-color: var(--gold); background: rgba(201,162,74,.10); }
.year-card__year { font-size: 1.15rem; font-weight: 800; color: var(--indigo-deep); }
.year-card__kai { font-size: .68rem; color: rgba(31,42,60,.6); }


/* =========================================================
   KARTU KOTOBA + FSRS
   ========================================================= */
/* =========================================================
   FLASHCARD — kartu dua sisi dengan animasi balik (flip)
   =========================================================
   Kartu hanya dua sisi: KOSAKATA (depan) ⇄ ARTI (belakang), dan bisa
   dibolak-balik sesuka pengguna.

   Susunannya tiga lapis:
     .fc-card        → hanya "panggung": mengatur perspektif 3D, tanpa
                       rupa sendiri (tak berlatar, tak berbingkai).
     .fc-card__inner → yang benar-benar diputar 180° saat dibalik.
     .fc-card__face  → dua sisi yang rupanya sama persis; sisi belakang
                       sudah diputar 180° sejak awal, dan
                       `backface-visibility: hidden` menyembunyikan sisi
                       yang sedang membelakangi pembaca.

   Kedua sisi ditumpuk memakai `grid-area: 1 / 1` (bukan
   `position: absolute`) supaya tinggi kartu tetap mengikuti sisi yang
   PALING TINGGI — arti yang panjang tidak akan terpotong keluar kartu. */
.fc-card {
  perspective: 1400px;
  cursor: pointer;
  border-radius: var(--radius);
}
.fc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.fc-card__inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.fc-card--open .fc-card__inner { transform: rotateY(180deg); }

.fc-card__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;   /* Safari lama masih perlu awalan */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 2rem 1.25rem;
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .6rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.fc-card__face--back { transform: rotateY(180deg); }

/* Hormati setelan "kurangi animasi" di sistem pengguna: kartu tetap
   berbalik, hanya perputarannya yang tidak dianimasikan. */
@media (prefers-reduced-motion: reduce) {
  .fc-card__inner { transition: none; }
}

.fc-card__term { font-size: 1.9rem; font-weight: 800; color: var(--indigo-deep); line-height: 1.5; }
.fc-card__hint { font-size: .72rem; color: rgba(31,42,60,.5); }
.fc-card__meaning { font-size: 1.15rem; font-weight: 700; color: var(--ink); }

/* Kosakata pada SISI BELAKANG.
   Sengaja lebih kecil dan lebih redup daripada sisi depan: di sini yang
   dicari pembaca adalah ARTINYA, sedangkan kanji hadir sebagai rujukan
   supaya tidak perlu membalik bolak-balik. Ukuran yang sama besar akan
   membuat kedua sisi terlihat kembar dan arah bacanya kabur.
   Garis pemisah tipis menegaskan mana rujukan, mana jawabannya. */
.fc-card__term--sisi-belakang {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(34,58,94,.62);
  line-height: 1.45;
  padding-bottom: .55rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid var(--line);
}
.fc-card__term--sisi-belakang rt { color: rgba(34,58,94,.5); }

.fsrs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.fsrs-btn {
  display: grid; place-items: center; gap: .1rem;
  padding: .7rem .5rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background-color .15s ease;
}
.fsrs-btn:hover { transform: translateY(-2px); }
.fsrs-btn__mark { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.fsrs-btn__label { font-size: .8rem; font-weight: 800; }
.fsrs-btn__eta { font-size: .66rem; color: rgba(31,42,60,.6); }
.fsrs-btn--again { border-color: rgba(176,65,62,.45); color: var(--error); }
.fsrs-btn--again:hover { background: rgba(176,65,62,.08); }
.fsrs-btn--good { border-color: rgba(46,111,78,.45); color: var(--success); }
.fsrs-btn--good:hover { background: rgba(46,111,78,.08); }

/* =========================================================
   SOAL (練習問題 / 過去問題 / 復習テスト)
   ========================================================= */
.quiz-jp { font-size: 1.1rem; font-weight: 700; color: var(--indigo-deep); line-height: 2; }
.quiz-id { font-size: .85rem; color: rgba(31,42,60,.75); }

.quiz-choice {
  display: flex; align-items: flex-start; gap: .6rem;
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.quiz-choice:hover:not(:disabled) { border-color: var(--indigo); }
.quiz-choice:disabled { cursor: default; }
.quiz-choice__no {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--bg-deep); color: var(--indigo);
  font-size: .75rem; font-weight: 800;
}
.quiz-choice__text { flex: 1 1 auto; font-size: 1rem; font-weight: 500; line-height: 1.9; }

/* Gambar pendukung soal — tampil di bawah teks soal, ukuran pas & mudah dilihat */
.quiz-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-deep);
  padding: .5rem;
  text-align: center;
}
.quiz-figure img {
  display: block;
  width: 100%;
  max-width: 460px;
  max-height: 340px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.quiz-figure figcaption {
  margin-top: .4rem;
  font-size: .72rem;
  color: rgba(31,42,60,.7);
}

.quiz-choice--correct { border-color: var(--success); background: rgba(46,111,78,.10); }
.quiz-choice--correct .quiz-choice__no { background: var(--success); color: #fff; }
.quiz-choice--wrong { border-color: var(--error); background: rgba(176,65,62,.10); }
.quiz-choice--wrong .quiz-choice__no { background: var(--error); color: #fff; }

.quiz-explain {
  border-left: 4px solid var(--error);
  border-radius: 10px;
  background: rgba(176,65,62,.06);
  padding: .7rem .85rem;
}
.quiz-explain--ok { border-left-color: var(--success); background: rgba(46,111,78,.07); }
.quiz-explain__head { font-size: .8rem; font-weight: 800; color: var(--indigo-deep); }
.quiz-explain__body { margin-top: .25rem; font-size: .92rem; font-weight: 500; line-height: 1.9; color: rgba(31,42,60,.9); }

/* =========================================================
   MATERI — AUDIO PODCAST (音声教材) & VIDEO PEMBAHASAN (動画解説)
   ========================================================= */
.media-list { display: grid; gap: 1rem; }

/* Materi terkunci untuk pengunjung: isi dikaburkan & tidak bisa diputar. */
.media-list--locked .media-card {
  filter: blur(3px) saturate(.6);
  opacity: .75;
  cursor: pointer;
  user-select: none;
}
.media-list--locked .media-card:hover { filter: blur(2px) saturate(.7); }

.media-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,34,53,.06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.media-card:hover { box-shadow: 0 14px 34px rgba(20,34,53,.12); }

.media-card__cover {
  display: block; width: 100%; max-height: 220px;
  object-fit: cover; background: var(--bg-deep);
  pointer-events: none;
}
.media-card__body { padding: .95rem 1.05rem 1.05rem; }
.media-card__head { display: flex; align-items: flex-start; gap: .7rem; }
.media-card__no {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--bg-deep); color: var(--indigo);
  font-size: .75rem; font-weight: 800;
}
.media-card__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.02rem; font-weight: 700; line-height: 1.9;
  color: var(--indigo-deep);
}
.media-card__subtitle { font-size: .8rem; color: rgba(34,58,94,.78); }
.media-card__dur {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .7rem; font-weight: 700; color: rgba(34,58,94,.8);
}
.media-card__desc {
  margin-top: .6rem;
  font-size: .85rem; line-height: 1.85; color: rgba(31,42,60,.8);
}

/* =========================================================
 * PEMUTAR AUDIO KUSTOM (.ap) — js/audio-shield.js
 * Elemen <audio> asli disembunyikan total; seluruh kendali memakai
 * tombol & slider sendiri sehingga tidak ada menu "Download" browser
 * dan URL Storage tidak pernah tampil di DOM.
 * ======================================================= */
.ap {
  --ap-accent: var(--gold, #C9A24A);
  margin-top: .9rem;
  border-radius: 16px;
  border: 1px solid rgba(31,42,60,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,246,252,.92));
  box-shadow: 0 6px 18px rgba(20,34,53,.06), inset 0 1px 0 rgba(255,255,255,.7);
  padding: .75rem .85rem .7rem;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ap[data-playing] {
  border-color: rgba(201,162,74,.45);
  box-shadow: 0 10px 26px rgba(20,34,53,.11), 0 0 0 3px rgba(201,162,74,.10);
}
.ap__el { display: none !important; }         /* audio asli tak terlihat */

.ap__row { display: flex; align-items: center; gap: .6rem; }
.ap__row--sub {
  margin-top: .55rem; min-height: 1.6rem;
  justify-content: space-between; gap: .5rem;
}

/* ---------- Baris posisi (waktu — bilah — durasi) ---------- */
.ap__seekrow { display: flex; align-items: center; gap: .55rem; }

/* ---------- Transport: mundur 10s · putar · maju 10s ---------- */
.ap__transport {
  margin-top: .35rem;
  display: flex; align-items: center; justify-content: center; gap: 1.15rem;
}

.ap__btn {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 999px;
  background: linear-gradient(145deg, #2C3A52, var(--indigo-deep, #1F2A3C));
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px rgba(20,34,53,.28);
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.ap__btn:hover { transform: scale(1.07); box-shadow: 0 9px 22px rgba(20,34,53,.34); }
.ap__btn:active { transform: scale(.96); }
.ap__btn:disabled { opacity: .6; cursor: progress; transform: none; }

.ap__icon { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.ap__icon--play, .ap__icon--pause { grid-area: 1 / 1; }
.ap__icon--play { margin-left: 2px; }         /* segitiga terlihat lebih center */
.ap__icon--pause { display: none; }
.ap[data-playing] .ap__icon--play { display: none; }
.ap[data-playing] .ap__icon--pause { display: block; }

/* Cincin berputar saat berkas sedang diunduh */
.ap__spinner { display: none; }
.ap[data-loading] .ap__spinner {
  display: block;
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: var(--ap-accent);
  animation: ap-spin .8s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* Tombol lompat ±10 detik */
.ap__skip {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: rgba(31,42,60,.72);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ap__skip:hover { background: rgba(31,42,60,.08); color: var(--indigo-deep, #1F2A3C); }
.ap__skip:active { transform: scale(.92); }
.ap__skip svg {
  grid-area: 1 / 1;
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ap__skip-num {
  grid-area: 1 / 1;
  margin-top: 2px;
  font-size: .52rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* Umpan balik kecil saat tombol lompat ditekan */
.ap[data-nudge='back'] [data-ap-back],
.ap[data-nudge='fwd'] [data-ap-fwd] {
  background: rgba(201,162,74,.22); color: var(--indigo-deep, #1F2A3C);
}

/* ---------- Bilah posisi ---------- */
.ap__bar { position: relative; flex: 1 1 auto; height: 1.4rem; }
.ap__bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; margin-top: -3px; border-radius: 999px;
  background: rgba(31,42,60,.13);
}
.ap__buffer {
  position: absolute; left: 0; top: 50%; width: 0;
  height: 6px; margin-top: -3px; border-radius: 999px;
  background: rgba(31,42,60,.18);
  pointer-events: none;
  transition: width .25s ease;
}
.ap__fill {
  position: absolute; left: 0; top: 50%; width: 0;
  height: 6px; margin-top: -3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ap-accent), #E0C070);
  pointer-events: none;
}
.ap__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.ap__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 999px;
  border: 2px solid #fff;
  background: var(--indigo-deep, #1F2A3C);
  box-shadow: 0 1px 5px rgba(0,0,0,.32);
  transition: transform .15s ease;
}
.ap__range:hover::-webkit-slider-thumb { transform: scale(1.18); }
.ap__range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 999px;
  border: 2px solid #fff;
  background: var(--indigo-deep, #1F2A3C);
}

.ap__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: .72rem; color: rgba(31,42,60,.7);
  min-width: 2.6rem;
}
.ap__time--dur { text-align: right; }

.ap__status {
  flex: 1 1 auto; min-width: 0;
  font-size: .72rem; color: rgba(31,42,60,.6);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap__speed select {
  border: 1px solid rgba(31,42,60,.15); border-radius: 999px;
  background: #fff; padding: .15rem .45rem;
  font-size: .72rem; font-weight: 700; color: rgba(31,42,60,.8);
  cursor: pointer;
}

/* ---------- Volume ---------- */
.ap__vol { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
.ap__mute {
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: rgba(31,42,60,.72); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ap__mute:hover { background: rgba(31,42,60,.08); color: var(--indigo-deep, #1F2A3C); }
.ap__icon--vol, .ap__icon--muted {
  grid-area: 1 / 1;
  width: 1.15rem; height: 1.15rem;
  fill: currentColor; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round;
}
.ap__icon--vol .ap__wave, .ap__icon--muted path + path { fill: none; }
.ap__icon--muted { display: none; }
.ap[data-muted] .ap__icon--vol { display: none; }
.ap[data-muted] .ap__icon--muted { display: block; }

.ap__volrange {
  --vol: 100%;
  width: 4.6rem; height: 1rem; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.ap__volrange::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--ap-accent) 0 var(--vol), rgba(31,42,60,.15) var(--vol) 100%);
}
.ap__volrange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -4px;
  width: 12px; height: 12px; border-radius: 999px;
  border: 2px solid #fff;
  background: var(--indigo-deep, #1F2A3C);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.ap__volrange::-moz-range-track {
  height: 4px; border-radius: 999px; background: rgba(31,42,60,.15);
}
.ap__volrange::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--ap-accent);
}
.ap__volrange::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 999px;
  border: 2px solid #fff; background: var(--indigo-deep, #1F2A3C);
}

/* Ruang sempit: slider volume disembunyikan, tombol bisu tetap ada */
@media (max-width: 380px) {
  .ap__volrange { width: 3.2rem; }
  .ap__status { display: none; }
}



/* Video: thumbnail dulu, iframe dimuat setelah tombol putar ditekan */
.media-video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.media-video__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0; border: 0;
  cursor: pointer; background: var(--ink);
}
.media-video__thumb:disabled { cursor: pointer; }
.media-video__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .85; transition: opacity .18s ease, transform .3s ease;
  pointer-events: none;
}
.media-video__thumb:hover img { opacity: 1; transform: scale(1.03); }
.media-video__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--indigo-deep);
  font-size: 1.15rem; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.media-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Label kunci pada kartu materi berbayar */
.media-lock {
  margin-top: .85rem; border-radius: 10px;
  border: 1px dashed var(--gold, #C9A24A);
  background: rgba(201,162,74,.10);
  padding: .55rem .75rem;
  text-align: center; font-size: .8rem; font-weight: 700;
  color: var(--indigo-deep);
}

/* =========================================================
   RANGKUMAN (まとめ) — isi HTML dari admin, ditata sesuai tema
   ========================================================= *
   `.summary-body` membungkus HTML bebas yang ditulis admin. Aturan di sini
   memberi gaya bawaan yang serasi untuk elemen umum (judul, paragraf, daftar,
   tabel, kotak sorotan) sehingga admin cukup menulis HTML sederhana. Admin
   tetap boleh memakai style/kelas sendiri di dalam bodyHtml bila perlu. */
.summary-card__title { font-family: "Shippori Mincho", serif; font-weight: 800;
  font-size: 1.22rem; color: var(--indigo-deep); }
.summary-card__subtitle { margin-top: 2px; font-size: .82rem; font-style: italic; color: var(--indigo); opacity: .8; }
.summary-card__title + .summary-body,
.summary-card__subtitle + .summary-body { margin-top: .75rem; }

.summary-body { color: var(--ink); line-height: 2; font-size: 1.05rem; font-weight: 500; word-break: break-word; }
/* Furigana di Rangkuman dibuat lebih besar & tegas agar nyaman dibaca,
   terutama di ponsel (aturan global .furigana-scope rt = .55em terlalu kecil). */
.summary-body rt, .summary-card__title rt { font-size: .62em; font-weight: 600; opacity: .95; }
.summary-body > *:first-child { margin-top: 0; }
.summary-body > *:last-child { margin-bottom: 0; }
.summary-body h2, .summary-body h3, .summary-body h4 {
  font-family: "Shippori Mincho", serif; font-weight: 800; color: var(--indigo);
  line-height: 1.4; margin: 1.2rem 0 .5rem;
}
.summary-body h2 { font-size: 1.1rem; }
.summary-body h3 { font-size: 1rem; padding-bottom: .3rem; border-bottom: 2px solid var(--gold); }
.summary-body h4 { font-size: 1.02rem; color: var(--indigo-deep); }
.summary-body p { margin: .55rem 0; }
.summary-body ul, .summary-body ol { margin: .55rem 0; padding-left: 1.4rem; }
/* Tiap poin dipisah garis tipis agar daftar mudah dipindai (tidak jadi
   "tembok teks"). Poin terakhir tidak diberi garis. */
.summary-body li { margin: 0; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.summary-body li:last-child { border-bottom: 0; }
/* Di dalam sel tabel, daftar tidak perlu garis pemisah tambahan. */
.summary-body td li, .summary-body th li { padding: .15rem 0; border-bottom: 0; }
.summary-body a { color: var(--indigo); text-decoration: underline; }
.summary-body strong, .summary-body b { color: var(--indigo-deep); }
.summary-body code {
  font-size: .85em; background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: 6px; padding: .05rem .35rem;
}
.summary-body img { max-width: 100%; height: auto; border-radius: 12px; }

/* Tabel di dalam rangkuman */
.summary-body table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: 1rem; }
.summary-body th, .summary-body td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.summary-body th { background: var(--indigo); color: #fff; font-weight: 700; }
/* BUGFIX: di header tabel (latar indigo), furigana bawaan berwarna indigo
   sehingga menyatu dengan latar & tak terbaca. Dibuat putih di sini. */
.summary-body th, .summary-body th rt, .summary-body th .hl { color: #fff; }
.summary-body tbody tr:nth-child(even) td,
.summary-body tr:nth-child(even) td { background: var(--bg-deep); }

/* Kotak sorotan & penekanan (dipakai bila admin menulisnya) */
.summary-body .callout {
  margin: .8rem 0; padding: .7rem .9rem;
  border: 1px solid var(--gold); border-left-width: 4px;
  background: rgba(201, 162, 74, .10); border-radius: 12px;
}
.summary-body .hl { color: var(--beni); font-weight: 800; }

/* Terjemahan Bahasa Indonesia di bawah poin Jepang (gaya c-jp / c-id).
   Tulis: <li>…日本語… <span class="arti">Arti Indonesia</span></li> */
.summary-body .arti {
  display: block; margin-top: 3px;
  font-style: italic; font-size: .9rem; line-height: 1.55;
  color: var(--indigo); opacity: .8;
}
/* Arti Indonesia di dalam header tabel tetap terbaca di latar indigo. */
.summary-body th .arti { color: #fff; opacity: .82; }
/* Arti di bawah judul <h3>/<h4> diberi jarak sedikit & bobot normal. */
.summary-body h3 .arti, .summary-body h4 .arti { margin-top: 4px; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}




/* =========================================================
   KAMUS MENGAMBANG (chatbot kosakata)
   =========================================================
   Hanya tampil untuk pengguna login — lihat js/chatbot.js.

   Posisinya `fixed` di pojok kanan bawah dengan `env(safe-area-inset-*)`
   supaya tidak tertimpa bilah gestur iPhone. Di layar sempit panelnya
   melebar penuh menjadi lembar bawah, karena kotak 22rem di layar 360px
   akan menyisakan pinggiran yang canggung. */
.kamus-apung {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}

.kamus-apung__fab {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: #223A5E;
  color: #F3EEE1;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(20, 34, 53, .28);
  transition: transform .15s ease, background .15s ease;
}
.kamus-apung__fab:hover { background: #142235; transform: translateY(-2px); }
.kamus-apung__fab:focus-visible { outline: 3px solid #C9A24A; outline-offset: 2px; }
.kamus-apung--buka .kamus-apung__fab { background: #142235; }

/* WAJIB, dan letaknya harus DI SINI.
 *
 * `.hidden` milik Tailwind hanyalah `display:none` dengan kekhususan yang
 * SAMA (0,1,0) dengan `.kamus-apung__panel`. Karena styles.css dimuat
 * SETELAH tailwind.css, aturan `display:flex` di bawah menang — panelnya
 * tidak pernah benar-benar tertutup, tombol ✕ jadi mati, dan kotaknya
 * seolah terbuka sendiri begitu Dashboard dibuka.
 *
 * Menggabungkan dua class menaikkan kekhususan ke (0,2,0) sehingga
 * keadaan tersembunyi selalu menang, apa pun urutan muat berkasnya.
 * Jebakan yang sama sudah pernah ditemui pada `.header-guest` — lihat
 * toggleFlex() di js/ui.js. */
.kamus-apung__panel.hidden { display: none; }

.kamus-apung__panel {
  display: flex;
  flex-direction: column;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  height: 26rem;
  max-height: calc(100vh - 8rem);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #DCD3BC;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 34, 53, .22);
  animation: kamusMuncul .16s ease-out;
}
@keyframes kamusMuncul {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kamus-apung__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid #DCD3BC;
  background: #F3EEE1;
}
.kamus-apung__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  color: #142235;
}
.kamus-apung__x {
  font-size: 1rem;
  line-height: 1;
  color: rgba(34, 58, 94, .6);
  padding: .15rem .3rem;
}
.kamus-apung__x:hover { color: #142235; }

.kamus-apung__isi {
  flex: 1;
  overflow-y: auto;
  padding: .85rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  overflow-wrap: anywhere;
}

.kamus-apung__pesan {
  max-width: 88%;
  padding: .55rem .7rem;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.5;
}
.kamus-apung__pesan--bot {
  align-self: flex-start;
  background: #F3EEE1;
  color: #1F2A3C;
}
.kamus-apung__pesan--murid {
  align-self: flex-end;
  background: #223A5E;
  color: #F3EEE1;
}
.kamus-apung__pesan p + p { margin-top: .3rem; }

.kamus-apung__kata {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #142235;
}
.kamus-apung__bacaan { font-size: .75rem; color: rgba(34, 58, 94, .7); }
.kamus-apung__arti { margin-top: .25rem; font-weight: 700; color: #223A5E; }
.kamus-apung__kecil { font-size: .72rem; color: rgba(34, 58, 94, .7); }

.kamus-apung__usul { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.kamus-apung__usul-btn {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .3rem .55rem;
  border: 1px solid #DCD3BC;
  border-radius: 9px;
  background: #FFFFFF;
  font-size: .8rem;
  font-weight: 700;
  color: #142235;
}
.kamus-apung__usul-btn:hover { border-color: #223A5E; background: #F3EEE1; }
.kamus-apung__usul-btn span { font-size: .68rem; font-weight: 400; color: rgba(34, 58, 94, .7); }

.kamus-apung__form {
  display: flex;
  gap: .4rem;
  padding: .6rem;
  border-top: 1px solid #DCD3BC;
  background: #FFFFFF;
}
.kamus-apung__input {
  flex: 1;
  min-width: 0;
  padding: .5rem .65rem;
  border: 1px solid #DCD3BC;
  border-radius: 10px;
  font-size: .9rem;
  color: #142235;
  background: #FFFFFF;
}
.kamus-apung__input:focus { outline: none; border-color: #223A5E; }
.kamus-apung__kirim {
  padding: .5rem .85rem;
  border-radius: 10px;
  background: #223A5E;
  color: #F3EEE1;
  font-size: .82rem;
  font-weight: 700;
}
.kamus-apung__kirim:hover { background: #142235; }

@media (max-width: 480px) {
  .kamus-apung { left: max(.75rem, env(safe-area-inset-left)); align-items: stretch; }
  .kamus-apung__fab { align-self: flex-end; }

  /* `dvh`, BUKAN `vh`.
   *
   * Di iOS, `vh` mengukur layar SEUTUHNYA termasuk yang tertutup bilah
   * peramban, dan nilainya tidak pernah berubah. Panel 70vh karena itu
   * lebih tinggi daripada ruang yang benar-benar terlihat, menutupi
   * hampir seluruh halaman. `dvh` mengikuti tinggi yang sungguh tampak.
   *
   * Tingginya juga diturunkan dan diberi batas atas: kotak pencarian satu
   * baris tidak perlu 70% layar, dan sisa ruang itu justru mendorong
   * kolom ketik ke balik papan ketik.
   *
   * Papan ketik sendiri ditangani js/chatbot.js lewat visualViewport —
   * CSS tidak punya cara mengetahui tingginya. */
  .kamus-apung__panel {
    width: 100%;
    max-width: none;
    height: min(58dvh, 24rem);
  }
}

/* ANTI-ZOOM OTOMATIS DI iOS.
 *
 * Safari iOS memperbesar halaman setiap kali kolom isian yang difokuskan
 * berukuran KURANG DARI 16px — lalu tidak pernah mengembalikannya, jadi
 * murid harus mencubit layar sendiri. Kolom di situs ini memakai 14px,
 * sehingga setiap ketukan pada form memicunya.
 *
 * Diperbaiki dengan menaikkan ukuran font pada perangkat sentuh, BUKAN
 * dengan `user-scalable=no` pada meta viewport: cara itu melumpuhkan
 * cubit-untuk-memperbesar bagi yang berpenglihatan lemah, dan iOS modern
 * pun mengabaikannya. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* Kotak centang "Ingat email" pada form masuk.
   Seluruh baris dibungkus <label> agar teksnya ikut bisa diklik — target
   sentuh sebesar kotak 14px terlalu kecil untuk jari di layar HP. */
.ingat-email {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .8rem;
  color: rgba(34, 58, 94, .85);
  user-select: none;
  padding: .15rem 0;
}
.ingat-email__kotak {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: #223A5E;
  cursor: pointer;
}
.ingat-email:hover { color: #142235; }