/* HaluChat — halaman legal statis (HL-01): syarat.html, privasi.html, pedoman.html.
   Token disalin dari public/index.html, bukan diimpor: halaman ini sengaja tidak memuat
   index.html, Google Fonts, maupun unpkg — halaman Kebijakan Privasi yang memanggil pihak
   ketiga saat dibuka membantah isinya sendiri. Font jatuh ke font sistem. */
:root{
  --primary:#6C4CF0; --accent-soft:#EEEAFE;
  --bg:#F7F6FB; --surface:#FFFFFF; --surface-2:#F0EEF6; --border:#E6E2EF;
  --ink:#1E1B26; --muted:#6F6A7D; --faint:#A39FB0;
  --warn:#C77A12; --warn-soft:#FFF4E0; --bad:#D63B55;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:#9B8AFF; --accent-soft:rgba(155,138,255,.14);
    --bg:#121017; --surface:#1C1924; --surface-2:#252130; --border:#2F2A3B;
    --ink:#EEEAF5; --muted:#A09AAE; --faint:#6E6880;
    --warn:#E6A23C; --warn-soft:rgba(230,162,60,.12); --bad:#FF6B81;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --primary:#9B8AFF; --accent-soft:rgba(155,138,255,.14);
  --bg:#121017; --surface:#1C1924; --surface-2:#252130; --border:#2F2A3B;
  --ink:#EEEAF5; --muted:#A09AAE; --faint:#6E6880;
  --warn:#E6A23C; --warn-soft:rgba(230,162,60,.12); --bad:#FF6B81;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:20px 18px 64px}

.draft{
  background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink);
  border-radius:12px; padding:12px 14px; margin:0 0 20px; font-size:14px;
}
.draft b{color:var(--warn)}

.top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.back{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px;
  color:var(--primary); text-decoration:none; padding:6px 12px 6px 8px; margin-left:-8px; border-radius:999px;
}
.back:hover{background:var(--accent-soft)}
nav.docs{display:flex; gap:4px; flex-wrap:wrap}
nav.docs a{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:600;
  padding:5px 10px; border-radius:999px;
}
nav.docs a[aria-current="page"]{background:var(--accent-soft); color:var(--primary)}

h1{font-size:28px; line-height:1.2; margin:18px 0 4px}
.meta{color:var(--muted); font-size:13px; margin:0 0 20px}
h2{font-size:18px; margin:32px 0 8px; padding-top:8px; border-top:1px solid var(--border)}
h3{font-size:15px; margin:18px 0 4px}
p,ul,ol{margin:0 0 12px}
ul,ol{padding-left:22px}
li{margin:3px 0}
a{color:var(--primary)}

.lede{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px 4px; margin:0 0 8px;
}
.lede ul{padding-left:20px}

.tbl{overflow-x:auto; margin:0 0 12px; border:1px solid var(--border); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:560px}
th,td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--border)}
th{background:var(--surface-2); font-weight:700; font-size:13px}
tr:last-child td{border-bottom:0}

.two{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px}
@media (max-width:560px){ .two{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px 2px}
.card h3{margin-top:0}
.card.no h3{color:var(--bad)}

/* Tempat yang MENUNGGU keputusan Fery/konsultan. Sengaja mencolok: draf yang kelihatan
   selesai lebih berbahaya daripada draf yang kelihatan bolong. */
mark.todo{
  background:var(--warn-soft); color:var(--warn); border:1px dashed var(--warn);
  border-radius:6px; padding:0 5px; font-weight:600;
}
code{font-size:13px; background:var(--surface-2); padding:1px 5px; border-radius:5px}
footer{margin-top:40px; color:var(--faint); font-size:13px}