/* ==========================================================================
   Islamipedia — lapisan tambahan v1.1.0 (dimuat SETELAH app.css)
   - Penomoran bintang: semua lebar layar
   - Menu slider chip, footer grid, menu bawah melayang: hanya <= 900px
     (900px = breakpoint hamburger milik app.css). Desktop tidak disentuh.
   ========================================================================== */

/* ---------- bagian umum (semua layar) ---------- */
:root {
  --m-star: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%2040%22%3E%3Cpolygon%20points=%2220.00,2.00%2025.27,7.27%2032.73,7.27%2032.73,14.73%2038.00,20.00%2032.73,25.27%2032.73,32.73%2025.27,32.73%2020.00,38.00%2014.73,32.73%207.27,32.73%207.27,25.27%202.00,20.00%207.27,14.73%207.27,7.27%2014.73,7.27%22%20fill=%22%23EAF5F1%22%20stroke=%22%230B7A63%22%20stroke-width=%221.8%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --m-star-deep: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%2040%22%3E%3Cpolygon%20points=%2220.00,2.00%2025.27,7.27%2032.73,7.27%2032.73,14.73%2038.00,20.00%2032.73,25.27%2032.73,32.73%2025.27,32.73%2020.00,38.00%2014.73,32.73%207.27,32.73%207.27,25.27%202.00,20.00%207.27,14.73%207.27,7.27%2014.73,7.27%22%20fill=%22%230A3D3A%22%20stroke=%22%23D9A63B%22%20stroke-width=%221.8%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --m-star-gold: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%2040%22%3E%3Cpolygon%20points=%2220.00,2.00%2025.27,7.27%2032.73,7.27%2032.73,14.73%2038.00,20.00%2032.73,25.27%2032.73,32.73%2025.27,32.73%2020.00,38.00%2014.73,32.73%207.27,32.73%207.27,25.27%202.00,20.00%207.27,14.73%207.27,7.27%2014.73,7.27%22%20fill=%22%23D9A63B%22%20stroke=%22%230A3D3A%22%20stroke-width=%221.8%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --m-chip-bg: #ffffff;
  --m-chip-bd: #d3e1dc;
  --m-chip-ink: #0A3D3A;
  --m-chip-on-bg: #0A3D3A;
  --m-chip-on-ink: #ffffff;
  --m-bnav-bg: rgba(255,255,255,.96);
  --m-bnav-bd: #d3e1dc;
  --m-bnav-ink: #4b6560;
  --m-bnav-on: #0A3D3A;
}
html[data-theme="dark"] {
  --m-star: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2040%2040%22%3E%3Cpolygon%20points=%2220.00,2.00%2025.27,7.27%2032.73,7.27%2032.73,14.73%2038.00,20.00%2032.73,25.27%2032.73,32.73%2025.27,32.73%2020.00,38.00%2014.73,32.73%207.27,32.73%207.27,25.27%202.00,20.00%207.27,14.73%207.27,7.27%2014.73,7.27%22%20fill=%22%230A3D3A%22%20stroke=%22%23D9A63B%22%20stroke-width=%221.8%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --m-chip-bg: rgba(255,255,255,.06);
  --m-chip-bd: rgba(255,255,255,.18);
  --m-chip-ink: #e8f3f0;
  --m-chip-on-bg: #D9A63B;
  --m-chip-on-ink: #0A3D3A;
  --m-bnav-bg: rgba(6,22,21,.94);
  --m-bnav-bd: rgba(255,255,255,.14);
  --m-bnav-ink: #9fb8b3;
  --m-bnav-on: #D9A63B;
}

/* Bintang 8 sudut untuk nomor surat / juz / urutan turun */
.surah-card .num,
.mu-item .num,
.star-num {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: var(--m-star) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  color: var(--ink);
}
html[data-theme="dark"] .surah-card .num,
html[data-theme="dark"] .mu-item .num,
html[data-theme="dark"] .star-num { color: #f3e7c6; }
.surah-card:hover .num { background-color: transparent !important; }
.surah-card .num.n3, .mu-item .num.n3, .star-num.n3 { font-size: .68rem; }
.surah-card .num.n4, .mu-item .num.n4, .star-num.n4 { font-size: .6rem; }
.mu-item.is-active .num { background-image: var(--m-star-gold) !important; color: #0A3D3A; }

/* Nomor ayat: bintang gelap bergaris emas */
.ayah__num {
  width: 46px; height: 46px;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: var(--m-star-deep) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  color: var(--gold);
}

.faq { margin-top: 1.5rem; }
.faq h2 { margin-bottom: .5rem; }
.faq details { border-top: 1px solid rgba(127,127,127,.25); padding: .65rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq p { margin: .5rem 0 0; }

.bnav { display: none; }

/* ---------- layar kecil ---------- */
@media (max-width: 900px) {
  :root { --hdr: 118px; }
  html { scroll-padding-top: calc(var(--hdr) + 12px) !important; }

  /* menu = slider chip (hamburger dimatikan) */
  .nav-toggle, .nav-close, .nav-backdrop { display: none !important; }
  .site-header .wrap { flex-wrap: wrap; row-gap: 8px; padding-block: 8px; }
  .site-header .nav {
    order: 3;
    flex: 1 0 100%;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }
  .site-header .nav ul {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 16px 2px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .site-header .nav ul::-webkit-scrollbar { display: none; }
  .site-header .nav li { flex: 0 0 auto; scroll-snap-align: start; }
  .site-header .nav a {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
    padding: 0 16px !important;
    border: 1px solid var(--m-chip-bd);
    border-radius: 999px !important;
    background: var(--m-chip-bg);
    color: var(--m-chip-ink);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  .site-header .nav a:hover { text-decoration: none; }
  .site-header .nav a.is-current,
  .site-header .nav a[aria-current="page"] {
    background: var(--m-chip-on-bg);
    border-color: var(--m-chip-on-bg);
    color: var(--m-chip-on-ink);
  }

  /* toolbar sticky mengikuti tinggi header baru; mode baca tetap top:0 */
  .toolbar { top: var(--hdr) !important; }
  html.reading .toolbar { top: 0 !important; }
  html.reading { scroll-padding-top: 12px !important; }

  /* footer: grid 2 kolom */
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
    padding-top: 2rem;
  }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(4) { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(4) ul { columns: 2; column-gap: 20px; }
  .footer-grid > div:nth-child(4) li { break-inside: avoid; }
  .footer-grid li { margin: .7rem 0; }
  .footer-bottom { flex-direction: column; gap: .4rem; }

  /* menu melayang bawah */
  .bnav {
    display: flex;
    position: fixed;
    z-index: 80;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: 520px;
    margin: 0 auto;
    padding: 8px 6px;
    justify-content: space-around;
    background: var(--m-bnav-bg);
    border: 1px solid var(--m-bnav-bd);
    border-radius: 24px;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .bnav a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px;
    color: var(--m-bnav-ink);
    font-size: .68rem; font-weight: 600; line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav a:hover { text-decoration: none; }
  .bnav a svg { width: 22px; height: 22px; }
  .bnav a[aria-current="page"] { color: var(--m-bnav-on); }
  html.reading .bnav { display: none; }

  /* pemutar & toast di atas menu bawah */
  .player { bottom: calc(84px + env(safe-area-inset-bottom)); padding-bottom: .65rem; }
  html.reading .player { bottom: 0; padding-bottom: calc(.65rem + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* cegah auto-zoom iOS pada kolom cari */
  #qsearch, .searchbox input { font-size: 16px; }
}