/* ======================================================================
   assets/murottal.css — panel dan pemutar murottal Al-Qur'an

   Dipakai bersama assets/murottal.js. Warnanya mengambil variabel tema
   madrasah (--hijau, --emas, --font-arab) supaya ikut berubah bila warna
   situs diganti lewat pengaturan.php, dan seluruh kelasnya berawalan mrt-
   agar tidak berbenturan dengan kelas Tailwind maupun style.css.
   ====================================================================== */

.mrt-tirai{position:fixed;inset:0;z-index:70;background:rgba(7,32,22,.55);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.mrt-tirai.buka{opacity:1;pointer-events:auto}

.mrt-panel{position:fixed;z-index:71;top:0;bottom:0;right:0;inset-block:0;inset-inline-end:0;width:min(880px,100vw);
  display:flex;flex-direction:column;background:var(--permukaan,#fff);color:var(--teks,#15241C);
  box-shadow:-18px 0 46px -22px rgba(0,0,0,.5);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.32,.72,.32,1)}
.mrt-panel.buka{transform:none}
html.dark .mrt-panel{background:#0F1C16;color:#EFEADF}


/* ---------- kepala ---------- */
.mrt-kepala{flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff;
  background:linear-gradient(150deg,#07301F 0%,var(--hijau,#0B5D3B) 62%,#0E7A4D 100%)}
.mrt-kepala .mrt-lambang{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(var(--emas-rgb,201 162 39),.5);
  font-family:var(--font-arab,serif);font-size:20px;line-height:1;color:var(--emas,#C9A227);padding-bottom:3px}
.mrt-kepala .mrt-tajuk{min-width:0}
.mrt-kepala h2{margin:0;font:600 15px/1.25 var(--font-judul,system-ui);letter-spacing:.01em}
.mrt-kepala p{margin:2px 0 0;font-size:11.5px;color:rgba(255,255,255,.72)}
.mrt-tutup{margin-left:auto;margin-inline-start:auto;flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center}
.mrt-tutup:hover{background:rgba(255,255,255,.2)}

/* ---------- penyaring ---------- */
.mrt-saring{flex:none;padding:12px 16px;border-bottom:1px solid var(--garis,#E6DFCE);
  display:flex;flex-direction:column;gap:10px}
html.dark .mrt-saring{border-color:rgba(255,255,255,.1)}
.mrt-tab{display:flex;gap:6px;background:rgba(var(--hijau-rgb,11 93 59),.07);padding:4px;border-radius:11px}
.mrt-tab button{flex:1;border:none;background:none;cursor:pointer;border-radius:8px;padding:8px 6px;
  font:600 12.5px var(--font-badan,system-ui);color:var(--teks-lembut,#6F7B73)}
.mrt-tab button[aria-selected="true"]{background:var(--hijau,#0B5D3B);color:#fff;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.55)}
html.dark .mrt-tab{background:rgba(255,255,255,.07)}
.mrt-cari{width:100%;border:1px solid var(--garis,#E6DFCE);border-radius:11px;padding:9px 12px;
  font:500 13px var(--font-badan,system-ui);background:var(--latar,#FBFAF6);color:inherit}
.mrt-cari::placeholder{color:var(--teks-lembut,#98A29B)}
html.dark .mrt-cari{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* ---------- daftar ---------- */
.mrt-daftar{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 12px}
.mrt-baris{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;
  border:1px solid transparent;background:none;color:inherit;border-radius:12px;padding:9px 10px;font:inherit}
.mrt-baris:hover{background:rgba(var(--hijau-rgb,11 93 59),.06)}
html.dark .mrt-baris:hover{background:rgba(255,255,255,.06)}
.mrt-baris.aktif{background:rgba(var(--emas-rgb,201 162 39),.14);border-color:rgba(var(--emas-rgb,201 162 39),.45)}
.mrt-nomor{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  font:700 12px var(--font-judul,system-ui);color:var(--hijau,#0B5D3B);
  background:rgba(var(--hijau-rgb,11 93 59),.1);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
html.dark .mrt-nomor{color:#7FD3A8;background:rgba(255,255,255,.08)}
.mrt-baris.aktif .mrt-nomor{background:var(--emas,#C9A227);color:#20160B}
.mrt-teks{min-width:0;flex:1}
/* Keduanya span di dalam span, jadi harus dijadikan blok sendiri agar
   bertumpuk dan potongan elipsisnya bekerja. */
.mrt-latin,.mrt-info{display:block}
.mrt-latin{font:600 13.5px/1.3 var(--font-judul,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrt-info{font-size:11px;color:var(--teks-lembut,#6F7B73);margin-top:1px}
.mrt-arab{flex:none;font-family:var(--font-arab,serif);font-size:19px;line-height:var(--tinggi-arab,1.9);
  color:var(--hijau,#0B5D3B);max-width:42%;text-align:end;direction:rtl}
html.dark .mrt-arab{color:#E4C96A}
.mrt-baris.aktif .mrt-arab{color:#8A6A12}
html.dark .mrt-baris.aktif .mrt-arab{color:#F1DA92}
.mrt-kosong{padding:26px 16px;text-align:center;font-size:13px;color:var(--teks-lembut,#6F7B73)}


/* ---------- dua kolom ---------- */
.mrt-isi{flex:1 1 auto;min-height:0;display:flex}
.mrt-kolom{width:318px;flex:none;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--garis,#E6DFCE);border-inline-end:1px solid var(--garis,#E6DFCE)}
html.dark .mrt-kolom{border-color:rgba(255,255,255,.1)}
.mrt-baca{--mrt-khat:var(--font-arab,serif);--mrt-tinggi:var(--tinggi-arab,2);
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0;
  background:var(--latar,#FBFAF6)}
html.dark .mrt-baca{background:rgba(255,255,255,.03)}

/* Layar sempit: satu kolom saja, bergantian. Kelas .baca dipasang skrip
   begitu sebuah suroh mulai diputar. */
.mrt-balik{display:none}
@media(max-width:760px){
  .mrt-kolom{width:100%;border:none}
  .mrt-baca{display:none}
  .mrt-panel.baca .mrt-kolom{display:none}
  .mrt-panel.baca .mrt-baca{display:flex}
  .mrt-balik{display:inline-block}
}

/* ---------- kepala kolom ayat ---------- */
.mrt-baca-kepala{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--garis,#E6DFCE);background:var(--permukaan,#fff)}
html.dark .mrt-baca-kepala{background:#0F1C16;border-color:rgba(255,255,255,.1)}
.mrt-balik{border:1px solid var(--garis,#E6DFCE);background:none;color:inherit;cursor:pointer;
  border-radius:9px;padding:6px 10px;font:600 12px var(--font-judul,system-ui)}
.mrt-baca-judul{min-width:0;flex:1;display:flex;align-items:baseline;gap:9px}
.mrt-baca-judul .nm{font:600 13.5px var(--font-judul,system-ui);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mrt-baca-judul .ar{flex:none;font-family:var(--mrt-khat);font-size:19px;
  line-height:var(--mrt-tinggi);color:var(--hijau,#0B5D3B)}
html.dark .mrt-baca-judul .ar{color:#E4C96A}
.mrt-alat{flex:none;display:flex;gap:5px}
.mrt-alat button{min-width:34px;height:30px;padding:0 8px;cursor:pointer;border-radius:9px;
  border:1px solid var(--garis,#E6DFCE);background:none;color:var(--teks-lembut,#6F7B73);
  font:600 11.5px var(--font-judul,system-ui)}
.mrt-alat button:hover{background:rgba(var(--hijau-rgb,11 93 59),.08);color:var(--hijau,#0B5D3B)}
.mrt-alat button[aria-pressed="true"]{background:var(--hijau,#0B5D3B);color:#fff;border-color:transparent}
html.dark .mrt-alat button{border-color:rgba(255,255,255,.16);color:#BFD6C8}

/* ---------- baris pengaturan tampilan ---------- */
.mrt-atur{flex:none;padding:10px 14px 12px;display:grid;gap:8px;
  border-bottom:1px solid var(--garis,#E6DFCE);background:var(--permukaan,#fff)}
html.dark .mrt-atur{background:#0F1C16;border-color:rgba(255,255,255,.1)}
.mrt-atur[hidden]{display:none}
.mrt-atur-baris{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:500 12.5px var(--font-badan,system-ui);color:var(--teks-lembut,#6F7B73)}
.mrt-atur select{flex:1;max-width:260px;border:1px solid var(--garis,#E6DFCE);border-radius:9px;
  padding:7px 9px;font:500 12.5px var(--font-badan,system-ui);
  background:var(--latar,#FBFAF6);color:var(--teks,#15241C)}
html.dark .mrt-atur select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#EFEADF}
.mrt-anak{display:inline-flex;align-items:center;gap:4px}
.mrt-anak b{min-width:26px;text-align:center;font:700 12.5px var(--font-judul,system-ui);
  color:var(--teks,#15241C);font-variant-numeric:tabular-nums}
html.dark .mrt-anak b{color:#EFEADF}
.mrt-atur button{min-width:30px;height:28px;padding:0 9px;cursor:pointer;border-radius:8px;
  border:1px solid var(--garis,#E6DFCE);background:none;color:var(--teks-lembut,#6F7B73);
  font:700 12.5px var(--font-judul,system-ui)}
.mrt-atur button:hover{background:rgba(var(--hijau-rgb,11 93 59),.08);color:var(--hijau,#0B5D3B)}
.mrt-atur button[aria-pressed="true"]{background:var(--hijau,#0B5D3B);color:#fff;border-color:transparent}
html.dark .mrt-atur button{border-color:rgba(255,255,255,.16);color:#BFD6C8}

/* ---------- daftar ayat ---------- */
.mrt-ayat{--mrt-ar:26px;--mrt-id:15px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 14px 22px;scroll-behavior:smooth}
.mrt-catatan{margin:4px 0 12px;font-size:11.5px;line-height:1.55;color:var(--teks-lembut,#6F7B73);
  padding:8px 11px;border-radius:9px;background:rgba(var(--emas-rgb,201 162 39),.13)}
.mrt-basmalah{margin:6px 0 16px;text-align:center;direction:rtl;
  font-family:var(--mrt-khat);font-size:calc(var(--mrt-ar) * .92);
  line-height:var(--mrt-tinggi);color:var(--hijau,#0B5D3B)}
html.dark .mrt-basmalah{color:#E4C96A}

.mrt-satu{display:block;width:100%;text-align:start;cursor:pointer;font:inherit;color:inherit;
  background:none;border:none;border-bottom:1px solid var(--garis,#E6DFCE);
  border-radius:10px;padding:12px 12px 14px;margin-bottom:2px}
html.dark .mrt-satu{border-color:rgba(255,255,255,.08)}
.mrt-satu:hover{background:rgba(var(--hijau-rgb,11 93 59),.05)}
.mrt-satu.kini{background:rgba(var(--emas-rgb,201 162 39),.15);
  box-shadow:inset 3px 0 0 var(--emas,#C9A227);border-bottom-color:transparent}
.mrt-satu .no{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;
  border-radius:8px;font:700 11px var(--font-judul,system-ui);
  background:rgba(var(--hijau-rgb,11 93 59),.1);color:var(--hijau,#0B5D3B)}
html.dark .mrt-satu .no{background:rgba(255,255,255,.09);color:#7FD3A8}
.mrt-satu.kini .no{background:var(--emas,#C9A227);color:#20160B}
.mrt-satu .ar{display:block;direction:rtl;text-align:right;margin:8px 0 0;
  font-family:var(--mrt-khat);font-size:var(--mrt-ar);line-height:var(--mrt-tinggi)}
.mrt-satu .lat{display:none;margin-top:7px;font-size:calc(var(--mrt-id) * .94);
  line-height:1.6;font-style:italic;color:var(--teks-lembut,#6F7B73)}
.mrt-ayat.pakai-latin .mrt-satu .lat{display:block}
.mrt-satu .id{display:block;margin-top:7px;font-size:var(--mrt-id);
  line-height:1.75;color:var(--teks,#15241C)}
html.dark .mrt-satu .id{color:#DCD6C8}

@media(prefers-reduced-motion:reduce){ .mrt-ayat{scroll-behavior:auto} }

/* ---------- tombol antrean ---------- */
.mrt-borong{flex:none;padding:10px 16px;border-top:1px solid var(--garis,#E6DFCE);display:flex;gap:8px}
html.dark .mrt-borong{border-color:rgba(255,255,255,.1)}
.mrt-borong button{flex:1;cursor:pointer;border-radius:11px;padding:10px;
  font:600 12.5px var(--font-judul,system-ui);border:1px solid var(--hijau,#0B5D3B);
  background:none;color:var(--hijau,#0B5D3B)}
.mrt-borong button:hover{background:rgba(var(--hijau-rgb,11 93 59),.08)}
.mrt-borong button.utama{background:var(--hijau,#0B5D3B);color:#fff;border-color:transparent}
.mrt-borong button.utama:hover{filter:brightness(1.08)}
html.dark .mrt-borong button{border-color:rgba(255,255,255,.25);color:#CFE8DA}
html.dark .mrt-borong button.utama{background:var(--hijau,#0B5D3B);color:#fff}

/* ---------- pemutar ---------- */
.mrt-pemutar{flex:none;padding:12px 16px 14px;color:#fff;
  background:linear-gradient(150deg,#07301F,#0B4B31);display:none}
.mrt-pemutar.tampil{display:block}
.mrt-judul{display:flex;align-items:baseline;gap:10px;min-width:0}
.mrt-judul .lat{font:600 13px var(--font-judul,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrt-judul .ar{margin-left:auto;margin-inline-start:auto;flex:none;font-family:var(--font-arab,serif);font-size:18px;
  color:var(--emas,#C9A227);direction:rtl}
.mrt-antre{font-size:11px;color:rgba(255,255,255,.66);margin-top:2px}
.mrt-garis{display:flex;align-items:center;gap:9px;margin-top:9px}
.mrt-waktu{flex:none;font:500 10.5px/1 var(--font-badan,system-ui);color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;min-width:34px}
.mrt-waktu.kanan{text-align:end}
.mrt-geser{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.22)}
.mrt-geser::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--emas,#C9A227);border:2px solid #07301F;cursor:pointer}
.mrt-geser::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--emas,#C9A227);border:2px solid #07301F;cursor:pointer}
.mrt-kendali{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.mrt-kendali button{width:38px;height:38px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff}
.mrt-kendali button:hover{background:rgba(255,255,255,.2)}
.mrt-kendali button.putar{width:48px;height:48px;background:var(--emas,#C9A227);color:#20160B;border-color:transparent}
.mrt-kendali button.putar:hover{filter:brightness(1.08)}
.mrt-kendali button[aria-pressed="true"]{background:var(--emas,#C9A227);color:#20160B;border-color:transparent}
.mrt-kendali .ulang{position:relative;font:700 9px var(--font-judul,system-ui)}
.mrt-kendali .ulang span{position:absolute;inset-block-end:5px;inset-inline-end:7px}
.mrt-pesan{margin-top:9px;font-size:11.5px;line-height:1.5;padding:8px 10px;border-radius:9px;
  background:rgba(220,110,60,.22);border:1px solid rgba(240,150,100,.45);color:#FFE2D2;display:none}
.mrt-pesan.tampil{display:block}

/* Tombol pengapung ikut berdenyut selagi murottal berjalan, supaya terlihat
   dari mana suaranya ketika panel sedang tertutup. */
#tombol-murottal.mrt-berbunyi{box-shadow:0 0 0 0 rgba(var(--emas-rgb,201 162 39),.6);
  animation:mrt-denyut 2.1s ease-out infinite}
@keyframes mrt-denyut{
  70%{box-shadow:0 0 0 13px rgba(var(--emas-rgb,201 162 39),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--emas-rgb,201 162 39),0)}
}

@media(prefers-reduced-motion:reduce){
  .mrt-panel,.mrt-tirai{transition:none}
  #tombol-murottal.mrt-berbunyi{animation:none}
}
@media print{ .mrt-panel,.mrt-tirai{display:none!important} }