/* ============================================================================
   quran-read.css — QURAN IMMERSIVE READER (fitur-rekomendasi-layout-khusus-quran.md)
   ----------------------------------------------------------------------------
   Reader = aplikasi mushaf fullscreen: 100dvh, TANPA header/bottom-nav/footer
   (disembunyikan via body.quran-reader-mode), kontrol overlay auto-hide,
   zoom transform di dalam viewport (browser tak ikut zoom), 2 halaman RTL
   (current kanan, next kiri), mode Normal/Sepia/Malam tanpa invert kasar.
   ============================================================================ */

/* ---------- 1) Mode immersive: sembunyikan chrome MuslimHub ---------- */
body.quran-reader-mode .header,
body.quran-reader-mode .bottom-nav,
body.quran-reader-mode .audio-player,
body.quran-reader-mode footer { display: none !important; }
body.quran-reader-mode { overflow: hidden; }
body.quran-reader-mode #app { padding: 0; max-width: none; }

/* ---------- 2) Panggung reader ---------- */
/* Geometri halaman = geometri mushaf Madinah yang sebenarnya, mengikuti
   generator halaman resmi quran.com-images (lib/Quran/Image/Page.pm) yang
   memakai font QCF V2 yang sama dengan repo ini:
     • lebar halaman  = 21 × font-size   (ptsize resmi = lebar / 21)
     • tinggi halaman = lebar × PHI (1.618)
     • teks 15 baris mengisi tinggi halaman → pitch ≈ 2.26 em, sedangkan
       tinta glyph tertinggi ≈ 2.05 em (terukur) → tidak tumpang tindih.
   Font-size halaman (--qr-fs) dihitung dari ruang layar yang tersedia →
   halaman SELALU utuh: tidak terpotong ke samping maupun ke bawah, di
   desktop (2 halaman) maupun mobile (1 halaman), portrait/landscape. */
.qr-reader {
  --qr-vh: 100vh;                           /* diganti 100dvh bila didukung */
  --qr-pad: 12px;                           /* jarak halaman ke tepi layar */
  --qr-gap: 6px;                            /* jarak antar halaman (mode 2 halaman) */
  --qr-chrome: 0px;                         /* ruang bar kontrol yang selalu tampil */
  --qr-avail-h: calc(var(--qr-vh) - (2 * var(--qr-pad)) - var(--qr-chrome));
  position: fixed; inset: 0;
  width: 100%;
  height: 100vh; height: 100dvh;           /* fallback + dvh modern */
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #10201A 0%, #0A1512 70%); /* ruang membaca tenang */
  z-index: 60;
}
@supports (height: 100dvh) { .qr-reader { --qr-vh: 100dvh; } }
/* Menu statis (§6): top bar & player selalu tampil → sisakan ruangnya agar
   baris pertama/terakhir mushaf tidak tertutup kontrol (opsi auto-hide bebas). */
.qr-reader.qr-static { --qr-chrome: 100px; }

.qr-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;                       /* gesture kita yang pegang (§4) */
  display: grid; place-items: center;
}
.qr-content {
  display: flex; gap: var(--qr-gap);
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}
.qr-content.two { flex-direction: row-reverse; } /* RTL: current (data pertama) di KANAN */
/* --qr-fs = satu-satunya variabel ukuran: seluruh halaman ikut menskalakan. */
.qr-content:not(.two) .qr-page {
  --qr-fs: min(calc((100vw - (2 * var(--qr-pad))) / 21), calc(var(--qr-avail-h) / 34));
}
.qr-content.two .qr-page {
  --qr-fs: min(calc((100vw - (2 * var(--qr-pad)) - var(--qr-gap)) / 42), calc(var(--qr-avail-h) / 34));
}
.qr-page {
  position: relative;
  font-size: var(--qr-fs, 24px);
  width: calc(var(--qr-fs, 24px) * 21);
  height: calc(var(--qr-fs, 24px) * 34);
  background: #FDFAF2;                       /* kertas mushaf */
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* mobile: kontrol lebih rapat di section 7 (geometri halaman tetap sama) */
.qr-skeleton { flex: 1; background: linear-gradient(100deg, #F3EDDC 40%, #FBF6E9 50%, #F3EDDC 60%); background-size: 200% 100%; animation: qrSkel 1.2s infinite; }
@keyframes qrSkel { to { background-position: -200% 0; } }
.qr-error { display: grid; place-items: center; height: 100%; color: #8A6D2F; font-size: 14px; }
/* Nomor halaman: pita kecil di margin bawah kertas — tidak menutupi ayat. */
.qr-page-num {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--qr-fs, 24px) * 1.1);
  font-size: calc(var(--qr-fs, 24px) * 0.42);
  color: #9A8B64; letter-spacing: .4px;
  pointer-events: none;
}

/* Render konten mushaf Madinah: 15 baris terkunci, pitch = tinggi halaman / 15
   (≈ 2.19 em setelah pita nomor halaman) — cukup untuk tinta glyph ≤ 2.05 em. */
.qr-page .mmd-page {
  flex: 1; min-height: 0; height: auto;      /* lepas min-height 560px mode buku */
  display: grid; grid-template-rows: repeat(15, 1fr);
  grid-template-columns: 100%;               /* WAJIB: tanpa ini kolom implisit 'auto'
                                                mengecil ke min-content baris terpanjang
                                                lalu (RTL) ditempel ke kanan — blok ayat
                                                Fatihah/awal Al-Baqarah jadi tidak tengah */
  padding: 0 11.9%;                          /* margin mushaf: teks 16em dari lebar kertas 21em */
  box-sizing: border-box;
  font-size: inherit;                        /* lepas clamp() mode buku */
  line-height: inherit;
}
.qr-page .mmd-line { display: flex; align-items: center; justify-content: space-between; width: 100%; white-space: nowrap; }
.qr-page .mmd-line.mmd-centered,
.qr-page .mmd-line.mmd-surah-name,
.qr-page .mmd-line.mmd-basmallah { justify-content: center; }
.qr-page .mmd-w {
  font-size: inherit;
  line-height: 1.9;                          /* font halaman QCF: naik 1.34em + turun 0.64em */
  user-select: none; -webkit-user-select: none; /* cegah seleksi teks & popup Chrome */
  -webkit-touch-callout: none; /* iOS Safari: cegah callout */
}
.qr-page .mmd-surah-label { font-family: 'Amiri', 'Scheherazade New', serif; font-size: .78em; color: #496B52; }
.qr-page .mmd-surah-num { font-size: .42em; color: #9A8B64; margin-inline-start: 8px; }
.qr-page .mmd-basmallah span { font-size: .8em; }

/* ---------- 3) Highlight ayat — lembut, layout tetap (§11) ---------- */
.mmd-w.qr-ayah-hl, .mmd-marker.qr-ayah-hl {
  background: rgba(212, 175, 55, .28);
  border-radius: 6px;
  transition: background .2s ease;
}

/* ---------- 4) Overlay kontrol: top bar + player (§6, §7, §9) ---------- */
.qr-top, .qr-player {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 5;
}
.qr-top { top: 0; justify-content: space-between; background: linear-gradient(rgba(5,12,9,.65), transparent); }
.qr-player { bottom: 0; background: linear-gradient(transparent, rgba(5,12,9,.72)); }
/* controls-off: kontrol tersembunyi (hanya saat S.staticMenu=false) */
.qr-reader.controls-off .qr-top { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.qr-reader.controls-off .qr-player { opacity: 0; transform: translateY(12px); pointer-events: none; }

.qr-btn {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(10, 21, 18, .62); color: #EAF4EF;
  font-size: 18px; cursor: pointer; backdrop-filter: blur(8px);
  text-decoration: none;
}
.qr-btn:active { transform: scale(.94); }
.qr-btn svg { width: 20px; height: 20px; }
.qr-play { background: var(--gold-500, #F7A333); color: #1A1305; border: none; min-width: 48px; border-radius: 14px; }

.qr-location {
  flex: 1; margin: 0 6px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(10, 21, 18, .62); color: #EAF4EF;
  font-size: 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px);
  max-width: 420px;
}
.qr-player-info { flex: 1; min-width: 0; color: #EAF4EF; display: grid; line-height: 1.25; padding: 0 4px; }
.qr-player-info b { font-size: 13px; }
.qr-player-info span { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 5) Dialog navigator / menu / qari (§8, §10, §16) ---------- */
.qr-dialog {
  border: none; border-radius: 18px; padding: 0;
  width: min(92vw, 430px); max-height: 76dvh;
  background: #0F1F19; color: #EAF4EF;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.qr-dialog::backdrop { background: rgba(4, 8, 6, .55); backdrop-filter: blur(3px); }
.qr-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qr-search {
  margin: 10px 14px; padding: 10px 12px; width: calc(100% - 28px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: rgba(255,255,255,.06); color: #EAF4EF; font-size: 14px;
}
.qr-nav-tabs { display: flex; gap: 6px; padding: 0 14px 8px; }
.qr-nav-tabs button {
  flex: 1; padding: 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: transparent; color: #B9D6C9; font-size: 13px;
}
.qr-nav-tabs button.on { background: var(--gold-500, #F7A333); color: #1A1305; border-color: transparent; font-weight: 700; }
.qr-nav-list { overflow-y: auto; max-height: 46dvh; padding: 4px 8px 10px; }
.qr-nav-item {
  display: block; width: 100%; text-align: start;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  background: transparent; border: none; color: #EAF4EF; font-size: 14px;
}
.qr-nav-item:hover { background: rgba(255,255,255,.07); }
.qr-nav-item.on { color: var(--gold-500, #F7A333); font-weight: 700; }
.qr-menu-sec { padding: 10px 16px 2px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #8FA69B; font-weight: 700; }
.qr-menu-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; align-items: center; }
.qr-zoomval { font-size: 12.5px; opacity: .8; min-width: 44px; text-align: center; }
.qr-pill {
  padding: 9px 13px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: #EAF4EF; font-size: 13px;
}
.qr-pill:hover { background: rgba(255,255,255,.12); }

/* ---------- 6) Mode malam / sepia (§17) — halus, tanpa invert kasar ---------- */
.qr-reader[data-theme='sepia'] .qr-page { background: #F3E9CF; }
.qr-reader[data-theme='sepia'].qr-reader { background: radial-gradient(120% 90% at 50% 0%, #241E12 0%, #17130A 70%); }
.qr-reader[data-theme='sepia'] .qr-page .mmd-w { color: #4A3F26; }
.qr-reader[data-theme='dark'] .qr-page { background: #101613; }
.qr-reader[data-theme='dark'].qr-reader { background: radial-gradient(120% 90% at 50% 0%, #0A0F0C 0%, #050806 70%); }
.qr-reader[data-theme='dark'] .qr-page { box-shadow: 0 14px 44px rgba(0,0,0,.8); }
.qr-reader[data-theme='dark'] .qr-page .mmd-w,
.qr-reader[data-theme='dark'] .qr-page .mmd-basmallah span { color: #D8E6DD; filter: brightness(.92); } /* brightness halus */
.qr-reader[data-theme='dark'] .qr-page .mmd-surah-label { color: #7FA98F; }
.qr-reader[data-theme='dark'] .qr-page .mmd-surah-num,
.qr-reader[data-theme='dark'] .qr-page-num { color: #5E7268; }
.qr-reader[data-theme='dark'] .mmd-w.qr-ayah-hl, .qr-reader[data-theme='dark'] .mmd-marker.qr-ayah-hl { background: rgba(212,175,55,.22); }

/* ---------- 7) Mobile: kontrol lebih rapat ----------------------------------
   Geometri halaman TIDAK lagi di-override di sini: ukuran halaman selalu
   dihitung dari ruang layar (lihat section 2) sehingga di layar sempit pun
   halaman tetap utuh — dulu `width:100vw` + font dari tinggi viewport membuat
   tepi kiri/kanan & baris bawah terpotong. */
@media (max-width: 700px) {
  .qr-reader { --qr-chrome: 92px; }
  .qr-top { padding: 8px 10px; }
  .qr-player { padding: 8px 10px; }
}

/* ---------- 8) Popup aksi ayat (hold 1 detik) ---------- */
.qr-ayah-popup {
  position: absolute;
  bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 21, 18, .95);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 20;
  backdrop-filter: blur(12px);
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: qrPopIn .18s ease;
}
@keyframes qrPopIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.qr-ayah-popup[hidden] { display: none; }
.qr-ayah-popup-loc {
  font-size: 13px; font-weight: 700; color: var(--gold-500, #F7A333);
  text-align: center; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.qr-ayah-popup-btn {
  width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: #EAF4EF; font-size: 13px;
  cursor: pointer; text-align: left;
}
.qr-ayah-popup-btn:hover { background: rgba(255,255,255,.14); }
.qr-ayah-popup-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: none; color: #7FA98F;
  font-size: 14px; cursor: pointer;
}

/* ---------- 9) Toggle button aktif ---------- */
.qr-pill.qr-toggle.on {
  background: var(--gold-500, #F7A333);
  color: #1A1305;
  border-color: transparent;
  font-weight: 700;
}