/* Mushaf (js/mushaf.js): pembaca Mushaf Madinah dengan efek balik kertas (StPageFlip).
   Ukuran isi halaman memakai satuan --u = 1/400 lebar halaman (container query), sama dengan
   koordinat bingkai SVG 400 × 572, jadi huruf, baris, dan bingkai selalu sebanding di layar apa pun.
   Catatan: main.css memaksa semua <button> berbentuk pil (!important) — kartu & baris di sini
   menimpanya dengan border-radius !important. */

html.mushaf-terkunci,
html.mushaf-terkunci body { overflow: hidden !important; }

.mushaf {
  --mf-meja: #e6dfd0;
  --mf-ui: #fffdf8;
  --mf-ui-2: #f3eee3;
  --mf-teks: #2a251e;
  --mf-redup: #6c6457;
  --mf-garis: rgba(70, 52, 20, .15);
  --mf-aksen: #8a6420;
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  background: var(--mf-meja);
  color: var(--mf-teks);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.mushaf[hidden],
.mushaf.is-ringkas[hidden] { display: none; }
.mushaf-ringkas-kontrol { display: none; }
/* Popup setoran: satu lembar tegak, tanpa bilah pembaca atau bayangan punggung buku. */
.mushaf.is-ringkas {
  display: grid; place-items: center;
  padding: max(44px, env(safe-area-inset-top)) 12px max(44px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .72);
}
.mushaf.is-ringkas .mushaf-atas,
.mushaf.is-ringkas .mushaf-bawah,
.mushaf.is-ringkas .mushaf-panel { display: none; }
.mushaf.is-ringkas .mushaf-panggung {
  flex: none; padding: 0;
  width: min(calc(100vw - 24px), calc((100dvh - 88px) * 400 / 572));
  aspect-ratio: 400 / 572;
  background: var(--mf-kertas);
}
.mushaf.is-ringkas .mushaf-hal { box-shadow: none; }
.mushaf.is-ringkas .mushaf-kertas::after { display: none; }
/* Glyph angka Amiri Quran berwarna (COLR); fill saja tidak menimpa warna font. */
.mushaf .mushaf-label--hal { fill: #000; filter: brightness(0); }
.mushaf[data-kertas-malam="1"] .mushaf-label--hal { fill: #fff; filter: brightness(0) invert(1); }
.mushaf.is-ringkas .mushaf-status:not(.is-galat) p { display: none; }
.mushaf.is-ringkas .mushaf-ringkas-kontrol {
  display: block; position: fixed; inset: auto;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(100vw - 24px), calc((100dvh - 88px) * 400 / 572));
  aspect-ratio: 400 / 572;
  pointer-events: none; z-index: 10;
}
.mushaf-ringkas-kontrol button {
  position: absolute; display: grid; place-items: center; pointer-events: auto;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  color: #fff; opacity: .75; cursor: pointer;
}
.mushaf-ringkas-kontrol button svg { width: 24px; height: 24px; fill: currentColor; }
.mushaf-ringkas-kontrol [data-aksi="tutup"] { top: -44px; right: 0; }
.mushaf-ringkas-kontrol [data-aksi="maju"] { top: calc(50% - 22px); left: -48px; }
.mushaf-ringkas-kontrol [data-aksi="mundur"] { top: calc(50% - 22px); right: -48px; }
.mushaf.is-ringkas-sempit .mushaf-ringkas-kontrol [data-aksi="maju"] { top: auto; bottom: -44px; left: 0; }
.mushaf.is-ringkas-sempit .mushaf-ringkas-kontrol [data-aksi="mundur"] { top: auto; bottom: -44px; right: 0; }
.mushaf-ringkas-kontrol button:disabled { opacity: .2; cursor: default; }
.mushaf-ringkas-kontrol button:active:not(:disabled) { transform: scale(.94); background: rgba(255, 255, 255, .12); opacity: 1; }
.mushaf-ringkas-kontrol button:focus-visible { outline-color: #fff; opacity: 1; }
@media (hover: hover) { .mushaf-ringkas-kontrol button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); opacity: 1; } }
@media (max-width: 640px) {
  .mushaf-ringkas-kontrol [data-aksi="maju"] { top: auto; bottom: -44px; left: 0; }
  .mushaf-ringkas-kontrol [data-aksi="mundur"] { top: auto; bottom: -44px; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .mushaf-ringkas-kontrol button:active { transform: none; } }
.mushaf[data-malam="1"] {
  --mf-meja: #0e0f11;
  --mf-ui: #18191c;
  --mf-ui-2: #24252a;
  --mf-teks: #ece7dc;
  --mf-redup: #a59e92;
  --mf-garis: rgba(255, 255, 255, .11);
  --mf-aksen: #d4b062;
}
.mushaf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mushaf-umum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* :where() = spesifisitas nol, supaya ukuran huruf per tombol di bawah tetap menang. */
:where(.mushaf) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.mushaf button:focus-visible,
.mushaf-cari-input:focus-visible { outline: 2px solid var(--mf-aksen); outline-offset: 2px; }
.mushaf-ikon svg,
.mushaf-nav svg,
.mushaf-cari-kotak svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Bilah atas & bawah ─────────────────────────────────────────────────────── */
.mushaf-atas {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--mf-ui); border-bottom: 1px solid var(--mf-garis);
}
.mushaf-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.mushaf-judul-surat { max-width: 100%; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mushaf-judul-info { font-size: 12px; font-weight: 600; color: var(--mf-redup); font-variant-numeric: tabular-nums; }
.mushaf-ikon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mushaf-ikon[hidden] { display: none; }
.mushaf-ikon:hover:not(:disabled),
.mushaf-ikon[aria-expanded="true"] { background: var(--mf-ui-2); }
.mushaf-ikon[aria-expanded="true"],
.mushaf-ikon[aria-pressed="true"] { color: var(--mf-aksen); }
.mushaf-ikon:disabled { opacity: .35; cursor: default; }
/* Ukuran halaman: − 100% + (Ctrl + roda / Ctrl +/−/0 juga). HP: cubit dua jari, bilahnya tidak muat. */
.mushaf-zoom { display: flex; align-items: center; flex: none; }
.mushaf-zoom-nilai {
  min-width: 50px; height: 40px; padding: 0 4px; border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mf-redup);
}
.mushaf-zoom-nilai:hover { background: var(--mf-ui-2); color: var(--mf-teks); }
@media (max-width: 559px) { .mushaf-zoom { display: none; } }
.mushaf-mode { display: flex; flex: none; gap: 2px; padding: 3px; margin-right: 8px; border-radius: 10px; background: var(--mf-ui-2); }
.mushaf-mode button {
  min-width: 40px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px !important;
  background: transparent; font-size: 12px; font-weight: 700; color: var(--mf-redup); cursor: pointer;
}
.mushaf-mode button[aria-pressed="true"] { background: var(--mf-ui); color: var(--mf-teks); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mushaf-mode button:active { opacity: .65; }
@media (max-width: 740px) {
  .mushaf-mode { margin-right: 2px; }
  .mushaf-mode button { padding: 0 8px; }
  .mushaf-mode button span { display: none; }
}

.mushaf-bawah {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--mf-ui); border-top: 1px solid var(--mf-garis);
}
.mushaf-nav {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--mf-garis); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer;
}
.mushaf-nav[data-aksi="mundur"] { padding: 0 10px 0 14px; }
.mushaf-nav:hover:not(:disabled) { background: var(--mf-ui-2); }
.mushaf-nav:disabled { opacity: .38; cursor: default; }
.mushaf-posisi {
  min-height: 40px; padding: 0 16px; border: 0; background: var(--mf-ui-2);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
@media (max-width: 420px) {
  .mushaf-nav span { display: none; }
  .mushaf-nav, .mushaf-nav[data-aksi="mundur"] { padding: 0 12px; }
}

/* ── Panggung & buku ────────────────────────────────────────────────────────── */
.mushaf-panggung { position: relative; flex: 1; min-height: 0; padding: 12px; }
.mushaf-buku {
  width: 100%; height: 100%;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Admin boleh menyalin teks aplikasi; lembar mushaf tetap khusus untuk gestur baca.
   main.css memberi user-select:text !important pada semua elemen untuk admin. */
#mushafOverlay .mushaf-buku,
#mushafOverlay .mushaf-buku * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none;
}
/* Mode satu lembar tetap membalik kertas, tetapi sisi lain tidak meluber ke samping. */
.mushaf:not(.is-lanskap) .mushaf-buku { overflow: hidden; }
/* Cubit dan geser ditangani pembaca, tanpa memperbesar web. Menimpa touch-action Android/PF. */
#mushafOverlay,
#mushafOverlay .mushaf-panggung,
#mushafOverlay .mushaf-panggung * { touch-action: none; }
#mushafOverlay .mushaf-panel,
#mushafOverlay .mushaf-panel * { touch-action: pan-y; }
/* Diperbesar: mushaf.js memberi buku ukuran lebih besar dari panggung, panggung bisa digulir & diseret. */
.mushaf.is-zoom .mushaf-panggung { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mushaf.is-zoom .mushaf-panggung::-webkit-scrollbar { display: none; }
.mushaf.is-zoom .stf__block { cursor: grab; }
.mushaf.is-zoom .stf__block.is-geser { cursor: grabbing; }
/* Buku Arab: StPageFlip hanya kenal buku kiri → kanan, jadi seluruh buku dicerminkan dan isi
   tiap halaman dicerminkan balik. Hasilnya halaman kiri terangkat dan dibalik ke kanan. */
.mushaf-buku .stf__block { transform: scaleX(-1); }
.mushaf-hal > .mushaf-kertas { transform: scaleX(-1); }
.mushaf-status {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center; font-size: 14px; color: var(--mf-redup);
}
.mushaf-status[hidden] { display: none; }
.mushaf-status p { margin: 0; max-width: 300px; line-height: 1.5; }
.mushaf-putar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--mf-garis); border-top-color: var(--mf-aksen);
  animation: mushaf-putar .9s linear infinite;
}
.mushaf-coba { min-height: 40px; padding: 0 18px; border: 1.5px solid var(--mf-aksen); background: transparent; color: var(--mf-aksen); font-weight: 700; cursor: pointer; }
@keyframes mushaf-putar { to { transform: rotate(360deg); } }

/* Satu halaman (StPageFlip mengatur posisi & ukurannya lewat style inline). */
.mushaf-hal {
  background: var(--mf-kertas, #fbf6e8);
  container-type: inline-size;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 10px 26px -14px rgba(0, 0, 0, .45);
}
.mushaf-kertas { position: absolute; inset: 0; --u: .25cqw; }
.mushaf-kertas::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* Bayangan lipatan buku: halaman genap (kiri) di sisi kanan, ganjil (kanan) di sisi kiri. */
.mushaf-hal--genap .mushaf-kertas::after { background: linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 5%); }
.mushaf-hal--ganjil .mushaf-kertas::after { background: linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 5%); }
.mushaf:not(.is-lanskap) .mushaf-kertas::after { display: none; }
.mushaf-bingkai { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mushaf-label { fill: var(--mf-tinta); font-family: 'mushaf-amiri', 'Amiri Quran', serif; direction: rtl; }
/* Di layar lebar medali hiasan di sisi lipatan disembunyikan, seperti mushaf cetak. */
.mushaf.is-lanskap .mushaf-hal--genap .mushaf-med-kanan,
.mushaf.is-lanskap .mushaf-hal--ganjil .mushaf-med-kiri { display: none; }

/* Area teks 276 × 445,5 satuan (perbandingan sama dengan cetakan: 248 × 400 dari 383 × 547),
   15 baris berjarak 29,7 satuan; huruf 16 satuan = baris terpanjang (17,2 em) masih muat. */
.mushaf-teks {
  position: absolute;
  left: calc(62 * var(--u)); right: calc(62 * var(--u));
  top: calc(63.25 * var(--u)); height: calc(445.5 * var(--u));
  display: flex; flex-direction: column; justify-content: center;
  direction: rtl;
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: var(--mf-tinta);
  visibility: hidden;
}
.mushaf-kertas.is-siap .mushaf-teks { visibility: visible; }
/* Tanpa column-gap: sisa ruang dibagi rata oleh space-between, dan karena lebar alami tiap baris
   (dengan spasi font) ≤ 17,25 em, jarak antarkata tidak pernah lebih sempit dari spasi aslinya. */
/* min-height:0 wajib: tanpa itu baris kop (kotak judul 81 satuan) memanjang sendiri dan
   mendorong baris lain ke bawah bingkai. Isinya cukup meluap rata atas-bawah. */
.mushaf-baris {
  flex: 0 0 calc(29.7 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap; min-width: 0; min-height: 0;
}
.mushaf-baris--tengah,
.mushaf-baris--kop { justify-content: center; }
/* Kotak judul surat (kop): satu glyph QCF_SurahHeader, lebar 3,3 em → 268 satuan ≈ lebar baris. */
.mushaf-kop { font-family: 'mushaf-kop'; font-size: calc(81 * var(--u)); line-height: 1; color: var(--mf-kop); }
.mushaf-basmalah { font-family: 'mushaf-p1'; font-size: 1.15em; }
/* Halaman 1–2: blok teks lebih sempit di tengah (lebar baris terpanjangnya 13,7 em). */
.mushaf-teks--pembuka { left: calc(90.4 * var(--u)); right: calc(90.4 * var(--u)); }
.mushaf-teks--pembuka .mushaf-kop { font-size: calc(66 * var(--u)); }

.mushaf-muat {
  position: absolute; left: 50%; top: 50%;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  margin: calc(-14 * var(--u)) 0 0 calc(-14 * var(--u));
  border-radius: 50%;
  border: calc(2.5 * var(--u)) solid rgba(128, 100, 40, .25); border-top-color: var(--mf-emas);
  animation: mushaf-putar .9s linear infinite;
}
.mushaf-kertas.is-siap .mushaf-muat,
.mushaf-kertas.is-gagal .mushaf-muat { display: none; }
.mushaf-kertas.is-gagal::before {
  content: 'Halaman belum bisa dimuat. Periksa internet.';
  position: absolute; left: 20%; right: 20%; top: 46%;
  text-align: center; font-size: calc(12 * var(--u)); line-height: 1.4; color: var(--mf-tinta); opacity: .7;
}

/* ── Panel cari & pengaturan ────────────────────────────────────────────────── */
.mushaf-panel {
  position: absolute; z-index: 5;
  top: calc(58px + env(safe-area-inset-top, 0px)); right: 10px;
  width: min(380px, calc(100% - 20px));
  max-height: min(72vh, calc(100% - 150px));
  overflow: auto; overscroll-behavior: contain;
  padding: 12px;
  background: var(--mf-ui); color: var(--mf-teks);
  border: 1px solid var(--mf-garis); border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .38);
}
.mushaf-panel[hidden] { display: none; }
.mushaf-cari-kotak {
  position: sticky; top: -12px; z-index: 1;
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin: -12px -12px 0;
  border-radius: 16px 16px 0 0; background: var(--mf-ui); border-bottom: 1px solid var(--mf-garis);
  color: var(--mf-redup);
}
.mushaf-cari-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent;
  color: var(--mf-teks); font: inherit; font-size: 15px; outline: none;
}
.mushaf-cari-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mushaf-cari-sub,
.mushaf-panel-judul {
  margin: 14px 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mf-redup);
}
.mushaf-panel-judul:first-child { margin-top: 4px; }
.mushaf-juz { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mushaf button.mushaf-juz-btn {
  height: 36px; padding: 0; border: 1px solid var(--mf-garis); background: transparent;
  border-radius: 10px !important; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mushaf-juz-btn:hover { background: var(--mf-ui-2); }
.mushaf button.mushaf-hasil {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "j h" "k h"; column-gap: 12px;
  width: 100%; padding: 9px 10px; border: 0; background: transparent; text-align: left;
  border-radius: 10px !important; cursor: pointer;
}
.mushaf-hasil:hover { background: var(--mf-ui-2); }
.mushaf-hasil-judul { grid-area: j; font-size: 14px; font-weight: 700; }
.mushaf-hasil-ket { grid-area: k; font-size: 12px; color: var(--mf-redup); }
.mushaf-hasil-hal { grid-area: h; align-self: center; font-size: 12px; font-weight: 700; color: var(--mf-redup); font-variant-numeric: tabular-nums; }
.mushaf-arab { font-family: 'mushaf-amiri', 'Amiri Quran', serif; font-size: 15px; line-height: 1.3; }
.mushaf-kosong { margin: 0; padding: 18px 8px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--mf-redup); }

.mushaf-pilih-gaya { display: grid; gap: 6px; }
.mushaf button.mushaf-gaya {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "c n" "c k"; align-items: center; column-gap: 12px;
  padding: 10px; border: 1.5px solid var(--mf-garis); background: transparent; text-align: left;
  border-radius: 12px !important; cursor: pointer;
}
.mushaf button.mushaf-gaya:hover { background: var(--mf-ui-2); }
.mushaf button.mushaf-gaya[aria-checked="true"] { border-color: var(--mf-aksen); background: var(--mf-ui-2); }
.mushaf-gaya-contoh { grid-area: c; display: flex; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--mf-garis); }
.mushaf-gaya-contoh i { width: 12px; height: 30px; }
.mushaf-gaya-nama { grid-area: n; font-size: 14px; font-weight: 700; }
.mushaf-gaya-ket { grid-area: k; font-size: 12px; color: var(--mf-redup); }
.mushaf-setelan-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 4px; padding: 12px 4px; border-top: 1px solid var(--mf-garis); border-bottom: 1px solid var(--mf-garis);
}
.mushaf-setelan-baris b { display: block; font-size: 14px; }
.mushaf-setelan-baris small { display: block; font-size: 12px; color: var(--mf-redup); }
.mushaf button.mushaf-saklar { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; background: var(--mf-garis); cursor: pointer; transition: background-color .2s ease; }
.mushaf-saklar i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.mushaf button.mushaf-saklar[aria-checked="true"] { background: var(--mf-aksen); }
.mushaf-saklar[aria-checked="true"] i { transform: translateX(20px); }
.mushaf-segmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--mf-ui-2); border-radius: 12px; }
.mushaf .mushaf-segmen button {
  min-height: 36px; padding: 0 6px; border: 0; background: transparent;
  border-radius: 9px !important; font-size: 13px; font-weight: 700; color: var(--mf-redup); cursor: pointer;
}
.mushaf .mushaf-segmen button[aria-checked="true"] { background: var(--mf-ui); color: var(--mf-teks); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.mushaf-sumber { margin: 14px 4px 2px; font-size: 11.5px; line-height: 1.5; color: var(--mf-redup); }

/* Layar penuh: hanya lembar mushaf. Keluar lewat Esc/F atau dua ketukan pada lembar. */
#mushafOverlay.is-penuh:not([hidden]) { display: flex; padding: 0; background: var(--mf-kertas); }
#mushafOverlay.is-penuh .mushaf-atas,
#mushafOverlay.is-penuh .mushaf-bawah,
#mushafOverlay.is-penuh .mushaf-panel,
#mushafOverlay.is-penuh .mushaf-ringkas-kontrol { display: none; }
#mushafOverlay.is-penuh .mushaf-panggung { flex: 1; padding: 0; aspect-ratio: auto; }
#mushafOverlay.is-penuh .mushaf-hal { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .mushaf-saklar, .mushaf-saklar i { transition: none; }
}

/* ── Acuan Halaman (app.js): tiap baris surat = tombol "Buka di Mushaf" ─────── */
#acuanHalamanOverlay .acuan-surah li > .acuan-surah-buka {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: -7px -8px; padding: 7px 8px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 8px !important;
  -webkit-tap-highlight-color: transparent;
}
#acuanHalamanOverlay .acuan-surah-buka:hover { background: var(--app-hover, rgba(0, 0, 0, .05)); }
#acuanHalamanOverlay .acuan-surah-buka:focus-visible { outline: 2px solid var(--app-accent, #22c55e); outline-offset: -2px; }
#acuanHalamanOverlay .acuan-surah-buka .acuan-surah-page::after { content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-left: 4px; vertical-align: middle; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .55; }