/* ============================================================
   eQuran — Navigasi Utama (v2)                         [AUDIT 14 Okt 2026]
   ------------------------------------------------------------
   Satu markup <nav class="site-nav">, dua tata letak:
   - HP / tablet kecil (< 768px) : Bottom Navigation Bar (zona jempol)
       5 tujuan: Qur'an · Dzikir · Doa · Murottal · Lainnya
   - Desktop (>= 768px)          : strip tautan horizontal di bawah header
       Qur'an · Dzikir · Doa · Murottal · Asmaul Husna · Surat Pilihan

   Hanya dipasang di halaman "hub" (beranda, doa, asmaul husna, surat pilihan).
   Halaman baca (surah, juz, dzikir, pilihan-surat) sengaja TIDAK memakai bar
   bawah: layarnya dipakai penuh untuk teks ayat & kartu audio.
   Memakai variabel warna style.css, jadi mode gelap otomatis ikut.
   ============================================================ */

:root{ --bn-h: 64px; }

/* ---------- Skip link (aksesibilitas keyboard / pembaca layar) ---------- */
.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--primary-strong); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-s);
  font: 600 .9rem/1.2 var(--font-ui); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus{ top: 10px; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Dasar ---------- */
.site-nav{ font-family: var(--font-ui); }
.site-nav-list{ list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav-list > li{ display: flex; }
.sn-item{
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  font: inherit; color: var(--text-muted); text-decoration: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.sn-item svg{ width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sn-item:focus-visible{ outline: 2px solid var(--primary-strong); outline-offset: -3px; border-radius: 12px; }

/* ============================================================
   MOBILE  (< 768px) — Bottom Navigation
   ============================================================ */
@media (max-width: 767.98px){
  .site-nav{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 18px -12px rgba(58,54,47,.28);
    transition: transform .2s ease;
  }
  .site-nav-list{ height: var(--bn-h); max-width: 560px; margin: 0 auto; }
  .site-nav-list > li{ flex: 1 1 0; min-width: 0; }
  .site-nav-list > li.sn-desktop-only{ display: none; }
  .sn-item{
    flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px 5px;
    font-size: .72rem; font-weight: 600; letter-spacing: .005em; line-height: 1.15; position: relative;
  }
  .sn-item span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Penanda aktif (tidak hanya mengandalkan warna): pil di belakang ikon + ikon lebih tebal + label tebal */
  .sn-item svg{ width: 60px; height: 30px; padding: 3px 18px; box-sizing: border-box; border-radius: 15px;
    transition: background-color .2s ease, transform .15s ease; }
  .sn-item[aria-current="page"]{ color: var(--primary-strong); font-weight: 700; }
  .sn-item[aria-current="page"] svg{ background: var(--primary-tint); stroke-width: 2.1; }
  .sn-item:active svg{ background: var(--surface-2); transform: scale(.94); }

  /* Layar sangat sempit */
  @media (max-width: 340px){
    .sn-item{ font-size: .66rem; }
    .sn-item svg{ width: 52px; padding: 3px 15px; }
  }
  /* HP landscape (tinggi layar kecil): bar lebih pendek, ikon & label berdampingan */
  @media (max-height: 460px) and (orientation: landscape){
    :root{ --bn-h: 48px; }
    .sn-item{ flex-direction: row; gap: 6px; padding: 4px 6px; font-size: .74rem; }
    .sn-item svg{ width: 34px; height: 26px; padding: 2px 8px; }
  }

  /* ruang agar konten & footer tidak tertutup bar */
  body.has-site-nav{ padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)); }
  /* banner instal PWA & FAB diangkat di atas bar */
  body.has-site-nav .pwa-install-bar{ bottom: calc(var(--bn-h) + 12px + env(safe-area-inset-bottom, 0px)); }
  body.has-site-nav .ayat-range-fab{ bottom: calc(var(--bn-h) + 14px + env(safe-area-inset-bottom, 0px)); }
  /* saat keyboard virtual terbuka (mengetik di pencarian), sembunyikan bar agar tidak menutupi layar */
  body.sn-kbd-open .site-nav{ transform: translateY(110%); }
}

/* ============================================================
   DESKTOP (>= 768px) — strip tautan di bawah header
   ============================================================ */
@media (min-width: 768px){
  .site-nav{ border-bottom: 1px solid var(--border); background: var(--bg); }
  /* rata kiri sejajar dengan logo & konten; margin negatif meniadakan padding internal item pertama */
  .site-nav-list{ max-width: 920px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 20px);
    gap: 2px; justify-content: flex-start; flex-wrap: wrap; }
  .site-nav-list > li:first-child{ margin-left: -14px; }
  .site-nav-list > li.sn-mobile-only{ display: none; }
  .sn-item{
    gap: 8px; padding: 12px 14px; font-size: .9rem; font-weight: 600; border-radius: 0;
    border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .sn-item svg{ width: 18px; height: 18px; }
  .sn-item:hover{ color: var(--primary-strong); background: var(--primary-tint); }
  .sn-item[aria-current="page"]{ color: var(--primary-strong); border-bottom-color: var(--primary); }
}

/* ============================================================
   Sheet "Lainnya" (hanya HP)
   ============================================================ */
.sn-sheet-overlay{
  position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20,25,22,.5); animation: snFade .18s ease both;
}
.sn-sheet-overlay[hidden]{ display: none; }
.sn-sheet{
  width: 100%; max-width: 560px; background: var(--surface); color: var(--text);
  border-radius: var(--radius-l) var(--radius-l) 0 0; border: 1px solid var(--border); border-bottom: 0;
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 40px -16px rgba(0,0,0,.35); animation: snUp .22s ease both;
  font-family: var(--font-ui);
}
.sn-sheet-grab{ width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 6px auto 10px; }
.sn-sheet-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sn-sheet-head h2{ margin: 0; font: 700 1rem/1.3 var(--font-ui); }
.sn-sheet-list{ list-style: none; margin: 0; padding: 0; }
.sn-sheet-link{
  appearance: none; -webkit-appearance: none; background: none; border: 0; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px; padding: 13px 8px; min-height: 52px;
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer; border-radius: 0;
}
.sn-sheet-list li + li{ border-top: 1px solid var(--border); }
.sn-sheet-link:active{ background: var(--surface-2); }
.sn-sheet-link:focus-visible{ outline: 2px solid var(--primary-strong); outline-offset: -2px; }
.sn-sheet-ico{ width: 40px; height: 40px; border-radius: 12px; background: var(--primary-tint); color: var(--primary-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; }
.sn-sheet-txt{ display: flex; flex-direction: column; min-width: 0; }
.sn-sheet-txt strong{ font-size: .95rem; font-weight: 600; }
.sn-sheet-txt small{ font-size: .78rem; color: var(--text-muted); }
@media (min-width: 768px){ .sn-sheet-overlay{ display: none !important; } }

@keyframes snFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes snUp{ from{ transform: translateY(24px); opacity: 0; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .site-nav, .sn-item, .sn-item svg, .sn-sheet, .sn-sheet-overlay, .skip-link{ transition: none !important; animation: none !important; }
}

/* Cetak: tidak perlu menu */
@media print{ .site-nav, .sn-sheet-overlay, .skip-link{ display: none !important; } }

/* ============================================================
   Indeks 114 Surah (beranda) — tautan nyata yang bisa dirayapi mesin
   pencari tanpa JavaScript, sekaligus daftar lompat cepat bagi pengunjung.
   ============================================================ */
/* [v45] Tata letak ulang: HP portrait 1 kolom, HP landscape/tablet 2 kolom, desktop 3 kolom.
   Tiap baris punya garis pemisah tipis & lembut; baris terakhir tanpa garis. Markup (ul/li/a) tidak berubah. */
.surah-index{ margin: 28px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface); overflow: hidden; }
.surah-index > summary{ cursor: pointer; list-style: none; padding: 14px 18px; font: 600 .95rem/1.4 var(--font-ui);
  color: var(--primary-strong); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.surah-index > summary::-webkit-details-marker{ display: none; }
.surah-index > summary::after{ content: "▾"; transition: transform .2s ease; }
.surah-index[open] > summary::after{ transform: rotate(180deg); }
.surah-index[open] > summary{ border-bottom: 1px solid var(--border); }
.surah-index > summary:focus-visible{ outline: 2px solid var(--primary-strong); outline-offset: -2px; border-radius: var(--radius-m); }

.surah-index-grid{ list-style: none; margin: 0; padding: 2px 16px 8px; display: grid;
  grid-template-columns: minmax(0, 1fr); column-gap: 28px; row-gap: 0; }
.surah-index-grid li{ min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
.surah-index-grid li:last-child{ border-bottom: 0; }
.surah-index-grid a{ display: flex; gap: 12px; align-items: baseline; padding: 12px 8px; min-height: 48px;
  color: var(--text); text-decoration: none; font: 500 .95rem/1.4 var(--font-ui); border-radius: 8px;
  transition: background-color .15s ease, color .15s ease; }
.surah-index-grid a:hover{ background: var(--primary-tint); color: var(--primary-strong); }
.surah-index-grid a:focus-visible{ outline: 2px solid var(--primary-strong); outline-offset: -2px; }
.surah-index-grid .si-no{ flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; width: 3.2ch; text-align: right; }
.surah-index-grid .si-nm{ flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.surah-index-grid .si-ay{ flex: 0 0 auto; color: var(--text-muted); font-size: .78rem; margin-left: auto; white-space: nowrap; }

/* HP landscape & tablet: 2 kolom (114 surah = 57 baris, 2 item terakhir tanpa garis) */
@media (min-width: 560px){
  .surah-index-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 22px 10px; }
  .surah-index-grid li:nth-last-child(2):nth-child(odd){ border-bottom: 0; }
}
/* Desktop: 3 kolom (114 surah = 38 baris, 3 item terakhir tanpa garis) */
@media (min-width: 960px){
  .surah-index-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 4px 26px 12px; }
  .surah-index-grid li:nth-last-child(-n+3){ border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce){ .surah-index > summary::after, .surah-index-grid a{ transition: none; } }


/* ============================================================
   Saklar tampilan beranda: "Per Surah | Per Juz" (2 segmen)
   Menggantikan 4 tombol tab lama. Dzikir & Surat Pilihan kini ada
   di menu utama di atas. id #tabSurah/#tabJuz dipakai home.js.
   ============================================================ */
.view-switch{
  display: flex; gap: 4px; padding: 4px; margin: 2px 0 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.vs-btn{
  appearance: none; -webkit-appearance: none; flex: 1 1 0; min-width: 0; min-height: 44px;
  padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font: 600 .92rem/1.2 var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.vs-btn:hover{ color: var(--text); }
.vs-btn.is-active{ background: var(--primary); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.vs-btn:focus-visible{ outline: 2px solid var(--primary-strong); outline-offset: 2px; }
@media (min-width: 768px){ .view-switch{ max-width: 340px; } }
@media (prefers-reduced-motion: reduce){ .vs-btn{ transition: none; } }