/* =========================================================
   myQur'an — Baca & Dengar Al-Qur'an
   Design tokens — palet Soft UI: pastel & netral, kontras tetap
   terjaga untuk keterbacaan teks Arab & terjemahan.
   ========================================================= */
/* Catatan: @font-face untuk "LPMQ Isep Misbah" dan "KFGQPC Uthman Taha
   Naskh" sengaja dihapus karena file .ttf-nya tidak ikut ter-bundle di
   paket ini (folder assets/fonts/ tidak ada), sehingga sebelumnya
   menyebabkan request 404 diam-diam setiap halaman reader dimuat.
   Opsi font tersebut juga sudah dihapus dari dropdown di surah.html.
   Jika Anda punya lisensi file font tersebut, tambahkan kembali blok
   @font-face ini, letakkan file .ttf di assets/fonts/, lalu munculkan
   lagi opsinya di <select id="fontFamilySelect">. */

:root{
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-2: #EFEAE0;
  --border: #E4DDCE;
  --text: #3A362F;
  --text-muted: #928873;
  --primary: #6E9483;
  --primary-strong: #55786A;
  --primary-tint: #E9EFEA;
  --gold: #C69A57;
  --shadow: 0 1px 2px rgba(58,54,47,.05), 0 8px 22px -12px rgba(58,54,47,.14);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --font-display: "Amiri", "Traditional Arabic", serif;
  --font-arabic: "Amiri", serif;
  --font-body: "Literata", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --arabic-scale: 1;
  --tap: 44px;
}

[data-theme="dark"]{
  --bg: #141916;
  --surface: #1B2320;
  --surface-2: #212B26;
  --border: #2A362F;
  --text: #E9E4D6;
  --text-muted: #94A69D;
  --primary: #7FB39C;
  --primary-strong: #9BCAB4;
  --primary-tint: #1E2B25;
  --gold: #D8BE86;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 26px -14px rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; width: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
body.modal-open{ overflow: hidden; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
img{ max-width:100%; display:block; }

.hidden{ display:none !important; }
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Semua teks ayat Arab (Mode Per Surat, Mode Per Halaman, & Bismillah)
   memakai class ini. Nilai awal diambil dari CSS variable --font-arabic
   (di-set inline oleh script anti-FOUC di <head>), lalu reader.js juga
   menerapkannya langsung ke setiap elemen — lihat fungsi
   applyArabicTypography() di assets/js/reader.js. Ini memastikan
   ganti jenis/ukuran font selalu menjangkau SEMUA teks ayat, bukan
   cuma Bismillah. */
.ayat-arabic-font{ font-family: var(--font-arabic); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.container{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 20px);
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky; top:0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 920px; margin:0 auto; padding: 14px clamp(16px, 4vw, 20px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 1.15rem; letter-spacing: .01em;
  color: var(--text);
  min-width:0;
}
.brand-mark{ width:30px; height:30px; color: var(--primary); flex-shrink:0; }
.icon-btn{
  position: relative;
  width: var(--tap); height: var(--tap); border-radius:50%;
  border:1px solid var(--border); background: var(--surface);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; color: var(--text);
  transition: transform .15s ease, background .2s ease;
  flex-shrink:0;
}
.icon-btn:hover{ background: var(--surface-2); }
.icon-btn:active{ transform: scale(.92); }

/* Aksen visual khusus tombol "Info & Dukungan" (baru) — dibuat sedikit
   menonjol dari tombol ikon lain (yang netral putih/abu) supaya lebih
   mengundang perhatian & rasa ingin tahu pengunjung untuk mengklik,
   tanpa terasa seperti iklan/mengganggu. Ikon emoji ℹ️ di HTML adalah
   fallback aman: tetap terlihat walau assets/js/info-menu.js gagal
   dimuat; begitu berhasil, ikon diganti otomatis dengan SVG bergaya
   medallion (lihat MaqraIcons.infoMark di assets/js/icons.js). */
.icon-btn-accent{
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary-strong);
  font-size: 1.05rem;
  animation: infoPulseRing 2.8s ease-out infinite;
}
.icon-btn-accent:hover{ background: var(--primary); color:#fff; animation-play-state: paused; }
/* PENTING: ukuran SVG dipaksa lewat CSS (bukan atribut width/height di
   HTML). Beberapa hosting menjalankan "optimasi/minifikasi" otomatis
   yang kadang menghapus atribut width/height pada SVG inline — tanpa
   baris ini, SVG bisa melebar ke ukuran default browser (300x150px)
   dan membuat tombol terlihat kosong/blank. */
#infoIconMark{ display:flex; align-items:center; justify-content:center; line-height:0; }
#infoIconMark svg{ width:19px; height:19px; display:block; flex-shrink:0; }
@keyframes infoPulseRing{
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
/* Catatan: animasi otomatis nonaktif untuk pengguna dengan preferensi
   "reduced motion" berkat aturan global *{ } di bagian atas file ini.
   Jika suatu saat Anda merasa efek berdenyutnya terlalu ramai, cukup
   hapus baris "animation: infoPulseRing..." di atas — sisanya
   (warna aksen) akan tetap tampil elegan tanpa gerakan. */

.bookmark-menu-wrap{ position:relative; flex-shrink:0; }
.bookmark-menu{
  position:absolute; right:0; top:calc(var(--tap) + 8px); width:min(260px, 80vw);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow); padding:8px; z-index:50;
}
.bookmark-menu.hidden{ display:none; }
.bookmark-menu-item{
  display:block; padding:10px 12px; border-radius: var(--radius-s); font-size:.85rem;
}
.bookmark-menu-item:hover{ background: var(--surface-2); }
.bookmark-menu-item small{ display:block; color: var(--text-muted); }
.bookmark-menu-empty{ padding:14px; text-align:center; color: var(--text-muted); font-size:.82rem; }
.icon-btn.has-bookmark::after{
  content:""; position:absolute; top:6px; right:6px; width:7px; height:7px;
  border-radius:50%; background: var(--gold);
}

/* ---------- Hero ---------- */
.hero{ padding: 36px 0 18px; }
.hero h1{
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 5vw, 2.15rem);
  font-weight: 500;
  margin: 0 0 8px;
  max-width: 30ch;
}
.hero-sub{
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 59ch;
  font-size: .96rem;
}
.search-box{ position:relative; }
.search-box input{
  width:100%; padding: 14px 16px 14px 44px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  box-shadow: var(--shadow);
  min-height: var(--tap);
}
.search-box input:focus{ border-color: var(--primary); }
.search-box::before{
  content:"";
  position:absolute; left:16px; top:50%; transform: translateY(-50%);
  width:18px; height:18px;
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 4a6 6 0 104.472 10.03l4.749 4.748 1.06-1.06-4.748-4.75A6 6 0 0010 4zm-4.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 4a6 6 0 104.472 10.03l4.749 4.748 1.06-1.06-4.748-4.75A6 6 0 0010 4zm-4.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z'/></svg>") center/contain no-repeat;
}

/* ---------- Continue reading card ---------- */
.continue-card{
  margin: 22px 0 6px;
  background: linear-gradient(135deg, var(--primary-tint), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.continue-card.hidden{ display:none; }
.continue-card > div{ min-width:0; overflow:hidden; }
.continue-card .cc-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--primary-strong); font-weight:600; }
.continue-card h3{ margin:2px 0 0; font-family: var(--font-body); font-size:1.05rem; overflow-wrap:anywhere; }
.continue-card .cc-arrow{ font-size:1.4rem; color: var(--primary); flex-shrink:0; }

/* ---------- Surah list ---------- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 30px 0 14px; }
.section-head h2{ font-family: var(--font-body); font-size:1.2rem; margin:0; }
.muted{ color: var(--text-muted); font-size:.85rem; }

.surah-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; padding-bottom: 40px;
  max-width: 100%;
}
@media (min-width: 640px){ .surah-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.surah-card{
  min-width: 0; /* item grid+flex ini wajib boleh menyusut, atau kartu kolom kanan akan terpotong di layar sempit */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px;
  display:flex; align-items:center; gap:12px;
  min-height: 64px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.surah-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.surah-badge{ position:relative; width:44px; height:44px; flex-shrink:0; color: var(--primary); }
.surah-badge svg{ width:100%; height:100%; }
.surah-badge span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-ui); font-weight:600; font-size:.8rem; color: var(--primary-strong);
}
.surah-info{ min-width:0; overflow:hidden; }
.surah-name-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; }
.surah-info h3{ margin:0; font-family: var(--font-body); font-size:.98rem; font-weight:600; overflow-wrap:anywhere; }
.surah-name-ar{ font-family: var(--font-display); font-size:1.05rem; color: var(--text-muted); }
.surah-meta{ margin: 3px 0 0; font-size:.76rem; color: var(--text-muted); overflow-wrap:break-word; }

.skeleton{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-m);
  height: 74px;
}
@keyframes shimmer{ 0%{background-position: 100% 0;} 100%{background-position: -100% 0;} }

.empty-state{ text-align:center; padding: 40px 20px; color: var(--text-muted); grid-column: 1/-1; }
.empty-state strong{ display:block; color: var(--text); margin-bottom:4px; font-family: var(--font-body); }

.site-footer{
  text-align:center; padding: 2px 20px 40px; color: var(--text-muted); font-size:.8rem;
  border-top: 1px solid var(--border);
}
.site-footer p{ margin: 2px 0; line-height: 1.3; }
.footer-link{ color:#2979FF; font-weight:600; text-decoration: none;}
.footer-link:hover{ color:#0D5BE0; text-decoration: none; }

/* [BARU] Baris keterangan sumber data (Autentikasi mushaf digital).
   Baris 1 ("Autentikasi mushaf digital: eQuran.id") SENGAJA tidak diberi
   aturan warna/ukuran sendiri, jadi otomatis mewarisi persis gaya baris
   "Made by Muslim..." di atasnya lewat .site-footer/.site-footer p (warna
   var(--text-muted), ukuran .8rem) — hanya kata "eQuran.id" yang tampil
   sebagai tautan lewat class .footer-link yang sudah ada. Baris 2 (nama
   standar mushaf) dibuat sedikit lebih kecil, lebih redup, & miring. */
.footer-source{ margin-top: 6px !important; }
.footer-source-note{
  display: inline-block;
  margin-top: 2px;
  font-size: .72rem;
  font-style: italic;
  color: var(--text-muted);
  opacity: .85;
}

/* ---------- Ikon hati animasi (footer) ---------- */
/* Ukuran memakai satuan 1em: otomatis mengikuti ukuran font teks
   di sekitarnya (mis. .site-footer p = .8rem) — jika suatu saat
   ukuran teks footer berubah, ikon ikut menyesuaikan proporsional,
   selaras dengan kaidah desain ikon-sebaris-teks (inline icon). */
.animated-heart{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em; height: 1em;
  vertical-align: -0.08em;
  margin-left: 3px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(233, 30, 99, .3));
  animation: heartbeat 2.2s ease-in-out infinite;
  transform-origin: center;
}
.animated-heart svg{ width: 100%; height: 100%; display:block; }
.animated-heart path{ fill: #F2879E; } /* Soft pastel pink/rose — bukan warna gelap/hitam */
/* Pola dua-denyut (lub-dub) meniru irama detak jantung asli,
   lebih hidup dibanding pulse tunggal linear. */
@keyframes heartbeat{
  0%, 24%, 100% { transform: scale(1); }
  10% { transform: scale(1.18); }
  17% { transform: scale(1.02); }
  22% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .animated-heart{ animation: none; }
}

/* ---------- Reader page ---------- */
.reader-topbar{
  position: sticky; top:0; z-index:40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  padding: 10px clamp(12px, 4vw, 20px);
}
.back-btn{
  width: var(--tap); height: var(--tap); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface); font-size:1.1rem;
}
.reader-title{ flex:1; min-width:0; }
.reader-title h1{ margin:0; font-family: var(--font-body); font-size:1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-title .ar{ font-family: var(--font-display); color: var(--text-muted); font-size:1rem; }

.reader-toolbar{
  max-width: 760px; margin: 16px auto 0; padding: 0 clamp(12px, 4vw, 20px);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.reader-toolbar-secondary{ margin-top: 10px; justify-content: flex-start; gap: 20px; row-gap: 10px; }

.reciter-note{
  max-width: 760px; margin: 8px auto 0; padding: 0 clamp(12px, 4vw, 20px);
  font-size: .78rem; color: var(--text-muted);
}
.reciter-note.hidden{ display:none; }

.btn-primary{
  background: var(--primary); color:#fff; border:none;
  padding: 11px 18px; border-radius: 999px; font-weight:600; font-size:.9rem;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  min-height: var(--tap);
  transition: background .2s ease, transform .15s ease;
}
.btn-primary:hover{ background: var(--primary-strong); }
.btn-primary:active{ transform: scale(.97); }
.btn-primary.is-playing{ background: var(--gold); }

.btn-outline{
  background: transparent; color: var(--primary-strong); border:1px solid var(--primary);
  padding: 9px 16px; border-radius: 999px; font-weight:600; font-size:.85rem;
  cursor:pointer; min-height: var(--tap);
  transition: background .2s ease, transform .15s ease;
}
.btn-outline:hover{ background: var(--primary-tint); }
.btn-outline:active{ transform: scale(.97); }

select#qariSelect, select#fontFamilySelect{
  padding: 10px 12px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); color: var(--text); font-size:.85rem;
  max-width: 100%; min-height: var(--tap);
}
.font-size-control{ display:flex; gap:6px; margin-left:auto; }
.font-size-control button{
  width: var(--tap); height: var(--tap); border-radius:50%; border:1px solid var(--border);
  background: var(--surface); color:var(--text); cursor:pointer; font-size:.8rem; font-weight:600;
}

/* ---------- Toggle switch (dipakai untuk: dark mode, mode baca, tajwid) ---------- */
.mode-switch{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.mode-switch input{ position:absolute; opacity:0; width:0; height:0; }
.mode-switch-track{
  width:40px; height:24px; border-radius:999px; background: var(--border);
  position:relative; transition: background .2s ease; flex-shrink:0;
}
.mode-switch-thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease;
}
.mode-switch input:checked + .mode-switch-track{ background: var(--primary); }
.mode-switch input:checked + .mode-switch-track .mode-switch-thumb{ transform: translateX(16px); }
.mode-switch-label{ font-size:.8rem; color: var(--text-muted); white-space:nowrap; }
.reader-topbar .mode-switch.theme-switch{ margin-left: auto; flex-shrink:0; }

/* Wrapper untuk kelompok ikon aksi di header beranda (index.html):
   tombol Jadwal Sholat, tombol Info & Dukungan (baru), dan toggle tema.
   Dikelompokkan & didorong ke kanan bersama-sama, terpisah dari brand
   di kiri — menggantikan margin-left:auto yang sebelumnya hanya
   menempel di toggle tema sendirian. */
.topbar-actions{
  display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0;
}
.topbar-actions .mode-switch{ flex-shrink:0; }

/* ---------- Tajwid legend ---------- */
.tajweed-legend{
  max-width: 760px; margin: 0 auto; padding: 12px clamp(12px, 4vw, 20px) 0;
  display:flex; flex-wrap:wrap; gap:8px 14px;
  font-size:.72rem; color: var(--text-muted);
}
.tajweed-legend.hidden{ display:none; }
.tajweed-legend span{ display:inline-flex; align-items:center; gap:4px; }
.tajweed-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.tj-ham_wasl, .tj-silent, .tj-laam_shamsiyah, .tj-idgham_mutajanisayn, .tj-idgham_mutaqaribayn{ color:#AAAAAA; }
.tj-madda_normal{ color:#537FFF; }
.tj-madda_permissible{ color:#4050FF; }
.tj-madda_necessary{ color:#000EBC; }
.tj-madda_obligatory{ color:#2144C1; }
.tj-qalaqah{ color:#DD0008; font-weight:600; }
.tj-ikhafa_shafawi{ color:#D500B7; }
.tj-ikhafa{ color:#9400A8; }
.tj-idgham_shafawi{ color:#58B800; }
.tj-iqlab{ color:#26BFFD; }
.tj-idgham_ghunnah{ color:#169777; }
.tj-idgham_wo_ghunnah{ color:#169200; }
.tj-ghunnah{ color:#FF7E1E; font-weight:600; }

.surah-meta-card{
  max-width: 760px; margin: 18px auto 0; padding: 20px clamp(12px, 4vw, 20px); text-align:center;
}
.surah-meta-card .bismillah{
  font-size: calc(1.9rem * var(--arabic-scale));
  color: var(--text); margin: 0 0 6px;
}
.surah-meta-card p{ color: var(--text-muted); font-size:.85rem; margin:0; }

.ayat-list{
  max-width: 760px; margin: 10px auto 0; padding: 0 clamp(12px, 4vw, 20px) 40px; list-style:none;
}
.ayat-item{
  padding: 22px 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: 150px;
}
.ayat-item.is-active{ background: var(--primary-tint); border-radius: var(--radius-m); }
.ayat-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; gap:10px; }
.ayat-badge{ position:relative; width:34px; height:34px; color: var(--gold); flex-shrink:0; }
.ayat-badge svg{ width:100%; height:100%; }
.ayat-badge span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color: var(--text);
}
.ayat-actions{ display:flex; gap:8px; }
.ayat-actions button{
  width: var(--tap); height: var(--tap); border-radius:50%; border:1px solid var(--border);
  background: var(--surface); cursor:pointer; font-size:.85rem; color: var(--text);
}
.ayat-actions button.is-bookmarked{ color: var(--gold); border-color: var(--gold); }
.ayat-actions button.is-playing{ background: var(--primary); color:#fff; border-color: var(--primary); }

.ayat-arabic{
  font-size: calc(1.85rem * var(--arabic-scale));
  line-height: 2.15;
  text-align: right;
  direction: rtl;
  margin: 0 0 12px;
  word-break: break-word;
}
.ayat-translation{ color: var(--text-muted); font-family: var(--font-body); font-size: .96rem; margin:0; }

/* ---------- Fitur "Tafsir Ayat" ----------
   .tafsir-toggle-btn = chip/outline button, subtle, di bawah terjemahan.
   .tafsir-box        = accordion inline (desktop ≥720px), animasi
                         max-height smooth via JS (lihat assets/js/tafsir.js).
                         Di mobile (<720px) tombol yang sama membuka
                         bottom sheet #tafsirModal (lihat .modal-overlay/
                         .modal-sheet) supaya posisi scroll bacaan tidak
                         hilang saat membaca tafsir yang panjang. */
.tafsir-wrap{ margin-top: 10px; }

.tafsir-toggle-btn{
  display: inline-flex; align-items:center; gap:6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--primary-strong); font-family: var(--font-ui);
  font-size: .76rem; font-weight:600; line-height:1; cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tafsir-toggle-btn:hover{ background: var(--primary-tint); border-color: var(--primary); }
.tafsir-toggle-btn[aria-expanded="true"]{
  background: var(--primary-tint); border-color: var(--primary);
}
.tafsir-toggle-icon{ font-size:.92rem; }
.tafsir-toggle-caret{ font-size:.68rem; }

.tafsir-box{ max-height:0; overflow:hidden; transition: max-height .32s ease; }
.tafsir-box-inner{
  margin-top:10px; padding: 14px 16px;
  background: var(--primary-tint);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.tafsir-source{
  margin: 0 0 6px; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  text-transform: uppercase; color: var(--primary-strong); font-family: var(--font-ui);
}
.tafsir-text-content{
  margin:0; font-family: var(--font-body); font-size:.86rem; line-height:1.6;
  color: var(--text); white-space: pre-line;
}
.tafsir-loading, .tafsir-empty{
  margin:0; font-family: var(--font-body); font-size:.86rem; line-height:1.6; color: var(--text-muted);
}
.tafsir-error{
  margin:0; font-family: var(--font-body); font-size:.86rem; line-height:1.6; color:#B4483B;
}

/* Sheet mobile memakai ulang .modal-overlay/.modal-sheet, hanya label
   sumber di dalam body-nya yang memakai gaya .tafsir-source di atas. */
#tafsirModalText{ font-family: var(--font-body); font-size:.9rem; line-height:1.6; color: var(--text); white-space: pre-line; }

.surah-nav{
  max-width:760px; margin: 0 auto; padding: 0 clamp(12px, 4vw, 20px) 50px;
  display:flex; justify-content:space-between; gap:12px;
}
.nav-btn{
  flex:1; text-align:center; padding: 12px 10px; border-radius: var(--radius-m);
  border:1px solid var(--border); background: var(--surface); font-size:.82rem; font-weight:600;
  cursor: pointer; color: var(--text); min-height: var(--tap);
}
.nav-btn.disabled,
.nav-btn:disabled{ opacity:.4; pointer-events:none; }

.loading-row{ text-align:center; padding: 40px 20px; color: var(--text-muted); }

/* ---------- Mode Per Halaman ---------- */
.page-content{
  max-width: 760px; margin: 12px auto 0; padding: 0 clamp(12px, 4vw, 20px) 20px;
}
.page-surah-block{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px clamp(16px, 5vw, 30px);
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.page-arabic-flow{
  font-size: calc(1.75rem * var(--arabic-scale));
  line-height: 2.35;
  text-align: right;
  direction: rtl;
  margin: 0;
  word-break: break-word;
}
/* Basmalah di Mode Per Halaman: elemen <p class="bismillah"> ini dibuat
   terpisah dari .page-arabic-flow (lihat renderPageContent() di reader.js),
   sehingga tidak ikut mewarisi text-align/direction dari flow ayat dan
   sebelumnya tampil kecil & rata kiri. Aturan ini membuatnya rata tengah
   dan sedikit lebih besar dari ukuran ayat aktif agar proporsional
   sebagai pembuka surah. */
.page-surah-block .bismillah{
  text-align: center;
  direction: rtl;
  font-size: calc(1.9rem * var(--arabic-scale));
  line-height: 2.35;
  color: var(--text);
  margin: 0 0 16px;
}
.page-ayat-marker{
  display:inline-flex; align-items:center; gap:2px; direction: ltr;
  vertical-align: middle;
}
.page-ayat-num, .page-ayat-pin{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; min-width:30px; border-radius:50%;
  border:1px solid var(--border); background: var(--surface-2);
  color: var(--gold); font-family: var(--font-ui); font-size:.72rem; font-weight:700;
  cursor:pointer; padding:0; margin: 0 1px;
}
.page-ayat-pin{ color: var(--text-muted); font-size:.68rem; }
.page-ayat-pin.is-bookmarked{ color: var(--gold); border-color: var(--gold); background: var(--primary-tint); }
.page-ayat-num.is-playing{ background: var(--primary); color:#fff; border-color: var(--primary); }
.page-surah-block.is-active-block{ outline: 2px solid var(--primary-tint); }

.page-nav{
  max-width:760px; margin:0 auto 20px; padding:0 clamp(12px, 4vw, 20px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.page-nav .nav-btn{ flex: 0 1 auto; }

/* ---------- Modal Terjemahan ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index: 100;
  background: rgba(20,18,14,.45);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-overlay.hidden{ display:none; }
.modal-sheet{
  background: var(--surface);
  width: 100%; max-width: 640px;
  max-height: 82vh;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  display:flex; flex-direction:column;
  box-shadow: 0 -8px 30px rgba(0,0,0,.2);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 720px){
  .modal-overlay{ align-items:center; }
  .modal-sheet{ border-radius: var(--radius-l); max-height: 78vh; }
}
.modal-sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink:0;
}
.modal-sheet-header h3{ margin:0; font-family: var(--font-body); font-size:1.05rem; }
.modal-sheet-body{ overflow-y:auto; padding: 8px 18px 24px; }
.translation-surah-title{
  font-family: var(--font-body); font-size:.95rem; color: var(--primary-strong);
  margin: 18px 0 8px;
}
.translation-row{ display:flex; gap:12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.translation-ref{
  flex-shrink:0; width:44px; font-size:.72rem; color: var(--text-muted); font-weight:600; padding-top:2px;
}
.translation-row p{ margin:0; font-family: var(--font-body); font-size:.92rem; line-height:1.6; }

/* ---------- Jadwal Sholat (fitur tambahan, tidak menyentuh style di atas) ---------- */
.prayer-location-bar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; padding: 4px 0 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.prayer-location-current{ font-size:.85rem; color: var(--text-muted); min-width:0; overflow-wrap:anywhere; }
.prayer-location-current strong{ color: var(--text); font-weight:600; }
.prayer-change-location{
  background:none; border:none; padding:0; color: var(--primary-strong);
  font-size:.8rem; font-weight:600; text-decoration:underline; cursor:pointer; flex-shrink:0;
}

.prayer-picker{ padding: 6px 0 4px; }
.prayer-picker p{ margin: 0 0 12px; color: var(--text-muted); font-size:.85rem; }
.prayer-picker-row{ display:flex; flex-direction:column; gap:10px; margin-bottom: 14px; }
.prayer-select{
  padding: 12px 14px; border-radius: var(--radius-m); border:1px solid var(--border);
  background: var(--surface); color: var(--text); font-size:.9rem; width:100%;
  min-height: var(--tap);
}
.prayer-select:disabled{ opacity:.5; }
.prayer-save-btn{ width:100%; justify-content:center; }

.prayer-next-info{
  text-align:center; font-size:.85rem; color: var(--primary-strong); font-weight:600;
  margin: 2px 0 16px;
}
.prayer-next-info span{ color: var(--gold); }

.prayer-today-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; margin-bottom: 18px;
}
@media (min-width:480px){ .prayer-today-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.prayer-time-card{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-m);
  padding: 12px 6px; text-align:center; transition: border-color .2s ease, background .2s ease;
}
.prayer-time-card.is-next{ background: var(--primary-tint); border-color: var(--primary); }
.ptc-label{ display:block; font-size:.68rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.ptc-value{ display:block; font-family: var(--font-body); font-weight:600; font-size:1.05rem; color: var(--text); }
.prayer-time-card.is-next .ptc-value{ color: var(--primary-strong); }

.prayer-month-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-m); }
.prayer-table{ width:100%; border-collapse:collapse; font-size:.76rem; white-space:nowrap; }
.prayer-table th, .prayer-table td{ padding:8px 10px; text-align:center; border-bottom:1px solid var(--border); }
.prayer-table th{ color: var(--text-muted); font-weight:600; background: var(--surface-2); position:sticky; top:0; }
.prayer-table tr:last-child td{ border-bottom:none; }
.prayer-table tr.is-today td{ background: var(--primary-tint); font-weight:600; }
.prayer-table td:first-child, .prayer-table th:first-child{ text-align:left; position:sticky; left:0; background: var(--surface); }
.prayer-table tr.is-today td:first-child{ background: var(--primary-tint); }

.prayer-error{ text-align:center; padding: 30px 10px; color: var(--text-muted); }
.prayer-error strong{ display:block; color: var(--text); margin-bottom:6px; font-family: var(--font-body); }

/* ============================================================
   Fitur baru: Lompat/Filter Ayat (FAB + modal + chip)
   ------------------------------------------------------------
   Diposisikan sebagai Floating Action Button mengambang di
   kanan-bawah — area yang paling mudah dijangkau jempol di
   perangkat mobile — dan TIDAK menumpuk di atas teks ayat karena
   ukurannya kecil & berada di ruang kosong pinggir layar.
   ============================================================ */
.ayat-range-fab{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.35rem; cursor:pointer;
  box-shadow: var(--shadow), 0 8px 20px -6px rgba(0,0,0,.35);
  transition: transform .15s ease, background .2s ease, bottom .2s ease;
}
.ayat-range-fab:hover{ background: var(--primary-strong); }
.ayat-range-fab:active{ transform: scale(.92); }
.ayat-range-fab.hidden{ display:none; }
/* Naikkan posisi FAB saat banner instal PWA sedang tampil di bawah, supaya tidak tumpang tindih */
body.pwa-bar-visible .ayat-range-fab{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

.ayat-range-hint{ color: var(--text-muted); font-size:.85rem; margin: 14px 0 16px; }
.ayat-range-fields{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
}
.ayat-range-field{
  flex: 1 1 130px; display:flex; flex-direction:column; gap:6px;
  font-size:.78rem; color: var(--text-muted); font-weight:600;
}
.ayat-range-field input{
  padding: 12px 14px; border-radius: var(--radius-m); border:1px solid var(--border);
  background: var(--surface); color: var(--text); font-size:1rem;
  min-height: var(--tap); width:100%;
}
.ayat-range-field input:focus{ border-color: var(--primary); }
.ayat-range-sep{ color: var(--text-muted); font-size:.85rem; padding-bottom:12px; }
.ayat-range-error{
  color:#B3261E; font-size:.8rem; margin: 10px 0 0;
  background: color-mix(in srgb, #B3261E 10%, transparent);
  padding: 8px 12px; border-radius: var(--radius-s);
}
.ayat-range-error.hidden{ display:none; }
.ayat-range-actions{ display:flex; gap:10px; margin-top: 18px; }
.ayat-range-actions .btn-outline, .ayat-range-actions .btn-primary{ flex:1; justify-content:center; }

/* Chip penanda filter sedang aktif, tampil tepat di atas daftar ayat */
.ayat-range-chip{
  max-width: 760px; margin: 14px auto 0; padding: 10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--primary-tint); border:1px solid var(--primary);
  border-radius: var(--radius-m); font-size:.82rem; color: var(--primary-strong); font-weight:600;
}
.ayat-range-chip.hidden{ display:none; }
.ayat-range-chip button{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--primary-strong); font-weight:700; font-size:.78rem; text-decoration:underline;
  flex-shrink:0;
}
/* Ayat di luar rentang yang dipilih disembunyikan (tetap ada di DOM, tidak dihapus,
   supaya audio "Putar Semua" & fitur lain yang membaca seluruh daftar tidak terganggu) */
.ayat-item.range-hidden{ display:none; }

/* ============================================================
   Banner "Instal Aplikasi" (PWA) — dibuat dinamis oleh assets/js/pwa.js
   ============================================================ */
.pwa-install-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 90;
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.pwa-install-bar.hidden{ display:none; }
.pwa-install-icon{ font-size:1.5rem; flex-shrink:0; }
.pwa-install-text{ flex:1; min-width:0; margin:0; font-size:.82rem; color: var(--text); line-height:1.4; }
.pwa-install-action{ flex-shrink:0; padding: 9px 16px; font-size:.82rem; }
.pwa-install-action.hidden{ display:none; }
.pwa-install-close{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:none;
  background: var(--surface-2); color: var(--text-muted); cursor:pointer; font-size:.9rem;
}
@media (min-width: 640px){
  .pwa-install-bar{ left:50%; right:auto; bottom:20px; transform:translateX(-50%);
    max-width: 520px; border-radius: var(--radius-l); border: 1px solid var(--border); }
}

/* ============================================================
   Modal "Info & Dukungan" (fitur tambahan, tidak menyentuh style
   modal lain — memakai .modal-overlay/.modal-sheet yang sama).
   ============================================================ */
.info-greeting{ margin: 0 0 10px; font-family: var(--font-body); font-size:1rem; color: var(--text); }
.info-lead{ margin: 0 0 4px; color: var(--text-muted); font-size:.9rem; line-height:1.6; }

.info-section{ margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.info-section:first-of-type{ margin-top: 20px; }
.info-section-title{
  margin: 0 0 6px; font-family: var(--font-body); font-size:.98rem; font-weight:600; color: var(--text);
}
.info-section-desc{ margin: 0; color: var(--text-muted); font-size:.85rem; line-height:1.6; }

.info-contact-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.info-contact-item{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border:1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface); min-height: var(--tap);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.info-contact-item:hover{ background: var(--surface-2); border-color: var(--primary); transform: translateY(-1px); }
.info-contact-item:active{ transform: scale(.98); }
.info-contact-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--primary-tint); display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.info-contact-text{ flex:1; min-width:0; }
.info-contact-text strong{ display:block; font-size:.9rem; color: var(--text); }
.info-contact-text small{ display:block; margin-top:1px; color: var(--text-muted); font-size:.78rem; overflow-wrap:anywhere; }
.info-contact-arrow{ color: var(--text-muted); flex-shrink:0; font-size:.9rem; }

.info-donation-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px;
}
.info-donation-card{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-m);
  padding: 14px 10px; text-align:center;
}
.info-donation-logo{ font-family: var(--font-body); font-weight:600; font-size:.92rem; color: var(--primary-strong); }
.info-donation-number{
  margin: 8px 0; font-family: var(--font-ui); font-weight:600; font-size:.9rem; color: var(--text);
  letter-spacing:.01em; word-break: break-word;
}
.info-copy-btn{
  width:100%; padding: 8px 6px; border-radius:999px; border:1px solid var(--primary);
  background: transparent; color: var(--primary-strong); font-size:.74rem; font-weight:600;
  cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.info-copy-btn:hover{ background: var(--primary-tint); }
.info-copy-btn.is-copied{ background: var(--primary); color:#fff; border-color: var(--primary); }

.info-footer-note{
  text-align:center; font-size:.85rem; font-weight:600; color: var(--primary-strong);
  margin: 22px 0 4px;
}

@media (max-width: 360px){
  .info-donation-grid{ grid-template-columns: 1fr; }
}

/* ---------- Responsif mobile ---------- */
@media (max-width: 480px){
  .reader-toolbar{ gap: 8px; }
  select#qariSelect, select#fontFamilySelect{ flex: 1 1 100%; }
  .font-size-control{ margin-left: 0; }
  .reader-toolbar-secondary{ gap: 14px; }
  .ayat-arabic{ font-size: calc(1.55rem * var(--arabic-scale)); line-height: 2; }
  .page-arabic-flow{ font-size: calc(1.5rem * var(--arabic-scale)); line-height: 2.2; }
  .page-surah-block .bismillah{ font-size: calc(1.65rem * var(--arabic-scale)); line-height: 2.2; }
  .page-surah-block{ padding: 18px 14px; }
  .surah-nav{ flex-direction: column; }
  .page-nav{ flex-wrap: wrap; }
  .page-nav .nav-btn{ flex: 1 1 100%; }
  .page-nav #pageLabel{ order: -1; width:100%; text-align:center; margin-bottom:4px; }
  .reader-title h1{ font-size:.92rem; }
  .ayat-range-fab{ right: 14px; width: 52px; height: 52px; font-size:1.2rem; }
  .ayat-range-sep{ display:none; }
  .ayat-range-field{ flex: 1 1 100%; }
}

/* =========================================================
   FITUR BARU — Navigasi "Daftar Per Surah" / "Daftar Per Juz"
   & halaman baca per Juz (assets/js/juz-data.js, juz.html,
   assets/js/juz-reader.js). Ditambahkan tanpa mengubah aturan
   di atas — murni penambahan, tidak menimpa selector yang sudah ada.
   ========================================================= */

/* ---------- Tab navigasi "Per Surah" / "Per Juz" (index.html) ---------- */
.browse-tabs{ display:flex; gap:8px; margin: 2px 0 18px; }
.browse-tab{
  flex:1; min-height:44px; padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-family:var(--font-ui); font-weight:600; font-size:.88rem; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.browse-tab.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
/* (max-width 360px dihapus: kini 4 menu, lihat blok "4 menu navigasi" di bagian Dzikir) */

/* Kartu Juz memakai class .surah-card yang sama persis dengan kartu
   Surah (konsisten secara visual) — tidak perlu selector baru di sini. */

/* ---------- Halaman baca per Juz (juz.html) ---------- */
.juz-hero{
  max-width: 760px; margin: 18px auto 0; padding: 18px clamp(16px, 5vw, 26px); text-align:center;
}
.juz-hero .juz-hero-ar{
  font-family: var(--font-display); font-size: 1.6rem; color: var(--text); margin: 0 0 4px;
}
.juz-hero p{ color: var(--text-muted); font-size:.85rem; margin:0; }

/* Setiap "blok" pada halaman Juz mewakili potongan satu surah di dalam
   Juz tersebut — memakai .page-surah-block yang sama dengan Mode Per
   Halaman pada surah.html supaya nuansa "kartu mushaf" tetap konsisten
   di seluruh situs. */
.juz-segment{ margin-bottom: 22px; }
.juz-segment-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 16px; flex-wrap:wrap; margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px dashed var(--border);
}
.juz-segment-head-main{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.juz-segment-head h2{ margin:0; font-family: var(--font-body); font-size:1.05rem; font-weight:600; }
.juz-segment-head .ar{ font-family: var(--font-display); color: var(--text-muted); font-size:1.15rem; }
.juz-segment-range{ font-size:.76rem; color: var(--text-muted); white-space:nowrap; }
.juz-segment-link{
  font-size:.78rem; font-weight:600; color: var(--primary-strong); white-space:nowrap;
  text-decoration:none; border:1px solid var(--primary); border-radius:999px; padding:6px 12px;
  transition: background .2s ease, color .2s ease;
}
.juz-segment-link:hover{ background: var(--primary); color:#fff; }

/* Ayat di dalam blok Juz memakai ulang .ayat-list/.ayat-item/.ayat-arabic/
   .ayat-translation bawaan situs (lihat definisi di atas) — hanya
   menghilangkan padding luar ganda karena sudah dibungkus .page-surah-block. */
.juz-segment .ayat-list{ margin:0; padding:0; }
.juz-segment .ayat-item{ scroll-margin-top: 150px; }
.juz-segment .ayat-item:last-child{ border-bottom:none; padding-bottom:0; }

.juz-nav{
  max-width:760px; margin: 0 auto; padding: 0 clamp(12px, 4vw, 20px) 50px;
  display:flex; justify-content:space-between; gap:12px;
}

@media (max-width: 480px){
  .juz-nav{ flex-direction: column; }
  .juz-segment-head{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   [PEMBARUAN FITUR JUZ] — Kartu Juz rinci, sub-navigasi 3 mode,
   mode mushaf, dan panel "Cari Ayat".
   ---------------------------------------------------------
   SEMUA aturan di bawah ini murni TAMBAHAN. Tidak ada satu pun
   selector lama yang ditimpa/dihapus, sehingga tampilan halaman
   lain (index.html, surah.html) tidak terpengaruh sama sekali.

   Variabel bantu:
   --topbar-h : perkiraan tinggi .reader-topbar, dipakai agar tab
                sub-navigasi menempel persis di bawahnya saat scroll.
   ========================================================= */
:root{
  --topbar-h: 65px;
}

/* =========================================================
   1) KARTU JUZ DI HALAMAN DEPAN (index.html)
   ========================================================= */

/* Kartu Juz memuat kalimat rentang ayat yang panjang, jadi gridnya
   dibuat lebih lega: 1 kolom di HP, 2 kolom mulai layar sedang.
   Class .is-juz-mode dipasang/dilepas oleh assets/js/home.js. */
.surah-grid.is-juz-mode{ grid-template-columns: 1fr; }
@media (min-width: 640px){
  .surah-grid.is-juz-mode{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kartu Juz tetap memakai .surah-card (warna, radius, hover sama),
   .juz-card hanya menyesuaikan tata letak untuk teks 2 baris. */
.juz-card{
  align-items: flex-start;
  padding: 15px 16px;
  gap: 13px;
}
.juz-card .surah-badge{ margin-top: 1px; }
.juz-card .surah-info{ flex: 1 1 auto; }
.juz-card .surah-name-row{ align-items: center; gap: 8px; }
.juz-card .surah-info h3{ font-size: 1rem; }

/* Kaligrafi nama Juz (الجزء الأول) di sebelah judul */
.juz-card-ar{
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--primary-strong);
  white-space: nowrap;
}

/* Kalimat rentang ayat — boleh membungkus ke baris berikutnya */
.juz-card-range{
  margin-top: 5px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Umpan balik sentuhan di HP (tidak ada hover di layar sentuh) */
.juz-card:active{ transform: scale(.985); }

/* =========================================================
   2) SUB-NAVIGASI HALAMAN JUZ (juz.html)
      Tab: Baca Qur'an / Terjemah / Cari Ayat
   ========================================================= */
.juz-tabs{
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 2px;
  padding: 9px clamp(12px, 4vw, 20px);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.juz-tab{
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  min-height: var(--tap);
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.juz-tab:hover{ border-color: var(--primary); }
.juz-tab:active{ transform: scale(.97); }
.juz-tab.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* Penanda halus: mode baca yang sedang berlaku di balik panel "Cari Ayat" */
.juz-tab.is-current{
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-strong);
}
.juz-tab-icon{ font-size: .95rem; line-height: 1; }

/* Di layar sempit, ikon disembunyikan agar 3 tab tetap muat sebaris
   tanpa menimbulkan scroll horizontal. */
@media (max-width: 400px){
  .juz-tab{ font-size: .78rem; padding: 9px 6px; gap: 0; }
  .juz-tab-icon{ display: none; }
}

/* =========================================================
   3) PANEL "CARI AYAT" (lompat cepat ke ayat)
   ========================================================= */
.juz-search-panel{
  max-width: 760px;
  /* Di layar sempit panel diberi jarak dari tepi; mulai 800px
     (760 + 2×20 padding) baru dipusatkan otomatis. */
  margin: 14px clamp(12px, 4vw, 20px) 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
@media (min-width: 800px){
  .juz-search-panel{ margin-left: auto; margin-right: auto; }
}
.juz-search-hint{
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.juz-search-fields{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.juz-search-field{
  flex: 1 1 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-muted);
}
.juz-search-field select{
  width: 100%;
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: .9rem;
}
/* Tombol melebar penuh di HP, menyusut mengikuti isi di layar lebar */
.juz-jump-btn{ flex: 1 1 100%; justify-content: center; }
@media (min-width: 560px){
  .juz-jump-btn{ flex: 0 0 auto; }
}

/* =========================================================
   4) HERO JUZ (tambahan baris rentang & jumlah surah)
   ========================================================= */
.juz-hero .juz-hero-ar{
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1.8;
  color: var(--text);
}
.juz-hero .juz-hero-range{
  font-size: .88rem;
  color: var(--text);
  font-family: var(--font-body);
  margin-top: 2px;
}
.juz-hero .juz-hero-count{
  font-size: .76rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* =========================================================
   5) BANNER PERGANTIAN SURAH (dipakai mode Mushaf & Terjemah)
   ========================================================= */
.juz-surah-banner{
  text-align: center;
  padding: 16px 14px 14px;
  margin: 0 0 20px;
  background: var(--primary-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}
.juz-banner-ar{
  font-family: var(--font-arabic);
  font-size: calc(1.55rem * var(--arabic-scale));
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 2px;
}
.juz-banner-latin{
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.juz-banner-meta{
  margin: 0 0 12px;
  font-size: .76rem;
  color: var(--text-muted);
}
.juz-banner-meta-link{
  color: var(--primary-strong); text-decoration: underline;
  text-decoration-color: var(--border); text-underline-offset: 2px;
}
.juz-banner-meta-link:hover{ text-decoration-color: var(--primary-strong); }

/* ---------- "Dengarkan Audio Qur'an" — pemutar inline per surah
   di banner Juz (menggantikan tombol "Buka surah penuh" lama).
   Lihat assets/js/juz-audio.js. ---------- */
.juz-audio-player{
  margin: 14px auto 0; max-width: 480px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 12px 14px;
}
.jap-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.jap-title{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--primary-strong); white-space: nowrap;
}
.jap-qari-select{
  font-family: var(--font-ui); font-size: .74rem; color: var(--text);
  background-color: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 26px 6px 12px; max-width: 172px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23928873'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.148l3.71-3.918a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  min-height: var(--tap);
}
.jap-qari-select:focus{ outline: 2px solid var(--primary); outline-offset: 1px; }

.jap-controls{ display: flex; align-items: center; gap: 12px; }
.jap-play-btn{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .12s ease;
}
.jap-play-btn svg{ margin-left: 1px; } /* optical centering untuk ikon segitiga */
.jap-play-btn:hover{ background: var(--primary-strong); }
.jap-play-btn:active{ transform: scale(.94); }
.juz-audio-player.is-playing .jap-play-btn{ background: var(--primary-strong); }
.juz-audio-player.is-playing .jap-play-btn svg{ margin-left: 0; }

.jap-track-wrap{ flex: 1; min-width: 0; }
.jap-seek{
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 999px; background: var(--border); outline: none; cursor: pointer; margin: 0; display: block;
}
.jap-seek::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); cursor: pointer; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--primary);
}
.jap-seek::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--primary); cursor: pointer;
}
.jap-meta-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 5px; font-size: .68rem; color: var(--text-muted); font-family: var(--font-ui);
}
.jap-ayat-pos{ font-weight: 600; color: var(--primary-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 720px){
  .juz-audio-player{ max-width: 560px; }
}

/* Bismillah + terjemahannya (khusus mode Terjemah) */
.juz-bismillah-wrap{ text-align: center; margin-bottom: 18px; }
.juz-bismillah-id{
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: .86rem;
  color: var(--text-muted);
}

/* =========================================================
   6) MODE MUSHAF — teks Arab mengalir ala Al-Qur'an cetak
   ========================================================= */
.juz-mushaf-block{
  padding: 24px clamp(16px, 5vw, 34px) 28px;
  /* Garis tipis emas di dalam kartu, meniru bingkai halaman mushaf */
  box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
.juz-mushaf-flow{
  margin: 0;
  direction: rtl;
  /* Rata kanan-kiri seperti mushaf cetak; baris terakhir dipusatkan
     supaya tidak terlihat "menggantung". */
  text-align: justify;
  text-align-last: center;
  text-justify: inter-word;
  font-size: calc(1.72rem * var(--arabic-scale));
  line-height: 2.55;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: none;
}
.mushaf-ayah{
  /* Target scroll "Cari Ayat"; inline agar tidak memutus aliran teks. */
  scroll-margin-top: 170px;
  border-radius: 6px;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* Medali nomor ayat di tengah aliran teks (angka Arab) */
.mushaf-ayah-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  min-width: 1.7em;
  margin: 0 .18em;
  font-size: .48em;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  vertical-align: middle;
  transform: translateY(-.1em);
  user-select: none;
}

/* =========================================================
   7) SOROTAN HASIL "CARI AYAT"
   ========================================================= */
.ayat-item.is-jump-target{
  background: var(--primary-tint);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 6px var(--primary-tint);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.mushaf-ayah.is-jump-target{
  background: var(--primary-tint);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Beri ruang ekstra di atas target scroll karena topbar + tab
   sama-sama sticky (total ± 130px). */
.juz-segment .ayat-item{ scroll-margin-top: 170px; }
.juz-segment{ scroll-margin-top: 150px; }

/* =========================================================
   8) PENYESUAIAN LAYAR KECIL
   ========================================================= */
@media (max-width: 480px){
  .juz-mushaf-block{ padding: 20px 14px 24px; }
  .juz-mushaf-flow{
    font-size: calc(1.5rem * var(--arabic-scale));
    line-height: 2.35;
    /* Justify pada layar sangat sempit membuat jarak antar kata
       melebar tidak wajar, jadi cukup rata kanan. */
    text-align: right;
    text-align-last: right;
  }
  .juz-surah-banner{ padding: 14px 12px 12px; }
  .juz-banner-ar{ font-size: calc(1.4rem * var(--arabic-scale)); }
  .juz-search-fields{ gap: 12px; }
  .juz-search-field{ flex: 1 1 100%; }
}

/* Mode mushaf diberi lebar baca sedikit lebih lega di layar besar,
   karena teks rata kanan-kiri lebih enak dibaca pada baris yang panjang. */
@media (min-width: 900px){
  .page-content.is-mushaf-mode{ max-width: 820px; }
}

/* Layar sangat sempit (≈320-360px): tab dikecilkan sedikit lagi agar
   ketiganya tetap muat dalam satu baris tanpa scroll horizontal. */
@media (max-width: 360px){
  .juz-tabs{ gap: 6px; padding: 8px 10px; }
  .juz-tab{ font-size: .72rem; padding: 8px 4px; }
}

/* =========================================================
   FITUR BARU — Dzikir Pagi dan Petang
   (index.html: tombol + modal pilihan · dzikir.html: halaman baca)
   ---------------------------------------------------------
   Murni TAMBAHAN di akhir berkas. Tidak ada selector lama yang
   diubah/dihapus; semua warna, radius, dan font memakai token
   (variabel CSS) yang sudah ada, jadi mode terang/gelap otomatis
   mengikuti.
   ========================================================= */

/* ---------- 1) Tombol menu di beranda (satu baris dengan tab Surah/Juz) ---------- */
.browse-tab-dzikir{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.browse-tab-caret{ font-size:.75rem; line-height:1; opacity:.7; }
.browse-tab-dzikir:hover{ border-color: var(--primary); }
.browse-tab-dzikir[aria-expanded="true"]{ border-color: var(--primary); background: var(--primary-tint); color: var(--primary-strong); }

/* [DIPERBARUI — 4 menu navigasi]
   Mobile/tablet (< 900px): grid 2x2 yang simetris.
     Baris 1: Daftar Per Surah | Daftar Per Juz
     Baris 2: Dzikir Pagi dan Petang | Bacaan Surat Pilihan
   grid-auto-rows:1fr + height:100% membuat KEEMPAT tombol berukuran
   persis sama (lebar = 1 kolom, tinggi = baris tertinggi), walau teks
   di baris 2 membungkus jadi dua baris.
   Desktop (>= 900px): keempatnya sejajar satu baris dengan lebar sama. */
.browse-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.browse-tab{
  min-width: 0; width: 100%; height: 100%;
  min-height: 52px; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; text-decoration: none; line-height: 1.25;
}
/* Tombol Dzikir berisi teks + ikon ▾. Bila memakai flex, teks yang membungkus
   mendorong ▾ ke tepi kanan; dengan display:block, ▾ mengalir sebaris dengan
   teks dan tetap rata tengah (tombol tetap memusatkan isi secara vertikal). */
.browse-tabs .browse-tab-dzikir{ display: block; }
.browse-tab-dzikir .browse-tab-caret{ display: inline; }
@media (max-width: 400px){
  .browse-tab{ font-size: .8rem; padding: 8px 8px; }
}
@media (min-width: 900px){
  .browse-tabs{ display: flex; flex-wrap: nowrap; max-width: none; }
  .browse-tab{ flex: 1 1 0; width: auto; height: auto; min-height: 46px; white-space: nowrap; }
}

/* ---------- 2) Modal pilihan Pagi / Petang ---------- */
.dz-menu-hint{ margin: 14px 0 14px; }
.dz-menu-list{ display:grid; grid-template-columns: minmax(0, 1fr); gap:12px; }
.dz-menu-icon span{ font-size: 1.15rem; }

/* ---------- 3) Halaman baca dzikir (dzikir.html) ---------- */
.dz-item{ padding: 30px 0; }
.dz-item:last-child{ border-bottom: none; }

.dz-row{ gap: 12px; margin-bottom: 18px; }
.dz-title{
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1.35;
  color: var(--primary-strong); overflow-wrap: anywhere;
}
.dz-count{
  flex-shrink: 0; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: var(--primary-tint); color: var(--primary-strong);
  border: 1px solid var(--border);
  font-size: .76rem; font-weight: 600;
}

.dz-arabic{ line-height: 2.6; margin-bottom: 20px; } /* tanda waqaf Amiri Quran tinggi: butuh ruang antarbaris */
.dz-basmalah{ display:block; text-align:center; margin-bottom: .1em; }

.dz-translation{ line-height: 1.75; }

.dz-fadhilah{
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: var(--radius-s);
  background: var(--primary-tint);
  font-family: var(--font-body); font-size: .84rem; line-height: 1.6;
  color: var(--text);
}
.dz-fadhilah strong{ color: var(--primary-strong); }

.dz-nav{ padding-top: 8px; }

@media (max-width: 480px){
  .dz-item{ padding: 26px 0; }
  .dz-row{ gap: 8px; }
  .dz-arabic{ line-height: 2.5; }
}

/* =========================================================
   FITUR BARU — Bacaan Surat Pilihan
   (index.html: menu ke-4 · pilihan.html: daftar ·
    pilihan-surat.html: halaman baca + pagination)
   ---------------------------------------------------------
   Murni TAMBAHAN di akhir berkas. Halaman baca memakai ulang
   kelas .juz-tabs/.juz-tab/.juz-search-panel/.juz-hero/
   .juz-surah-banner/.ayat-item/.tafsir-* yang sudah ada, jadi
   tampilannya identik dengan halaman Juz. Semua warna, radius,
   dan font memakai token situs -> mode gelap otomatis mengikuti.
   ========================================================= */

/* ---------- 1) Menu ke-4 di beranda (tautan, bukan modal) ---------- */
.browse-tab-link:hover{ border-color: var(--primary); }
.browse-tab-link:active{ transform: scale(.98); }

/* ---------- 2) Halaman daftar (pilihan.html) ---------- */
.pil-page{
  max-width: 760px; margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 20px) 60px;
}
.pil-heading{
  margin: 30px 0 6px; text-align: center;
  font-family: var(--font-body); font-size: 1.3rem; font-weight: 600;
  color: var(--primary-strong);
}
.pil-sub{
  margin: 0 0 22px; text-align: center;
  font-size: .85rem; color: var(--text-muted);
}
.pil-list{ display: flex; flex-direction: column; gap: 14px; }

/* Kartu mengikuti gambar referensi: judul tebal berikon, deskripsi di
   bawahnya, panah di sisi kanan. Warna/radius/hover = .surah-card. */
.pilihan-card{
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pilihan-card:hover{ transform: translateY(-2px); border-color: var(--primary); }
.pilihan-card:active{ transform: scale(.99); }
.pilihan-card-body{ flex: 1 1 auto; min-width: 0; }
.pilihan-card-title{
  margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: var(--text); overflow-wrap: anywhere;
}
.pilihan-card-icon{ font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.pilihan-card-desc{
  margin: 0; font-family: var(--font-ui); font-size: .82rem; line-height: 1.6;
  color: var(--text-muted);
}
.pilihan-card-arrow{
  flex-shrink: 0; font-size: 1.15rem; line-height: 1; color: var(--primary);
  opacity: .55; transition: transform .15s ease, opacity .15s ease;
}
.pilihan-card:hover .pilihan-card-arrow{ transform: translateX(4px); opacity: 1; }

/* ---------- 3) Halaman baca (pilihan-surat.html) ---------- */

/* Tab: nama surat bisa panjang (mis. "Baca Al-Mu'awwidzat") -> boleh
   membungkus 2 baris pada layar sempit; ukuran semua tab tetap sama. */
.pil-tabs .juz-tab{
  white-space: normal; text-align: center; line-height: 1.15;
}
@media (max-width: 400px){
  .pil-tabs .juz-tab{ font-size: .74rem; padding: 6px 5px; }
}

/* Keutamaan & catatan (lipat/buka, tertutup secara default supaya
   bacaan tetap jadi fokus utama). */
.pil-fadhilah{
  margin: 14px auto 0; max-width: 560px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden;
}
.pil-fadhilah-summary{
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--primary-strong);
}
.pil-fadhilah-summary::-webkit-details-marker{ display: none; }
.pil-fadhilah-summary::after{ content: "▾"; margin-left: 8px; font-size: .75rem; opacity: .7; }
.pil-fadhilah[open] .pil-fadhilah-summary::after{ content: "▴"; }
.pil-fadhilah-summary:hover{ background: var(--primary-tint); }
.pil-fadhilah-body{ padding: 4px 16px 16px; border-top: 1px dashed var(--border); }
.pil-fadhilah-item{ padding: 12px 0 2px; }
.pil-hero .pil-fadhilah-body p{ margin: 0; }
.pil-hero .pil-fadhilah-text{
  font-family: var(--font-body); font-size: .88rem;
  line-height: 1.65; color: var(--text);
}
.pil-hero .pil-fadhilah-src{
  margin-top: 4px; font-size: .74rem; font-style: italic;
  color: var(--text-muted);
}
.pil-hero .pil-fadhilah-note{
  margin-top: 14px; padding: 10px 12px;
  background: var(--primary-tint); border-left: 3px solid var(--gold);
  border-radius: var(--radius-s);
  font-family: var(--font-body); font-size: .82rem; line-height: 1.6;
  color: var(--text);
}
.pil-hero .pil-fadhilah-note strong{ color: var(--primary-strong); }

/* Tombol "Putar Ayat" di panel Per Ayat */
.pil-play-btn.is-playing{ background: var(--primary); color: #fff; border-color: var(--primary); }

/* Banner ringkas untuk halaman lanjutan (bukan awal potongan ayat) */
.juz-surah-banner.is-compact{ padding: 10px 12px 12px; }
.juz-surah-banner.is-compact .juz-banner-ar{ display: none; }
.juz-surah-banner.is-compact .juz-banner-latin{ font-size: .95rem; }

/* Penanda "Halaman 2 dari 9 • Ayat ke-11–20 dari 83" */
.pil-page-info{
  max-width: 760px; margin: 14px auto 0;
  padding: 0 clamp(12px, 4vw, 20px);
  text-align: center; font-size: .78rem; font-weight: 600;
  color: var(--text-muted);
  scroll-margin-top: 140px;
}

/* ---------- 4) Pagination ---------- */
.pil-pager{
  max-width: 760px; margin: 4px auto 14px;
  padding: 0 clamp(12px, 4vw, 20px);
  display: flex; align-items: center; gap: 10px;
}
.pil-pager .nav-btn{
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.pil-pager .nav-btn:not(:disabled):hover{ border-color: var(--primary); background: var(--primary-tint); }
.pil-pager #pilNextPage:not(:disabled){
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.pil-pager #pilNextPage:not(:disabled):hover{ background: var(--primary-strong); }
.pil-pager-mid{ flex: 0 0 auto; }
.pil-pager-mid select{
  min-height: var(--tap); padding: 0 12px; max-width: 100%;
  border-radius: var(--radius-s); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600; cursor: pointer;
}
@media (max-width: 560px){
  /* HP: dropdown halaman di atas (baris penuh), tombol prev/next di bawahnya */
  .pil-pager{ flex-wrap: wrap; }
  .pil-pager-mid{ order: -1; flex: 1 1 100%; }
  .pil-pager-mid select{ width: 100%; text-align: center; text-align-last: center; }
  .pil-pager .nav-btn{ font-size: .78rem; padding: 10px 6px; }
}

.pil-back-nav{ padding-bottom: 50px; }
.pil-back-nav .nav-btn{
  display: inline-flex; align-items: center; justify-content: center;
}

/* =========================================================
   FITUR BARU — Pagination daftar + "Bagaimana Perasaanmu hari ini?"
   (index.html · assets/js/home.js · emosi-data.js · emosi.js)
   ---------------------------------------------------------
   Murni TAMBAHAN di akhir berkas. Memakai token warna, radius,
   dan font situs (--primary, --surface, --border, --font-ui, ...)
   sehingga mode gelap otomatis ikut.
   ========================================================= */

/* ---------- 1) Pagination daftar Surah / Juz ---------- */
/* padding bawah grid (40px) terlalu lega bila dipasangi pager di bawahnya */
.surah-list-section .surah-grid{ padding-bottom: 18px; }
.surah-list-section{ scroll-margin-top: 72px; }

.pager{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 2px 0 8px;
}
.pager.hidden{ display: none; }
.pager-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap; max-width: 100%;
}
.pager-btn{
  min-width: 34px; height: var(--tap); padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-weight: 600; font-size: .85rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.pager-btn:hover:not(:disabled):not(.is-current){ border-color: var(--primary); background: var(--primary-tint); }
.pager-btn:active:not(:disabled){ transform: scale(.95); }
.pager-btn.is-current{ background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; }
.pager-btn:disabled{ opacity: .38; cursor: not-allowed; }
.pager-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.pager-gap{ min-width: 14px; text-align: center; color: var(--text-muted); font-weight: 600; }
.pager-arrow{ font-size: 1.3rem; line-height: 1; margin-top: -2px; }
.pager-label{ display: none; }
.pager-status{ margin: 0; font-size: .76rem; color: var(--text-muted); text-align: center; }
@media (min-width: 420px){
  .pager-btn{ min-width: 36px; }
  .pager-list{ gap: 5px; }
  .pager-gap{ min-width: 16px; }
}
@media (min-width: 640px){
  .pager-btn{ min-width: 40px; }
  .pager-nav{ padding: 0 16px; }
  .pager-list{ gap: 6px; }
  .pager-label{ display: inline; }
  .pager-gap{ min-width: 22px; }
}

/* ---------- 2) Section "Bagaimana Perasaanmu hari ini?" ---------- */
.emosi-section{ padding: 6px 0 56px; }

/* Pembatas: garis yang memudar ke tepi + ornamen bintang (gaya brand myQur'an) */
.emosi-divider{
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0 30px; color: var(--gold);
}
.emosi-divider-line{ flex: 1; height: 1px; }
.emosi-divider-line:first-child{ background: linear-gradient(90deg, transparent, var(--border) 70%, var(--gold)); }
.emosi-divider-line:last-child{ background: linear-gradient(270deg, transparent, var(--border) 70%, var(--gold)); }
.emosi-divider-mark{ flex-shrink: 0; opacity: .9; }

.emosi-title{
  margin: 0 0 6px; text-align: center;
  font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; color: var(--text);
}
.emosi-sub{ margin: 0 0 22px; text-align: center; font-size: .85rem; color: var(--text-muted); }

.emosi-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (min-width: 560px){ .emosi-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.emo-card{
  --emo: var(--primary);
  appearance: none; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 8px 14px; min-height: 122px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.emo-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--emo); }
.emo-card:active{ transform: scale(.97); }
.emo-card:focus-visible{ outline: 2px solid var(--emo); outline-offset: 2px; }

/* Ikon: lingkaran berwarna lembut (turunan dari --emo + warna permukaan,
   jadi otomatis gelap di dark mode) + garis wajah. */
.emo-icon{
  /* --emo diwarisi dari .emo-card / modal (diset inline per emosi); jangan
     dideklarasikan ulang di sini atau warna aksen tiap emosi akan tertimpa. */
  display: inline-flex; width: 58px; height: 58px; flex-shrink: 0;
  color: var(--primary-strong);
  color: color-mix(in srgb, var(--emo, var(--primary)) 72%, var(--text));
}
.emo-icon svg{ width: 100%; height: 100%; display: block; }
.emo-bg{ fill: var(--primary-tint); fill: color-mix(in srgb, var(--emo, var(--primary)) 20%, var(--surface)); transition: fill .15s ease; }
.emo-card:hover .emo-bg{ fill: color-mix(in srgb, var(--emo) 32%, var(--surface)); }
.emo-icon-sm{ width: 38px; height: 38px; }
.emo-label{
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem; line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ---------- 3) Modal ayat & faedah (memakai .modal-overlay/.modal-sheet) ---------- */
.emosi-modal-head{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.emosi-modal-head h3{ overflow-wrap: anywhere; }
.emosi-sheet{ --emo: var(--primary); }
.emosi-sheet .modal-sheet-body{ padding: 2px 18px 26px; }

.emo-intro{
  margin: 14px 0 2px; font-family: var(--font-body); font-size: .9rem;
  line-height: 1.7; color: var(--text-muted);
}
.emo-item{ padding: 18px 0; border-bottom: 1px solid var(--border); }
.emo-item:last-of-type{ border-bottom: 0; }

.emo-ref{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.emo-ref-badge{
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  color: var(--primary-strong); background: var(--primary-tint);
  padding: 4px 11px; border-radius: 999px;
}
.emo-ref-badge-doa{
  color: var(--text); background: var(--surface-2);
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
}
.emo-ref-link{ font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.emo-ref-link:hover{ color: var(--primary-strong); text-decoration: underline; }

.emo-ar{
  margin: 6px 0 10px; text-align: right; direction: rtl;
  font-family: var(--font-arabic); font-size: calc(1.6rem * var(--arabic-scale, 1));
  line-height: 2.1; color: var(--text);
}
@media (max-width: 520px){ .emo-ar{ font-size: calc(1.4rem * var(--arabic-scale, 1)); line-height: 2; } }

/* Terjemahan langsung (tanpa label), nomor ayat kecil bila lebih dari satu ayat */
.emo-tr{ margin: 0 0 12px; font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: var(--text); }
.emo-tr-no{ font-family: var(--font-ui); font-size: .72rem; font-weight: 700; color: var(--primary-strong); }
.emo-src{ margin: -6px 0 12px; font-size: .74rem; font-style: italic; color: var(--text-muted); }

.emo-faedah{
  padding: 11px 14px; border-radius: var(--radius-s);
  border-left: 3px solid var(--emo);
  background: var(--primary-tint);
  background: color-mix(in srgb, var(--emo) 11%, var(--surface));
}
.emo-faedah p{ margin: 0; }
.emo-faedah-label{
  margin-bottom: 4px !important; font-family: var(--font-ui);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-strong);
  color: color-mix(in srgb, var(--emo) 65%, var(--text));
}
.emo-faedah-text{ font-family: var(--font-body); font-size: .88rem; line-height: 1.7; color: var(--text); }

.emo-catatan{
  margin: 6px 0 0; padding: 12px 14px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px dashed var(--border);
  font-family: var(--font-body); font-size: .85rem; line-height: 1.7; color: var(--text);
}
.emo-catatan strong{ color: var(--primary-strong); }
.emo-foot{ margin: 16px 0 0; text-align: center; font-size: .72rem; line-height: 1.6; color: var(--text-muted); }

/* Pemuatan & galat teks ayat */
.emo-loading{ padding: 6px 0 8px; }
.emo-sk{ display: block; height: 16px; margin: 9px 0; border-radius: 8px; }
.emo-sk-ar{ height: 34px; width: 92%; margin-left: auto; }
.emo-sk-short{ width: 58%; }
.emo-error{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; color: var(--text-muted);
}
.emo-retry{
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--primary); background: transparent; color: var(--primary-strong);
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem;
}
.emo-retry:hover{ background: var(--primary-tint); }

/* =========================================================
   FITUR BARU — Pagination isi Juz (juz.html · pager.js · juz-reader.js)
   Memakai ulang .pager / .pager-btn dari pagination Daftar Surah.
   Hanya menambah penanda halaman + pembungkus lebar.
   ========================================================= */
.juz-page-info{
  max-width: 760px; margin: 14px auto 0;
  padding: 0 clamp(12px, 4vw, 20px);
  text-align: center; font-size: .78rem; font-weight: 600; line-height: 1.5;
  color: var(--text-muted);
  scroll-margin-top: 140px;
}
.juz-page-info.hidden{ display: none; }
.juz-pager{
  max-width: 760px; margin: 6px auto 20px;
  padding: 0 clamp(12px, 4vw, 20px);
}

/* ===== [BARU] Logo eQuran di header (menggantikan ikon bintang SVG) =====
   Tile logo sudah berlatar hijau + sudut membulat + transparan di sudutnya,
   jadi TIDAK perlu mix-blend-mode. Ukuran dikunci agar layout header tidak bergeser. */
.brand-mark{ width:36px; height:36px; color:inherit; }
.brand-mark picture{ display:block; width:100%; height:100%; }
.brand-mark img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:9px; }
@media (max-width: 359px){ .brand-mark{ width:32px; height:32px; } }