/* Gaya untuk halaman dokumen (/privasi, /terma).
   Token warna diulang di sini dan bukan dikongsi dengan index.html: laman
   utama sengaja satu fail tanpa kebergantungan, dan dua halaman teks ini tidak
   berbaloi memaksanya berubah. Kalau emas atau warna kad berubah, ubah di
   kedua-dua tempat. */
:root{
  --ink:#201A12; --card:#FCF8F2; --card2:#E7DDD0;
  --gold:#8C5A12; --gold-soft:#C65F16; --gold-deep:#6E4610;
  --l1:#201A12; --l2:rgba(32,26,18,.68); --l3:rgba(32,26,18,.46);
  --hair:rgba(60,42,18,.16); --bg:#F2EAE0;
  --khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%238C5A12' stroke-width='1.1'%3E%3Crect x='11' y='11' width='34' height='34'/%3E%3Cpath d='M28 3.96L52.04 28L28 52.04L3.96 28Z'/%3E%3Cpath d='M0 -9.9L9.9 0L0 9.9L-9.9 0Z'/%3E%3Cpath d='M56 -9.9L65.9 0L56 9.9L46.1 0Z'/%3E%3Cpath d='M0 46.1L9.9 56L0 65.9L-9.9 56Z'/%3E%3Cpath d='M56 46.1L65.9 56L56 65.9L46.1 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --shell:min(760px,100% - 44px);
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--l1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  font-size:16px;line-height:1.72}
img{max-width:100%;display:block}
a{color:var(--gold-soft);text-decoration:none}
a:hover{text-decoration:underline}
i,em{font-style:italic;color:var(--gold-soft)}
.shell{width:var(--shell);margin-inline:auto}

header.nav{position:sticky;top:0;z-index:50;padding:12px 0;
  background:rgba(242,234,224,.82);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--hair)}
header.nav .shell{display:flex;align-items:center;gap:20px;width:min(1180px,100% - 44px)}
header.nav img{height:24px;width:auto}
header.nav .back{margin-left:auto;font-size:14.5px;color:var(--l2)}
header.nav .back:hover{color:var(--ink);text-decoration:none}

/* ══════════════ togol bahasa ══════════════ */
.lang-toggle{display:inline-flex;background:var(--card2);border-radius:99px;padding:3px;gap:2px}
.lang-toggle button{border:none;background:none;padding:7px 15px;border-radius:99px;font-size:13px;
  font-weight:700;color:var(--l2);cursor:pointer;font-family:inherit}
.lang-toggle button.active{background:var(--card);color:var(--ink);
  box-shadow:0 1px 3px rgba(32,26,18,.15)}
.i18n{display:none}
body[data-lang="ms"] .i18n[data-lang="ms"],
body[data-lang="en"] .i18n[data-lang="en"]{display:block}
[data-lang-label]{display:none}
body[data-lang="ms"] [data-lang-label="ms"],
body[data-lang="en"] [data-lang-label="en"]{display:inline}

.doc-head{position:relative;overflow:hidden;padding:64px 0 34px;border-bottom:1px solid var(--hair)}
.doc-head .pattern{position:absolute;inset:0;background-image:var(--khatam);opacity:.07;
  -webkit-mask-image:radial-gradient(70% 90% at 30% 0%,#000,transparent 76%);
  mask-image:radial-gradient(70% 90% at 30% 0%,#000,transparent 76%)}
.doc-head .shell{position:relative;z-index:1}
.doc-head .eyebrow{display:inline-block;padding:7px 14px;border-radius:99px;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold);
  background:rgba(198,95,22,.12);border:1px solid rgba(198,95,22,.3)}
.doc-head h1{font-size:clamp(32px,5vw,46px);letter-spacing:-.03em;line-height:1.1;margin:20px 0 12px}
.doc-head .tarikh{color:var(--l3);font-size:14px}

main{padding:10px 0 70px}
main h2{font-size:22px;letter-spacing:-.02em;margin:42px 0 12px;scroll-margin-top:80px}
main h2 .no{color:var(--gold);font-weight:700;margin-right:9px;font-variant-numeric:tabular-nums}
main h3{font-size:16.5px;letter-spacing:-.01em;margin:26px 0 8px;color:var(--ink)}
main p{margin:0 0 14px;color:var(--l2)}
main p strong,main li strong{color:var(--ink);font-weight:600}
main ul{margin:0 0 16px;padding-left:20px;color:var(--l2)}
main li{margin:7px 0}
main li::marker{color:var(--gold-deep)}
code{background:var(--card);border:1px solid var(--hair);border-radius:6px;padding:1px 6px;
  font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-soft)}

.draf{margin:26px 0 0;padding:16px 18px;border-radius:16px;background:rgba(198,95,22,.1);
  border:1px solid rgba(198,95,22,.34)}
.draf b{color:var(--gold)}
.draf p{margin:6px 0 0;color:var(--l2);font-size:14.5px;line-height:1.6}
.isi{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:18px 22px;margin:30px 0 0}
.isi b{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--l3)}
.isi ol{margin:10px 0 0;padding-left:20px;color:var(--l2);font-size:14.5px}
.isi li{margin:5px 0}
.isi a{color:var(--l2)}
.isi a:hover{color:var(--gold)}
.ringkas{background:linear-gradient(180deg,rgba(198,95,22,.09),rgba(198,95,22,.02));
  border:1px solid rgba(198,95,22,.22);border-radius:18px;padding:20px 22px;margin:30px 0 6px}
.ringkas b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px}
.ringkas ul{margin:0;padding-left:20px}
table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--l2)}
th{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
td:first-child{color:var(--ink);font-weight:550;width:38%}
.tbl-wrap{overflow-x:auto}
.ganti{background:rgba(198,95,22,.16);border-bottom:1px dashed rgba(198,95,22,.6);
  padding:0 4px;border-radius:3px;color:var(--gold-soft);font-style:normal}

footer{padding:34px 0 56px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--l3)}
footer .shell{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
  width:min(1180px,100% - 44px)}
footer .links{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--l3)}
footer a:hover{color:var(--ink);text-decoration:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}