/* =============================================================================
 * SOBAT NGAJI — custom.css
 * -----------------------------------------------------------------------------
 * Hanya berisi hal-hal yang tidak praktis (atau tidak bisa) dibuat
 * pakai utility Tailwind: animasi kustom, scrollbar, safe-area, dsb.
 *
 * TEMA: "Masjid Langit" — biru langit + putih + biru sangat muda,
 * judul navy tua, aksen cyan tipis. Hijau sudah tidak dipakai lagi.
 *
 * Cara membaca warna di file ini:
 *   #eff6ff / #dbeafe / #bfdbfe / #93c5fd  → biru 50/100/200/300 (muda)
 *   #60a5fa / #3b82f6 / #2563eb            → biru 400/500/600 (utama)
 *   #1d4ed8 / #1e40af / #1e3a8a            → biru 700/800/900 (navy)
 *   #0f172a / #475569 / #94a3b8            → teks utama / pendukung / redup
 * Angka-angka ini sama persis dengan palet "brand" di index.html,
 * supaya CSS dan kelas Tailwind tidak pernah berbeda warna.
 * ========================================================================== */

/* ------------------------------------------------------------- DASAR HALAMAN --- */

html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* Layar (login / admin / listener) */
.sn-screen {
  min-height: 100%;
}

/* Cegah teks ter-select saat menekan tombol panjang di HP */
button, .sn-noselect {
  -webkit-user-select: none;
  user-select: none;
}

/* Safe area iPhone/Android (notch & gesture bar) */
.sn-safe-b { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.sn-safe-t { padding-top: calc(0.75rem + env(safe-area-inset-top)); }

/* --------------------------------------------------------------- SCROLLBAR --- */

.sn-scroll::-webkit-scrollbar { width: 6px; }
.sn-scroll::-webkit-scrollbar-track { background: transparent; }
.sn-scroll::-webkit-scrollbar-thumb {
  background: #bfdbfe;
  border-radius: 999px;
}
.sn-scroll::-webkit-scrollbar-thumb:hover { background: #93c5fd; }

/* ------------------------------------------------------------------- TOAST --- */

.sn-toast {
  animation: sn-toast-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  max-width: 26rem;
}
.sn-toast-out {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@keyframes sn-toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------- ORB / VISUALIZER --- */

/* Lingkaran biru besar di panel jamaah */
.sn-orb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
  width: 9rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 18px 40px -12px rgba(37, 99, 235, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Orb "berdenyut" saat ada suara */
.sn-orb.is-live {
  animation: sn-orb-breathe 2.4s ease-in-out infinite;
}
@keyframes sn-orb-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 18px 40px -12px rgba(37, 99, 235, 0.55); }
  50%      { transform: scale(1.045); box-shadow: 0 22px 52px -12px rgba(37, 99, 235, 0.7); }
}

/* Gelombang keluar dari orb */
.sn-orb-ring {
  position: absolute;
  z-index: 1;
  height: 9rem;
  width: 9rem;
  border-radius: 9999px;
  border: 2px solid rgba(59, 130, 246, 0.45);
  opacity: 0;
  pointer-events: none;
}
.sn-orb-ring.is-live {
  animation: sn-orb-ripple 2.6s ease-out infinite;
}
@keyframes sn-orb-ripple {
  0%   { transform: scale(1);    opacity: 0.65; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ------------------------------------------------------------- MIC BUTTON --- */
.sn-mic-btn { cursor: pointer; }
.sn-mic-btn.is-on {
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 14px 32px -12px rgba(37, 99, 235, 0.7);
}
.sn-mic-btn.is-muted {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 14px 32px -12px rgba(217, 119, 6, 0.6);
}

/* Cincin denyut di sekitar tombol mic saat aktif */
.sn-mic-ring {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(59, 130, 246, 0.5);
  opacity: 0;
  pointer-events: none;
}
.sn-mic-btn.is-on .sn-mic-ring {
  animation: sn-orb-ripple 2.2s ease-out infinite;
}

/* -------------------------------------------------------------- LEVEL BAR --- */

/* Bar volume: lebar diatur lewat JS, transisi halus biar tidak "gemetar" */
.sn-level-fill {
  min-width: 0;
  will-change: width;
}
.sn-level-fill.is-hot { background: #f59e0b; }

/* ------------------------------------------------------------ KARTU PESERTA --- */

.sn-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sn-avatar.is-speaking {
  background: #2563eb;
  color: #ffffff;
}
.sn-avatar.is-hand {
  background: #fef3c7;
  color: #b45309;
}

/* Kalau jamaah sudah memasang foto, inisialnya diganti fotonya.
   overflow:hidden + border-radius di <img> supaya tetap bulat rapi. */
.sn-avatar.has-foto {
  padding: 0;
  overflow: hidden;
  background: #e2e8f0;
}
.sn-avatar.has-foto img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* ------------------------------------------------- TOMBOL FOTO PROFIL (JAMAAH) ---
 * Tombol bulat di header panel Jamaah. Mula-mula menampilkan inisial nama;
 * begitu jamaah memasang foto, inisialnya diganti fotonya.
 * ---------------------------------------------------------------------------- */

.sn-avatar-btn {
  position: relative;
  flex-shrink: 0;
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #bfdbfe;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sn-avatar-btn:active { transform: scale(0.94); }
.sn-avatar-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #60a5fa; }

.sn-avatar-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sn-avatar-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* Lencana kamera kecil di pojok kanan bawah — tanda tombolnya bisa diketuk.
   Sengaja TIDAK memakai overflow:hidden di tombolnya, supaya lencana ini
   boleh sedikit keluar dari lingkaran. */
.sn-avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.05rem;
  width: 1.05rem;
  border-radius: 9999px;
  background: #1d4ed8;
  color: #ffffff;
  border: 1.5px solid #ffffff;
}
.sn-avatar-cam svg { height: 0.6rem; width: 0.6rem; }

/* Kartu yang baru muncul diberi animasi masuk */
.sn-card-in {
  animation: sn-card-in 0.22s ease-out;
}
@keyframes sn-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================= LAYAR YOUTUBE ===
 * Panel siaran YouTube di sisi Jamaah.
 *
 * Catatan penting soal layar penuh:
 *   Tombol fullscreen bawaan YouTube sengaja dimatikan (fs=0 di youtube.js)
 *   karena Capacitor memblokir fullscreen di WebView Android —
 *   BridgeWebChromeClient.onShowCustomView() langsung memanggil
 *   callback.onCustomViewHidden(), jadi tombol itu pasti jadi tombol mati.
 *   Layar penuh di sini dikerjakan sendiri pakai CSS: panel dijadikan
 *   position:fixed sebesar layar, dan tombol mic bundar tetap di atasnya.
 * ============================================================================ */

.sn-video-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  background: #0f172a;
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.55);
}

/* Panggung tempat iframe YouTube diletakkan */
.sn-video-stage { position: absolute; inset: 0; }
.sn-video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Penanda keadaan (kiri atas)
 *
 * Susunan lapisan di dalam panel video — sengaja berurutan begini:
 *   1  iframe YouTube
 *   5  panel pengganti (menutupi video)
 *   6  penanda keadaan  ← harus DI ATAS panel pengganti, jangan sampai ikut gelap
 *   7  tombol kanan atas ← idem; kalau di bawah, tombol jadi tidak bisa ditekan
 *      saat siaran tidak bisa diputar (kejadian nyata: tombol tertutup overlay).
 */
.sn-video-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.25rem 0.6rem;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.sn-video-badge[data-state="main"] { background: #dc2626; color: #ffffff; }
/* Titik merah berkedip saat benar-benar sedang live */
.sn-video-badge[data-state="main"]::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #ffffff;
  animation: sn-live-blink 1.4s ease-in-out infinite;
}
@keyframes sn-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
.sn-video-badge[data-state="error"] { background: #7f1d1d; color: #fecaca; }

/* Tombol kanan atas — lihat catatan susunan lapisan di .sn-video-badge */
.sn-video-tools {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 7;
  display: flex;
  gap: 0.375rem;
}
.sn-video-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, background 0.2s ease;
}
.sn-video-tool:active { transform: scale(0.92); }
/* Tombol sumber suara berwarna merah YouTube saat sedang memakai suara YouTube */
.sn-video-tool[data-src="youtube"] { background: #dc2626; }

/* Panel pengganti kalau siaran belum mulai / tidak bisa diputar */
.sn-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  background: rgba(2, 6, 23, 0.94);
}
.sn-video-fallback-btn {
  border: 0;
  border-radius: 0.75rem;
  padding: 0.45rem 0.85rem;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.2s ease;
}
.sn-video-fallback-btn:active { transform: scale(0.96); }
.sn-video-fallback-btn.is-ghost { background: rgba(255, 255, 255, 0.16); color: #e2e8f0; }

/* --- Layar penuh versi CSS --- */
.sn-video-panel.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Di layar penuh, video JANGAN dipaksa memenuhi tinggi layar.
 *
 * Kalau iframe dipaksa 100% x 100%, di HP yang tegak (portrait) gambar 16:9
 * akan tertarik memanjang — orangnya jadi kelihatan kurus. Jadi lebarnya
 * dibatasi: mana yang lebih kecil antara lebar layar dan (tinggi layar × 16/9).
 * Sisanya jadi garis hitam di atas-bawah, persis seperti pemutar video biasa.
 *
 * Rumusnya: width = min(100%, 100vh * 16/9)
 *   HP tegak   400 x 860 → 400 px  (garis hitam atas-bawah)
 *   HP melintang 860 x 400 → 711 px (memenuhi layar, tanpa garis hitam)
 */
.sn-video-panel.is-fullscreen .sn-video-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-video-panel.is-fullscreen .sn-video-stage iframe {
  position: static;
  width: min(100%, calc(100vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Cegah halaman di belakang ikut ter-scroll saat video layar penuh */
body.sn-fs-lock { overflow: hidden; }

/* ========================================================== TOMBOL MIC (FAB) ===
 * Tombol bundar kanan bawah: angkat tangan → menunggu → bicara → selesai.
 * Dibuat position:fixed supaya tetap terlihat saat video layar penuh.
 * ============================================================================ */

.sn-fab-wrap {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 90;                       /* di atas panel video layar penuh (80) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Jarak ke tombol mic bundar sengaja dilebihkan (bukan 0,5rem).
     Keterangan di atasnya berbentuk pil yang lebar; kalau terlalu dekat,
     ujung kirinya menimpa sudut kanan tombol "Keluar" di bar bawah dan
     kelihatan seperti salah tata letak. */
  gap: 2rem;
  pointer-events: none;              /* jangan menutupi tombol di belakangnya */
}
.sn-fab-wrap > * { pointer-events: auto; }

/* Keterangan kecil di atas tombol */
.sn-fab-hint {
  max-width: 11rem;
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  background: rgba(15, 23, 42, 0.82);
  color: #f1f5f9;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  backdrop-filter: blur(4px);
}

/* Keterangan ini BUKAN tombol — jangan sekali-kali menangkap klik.
 * Karena bentuknya lebar (11rem), ujung kirinya menimpa bagian kanan tombol
 * "Keluar" di bar bawah. Kalau ia menerima klik, bagian tombol itu jadi mati
 * tanpa sebab yang kelihatan — persis seperti masalah notifikasi yang dulu
 * pernah terjadi. Jadi: tampil saja, jangan bisa ditekan.
 */
.sn-fab-wrap > .sn-fab-hint { pointer-events: none; }

.sn-fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 16px 34px -12px rgba(37, 99, 235, 0.75);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sn-fab:active { transform: scale(0.93); }
/* Menunggu izin penyiar */
.sn-fab[data-state="waiting"] {
  background: linear-gradient(145deg, #fbbf24 0%, #b45309 100%);
  box-shadow: 0 16px 34px -12px rgba(180, 83, 9, 0.7);
}
/* Mikrofon aktif */
.sn-fab[data-state="speaking"] {
  background: linear-gradient(145deg, #3b82f6 0%, #1e40af 100%);
}
/* Tanya jawab tidak tersedia (token RTM belum diisi) */
.sn-fab[data-state="locked"] {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
}

.sn-fab-icon { position: relative; z-index: 2; display: flex; }
.sn-fab-icon svg { height: 1.75rem; width: 1.75rem; }

/* Cincin gelombang keluar dari tombol */
.sn-fab-ring {
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.sn-fab[data-state="speaking"] .sn-fab-ring,
.sn-fab[data-state="waiting"] .sn-fab-ring {
  animation: sn-orb-ripple 2s ease-out infinite;
}

/* Versi kecil orb (karena layar sudah dipakai panel video) */
.sn-orb-sm { height: 6rem; width: 6rem; }
.sn-orb-ring-sm { height: 6rem; width: 6rem; }

/* ------------------------------------------------------------------ MISC --- */

/* Matikan pemilihan teks di seluruh panel admin saat banyak klik */
#screen-admin, #screen-listener { -webkit-user-select: none; user-select: none; }
input, select { -webkit-user-select: auto; user-select: auto; }

/* ============================================================================
 * ============================ TATA LETAK RESPONSIF ==========================
 * ----------------------------------------------------------------------------
 * Satu aturan besar untuk semua ukuran layar: HP kecil, iPhone (termasuk
 * notch & bilah alamat), tablet, dan laptop. Semua di satu tempat supaya
 * gampang dicari — index.html cukup memakai nama kelasnya saja.
 * ========================================================================== */

/* --- Tinggi layar yang BENAR di iPhone ------------------------------------
 * 100vh di Safari iPhone mengabaikan tinggi bilah alamat, jadi halaman
 * terlihat terpotong dan muncul scrollbar yang tidak perlu.
 * 100dvh mengikuti tinggi layar yang benar-benar terlihat.
 * Dua baris: kalau 100dvh belum dikenal, baris 100vh di atasnya tetap dipakai.
 */
.sn-minh {
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Notch kiri-kanan (ponsel melintang) ----------------------------------
 * Ditaruh di <body>, bukan di masing-masing panel, supaya tidak berkelahi
 * dengan utility px-* Tailwind di dalamnya. Nilainya 0 di semua perangkat
 * yang tidak punya notch, jadi tidak mengubah apa pun di sana.
 */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* --- Lebar satu kolom isi --------------------------------------------------
 * Dipakai bersama oleh header, panel video, area utama, dan bar bawah panel
 * Jamaah — jadi semuanya selalu sejajar, di ukuran layar apa pun.
 *   HP                   28rem = 448px  (sama seperti desain aslinya)
 *   Tablet               34rem = 544px
 *   Laptop               40rem = 640px
 *   Laptop lebar / besar 48rem = 768px
 * Tangganya dibuat bertahap supaya tidak ada lompatan lebar yang mencolok.
 */
:root { --sn-col: 28rem; }
@media (min-width: 768px)  { :root { --sn-col: 34rem; } }
@media (min-width: 1024px) { :root { --sn-col: 40rem; } }
@media (min-width: 1366px) { :root { --sn-col: 48rem; } }

.sn-col {
  width: 100%;
  max-width: var(--sn-col);
  margin-left: auto;
  margin-right: auto;
}

/* --- Tombol mic bundar menempel tepi KOLOM, bukan tepi layar --------------
 * Karena position:fixed, tombol itu menempel ke tepi layar. Di laptop kolom
 * isi cuma 640px di tengah, jadi tombolnya melayang jauh di pojok kanan bawah
 * dan tidak terlihat berhubungan dengan isinya.
 * Rumusnya: geser sejauh setengah sisa ruang di luar kolom.
 * max(...) menjaga jarak minimal 1,25rem — di HP hasilnya tidak berubah.
 */
.sn-fab-wrap {
  right: max(1.25rem, calc((100% - var(--sn-col)) / 2 + 1.25rem));
}

/* ============================== LAYAR LOGIN ================================
 * HP & tablet → satu kolom di tengah.
 * Laptop ke atas → DUA kolom: merek di kiri, form di kanan. Form tetap
 * selebar 24rem supaya barisnya tidak terlalu panjang dibaca.
 */
.sn-login-grid {
  display: grid;
  width: 100%;
  max-width: var(--sn-col);
  /* margin:auto (bukan justify-content:center) SENGAJA dipakai di sini.
     justify-content:center pada flex column memotong bagian ATAS halaman
     kalau isinya lebih tinggi daripada layar — dan bagian itu tidak bisa
     di-scroll. Auto-margin memberi hasil visual yang sama tapi aman. */
  margin: auto;
}

/* Kartu form di layar login. Tanpa batas lebar, di laptop ia ikut melebar
   mengikuti kolom dan barisnya jadi terlalu panjang untuk dibaca. */
.sn-login-col {
  width: 100%;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .sn-login-grid {
    /* Dua kolom: panel merek boleh melebar, kartu form tetap 24rem.
       Sebelumnya 58rem — di 1440px itu membuat seluruh isi terdorong ke
       kanan dan menyisakan ruang kosong besar di kiri. 62rem membuat
       kedua kolom benar-benar seimbang di tengah. */
    grid-template-columns: minmax(0, 1fr) 24rem;
    max-width: 62rem;
    column-gap: 3rem;
    /* Rata-atas, BUKAN rata-tengah: kolom kanan berisi foto profil + kartu +
       tiga keterangan (lebih tinggi daripada panel merek). Kalau dipaksa
       rata-tengah, panel merek melayang turun dan terlihat tidak sejajar
       dengan kartu form di sebelahnya. */
    align-items: start;
  }

  /* Supaya panel merek tidak menempel ke langit-langit: ia diberi jarak
     atas sebesar tinggi blok foto profil di kolom kanan, sehingga tepi atas
     kedua kolom kelihatan sejajar. */
  .sn-login-grid .sn-login-brand { margin-top: 0; }
  /* Kartu form tetap di kolom kanannya, tidak melebar */
  .sn-login-grid .sn-login-col { max-width: none; margin: 0; }

  /* Merek jadi rata kiri di panelnya sendiri */
  .sn-login-grid .sn-login-brand {
    margin-bottom: 0;
    padding: 2.5rem 2.25rem;
    text-align: left;
    border: 1px solid #bfdbfe;
    border-radius: 2rem;
    background: linear-gradient(155deg, #eff6ff 0%, #dbeafe 100%);
  }
  .sn-login-grid .sn-login-logo { margin-left: 0; margin-right: 0; }
  .sn-login-grid .sn-login-brand h1 { font-size: 2.5rem; line-height: 1.15; }
  .sn-login-grid .sn-login-brand p { font-size: 0.9375rem; line-height: 1.6; }

  /* Ketiga keterangan fitur: di laptop ditumpuk ke bawah di kolom kanan,
     bukan dijejerkan tiga-tiga — di lebar 24rem, tiga kolom membuat
     judulnya terpotong ("Dengarkan / Kajian" jadi dua baris). */
  .sn-login-col .sn-features { grid-template-columns: minmax(0, 1fr); }
  .sn-login-col .sn-feature { flex-direction: row; align-items: center; gap: 0.7rem; }
}

/* ========================= PANEL JAMAAH — PONSEL MELINTANG =================
 * .sn-listener-body membungkus panel video + area utama. Di posisi tegak ia
 * hanya meneruskan tata letak lama (kolom, dengan area utama mengisi sisa
 * ruang). Yang berubah hanya saat ponsel melintang.
 *
 * Kalau isinya tetap ditumpuk seperti biasa (header → video → orb → bar bawah),
 * tinggi totalnya melebihi layar. Karena bar bawah memakai position:sticky,
 * tombol "Keluar" dan tombol mic terdorong keluar layar dan tidak bisa dipakai.
 * Solusinya sama seperti pemutar video pada umumnya: video di KIRI, kontrol
 * di KANAN.
 */
.sn-listener-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

@media (orientation: landscape) and (max-height: 620px) {
  .sn-listener-body {
    flex-direction: row;
    align-items: stretch;
  }

  /* Sisi kiri: video. Tingginya diatur oleh tinggi layar, bukan lebar. */
  .sn-listener-body > #listener-video-wrap {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
  }
  .sn-listener-body #listener-video-panel {
    width: auto;
    height: 100%;
    min-height: 8rem;      /* jaring pengaman kalau height:100% gagal dihitung */
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0.75rem;
  }
  /* Catatan kecil di bawah video tidak penting saat melintang */
  .sn-listener-body #listener-video-note { display: none; }

  /* Sisi kanan: orb + status + kartu mikrofon */
  .sn-listener-body > #listener-main {
    flex: 1 1 40%;
    gap: 0.75rem;
    max-width: none;
    margin: 0;
    padding: 0.75rem 1rem;
  }
  .sn-listener-body #listener-orb,
  .sn-listener-body #listener-orb-ring { height: 4.5rem; width: 4.5rem; }
  .sn-listener-body #listener-orb svg { height: 2rem; width: 2rem; }
  .sn-listener-body #listener-status { font-size: 1rem; }
  .sn-listener-body #listener-sub { font-size: 0.8125rem; line-height: 1.35; }
  .sn-listener-body #listener-uid { display: none; }

  /* Bar bawah diringkas supaya tidak memakan tinggi layar */
  .sn-listener-bottom {
    padding-top: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
  .sn-listener-bottom #listener-btn-leave { height: 2.75rem; }
  .sn-listener-bottom #listener-hand-hint { display: none; }

  /* Tombol mic bundar ikut mengecil dan merapat ke sudut */
  .sn-fab-wrap {
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
  .sn-fab { height: 3.25rem; width: 3.25rem; }
  .sn-fab-icon svg { height: 1.4rem; width: 1.4rem; }
  .sn-fab-hint { display: none; }
}

/* --- Perataan aman di area utama panel Jamaah ------------------------------
 * justify-center memotong bagian atas kalau isinya lebih tinggi daripada
 * wadahnya. "safe center" merosot jadi rata-atas begitu tidak muat.
 * Kalau peramban belum mengenal "safe center", baris ini diabaikan dan
 * justify-center dari Tailwind tetap dipakai — jadi tidak ada yang rusak.
 */
#listener-main { justify-content: safe center; }

/* Hormati preferensi "kurangi animasi" */
@media (prefers-reduced-motion: reduce) {
  .sn-orb, .sn-orb-ring, .sn-mic-ring, .sn-toast, .sn-card-in,
  .sn-fab-ring, .sn-video-badge::before, .sn-cloud { animation: none !important; }
}

/* ============================================================================
 * =================== SISTEM DESAIN "MASJID LANGIT" ==========================
 * ----------------------------------------------------------------------------
 * Dipakai oleh layar login (dan sebagian oleh panel Penyiar & Jamaah).
 *
 * Kenapa dibuat kelas sendiri, bukan menumpuk utility Tailwind?
 *   Karena beberapa efek di sini (kaca, gelombang, pola geometris) butuh
 *   lebih dari satu properti sekaligus, dan menuliskannya berulang di HTML
 *   membuat index.html sulit dibaca.
 *
 * Catatan: seluruh ukuran tombol di layar login minimal 3rem (48px) —
 * standar sentuh yang nyaman untuk jempol.
 * ========================================================================== */

/* --- Latar "Masjid Langit" -------------------------------------------------
 * Gradasi putih → biru sangat muda. Dipasang sebagai latar bagian login,
 * bukan <body>, supaya panel admin/jamaah tidak ikut berubah.
 */
.sn-sky {
  position: relative;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f8ff 34%, #e6f1ff 70%, #dbeafe 100%);
}

/* Awan tipis — dua bulatan besar yang sangat kabur.
   Dibuat dengan radial-gradient, bukan berkas gambar, supaya APK tetap kecil
   dan tidak ada permintaan HTTP tambahan saat aplikasi dibuka.
   opacity dijaga di bawah 0.5 — brief meminta "very subtle". */
.sn-sky::before,
.sn-sky::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
}
.sn-sky::before {
  top: -6rem; right: -5rem;
  height: 22rem; width: 30rem;
  opacity: 0.9;
}
.sn-sky::after {
  top: 14rem; left: -8rem;
  height: 20rem; width: 28rem;
  opacity: 0.7;
}

/* Pola geometris islami — bintang delapan, sangat samar.
   Ditaruh di lapisan paling belakang (z-index 0) dan tidak bisa ditekan. */
.sn-sky-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%232563eb' stroke-width='0.85' opacity='0.14'%3E%3Crect x='18' y='18' width='48' height='48'/%3E%3Crect x='18' y='18' width='48' height='48' transform='rotate(45 42 42)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 84px 84px;
}

/* Semua isi login harus DI ATAS awan & pola */
.sn-login-topbar,
.sn-login-grid,
.sn-footer { position: relative; z-index: 1; }

/* --- Baris atas: tombol kembali & bantuan --------------------------------- */
.sn-login-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: env(safe-area-inset-top);
  margin-bottom: 0.5rem;
}

/* Di layar lebar, baris tombol atas harus sejajar dengan kolom isi di
   bawahnya — kalau tidak, tombolnya kelihatan melayang sendiri di langit. */
@media (min-width: 1024px) {
  .sn-login-topbar { max-width: 62rem; margin-left: auto; margin-right: auto; }
}

.sn-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;                       /* 44px — standar tombol ikon */
  width: 2.75rem;
  flex-shrink: 0;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.15s ease;
}
.sn-icon-btn svg { height: 1.25rem; width: 1.25rem; }
.sn-icon-btn:active { transform: scale(0.92); }
.sn-icon-btn:hover { background: #ffffff; }

/* --- Foto profil di layar login -------------------------------------------
 * Tombolnya TIDAK memakai overflow:hidden supaya lencana kamera di pojok
 * kanan bawah boleh sedikit keluar dari bulatannya.
 * Yang dipotong bulat adalah .sn-photo-frame di dalamnya.
 */
.sn-login-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.25rem;
}

.sn-photo-btn {
  position: relative;
  display: block;
  height: 5.5rem;
  width: 5.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.sn-photo-btn:active { transform: scale(0.95); }
.sn-photo-btn:focus-visible { outline: none; }
.sn-photo-btn:focus-visible .sn-photo-frame {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #60a5fa;
}

/* Kotak membulat (rounded-square) tempat foto & inisial tinggal.
   Foto apa pun dipaksa jadi persegi lewat object-fit:cover → tidak gepeng. */
.sn-photo-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1.6rem;
  background: linear-gradient(150deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #bfdbfe, 0 10px 24px -12px rgba(30, 58, 138, 0.45);
  transition: box-shadow 0.15s ease;
}

.sn-photo-initial {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1d4ed8;
}

.sn-photo-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Lencana kamera — tanda bahwa gambarnya bisa diketuk */
.sn-photo-cam {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.9);
}
.sn-photo-cam svg { height: 0.85rem; width: 0.85rem; }

.sn-photo-hint {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
}

/* Tombol "Hapus foto" — hanya muncul kalau sudah ada foto */
.sn-photo-remove {
  margin-top: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 9999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sn-photo-remove:hover { background: #fecaca; }

/* --- Kartu utama (kaca) ---------------------------------------------------- */
.sn-glass {
  border: 1px solid rgba(191, 219, 254, 0.85);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -18px rgba(30, 58, 138, 0.42);
}

.sn-login-card {
  border-radius: 1.75rem;
  padding: 1.35rem 1.25rem;
}

.sn-card-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1e3a8a;
}
.sn-card-sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #64748b;
}

/* --- Label, input, helper -------------------------------------------------- */
.sn-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

/* Input: tinggi 3.25rem (52px) — cukup besar untuk jempol, dan tetap
   nyaman kalau papan ketik HP muncul. */
.sn-input {
  width: 100%;
  min-height: 3.25rem;
  border: 1.5px solid #dbeafe;
  border-radius: 1rem;
  background: #f8fbff;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sn-input::placeholder { color: #94a3b8; }
.sn-input:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}

/* Awalan "#" di depan kode kajian */
.sn-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 0.9rem;
  border-radius: 1rem;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.9375rem;
  font-weight: 800;
}

.sn-helper {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #94a3b8;
}

.sn-link {
  border: none;
  background: none;
  padding: 0.25rem 0;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Tombol utama & sekunder ---------------------------------------------- */
.sn-btn-primary,
.sn-btn-secondary {
  display: flex;
  width: 100%;
  min-height: 3.5rem;                    /* 56px — tombol utama */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.sn-btn-primary:active,
.sn-btn-secondary:active { transform: scale(0.98); }

.sn-btn-primary {
  border: none;
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(29, 78, 216, 0.7);
}
.sn-btn-primary:hover { background: linear-gradient(145deg, #2563eb 0%, #1e3a8a 100%); }
.sn-btn-primary:disabled { cursor: not-allowed; background: #cbd5e1; box-shadow: none; }

/* Sekunder: sengaja jauh lebih redup — ini yang membuat jamaah jadi
   pilihan yang paling menonjol, sesuai brief. */
.sn-btn-secondary {
  border: 1.5px solid #dbeafe;
  background: rgba(255, 255, 255, 0.7);
  color: #1d4ed8;
}
.sn-btn-secondary:hover { background: #eff6ff; border-color: #bfdbfe; }
.sn-btn-secondary:disabled { cursor: not-allowed; color: #94a3b8; border-color: #e2e8f0; }

/* --- Tiga keterangan fitur ------------------------------------------------- */
.sn-features {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.sn-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(219, 234, 254, 0.9);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
  padding: 0.6rem 0.8rem;
}

.sn-feature-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: #eff6ff;
  color: #2563eb;
}
.sn-feature-ic svg { height: 1.05rem; width: 1.05rem; }

.sn-feature-tx {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e3a8a;
}
/* Baris kedua tiap fitur dibuat lebih kecil & lebih redup */
.sn-feature-tx span {
  display: block;
  font-size: 0.6563rem;
  font-weight: 500;
  color: #94a3b8;
}

/* Di layar lebar ketiganya boleh sejajar ke samping */
@media (min-width: 768px) {
  .sn-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sn-feature { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* --- Kaki halaman + gelombang --------------------------------------------- */
.sn-footer {
  position: relative;
  margin-top: 2rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  text-align: center;
}

.sn-footer-wave {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  max-width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.sn-footer-wave svg { display: block; width: 100%; height: 4rem; }

.sn-footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding-top: 1.75rem;
}
.sn-footer-inner img { opacity: 0.85; }

.sn-footer-name {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1e40af;
}
.sn-footer-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
}

/* --- Layar pendek: rapatkan supaya CTA tetap terlihat ---------------------
 * Diukur, bukan dikira-kira (lihat .verify/_ukur-login.mjs):
 *   HP 375x667 dan 360x740 → tinggi halaman 1255-1317px, jauh melebihi layar,
 *   sehingga tombol "Gabung sebagai Jamaah" jatuh di bawah lipatan dan harus
 *   di-scroll dulu. Brief meminta CTA utama mudah dijangkau, jadi ini cacat.
 *
 * Yang dikorbankan lebih dulu adalah HIASAN (ukuran foto, jarak, gelombang),
 * BUKAN tombolnya. Tiga tingkat, makin pendek makin rapat.
 */
@media (max-height: 780px) {
  .sn-login-photo { margin-bottom: 0.8rem; }
  .sn-photo-btn { height: 4.5rem; width: 4.5rem; }
  .sn-photo-frame { border-radius: 1.3rem; }
  .sn-login-card { padding: 1.1rem 1.05rem; }
  .sn-features { margin-top: 0.85rem; gap: 0.4rem; }
  .sn-feature { padding: 0.5rem 0.7rem; }
  .sn-footer { margin-top: 1.1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .sn-footer-inner { padding-top: 1.1rem; }
  .sn-login-grid .sn-login-brand { margin-bottom: 1rem; }
}

/* --- Layar sedang (tablet & laptop rendah): rapatkan supaya kaki halaman
 * ikut terlihat tanpa scroll. Diukur: tablet 820x1180 dan laptop 1440x900
 * tadinya 1334px / 1072px, sehingga kaki halamannya selalu di bawah lipatan.
 */
@media (min-width: 1024px) and (max-height: 1000px) {
  .sn-login-wrap { padding-top: 1rem; padding-bottom: 1rem; }
  .sn-login-grid .sn-login-brand { padding: 1.9rem 1.9rem; }
  .sn-login-grid .sn-login-brand h1 { font-size: 2.1rem; }
  .sn-login-logo { height: 4rem; width: 4rem; }
  .sn-login-photo { margin-bottom: 1rem; }
  .sn-photo-btn { height: 5rem; width: 5rem; }
  .sn-login-card { padding: 1.25rem 1.15rem; }
  .sn-features { margin-top: 1rem; gap: 0.4rem; }
  .sn-feature { padding: 0.5rem 0.7rem; }
  .sn-footer { margin-top: 1.1rem; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
  .sn-footer-inner { padding-top: 1.1rem; }
  .sn-footer-wave svg { height: 3rem; }
}
@media (max-height: 740px) {
  /* Merek masih penting, tapi tidak perlu setinggi itu */
  .sn-brand-nama { font-size: 1.65rem; }
  .sn-brand-logo { height: 3.5rem; width: 3.5rem; }
  .sn-brand { margin-bottom: 0.85rem; }
  .sn-brand-tagline { margin-top: 0.35rem; }
  .sn-photo-btn { height: 4rem; width: 4rem; }
  .sn-photo-frame { border-radius: 1.15rem; }
  .sn-photo-initial { font-size: 1.25rem; }
  .sn-photo-cam { height: 1.5rem; width: 1.5rem; }
  .sn-photo-hint { margin-top: 0.3rem; }
  .sn-input { min-height: 3rem; }
  .sn-prefix { min-height: 3rem; }
  .sn-btn-primary, .sn-btn-secondary { min-height: 3.15rem; }
  .sn-features { margin-top: 0.7rem; }
  .sn-footer { margin-top: 0.85rem; }
  .sn-footer-wave svg { height: 3rem; }
  .sn-footer-tag { display: none; }
}
@media (max-height: 700px) {
  /* Di level paling pendek, hiasan boleh hilang — fungsinya tidak ada. */
  .sn-features { display: none; }
  .sn-photo-hint { display: none; }
  .sn-brand-tagline { display: none; }
  .sn-login-card .sn-card-sub { display: none; }
  .sn-footer-name { display: none; }
  .sn-footer { margin-top: 0.5rem; }
}