/* Simply Sirah — sistem reka bentuk "Gabungan"
   Krim & sage yang lembut (mesra keluarga), serif Fraunces untuk tajuk,
   terakota sebagai aksen. Nama pemboleh ubah dikekalkan supaya semua halaman ikut. */
:root {
  --hijau: #3f6b53;        /* sage — warna jenama */
  --hijau-tua: #2e3a33;    /* dakwat gelap / latar gelap */
  --hijau-muda: #e1eee5;   /* latar kotak nota editor */
  --emas: #a84a30;         /* terakota — aksen teks */
  --emas-terang: #f6d58e;  /* kuning mentega — aksen atas latar gelap */
  --emas-pudar: #f6ecd0;   /* latar kotak khilaf */
  --kertas: #fbf6ee;       /* latar halaman: krim */
  --putih: #fffdf9;
  --dakwat: #2e3a33;       /* teks utama */
  --dakwat-2: #5a645e;     /* teks sekunder */
  --garis: #e8dfd0;
  --lapis: #2f6176;        /* warna rujukan/sumber */
  --pic: #fde3d8;
  --ungu: #ece4f6;
  --ungu-tua: #6c4f99;
  --biru: #dceaf0;
  --pasir: #f2dcae;

  --f-serif: "Fraunces", Georgia, serif;
  --f-sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-arab: "Amiri", "Traditional Arabic", serif;

  --baca: 40rem;
  --lebar: 76rem;
  --r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--dakwat);
  font: 400 1.125rem/1.65 var(--f-sans);
  font-feature-settings: "kern", "liga";
}
img { max-width: 100%; height: auto; }
a { color: var(--hijau); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--hijau-tua); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-serif); line-height: 1.15; margin: 0 0 0.5em; color: var(--hijau-tua); }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.95rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.langkau { position: absolute; left: -999px; top: 0; background: var(--emas); color: var(--hijau-tua); padding: .5rem 1rem; z-index: 10; }
.langkau:focus { left: 1rem; }
.ar { font-family: var(--f-arab); }
.saw { font: normal 400 .55em/1 var(--f-arab); vertical-align: .2em; white-space: nowrap; }

/* ---------- Kepala ---------- */
.kepala { background: var(--kertas); color: var(--dakwat); border-bottom: 1px solid var(--garis); position: relative; }
.kepala-dalam { max-width: var(--lebar); margin: 0 auto; padding: .9rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.jenama { display: flex; align-items: center; gap: .7rem; color: var(--dakwat); text-decoration: none; }
.jenama img { border-radius: 14px; }
.jenama-teks { display: flex; flex-direction: column; font: 700 1.4rem/1.1 var(--f-serif); }
.jenama-teks small { font: 600 .82rem var(--f-sans); color: var(--dakwat-2); }
.jenama:hover { color: var(--hijau); }
.nav { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.nav ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--dakwat); text-decoration: none; padding: .55rem .85rem; border-radius: 999px; font-weight: 700; display: inline-block; }
.nav a:hover { background: #efe6d6; color: var(--dakwat); }
.nav a[aria-current="page"] { background: var(--hijau); color: #fff; }
.nav-cari { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid var(--garis); min-height: 44px; }
.menu-togol { display: none; margin-left: auto; background: var(--hijau-tua); color: #fff; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font: 700 1rem var(--f-sans); min-height: 44px; }
@media (max-width: 1200px) {
  .menu-togol { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kertas); border-bottom: 1px solid var(--garis); flex-direction: column; align-items: stretch; padding: .5rem 1.25rem 1rem; z-index: 5; }
  .nav.buka { display: flex; }
  .nav ul { flex-direction: column; }
  .nav a { display: block; }
}

main { display: block; }
.halaman-kepala, .seksyen, .penapis, .garis, .nasab, .tokoh-senarai, .tempat-susun, .jadual, .buku-senarai, .cari-halaman, .cari-hasil, #cari-status, .artikel, .profil, .lebar-baca, .janji, .kelas-cta, .pintu { max-width: var(--lebar); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.halaman-kepala { padding-top: 3.5rem; padding-bottom: 1.5rem; }
.halaman-kepala p { max-width: var(--baca); font-size: 1.2rem; color: var(--dakwat-2); }
.lebar-baca > * { max-width: var(--baca); }
.lebar-baca > table { max-width: none; }
.nota-kecil { font-size: .95rem; color: var(--dakwat-2); }

/* ---------- Butang & cip ---------- */
.butang { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; background: var(--hijau); color: #fff; text-decoration: none; padding: 0 1.4rem; border-radius: 999px; font: 800 1rem var(--f-sans); border: 2px solid var(--hijau); cursor: pointer; }
.butang:hover { background: var(--hijau-tua); border-color: var(--hijau-tua); color: #fff; }
.butang-garis { background: transparent; color: var(--hijau-tua); border-color: var(--garis); }
.butang-garis:hover { background: #efe6d6; color: var(--hijau-tua); border-color: #efe6d6; }
.butang-lembut { background: var(--kertas); color: var(--dakwat); border-color: var(--kertas); }
.butang-lembut:hover { background: #efe6d6; color: var(--dakwat); border-color: #efe6d6; }
.butang-kuning { background: var(--emas-terang); color: var(--hijau-tua); border-color: var(--emas-terang); }
.butang-kuning:hover { background: #fff; color: var(--hijau-tua); border-color: #fff; }
.aksi-baris { display: flex; flex-wrap: wrap; gap: .75rem; }
.penapis { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1.5rem; }
.cip { font: 500 1rem var(--f-sans); background: var(--putih); color: var(--dakwat); border: 1px solid var(--garis); padding: .35rem .85rem; border-radius: 999px; cursor: pointer; }
.cip span { color: var(--dakwat-2); font-size: .9em; margin-left: .2rem; }
.cip[aria-pressed="true"] { background: var(--hijau); border-color: var(--hijau); color: var(--putih); }
.cip[aria-pressed="true"] span { color: var(--emas-terang); }

/* ---------- Carian (404, /cari/) ---------- */
.hero-cari { display: flex; gap: .5rem; max-width: 40rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero-cari input { flex: 1 1 16rem; min-width: 0; font: 1.1rem var(--f-sans); padding: .85rem 1.2rem; border-radius: 999px; border: 2px solid var(--garis); background: var(--putih); color: var(--dakwat); min-height: 52px; }
.hero-cari input:focus { outline: none; border-color: var(--hijau); }
.hero-cari button { font: 800 1.05rem var(--f-sans); padding: 0 1.6rem; border-radius: 999px; border: 0; background: var(--hijau); color: #fff; cursor: pointer; min-height: 52px; }
.hero-cari button:hover { background: var(--hijau-tua); }
.cari-halaman { margin-top: 0; }

/* ---------- Laman utama ---------- */
.label-kuning { display: inline-block; background: var(--emas-terang); color: #5a4211; border-radius: 999px; padding: .3rem 1rem; font-weight: 800; font-size: .95rem; margin: 0 0 1rem; }
.u-hero { max-width: 58rem; margin: 0 auto; padding: 3rem 1.25rem 2rem; text-align: center; }
.u-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 3.9rem); line-height: 1.06; margin-bottom: .4em; }
.u-hero h1 em { font-weight: 500; color: var(--hijau); }
.u-hero-sub { font-size: 1.25rem; color: var(--dakwat-2); max-width: 38rem; margin: 0 auto; }

.jelajah, .u-seksyen { max-width: var(--lebar); margin: 0 auto; padding: 0 1.25rem 4rem; }
.jelajah-kotak { background: var(--putih); border-radius: 36px; padding: 1.25rem; box-shadow: 0 2px 0 #efe6d6, 0 24px 48px rgba(63,107,83,.10); }
.jelajah-peta { position: relative; height: clamp(260px, 38vw, 440px); border-radius: 26px; background: var(--pasir); overflow: hidden; }
.jelajah-peta svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jelajah-peta polyline { fill: none; stroke: #b4532a; stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bukit { position: absolute; border-radius: 50%; background: #eccf94; }
.b1 { right: -50px; top: -50px; width: 240px; height: 240px; }
.b2 { left: -60px; bottom: -90px; width: 360px; height: 230px; }
.b3 { right: 15%; bottom: -70px; width: 300px; height: 180px; background: #e8c584; }
.henti { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; font: 800 .9rem var(--f-sans); color: var(--dakwat); }
.henti-no { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--f-serif); color: #fff; background: var(--hijau); border: 4px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); transition: transform .15s, background .15s; }
.henti[aria-pressed="true"] .henti-no { background: #b4532a; transform: scale(1.3); }
.henti:hover .henti-no { transform: scale(1.15); }
.henti-nama { background: #fff; border-radius: 8px; padding: .05rem .6rem; white-space: nowrap; }
.jelajah-nota { position: absolute; left: 1.25rem; top: .9rem; margin: 0; font-weight: 800; font-size: .9rem; color: #7a5a2c; }
.jelajah-info { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; padding: 1.4rem 1rem .4rem; }
.jelajah-usia { width: 68px; height: 68px; border-radius: 20px; background: var(--hijau); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 .7rem var(--f-sans); flex: none; }
.jelajah-usia b { font: 700 1.65rem/1 var(--f-serif); }
.jelajah-teks { flex: 1 1 24rem; min-width: 0; }
.jelajah-teks h3 { font-size: 1.75rem; margin: 0 0 .2rem; }
.jelajah-teks p { margin: 0 0 .3rem; color: var(--dakwat-2); }
.jelajah-teks a { font-weight: 800; }
.jelajah-teks .jelajah-tarikh { font-size: .9rem; font-weight: 800; color: var(--emas); }
.jelajah-butang { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 640px) { .henti-nama { display: none; } .henti-no { width: 32px; height: 32px; font-size: .9rem; } }

.u-tajuk { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem); margin: 0; letter-spacing: -.01em; }
.u-sub { margin: .3rem 0 1.4rem; color: var(--dakwat-2); }
.u-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.laluan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .laluan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .laluan-grid { grid-template-columns: minmax(0, 1fr); } }
.laluan { border-radius: 28px; padding: 1.6rem; text-decoration: none; color: var(--dakwat); display: flex; flex-direction: column; gap: .45rem; transition: transform .15s; }
.laluan:hover { transform: translateY(-3px); color: var(--dakwat); }
.laluan-ikon { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; }
.laluan-nama { font: 700 1.4rem/1.15 var(--f-serif); }
.laluan-ket { font-size: 1rem; color: var(--dakwat-2); }
.l-pic { background: var(--pic); } .l-pic .laluan-ikon { color: #c0573a; }
.l-sage { background: var(--hijau-muda); } .l-sage .laluan-ikon { color: var(--hijau); }
.l-ungu { background: var(--ungu); } .l-ungu .laluan-ikon { color: var(--ungu-tua); }
.l-biru { background: var(--biru); } .l-biru .laluan-ikon { color: var(--lapis); }
.l-putih { background: #fff; }
.l-ungu-tua { background: var(--ungu-tua); color: #fff; } .l-ungu-tua:hover { color: #fff; } .l-ungu-tua .laluan-ket { color: var(--ungu); }

.siri-baris { display: flex; gap: .5rem; flex-wrap: wrap; }
.siri { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; text-decoration: none; color: var(--dakwat); font-weight: 700; font-size: .95rem; }
.siri span { color: var(--dakwat-2); font-weight: 600; }
.siri:hover { outline: 2px solid var(--dakwat); color: var(--dakwat); }
.siri-0 { background: var(--pic); } .siri-1 { background: var(--hijau-muda); } .siri-2 { background: var(--emas-pudar); } .siri-3 { background: var(--biru); } .siri-4 { background: var(--ungu); }
.majalah { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.majalah-utama { flex: 1 1 36rem; min-width: 0; text-decoration: none; color: var(--dakwat); display: flex; flex-direction: column; }
.majalah-gambar { display: block; height: clamp(200px, 26vw, 340px); border-radius: 28px; background: #ebddc8; position: relative; overflow: hidden; margin-bottom: 1.1rem; }
.majalah-gambar span { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; background: #dcc7a6; border-radius: 16px; transform: rotate(45deg); box-shadow: 0 0 0 26px rgba(220,199,166,.35); }
.majalah-kat { font-weight: 800; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--emas); }
.majalah-tajuk { font: 700 clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem)/1.12 var(--f-serif); margin: .3rem 0 .5rem; letter-spacing: -.01em; }
.majalah-utama:hover .majalah-tajuk { text-decoration: underline; text-decoration-color: var(--emas); text-decoration-thickness: 2px; }
.majalah-ringkas { font-size: 1.15rem; color: var(--dakwat-2); }
.majalah-sisi { flex: 1 1 20rem; min-width: 0; }
.majalah-sisi h3 { font-size: 1.35rem; padding-bottom: .6rem; border-bottom: 2px solid var(--dakwat); margin: 0; }
.majalah-sisi ol { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.majalah-sisi li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--garis); }
.majalah-no { font: 700 2rem/1 var(--f-serif); color: var(--emas); }
.majalah-sisi a { text-decoration: none; color: var(--dakwat); }
.majalah-sisi-tajuk { display: block; font: 700 1.15rem/1.3 var(--f-serif); }
.majalah-sisi a:hover .majalah-sisi-tajuk { text-decoration: underline; }
.majalah-sisi-kat { font-size: .9rem; color: var(--dakwat-2); }

.wanita { background: #f3e9f6; padding-top: 4rem; margin-bottom: 4rem; }
.petikan { max-width: 52rem; margin: 3rem auto 0; text-align: center; }
.petikan blockquote { margin: 0 0 .8rem; font: italic 500 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.4 var(--f-serif); }
.petikan figcaption { font-size: .95rem; color: var(--dakwat-2); }

.kuiz { background: var(--hijau-tua); color: #fff; border-radius: 36px; padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; gap: 2.5rem; flex-wrap: wrap; }
.kuiz-soalan { flex: 1 1 22rem; min-width: 0; }
.kuiz-soalan h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.kuiz-jawapan { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.kuiz-pilihan { min-height: 54px; border-radius: 16px; font: 700 1.05rem var(--f-sans); cursor: pointer; padding: .5rem 1.1rem; text-align: left; display: flex; align-items: center; gap: .8rem; border: 2px solid #56645c; background: #3a4740; color: #fff; }
.kuiz-pilihan span { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--kertas); color: var(--dakwat); display: grid; place-items: center; font-weight: 800; }
.kuiz-pilihan:hover { border-color: #9fc2ad; }
.kuiz-pilihan.betul { background: var(--hijau-muda); border-color: #9fc2ad; color: var(--dakwat); }
.kuiz-pilihan.salah { background: var(--pic); border-color: #f5c3b3; color: var(--dakwat); }
.kuiz-maklum { padding: .9rem 1.1rem; border-radius: 14px; color: var(--dakwat); font-weight: 700; margin: 0; }
.kuiz-maklum[hidden] { display: none; }
.kuiz-maklum.betul { background: var(--hijau-muda); } .kuiz-maklum.salah { background: var(--pic); }
.kuiz-maklum a { color: var(--hijau); }

.u-dua { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.rak { flex: 1 1 34rem; min-width: 0; background: #fff; border-radius: 32px; padding: 2rem; display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: center; }
.rak > div:first-child { flex: 1 1 12rem; }
.rak h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.rak p { color: var(--dakwat-2); }
.rak-buku { flex: 2 1 18rem; display: flex; gap: .6rem; align-items: flex-end; }
.rak-buku span { flex: 1; min-width: 0; border-radius: 4px 8px 8px 4px; color: #fff; font: 700 .64rem/1.2 var(--f-sans); padding: .45rem .4rem; display: flex; align-items: flex-end; box-shadow: inset 5px 0 0 rgba(0,0,0,.15); overflow: hidden; }
.rak-0 { height: 160px; background: #2f6176; } .rak-1 { height: 180px; background: var(--ungu-tua); } .rak-2 { height: 150px; background: #b4532a; } .rak-3 { height: 170px; background: var(--hijau); } .rak-4 { height: 145px; background: #8a6a28; }
.kelas-kad { flex: 1 1 22rem; min-width: 0; background: var(--hijau); color: #fff; border-radius: 32px; padding: 2rem; }
.kelas-kad h2 { color: #fff; font-size: 1.8rem; }
.kelas-kad p { color: #e1eee5; }
.kelas-kad .label-kuning { color: #5a4211; }

/* Seksyen (halaman artikel: bacaan berkaitan) */
.seksyen { padding-top: 3.5rem; padding-bottom: 1rem; }
.seksyen-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--garis); margin-bottom: 1.5rem; }
.seksyen-kepala a { font-weight: 700; }

/* Kad artikel */
.artikel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.artikel-grid-penuh { padding: 0 1.25rem 4rem; max-width: var(--lebar); margin: 0 auto; }
@media (max-width: 760px) { .artikel-grid { grid-template-columns: 1fr; } }
.kad-artikel { background: var(--putih); border: 1px solid var(--garis); border-radius: 24px; padding: 1.4rem 1.5rem; transition: transform .15s; }
.kad-artikel:hover { transform: translateY(-2px); }
.kad-artikel[hidden] { display: none; }
.kad-meta { font-size: .95rem; color: var(--dakwat-2); margin-bottom: .35rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.kad-kat { color: var(--emas); font-weight: 800; }
.kad-artikel h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.kad-artikel h3 a { color: var(--hijau-tua); text-decoration: none; }
.kad-artikel h3 a:hover { text-decoration: underline; text-decoration-color: var(--emas); }
.kad-ringkas { color: var(--dakwat-2); margin-bottom: .4rem; }
.kad-penulis { font-size: .95rem; margin: 0; }
.kad-ruj { color: var(--lapis); margin-left: .5rem; }
.pautan-kuat { font-weight: 800; }

/* ---------- Rujukan & kotak ---------- */
.ruj { text-decoration: none; color: var(--lapis); white-space: normal; }
.ruj-no { display: inline-block; min-width: 1.35em; padding: 0 .3em; margin-left: .15em; font: 700 .72em/1.5 var(--f-sans); text-align: center; color: var(--putih); background: var(--lapis); border-radius: 3px; vertical-align: .35em; }
.ruj-teks { font: .82em var(--f-sans); margin-left: .3em; border-bottom: 1px dotted var(--lapis); }
.ruj:hover .ruj-teks { border-bottom-style: solid; }
.khilaf, .nota-editor { display: block; font: 1rem/1.6 var(--f-sans); padding: .9rem 1.1rem; margin: 1.5rem 0; border-radius: 0 var(--r) var(--r) 0; }
.khilaf { background: var(--emas-pudar); border-left: 4px solid var(--emas); }
.khilaf strong { color: #7a5d1f; }
.nota-editor { background: var(--hijau-muda); border-left: 4px solid var(--hijau); }
.nota-editor::before { content: "Nota editor. "; font-weight: 700; color: var(--hijau); }
.khilaf p:last-child, .nota-editor p:last-child { margin-bottom: 0; }

/* ---------- Artikel ---------- */
.artikel-kepala { max-width: 52rem; padding-top: 3.5rem; padding-bottom: 1rem; }
.artikel-kat { font-weight: 700; margin-bottom: .5rem; }
.artikel-kat a { text-decoration: none; }
.artikel-ringkas { font: italic 1.35rem/1.5 var(--f-serif); color: var(--dakwat-2); }
.artikel-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.5rem 0 0; padding: 1rem 0; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.artikel-meta dt { font-size: .85rem; color: var(--dakwat-2); }
.artikel-meta dd { margin: 0; font-weight: 700; }
.artikel-badan { display: grid; grid-template-columns: minmax(0, var(--baca)) 17rem; gap: 4rem; padding-top: 2rem; }
@media (max-width: 1000px) { .artikel-badan { grid-template-columns: 1fr; gap: 2rem; } }
.prosa { font: 1.22rem/1.78 var(--f-serif); }
.prosa h2 { margin-top: 2.2rem; font-size: 1.7rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--garis); color: var(--dakwat-2); font-style: italic; }
.prosa blockquote.ar { font: normal 1.6rem/2 var(--f-arab); direction: rtl; text-align: right; color: var(--hijau-tua); border-left: 0; border-right: 3px solid var(--emas); padding: .3rem 1.2rem .3rem 0; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .35rem; }
.prosa table { border-collapse: collapse; width: 100%; font: 1rem var(--f-sans); margin: 1rem 0 1.5rem; }
.prosa th, .prosa td { text-align: left; border-bottom: 1px solid var(--garis); padding: .5rem .6rem .5rem 0; vertical-align: top; }
.artikel-sisi { font-size: 1rem; }
.artikel-sisi section { position: relative; padding: 1rem 0; border-top: 2px solid var(--hijau); margin-bottom: 1.5rem; }
.artikel-sisi h2 { font-size: 1.15rem; }
.artikel-sisi h3 { font-size: .95rem; font-family: var(--f-sans); color: var(--dakwat-2); margin: .8rem 0 .2rem; }
.artikel-sisi ul { list-style: none; padding: 0; margin: 0; }
.artikel-sisi li { margin-bottom: .25rem; }
.semakan h2::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .45rem; background: var(--hijau); vertical-align: .1em; }
.semakan-perlu-semakan h2::before, .semakan-draf h2::before { background: var(--emas); }
.semakan-nota { color: var(--dakwat-2); }
@media (min-width: 1001px) { .semakan { position: sticky; top: 1rem; } }
.senarai-rujukan { max-width: calc(var(--baca)); margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--lapis); }
.senarai-rujukan ol { padding-left: 1.6rem; }
.senarai-rujukan li { padding: .2rem 0; }
.senarai-rujukan li:target { background: #e3e9f3; }

/* ---------- Garis masa ---------- */
.garis { list-style: none; padding-top: .5rem; padding-bottom: 3rem; }
.garis-era { padding: 2.5rem 0 .5rem; }
.garis-era h2 { margin: 0; font-size: 1.4rem; color: var(--emas); }
.peristiwa { display: grid; grid-template-columns: 6.5rem minmax(0, var(--baca)); gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--garis); scroll-margin-top: 1rem; }
.peristiwa[hidden], .garis-era[hidden] { display: none; }
.peristiwa:target { background: linear-gradient(90deg, var(--emas-pudar), transparent 80%); }
.peristiwa-usia { text-align: right; border-right: 3px solid var(--hijau); padding-right: 1rem; }
.usia-angka { display: block; font: 800 2.6rem/1 var(--f-serif); color: var(--hijau); font-variant-numeric: lining-nums; }
.usia-label { font-size: .85rem; color: var(--dakwat-2); }
.peristiwa-tarikh { font-size: .95rem; color: var(--emas); font-weight: 700; margin-bottom: .2rem; }
.peristiwa h3 { font-size: 1.45rem; }
.peristiwa .khilaf { margin: .6rem 0; }
.peristiwa-pautan { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; font-size: .95rem; }
.peristiwa-pautan a { display: inline-block; padding: .1rem .55rem; border: 1px solid var(--garis); border-radius: 999px; background: var(--putih); text-decoration: none; }
.peristiwa-pautan .pautan-artikel a { border-color: var(--hijau); }
.peristiwa-ruj { font-size: .9rem; color: var(--lapis); margin: .4rem 0 0; }
@media (max-width: 560px) { .peristiwa { grid-template-columns: 4rem 1fr; gap: 1rem; } .usia-angka { font-size: 2rem; } }

/* ---------- Nasab ---------- */
.nasab { list-style: none; padding-bottom: 2rem; }
.nasab-leluhur { display: grid; grid-template-columns: 3rem minmax(12rem, 18rem) 1fr; gap: 0 1.5rem; align-items: start; position: relative; padding: .65rem 0; scroll-margin-top: 1rem; }
.nasab-leluhur::before { content: ""; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 2px; background: var(--emas); opacity: .5; }
.nasab-leluhur:first-child::before { top: 1.6rem; }
.nasab-leluhur:last-child::before { bottom: calc(100% - 1.6rem); }
.nasab-leluhur:target .nasab-nama { background: var(--emas-pudar); }
.nasab-tingkat { position: relative; z-index: 1; justify-self: center; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--kertas); border: 2px solid var(--emas); font: 700 .95rem var(--f-sans); color: var(--hijau-tua); margin-top: .2rem; }
.nasab-leluhur:first-child .nasab-tingkat { background: var(--hijau); border-color: var(--hijau); }
.nasab-nama { display: flex; flex-direction: column; padding: .1rem .5rem; border-radius: var(--r); }
.nasab-nama .ar { font-size: 1.75rem; line-height: 1.4; color: var(--hijau-tua); }
.nasab-nama .ms { font: 700 1.15rem var(--f-serif); }
.nasab-asal, .nasab-catatan { font-size: .92rem; color: var(--dakwat-2); }
.nasab-artikel { font-size: .92rem; }
.nasab-cabang { list-style: none; padding: 0; margin: .35rem 0; display: grid; gap: .6rem; }
.nasab-cabang li { position: relative; background: var(--putih); border: 1px solid var(--garis); border-left: 3px solid var(--hijau); padding: .6rem .9rem; border-radius: 0 var(--r) var(--r) 0; }
.nasab-cabang li::before { content: ""; position: absolute; left: -1.55rem; top: 1.2rem; width: 1.5rem; border-top: 2px dashed var(--hijau); opacity: .5; }
.nasab-cabang p { margin: 0; }
.cabang-nama { font: 700 1.1rem var(--f-serif); }
.cabang-rantai { font-size: .95rem; color: var(--dakwat-2); }
.cabang-kabilah { font-size: .9rem; color: var(--emas); font-weight: 700; }
@media (max-width: 760px) {
  .nasab-leluhur { grid-template-columns: 3rem 1fr; }
  .nasab-cabang { grid-column: 2; }
  .nasab-cabang li::before { display: none; }
}
.nota-blok { padding-top: 1rem; padding-bottom: 3rem; }

/* ---------- Tokoh ---------- */
.tokoh-senarai { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0; padding-bottom: 4rem; border-top: 1px solid var(--garis); }
.tokoh-senarai a { display: flex; flex-direction: column; padding: 1.1rem 1rem 1.2rem 0; text-decoration: none; color: var(--dakwat); border-bottom: 1px solid var(--garis); height: 100%; }
.tokoh-ar { font: 1.6rem/1.4 var(--f-arab); color: var(--emas); }
.tokoh-nama { font: 700 1.3rem var(--f-serif); color: var(--hijau-tua); }
.tokoh-senarai a:hover .tokoh-nama { text-decoration: underline; text-decoration-color: var(--emas); }
.tokoh-kabilah { color: var(--dakwat-2); font-size: 1rem; }
.tokoh-tag { font-size: .9rem; color: var(--hijau); margin-top: .2rem; }
.profil { padding-bottom: 4rem; }
.profil > * { max-width: 52rem; }
.profil-kepala { padding-top: 3.5rem; }
.profil-ar { font: 2.6rem/1.3 var(--f-arab); color: var(--emas); margin: 0; }
.profil-data { display: grid; grid-template-columns: 9rem 1fr; gap: 0; margin: 1.5rem 0 2rem; border-top: 1px solid var(--garis); }
.profil-data div { display: contents; }
.profil-data dt, .profil-data dd { padding: .55rem 0; border-bottom: 1px solid var(--garis); margin: 0; }
.profil-data dt { color: var(--dakwat-2); }
.profil section { margin-top: 2rem; }
.senarai-ringkas { padding-left: 1.2rem; }
.senarai-ringkas li { margin-bottom: .35rem; }
.senarai-ringkas span { color: var(--dakwat-2); font-size: .95rem; }

/* ---------- Tempat ---------- */
.tempat-susun { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; padding-bottom: 4rem; align-items: start; }
.peta { height: min(75vh, 44rem); border: 1px solid var(--garis); border-radius: var(--r); position: sticky; top: 1rem; background: var(--hijau-muda); z-index: 0; }
.tempat-senarai { list-style: none; padding: 0; margin: 0; }
.tempat-senarai > li { padding: 1rem 0; border-top: 1px solid var(--garis); scroll-margin-top: 1rem; }
.tempat-senarai > li.aktif, .tempat-senarai > li:target { background: linear-gradient(90deg, var(--emas-pudar), transparent); }
.tempat-senarai h2 { font-size: 1.3rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.tempat-senarai h2 .ar { font-size: 1.4rem; color: var(--emas); font-weight: 400; }
.tempat-fokus { all: unset; cursor: pointer; color: var(--hijau-tua); }
.tempat-fokus:hover { text-decoration: underline; text-decoration-color: var(--emas); }
.tempat-fokus:focus-visible { outline: 3px solid var(--emas); }
.tempat-senarai p { margin-bottom: .3rem; }
@media (max-width: 860px) { .tempat-susun { grid-template-columns: 1fr; } .peta { position: relative; height: 55vh; } }
.leaflet-popup-content { font: 1rem/1.5 var(--f-sans); }
.leaflet-popup-content strong { font-family: var(--f-serif); font-size: 1.1rem; color: var(--hijau-tua); }

/* ---------- Kelas ---------- */
.jadual { padding-bottom: 1rem; }
.jadual-baris { display: grid; grid-template-columns: 11rem minmax(0, var(--baca)); gap: 2rem; padding: 1.75rem 0; border-top: 2px solid var(--hijau); }
.jadual-hari { font: 800 2rem/1.1 var(--f-serif); color: var(--hijau); }
.jadual-hari span { display: block; font: 700 1.05rem var(--f-sans); color: var(--emas); margin-top: .3rem; }
@media (max-width: 640px) { .jadual-baris { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- Buku ---------- */
.buku-senarai { list-style: none; display: grid; gap: 2rem; padding-bottom: 4rem; }
.buku { display: grid; grid-template-columns: 9rem 1fr; gap: 1.75rem; align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--garis); }
.buku-kulit { aspect-ratio: 2 / 3; background: var(--hijau); border-radius: 2px 6px 6px 2px; box-shadow: inset 6px 0 0 var(--hijau-tua); display: grid; place-items: center; padding: 1rem .8rem 1rem 1.2rem; overflow: hidden; }
.buku-kulit span { font: 700 1.05rem/1.25 var(--f-serif); color: var(--emas-terang); text-align: center; }
.buku-kulit img { width: 100%; height: 100%; object-fit: cover; }
.buku-isi h2 { margin-bottom: .2rem; }
.buku-penulis { color: var(--dakwat-2); }
.buku-harga { font-weight: 700; font-size: 1.2rem; }

/* ---------- Carian ---------- */
.cari-hasil { list-style: none; padding-bottom: 4rem; }
.cari-hasil li { padding: 1rem 0; border-top: 1px solid var(--garis); max-width: calc(var(--baca) + 2.5rem); }
.cari-jenis { font-size: .9rem; color: var(--emas); font-weight: 700; }
.cari-hasil h2 { font-size: 1.3rem; margin: .1rem 0 .3rem; }
.cari-hasil mark { background: var(--emas-pudar); color: inherit; }

/* ---------- Prosa umum (tentang, metodologi) ---------- */
.lebar-baca.prosa h2 { margin-top: 2.2rem; }
.lebar-baca { padding-bottom: 3rem; }

/* ---------- Kaki ---------- */
.kaki { background: var(--hijau-tua); color: #c9d6d2; margin-top: 2rem; }
.kaki-dalam { max-width: var(--lebar); margin: 0 auto; padding: 3rem 1.25rem 1.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.kaki h2 { font: 700 1rem var(--f-sans); color: var(--emas-terang); margin-bottom: .6rem; }
.kaki ul { list-style: none; padding: 0; margin: 0; }
.kaki li { margin-bottom: .35rem; }
.kaki a { color: #e6eeeb; text-decoration: none; }
.kaki a:hover { color: var(--emas-terang); text-decoration: underline; }
.kaki-jenama { display: flex; gap: .8rem; align-items: flex-start; }
.kaki-nama { font: 700 1.3rem var(--f-serif); color: var(--putih); margin: 0; }
.kaki-moto { margin: 0; color: var(--emas-terang); font-style: italic; font-family: var(--f-serif); }
.kaki-sah { max-width: var(--lebar); margin: 0 auto; padding: 1rem 1.25rem 2rem; font-size: .9rem; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 860px) { .kaki-dalam { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kaki-dalam { grid-template-columns: 1fr; } }

@media print {
  .kepala, .kaki, .artikel-sisi, .penapis { display: none; }
  body { background: #fff; }
  .artikel-badan { display: block; }
}

/* Penanda peta */
.penanda span { display: block; width: 18px; height: 18px; background: var(--emas); border: 3px solid var(--hijau-tua); transform: rotate(45deg); border-radius: 2px; }

/* ---------- Akaun pengguna ---------- */
.akaun-kepala { margin-left: auto; order: 2; display: flex; align-items: center; }
.kepala-dalam .nav { order: 1; }
.kepala-dalam .menu-togol { order: 3; margin-left: .5rem; }
@media (min-width: 1201px) { .akaun-kepala { margin-left: .6rem; order: 3; } .kepala-dalam .nav { order: 2; } }
.akaun-masuk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; background: var(--hijau-tua); color: #fff; text-decoration: none; font-weight: 800; }
.akaun-masuk:hover { background: var(--hijau); color: #fff; }
.akaun-pautan { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem 0 .35rem; border-radius: 999px; border: 2px solid var(--garis); text-decoration: none; color: var(--dakwat); font-weight: 800; max-width: 12rem; }
.akaun-pautan span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akaun-pautan:hover { border-color: var(--hijau); color: var(--dakwat); }
.akaun-bulat { width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font: 700 1rem var(--f-serif); }
.penanda-kotak { margin-bottom: 1.2rem; }
.penanda-butang { width: 100%; }
.penanda-butang[aria-pressed="true"] { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.penanda-butang[aria-pressed="true"] svg path { fill: currentColor; }
.penanda-butang[hidden], .penanda-ket[hidden] { display: none; }

.akaun-halaman { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.akaun-kad { background: var(--putih); border: 1px solid var(--garis); border-radius: 24px; padding: 1.5rem; margin-bottom: 1.25rem; }
.akaun-kad h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.profil-senarai { display: flex; gap: .7rem; flex-wrap: wrap; }
.profil-pilih { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .3rem 1rem .3rem .35rem; border-radius: 999px; border: 2px solid var(--garis); background: #fff; font: 800 1rem var(--f-sans); color: var(--dakwat); cursor: pointer; }
.profil-pilih[aria-pressed="true"] { border-color: var(--hijau); background: var(--hijau-muda); }
.profil-pilih small { font-weight: 600; color: var(--dakwat-2); }
.akaun-borang { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1rem; }
.akaun-borang label { display: flex; flex-direction: column; gap: .25rem; font-weight: 800; font-size: .92rem; }
.akaun-borang input, .akaun-borang select { font: 1rem var(--f-sans); min-height: 44px; padding: 0 .8rem; border: 2px solid var(--garis); border-radius: 12px; background: #fff; }
.lencana-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 600px) { .lencana-grid { grid-template-columns: minmax(0, 1fr); } }
.lencana-kad { border-radius: 20px; padding: 1.1rem; text-align: center; background: var(--kertas); }
.lencana-ikon { width: 60px; height: 60px; margin: 0 auto .6rem; border-radius: 50%; border: 6px solid #e4dccd; background: #d6d0c4; }
.lencana-kad.dapat .lencana-ikon { border-color: var(--emas-terang); background: var(--hijau); }
.lencana-kad strong { display: block; font: 700 1.1rem var(--f-serif); }
.lencana-kad span { font-size: .9rem; color: var(--dakwat-2); }
.akaun-senarai { list-style: none; margin: 0; padding: 0; }
.akaun-senarai li { padding: .7rem 0; border-bottom: 1px solid var(--garis); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.akaun-senarai li:last-child { border-bottom: 0; }
.akaun-bahaya { border-color: #f1c7b8; }
.butang-bahaya { background: #fff; color: #9b3a20; border-color: #f1c7b8; }
.butang-bahaya:hover { background: #fde3d8; color: #7a2e1a; border-color: #f1c7b8; }
.masuk-kotak { max-width: 34rem; margin: 3rem auto 4rem; padding: 2rem 1.75rem; text-align: center; }
.masuk-google { display: flex; justify-content: center; min-height: 48px; margin: 1.5rem 0 1rem; }