/* Sayamuslim - ALQUBBA. Tampilan khusus layar HP portrait. */
:root {
  --hijau-tua: #14503f;
  --hijau: #1f6b53;
  --hijau-muda: #e6f0eb;
  --emas: #b8860b;
  --krem: #f7f4ec;
  --putih: #ffffff;
  --tinta: #23201a;
  --tinta-lembut: #6b6152;
  --garis: #e3dccd;
  --bayang: 0 1px 8px rgba(60, 45, 20, .09);
  --tinggi-kepala: 54px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--krem);
  color: var(--tinta);
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100vh; min-height: 100dvh; }

/* ---------- kerangka aplikasi (portrait) ---------- */
.aplikasi {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--krem);
}

.kepala {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--hijau-tua);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.kepala .lambang {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: #fff;
  object-fit: cover;
}
.kepala .judul { flex: 1 1 auto; min-width: 0; }
.kepala h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.kepala p { margin: 0; font-size: 11px; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tombol-pasang {
  flex: 0 0 auto;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hijau-tua);
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.tombol-pasang[hidden] { display: none; }

.isi { flex: 1 1 auto; padding: 12px 12px 26px; }

/* ---------- kartu pembuka ---------- */
.kartu-utama {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, #1f6b53, #14503f);
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--bayang);
  margin-bottom: 14px;
}
.kartu-utama img {
  width: 68px; height: 76px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #fff;
}
.kartu-utama h2 { margin: 0 0 4px; font-size: 17px; }
.kartu-utama p { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .92; }

.judul-bagian {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tinta-lembut);
}
.judul-bagian span { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11.5px; }

/* ---------- kisi juz ---------- */
.kisi-juz {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.kisi-juz a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  color: var(--hijau-tua);
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 13px;
  box-shadow: var(--bayang);
  transition: transform .12s, background .12s;
}
.kisi-juz a:active { transform: scale(.95); background: var(--hijau-muda); }
.kisi-juz strong { font-size: 18px; line-height: 1; }
.kisi-juz small { font-size: 9.5px; color: var(--tinta-lembut); }

/* ---------- daftar menu ---------- */
.daftar {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 14px;
  box-shadow: var(--bayang);
  overflow: hidden;
}
.daftar a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid #f1ece1;
  font-size: 14px;
}
.daftar a:last-child { border-bottom: 0; }
.daftar a:active { background: var(--hijau-muda); }
.daftar .ikon { width: 22px; text-align: center; font-size: 16px; flex: 0 0 auto; }
.daftar .teks { flex: 1 1 auto; min-width: 0; }
.daftar .teks small { display: block; color: var(--tinta-lembut); font-size: 11.5px; }
.daftar .panah { color: #b9ae9a; flex: 0 0 auto; }

.kaki {
  padding: 4px 14px 24px;
  text-align: center;
  font-size: 11.5px;
  color: var(--tinta-lembut);
}

/* ---------- halaman baca ---------- */
.baca {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  background: var(--krem);
}
.baca .kepala { gap: 6px; }
.baca .kembali {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border-radius: 10px;
}
.baca .pilih-juz {
  flex: 0 0 auto;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 6px;
  color: var(--hijau-tua);
  background: #fff;
  border: 0;
  border-radius: 8px;
}
.baca .tombol-ukuran {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 0;
  border-radius: 9px;
}
.baca .bingkai {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fdfaf3;
}
.baca .navigasi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--putih);
  border-top: 1px solid var(--garis);
}
.baca .navigasi a, .baca .navigasi button {
  flex: 1 1 0;
  text-align: center;
  padding: 9px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--hijau-tua);
  background: var(--hijau-muda);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.baca .navigasi [aria-disabled='true'] { opacity: .4; pointer-events: none; }

.spanduk-pasang {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 13px;
  background: #fff8e6;
  border: 1px solid #f0dcae;
  border-radius: 13px;
  font-size: 12.5px;
}
.spanduk-pasang.tampil { display: flex; }
.spanduk-pasang button {
  flex: 0 0 auto;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--hijau);
  border: 0;
  border-radius: 9px;
}

@media (min-width: 521px) {
  .aplikasi, .baca { box-shadow: 0 0 0 1px var(--garis); }
}
/* ---------- pemuat ---------- */
.pemuat {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 20px;
  font-size: 13px;
  color: var(--hijau-tua);
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 14px;
  box-shadow: var(--bayang);
  z-index: 30;
}
.pemuat[hidden] { display: none; }
/* ---------- bilah pemilih juz / halaman di halaman baca ---------- */
.tombol-ukuran.tombol-mode {
  width: auto !important;
  min-width: 46px;
  padding: 0 9px;
  font-size: 12px;
  letter-spacing: .3px;
}
.bilah-pilih {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--putih);
  border-bottom: 1px solid var(--garis);
}
.bilah-pilih .langkah {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  font-size: 15px;
  color: var(--hijau-tua);
  text-decoration: none;
  background: var(--hijau-muda);
  border-radius: 10px;
}
.bilah-pilih .langkah[aria-disabled='true'] { opacity: .35; pointer-events: none; }
.bilah-pilih select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--hijau-tua);
  background: var(--krem);
  border: 1px solid var(--garis);
  border-radius: 10px;
}
.bilah-pilih select:disabled { color: var(--tinta-lembut); }

/* ---------- kartu per halaman di beranda ---------- */
.kartu-halaman {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 14px;
  box-shadow: var(--bayang);
  overflow: hidden;
}
.kartu-halaman-utama {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid #f1ece1;
}
.kartu-halaman-utama:active { background: var(--hijau-muda); }
.kartu-halaman-utama .ikon { width: 22px; text-align: center; font-size: 17px; flex: 0 0 auto; }
.kartu-halaman-utama .teks { flex: 1 1 auto; min-width: 0; }
.kartu-halaman-utama strong { display: block; font-size: 14px; font-weight: 600; }
.kartu-halaman-utama small { color: var(--tinta-lembut); font-size: 11.5px; }
.kartu-halaman-utama .panah { color: #b9ae9a; }
.lompat {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}
.lompat input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--tinta);
  background: var(--krem);
  border: 1px solid var(--garis);
  border-radius: 10px;
}
.lompat button {
  flex: 0 0 auto;
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--hijau);
  border: 0;
  border-radius: 10px;
}
.lompat button:active { background: var(--hijau-tua); }
.lompat .pesan-lompat {
  align-self: center;
  color: #a1342c;
  font-size: 12px;
}
/* ---------- halaman buku PDF per halaman ---------- */
.buku-kartu {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 13px;
  margin-bottom: 8px;
  box-shadow: var(--bayang);
  overflow: hidden;
  scroll-margin-top: calc(var(--tinggi-kepala) + 8px);
}
.buku-kartu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.buku-kartu > summary::-webkit-details-marker { display: none; }
.buku-kartu[open] > summary { border-bottom: 1px solid #f1ece1; background: #fbfdfb; }
.buku-nomor {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--hijau);
  border-radius: 9px;
}
.buku-label { flex: 1 1 auto; font-weight: 600; }
.buku-jumlah { flex: 0 0 auto; font-size: 11.5px; color: var(--tinta-lembut); }
.buku-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  padding: 11px 13px;
}
.buku-hal {
  display: grid;
  place-items: center;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--hijau-tua);
  background: #f4f9f7;
  border: 1px solid #e6efeb;
  border-radius: 9px;
}
.buku-hal:active { background: var(--hijau-muda); }
.buku-penuh {
  display: block;
  margin: 0 13px 13px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--hijau);
  border-radius: 10px;
}
.chip-juz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.chip-juz a {
  display: grid;
  place-items: center;
  width: 36px; height: 30px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--hijau-tua);
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 9px;
}
.chip-juz a:active { background: var(--hijau-muda); }
/* ---------- tombol kembali di kepala (dipakai halaman buku) ---------- */
.kepala .kembali {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border-radius: 10px;
}
.kepala .kembali:active { background: rgba(255, 255, 255, .3); }

/* ---------- tombol ganti tampilan (Mushaf / Terjemah) di halaman baca ---------- */
.bilah-pilih .tombol-tampilan {
  flex: 0 0 auto;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--hijau-tua);
  background: var(--hijau-muda);
  border: 1px solid var(--garis);
  border-radius: 10px;
  cursor: pointer;
}
.bilah-pilih .tombol-tampilan:active { background: #d5e7e0; }