/* GEMAR LCA — Gerakan Memahami Arti Kata Al-Qur'an
   Tema: HIJAU zamrud dengan aksen KUNING/emas (simbol islami), glassmorphic. Mobile-first.

   Skala yang dipakai (jangan tambah nilai baru tanpa alasan):
   - radius: 8px (mini) · 10px (chip) · 13px (baris/field/tombol) · 18px (kartu) · 22px (lembar bawah) · 999px/50%
   - warna teks: --ink, --muted, --indigo, --violet, --pink (dan turunannya yang sudah ada)
   - ukuran huruf minimum: 12px (0.75rem)
   - jarak: kartu 16-18px (gap), antar bagian 30px (.blok) */

:root {
  /* Teks dibuat lebih gelap supaya terbaca kuat & nyaman (kontras dinaikkan) */
  --ink: #10241B;
  --muted: #43604F;
  --ink-lembut: #1B3A2A;
  --indigo: #047857;      /* hijau zamrud (dulu indigo) */
  --violet: #10B981;      /* hijau muda (dulu violet) */
  --pink: #B45309;        /* emas (dulu pink) */
  --emas: #D97706;
  --emas-muda: #FCD34D;
  --hijau-tua: #065F46;
  --kaca: rgba(255, 255, 255, .58);
  --kaca-kuat: rgba(255, 255, 255, .86);
  --garis: rgba(255, 255, 255, .82);
  --bayang: 0 10px 30px rgba(4, 120, 87, .14);
  /* Outline gradien elegan untuk setiap kartu */
  --outline-1: rgba(4, 120, 87, .55);
  --outline-2: rgba(16, 185, 129, .38);
  --outline-3: rgba(217, 119, 6, .45);
  /* Arena bermain: kartu soal memakai blok GELAP dengan pendar neon hijau dan
     kilau emas (permintaan pengguna: "model pencahayaan seperti gambar ... kartu
     bermain biar terkesan seru dan atraktif"). Latar halaman tetap terang.
     Warna di blok :root ini otomatis menjadi palet resmi yang diperiksa
     audit_desain.js — jangan menulis warna teks baru di tempat lain. */
  --arena: #06180F;
  --arena-2: #0A2A1B;
  --arena-3: #06231A;
  --arena-teks: #ECFDF3;
  --arena-muted: #A8CDB9;
  --neon: #7CFF4F;
  --neon-2: #34F5A0;
  --kilau: #FFD75E;
  /* Kotak huruf "Cari Kalimah": empat warna KONTRAS yang bergilir (emas, merah,
     ungu, biru langit) supaya kartu bermain terasa seru & bersemangat. Ditulis di
     :root karena audit_desain.js membaca palet resmi dari blok ini. */
  --arena-kuning: #FFD75E;
  --arena-merah: #FF7A8A;
  --arena-ungu: #C79BFF;
  --arena-biru: #6FE3FF;
  /* Kartu umpan jawaban: dua blok gelap dengan pendar berbeda — hijau neon untuk
     jawaban BENAR, emas untuk jawaban SALAH (warna aslinya dulu pastel terang). */
  --arena-benar: #062B1A;
  --arena-salah: #2A1E06;
  --arena-salah-tua: #150E03;
  /* Pendar luar kartu soal (box-shadow, bukan elemen melebar — lihat catatan arena) */
  --pendar-arena: 0 0 0 1px rgba(124, 255, 79, .38), 0 0 22px rgba(124, 255, 79, .42),
    0 0 56px rgba(52, 245, 160, .30), 0 10px 26px rgba(6, 24, 15, .22),
    inset 0 0 66px rgba(124, 255, 79, .07);
  --radius: 18px;
  --arab: 'Scheherazade New', 'Traditional Arabic', serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #F2FBF5;
  line-height: 1.62;
  letter-spacing: .004em;          /* sedikit lebih renggang: huruf kecil lebih jelas */
  font-weight: 450;
  padding-bottom: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
strong, b { font-weight: 700; color: var(--ink); }

.latar {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(100deg, #E4F7EC 0%, #F2FBF5 42%, #FDF8E3 78%, #F6FBF3 100%);
}
.latar span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
}
.latar span:nth-child(1) { width: 420px; height: 420px; background: #86EFAC; top: -140px; left: -120px; }
.latar span:nth-child(2) { width: 380px; height: 380px; background: #FDE68A; top: 18%; right: -140px; opacity: .38; }
.latar span:nth-child(3) { width: 460px; height: 460px; background: #5EEAD4; bottom: -180px; left: 20%; opacity: .35; }

/* --------------------------------------------------------------- struktur */
.wadah { max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
/* Bar atas: DUA lambang — LCA di kiri (lembaga) dan GEMAR di kanan (program/aplikasi) —
   dengan tulisan GEMAR + semboyan di tengahnya (permintaan pengguna). */
.brand {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 10px; text-decoration: none; color: var(--ink); flex: 1 1 260px; min-width: 0;
}
.brand-logo {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: transparent; overflow: hidden; flex: 0 0 auto;
}
/* Berkas logo GEMAR sekarang PNG berkanal alfa (sudut benar-benar transparan), jadi
   TIDAK perlu lagi memperbesar gambar untuk menutup kanvas putih — dulu perlu karena
   berkas lamanya JPEG dengan sudut putih. Memperbesar malah memotong tepi cincin. */
.brand-gemar img { transform: none; }
.brand-logo img { filter: drop-shadow(0 3px 9px rgba(6, 95, 70, .22)); }
.brand-logo img { width: 100%; height: 100%; display: block; }
.brand-logo .ikon { width: 20px; height: 20px; }

/* Lambang LCA di halaman masuk/daftar: tanpa kotak gradien */
.logo-besar.logo-lca {
  background: transparent; box-shadow: 0 14px 30px rgba(16, 36, 27, .18);
  border-radius: 50%; width: 104px; height: 104px;
}
.logo-besar.logo-lca img { width: 100%; height: 100%; display: block; }

/* Lambang GEMAR (= berkas ASLI) sebagai LOGO UTAMA halaman masuk & daftar.
   Berkas aslinya sudah bulat dengan sudut transparan; `border-radius` dibiarkan
   hanya sebagai keamanan tampilan, gambarnya sendiri tidak diubah. */
.logo-besar.logo-gemar {
  background: transparent; box-shadow: 0 14px 30px rgba(16, 36, 27, .18);
  border-radius: 50%; width: 118px; height: 118px;
}
.logo-besar.logo-gemar img { width: 100%; height: 100%; display: block; }
.logo-besar.logo-gemar + .label-mini { display: block; margin: 0 0 8px; }

/* Lambang kecil di kartu/pusat bantuan */
.lambang-mini { width: 34px; height: 34px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.brand-teks { display: flex; flex-direction: column; line-height: 1.15; text-align: center; min-width: 0; }
.brand-teks b, .brand-teks i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-teks b {
  font-size: 1.22rem; letter-spacing: .06em; font-weight: 800;
  background: linear-gradient(100deg, var(--hijau-tua), var(--indigo) 45%, var(--emas));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-teks i {
  font-style: normal; font-size: .74rem; color: var(--muted); font-weight: 600; text-align: center;
}
.topbar-kanan {
  display: flex; align-items: center; gap: 14px; flex: 0 1 auto;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.nav-atas { display: none; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav-atas a {
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  color: var(--muted); font-size: .86rem; font-weight: 500;
}
.nav-atas a.aktif { background: rgba(4, 120, 87, .12); color: var(--indigo); }
.nav-atas a:hover { color: var(--indigo); }

.avatar {
  display: grid; place-items: center; flex: 0 0 auto; min-width: 36px; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff;
  font-weight: 600; text-decoration: none; font-size: .95rem;
}
.avatar.besar { width: 62px; height: 62px; font-size: 1.5rem; }

.nav-bawah {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--garis);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--muted); font-size: .75rem; padding: 4px 0;
}
.nav-item .ikon { width: 22px; height: 22px; }
.nav-item.aktif { color: var(--indigo); }
.nav-item.aktif .ikon { filter: drop-shadow(0 3px 8px rgba(4, 120, 87, .35)); }

.ikon { width: 20px; height: 20px; flex: 0 0 auto; }
.ikon.panah { width: 18px; height: 18px; color: var(--muted); }

/* ------------------------------------------------------------------ kartu */
/* Ring gradien tipis di tepi kartu: memberi garis luar yang elegan tanpa
   mengubah warna isi kartu (termasuk kartu umpan hijau/merah muda). */
.kartu { position: relative; }
.kartu::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  padding: 2.6px;                     /* lebih tebal supaya jelas terlihat */
  background: linear-gradient(100deg, #047857 0%, #10B981 30%, #34D399 55%, #FBBF24 82%, #D97706 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.kartu.kartu-donasi::after { background: linear-gradient(100deg, rgba(217, 119, 6, .62), rgba(252, 211, 77, .55) 55%, rgba(4, 120, 87, .5)); }
.kartu.kartu-lencana.terbuka::after { background: linear-gradient(115deg, rgba(16, 185, 129, .6), rgba(110, 231, 183, .4) 50%, rgba(4, 120, 87, .45)); }

.kartu {
  background: var(--kaca);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .78) 0%,
                    rgba(244, 253, 246, .58) 46%, rgba(255, 253, 240, .72) 100%);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  padding: 18px;
  margin-bottom: 18px;
}
.blok { margin: 30px 0; }
.blok-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.blok-kepala h2 { margin: 0; }
.blok-kepala h3 { font-size: 1rem; margin: 2px 0 0; }
h1 { font-size: 1.5rem; margin: 0 0 6px; letter-spacing: -.5px; }
h2 { font-size: 1.1rem; margin: 0; }
h3.sub { margin: 18px 0 8px; }
.muted { color: var(--muted); font-weight: 450; }
.kecil { font-size: .84rem; line-height: 1.55; }
.label-mini { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }

.kepala-halaman h1 { margin-bottom: 6px; }
.kepala-halaman > p { margin: 0 0 14px; }

.stat-strip, .stat-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-strip > div, .stat-mini > div {
  flex: 1 1 90px; background: rgba(255, 255, 255, .55); border: 1px solid var(--garis);
  border-radius: 13px; padding: 10px 12px; display: flex; flex-direction: column;
}
.stat-strip b, .stat-mini b { font-size: 1.25rem; }
.stat-strip span, .stat-mini span { font-size: .74rem; color: var(--muted); }

/* Tiga kartu angka (mis. statistik GENCAR) diberi warna muda yang BERBEDA satu sama
   lain supaya mudah dibedakan sekilas (permintaan pengguna). Warnanya lembut dan tetap
   terang, jadi teks gelap di dalamnya tetap sangat terbaca (kontras jauh di atas 4.5). */
.stat-strip > div:nth-child(3n+1) { background: #E7F7EC; border-color: #BFE7CD; }   /* hijau muda */
.stat-strip > div:nth-child(3n+2) { background: #FDF4D7; border-color: #EFDCA4; }   /* kuning/emas muda */
.stat-strip > div:nth-child(3n)   { background: #E8F0FE; border-color: #C4D8F7; }   /* biru langit muda */
/* Angka di dalamnya sengaja tetap memakai warna teks tema (--ink) supaya kontras
   terjaga dan warna teks tetap hanya berasal dari token tema (diperiksa audit_desain). */

.kotak-stat > div {
  background: rgba(255, 255, 255, .55); border: 1px solid var(--garis);
  border-radius: 13px; padding: 12px; text-align: center; min-width: 0;
}
.kotak-stat b { display: block; font-size: 1.3rem; }
.kotak-stat span { font-size: .78rem; color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.dua-kolom { display: grid; gap: 16px; margin-bottom: 18px; }

.bar { height: 8px; border-radius: 999px; background: rgba(4, 120, 87, .12); overflow: hidden; margin-top: 8px; }
.bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #065F46 0%, var(--indigo) 25%, var(--violet) 70%, var(--pink) 100%);
  transition: width .4s ease; }
.bar-tipis { height: 6px; margin-top: 6px; }

.pesan { padding: 11px 14px; border-radius: 13px; margin-bottom: 16px; font-size: .9rem; }
.pesan-ok { background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .28); }
.pesan-err { background: rgba(217, 119, 6, .15); border: 1px solid rgba(217, 119, 6, .32); }
.pesan-info { background: rgba(4, 120, 87, .12); border: 1px solid rgba(4, 120, 87, .24); }

.empty { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge-ok { background: rgba(16, 185, 129, .15); color: #047857; }
.badge .ikon { width: 14px; height: 14px; }

/* ----------------------------------------------------------------- tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 13px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(100deg, #064E3B 0%, #047857 26%, #10B981 68%, #6EE7B7 100%); color: #fff; box-shadow: 0 8px 20px rgba(4, 120, 87, .3); }
.btn-ghost { background: rgba(255, 255, 255, .7); border-color: var(--garis); color: var(--ink); }
.btn-sm { padding: 8px 13px; font-size: .84rem; border-radius: 13px; }
.btn-blok { width: 100%; }
.btn .ikon { width: 17px; height: 17px; }
.aksi-baris { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tautan {
  color: var(--indigo); text-decoration: none; font-size: .85rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; min-width: 34px; padding: 4px 4px;   /* target sentuh nyaman di HP */
  font: inherit; font-weight: 600; font-size: .85rem;    /* <button class="tautan"> tetap pakai font tema */
  background: none; border: 0; cursor: pointer;
}
.tautan-kecil {
  color: var(--muted); text-decoration: none; font-size: .85rem;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; min-width: 34px; padding: 4px 4px;   /* target sentuh nyaman di HP */
  font: inherit; background: none; border: 0; cursor: pointer;
}
.inline { display: inline; }
.tautan-ikon {
  font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer;
  min-width: 34px; min-height: 34px; display: inline-grid; place-items: center;
}
.tautan-ikon .ikon { width: 17px; height: 17px; }
.bunder {
  font: inherit;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--garis);
  background: rgba(255, 255, 255, .72); color: var(--muted); display: grid; place-items: center; cursor: pointer;
}
.bunder.aktif { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; border-color: transparent; }
.bunder .ikon { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ form  */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.field > span { color: var(--muted); font-weight: 500; }
/* Pembungkus kolom sandi juga berupa <span>, jadi dikecualikan dari aturan di atas. */
.field > span.kolom-sandi { color: inherit; font-weight: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], input[type=month], input[type=week],
textarea, select {
  font: inherit; color: var(--ink); padding: 11px 13px; border-radius: 13px;
  border: 1px solid rgba(67, 96, 79, .22); background: rgba(255, 255, 255, .78); width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(4, 120, 87, .35); border-color: transparent; }
.judul-kartu { margin: 0; display: flex; align-items: center; gap: 8px; }
.judul-kartu .ikon { width: 19px; height: 19px; color: var(--violet); }
.field-inline { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); flex: 1 1 150px; }

/* ------------------------------------------------- kolom kata sandi & tombol lihat */
/* Tombol "lihat" (ikon mata) supaya pengguna bisa memastikan kata sandi yang
   diketiknya benar sebelum menekan tombol — permintaan pengguna. */
.kolom-sandi { position: relative; display: block; width: 100%; }
.kolom-sandi input { padding-right: 48px; }        /* ruang untuk tombol mata */
.lihat-sandi {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .72); color: var(--muted);
  font: inherit; padding: 0; line-height: 1;
}
.lihat-sandi:hover { color: var(--indigo); background: rgba(4, 120, 87, .10); }
.lihat-sandi:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.lihat-sandi[aria-pressed="true"] {
  color: var(--indigo); background: rgba(4, 120, 87, .14); border-color: rgba(4, 120, 87, .28);
}
.lihat-sandi .ikon { width: 19px; height: 19px; }

/* ---------------------------------------------------------------- masuk   */
.masuk { max-width: 460px; margin: 4vh auto 0; }
.masuk-hero { text-align: center; margin-bottom: 22px; }
.logo-besar {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 12px;
  border-radius: 18px; background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; box-shadow: 0 14px 30px rgba(4, 120, 87, .32);
}
.logo-besar .ikon { width: 32px; height: 32px; }
.masuk-hero h1 { margin-bottom: 8px; }
.nama-panjang { font-weight: 600; color: var(--indigo); margin: 0 0 8px; }

/* ---------------------------------------------------------------- beranda */
.pil-hari { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.streak { display: inline-flex; align-items: center; gap: 5px; background: rgba(217, 119, 6, .12); color: #92400E; padding: 4px 11px; border-radius: 999px; font-weight: 600; font-size: .78rem; }
.streak .ikon { width: 15px; height: 15px; }

.sambutan { display: flex; flex-direction: column; gap: 16px; }
.sambutan h1 { margin: 2px 0 4px; }

.kartu-tautan, .kartu-ajak, .quest-baris, .surah, .kata-baris, .contoh-ayat {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
}
.kartu-tautan .isi, .kartu-ajak .isi, .quest-baris .isi, .surah .isi, .kata-baris .isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ikon-bulat {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(4, 120, 87, .16), rgba(16, 185, 129, .18)); color: var(--indigo);
}
.ikon-bulat.besar { width: 60px; height: 60px; margin: 0 auto; }
.kartu-tautan .isi p, .kartu-ajak .isi p { margin: 0; }
.kartu-tautan b, .kartu-ajak b, .quest-baris b { font-size: .97rem; }

.kartu-kata, .kartu-ayat-hari {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; margin-bottom: 0;
}
.kartu-kata .arab-mini, .kartu-ayat-hari .arab-mini { margin: 0; }
.arab-mini { font-family: var(--arab); font-size: 1.5rem; line-height: 1.9; direction: rtl; margin: 6px 0; }
.arab-besar { font-family: var(--arab); font-size: 2.6rem; line-height: 1.8; text-align: center; direction: rtl; margin: 10px 0; }
.arab-nama { font-family: var(--arab); font-size: 1.8rem; line-height: 1.6; direction: rtl; }
.arab-kecil { font-family: var(--arab); font-size: 1.05rem; font-style: normal; direction: rtl; }

.daftar-quest, .daftar-surah, .daftar-kata, .daftar-jurnal { display: flex; flex-direction: column; gap: 14px; }
.quest-baris .isi p { margin: 0; }

.tema-mini, .tema-kartu { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; margin: 0; }
.tema-mini p, .tema-kartu p { margin: 0; }
.ikon-bulat { }
.tema-kartu .ikon-bulat { width: 40px; height: 40px; }

/* --------------------------------------------------------- kartu donasi  */
.kartu-donasi {
  border-color: rgba(217, 119, 6, .28);
  background: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(253, 242, 248, .72));
}
.kartu-donasi .donasi-kepala { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.kartu-donasi h3 { margin: 2px 0 0; font-size: 1rem; }
.kartu-donasi p { margin: 0 0 10px; font-size: .92rem; }
.kartu-donasi .muted.kecil { font-size: .78rem; margin: 10px 0 0; }
.donasi-lambang {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff;
}
.donasi-lambang .ikon { width: 21px; height: 21px; }
.kartu-donasi.ringkas { padding: 16px 18px; }
.kartu-donasi .stat-strip { margin: 12px 0; }
.kartu-donasi .arab-mini { margin: 12px 0 4px; }

.btn-donasi {
  background: linear-gradient(115deg, #B45309 0%, var(--pink) 30%, var(--violet) 100%); color: #fff;
  box-shadow: 0 8px 20px rgba(217, 119, 6, .3);
}
.kartu-donasi-hero { display: flex; flex-direction: column; gap: 8px; }

/* ---- QRIS resmi LCA: "Infak Terbaik di Sini" ---- */
.kartu-qris { background: linear-gradient(115deg, rgba(255, 255, 255, .82), rgba(255, 251, 235, .78) 55%, rgba(224, 247, 233, .74)); }
.kartu-qris > p { margin: 0 0 12px; }
.qris-bingkai {
  display: block; width: 100%; max-width: 380px; margin: 0 auto 12px; padding: 10px;
  border-radius: 18px; background: #fff; border: 1px solid var(--garis);
  box-shadow: 0 14px 30px rgba(16, 36, 27, .16); text-align: center;
  color: inherit;   /* tanpa ini tautan memakai biru bawaan peramban */
}
.qris-bingkai img { display: block; width: 100%; height: auto; border-radius: 10px; }
.kartu-qris .daftar-angka { margin-top: 0; }
.qris-sumber { display: block; margin-top: 4px; opacity: .85; }
.qris-ringkas {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
  padding: 10px 12px; border-radius: 13px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .68); border: 1px solid rgba(217, 119, 6, .28);
}
.qris-ringkas img {
  width: 62px; height: auto; flex: 0 0 auto; border-radius: 8px; background: #fff;
  border: 1px solid var(--garis);
}
.qris-ringkas span { min-width: 0; }
.qris-ringkas b { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--ink); }
.qris-ringkas b .ikon { width: 17px; height: 17px; color: var(--indigo); flex: 0 0 auto; }
.qris-ringkas small { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); line-height: 1.45; }

.kartu-donasi-hero p { margin: 0; }
.kartu-program { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kartu-program p { margin: 0; }
.kartu-program .tautan { margin-top: auto; }
.daftar-alasan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.daftar-alasan li { display: flex; gap: 12px; align-items: flex-start; }
.daftar-alasan .angka {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(4, 120, 87, .12); color: var(--indigo); font-weight: 700; font-size: .84rem;
}
.daftar-alasan p { margin: 2px 0 0; }
/* Angka keuangan: baris label–nilai supaya angka panjang tidak memaksa lebar */
.daftar-angka { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.daftar-angka li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--garis);
}
.daftar-angka b { font-size: 1rem; overflow-wrap: anywhere; text-align: right; }
.daftar-angka span { color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------------------ quran */
.cari { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.field-cari { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(67, 96, 79, .2); border-radius: 13px; padding: 0 12px; }
.field-cari .ikon { color: var(--muted); width: 18px; height: 18px; }
.field-cari input { border: 0; background: transparent; padding: 11px 0; }
.field-cari input:focus { outline: none; }
.pil-juz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pil {
  min-width: 36px; min-height: 36px; text-align: center; padding: 6px 11px; border-radius: 999px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--muted); background: rgba(255, 255, 255, .6); border: 1px solid var(--garis);
}
.pil.aktif { background: linear-gradient(100deg, #065F46, #047857 40%, #10B981 100%); color: #fff; border-color: transparent; }
.pil-ayat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.surah { padding: 14px 16px; border-radius: 18px; background: var(--kaca); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.surah .no {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(4, 120, 87, .14), rgba(16, 185, 129, .2)); color: var(--indigo); font-weight: 700;
}
.surah b { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ------------------------------------------------------------------ baca  */
.kepala-surah { display: flex; flex-direction: column; gap: 12px; }
.surah-judul { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.surah-judul h1 { margin: 0; }
.rincian { border: 1px solid var(--garis); border-radius: 13px; padding: 10px 14px; background: rgba(255, 255, 255, .5); }
.rincian summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--indigo); }
.rincian p { font-size: .86rem; margin: 10px 0 0; color: var(--muted); }

.putar-surah { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.putar-surah audio { width: 100%; margin-top: 6px; }

.ayat-daftar { display: flex; flex-direction: column; gap: 16px; }
.ayat {
  background: var(--kaca); border: 1px solid var(--garis); border-radius: var(--radius);
  box-shadow: var(--bayang); padding: 18px; scroll-margin-top: 80px;
}
.ayat.sedang-putar { border-color: rgba(4, 120, 87, .5); box-shadow: 0 0 0 3px rgba(4, 120, 87, .16), var(--bayang); }
.ayat-kepala { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ayat-no {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px;
  background: rgba(4, 120, 87, .12); color: var(--indigo); font-weight: 700; font-size: .84rem;
}
.ayat-aksi { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.arab {
  font-family: var(--arab); font-size: 2.05rem; line-height: 2.4; direction: rtl;
  text-align: right; margin: 0 0 12px; word-spacing: 2px; font-weight: 500;
  color: #0B1F16;
}
.arab .w { border-radius: 8px; cursor: pointer; transition: background .15s ease; padding: 0 2px; }
.arab .w:hover, .arab .w.aktif { background: rgba(4, 120, 87, .14); }
.latin { font-size: .92rem; color: var(--muted); font-style: italic; margin: 0 0 8px; }
.terjemah { margin: 0; font-size: 1.03rem; font-weight: 500; color: var(--ink); }
.terjemah.kecil { font-size: .9rem; }
.kaki-ayat { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.nota-daftar { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.nota-item { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .2); border-radius: 13px; padding: 8px 12px; font-size: .88rem; display: flex; justify-content: space-between; gap: 10px; }
.form-nota { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.pindah-halaman { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

.kartu-quest { display: flex; flex-direction: column; gap: 8px; }
.kartu-quest.selesai { border-color: rgba(16, 185, 129, .4); }
.daftar-poin { margin: 6px 0 0; padding-left: 20px; font-size: .88rem; color: var(--muted); }
.daftar-poin li { margin-bottom: 4px; }

.sheet {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 36, 27, .32);
  display: flex; align-items: flex-end; backdrop-filter: blur(3px);
}
.sheet-isi {
  position: relative; width: 100%; background: rgba(255, 255, 255, .96);
  border-radius: 22px 22px 0 0; padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(16, 36, 27, .18); animation: naik .22s ease;
  max-height: 78vh; overflow: auto;
}
@keyframes naik { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-tutup { position: absolute; top: 8px; right: 12px; border: 0; background: none; font: inherit; font-size: 1.6rem; color: var(--muted); cursor: pointer; }
.sheet-isi h2 { margin: 6px 0; }

/* -------------------------------------------------------------- kata/kuis */
.grid-level { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.level { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; }
.level.dipilih { border-color: rgba(4, 120, 87, .45); box-shadow: 0 0 0 3px rgba(4, 120, 87, .14), var(--bayang); }
.kata-baris { padding: 12px 14px; border-radius: 18px; background: var(--kaca); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.arab-kata { font-family: var(--arab); font-size: 1.6rem; line-height: 1.7; direction: rtl; min-width: 84px; text-align: right; }
.titik-status { width: 11px; height: 11px; border-radius: 50%; background: rgba(67, 96, 79, .25); flex: 0 0 auto; }
.titik-status.belajar { background: #D97706; }
.titik-status.kuasai { background: #10B981; }
.detail-kata h2 { margin: 6px 0; }
.contoh-ayat { padding: 10px 12px; border-radius: 13px; background: rgba(255, 255, 255, .55); border: 1px solid var(--garis); margin-bottom: 8px; }
.contoh-ayat b { color: var(--indigo); font-size: .84rem; }

.kepala-sesi { display: flex; flex-direction: column; gap: 10px; }
.kartu-flip, .kartu-kuis { text-align: center; }
.sisi-belakang { margin: 10px 0 18px; }
.pilihan { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* Kontrol baca: lompat ayat, penanda putar, navigasi surah */
.baris-ayat { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 4px; }
.lompat-ayat { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lompat-ayat .field-inline { flex: 0 1 190px; }
.lompat-ayat input { min-height: 38px; }
.penanda-putar { flex: 1 1 140px; margin: 0 0 8px; color: var(--indigo); font-weight: 600; }
.pindah-surah { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Pemilih qari & kartu Surah Quest (kelas ini dipakai di markup) */
.pilih-qari { min-height: 40px; }
.kaki-quest {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.quest-kartu { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.quest-kartu.selesai { border-color: rgba(16, 185, 129, .4); }
.btn-pilihan { background: rgba(255, 255, 255, .82); border: 1px solid rgba(67, 96, 79, .2); color: var(--ink); width: 100%; }
.btn-pilihan:hover { border-color: var(--indigo); color: var(--indigo); }
.umpan.baik { border-color: rgba(16, 185, 129, .4); }
.umpan.buruk { border-color: rgba(217, 119, 6, .5); }
.umpan .label-mini { color: var(--indigo); }
.selesai-sesi { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.bawah-sesi { text-align: center; margin: 20px 0 10px; }
.bawah-sesi .tautan {
  background: none; border: 0; cursor: pointer; min-height: 36px; padding: 8px 14px;
  font: inherit; font-weight: 600;
}

/* ------------------------------------------- arena bermain: kartu soal MENYALA
   Model pencahayaan seperti contoh yang dikirim pengguna (blok gelap dengan pendar
   neon di atas latar terang). Diterapkan HANYA pada kartu soal/pertanyaan saat
   bermain — .kartu-kuis (Jelajah Kalimah, Muraja'ah, Kilat Hasanah, Kalibrasi),
   .kartu-flip (mode kartu), dan .kartu-buru (Cari Kalimah). Kartu lain (beranda,
   mushaf, kepala sesi, kartu umpan hijau/kuning) tetap terang seperti semula.
   Dua aturan teknis yang WAJIB dijaga:
   1. Warna baru ditulis di :root karena audit_desain.js membaca palet dari sana.
   2. Pendar dan kilau memakai box-shadow + latar kartu, BUKAN elemen semu yang
      melebar keluar (inset negatif). Elemen semu yang melebar menambah lebar
      dokumen dan membuat halaman melimpah horizontal (audit_ui.js menolak > 1px) —
      pernah terjadi: inset -30px menghasilkan limpahan 13px. box-shadow tidak
      dihitung sebagai limpahan, jadi aman dipakai untuk pendar.
   Catatan audit kontras: teks di dalam .kartu dilewati pemeriksaan kontras otomatis
   (audit_ui.js berhenti pada latar bergradien), jadi keterbacaan dijaga manual —
   teks terang di atas blok gelap, bukan sebaliknya. */
.kartu-kuis, .kartu-flip, .kartu-buru {
  background: var(--arena-2);
  background-image:
    /* taburan kilau emas & neon di dalam kartu */
    radial-gradient(3px 3px at 11% 13%, var(--kilau), transparent 62%),
    radial-gradient(2.2px 2.2px at 89% 19%, var(--neon), transparent 62%),
    radial-gradient(2.6px 2.6px at 22% 88%, var(--neon-2), transparent 62%),
    radial-gradient(2px 2px at 78% 92%, var(--kilau), transparent 62%),
    radial-gradient(2px 2px at 52% 5%, var(--neon), transparent 62%),
    radial-gradient(2px 2px at 68% 62%, var(--kilau), transparent 62%),
    /* semburat cahaya di dalam kartu */
    radial-gradient(120% 95% at 10% 0%, rgba(124, 255, 79, .20), transparent 62%),
    radial-gradient(115% 95% at 92% 102%, rgba(255, 215, 94, .16), transparent 60%),
    radial-gradient(95% 70% at 50% 50%, rgba(52, 245, 160, .12), transparent 72%),
    linear-gradient(160deg, var(--arena-2) 0%, var(--arena) 56%, var(--arena-3) 100%);
  border: 1px solid rgba(124, 255, 79, .5);
  color: var(--arena-teks);
  box-shadow: var(--pendar-arena);
  /* denyut pendar: "menyala" perlahan. Dimatikan otomatis bila pengguna memilih
     mengurangi gerak (lihat @media prefers-reduced-motion di atas). */
  animation: arenaDenyut 4.5s ease-in-out infinite;
}
@keyframes arenaDenyut {
  0%, 100% { box-shadow: 0 0 0 1px rgba(124, 255, 79, .38), 0 0 22px rgba(124, 255, 79, .42),
             0 0 56px rgba(52, 245, 160, .30), 0 10px 26px rgba(6, 24, 15, .22),
             inset 0 0 66px rgba(124, 255, 79, .07); }
  50%      { box-shadow: 0 0 0 1px rgba(124, 255, 79, .55), 0 0 30px rgba(124, 255, 79, .58),
             0 0 78px rgba(52, 245, 160, .40), 0 10px 26px rgba(6, 24, 15, .22),
             inset 0 0 80px rgba(124, 255, 79, .10); }
}
/* Ring tepi kartu: bukan gradien tema, melainkan neon hijau→emas (sesuai contoh). */
.kartu-kuis::after, .kartu-flip::after, .kartu-buru::after {
  padding: 2px;
  background: linear-gradient(120deg, var(--neon) 0%, var(--neon-2) 34%, var(--kilau) 68%, var(--neon) 100%);
  filter: drop-shadow(0 0 7px rgba(124, 255, 79, .55));
}

/* Kepala sesi (bilah skor & progres): ikut gelap menyala supaya satu paket dengan
   kartu soal — inilah "arena"-nya. Bilah progres memakai gradien neon→emas dengan
   pendar, dan angka benar/salah diberi warna berbeda (neon vs emas). */
.kartu.kepala-sesi {
  background: var(--arena-2);
  background-image:
    radial-gradient(2.6px 2.6px at 9% 20%, var(--kilau), transparent 62%),
    radial-gradient(2.2px 2.2px at 91% 14%, var(--neon), transparent 62%),
    radial-gradient(2.2px 2.2px at 74% 84%, var(--neon-2), transparent 62%),
    radial-gradient(130% 100% at 0% 0%, rgba(124, 255, 79, .2), transparent 60%),
    radial-gradient(130% 100% at 100% 100%, rgba(255, 215, 94, .14), transparent 60%),
    linear-gradient(150deg, var(--arena-2) 0%, var(--arena) 62%, var(--arena-3) 100%);
  border: 1px solid rgba(124, 255, 79, .45);
  color: var(--arena-teks);
  box-shadow: var(--pendar-arena);
  animation: arenaDenyut 4.5s ease-in-out infinite;
}
.kartu.kepala-sesi::after {
  padding: 2px;
  background: linear-gradient(120deg, var(--neon) 0%, var(--kilau) 55%, var(--neon-2) 100%);
  filter: drop-shadow(0 0 6px rgba(124, 255, 79, .45));
}
.kartu.kepala-sesi h1, .kartu.kepala-sesi .kepala-sesi-bawah p { color: var(--arena-teks); }
.kartu.kepala-sesi .muted { color: var(--arena-muted); }
.kartu.kepala-sesi .label-mini { color: var(--neon); }
.kartu.kepala-sesi .tautan-kecil { color: var(--neon-2); }
.kartu.kepala-sesi .bar {
  height: 10px; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .35);
}
.kartu.kepala-sesi .bar span {
  background: linear-gradient(90deg, var(--neon-2) 0%, var(--neon) 45%, var(--kilau) 100%);
  box-shadow: 0 0 14px rgba(124, 255, 79, .7);
}
.kartu.kepala-sesi .nilai-benar { color: var(--neon); }
.kartu.kepala-sesi .nilai-salah { color: var(--kilau); }
.kartu.kepala-sesi .tombol-suara {
  background: rgba(255, 255, 255, .08); border-color: rgba(124, 255, 79, .34); color: var(--neon);
}
.kartu.kepala-sesi .tombol-suara.mati { color: var(--arena-muted); }

/* Teks di dalam kartu soal: terang, dengan label neon & angka waktu keemasan. */
.kartu-kuis .arab-besar, .kartu-flip .arab-besar, .kartu-buru .arab-besar,
.kartu-kuis h2, .kartu-flip h2, .kartu-buru h2,
.kartu-flip .sisi-belakang h2 { color: var(--arena-teks); }
.kartu-kuis .arab-besar, .kartu-flip .arab-besar, .kartu-buru .arab-besar {
  text-shadow: 0 0 26px rgba(124, 255, 79, .38);
}
.kartu-kuis .label-mini, .kartu-flip .label-mini, .kartu-buru .label-mini { color: var(--neon); }
.kartu-kuis .muted, .kartu-flip .muted, .kartu-buru .muted,
.kartu-buru .sedang { color: var(--arena-muted); }
.kartu-kuis [data-rush-waktu] { color: var(--kilau); }

/* Tombol pilihan jawaban & tombol pendamping di dalam kartu gelap. */
.kartu-kuis .btn-pilihan, .kartu-flip .btn-pilihan, .kartu-buru .btn-pilihan {
  background: rgba(255, 255, 255, .07); border-color: rgba(124, 255, 79, .35); color: var(--arena-teks);
}
.kartu-kuis .btn-pilihan:hover, .kartu-flip .btn-pilihan:hover, .kartu-buru .btn-pilihan:hover,
.kartu-kuis .btn-pilihan:focus-visible, .kartu-flip .btn-pilihan:focus-visible, .kartu-buru .btn-pilihan:focus-visible {
  background: rgba(124, 255, 79, .16); border-color: var(--neon); color: var(--arena-teks);
  box-shadow: 0 0 18px rgba(124, 255, 79, .4);
}
.kartu-kuis .btn-ghost, .kartu-flip .btn-ghost, .kartu-buru .btn-ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(124, 255, 79, .34); color: var(--arena-teks);
}
.kartu-kuis input, .kartu-flip input, .kartu-buru input {
  background: rgba(255, 255, 255, .08); border-color: rgba(124, 255, 79, .34); color: var(--arena-teks);
}
.kartu-kuis input::placeholder, .kartu-buru input::placeholder { color: var(--arena-muted); }

/* Cari Kalimah: kotak huruf acak — BISA DIKETUK (tombol), warna kontras bergilir.
   Tiap kotak punya --aksen sendiri (emas/merah/ungu/biru); saat sudah dipakai
   menyusun kata, kotaknya berisi penuh warna itu dan hurufnya menjadi gelap. */
.kartu-buru .huruf-acak { gap: 10px; }
.kartu-buru .huruf {
  --aksen: var(--arena-kuning);
  --pendar: rgba(255, 215, 94, .34);
  background: rgba(255, 255, 255, .06);
  border: 2px solid var(--aksen);
  color: var(--aksen);
  box-shadow: 0 0 15px var(--pendar), inset 0 0 12px var(--pendar);
}
.kartu-buru .huruf:nth-child(4n+2) { --aksen: var(--arena-merah); --pendar: rgba(255, 122, 138, .34); }
.kartu-buru .huruf:nth-child(4n+3) { --aksen: var(--arena-ungu);  --pendar: rgba(199, 155, 255, .34); }
.kartu-buru .huruf:nth-child(4n+4) { --aksen: var(--arena-biru);  --pendar: rgba(111, 227, 255, .34); }
.kartu-buru .huruf:hover, .kartu-buru .huruf:focus-visible {
  transform: translateY(-3px) scale(1.06);
  background: rgba(255, 255, 255, .16);
}
.kartu-buru .huruf.terpakai {
  background: var(--aksen);
  color: var(--arena);
  border-color: #fff;
  box-shadow: 0 0 22px var(--pendar), 0 6px 14px rgba(6, 24, 15, .34);
}
.kartu-buru .petunjuk-huruf {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: -8px 0 14px; font-size: .78rem; color: var(--arena-muted);
}
.kartu-buru .petunjuk-huruf .ikon { width: 15px; height: 15px; color: var(--kilau); }
/* Warna kontras tambahan supaya kartunya terasa hidup: pertanyaan berwarna emas,
   kotak jawaban berpendar biru langit saat disentuh. */
.kartu-buru .sedang { color: var(--arena-kuning); }
.kartu-buru input:focus {
  border-color: var(--arena-biru);
  box-shadow: 0 0 0 3px rgba(111, 227, 255, .28), 0 0 18px rgba(111, 227, 255, .35);
  outline: none;
}

/* ------------------------------------------------------------- refleksi   */
.kartu-ayat-refleksi .arab { font-size: 2.1rem; }
.form-refleksi textarea { min-height: 84px; }
.jurnal-mini, .jurnal-kartu { display: flex; flex-direction: column; gap: 6px; }
.jurnal-mini p, .jurnal-kartu p { margin: 0; }
.langkah { color: #047857; font-size: .88rem; display: flex; gap: 6px; align-items: flex-start; }
.langkah .ikon { width: 16px; height: 16px; margin-top: 3px; color: #10B981; }

/* ---------------------------------------------------------------- profil  */
.profil-kepala { display: flex; gap: 16px; align-items: center; }

.profil-kepala p { margin: 2px 0; }
.grafik { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.grafik-batang { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.grafik-batang span { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #6EE7B7, #047857 70%, #065F46); min-height: 4px; }
.grafik-batang i { font-style: normal; font-size: .75rem; color: var(--muted); }
.kotak-salin { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.kotak-salin input { font-size: .84rem; min-height: 36px; }
.daftar-sederhana { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; }
.daftar-sederhana li { margin-bottom: 4px; }

/* --------------------------------------------------------------- desktop  */
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .dua-kolom { grid-template-columns: repeat(2, 1fr); }
  .grid-level { grid-template-columns: repeat(4, 1fr); }
  .sambutan { flex-direction: row; justify-content: space-between; align-items: center; }
  .stat-mini { flex: 0 0 auto; }
  .arab { font-size: 2.2rem; line-height: 2.4; }
  h1 { font-size: 1.8rem; }
}

@media (min-width: 940px) {
  body { padding-bottom: 40px; }
  .nav-bawah { display: none; }
  .nav-atas { display: flex; }
  .wadah { padding: 26px 24px 60px; }
  .topbar { padding: 14px 28px; }
  .grid-level { grid-template-columns: repeat(6, 1fr); }
  .sheet { align-items: center; justify-content: center; }
  .sheet-isi { max-width: 460px; border-radius: 22px; margin: 0 auto; }
}

/* Fokus keyboard harus terlihat jelas di semua elemen interaktif */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(4, 120, 87, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

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

.pusat { text-align: center; }

/* Tautan di dalam paragraf berita tetap nyaman disentuh */
main p a, main li a {
  display: inline-block;
  padding: 4px 2px;
  min-height: 30px;
}

/* Word Quest: 730+ level */
.lompat-level { display: flex; gap: 10px; align-items: flex-end; margin: 12px 0 16px; flex-wrap: wrap; }
.lompat-level .field-inline { flex: 0 1 220px; }
.level.ada-progres { border-color: rgba(16, 185, 129, .35); }
.level .muted.kecil { line-height: 1.35; }

/* ------------------------------------------------- audio kata & umpan    */
.kepala-sesi-bawah {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-top: 6px;
}
.kepala-sesi-bawah p { margin: 0; }
.tombol-suara {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--garis); background: rgba(255, 255, 255, .72);
  color: var(--indigo); font: inherit; font-size: .8rem; font-weight: 600;
}
.tombol-suara .ikon { width: 16px; height: 16px; }
.tombol-suara.mati { color: var(--muted); opacity: .75; }
.putar-kata { margin: 4px 0 12px; }
.umpan-suara { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }

/* Tombol putar ayat yang sedang berbunyi */
.bunder.sedang {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; border-color: transparent;
}

/* Kartu beranda: tautan penuh tanpa gaya, tombol aksi di bawahnya */
.kartu-tautan-tanpa-gaya { text-decoration: none; color: inherit; display: block; }
.kartu-kata .aksi-baris, .kartu-ayat-hari .aksi-baris { margin-top: 10px; }
.kartu-kata, .kartu-ayat-hari { display: flex; flex-direction: column; gap: 4px; }

/* Pesan audio gagal dimuat (muncul sementara di bawah) */
.pesan-audio { position: fixed; left: 16px; right: 16px; bottom: 96px; z-index: 60; margin: 0; box-shadow: var(--bayang); }
@media (min-width: 940px) { .pesan-audio { left: auto; right: 24px; bottom: 24px; max-width: 360px; } }

/* Hasil pencarian ayat */
.cari-ayat { margin-top: 4px; }
.hasil-ayat { margin-top: 0; }
.daftar-hasil-ayat { display: flex; flex-direction: column; gap: 14px; }
.hasil-ayat-baris { display: flex; flex-direction: column; gap: 6px; margin: 0; text-decoration: none; color: inherit; }
.hasil-ayat-baris .kecil-arab { font-size: 1.35rem; text-align: right; margin: 2px 0; }
.hasil-ayat-baris mark { background: rgba(217, 119, 6, .18); color: inherit; padding: 0 2px; border-radius: 4px; }

/* Tanda waqf/bukan-kata di dalam ayat: tidak bisa diketuk */
.arab .tanda { cursor: default; }

/* ---------------------------------------------- bermain, liga, pencapaian */
.grid-bermain { gap: 16px; }
.kartu-aksi {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
  text-decoration: none; color: inherit;
}
.kartu-aksi p { margin: 0; }
.kartu-aksi .badge { align-self: flex-start; margin-top: auto; }
.badge-netral { background: rgba(67, 96, 79, .12); color: var(--muted); }

.pesan-lencana {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(4, 120, 87, .16), rgba(16, 185, 129, .18));
  border: 1px solid rgba(4, 120, 87, .28); color: var(--ink);
}
.pesan-lencana .ikon { width: 18px; height: 18px; color: var(--indigo); flex: 0 0 auto; }

.papan-liga { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.papan-liga li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--garis);
}
.papan-liga li.aku { border-color: rgba(4, 120, 87, .45); background: rgba(4, 120, 87, .08); }
.papan-liga .no {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: rgba(4, 120, 87, .12); color: var(--indigo); font-weight: 700; font-size: .82rem;
}
.papan-liga .nama { flex: 1; min-width: 0; }
.papan-liga .liga-nama { font-size: .8rem; color: var(--muted); }

.kartu-lencana { display: flex; flex-direction: column; gap: 6px; margin: 0; opacity: .72; }
.kartu-lencana.terbuka { opacity: 1; border-color: rgba(16, 185, 129, .35); }
.kartu-lencana p { margin: 0; }
.lencana-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.lencana-strip .ikon { width: 15px; height: 15px; }

.rush-baris { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.kartu-buru .sedang { margin: 4px 0; }
.huruf-acak { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.huruf {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px;
  border-radius: 13px; background: rgba(4, 120, 87, .1); border: 1px solid var(--garis);
  font: inherit; font-family: var(--arab); font-size: 1.6rem; line-height: 1;
  cursor: pointer; transition: transform .13s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.huruf:active { transform: scale(.94); }
.form-buru input[dir=rtl] { font-family: var(--arab); font-size: 1.5rem; text-align: center; }
.kartu-lazim.hafal { border-color: rgba(16, 185, 129, .4); }
.teks-tersembunyi { letter-spacing: .3em; margin: 8px 0; }
.aksi-baris0 { display: flex; gap: 6px; align-items: center; }

/* Wishlist */
.kartu-wish { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.surah-tanpa-gaya { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }

/* Multi-bahasa */
.pilih-bahasa { display: flex; gap: 4px; align-items: center; }
.bahasa-item {
  display: grid; place-items: center; min-width: 38px; height: 36px; padding: 0 8px;
  border-radius: 10px; text-decoration: none; font-size: .74rem; font-weight: 700;
  color: var(--muted); background: rgba(255, 255, 255, .6); border: 1px solid var(--garis);
}
.bahasa-item.aktif { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; border-color: transparent; }
.pilih-bahasa.kompak { display: none; }
@media (min-width: 940px) { .pilih-bahasa.kompak { display: flex; } }

/* Arab (RTL): teks Arab tetap RTL, tata letak mengikuti arah bahasa */
[dir=rtl] .arab, [dir=rtl] .arab-besar, [dir=rtl] .arab-mini, [dir=rtl] .arab-nama,
[dir=rtl] .arab-kata, [dir=rtl] .arab-kecil, [dir=rtl] .huruf { direction: rtl; }
[dir=rtl] .nav-item, [dir=rtl] .papan-liga li, [dir=rtl] .kartu-tautan,
[dir=rtl] .surah, [dir=rtl] .kata-baris, [dir=rtl] .hasil-ayat-baris { text-align: right; }
[dir=rtl] .ikon.panah, [dir=rtl] [data-ikon-arah] { transform: scaleX(-1); }
[dir=rtl] .grafik { flex-direction: row-reverse; }
[dir=rtl] .bar span { float: right; }

/* ------------------------------------------------- sedekah, notifikasi, dll */
.lonceng {
  position: relative; display: grid; place-items: center;
  flex: 0 0 auto; min-width: 38px; width: 38px; height: 38px;
  border-radius: 13px; color: var(--muted); text-decoration: none;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--garis);
}
.lonceng .ikon { width: 19px; height: 19px; }
.lonceng.ada { color: var(--indigo); }
.lonceng b {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px; font-size: .68rem; font-weight: 700;
  background: var(--pink); color: #fff;
}
.daftar-notif { display: flex; flex-direction: column; gap: 12px; }
.notif-baris { display: flex; align-items: center; gap: 12px; margin: 0; }
.notif-baris .isi { flex: 1; min-width: 0; }
.notif-baris p { margin: 0 0 2px; }
.notif-baris.baru { border-color: rgba(4, 120, 87, .45); background: rgba(4, 120, 87, .07); }
.notif-baris .ikon-bulat { width: 38px; height: 38px; }

.bintang-field { border: 0; padding: 0; margin: 0 0 4px; }
.bintang-field legend { color: var(--muted); font-size: .88rem; margin-bottom: 6px; }
.bintang-pilih { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
/* Input radio disembunyikan untuk mata, TETAPI pointer-events:none wajib:
   tanpa itu, input yang diposisikan absolut bisa menutupi tombol kirim dan
   membuatnya tidak bisa ditekan (pernah terjadi, tertangkap uji Playwright). */
.bintang-pilih input {
  position: absolute; opacity: 0; width: 34px; height: 34px;
  pointer-events: none; margin: 0;
}
.bintang-pilih label { cursor: pointer; color: rgba(67, 96, 79, .35); padding: 2px; }
.bintang-pilih label .ikon { width: 30px; height: 30px; }
.bintang-pilih input:checked ~ label,
.bintang-pilih label:hover, .bintang-pilih label:hover ~ label { color: #D97706; }
.bintang-pilih input:focus-visible + label { outline: 3px solid rgba(4, 120, 87, .5); border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------- umpan balik jawaban: blok GELAP menyala ---- */
/* Ketetapan warna tetap: jawaban BENAR = keluarga hijau, jawaban SALAH = keluarga
   emas/kuning. Yang berubah (permintaan pengguna 25 Sep 2026) adalah MODEL
   PENCAHAYAANNYA: dulu blok pastel terang dengan teks gelap, sekarang blok GELAP
   dengan pendar neon (benar) / kilau emas (salah) dan teks terang — supaya sejalan
   dengan kartu soal "arena bermain" dan terasa lebih seru.
   Keterbacaan tetap yang utama: teks memakai --arena-teks / --arena-muted, dan
   uji_suara.js memeriksa kontras setiap teks (ambang 4.5) terhadap warna dasar
   kartu ini — kalau token ini diubah jadi terlalu terang, uji itu akan gagal. */
.kartu.umpan-benar {
  background: var(--arena-benar);
  background-image:
    radial-gradient(3px 3px at 12% 14%, var(--kilau), transparent 62%),
    radial-gradient(2.2px 2.2px at 88% 20%, var(--neon), transparent 62%),
    radial-gradient(2.4px 2.4px at 24% 86%, var(--neon-2), transparent 62%),
    radial-gradient(2px 2px at 80% 90%, var(--kilau), transparent 62%),
    radial-gradient(130% 90% at 8% 0%, rgba(124, 255, 79, .22), transparent 62%),
    radial-gradient(120% 90% at 95% 100%, rgba(52, 245, 160, .18), transparent 62%),
    linear-gradient(155deg, var(--arena-benar) 0%, var(--arena) 68%, var(--arena-3) 100%);
  border-color: rgba(124, 255, 79, .55);
  box-shadow: var(--pendar-arena);
  animation: arenaDenyut 4.5s ease-in-out infinite;
}
.kartu.umpan-salah {
  background: var(--arena-salah);
  background-image:
    radial-gradient(3px 3px at 14% 16%, var(--kilau), transparent 62%),
    radial-gradient(2.2px 2.2px at 86% 22%, var(--emas-muda), transparent 62%),
    radial-gradient(2.4px 2.4px at 26% 88%, var(--kilau), transparent 62%),
    radial-gradient(2px 2px at 78% 92%, var(--emas-muda), transparent 62%),
    radial-gradient(130% 90% at 8% 0%, rgba(255, 215, 94, .24), transparent 62%),
    radial-gradient(120% 90% at 95% 100%, rgba(217, 119, 6, .22), transparent 62%),
    linear-gradient(155deg, var(--arena-salah) 0%, var(--arena-salah-tua) 62%, var(--arena) 100%);
  border-color: rgba(255, 215, 94, .5);
  box-shadow: 0 0 0 1px rgba(255, 215, 94, .3), 0 0 24px rgba(255, 215, 94, .32),
    0 0 60px rgba(217, 119, 6, .26), 0 10px 26px rgba(20, 12, 2, .26),
    inset 0 0 66px rgba(255, 215, 94, .07);
  animation: pendarEmasDenyut 4.5s ease-in-out infinite;
}
/* Ring tepi: benar = neon hijau, salah = emas. Warna ring inilah yang diperiksa
   uji_suara.js untuk memastikan kedua jenis umpan masih bisa dibedakan. */
.kartu.umpan-benar::after {
  padding: 2px;
  background: linear-gradient(120deg, var(--neon) 0%, var(--neon-2) 60%, var(--kilau) 100%);
  filter: drop-shadow(0 0 7px rgba(124, 255, 79, .5));
}
.kartu.umpan-salah::after {
  padding: 2px;
  background: linear-gradient(120deg, var(--kilau) 0%, var(--emas) 58%, var(--emas-muda) 100%);
  filter: drop-shadow(0 0 7px rgba(255, 215, 94, .45));
}
@keyframes pendarEmasDenyut {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 215, 94, .24), 0 0 20px rgba(255, 215, 94, .26),
             0 0 52px rgba(217, 119, 6, .2), 0 10px 26px rgba(20, 12, 2, .26),
             inset 0 0 66px rgba(255, 215, 94, .06); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 215, 94, .4), 0 0 30px rgba(255, 215, 94, .4),
             0 0 74px rgba(217, 119, 6, .3), 0 10px 26px rgba(20, 12, 2, .26),
             inset 0 0 80px rgba(255, 215, 94, .1); }
}

/* Teks di dalam kartu umpan: TERANG di atas blok gelap. */
.kartu.umpan-benar, .kartu.umpan-salah,
.kartu.umpan-benar h2, .kartu.umpan-salah h2,
.kartu.umpan-benar p, .kartu.umpan-salah p,
.kartu.umpan-benar b, .kartu.umpan-salah b,
.kartu.umpan-benar .terjemah, .kartu.umpan-salah .terjemah { color: var(--arena-teks); }
.kartu.umpan-benar .arab-besar, .kartu.umpan-salah .arab-besar {
  color: var(--arena-teks); text-shadow: 0 0 26px rgba(124, 255, 79, .3);
}
.kartu.umpan-benar .muted, .kartu.umpan-salah .muted,
.kartu.umpan-benar .suara-teks, .kartu.umpan-salah .suara-teks { color: var(--arena-muted); }
.kartu.umpan-benar .label-mini, .kartu.umpan-benar .suara-status,
.kartu.umpan-benar [data-petunjuk-terkunci], .kartu.umpan-benar .rincian summary { color: var(--neon); }
.kartu.umpan-salah .label-mini, .kartu.umpan-salah .suara-status,
.kartu.umpan-salah [data-petunjuk-terkunci], .kartu.umpan-salah .rincian summary { color: var(--kilau); }
.kartu.umpan-benar .suara-status::before { background: var(--neon); }
.kartu.umpan-salah .suara-status::before { background: var(--kilau); }

/* Panel notifikasi & rincian dalil di dalam kartu gelap: kaca gelap, bukan putih. */
.kartu.umpan-benar .suara-notif, .kartu.umpan-salah .suara-notif {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16);
}
.kartu.umpan-benar .suara-notif .ikon-bulat {
  background: linear-gradient(135deg, rgba(124, 255, 79, .22), rgba(52, 245, 160, .18));
  color: var(--neon); box-shadow: 0 0 16px rgba(124, 255, 79, .3);
}
.kartu.umpan-salah .suara-notif .ikon-bulat {
  background: linear-gradient(135deg, rgba(255, 215, 94, .24), rgba(217, 119, 6, .18));
  color: var(--kilau); box-shadow: 0 0 16px rgba(255, 215, 94, .28);
}
.kartu.umpan-benar .rincian, .kartu.umpan-salah .rincian {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
}
.kartu.umpan-benar .tautan, .kartu.umpan-salah .tautan { color: var(--neon-2); }

/* Tombol di dalam kartu umpan: pendamping = kaca gelap, tombol lanjut = NEON. */
.kartu.umpan-benar .btn-ghost, .kartu.umpan-salah .btn-ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: var(--arena-teks);
}
.kartu.umpan-benar .btn-primary {
  background: linear-gradient(100deg, var(--neon-2) 0%, var(--neon) 55%, var(--kilau) 100%);
  color: var(--arena); box-shadow: 0 8px 24px rgba(124, 255, 79, .4);
}
.kartu.umpan-salah .btn-primary {
  background: linear-gradient(100deg, var(--kilau) 0%, var(--emas-muda) 55%, var(--emas) 100%);
  color: var(--arena-salah); box-shadow: 0 8px 24px rgba(255, 215, 94, .38);
}

/* Notifikasi "ucapkan hamdalah / istighfar" + status mikrofon */
.suara-notif {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 0 8px; padding: 12px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .85);
}
.suara-notif .ikon-bulat { width: 40px; height: 40px; }
.suara-notif b { display: block; font-size: .98rem; }
.suara-notif p { margin: 0; }
.suara-notif .frasa { font-family: var(--arab); font-size: 1.35rem; line-height: 1.6; direction: rtl; }
.suara-status {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 0;
  font-weight: 600; color: var(--indigo); font-size: .92rem;
}
.suara-status::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo);
  animation: denyut 1.2s ease-in-out infinite; flex: 0 0 auto;
}
.suara-status.terdengar { color: #047857; }
.suara-status.terdengar::before { background: #10B981; animation: none; }
.suara-status.gagal { color: #92400E; }
.suara-status.gagal::before { background: #D97706; animation: none; }
@keyframes denyut { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.suara-teks { margin: 4px 0 0; font-size: .88rem; color: var(--muted); min-height: 1.2em; }

/* ============================ SAMBUTAN & PEDOMAN ========================== */
/* Tulisan "GEMAR" tepat di bawah lambang utama pada layar pembuka & sambutan,
   dengan semboyan panjang di bawahnya (permintaan pengguna). */
.merek-utama {
  margin: 4px 0 2px; font-size: 1.9rem; letter-spacing: .08em; font-weight: 800;
  background: linear-gradient(100deg, var(--hijau-tua), var(--indigo) 45%, var(--emas));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
p.merek-utama { font-size: 1.7rem; line-height: 1.2; }
.masuk-hero .nama-panjang, .sambutan-hero .nama-panjang { margin-bottom: 6px; }

/* Tanda tangan sambutan: lambang LCA + GEMAR berdampingan */
.tanda-lambang { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tanda-lambang img { border-radius: 50%; }

.sambutan-hero { text-align: center; margin-bottom: 18px; }
.lambang-sambutan {
  width: 118px; height: 118px; display: block; margin: 0 auto 12px;
  /* Berkas asli GEMAR berupa lambang LINGKARAN yang tepat menyentuh keempat tepi
     berkas, sehingga sudutnya berwarna putih (kanvas). Crop bulat ini hanya
     menyembunyikan kanvas itu — gambarnya sendiri tidak diubah. */
  border-radius: 50%;
  filter: drop-shadow(0 12px 26px rgba(16, 36, 27, .22));
}
.kartu-sambutan h1 { font-size: 1.45rem; margin: 6px 0 8px; }
.salam { font-weight: 600; color: var(--indigo); text-align: left; }
.salam-sapaan { font-weight: 600; color: var(--hijau-tua); margin: 0 0 2px; }
.sambutan-bagian { margin-top: 20px; }
.sambutan-bagian h2 {
  display: flex; align-items: center; gap: 9px; font-size: 1rem; margin-bottom: 6px;
}
.sambutan-bagian h2 .ikon { width: 19px; height: 19px; color: var(--indigo); flex: 0 0 auto; }
.sambutan-bagian p { margin: 0; }
.sambutan-himbauan {
  background: linear-gradient(120deg, rgba(4, 120, 87, .10), rgba(217, 119, 6, .10) 100%);
  border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(4, 120, 87, .22);
}
.sambutan-tanda {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(67, 96, 79, .18);
}
.sambutan-tanda b { display: block; }
.lambang-tanda { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.kartu-ayat-sambutan .arab { font-size: 2rem; }
.kartu-ayat-sambutan audio { width: 100%; margin-top: 10px; }

.kartu-pedoman { display: flex; flex-direction: column; gap: 10px; }
.pedoman-kepala { display: flex; align-items: center; gap: 12px; }
.pedoman-kepala h2 { font-size: 1.02rem; margin: 0; }
.pedoman-kepala .ikon-bulat { width: 42px; height: 42px; }
.daftar-langkah { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.daftar-langkah li { line-height: 1.6; }
.daftar-langkah li::marker { color: var(--indigo); font-weight: 700; }

/* Kartu sambutan di beranda */
.kartu-sambutan-mini {
  background: linear-gradient(115deg, rgba(4, 120, 87, .12), rgba(16, 185, 129, .10) 55%, rgba(217, 119, 6, .12));
  border-color: rgba(4, 120, 87, .26);
}

/* Tombol lanjut pada kartu umpan: terbuka setelah ucapannya terdengar */
[data-umpan-lanjut][hidden] { display: none !important; }
[data-umpan-lanjut]:not([hidden]) { display: flex; }
[data-petunjuk-terkunci] { font-weight: 600; color: var(--indigo); }
/* warna [data-petunjuk-terkunci] diatur pada blok kartu umpan di atas */


/* ------------------------------------------------ kaidah tashrif & pustaka */
.kartu-tashrif .kotak-stat b { font-size: 1.05rem; }
.kartu-tashrif .arab-besar-kecil { font-family: var(--arab); font-size: 1.5rem; direction: rtl; }
.daftar-tashrif { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.daftar-tashrif li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; border-radius: 13px;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--garis);
}
.daftar-tashrif .jenis { flex: 1 1 150px; font-size: .86rem; color: var(--ink); font-weight: 600; }
.daftar-tashrif .arab-mini { margin: 0; font-size: 1.3rem; }
.dalil-umpan { margin-top: 12px; }
.dalil-umpan .arab-mini { margin: 8px 0 2px; }

.kartu-pustaka { display: flex; flex-direction: column; gap: 10px; }
.daftar-pustaka { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.daftar-pustaka li { padding-left: 16px; border-left: 3px solid rgba(4, 120, 87, .35); }
.daftar-pustaka b { display: block; }
.daftar-pustaka p { margin: 2px 0 0; }

/* Dalil sedekah harian */
.kartu-dalil-sedekah { background: linear-gradient(100deg, rgba(255, 253, 240, .86), rgba(240, 253, 244, .74), rgba(254, 243, 199, .74)); }
.kartu-dalil-sedekah .arab { font-size: 1.85rem; }
.kartu-dalil-sedekah audio { width: 100%; margin-top: 8px; }
.saran-emas { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: #7C4A03; font-weight: 600; }
.saran-emas .ikon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--emas); }


/* ------------------------------------------------------------ perataan teks */
/* Hanya blok PROSA PANJANG yang di-justify. Baris pendek (salam, sapaan, label,
   ayat Arab, keterangan singkat) TIDAK di-justify karena justifikasi membuat celah
   lebar di antara kata — itu yang membuat "Assalamu'alaikum…" terlihat renggang.
   PENTING: selector justify ini dibungkus :where() supaya kekhususannya NOL.
   Sebelumnya selector biasa (0,1,1) mengalahkan aturan berbasis kelas di bawah
   (0,1,0), sehingga ".salam" dan ".arab" tidak berlaku dan teks salam penutup
   ("Wassalamu'alaikum…") serta ayat Arab di jurnal ikut ter-justify dan terlihat
   renggang. Dengan :where(), aturan kelas berikut SELALU menang di halaman mana pun. */
:where(.sambutan-bagian p, .kartu-sambutan-utuh > p,
.daftar-langkah li, .daftar-poin li, .daftar-pustaka p,
.daftar-alasan p, .ayat .terjemah, .jurnal-kartu p, .rincian > p) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* Kecualian: salam, label, dan baris pendek selalu rata kiri. */
.salam, .salam-sapaan, .sambutan-sublabel, .muted.kecil, .label-mini,
.kalimat-hitung, .penanda-putar {
  text-align: left;
  hyphens: none;
}
/* Teks Arab selalu rata kanan (RTL) — tidak pernah di-justify. */
.arab, .arab-mini, .arab-besar, .arab-nama, .arab-kata, .arab-kecil {
  text-align: right;
  hyphens: none;
}
/* Latin transliterasi & unsur antarmuka (tombol, pil, label) tidak di-justify. */
.latin, .huruf-acak, .irab-kata, a, button, .btn, .label-mini, .badge, .pil,
.nav-item, .nav-atas a, .papan-liga li, .blok-kepala, .judul-kartu, .reply-kuis {
  text-align: revert;
  hyphens: none;
}

/* ------------------------------------------------------------ kebijakan privasi */
.kartu-privasi .daftar-poin { margin-top: 6px; }
.kartu-privasi .sambutan-bagian { margin-top: 18px; }

/* Kartu admin di beranda + pintasan admin di bar atas */
.kartu-admin-beranda {
  background: linear-gradient(110deg, rgba(255, 255, 255, .86), rgba(232, 240, 254, .78) 55%, rgba(254, 243, 199, .7));
  border-color: rgba(30, 62, 134, .28);
}
.lonceng-admin { color: #7C4A03; background: linear-gradient(120deg, rgba(217, 119, 6, .18), rgba(139, 92, 246, .16)); }
.kotak-kode {
  display: flex; flex-direction: column; gap: 4px; margin: 12px 0;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .7); border: 1px dashed rgba(4, 120, 87, .45);
}
.kode-pemulihan {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem; letter-spacing: .08em; color: var(--hijau-tua); word-break: break-all;
}

/* Pil sorotan keunikan di halaman masuk */
.sorotan-keunikan {
  list-style: none; margin: 10px 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.sorotan-keunikan li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--garis); color: var(--ink);
}
.sorotan-keunikan .ikon { width: 15px; height: 15px; color: var(--indigo); flex: 0 0 auto; }

/* ----------------------------------------------------------- keunikan aplikasi */
.daftar-keunikan { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.kartu-keunikan { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kartu-keunikan h2 { font-size: 1.05rem; margin: 0; }
.keunikan-kepala { display: flex; align-items: center; gap: 10px; }
.keunikan-ikon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff;
}
.keunikan-ikon .ikon { width: 21px; height: 21px; }
.kartu-keunikan p { margin: 0; }
/* Butir pertama (ucapan hamdalah/istighfar) dibuat paling menonjol. */
.kartu-keunikan-utama {
  background: linear-gradient(110deg, rgba(255, 255, 255, .84), rgba(207, 247, 222, .78) 55%, rgba(254, 243, 199, .7));
  border-color: rgba(4, 120, 87, .34);
}
.kartu-keunikan-beranda {
  background: linear-gradient(110deg, rgba(255, 255, 255, .84), rgba(207, 247, 222, .72) 60%, rgba(254, 243, 199, .68));
  border-color: rgba(4, 120, 87, .3);
}

/* --------------------------------------------------------- pasang aplikasi (PWA) */
/* Pemicu kesiapan skala di dasbor admin (ambang 1.000 pengguna) */
.kotak-skala, .pesan-skala {
  display: flex; flex-direction: column; gap: 6px; margin: 12px 0;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .6); border: 1px solid var(--garis);
}
.pesan-skala { flex-direction: row; align-items: flex-start; gap: 12px; }
.pesan-skala .ikon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--emas); margin-top: 2px; }
.pesan-skala p { margin: 4px 0 0; }
.kotak-skala .blok-kepala { margin-bottom: 6px; }
.kotak-skala .bar { margin: 2px 0 6px; }

.kartu-pasang-mini { padding: 16px 18px; }
.pasang-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.lambang-pasang {
  width: 86px; height: 86px; border-radius: 50%; flex: 0 0 auto;
  filter: drop-shadow(0 10px 22px rgba(16, 36, 27, .2));
}
.pasang-hero > div { min-width: 0; }
.pasang-hero .merek-utama { font-size: 1.5rem; margin: 0 0 2px; }
.pasang-hero .nama-panjang { margin: 0 0 4px; }

/* ----------------------------------------------------------------- panel admin */
.tautan-admin {
  display: inline-flex; align-items: center; height: 36px; padding: 0 11px; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: .82rem; color: #7C4A03;
  background: linear-gradient(120deg, rgba(217, 119, 6, .16), rgba(139, 92, 246, .14));
  border: 1px solid rgba(217, 119, 6, .3);
}
.tautan-admin.aktif { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; border-color: transparent; }
.kartu-admin .aksi-baris { margin-top: 12px; }
.form-cari-admin { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 16px; }
.daftar-admin-pengguna { display: flex; flex-direction: column; gap: 14px; }
.daftar-admin-pengguna > details { padding: 12px 14px; }
.daftar-admin-pengguna > details > summary {
  cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 34px;
}
.daftar-admin-pengguna .daftar-angka { margin: 10px 0 6px; }
.aksi-admin { display: grid; gap: 14px; margin-top: 12px; }
.aksi-admin .form { display: grid; gap: 8px; padding: 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--garis); }
.aksi-admin .form-bahaya { border-color: rgba(180, 40, 40, .35); }
.baris-datetime { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.kotak-centang { display: flex; align-items: center; gap: 8px; }
/* Kotak centang dibuat cukup besar supaya nyaman disentuh (audit menuntut ≥32px). */
.kotak-centang input { width: 34px; height: 34px; accent-color: var(--indigo); }
.judul-admin { display: flex; align-items: center; gap: 9px; font-size: 1.2rem; margin: 0; }
.judul-admin .ikon { width: 20px; height: 20px; color: var(--indigo); flex: 0 0 auto; }
.daftar-admin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.daftar-admin > li { display: flex; gap: 12px; align-items: flex-start; }
.daftar-admin > li > div { min-width: 0; }
.daftar-admin p { margin: 2px 0 0; }
.daftar-masukan-admin, .daftar-pengumuman-admin {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
}
.daftar-masukan-admin > li, .daftar-pengumuman-admin > li {
  padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, .55); border: 1px solid var(--garis);
}
.kepala-masukan { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.kepala-masukan b { color: var(--emas); letter-spacing: .1em; }
.kotak-rata { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.kotak-rata b { font-size: 1.8rem; color: var(--hijau-tua); }
.bintang-tampil { color: var(--emas); font-size: 1.1rem; letter-spacing: .08em; }
.tabel-gulir { overflow-x: auto; max-width: 100%; }
.tabel-admin { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 320px; }
.tabel-admin th, .tabel-admin td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel-admin th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
[dir=rtl] .tabel-admin th, [dir=rtl] .tabel-admin td { text-align: right; }
.kartu-mini { padding: 12px 14px; margin: 0; }

/* --------------------------------------------------------------- i'rab ayat */
.rincian-irab { margin-top: 12px; }
.daftar-irab { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.daftar-irab li {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 10px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--garis);
}
.daftar-irab .irab-kata {
  font-family: var(--arab); font-size: 1.4rem; line-height: 1.6; direction: rtl;
  text-align: right; color: var(--ink);
}
.daftar-irab .irab-jenis { font-size: .84rem; font-weight: 700; color: var(--indigo); }
.daftar-irab .irab-kedudukan { font-size: .88rem; font-weight: 600; }
.daftar-irab .irab-tanda { font-size: .8rem; color: var(--muted); }
@media (min-width: 560px) {
  .daftar-irab li { grid-template-columns: minmax(130px, 1fr) 2fr; align-items: baseline; }
  .daftar-irab .irab-kata { grid-row: span 3; }
}


/* Header: semboyan panjang disembunyikan pada layar sempit agar tidak memaksa
   lebar dan mendorong menunya keluar layar. Di layar lebar tetap tampil. */
@media (max-width: 1150px) {
  .brand-teks i { display: none; }
}
@media (min-width: 940px) and (max-width: 1150px) {
  .brand-logo { width: 40px; height: 40px; }
  .brand-teks b { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ kalender */
.kartu-hijri { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.kartu-hijri .isi { flex: 1; min-width: 0; }
.kartu-hijri .isi p { margin: 0; }
.hijri-besar {
  font-size: 1.35rem; font-weight: 700; margin: 4px 0 6px;
  background: linear-gradient(100deg, var(--hijau-tua), var(--indigo) 55%, var(--emas));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.baris-kalender { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.form-kalender { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-kalender .field-inline { flex: 0 1 210px; }
.kotak-hijri {
  flex: 1 1 180px; padding: 10px 14px; border-radius: 13px;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--garis);
}
.kotak-hijri b { display: block; font-size: 1.05rem; }
.pesan-hari-besar { display: flex; align-items: center; gap: 8px; }
.pesan-hari-besar .ikon { width: 18px; height: 18px; color: var(--indigo); }
.daftar-hari-besar { display: flex; flex-direction: column; gap: 14px; }
.kartu-hari-besar { display: flex; align-items: center; gap: 16px; margin: 0; }
.kartu-hari-besar.terdekat {
  background: linear-gradient(100deg, rgba(4, 120, 87, .12), rgba(16, 185, 129, .1) 50%, rgba(217, 119, 6, .12));
  border-color: rgba(4, 120, 87, .3);
}
.hitung-hari {
  display: grid; place-items: center; min-width: 66px; padding: 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--garis); text-align: center;
}
.hitung-hari b { font-size: 1.4rem; line-height: 1.1; color: var(--hijau-tua); }
.hitung-hari span { font-size: .72rem; color: var(--muted); }
.kartu-hari-besar .isi { flex: 1; min-width: 0; }
.kartu-hari-besar .isi b { display: block; }
.kalimat-hitung { display: block; font-size: .86rem; font-weight: 600; color: var(--indigo); margin-top: 3px; }

/* Sambutan satu kartu + tanda tangan */
.kartu-sambutan-utuh { padding: 22px; }
.sambutan-ayat, .sambutan-tanggungjawab {
  background: linear-gradient(100deg, rgba(4, 120, 87, .07), rgba(255, 255, 255, .5) 55%, rgba(217, 119, 6, .08));
  border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(4, 120, 87, .18);
}
.sambutan-ayat .arab, .sambutan-tanggungjawab .arab { font-size: 1.85rem; margin-bottom: 8px; }
.tanda-nama { font-size: 1.02rem; }

.sambutan-sublabel { font-weight: 700; color: var(--hijau-tua); margin: 8px 0 2px; }