/*
 * Sunnah: tampilan "kitab terbuka".
 * Warna dan huruf mengikuti brand/README.md.
 * - Hijau Sunnah: sampul (beranda dan kaki halaman), tombol, tautan.
 * - Emas Cahaya: hanya bintang delapan sudut. Di luar logo, bintang hanya menandai dalil.
 * - Amiri untuk teks wahyu (Arab) dan terjemahannya; Plus Jakarta Sans untuk penjelasan dan antarmuka.
 */

:root {
  --kertas: #F6F7F4;
  --halaman: #FFFFFF;
  --tinta: #14261F;
  --redup: #3F4F48;
  --samar: #56655E;
  --garis: #D9DFDA;
  --garis-halus: #E6EBE7;
  --garis-input: #6F8279;
  --hijau: #0E5A43;
  --hijau-tua: #08392A;
  --di-hijau: #FFFFFF;
  --hijau-muda: #E4EFE9;
  --sampul: #0E5A43;
  --di-sampul: #CFE7DC;
  --emas: #C2892B;
  --awas-latar: #FFF3DB;
  --awas-teks: #6E4600;
  --lipatan: rgba(8, 57, 42, 0.11);
  --bayang-lembar: 0 1px 2px rgba(20, 38, 31, 0.08), 0 22px 44px -20px rgba(8, 57, 42, 0.5);
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --huruf-kitab: "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --lebar: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --kertas: #0F1714;
    --halaman: #16211C;
    --tinta: #E6EEEA;
    --redup: #B9C7C0;
    --samar: #9FB0A8;
    --garis: #2B3A33;
    --garis-halus: #22302A;
    --garis-input: #5C7268;
    --hijau: #5FBF98;
    --hijau-tua: #86D4B3;
    --di-hijau: #0B1A14;
    --hijau-muda: #12382A;
    --sampul: #0B3B2C;
    --di-sampul: #CFE7DC;
    --awas-latar: #3A2A0B;
    --awas-teks: #F3CF8C;
    --lipatan: rgba(0, 0, 0, 0.32);
    --bayang-lembar: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-tema="gelap"] {
  --kertas: #0F1714;
  --halaman: #16211C;
  --tinta: #E6EEEA;
  --redup: #B9C7C0;
  --samar: #9FB0A8;
  --garis: #2B3A33;
  --garis-halus: #22302A;
  --garis-input: #5C7268;
  --hijau: #5FBF98;
  --hijau-tua: #86D4B3;
  --di-hijau: #0B1A14;
  --hijau-muda: #12382A;
  --sampul: #0B3B2C;
  --di-sampul: #CFE7DC;
  --awas-latar: #3A2A0B;
  --awas-teks: #F3CF8C;
  --lipatan: rgba(0, 0, 0, 0.32);
  --bayang-lembar: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* Dasar */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--huruf);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--hijau); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--hijau-tua); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hijau); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5625rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 1em; }
em { font-style: italic; }

.wadah { width: 100%; max-width: var(--lebar); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .wadah { padding-inline: 32px; } }

.lewati { position: absolute; left: -9999px; top: 8px; z-index: 20; }
.lewati:focus { left: 16px; background: var(--halaman); color: var(--tinta); padding: 10px 14px; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--redup); max-width: 40em; }
.meta { font-size: 0.9375rem; color: var(--samar); margin: 0; }
.catatan { font-size: 0.9375rem; color: var(--samar); max-width: 46em; }

/* Arab dan bintang dalil */
.arab {
  font-family: var(--huruf-kitab);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  line-height: 2.05;
  direction: rtl;
  text-align: right;
  margin: 0;
}
.bintang { fill: var(--emas); flex: none; display: block; }

/* Kepala halaman */
.kepala { background: var(--halaman); border-bottom: 1px solid var(--garis); }
.kepala-isi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 64px; padding-block: 6px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.logo svg { color: var(--hijau); flex: none; }
.logo:hover { color: var(--tinta); }
.navigasi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.menu { display: flex; flex-wrap: wrap; gap: 0 24px; }
.menu a { display: inline-block; padding: 10px 0; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 0.9375rem; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--hijau); }
.menu a[aria-current="page"] { color: var(--hijau); font-weight: 700; border-bottom-color: currentColor; }
.tombol-menu, .tombol-tema {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--garis-input); border-radius: 10px;
  background: var(--halaman); color: var(--tinta); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.tombol-menu:hover, .tombol-tema:hover { border-color: var(--tinta); }
.tombol-menu { display: none; }
@media (max-width: 819px) {
  .js .tombol-menu { display: inline-flex; align-items: center; }
  .js .navigasi { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 14px; }
  .js .navigasi.terbuka { display: flex; }
  .js .menu { flex-direction: column; border-top: 1px solid var(--garis-halus); }
  .js .menu a { padding: 12px 2px; font-size: 1.0625rem; border-bottom: 1px solid var(--garis-halus); }
  .js .menu a[aria-current="page"] { border-bottom-color: var(--garis-halus); }
  .js .tombol-tema { align-self: flex-start; margin-top: 12px; }
}

/* Tombol dan formulir */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1.5px solid var(--hijau); border-radius: 10px;
  background: var(--hijau); color: var(--di-hijau); font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
}
.tombol:hover { background: var(--hijau-tua); border-color: var(--hijau-tua); color: var(--di-hijau); text-decoration: none; }
.tombol.garis { background: transparent; color: var(--tinta); border-color: var(--garis-input); }
.tombol.garis:hover { background: var(--halaman); border-color: var(--tinta); color: var(--tinta); }
.tombol.kecil { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.tombol:disabled { opacity: 0.6; cursor: progress; }
.tombol[aria-pressed="true"] { background: var(--hijau-muda); border-color: var(--hijau); color: var(--tinta); }

.cari, .form-tanya, .form-lapor { display: flex; flex-direction: column; gap: 8px; }
.cari label, .form-tanya label, .form-lapor label { font-weight: 700; font-size: 0.9375rem; }
.form-baris { display: flex; flex-wrap: wrap; gap: 8px; }
input[type="search"], input[type="text"], input[type="url"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: 11px 14px;
  border: 1.5px solid var(--garis-input); border-radius: 10px;
  background: var(--halaman); color: var(--tinta); font: inherit; font-size: 1rem;
}
textarea { resize: vertical; line-height: 1.5; }
.form-baris input, .form-baris textarea { flex: 1 1 15rem; width: auto; }
.form-baris .tombol { flex: 0 0 auto; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--hijau); outline-offset: 1px; border-color: var(--hijau); }
::placeholder { color: var(--samar); opacity: 1; }
.form-pesan { margin: 0; font-size: 0.9375rem; }
.form-pesan:empty { display: none; }
.form-pesan.galat { padding: 8px 12px; border-radius: 6px; background: var(--awas-latar); color: var(--awas-teks); }

/* Penanda status */
.draf { margin: 0 0 24px; padding: 12px 16px; border-radius: 6px; background: var(--awas-latar); color: var(--awas-teks); font-size: 0.9375rem; }
.isian { padding: 0 3px; border-radius: 3px; background: var(--awas-latar); color: var(--awas-teks); border-bottom: 1.5px dashed currentColor; }
.label-draf { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--awas-latar); color: var(--awas-teks); font-size: 0.75rem; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.tanda-selesai { display: inline-block; margin-top: 4px; padding: 0 7px; border-radius: 4px; background: var(--hijau-muda); color: var(--tinta); font-size: 0.75rem; font-weight: 700; line-height: 1.7; }

/* Blok dalil: teks wahyu di atas lembar, dibedakan dari penjelasan */
.dalil {
  margin: 28px 0; padding: 26px clamp(16px, 4vw, 40px) 22px;
  background: var(--halaman); border: 1px solid var(--garis); border-radius: 4px; text-align: center;
}
.dalil > .bintang { margin: 0 auto 10px; }
.dalil blockquote { margin: 0; }
.dalil .arab { text-align: center; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem); line-height: 2.1; }
.dalil .terjemah, .terjemah { font-family: var(--huruf-kitab); font-size: 1.1875rem; line-height: 1.65; color: var(--tinta); }
.dalil .terjemah { max-width: 36em; margin: 12px auto 0; }
.dalil figcaption { margin-top: 12px; font-size: 0.875rem; font-weight: 700; color: var(--samar); }

/* Beranda: sampul hijau dengan kitab terbuka di atasnya */
.sampul {
  padding-top: clamp(20px, 4vw, 40px);
  background: linear-gradient(to bottom, var(--sampul) 0, var(--sampul) calc(100% - 56px), var(--kertas) calc(100% - 56px));
}
.lembar { position: relative; display: grid; background: var(--halaman); border-radius: 4px; box-shadow: var(--bayang-lembar); }
.lembar-kiri { padding: clamp(24px, 5vw, 56px); }
.lembar-kiri h1 { font-size: clamp(2.125rem, 1.45rem + 3vw, 3.375rem); line-height: 1.06; max-width: 13em; margin-bottom: 16px; }
.lembar-kiri .cari { margin-top: 8px; max-width: 34rem; }
.lembar-kanan { margin: 0; padding: clamp(24px, 5vw, 56px); border-top: 1px solid var(--garis-halus); display: flex; flex-direction: column; justify-content: center; text-align: center; background: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.lembar-kanan .arab { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 2.1; }
.lembar-kanan .terjemah { font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); }
.sering { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 0.875rem; color: var(--samar); }
.sering ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sering a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--garis); border-radius: 6px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.sering a:hover { border-color: var(--hijau); color: var(--hijau); }
@media (min-width: 960px) {
  .lembar { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .lembar-kanan { border-top: 0; }
  /* Lipatan tengah kitab */
  .lembar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 51.9%; width: 56px; transform: translateX(-50%); pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--lipatan) 46%, var(--lipatan) 50%, var(--lipatan) 54%, transparent);
  }
  .lembar-kanan { padding-left: clamp(40px, 5vw, 72px); }
}

/* Beranda: bagian-bagian */
.beranda-kurikulum { display: grid; gap: 28px; padding-top: 64px; padding-bottom: 64px; }
.beranda-pengantar p { color: var(--redup); max-width: 34em; }
.beranda-pengantar h2 { margin-bottom: 12px; }
.beranda-pengantar .tombol { margin-top: 4px; }
@media (min-width: 900px) {
  .beranda-kurikulum { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}
.daftar-tahap { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.daftar-tahap a { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 2px 16px; padding: 16px 2px; border-bottom: 1px solid var(--garis); color: var(--tinta); text-decoration: none; }
.daftar-tahap a:hover .tahap-nama { color: var(--hijau); text-decoration: underline; text-decoration-thickness: 2px; }
.daftar-tahap .tahap-no { grid-row: span 2; padding-top: 4px; }
.tahap-no { font-size: 0.875rem; font-weight: 700; color: var(--hijau); }
.tahap-nama { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.tahap-isi { font-size: 0.9375rem; color: var(--redup); }
@media (max-width: 479px) {
  .daftar-tahap a { grid-template-columns: 1fr; }
  .daftar-tahap .tahap-no { grid-row: auto; padding-top: 0; }
}
.progres { padding: 10px 14px; border-radius: 6px; background: var(--hijau-muda); font-size: 0.9375rem; max-width: 34rem; }

.pita { padding: 56px 0 64px; background: var(--halaman); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.pita-kepala { max-width: 44rem; margin-bottom: 24px; }
.pita-kepala h2 { margin-bottom: 8px; }
.pita-kepala p { color: var(--redup); margin: 0; }

.beranda-ai { padding-top: 64px; padding-bottom: 80px; }
.beranda-ai .beranda-pengantar { max-width: 40rem; margin-bottom: 32px; }
.alur { margin: 0; padding: 0; list-style: none; counter-reset: alur; display: grid; gap: 4px; }
.alur li { counter-increment: alur; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--garis); color: var(--redup); }
.alur li::before { content: counter(alur); position: absolute; left: 0; top: 12px; font-size: 1.25rem; font-weight: 800; color: var(--hijau); }
@media (min-width: 900px) {
  .beranda-ai .alur { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .beranda-ai .alur li { padding: 48px 0 0; border-top: 2px solid var(--tinta); }
  .beranda-ai .alur li::before { top: 12px; }
}

/* Daftar amalan */
.daftar-amalan { margin: 0; padding: 0; list-style: none; display: grid; column-gap: 40px; border-top: 1px solid var(--garis); }
.daftar-amalan a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 14px 2px; border-bottom: 1px solid var(--garis); color: var(--tinta); text-decoration: none; }
.daftar-amalan a:hover .judul-amalan { color: var(--hijau); text-decoration: underline; }
.daftar-amalan a[aria-current="page"] { background: var(--hijau-muda); padding-inline: 10px; }
.judul-amalan { font-weight: 700; }
.amalan-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.875rem; color: var(--samar); }
.putusan { color: var(--redup); font-weight: 500; }
@media (min-width: 760px) {
  .pita .daftar-amalan, .halaman-cari > .daftar-amalan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kosong { padding: 20px; border: 1px dashed var(--garis-input); border-radius: 8px; max-width: 40rem; }
.kosong p:last-child { margin: 0; }

/* Halaman baca: modul dan amalan */
.halaman-baca { padding-top: 20px; padding-bottom: 72px; }
.remah { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 0.875rem; color: var(--samar); }
.remah a { padding: 10px 0; }
.baca-kepala { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--garis); }
.baca-kepala .lead { margin-bottom: 8px; }
.baca-kepala > h1, .tanya-kepala h1 { margin-bottom: 12px; }
.urutan { margin: 4px 0 6px; font-size: 0.9375rem; font-weight: 700; color: var(--hijau); }
.urutan-grup { display: inline-block; margin-left: 12px; font-weight: 500; color: var(--samar); }
.judul-baris { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 40px; margin-bottom: 12px; }
.judul-baris h1 { flex: 1 1 20rem; max-width: 22em; }
.judul-arab { margin: 0 0 0 auto; font-family: var(--huruf-kitab); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.5; color: var(--redup); direction: rtl; }
.baca-kepala h1 { max-width: 22em; }
.halaman-amalan .baca-kepala h1 { margin-bottom: 16px; }
.kesimpulan { display: inline-flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 18px; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--halaman); }
.kesimpulan span { font-size: 0.8125rem; color: var(--samar); }
.kesimpulan strong { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }

.baca-tubuh { display: grid; gap: 48px; }
.baca-isi { min-width: 0; max-width: 46rem; }
@media (min-width: 1000px) {
  .baca-tubuh { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 64px; }
  .hamisy { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 4px; }
}

.tujuan { margin-bottom: 36px; padding: 18px 22px; border-radius: 4px; background: var(--hijau-muda); }
.tujuan h2 { margin-bottom: 4px; font-size: 1rem; font-weight: 800; color: var(--hijau); }
.tujuan .isi-md p { font-size: 1.125rem; }
.tujuan .isi-md > :last-child { margin-bottom: 0; }

.bagian-isi { margin-top: 40px; }
.bagian-isi h2 { margin-bottom: 14px; }
.isi-md ul, .isi-md ol { margin: 0 0 1em; padding-left: 1.4em; }
.isi-md li { margin: 0.45em 0; }
.isi-md li::marker { color: var(--hijau); font-weight: 700; }
.isi-md li > ul { margin: 0.3em 0; }
.isi-md > blockquote { margin: 20px 0; padding: 16px 20px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 4px; }
.isi-md > .arab { margin: 0 0 12px; }

/* Penjelasan ulama dan pendapat lain: nama atau label di baris sendiri */
.bagian-penjelasan-ulama .isi-md p, .bagian-pendapat-lain-dan-jawabannya .isi-md p { margin: 0; padding: 14px 0; border-top: 1px solid var(--garis-halus); }
.bagian-penjelasan-ulama .isi-md p > strong:first-child, .bagian-pendapat-lain-dan-jawabannya .isi-md p > strong:first-child { display: block; color: var(--hijau); }
.bagian-penjelasan-ulama .isi-md em { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--samar); }

/* Langkah yang sesuai sunnah: urutan nyata */
.bagian-yang-sesuai-sunnah ol { list-style: none; padding: 0; counter-reset: langkah; }
.bagian-yang-sesuai-sunnah ol li { counter-increment: langkah; display: grid; grid-template-columns: 2.25rem 1fr; margin: 0; padding: 12px 0; border-top: 1px solid var(--garis-halus); }
.bagian-yang-sesuai-sunnah ol li::before { content: counter(langkah); font-weight: 800; color: var(--hijau); }

/* Sumber rangkuman: artikel asal materi, nama situs di belakang judul */
.bagian-sumber-rangkuman .isi-md ul { padding: 0; list-style: none; }
.bagian-sumber-rangkuman .isi-md li { margin: 0; padding: 10px 0; border-top: 1px solid var(--garis-halus); color: var(--samar); font-size: 0.9375rem; }
.bagian-sumber-rangkuman .isi-md li a { font-weight: 600; }

/* Pertanyaan pemahaman */
.uji-ket { color: var(--samar); font-size: 0.9375rem; }
.uji { margin: 0; padding: 0; list-style: none; counter-reset: uji; display: grid; gap: 10px; }
.uji > li { counter-increment: uji; position: relative; padding: 14px 18px 4px 50px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 8px; }
.uji > li::before { content: counter(uji); position: absolute; left: 18px; top: 14px; font-weight: 800; color: var(--hijau); }
.uji-tanya { margin: 0; font-weight: 700; }
.uji summary { display: flex; align-items: center; gap: 6px; min-height: 44px; width: fit-content; cursor: pointer; list-style: none; color: var(--hijau); font-weight: 700; font-size: 0.9375rem; }
.uji summary::-webkit-details-marker { display: none; }
.uji summary::before { content: "+"; width: 1em; font-size: 1.125rem; }
.uji details[open] summary::before { content: "\2212"; }
.uji .saat-buka, .uji details[open] .saat-tutup { display: none; }
.uji details[open] .saat-buka { display: inline; }
.uji details p { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px; background: var(--hijau-muda); }

.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; }

/* Kotak tanya AI di halaman modul dan amalan */
.kotak-tanya { margin-top: 40px; padding: 22px clamp(16px, 3vw, 28px) 24px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 12px; }
.kotak-tanya h2 { margin-bottom: 6px; font-size: 1.3125rem; }
.kotak-ket { color: var(--redup); font-size: 0.9375rem; }
.kotak-tanya .percakapan { margin-bottom: 18px; }

/* Percakapan tanya jawab */
.percakapan { display: flex; flex-direction: column; gap: 16px; }
.percakapan:empty { display: none; }
.tanya-saya { align-self: flex-end; max-width: min(85%, 36rem); margin: 0; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--hijau); color: var(--di-hijau); white-space: pre-wrap; }
.jawaban { padding: 16px 18px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 8px; }
.kotak-tanya .jawaban { background: var(--kertas); }
.jawaban-label { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--hijau); }
.jawaban-isi > :last-child { margin-bottom: 0; }
.jawaban-isi ul, .jawaban-isi ol { padding-left: 1.3em; }
.jawaban-isi p:has(> strong:only-child) { margin: 1.1em 0 0.3em; }
.rujuk { line-height: 0; }
.rujuk a { padding: 0 2px; font-weight: 700; font-size: 0.8em; text-decoration: none; }
.rujuk a:hover { text-decoration: underline; }
.memuat { margin: 0; color: var(--samar); }
.memuat-ket { margin: 4px 0 0; font-size: 0.875rem; color: var(--samar); }
.jawaban.galat, .jawaban.tidak-ada { background: var(--awas-latar); border-color: transparent; color: var(--awas-teks); }
.jawaban.galat .tombol, .jawaban.tidak-ada .tombol { margin-top: 4px; }
.jawaban.tidak-ada .tombol.garis, .jawaban.galat .tombol.garis { color: var(--awas-teks); border-color: currentColor; }
.daftar-sumber { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--garis); list-style: none; font-size: 0.9375rem; }
.daftar-sumber-judul { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--garis); font-size: 0.875rem; font-weight: 700; }
.daftar-sumber-judul + .daftar-sumber { margin-top: 6px; padding-top: 0; border-top: 0; }
.daftar-sumber li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); }
.daftar-sumber .nomor { font-weight: 800; color: var(--hijau); }
.daftar-sumber .rujukan { display: block; color: var(--samar); font-size: 0.875rem; }
.daftar-sumber li:target { background: var(--hijau-muda); border-radius: 4px; }

/* Halaman Tanya AI */
.halaman-tanya { max-width: 52rem; padding-top: 32px; }
.tanya-kepala { margin-bottom: 24px; }
.tanya-kepala .lead { font-size: 1.0625rem; }
.percakapan-penuh { min-height: 8rem; padding-bottom: 16px; }
.percakapan-kosong { padding: 20px; border: 1px dashed var(--garis-input); border-radius: 8px; }
.contoh { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tombol-contoh { min-height: 44px; padding: 8px 12px; border: 1px solid var(--garis); border-radius: 6px; background: var(--halaman); color: var(--tinta); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; }
.tombol-contoh:hover { border-color: var(--hijau); color: var(--hijau); }
.form-tanya-lekat { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 calc(14px + env(safe-area-inset-bottom)); background: var(--kertas); border-top: 1px solid var(--garis); }

/* Daftar isi kurikulum */
.daftar-isi { padding-top: 32px; padding-bottom: 72px; }
.daftar-isi-kepala { max-width: 46rem; margin-bottom: 8px; }
.daftar-isi-kepala h1 { margin-bottom: 12px; }
.daftar-isi .tahap { max-width: 60rem; margin-top: 44px; }
.daftar-isi .tahap h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); }
.daftar-modul { margin: 0; padding: 0; list-style: none; }
.daftar-modul a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; padding: 16px 2px; border-bottom: 1px solid var(--garis); color: var(--tinta); text-decoration: none; }
.daftar-modul a:hover .judul-modul { color: var(--hijau); text-decoration: underline; }
.daftar-modul .no { font-weight: 800; color: var(--samar); font-variant-numeric: tabular-nums; padding-top: 1px; }
.modul-teks { display: flex; flex-direction: column; align-items: flex-start; }
.judul-modul { font-weight: 700; font-size: 1.0625rem; }
.ringkas { color: var(--redup); font-size: 0.9375rem; }
.modul-arab { font-family: var(--huruf-kitab); font-size: 1.375rem; line-height: 1.5; color: var(--redup); text-align: right; }
.daftar-modul li.selesai .no, .hamisy-daftar li.selesai .no { color: var(--hijau); }
@media (max-width: 639px) {
  .daftar-modul a { grid-template-columns: 2rem minmax(0, 1fr); gap: 2px 12px; }
  .modul-arab { grid-column: 2; justify-self: start; font-size: 1.25rem; }
}

/* Modul berseri (Thaharah, Shalat, ...): satu judul grup, judul modul tanpa awalan */
.grup-judul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 28px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--garis); font-size: 1.0625rem; font-weight: 800; color: var(--hijau); }
.grup-judul span { font-size: 0.8125rem; font-weight: 600; color: var(--samar); }
.daftar-isi .tahap { scroll-margin-top: 16px; }

/* Peta tahap: di samping daftar pada layar lebar, di atas daftar pada ponsel */
.daftar-isi-tubuh { display: grid; gap: 8px; margin-top: 28px; }
.peta-tahap { font-size: 0.9375rem; }
.peta-tahap h2 { margin-bottom: 10px; font-size: 1.0625rem; }
.peta-tahap ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.peta-tahap a { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--garis-halus); color: var(--tinta); text-decoration: none; line-height: 1.4; }
.peta-no { font-size: 0.8125rem; font-weight: 700; color: var(--hijau); }
.peta-nama { font-weight: 700; }
.peta-jumlah { font-size: 0.8125rem; color: var(--samar); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.peta-tahap a:hover .peta-nama { color: var(--hijau); text-decoration: underline; }
.peta-tahap li.tuntas .peta-jumlah { color: var(--hijau); font-weight: 700; }
@media (min-width: 1000px) {
  .daftar-isi-tubuh { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 64px; align-items: start; }
  .daftar-isi-isi { grid-column: 1; grid-row: 1; }
  .daftar-isi-isi > .tahap:first-child { margin-top: 8px; }
  .peta-tahap { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .peta-tahap a { grid-template-columns: minmax(0, 1fr) auto; }
  .peta-no { grid-column: 1; }
  .peta-nama { grid-column: 1; }
  .peta-jumlah { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Hamisy: catatan pinggir di samping isi */
.hamisy { font-size: 0.9375rem; }
.hamisy h2 { margin-bottom: 10px; font-size: 1.0625rem; }
.hamisy h2 span { display: block; font-size: 0.8125rem; color: var(--hijau); }
.hamisy-daftar { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.hamisy-daftar + .hamisy-daftar { border-top: 0; }
.hamisy-grup { margin: 16px 0 0; padding: 0 4px 6px; font-size: 0.8125rem; font-weight: 700; color: var(--hijau); }
.hamisy-daftar a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 6px; padding: 10px 8px 10px 4px; border-bottom: 1px solid var(--garis-halus); color: var(--redup); text-decoration: none; line-height: 1.45; }
.hamisy-daftar a:hover { color: var(--hijau); }
.hamisy-daftar .judul-modul { font-size: inherit; font-weight: 500; }
.hamisy-daftar a[aria-current="page"] { background: var(--hijau-muda); color: var(--tinta); }
.hamisy-daftar a[aria-current="page"] .judul-modul { font-weight: 700; }
.hamisy-daftar .no { color: var(--samar); font-weight: 700; font-variant-numeric: tabular-nums; }
.hamisy-daftar .tanda-selesai { grid-column: 2; justify-self: start; }
.hamisy .daftar-amalan a { padding: 10px 6px; }
.hamisy .judul-amalan { font-weight: 500; line-height: 1.45; }
.hamisy .daftar-amalan a[aria-current="page"] .judul-amalan { font-weight: 700; }
.hamisy .putusan { display: none; }
.hamisy-semua { display: inline-block; margin-top: 10px; padding: 10px 0; font-weight: 700; }

/* Bacaan lanjutan dan navigasi modul */
.bacaan { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--garis); }
.bacaan h2 { margin-bottom: 8px; font-size: 1.125rem; }
.daftar-bacaan { margin: 0 0 12px; padding: 0; list-style: none; }
.daftar-bacaan li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--garis-halus); }
.daftar-bacaan a { font-weight: 700; }
.daftar-bacaan span { font-size: 0.875rem; color: var(--samar); }
.cari-situs { margin: 0; color: var(--redup); font-size: 0.9375rem; }
.cari-situs a { display: inline-block; padding: 6px 0; }
.langkah { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.langkah a { display: flex; flex-direction: column; padding: 8px 0; color: var(--tinta); font-weight: 700; text-decoration: none; line-height: 1.4; }
.langkah a:hover { color: var(--hijau); }
.langkah a span { margin-bottom: 2px; font-size: 0.8125rem; font-weight: 500; color: var(--samar); }
.langkah .kanan { grid-column: 2; text-align: right; }
@media (max-width: 559px) {
  .langkah { grid-template-columns: 1fr; gap: 4px; }
  .langkah .kanan { grid-column: 1; text-align: left; }
}

/* Hasil langsung dari situs rujukan (Rumaysho.com, Dewan Fatwa) */
.cari-luar { margin-top: 4px; }
.cari-luar:empty { display: none; }
.grup-luar { margin-top: 18px; }
.grup-luar:first-child { margin-top: 6px; }
.grup-luar-judul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.grup-luar-jenis { font-size: 0.75rem; font-weight: 700; color: var(--hijau); }
.daftar-luar { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.daftar-luar li { padding: 12px 0 6px; border-bottom: 1px solid var(--garis-halus); }
.judul-luar { font-weight: 700; line-height: 1.4; }
.tanggal-luar { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--samar); }
.ringkas-luar { margin: 4px 0 0; font-size: 0.9375rem; color: var(--redup); }
.tanya-luar { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 700; }
.semua-luar { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; }
.kosong-luar { margin: 0; padding: 4px 0; color: var(--redup); font-size: 0.9375rem; }
.cari-luar > .cari-situs { margin-top: 16px; }
.hasil-dua { display: grid; gap: 40px; }
.hasil-dua h2 { margin-bottom: 8px; font-size: 1.3125rem; }
.hasil-ket { color: var(--redup); font-size: 0.9375rem; max-width: 40em; }
@media (min-width: 960px) {
  .hasil-dua { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
}
.artikel-konteks { margin-top: 8px; padding: 14px 18px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 8px; }
.artikel-konteks p { margin: 0; }
.artikel-konteks a { font-weight: 700; }
.artikel-konteks-label { font-size: 0.875rem; color: var(--samar); }
.artikel-konteks .meta + .artikel-konteks-label { margin-top: 12px; }
.artikel-konteks .contoh { margin-top: 6px; }

/* Halaman cari amalan */
.halaman-cari { padding-top: 32px; padding-bottom: 72px; }
.cari-kepala { max-width: 46rem; margin-bottom: 28px; }
.cari-kepala h1 { margin-bottom: 12px; }
.cari-kepala .cari { max-width: 40rem; }
.hasil-cari { color: var(--redup); font-size: 0.9375rem; }

/* Halaman metodologi */
.tentang-isi { max-width: 46rem; }
.tentang-isi section { margin-top: 40px; }
.tentang-isi section:first-child { margin-top: 0; }
.tentang-isi h2 { margin-bottom: 12px; }
.prinsip { margin: 0; display: grid; gap: 4px 28px; }
.prinsip dt { font-weight: 700; padding-top: 12px; border-top: 1px solid var(--garis); }
.prinsip dd { margin: 0 0 8px; color: var(--redup); }
@media (min-width: 720px) {
  .prinsip { grid-template-columns: 13rem minmax(0, 1fr); }
  .prinsip dd { padding-top: 12px; border-top: 1px solid var(--garis); margin: 0; }
}
.sumber-daftar { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.sumber-daftar li { padding: 12px 0; border-bottom: 1px solid var(--garis); }
.sumber-daftar a { font-weight: 700; }
.sumber-daftar span { display: block; font-size: 0.9375rem; color: var(--samar); }
.form-lapor { margin-top: 16px; padding: 20px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 12px; }
.form-lapor .tombol { align-self: flex-start; margin-top: 4px; }

/* Kaki halaman: sampul belakang */
.kaki { padding: 48px 0 32px; background: var(--sampul); color: var(--di-sampul); }
.kaki a { color: #FFFFFF; }
.kaki a:hover { color: #FFFFFF; }
.kaki :focus-visible { outline-color: #FFFFFF; }
.kaki-hadits { margin: 0 0 36px; padding-bottom: 32px; border-bottom: 1px solid rgba(207, 231, 220, 0.28); text-align: center; }
.kaki-hadits .bintang { margin: 0 auto 6px; }
.kaki-hadits .arab { text-align: center; color: #FFFFFF; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
.kaki-hadits figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.kaki-hadits .terjemah { color: #FFFFFF; font-size: 1.1875rem; }
.kaki-hadits cite { font-style: normal; font-size: 0.875rem; font-weight: 700; align-self: center; }
.kaki-kolom { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.kaki h2 { margin-bottom: 4px; font-size: 1rem; color: #FFFFFF; }
.kaki-ket { margin-bottom: 6px; font-size: 0.875rem; }
.kaki ul { margin: 0; padding: 0; list-style: none; }
.kaki li a { display: inline-block; padding: 8px 0; }
.kaki-catatan { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid rgba(207, 231, 220, 0.28); font-size: 0.875rem; }

/* Admin */
.admin { padding-top: 32px; padding-bottom: 72px; }
.admin h1 { margin-bottom: 16px; }
.admin h2 { margin: 40px 0 12px; }
.admin .cari { max-width: 32rem; }
.sukses { padding: 12px 16px; border-radius: 6px; background: var(--hijau-muda); }
.tabel-wadah { overflow-x: auto; margin-bottom: 12px; background: var(--halaman); border: 1px solid var(--garis); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--garis-halus); text-align: left; vertical-align: top; }
th { font-weight: 700; background: var(--kertas); }
.admin form.baris { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0 16px; }
.admin form.baris label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 0.875rem; }
.admin .lebar { flex: 1 1 20rem; }
.admin td form { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.daftar-masuk { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.daftar-masuk li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.daftar-masuk li > div { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; }
.daftar-masuk span { font-size: 0.875rem; color: var(--samar); }
.laporan { font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .kepala, .kaki, .aksi, .kotak-tanya, .hamisy, .langkah, .lewati, .uji summary { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .uji details > p { display: block; }
  .dalil { break-inside: avoid; }
}