/* responsive.css — penyesuaian tampilan untuk tablet & desktop.
   Desain dasar di style.css dibuat mobile-first (max-width:480px);
   file ini HANYA menambah/menimpa pada layar lebih lebar, tidak mengubah tampilan HP. */

/* ---------- Tablet (iPad potrait, 640px ke atas) ---------- */
@media (min-width: 640px){
  body{ background: var(--bg-deep, #0b0f14); }
  #app{
    max-width: 640px;
    padding: 24px 28px 56px;
    border-radius: 20px;
  }
  .mode-grid{ gap:16px; }
  .surah-check-grid{ grid-template-columns: repeat(3, 1fr); }
  .quiz-prompt-ar{ font-size: clamp(26px, 5vw, 36px); }
  .detail-ar{ font-size: clamp(26px, 4.5vw, 34px); }
}

/* ---------- Desktop / iPad landscape (1024px ke atas) ---------- */
@media (min-width: 1024px){
  body{
    display:flex;
    justify-content:center;
    min-height:100vh;
  }
  #app{
    max-width: 860px;
    margin: 32px auto;
    padding: 32px 44px 60px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 200px);
    border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  }
  .topbar{ padding-bottom: 8px; }
  .brand-name{ font-size: 20px; }

  /* Peta hafalan & mode kuis jadi 2 kolom berdampingan agar tidak terlalu memanjang ke bawah */
  .mode-grid{ grid-template-columns: repeat(2, 1fr); gap:18px; }
  .surah-check-grid{ grid-template-columns: repeat(4, 1fr); }

  /* Kartu-kartu utama diberi sedikit padding ekstra supaya tidak terasa sempit di layar lebar */
  .card{ padding: 22px 24px; }

  .quiz-prompt-ar{ font-size: clamp(28px, 3.2vw, 40px); line-height:2.1; }
  .quiz-options{ max-width: 620px; margin: 0 auto; }
  .detail-ar{ font-size: clamp(28px, 3vw, 38px); }

  /* Mushaf: beri sedikit lebih banyak ruang antar ayat di layar lebar */
  .mushaf-body{ font-size: clamp(22px, 2.2vw, 30px); }

  /* Tombol besar (mulai kuis, latih surah) tidak perlu selebar penuh di desktop */
  .surah-train-btn{ max-width: 420px; margin-left:auto; margin-right:auto; }
}

/* ---------- Layar sangat lebar (opsional, >1400px) ---------- */
@media (min-width: 1400px){
  #app{ max-width: 920px; }
}

/* ---------- Audio play button (dipakai semua ukuran layar) ---------- */
.audio-play-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin: 4px 0 18px; padding: 12px;
  background: linear-gradient(135deg, rgba(214,174,107,0.16), var(--bg-2, #14191f));
  border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
  border-radius: 12px;
  color: var(--gold-bright, #f2ce85);
  font-weight:700; font-size:13.5px;
}
.audio-play-btn:active{ transform: scale(0.98); }
.audio-play-btn.is-playing{ background: linear-gradient(135deg, rgba(127,184,154,0.2), var(--bg-2, #14191f)); color: var(--green-bright, #a8dab9); }
.audio-play-btn .ico{ width:16px; height:16px; }

/* ---------- Layar loading/error (dipakai saat memuat data dari API) ---------- */
.loading-screen{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:60vh; text-align:center; color: var(--text-2, #9ba8b4); padding: 20px; }
.loading-screen .ico{ width:34px; height:34px; opacity:0.6; }
.loading-screen--error p{ margin:0; }
.loading-detail{ font-size:12px; opacity:0.7; word-break:break-word; }


/* ---------- Pemilih Juz (halaman depan) ---------- */
.juz-switch{
  display:flex; gap:8px; overflow-x:auto; margin: 0 0 18px;
  padding: 2px 2px 8px; scroll-snap-type: x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.juz-switch::-webkit-scrollbar{ display:none; }
.juz-btn{
  flex: 0 0 auto; min-width: 96px; scroll-snap-align: start;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:11px 14px; border-radius:12px;
  background: var(--bg-2, #14191f);
  border:1px solid var(--border-soft, rgba(255,255,255,0.08));
  color: var(--text-2, #9ba8b4);
}
.juz-btn-label{ font-weight:800; font-size:13.5px; }
.juz-btn-sub{ font-size:10px; opacity:.72; white-space:nowrap; }
.juz-btn.is-active{
  background: linear-gradient(140deg, rgba(214,174,107,0.22), var(--bg-2, #14191f));
  border-color: var(--gold, #d6ae6b);
  color: var(--gold-bright, #f2ce85);
}

/* ================================================================
   RESPONSIF — layar picker kuis ikut melebar di tablet & desktop.
   Sebelumnya hanya .mode-grid di halaman depan yang diatur, sehingga
   layar "pilih jenis kuis" tetap sempit (bentuk mobile) di laptop.
   ================================================================ */

/* Tablet */
@media (min-width: 640px){
  .juz-btn{ padding:14px 16px; }
  .juz-btn-label{ font-size:15px; }
  .juz-btn-sub{ font-size:11px; }

  /* kartu pilih jenis kuis (Sambung Ayat / Arti Ayat) */
  .mode-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
  .mode-card{ padding:22px 18px; }
  .mode-title{ font-size:16px; }
  .mode-desc{ font-size:12.5px; }

  .surah-check-grid{ grid-template-columns: repeat(3, 1fr); }
  .surah-check-name{ font-size:13px; }
}

/* Desktop / laptop */
@media (min-width: 1024px){
  .juz-switch{ justify-content:flex-start; }

  /* kartu mode jadi lega, tidak lagi memanjang sempit ala mobile */
  .mode-grid{ grid-template-columns: repeat(2, 1fr); gap:20px; }
  .mode-card{ padding:30px 24px; min-height:150px; justify-content:center; }
  .mode-icon .ico{ width:30px; height:30px; }
  .mode-title{ font-size:18px; }
  .mode-desc{ font-size:13px; }

  .surah-check-grid{ grid-template-columns: repeat(4, 1fr); }
  .surah-check-chip{ padding:12px 13px; }

  /* header layar picker (tombol kembali + judul) diberi ruang nafas */
  .detail-top{ margin-bottom:22px; }
  .detail-ref-name{ font-size:19px; }
  .detail-ref-sub{ font-size:13px; }

  .surah-check-toggle-all{ font-size:13px; padding:9px 16px; }
}

@media (min-width: 1400px){
  .surah-check-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Placeholder saat tafsir sedang diunduh (lazy-load) ---------- */
.taf-loading{ opacity:0.55; font-style:italic; }

/* ================================================================
   AYAT YANG SEDANG DIBACA (mode "Dengarkan bacaan")
   Tulisan ayat berubah PUTIH terang saat dibunyikan, lalu kembali
   ke warna semula begitu bacaan pindah ke ayat berikutnya.
   ================================================================ */
.mushaf-ayah{ transition: color .25s ease, text-shadow .25s ease; }
.mushaf-ayah.is-reciting{
  color:#ffffff !important;
  text-shadow: 0 0 18px rgba(255,255,255,0.35);
}
.mushaf-ayah.is-reciting .ayah-end{ color:#ffffff !important; opacity:.85; }

/* Tombol "Dengarkan bacaan" di bawah mushaf */
.surah-listen-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin: 14px 0 10px; padding:14px;
  border-radius: var(--radius-md, 16px);
  background: linear-gradient(135deg, rgba(214,174,107,0.18), var(--bg-2));
  border:1px solid var(--border-soft);
  color: var(--gold-bright);
  font-weight:700; font-size:14px;
}
.surah-listen-btn.is-playing{
  background: linear-gradient(135deg, rgba(127,184,154,0.22), var(--bg-2));
  border-color: var(--green-soft);
  color: var(--green-bright);
}
.surah-listen-btn .ico{ width:17px; height:17px; }
.listen-progress{ font-size:11.5px; font-weight:600; opacity:.75; margin-left:2px; }

/* ================================================================
   LAYAR "PILIH JENIS KUIS" — versi desktop yang sesungguhnya.
   Sebelumnya kartu tetap tinggi-sempit ala mobile karena .mode-card
   mewarisi layout kolom dari halaman depan.
   ================================================================ */
@media (min-width: 640px){
  .surah-listen-btn{ font-size:15px; padding:15px; }
}

@media (min-width: 1024px){
  /* kartu jadi lebar & lapang, ikon di kiri, teks di kanan */
  .mode-grid{ grid-template-columns: repeat(2, 1fr); gap:22px; }
  .mode-card{
    display:grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap:18px; row-gap:4px;
    align-items:center;
    text-align:left;
    padding:28px 26px;
    min-height:0;
  }
  .mode-icon{ grid-row: 1 / span 2; align-self:center; }
  .mode-icon .ico{ width:34px; height:34px; }
  .mode-title{ align-self:end; font-size:19px; }
  .mode-desc{ align-self:start; font-size:13.5px; line-height:1.5; }

  .surah-listen-btn{ max-width:420px; margin-left:auto; margin-right:auto; }
}

/* ---------- Atribusi qori (wajib tampil di bawah tombol dengarkan) ---------- */
.qori-credit{
  text-align:center;
  font-size:10.5px;
  line-height:1.5;
  color: var(--text-3);
  margin: -4px 0 14px;
}
.qori-credit a{
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qori-credit a:hover{ color: var(--gold); }
.qori-credit--ayat{ margin: -12px 0 16px; }

/* nomor ayat pada tombol dengarkan — selalu tampil, termasuk saat dijeda */
.listen-progress{ font-variant-numeric: tabular-nums; }

/* ================================================================
   HALAMAN DETAIL AYAT — responsif.
   Catatan: semua ayat memakai SATU fungsi render yang sama
   (openAyatDetail), isinya diambil dari data. Jadi kalau ada yang
   terasa "ukuran mobile", itu murni CSS — bukan kode per-ayat.
   Sebelumnya kelas-kelas di bawah ini belum punya aturan responsif.
   ================================================================ */

/* Tafsir kini disimpan sebagai TEKS POLOS (tanpa tag HTML).
   pre-wrap membuat baris kosong jadi jarak antar paragraf. */
.detail-tafsir{ white-space: pre-wrap; }
.asbab-body{ white-space: pre-wrap; }

/* Tablet */
@media (min-width: 640px){
  .detail-card{ padding: 20px 22px; }
  .detail-block{ margin-bottom: 18px; }
  .detail-arti{ font-size: 15.5px; line-height: 1.75; }
  .detail-translit{ font-size: 14.5px; }
  .detail-tafsir{ font-size: 15px; line-height: 1.8; }
  .detail-label{ font-size: 11px; }
  .asbab-section{ padding: 14px 18px; }
  .asbab-body{ font-size: 14.5px; line-height: 1.75; }
  .map-toggle.tafsir-toggle button{ font-size: 13px; padding: 9px 12px; }
}

/* Desktop / laptop */
@media (min-width: 1024px){
  .detail-back{ width: 42px; height: 42px; font-size: 20px; }

  .detail-card{ padding: 26px 30px; }
  .detail-block{ margin-bottom: 22px; }

  /* Arab & terjemahan dibaca lebih lega, tapi baris tidak boleh terlalu panjang
     supaya mata tidak lelah — dibatasi ~72 karakter. */
  .detail-arti{ font-size: 16.5px; line-height: 1.8; max-width: 72ch; }
  .detail-translit{ font-size: 15.5px; line-height: 1.8; max-width: 72ch; }
  .detail-tafsir{ font-size: 16px; line-height: 1.9; max-width: 72ch; }
  .detail-tafsir-src{ font-size: 12px; max-width: 72ch; }
  .detail-label{ font-size: 11.5px; letter-spacing: .08em; }

  .asbab-section{ padding: 18px 22px; margin: 18px 0 14px; }
  .asbab-title{ font-size: 11.5px; }
  .asbab-body{ font-size: 15.5px; line-height: 1.85; max-width: 72ch; }

  /* Tombol pilih sumber tafsir (Kemenag / Jalalain / Ibnu Katsir) */
  .map-toggle.tafsir-toggle{ max-width: 560px; }
  .map-toggle.tafsir-toggle button{ font-size: 13.5px; padding: 11px 14px; }

  .detail-train{ max-width: 420px; margin-left: auto; margin-right: auto; }
  .audio-play-btn{ max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1400px){
  .detail-arti, .detail-translit, .detail-tafsir, .asbab-body{ max-width: 76ch; }
}

/* ---------- Basmalah & doa di halaman depan (di atas sapaan waktu) ---------- */
.hero-doa{ text-align:center; margin: 2px 0 18px; }
.hero-basmalah{
  font-family: var(--font-quran);
  direction: rtl;
  font-size: clamp(19px, 5.4vw, 25px);
  line-height: 2;
  color: var(--gold-bright);
  margin: 0 0 6px;
}
.hero-doa-ar{
  font-family: var(--font-quran);
  direction: rtl;
  font-size: clamp(17px, 4.8vw, 22px);
  line-height: 2;
  color: var(--green-bright);
  margin: 0 0 4px;
}
.hero-doa-id{
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
  margin: 0;
}
@media (min-width: 640px){
  .hero-doa{ margin-bottom: 22px; }
  .hero-doa-id{ font-size: 12.5px; }
}
@media (min-width: 1024px){
  .hero-basmalah{ font-size: 28px; }
  .hero-doa-ar{ font-size: 24px; }
  .hero-doa-id{ font-size: 13px; }
}

/* ---------- Penanda riwayat lemah / Israiliyat dalam Tafsir Ibnu Katsir (opsi 2) ----------
   Teks tetap ditampilkan UTUH (tidak dihapus), tapi diberi latar & garis tepi berbeda
   supaya pembaca awam langsung mengenali bahwa Ibnu Katsir menilainya lemah. */
.taf-daif{
  display:block;
  margin: 10px 0;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--warm-alert, #d99a5b);
  background: rgba(217,154,91,0.09);
  border-radius: 0 8px 8px 0;
  color: var(--text-2, #9ba8b4);
}
.taf-daif-tag{
  display:inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-alert, #d99a5b);
  background: rgba(217,154,91,0.15);
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---------- Kuis Sambung Ayat: tombol "Dengarkan" (muncul saat tekan-tahan) ---------- */
/* popup dengarkan kini fixed (melayang), induk tak perlu relative */
.quiz-listen-pop{
  position:fixed; z-index:200;
  font-family: var(--font-body);
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px;
  background: var(--green-bright, #a8dab9); color:#0a1310;
  font-size:11.5px; font-weight:800;
  border:none; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5);
  animation: popfade .16s ease-out;
}
.quiz-listen-pop .ico{ width:13px; height:13px; }
@keyframes popfade{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }

.quiz-audio-hint{
  margin: 12px 2px 0;
  font-size: 11px; line-height: 1.5;
  color: var(--text-3, #5d7064);
  text-align: center;
}
@media (min-width: 1024px){
  .quiz-audio-hint{ font-size: 12px; }
  .quiz-listen-pop{ font-size: 12.5px; padding:7px 13px; }
}

/* ---------- Baris tombol di picker surah (Batalkan semua + Mulai) ---------- */
.picker-actions{ display:flex; gap:10px; align-items:stretch; margin: 0 0 12px; }
.picker-actions .surah-check-toggle-all{ margin:0; flex:1; }
.picker-actions .picker-start{
  flex: 0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family: var(--font-body);
  padding: 10px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold, #d6ae6b), var(--gold-bright, #f2ce85));
  color:#1a1305; font-weight:800; font-size:13.5px; border:none;
  box-shadow: var(--shadow-gold);
}
.picker-actions .picker-start[disabled]{ opacity:.45; box-shadow:none; }
.picker-actions .picker-start .ico{ width:16px; height:16px; }

/* ---------- Baris tombol di detail ayat (Dengarkan + Latih ayat) ---------- */
.detail-actions{ display:flex; gap:10px; margin: 4px 0 6px; }
.detail-actions .audio-play-btn,
.detail-actions .detail-train{ flex:1; margin:0; }

@media (min-width: 1024px){
  .detail-actions{ max-width: 560px; margin-left:auto; margin-right:auto; }
  .picker-actions{ max-width: 760px; }
}

/* ---------- Keterangan cara pakai mushaf (antara tombol tampilan & kotak mushaf) ---------- */
.mushaf-usage-hint{
  margin: 2px 2px 10px;
  font-size: 11px; line-height: 1.5;
  color: var(--text-3, #5d7064);
  text-align: center;
}
@media (min-width: 1024px){ .mushaf-usage-hint{ font-size: 12px; } }

/* ---------- Keterangan surah (mis. surah terbelah antar-juz) ---------- */
.surah-catatan{
  display:flex; gap:8px; align-items:flex-start;
  margin: 0 0 14px; padding: 10px 13px;
  background: rgba(214,174,107,0.10);
  border-left: 3px solid var(--gold, #d6ae6b);
  border-radius: 0 10px 10px 0;
  font-size: 12px; line-height: 1.55;
  color: var(--text-2, #9ba8b4);
}
.surah-catatan .ico{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color: var(--gold, #d6ae6b); }
@media (min-width:1024px){ .surah-catatan{ font-size: 13px; max-width: 640px; } }