/* ==========================================================================
   Teman Hijrah — premium simplicity
   Warm off-white · soft cream · charcoal · muted olive · soft sand · subtle gold
   (brief bagian 32: hindari gradien berat, glossy UI, ornamen berlebihan)
   ========================================================================== */

:root {
  --kertas: #FAF7F2;
  --krem: #FFFDF9;
  --pasir: #EFE7DA;
  --pasir-tua: #E3D7C4;
  --arang: #26231F;
  --arang-lembut: #6B655C;
  --zaitun: #6B7A5A;
  --zaitun-tua: #55603F;
  --emas: #B08D57;
  --galat: #9A4B3C;
  --sukses: #55603F;
  --radius: 16px;
  --radius-kecil: 10px;
  --bayang: 0 1px 2px rgba(38, 35, 31, .04), 0 8px 24px rgba(38, 35, 31, .05);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-judul: 'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

/* elemen ber-atribut hidden harus benar-benar tersembunyi,
   termasuk yang punya display sendiri seperti .tombol (inline-flex) */
[hidden] { display: none !important; }

html {
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kertas);
  color: var(--arang);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.005em;
}

h1, h2, h3 { font-family: var(--font-judul); font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 14px; }
a { color: var(--zaitun-tua); }
a:hover { color: var(--arang); }
small { font-size: .85rem; }

.lewati {
  position: absolute; left: -9999px; top: 0; background: var(--arang); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--radius-kecil) 0; z-index: 99;
}
.lewati:focus { left: 0; }

/* ------------------------------------------------------------------ bar atas */
.bar-atas {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 247, 242, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--pasir);
}
.bar-atas-dalam {
  max-width: 660px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--arang); }
.merek-ikon { font-size: 1.2rem; color: var(--zaitun); }
.merek-teks strong { font-family: var(--font-judul); font-size: 1.08rem; font-weight: 600; display: block; line-height: 1.2; }
.merek-teks small { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--arang-lembut); }
.lencana-akses {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--zaitun-tua); border: 1px solid var(--pasir-tua); border-radius: 999px;
  padding: 5px 12px; background: var(--krem); text-decoration: none;
}
.lencana-free { color: var(--emas); border-color: #EADCC2; }

/* ------------------------------------------------------------------ wadah */
.wadah { max-width: 660px; margin: 0 auto; padding: 24px 20px 32px; }
.dengan-nav .wadah { padding-bottom: 104px; }

.kepala-halaman { margin-bottom: 28px; }
.kepala-halaman h1 { margin-bottom: 8px; }

/* ------------------------------------------------------------------ pesan */
.pesan {
  border-radius: var(--radius-kecil); padding: 12px 16px; margin: 0 0 20px;
  font-size: .95rem; border: 1px solid var(--pasir-tua); background: var(--krem);
}
.pesan-sukses { border-color: #C8D3B8; background: #F4F7EE; color: var(--sukses); }
.pesan-galat { border-color: #E3C4BC; background: #FBF2F0; color: var(--galat); }
.pesan-info { color: var(--arang-lembut); }

/* ------------------------------------------------------------------ kartu */
.kartu {
  background: var(--krem);
  border: 1px solid var(--pasir);
  border-radius: var(--radius);
  padding: 22px;
  margin: 0 0 20px;
  box-shadow: var(--bayang);
}
.kartu-ringkas { padding: 20px; }
.kartu-lembut { background: #F6F3EC; box-shadow: none; }
.kartu-tenang { text-align: left; padding: 28px 24px; }
.kartu-ikon { font-size: 1.6rem; margin-bottom: 10px; }
.kartu-perjalanan { border-color: var(--pasir-tua); }

.label {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--arang-lembut); margin: 0 0 10px; font-weight: 600;
}
.judul-hari { font-size: 1.35rem; margin-bottom: 10px; }
.judul-kartu { margin-bottom: 8px; }
.judul-besar { font-size: 1.6rem; margin-bottom: 14px; }
.tenang { color: var(--arang-lembut); }
.kecil-tenang { color: var(--arang-lembut); font-size: .88rem; margin-bottom: 12px; }
.besar { font-size: 1.1rem; }
.kecil-tengah { text-align: center; font-size: .9rem; color: var(--arang-lembut); }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }

/* ------------------------------------------------------------------ tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 20px;
  border-radius: 999px; border: 1px solid var(--pasir-tua);
  background: var(--krem); color: var(--arang);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tombol:hover { background: #F4F1EA; color: var(--arang); }
.tombol:active { transform: translateY(1px); }
.tombol-utama {
  background: var(--zaitun); border-color: var(--zaitun); color: #FCFBF7;
}
.tombol-utama:hover { background: var(--zaitun-tua); border-color: var(--zaitun-tua); color: #fff; }
.tombol-halus { background: transparent; }
.tombol-lebar { width: 100%; }
.tombol:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--zaitun); outline-offset: 2px;
}

/* ------------------------------------------------------------------ splash */
.splash {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--kertas);
}
.splash-dalam { max-width: 420px; text-align: center; }
.splash-tanda { font-size: 3rem; color: var(--zaitun); margin-bottom: 8px; }
.splash-nama { font-size: 1.8rem; margin-bottom: 2px; }
.splash-brand {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zaitun-tua); margin: 0 0 20px;
}
.splash-baris { font-size: 1.15rem; line-height: 1.6; margin-bottom: 22px; }
.splash-tenang { color: var(--arang-lembut); font-size: .95rem; margin-bottom: 32px; }
.splash-aksi { margin-bottom: 18px; }
.splash-kecil { font-size: .9rem; color: var(--arang-lembut); }

/* ------------------------------------------------------------------ auth */
.auth { max-width: 460px; margin: 0 auto; }
.auth-kartu { padding: 26px; }
.form .medan { display: block; margin-bottom: 16px; }
.medan span { display: block; font-size: .92rem; margin-bottom: 6px; color: var(--arang-lembut); }
.medan input, .medan textarea {
  width: 100%; font: inherit; color: var(--arang);
  background: #FFFEFB; border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 12px 14px; min-height: 48px; resize: vertical;
}
.medan textarea { line-height: 1.6; }
.cek { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--arang-lembut); margin-bottom: 18px; }
.cek input { margin-top: 6px; width: 20px; height: 20px; }

/* ------------------------------------------------------------------ onboarding */
.onboarding { max-width: 480px; margin: 0 auto; }
.langkah-titik { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; }
.titik { width: 8px; height: 8px; border-radius: 50%; background: var(--pasir-tua); }
.titik.aktif { background: var(--zaitun); width: 22px; border-radius: 999px; }
.titik.lewat { background: #C8D3B8; }

.pilihan-daftar { display: grid; gap: 12px; margin: 18px 0 4px; }
.pilihan {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 14px 16px; min-height: 52px; background: #FFFEFB; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pilihan:hover { border-color: var(--zaitun); }
.pilihan input { width: 20px; height: 20px; accent-color: var(--zaitun); }
.pilihan:has(input:checked) { border-color: var(--zaitun); background: #F4F7EE; }
.pilihan-teks { font-size: .98rem; }

/* ------------------------------------------------------------------ beranda */
.salam { margin-bottom: 26px; }
.salam-waktu { font-family: var(--font-judul); font-size: 1.5rem; margin: 0 0 2px; }
.salam-tanggal { color: var(--arang-lembut); font-size: .92rem; margin: 0; }

.bilah { height: 6px; background: var(--pasir); border-radius: 999px; overflow: hidden; margin: 16px 0 10px; }
.bilah span { display: block; height: 100%; background: var(--zaitun); border-radius: 999px; transition: width .3s ease; }
.jam-besar { font-size: 1.25rem; margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px; }
.jam-besar strong { font-family: var(--font-judul); font-size: 1.6rem; }

/* ------------------------------------------------------------------ jurnal */
.kartu-fase { padding: 20px 22px; }
.daftar-hari { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.butir-hari a, .butir-terkunci {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: var(--radius-kecil);
  text-decoration: none; color: var(--arang); min-height: 48px;
}
.butir-hari a:hover { background: #F4F1EA; }
.butir-hari .nomor, .butir-terkunci .nomor {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pasir); color: var(--arang-lembut); font-size: .82rem; font-weight: 600;
}
.butir-hari .nama { flex: 1; font-size: .97rem; }
.butir-hari.lalu .nama { color: var(--arang-lembut); }
.butir-hari.sekarang a { background: #F4F7EE; border: 1px solid #D5DEC6; }
.butir-hari.sekarang .nomor { background: var(--zaitun); color: #fff; }
.tanda { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--zaitun-tua); }
.butir-terkunci { color: var(--arang-lembut); }
.butir-terkunci .nomor { background: transparent; border: 1px dashed var(--pasir-tua); }

/* ------------------------------------------------------------------ hari */
.daftar-tugas { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 10px; }
.tugas-tombol {
  width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left;
  background: #FFFEFB; border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 14px 16px; min-height: 56px; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.tugas-tombol:hover { border-color: var(--zaitun); }
.tugas-tanda {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1px solid var(--pasir-tua); display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff; margin-top: 2px;
}
.tugas.selesai .tugas-tanda { background: var(--zaitun); border-color: var(--zaitun); }
.tugas.selesai .tugas-judul { color: var(--arang-lembut); }
.tugas-isi { display: block; }
.tugas-tipe {
  display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--arang-lembut); margin-bottom: 3px;
}
.tugas-judul { display: block; font-size: .98rem; }
.baris-selesai { margin: 20px 0 10px; }

.ringkas-renungan { border-left: 2px solid var(--pasir-tua); padding-left: 16px; margin: 16px 0; }
.ringkas-renungan p { margin-bottom: 12px; font-size: .95rem; }
.ringkas-renungan span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--arang-lembut); }

.pindah-hari { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* ------------------------------------------------------------------ halaman "segera hadir" */
.segera { text-align: center; padding: 8px 0 4px; }
.segera-ikon { font-size: 2rem; margin-bottom: 10px; }
.daftar-rencana { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.daftar-rencana li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFFEFB; border: 1px solid var(--pasir); border-radius: var(--radius-kecil); padding: 14px 16px;
}
.daftar-rencana .tanda-kecil { color: var(--zaitun); }

/* ------------------------------------------------------------------ konten / learn */
.daftar-konten { display: grid; gap: 16px; }
.konten-kartu { display: block; text-decoration: none; color: inherit; }
.konten-kartu h2 { margin-bottom: 6px; }
.konten-terkunci { border-style: dashed; background: #F9F6F0; }
.konten-terkunci h2, .konten-terkunci p { color: var(--arang-lembut); }
.konten-meta { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--arang-lembut); }
.isi-bacaan { font-size: 1.02rem; }
.isi-bacaan p { margin-bottom: 16px; }
.isi-bacaan p:first-of-type { font-size: 1.08rem; color: var(--arang); }

/* ------------------------------------------------------------------ akses penuh */
.akses-harga { font-family: var(--font-judul); font-size: 2rem; margin: 6px 0 4px; }
.daftar-isi { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.daftar-isi li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.daftar-isi .cek-ikon { color: var(--zaitun); }

/* ------------------------------------------------------------------ admin */
.tab { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab a {
  text-decoration: none; color: var(--arang-lembut); font-size: .9rem;
  border: 1px solid var(--pasir-tua); border-radius: 999px; padding: 8px 14px; background: var(--krem);
}
.tab a.aktif { background: var(--zaitun); border-color: var(--zaitun); color: #fff; }
.grid-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
.angka-kartu { background: var(--krem); border: 1px solid var(--pasir); border-radius: var(--radius-kecil); padding: 16px; }
.angka-kartu .angka { font-family: var(--font-judul); font-size: 1.6rem; display: block; }
.angka-kartu .ket { font-size: .82rem; color: var(--arang-lembut); }
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--pasir); border-radius: var(--radius-kecil); background: var(--krem); }
table.tabel { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 520px; }
table.tabel th, table.tabel td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--pasir); vertical-align: top; }
table.tabel th { font-weight: 600; color: var(--arang-lembut); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
table.tabel tr:last-child td { border-bottom: 0; }
.medan-sebaris { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.medan-sebaris .medan { flex: 1 1 200px; }
.tombol-mini { min-height: 44px; padding: 8px 16px; font-size: .85rem; }

/* ------------------------------------------------------------------ footer + nav */
.kaki { max-width: 660px; margin: 0 auto; padding: 8px 20px 40px; color: var(--arang-lembut); font-size: .85rem; }
.dengan-nav .kaki { padding-bottom: 104px; }
.kaki-prinsip { margin-bottom: 6px; }
.kaki-tautan a { color: var(--arang-lembut); }
.kaki-tautan span { margin: 0 6px; }

.nav-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 253, 249, .96);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--pasir);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-dalam {
  max-width: 660px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr);
}
.nav-butir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 4px 12px; min-height: 60px; text-decoration: none; color: var(--arang-lembut);
  font-size: .72rem;
}
.nav-butir.aktif { color: var(--zaitun-tua); }
.nav-ikon { font-size: 1.15rem; line-height: 1; }
.nav-butir.aktif .nav-ikon { transform: translateY(-1px); }

/* ------------------------------------------------------------------ Deen: pelacakan shalat */
.daftar-shalat { list-style: none; margin: 16px 0 14px; padding: 0; display: grid; gap: 10px; }
.shalat-form { margin: 0; }
.shalat-butir {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: #FFFEFB; border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 14px 16px; min-height: 54px; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.shalat-butir:hover { border-color: var(--zaitun); }
.shalat-butir.tercatat { background: #F4F7EE; border-color: #C8D3B8; }
.shalat-tanda {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1px solid var(--pasir-tua); display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff;
}
.shalat-butir.tercatat .shalat-tanda { background: var(--zaitun); border-color: var(--zaitun); }
.shalat-nama { flex: 1; font-size: 1rem; }
.shalat-jam { color: var(--arang-lembut); font-size: .9rem; font-variant-numeric: tabular-nums; }

.grid-tujuh { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 14px 0; }
.tujuh-butir {
  text-align: center; border: 1px solid var(--pasir); border-radius: var(--radius-kecil);
  padding: 10px 4px; background: #FFFEFB;
}
.tujuh-butir.sebagian { background: #F7F5EE; border-color: var(--pasir-tua); }
.tujuh-butir.penuh { background: #F4F7EE; border-color: #C8D3B8; }
.tujuh-hari { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--arang-lembut); }
.tujuh-angka { font-size: .92rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Al-Qur'an */
.quran-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.quran-nama { font-size: 1.3rem; margin-bottom: 4px; }
.quran-arab-nama { font-size: 1.5rem; color: var(--zaitun-tua); margin: 0; line-height: 1.2; }
.quran-bacaan { padding: 22px 20px; }
.ayat { border-bottom: 1px solid var(--pasir); padding: 18px 0 16px; scroll-margin-top: 90px; }
.ayat:last-child { border-bottom: 0; padding-bottom: 4px; }
.ayat-nomor {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--pasir); color: var(--arang-lembut); font-size: .78rem; margin-bottom: 10px;
}
.ayat-arab {
  font-family: 'Traditional Arabic', 'Scheherazade New', 'Amiri', serif;
  font-size: 1.7rem; line-height: 2.05; text-align: right; margin: 0 0 10px; color: #211E1A;
}
.ayat-latin { font-size: .92rem; font-style: italic; color: var(--zaitun-tua); margin-bottom: 6px; }
.ayat-arti { font-size: 1rem; margin-bottom: 8px; }
.ayat-aksi { display: flex; gap: 10px; }
.ayat-tombol {
  min-height: 44px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pasir-tua); background: transparent; color: var(--arang-lembut);
  font: inherit; font-size: .84rem;
}
.ayat-tombol.aktif { background: #F4F7EE; border-color: #C8D3B8; color: var(--zaitun-tua); }

.daftar-surat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-surat a {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px;
  border-radius: var(--radius-kecil); text-decoration: none; color: var(--arang); min-height: 56px;
}
.daftar-surat a:hover { background: #F4F1EA; }
.surat-nomor {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pasir); color: var(--arang-lembut); font-size: .8rem;
}
.surat-isi { flex: 1; }
.surat-isi strong { display: block; font-weight: 500; }
.surat-isi small { color: var(--arang-lembut); }
.surat-arab { font-family: 'Traditional Arabic', 'Scheherazade New', 'Amiri', serif; font-size: 1.25rem; color: var(--zaitun-tua); }

.daftar-ayat-cari { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daftar-ayat-cari a { display: block; padding: 12px; border-radius: var(--radius-kecil); text-decoration: none; color: var(--arang); }
.daftar-ayat-cari a:hover { background: #F4F1EA; }
.daftar-penanda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daftar-penanda a { display: block; padding: 10px 12px; border-radius: var(--radius-kecil); text-decoration: none; min-height: 44px; }
.daftar-penanda a:hover { background: #F4F1EA; }

/* ------------------------------------------------------------------ dzikir & doa */
.tab-kecil a { padding: 6px 12px; font-size: .84rem; }
.daftar-dzikir { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 18px; }
.dzikir-butir { border: 1px solid var(--pasir); border-radius: var(--radius-kecil); padding: 16px; background: #FFFEFB; }
.dzikir-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lencana-hitungan {
  font-size: .74rem; letter-spacing: .06em; color: var(--zaitun-tua);
  border: 1px solid #C8D3B8; background: #F4F7EE; border-radius: 999px; padding: 3px 10px;
}
.penghitung { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.penghitung-angka { font-variant-numeric: tabular-nums; color: var(--arang-lembut); }
.daftar-doa { display: grid; gap: 16px; }
.kartu-doa { padding: 0; overflow: hidden; }
.kartu-doa summary {
  cursor: pointer; padding: 18px 20px; min-height: 56px;
  display: flex; flex-direction: column; gap: 4px;
}
.kartu-doa summary::marker { color: var(--zaitun); }
.kartu-doa > *:not(summary) { padding: 0 20px; }
.kartu-doa > p:last-child { padding-bottom: 20px; }
.kartu-doa[open] summary { border-bottom: 1px solid var(--pasir); margin-bottom: 14px; }
.kartu-hadis { border-color: var(--pasir-tua); }
.hadis-butir { border-top: 1px solid var(--pasir); padding-top: 16px; margin-top: 16px; }
.hadis-butir:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.gambar-konten { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--pasir); margin-bottom: 20px; }
.aktif-teks { color: var(--zaitun-tua); font-weight: 600; }

/* ------------------------------------------------------------------ admin */
select {
  font: inherit; color: var(--arang); background: #FFFEFB;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 10px 12px; min-height: 44px; max-width: 100%;
}
input[type=file] { font-size: .88rem; color: var(--arang-lembut); }
input[type=date], input[type=time] {
  font: inherit; color: var(--arang); background: #FFFEFB;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 12px 14px; min-height: 48px;
}


/* ------------------------------------------------------------------ Digital Shield */
.daftar-lapis { display: grid; gap: 16px; }
.lapis { background: #FFFEFB; border: 1px solid var(--pasir); border-radius: var(--radius-kecil); padding: 16px; }
.lapis-kepala { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lapis-nama {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zaitun-tua);
  border: 1px solid #C8D3B8; background: #F4F7EE; border-radius: 999px; padding: 3px 10px;
}
.lapis details { margin-top: 8px; }
.lapis summary, .kartu summary { cursor: pointer; color: var(--zaitun-tua); font-size: .9rem; }

.timer { text-align: center; padding: 8px 0 4px; }
.timer-angka {
  font-family: var(--font-judul); font-size: 3rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin: 6px 0 8px;
}
.timer-pilihan, .timer-tombol { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.timer-pilihan .tombol.aktif { background: var(--zaitun); border-color: var(--zaitun); color: #fff; }

.daftar-cek { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cek-butir {
  width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left;
  background: #FFFEFB; border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 14px 16px; min-height: 56px; font: inherit; color: inherit; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.cek-butir:hover { border-color: var(--zaitun); }
.cek-butir.selesai { background: #F4F7EE; border-color: #C8D3B8; }
.cek-butir.selesai strong { color: var(--arang-lembut); }
.cek-tanda {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1px solid var(--pasir-tua); display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff; margin-top: 2px;
}
.cek-butir.selesai .cek-tanda { background: var(--zaitun); border-color: var(--zaitun); }
.cek-isi { display: block; }
.cek-isi strong { display: block; font-weight: 500; margin-bottom: 2px; }

.daftar-langkah { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; counter-reset: langkah; }
.langkah-butir {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: #FFFEFB; border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  padding: 14px 16px; min-height: 56px; font: inherit; color: inherit; cursor: pointer;
}
.langkah-butir.berikutnya { border-color: var(--zaitun); }
.langkah-butir.selesai { background: #F4F7EE; border-color: #C8D3B8; }
.langkah-nomor {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pasir); color: var(--arang-lembut); font-size: .82rem;
}
.langkah-butir.selesai .langkah-nomor { background: var(--zaitun); color: #fff; }
.langkah-teks { flex: 1; font-size: .97rem; }
.langkah-tanda { color: var(--zaitun); }

.grid-shield-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.shield-kartu {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius); background: #FFFEFB;
  padding: 18px; text-decoration: none; color: var(--arang);
  transition: border-color .18s ease, background .18s ease;
}
.shield-kartu:hover { border-color: var(--zaitun); background: #F7F5EE; }
.shield-kartu strong { font-family: var(--font-judul); font-size: 1.02rem; letter-spacing: .02em; }
.shield-kartu .tombol { margin-top: 8px; pointer-events: none; }
.shield-ikon { font-size: 1.5rem; }

.langkah-bagian { border-top: 1px solid var(--pasir); padding-top: 16px; margin-top: 16px; }
.langkah-bagian:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.timer-kecil .timer-angka { font-size: 2rem; margin: 4px 0 6px; }

.daftar-aturan { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aturan { border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil); padding: 14px 16px; background: #FFFEFB; }
.aturan.jeda { opacity: .72; background: #F8F6F1; }
.aturan-isi strong { display: block; font-weight: 500; margin-bottom: 2px; }
.aturan-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aturan-aksi form { margin: 0; }

.grid-escape { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.grid-tindakan { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.tindakan-tombol {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 56px; padding: 12px 14px; width: 100%;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil);
  background: #FFFEFB; color: var(--arang); font: inherit; cursor: pointer;
  text-decoration: none; transition: border-color .18s ease, background .18s ease;
}
.tindakan-tombol:hover { border-color: var(--zaitun); background: #F7F5EE; }
.tindakan-tombol.disarankan { border-color: #C8D3B8; background: #F4F7EE; }
.tindakan-ikon { font-size: 1.15rem; }
.kartu-rujukan { border-color: var(--pasir-tua); background: #FBF8F2; margin: 14px 0 18px; }
.tombol-escape { min-height: 62px; flex-direction: column; gap: 4px; border-radius: var(--radius-kecil); }
.escape-ikon { font-size: 1.3rem; }

/* ------------------------------------------------------------------ Lingkungan */
.lingkungan-medan {
  border: 1px solid var(--pasir); border-radius: var(--radius-kecil);
  padding: 16px; margin: 0 0 16px; background: #FFFEFB;
}
.lingkungan-medan legend { font-weight: 500; padding: 0 6px; }
.pilihan-baris { display: grid; gap: 10px; margin-top: 10px; }
.pilihan-inline {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  border: 1px solid var(--pasir-tua); border-radius: var(--radius-kecil); padding: 10px 14px; cursor: pointer;
}
.pilihan-inline:has(input:checked) { border-color: var(--zaitun); background: #F4F7EE; }
.pilihan-inline input { width: 20px; height: 20px; accent-color: var(--zaitun); }
.daftar-indikator { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.indikator { display: flex; gap: 12px; align-items: flex-start; }
.indikator-ikon { font-size: 1.1rem; }
.indikator-isi strong { display: block; font-weight: 500; font-size: .97rem; }

@media (max-width: 380px) {
  .timer-angka { font-size: 2.5rem; }
}

@media (max-width: 380px) {
  body { font-size: 16.5px; }
  .wadah { padding: 20px 16px 28px; }
  .kartu { padding: 18px; }
  .ayat-arab { font-size: 1.5rem; }
  .grid-tujuh { gap: 6px; }
}


@media (min-width: 720px) {
  .splash-nama { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}