/* =========================================================
   Atribut hidden harus selalu menang.

   Peramban menyembunyikan elemen ber-atribut hidden melalui aturan
   bawaan display:none. Aturan itu kalah oleh selektor kelas mana pun
   yang menyetel display, misalnya .ev-stage { display: grid }.
   Akibatnya elemen tetap terlihat meskipun kode sudah menyembunyikannya,
   dan lapisan pra-acara tidak pernah bisa ditutup.

   Diletakkan di awal berkas dengan !important, karena satu-satunya
   pesaingnya adalah aturan tata letak milik elemen itu sendiri.
   ========================================================= */
[hidden] { display: none !important; }

/* =========================================================
   reader.css — Modul Pembacaan Mandiri
   Tipografi Arab (M7), counter dzikir, panel setelan.

   Catatan tipografi: Naskh dipakai sebagai bawaan untuk teks yang
   dibaca. Gaya dekoratif seperti Diwani dan Ruq'ah sengaja TIDAK
   disediakan untuk badan teks karena harakat bertumpuk pada layar
   ponsel dan berisiko menyebabkan salah baca. Keduanya hanya
   dipakai pada judul dan hiasan.
   ========================================================= */

:root {
  --ar-size: 34px;
  --tx-size: 15px;
  --ar-line: 2.1;
  --rd-bg: #f7faf8;
  --rd-card: #ffffff;
  --rd-text: #16211c;
  --rd-muted: #66756d;
  --rd-line: #dde7e2;
  --rd-accent: #155e45;
  --rd-gold: #b8860b;
  /* Warna teks di atas latar emas, dan warna tindakan merusak.
     Sebelumnya ditulis mentah di beberapa tempat, sehingga mengubah
     satu nuansa berarti menyisir seluruh berkas. */
  --rd-gold-teks: #3a2c00;
  --rd-gold-tua: #7a5800;
  --rd-bahaya: #b3261e;
}

body[data-theme="gelap"] {
  --rd-bg: #0d1512;
  --rd-card: #14201b;
  --rd-text: #e8f0ec;
  --rd-muted: #8ea79b;
  --rd-line: #23342c;
  --rd-accent: #4ea787;
  --rd-gold: #e8c86a;
}

.reader-body {
  margin: 0;
  background: var(--rd-bg);
  color: var(--rd-text);
  padding-bottom: 190px;
  transition: background .25s ease, color .25s ease;
}
body.panel-open { overflow: hidden; }

/* ---------- Bilah atas ---------- */
.rd-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: var(--rd-card); border-bottom: 1px solid var(--rd-line);
  padding: 8px 12px calc(8px + env(safe-area-inset-top)) 12px;
  display: flex; align-items: center; gap: 10px;
}
.rd-top .rd-title { flex: 1; min-width: 0; }
.rd-top .rd-title strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-top .rd-title span { font-size: 11px; color: var(--rd-muted); }
.rd-icon {
  background: none; border: 1px solid var(--rd-line); color: var(--rd-text);
  width: 40px; height: 40px; border-radius: 10px; font-size: 17px; cursor: pointer; flex: 0 0 auto;
}
.rd-icon:hover { background: var(--rd-bg); }

.rd-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 31; background: transparent; }
.rd-progress i { display: block; height: 100%; width: 0; background: var(--rd-gold); transition: width .35s ease; }

/* ---------- Isi bacaan ---------- */
.rd-main { max-width: 720px; margin: 0 auto; padding: 84px 18px 20px; }

.rd-seg-head { text-align: center; margin-bottom: 18px; }
.rd-seg-type {
  display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rd-muted); border: 1px solid var(--rd-line); border-radius: 99px; padding: 2px 10px;
}
.rd-seg-title { margin: 8px 0 2px; font-size: 17px; color: var(--rd-accent); }
.rd-seg-title-ar { font-family: var(--font-decor); font-size: 21px; color: var(--rd-gold); }

.rd-arabic {
  font-family: var(--font-arabic);
  font-size: var(--ar-size);
  line-height: var(--ar-line);
  text-align: right;
  direction: rtl;
  margin: 22px 0;
  word-spacing: .08em;
}
.rd-unit { border-radius: 6px; padding: 2px 4px; transition: background .25s ease, color .25s ease; }
.rd-unit.unit-active { background: rgba(184, 134, 11, .16); color: var(--rd-accent); }
body[data-anim="mati"] .rd-unit { transition: none; }

.rd-latin {
  font-size: calc(var(--tx-size) + 1px); font-style: italic;
  color: var(--rd-muted); line-height: 1.85; margin: 16px 0;
  padding: 12px 14px; border-left: 3px solid var(--rd-line); border-radius: 0 8px 8px 0;
}
.rd-translation { font-size: var(--tx-size); line-height: 1.8; margin: 16px 0; }
.rd-empty { color: var(--rd-muted); font-size: 14px; text-align: center; padding: 24px 0; }

/* ---------- Gaya kaligrafi (M7) ---------- */
body[data-font="naskh"]    { --font-arabic: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Scheherazade New", serif; --font-decor: "Amiri", serif; }
body[data-font="nastaliq"] { --font-arabic: "Noto Nastaliq Urdu", "Awami Nastaliq", "Noto Naskh Arabic", serif; --font-decor: "Amiri", serif; }
body[data-font="sistem"]   { --font-arabic: system-ui, "Segoe UI", sans-serif; --font-decor: system-ui, sans-serif; }
body[data-font="nastaliq"] .rd-arabic { line-height: calc(var(--ar-line) + .5); }

/* ---------- Counter dzikir (F-Q-08..F-Q-13) ---------- */
.rd-counter {
  position: fixed; left: 0; right: 0; bottom: calc(74px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; z-index: 25; pointer-events: none;
}
.rd-counter-inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; }

#counterRing {
  --fill: 0;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background:
    conic-gradient(var(--rd-gold) calc(var(--fill) * 360deg), var(--rd-line) 0);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
#counterRing::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--rd-card);
}
.rd-counter-nums { position: relative; text-align: center; line-height: 1.1; }
#counterNow { font-size: 30px; font-weight: 700; color: var(--rd-accent); font-variant-numeric: tabular-nums; }
#counterTarget { font-size: 12px; color: var(--rd-muted); }

body[data-anim="penuh"] #counterRing { transition: background .18s linear; }
body[data-anim="penuh"] #counterRing.target-hit { animation: hitPulse .42s ease; }
@keyframes hitPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.13); box-shadow: 0 0 0 12px rgba(184, 134, 11, .18); }
  100% { transform: scale(1); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
}
body[data-anim="mati"] #counterRing.target-hit { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #counterRing.target-hit { animation: none !important; }
  .rd-unit { transition: none; }
}

.rd-count-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rd-line);
  background: var(--rd-card); color: var(--rd-text); font-size: 19px; cursor: pointer;
}

#tapArea {
  position: fixed; inset: 0; z-index: 10; background: transparent; border: 0; cursor: pointer;
}

/* ---------- Bilah kendali ---------- */
.rd-controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 28;
  background: var(--rd-card); border-top: 1px solid var(--rd-line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.rd-controls .meta { position: absolute; left: 14px; font-size: 11px; color: var(--rd-muted); }
.rd-controls .meta b { color: var(--rd-accent); }
#btnPlay {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rd-accent); color: var(--rd-card); font-size: 19px;
  box-shadow: 0 4px 14px rgba(21, 94, 69, .35);
}
.rd-nav {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rd-line);
  background: var(--rd-card); color: var(--rd-text); font-size: 16px; cursor: pointer;
}

#btnResume {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(180px + env(safe-area-inset-bottom)); z-index: 27;
  background: var(--rd-accent); color: var(--rd-card); border: 0; border-radius: 99px;
  padding: 9px 18px; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(230px + env(safe-area-inset-bottom)); z-index: 40;
  background: rgba(13, 21, 18, .93); color: var(--rd-card); padding: 10px 16px;
  border-radius: 10px; font-size: 13px; max-width: 84vw; text-align: center;
}

#doneBox {
  position: fixed; inset: 0; z-index: 35; display: grid; place-items: center;
  background: rgba(13, 21, 18, .72); padding: 24px;
}
#doneBox div {
  background: var(--rd-card); border-radius: 16px; padding: 28px; text-align: center; max-width: 340px;
}

/* ---------- Panel setelan ---------- */
#panel {
  position: fixed; inset: 0; z-index: 50; background: var(--rd-card);
  display: flex; flex-direction: column;
}
.rd-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid var(--rd-line);
}
.rd-panel-head h2 { margin: 0; font-size: 16px; flex: 1; }
.rd-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rd-line); overflow-x: auto; }
.rd-tabs button {
  border: 1px solid var(--rd-line); background: var(--rd-bg); color: var(--rd-text);
  border-radius: 99px; padding: 7px 14px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.rd-tabs button.active { background: var(--rd-accent); color: var(--rd-card); border-color: var(--rd-accent); }
.rd-panel-body { flex: 1; overflow-y: auto; padding: 16px 14px calc(30px + env(safe-area-inset-bottom)); }

.rd-field { margin-bottom: 16px; }
.rd-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rd-field select, .rd-field input[type="range"] { width: 100%; }
.rd-field select {
  padding: 9px 11px; border: 1px solid var(--rd-line); border-radius: 8px;
  background: var(--rd-bg); color: var(--rd-text); font-size: 14px;
}
.rd-field .val { float: right; font-weight: 400; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.rd-hint { font-size: 12px; color: var(--rd-muted); line-height: 1.6; margin-top: 4px; }

.rd-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rd-line); }
.rd-toggle input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.rd-toggle span { font-size: 14px; }
.rd-toggle em { display: block; font-size: 11px; color: var(--rd-muted); font-style: normal; }

.rd-profile { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--rd-line); }
.rd-profile.active .rd-profile-pick { color: var(--rd-accent); font-weight: 700; }
.rd-profile-pick {
  flex: 1; text-align: left; background: none; border: 0; color: var(--rd-text);
  font-size: 14px; cursor: pointer; padding: 6px 0;
}
.rd-profile-pick em { font-size: 11px; color: var(--rd-muted); font-style: normal; }
.rd-mini {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rd-line);
  background: var(--rd-bg); color: var(--rd-text); cursor: pointer; font-size: 14px;
}
.rd-mini.danger { color: var(--rd-bahaya); }

.rd-index-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--rd-line);
  padding: 11px 4px; cursor: pointer; text-align: left; color: var(--rd-text);
}
.rd-index-item.active { background: var(--rd-bg); }
.rd-index-item .no {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--rd-line);
  display: grid; place-items: center; font-size: 11px;
}
.rd-index-item.active .no { background: var(--rd-accent); color: var(--rd-card); }
.rd-index-item .ttl { flex: 1; font-size: 14px; }
.rd-index-item .rep { font-size: 11px; color: var(--rd-muted); }

.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 15px; border-radius: 9px; border: 1px solid var(--rd-line);
  background: var(--rd-bg); color: var(--rd-text); font-size: 14px; cursor: pointer; min-height: 44px;
}
.rd-btn.primary { background: var(--rd-accent); color: var(--rd-card); border-color: var(--rd-accent); }
.rd-btn.danger { color: var(--rd-bahaya); }

@media (min-width: 760px) {
  #panel { left: auto; width: 420px; border-left: 1px solid var(--rd-line); box-shadow: -8px 0 30px rgba(0,0,0,.18); }
}

/* =========================================================
   Lapisan jamaah (M4)
   ========================================================= */
.ev-bar {
  position: fixed; top: 57px; left: 0; right: 0; z-index: 29;
  background: var(--rd-card); border-bottom: 1px solid var(--rd-line);
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
}
.ev-stat { text-align: center; flex: 0 0 auto; }
.ev-stat b { display: block; font-size: 16px; color: var(--rd-accent); font-variant-numeric: tabular-nums; }
.ev-stat span { font-size: 10px; color: var(--rd-muted); }
.ev-imam { flex: 1; min-width: 0; }
.ev-imam-label { font-size: 10px; color: var(--rd-muted); text-transform: uppercase; letter-spacing: .08em; }
.ev-imam-bar { height: 6px; background: var(--rd-line); border-radius: 99px; overflow: hidden; margin: 3px 0; }
.ev-imam-bar i { display: block; height: 100%; width: 0; background: var(--rd-accent); transition: width .5s ease; }
.ev-imam-seg { font-size: 11px; color: var(--rd-muted); }
.ev-follow {
  flex: 0 0 auto; background: var(--rd-gold); color: var(--rd-gold-teks); border: 0;
  border-radius: 99px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ev-lead {
  position: absolute; right: 14px; background: var(--rd-gold); color: var(--rd-gold-teks);
  border: 0; border-radius: 9px; padding: 9px 13px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ev-lead.marked { background: var(--rd-accent); color: var(--rd-card); }

/* Pada mode event, isi bacaan digeser ke bawah karena ada bilah jamaah */
#reader[data-event-id] .rd-main { padding-top: 124px; }

/* ---------- Layar pra-acara ---------- */
.ev-stage {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center;
  background: linear-gradient(140deg, #0a2f24, #155e45); padding: 20px; overflow-y: auto;
}
.ev-stage-card {
  background: var(--rd-card); border-radius: 18px; padding: 28px 24px;
  max-width: 380px; width: 100%; text-align: center;
}
.ev-stage-card h2 { margin: 12px 0 4px; font-size: 17px; color: var(--rd-accent); }
.ev-count {
  font-size: 40px; font-weight: 700; color: var(--rd-gold);
  font-variant-numeric: tabular-nums; margin: 6px 0 12px;
}
.ev-stage-meta { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.ev-stage-purpose {
  font-size: 13px; color: var(--rd-muted); background: var(--rd-bg);
  border-radius: 10px; padding: 12px; margin: 12px 0;
}
.ev-waqf {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rd-line);
}
.ev-waqf p { font-size: 13px; color: var(--rd-muted); margin: 0 0 10px; }

/* ---------- Daftar peserta ---------- */
.ev-sum-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--rd-line); font-size: 14px;
}
.ev-sum-row b { color: var(--rd-accent); font-variant-numeric: tabular-nums; }
.ev-person { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rd-line); }
.ev-avatar {
  flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--rd-line);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--rd-muted); overflow: hidden;
}
.ev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ev-person-body { flex: 1; min-width: 0; }
.ev-person-body strong { display: block; font-size: 13px; }
.ev-person-body em { font-size: 11px; color: var(--rd-muted); font-style: normal; }
.ev-person-bar { height: 4px; background: var(--rd-line); border-radius: 99px; margin-top: 4px; overflow: hidden; }
.ev-person-bar i { display: block; height: 100%; background: var(--rd-accent); }
.ev-person-pct { font-size: 12px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }

/* ---------- Peta agregat ---------- */
.ev-bucket { padding: 10px 0; border-bottom: 1px solid var(--rd-line); }
.ev-bucket-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.ev-bucket-head span { color: var(--rd-muted); font-size: 12px; }
.ev-bucket-bar { height: 8px; background: var(--rd-line); border-radius: 99px; overflow: hidden; }
.ev-bucket-bar i { display: block; height: 100%; background: var(--rd-gold); }

/* Pesan kegagalan pemuatan teks */
.rd-gagal {
  max-width: 460px; margin: 60px auto; padding: 26px 22px;
  background: var(--rd-card); border: 1px solid var(--rd-line); border-radius: 14px;
  text-align: center;
}
.rd-gagal h2 { margin: 0 0 10px; font-size: 17px; color: var(--rd-accent); }
.rd-gagal p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }

/* =========================================================
   Sorotan ayat dan laju baca mode senyap
   ========================================================= */
.rd-unit-blok {
  position: relative;
  padding: 14px 16px 14px 34px;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: background .35s ease, opacity .35s ease;
}
@media (prefers-reduced-motion: reduce) { .rd-unit-blok { transition: none; } }

.rd-unit-no {
  position: absolute; left: 8px; top: 16px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rd-line); color: var(--rd-muted);
  display: grid; place-items: center;
  font-size: 11px; font-variant-numeric: tabular-nums;
}

/* Ayat yang sedang dibaca. Sorotannya dibuat sebagai latar lembut,
   bukan warna mencolok, agar teks tetap yang paling menonjol. */
.rd-unit-blok.unit-active {
  background: var(--rd-highlight, rgba(27, 122, 88, .10));
  box-shadow: inset 3px 0 0 var(--rd-accent);
}
.rd-unit-blok.unit-active .rd-unit-no {
  background: var(--rd-accent); color: var(--rd-card);
}

/* Ayat yang sudah lewat diredupkan sedikit, bukan disembunyikan,
   sehingga pembaca masih dapat menengok ke belakang. */
.rd-unit-blok.unit-lewat { opacity: .55; }

/* Penampilan bertahap. Memakai visibility, bukan display, agar tinggi
   halaman tidak berubah dan posisi gulir tidak melompat saat berganti. */
.rd-unit-blok.unit-samar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Penanda sisa waktu ayat berjalan */
.rd-pace {
  margin-left: 10px; font-size: 11px; color: var(--rd-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rd-pace b { color: var(--rd-accent); }
.rd-pace span { color: var(--rd-gold); }

/* Tombol menghentikan event pada bilah kendali pelaksana */
.ev-stop { position: absolute; right: 14px; bottom: 58px; margin: 0; }
.ev-lead.stop { background: var(--rd-bahaya); color: var(--rd-card); }
@media (max-width: 620px) {
  .ev-stop { bottom: 52px; right: 8px; }
  .ev-lead.stop { padding: 7px 10px; font-size: 11px; }
}

/* Lampu penanda hidup, dipakai juga di dalam pembaca */
.lampu {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #34d17a; margin-right: 6px; vertical-align: middle;
  animation: lampuKedip 1.6s infinite;
}
@keyframes lampuKedip {
  0%   { box-shadow: 0 0 0 0 rgba(52, 209, 122, .65); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(52, 209, 122, 0); opacity: .75; }
  100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lampu { animation: none; } }

/* =========================================================
   Penataan ulang bilah kendali bawah
   =========================================================
   Sebelumnya keterangan mode, tombol Tandai Imam, dan tombol Hentikan
   sama-sama diposisikan mutlak pada bilah yang sama. Pada layar lebar
   kebetulan muat; pada ponsel ketiganya bertumpuk sampai tulisannya
   saling menimpa.

   Sekarang bilah itu menjadi tiga baris tersusun: keterangan, kendali
   bacaan, lalu tindakan pelaksana. Tidak ada lagi yang diposisikan
   mutlak, sehingga tidak ada yang dapat menimpa tetangganya.
   ========================================================= */
.rd-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.rd-controls .meta {
  position: static;                 /* tidak lagi mutlak */
  grid-column: 1;
  justify-self: start;
  font-size: 11px; line-height: 1.5;
}
.rd-controls .rd-transport {
  grid-column: 2;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.rd-controls .rd-lead-aksi {
  grid-column: 3;
  justify-self: end;
  display: flex; align-items: center; gap: 6px;
}
.ev-lead {
  position: static;                 /* tidak lagi mutlak */
  border: 0; border-radius: 9px; padding: 9px 13px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--rd-gold); color: var(--rd-gold-teks);
  white-space: nowrap;
}
.ev-stop { position: static; margin: 0; }

/* ---------- Layar sempit ---------- */
@media (max-width: 620px) {
  /* Kendali bacaan mendapat barisnya sendiri di tengah, tindakan
     pelaksana turun ke baris berikutnya. Keduanya tidak pernah
     berebut ruang yang sama. */
  .rd-controls {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding-top: 10px;
  }
  .rd-controls .meta,
  .rd-controls .rd-transport,
  .rd-controls .rd-lead-aksi { grid-column: 1; justify-self: center; }
  .rd-controls .meta { order: 3; }              /* keterangan paling bawah */
  .rd-controls .rd-transport { order: 1; }
  .rd-controls .rd-lead-aksi { order: 2; }

  .ev-lead { padding: 10px 14px; font-size: 12px; min-height: 44px; }
  #btnPlay { width: 54px; height: 54px; }
}

/* Penghitung dzikir tidak boleh menimpa bilah kendali maupun teks.
   Tingginya diperhitungkan lewat variabel, bukan ditebak. */
:root { --rd-bar-h: 84px; }
@media (max-width: 620px) { :root { --rd-bar-h: 150px; } }

.rd-counter {
  bottom: calc(var(--rd-bar-h) + env(safe-area-inset-bottom) + 8px);
}
.rd-main {
  padding-bottom: calc(var(--rd-bar-h) + env(safe-area-inset-bottom) + 90px);
}
#reader[data-event-id] .rd-main { padding-top: 118px; }
@media (max-width: 620px) {
  #reader[data-event-id] .rd-main { padding-top: 106px; }
}

/* Tombol penyelaras kini menyebut selisihnya, jadi perlu lebih lebar
   dan boleh melipat pada layar sempit. */
.ev-follow {
  background: var(--rd-gold); color: var(--rd-gold-teks); border: 0;
  border-radius: 99px; padding: 7px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; max-width: 62vw;
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Bilah jamaah pada layar sempit ----------
   Empat bagian berjajar dalam satu baris terlalu sempit di ponsel;
   tombol penyelaras terdorong sampai keluar layar. Statistik dipadatkan
   dan tombolnya diberi baris sendiri. */
@media (max-width: 620px) {
  .ev-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 6px 10px;
  }
  .ev-bar .ev-stat { font-size: 11px; }
  .ev-bar .ev-imam { flex: 1 1 100%; order: 3; }
  .ev-bar .ev-follow { order: 2; margin-left: auto; max-width: none; }
}