/* ==========================================================================
   mawaris.id — gaya bersama
   ========================================================================== */

:root{
  color-scheme: light;
  --bg:#F2F5F3; --surface:#FFFFFF; --surface-2:#E9EEEB; --surface-3:#DFE6E2;
  --ink:#0F1F1B; --ink-2:#4C605A; --ink-3:#77897F;
  --line:#D6DFDA; --line-2:#C2CFC9;
  --accent:#0C6B57; --accent-2:#0A5546; --accent-soft:#DDEDE7; --on-accent:#FFFFFF;
  --gold:#7E5A12; --gold-soft:#F3EBD9; --gold-line:#DFCFA8;
  --alert:#8A4034; --alert-soft:#F5E5E1;
  --shadow:0 1px 2px rgba(15,31,27,.06), 0 8px 24px -12px rgba(15,31,27,.14);
  --r:10px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Amiri", "Iowan Old Style", "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0A1412; --surface:#111E1A; --surface-2:#182722; --surface-3:#1F332C;
    --ink:#E3EDE8; --ink-2:#93A79F; --ink-3:#728780;
    --line:#233229; --line-2:#2E4239;
    --accent:#4BBE9C; --accent-2:#6FD3B4; --accent-soft:#12302A; --on-accent:#08201A;
    --gold:#D3A64A; --gold-soft:#2A2415; --gold-line:#4A3D1E;
    --alert:#DB8C7D; --alert-soft:#2F1D19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0A1412; --surface:#111E1A; --surface-2:#182722; --surface-3:#1F332C;
  --ink:#E3EDE8; --ink-2:#93A79F; --ink-3:#728780;
  --line:#233229; --line-2:#2E4239;
  --accent:#4BBE9C; --accent-2:#6FD3B4; --accent-soft:#12302A; --on-accent:#08201A;
  --gold:#D3A64A; --gold-soft:#2A2415; --gold-line:#4A3D1E;
  --alert:#DB8C7D; --alert-soft:#2F1D19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.015em;}
p{margin:0;}
a{color:var(--accent); text-decoration-color:color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset:2px;}
a:hover{text-decoration-color:var(--accent);}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
img,svg{max-width:100%;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important;}}

.ar{font-family:var(--serif); direction:rtl; unicode-bidi:isolate;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.wrap{max-width:1240px; margin:0 auto; padding:0 18px;}
.wrap-baca{max-width:820px; margin:0 auto; padding:0 18px;}
.lewati{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-accent);
  padding:10px 16px; border-radius:0 0 8px 0; z-index:100;}
.lewati:focus{left:0;}

/* ---------- header ---------- */
.situs-hdr{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.situs-hdr .bar{display:flex; align-items:center; gap:16px; height:62px;}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:none;}
.logo svg{width:26px; height:26px; flex:none;}
.logo b{font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1;}
.logo b i{font-style:normal; color:var(--accent);}
.nav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 12px; border-radius:7px; font-size:13.5px; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;}
.nav a:hover{background:var(--surface-2); color:var(--ink);}
.nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600;}
.tema{flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--line); color:var(--ink-2);}
.tema:hover{background:var(--surface-2); color:var(--ink);}
.tema svg{width:16px; height:16px;}
@media (max-width:820px){
  .situs-hdr .bar{height:auto; flex-wrap:wrap; padding:10px 0 0; gap:10px;}
  .nav{order:3; width:100%; margin:0 -18px; padding:0 18px 10px; border-top:1px solid var(--line); padding-top:8px;}
  .tema{margin-left:auto;}
}

/* ---------- footer ---------- */
.situs-foot{border-top:1px solid var(--line); background:var(--surface); margin-top:44px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:28px; padding:34px 0 26px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr; gap:22px;} .foot-grid > :first-child{grid-column:1/-1;} }
.foot-grid h4{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.foot-grid a{font-size:13.5px; text-decoration:none; color:var(--ink-2);}
.foot-grid a:hover{color:var(--accent);}
.foot-note{font-size:12.5px; color:var(--ink-3); line-height:1.65;}
.foot-note .ar{display:block; font-size:15px; color:var(--gold); margin-bottom:8px;}
.foot-bawah{border-top:1px solid var(--line); padding:14px 0 26px; font-size:12px; color:var(--ink-3);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

/* ---------- kartu & blok umum ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
.card + .card{margin-top:16px;}
.card-hd{padding:14px 16px 12px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.card-hd h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-2);}
.card-hd .hint{margin-left:auto; font-size:11.5px; color:var(--ink-3);}
.card-bd{padding:14px 16px;}

.kicker{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent);}
.lead{font-size:17px; line-height:1.6; color:var(--ink-2);}

.callout{border:1px solid var(--gold-line); background:var(--gold-soft); border-radius:9px; padding:14px 16px;}
.callout h4{font-size:14px; margin-bottom:5px;}
.callout p{font-size:13.5px; color:var(--ink-2);}
.callout.penting{border-color:color-mix(in srgb, var(--alert) 30%, transparent); background:var(--alert-soft);}
.callout.tip{border-color:color-mix(in srgb, var(--accent) 28%, transparent); background:var(--accent-soft);}

.ayat{background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:9px; padding:14px 16px; margin:14px 0;}
.ayat .ar{display:block; font-size:20px; line-height:2.15; text-align:right; color:var(--ink);}
.ayat .tr{margin-top:9px; padding-top:9px; border-top:1px solid var(--gold-line); font-size:13.5px; line-height:1.65; color:var(--ink-2);}
.ayat .src{margin-top:7px; font-size:12px; font-weight:600; color:var(--gold);}

.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:var(--surface);}
table.data{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px;}
table.data th{text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;}
table.data td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
table.data tr:last-child td{border-bottom:0;}
table.data td.f{font-family:var(--mono); font-weight:600; color:var(--accent); white-space:nowrap;}

/* ---------- artikel ---------- */
.artikel h2{font-size:25px; margin:38px 0 12px; padding-top:10px;}
.artikel h2:first-child{margin-top:0;}
.artikel h3{font-size:18px; margin:24px 0 8px;}
.artikel p{margin:0 0 13px; color:var(--ink-2);}
.artikel p strong, .artikel li strong{color:var(--ink);}
.artikel ul, .artikel ol{margin:0 0 14px; padding-left:22px; color:var(--ink-2);}
.artikel li{margin-bottom:6px;}
.artikel h2 + p, .artikel h3 + p{margin-top:0;}
.rule{height:1px; background:var(--line); border:0; margin:34px 0;}

.daftar-isi{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:26px;}
.daftar-isi h4{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;}
.daftar-isi ol{margin:0; padding-left:20px; columns:2; column-gap:24px; font-size:13.5px;}
@media (max-width:600px){ .daftar-isi ol{columns:1;} }
.daftar-isi li{margin-bottom:5px; break-inside:avoid;}
.daftar-isi a{text-decoration:none;}
.daftar-isi a:hover{text-decoration:underline;}

/* ---------- hero ---------- */
.hero{padding:40px 0 26px; border-bottom:1px solid var(--line); background:var(--surface);}
.hero .kal{font-family:var(--serif); direction:rtl; font-size:20px; color:var(--gold); line-height:1.3;}
.hero h1{font-family:var(--serif); font-size:clamp(30px, 5.2vw, 46px); font-weight:700; line-height:1.08; margin:6px 0 12px;}
.hero p{max-width:60ch; font-size:16.5px; color:var(--ink-2);}
.hero-poin{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.poin{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
.poin svg{width:13px; height:13px; color:var(--accent); flex:none;}

/* ---------- kartu ahli waris ---------- */
.aw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px;}
.aw{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:14px 16px;}
.aw-hd{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:9px;}
.aw-hd .n{font-size:15.5px; font-weight:600;}
.aw-hd .ar{font-size:15px; color:var(--gold);}
.aw dl{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0; font-size:13px;}
.aw dt{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding-top:3px;}
.aw dd{margin:0; color:var(--ink-2);}
.aw dd b{color:var(--accent); font-family:var(--mono); font-weight:600;}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line); border-radius:9px; background:var(--surface); overflow:hidden;}
.faq + .faq{margin-top:10px;}
.faq summary{padding:14px 16px; font-weight:600; font-size:15px; cursor:pointer; list-style:none;
  display:flex; gap:10px; align-items:flex-start;}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{background:var(--surface-2);}
.faq summary::before{content:"+"; font-family:var(--mono); color:var(--accent); font-size:17px; line-height:1.35; flex:none;}
.faq[open] summary::before{content:"\2212";}
.faq[open] summary{border-bottom:1px solid var(--line);}
.faq .jwb{padding:13px 16px 16px 38px; font-size:14px; color:var(--ink-2);}
.faq .jwb p{margin:0 0 10px;}
.faq .jwb p:last-child{margin-bottom:0;}
.faq .jwb ul{margin:0 0 10px; padding-left:20px;}

/* ---------- tombol ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--on-accent);
  padding:11px 19px; border-radius:9px; font-size:14.5px; font-weight:600; text-decoration:none;}
.btn:hover{background:var(--accent-2);}
.btn.ghost{background:none; color:var(--accent); border:1px solid var(--line-2);}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--accent);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}