/* ==========================================================================
   legal.css — halaman dasar awam (/privasi.html, /terma.html)
   Dimuatkan SELEPAS style.css; bergantung sepenuhnya pada token :root di situ.

   Nama kelas di sini sengaja SAMA dengan versi cetak A4 dokumen yang sama
   (.section .lead .box .qa .ba .badge .metric …) supaya kandungan boleh
   dipindahkan hampir verbatim antara kedua-duanya.
   ========================================================================== */

/* ---------- Rangka halaman ---------- */
.legal-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* Bar atas — kekal kelihatan supaya penukar bahasa & pautan balik
   sentiasa dalam jangkauan pada dokumen yang panjang. */
.legal-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(20, 33, 61, .05);
  padding-top: var(--safe-t);
}

.legal-top-in {
  max-width: 900px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.legal-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

.legal-brand b {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.legal-top-spacer { flex: 1; }

/* Penukar bahasa. Disembunyikan sehingga JS mengesan kandungan EN wujud —
   lihat toggleLang() dalam setiap halaman. */
.lang-switch {
  display: none;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.lang-switch.is-ready { display: inline-flex; }

.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: var(--trans);
  min-height: 32px;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--purple);
  box-shadow: var(--sh-sm);
}

/* ---------- Kepala dokumen ---------- */
.legal-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem calc(3rem + var(--safe-b));
}

/* Cahaya ungu lembut supaya kad ini bukan sekadar blok navy rata.
   Dilukis sebagai LAPISAN LATAR, bukan `::before` — elips boleh disauh terus
   ke penjuru atas-kanan (`at 88% -25%`) tanpa bergantung pada tinggi kad.
   Pseudo-element bersaiz `width: %` menghasilkan bulatan yang jauh lebih
   tinggi daripada kad yang lebar-tapi-pendek ini, jadi cahayanya tenggelam
   ke bawah dan duduk di belakang cip meta. Cara ini juga tidak memerlukan
   `isolation`, `z-index`, mahupun `overflow: hidden`. */
.legal-head {
  background:
    radial-gradient(115% 150% at 88% -25%, rgba(139, 92, 246, .42), transparent 58%),
    var(--grad-navy);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 1.7rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sh-lg);
}

/* ⚠️ `color` WAJIB dinyatakan di sini, bukan diwarisi daripada .legal-head.
   `style.css` mempunyai peraturan elemen bogel `h1 { color: var(--text) }`,
   dan peraturan yang memadan terus pada elemen sentiasa mengalahkan warna
   yang DIWARISI — tidak kira specificity induk. Tanpa baris ini tajuk
   dirender #14213d di atas navy #1a2744 = nisbah kontras 1.08:1, iaitu
   hampir halimunan. Jangan buang. */
.legal-head h1 {
  color: #fff;
  margin: 0 0 .5rem;
  font-size: clamp(1.45rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.legal-head p {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 62ch;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}
.legal-meta span {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-pill);
  padding: .3rem .75rem;
  font-size: .76rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ---------- Kandungan (dijana oleh JS daripada h2) ---------- */
.legal-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.legal-toc > summary {
  cursor: pointer;
  padding: .95rem 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted);
  transition: var(--trans);
}
.legal-toc[open] > summary::after { transform: rotate(180deg); }
.legal-toc ol {
  margin: 0;
  padding: 0 1.1rem 1rem 1.1rem;
  list-style: none;
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: .6rem;
  padding: .5rem .55rem;
  margin: 0 -.55rem;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  border-top: 1px solid var(--border);
  transition: var(--trans);
}
/* Baris pertama tidak perlu garis pemisah — ia sudah bersempadan dengan
   `summary`. */
.legal-toc li:first-child a { border-top: 0; }
.legal-toc a::before {
  content: counter(toc) '.';
  color: var(--purple);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover {
  color: var(--purple);
  background: var(--bg-2);
}

/* ---------- Bahagian ---------- */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 1.4rem 1.2rem;
  margin-bottom: 1.1rem;
  scroll-margin-top: 4.5rem; /* supaya bar melekat tidak menutup tajuk */
}

.section h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .9rem;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--navy);
  padding-bottom: .7rem;
  /* Garis pemisah dilukis sebagai latar, BUKAN `::after` — h2 ialah flex
     container (nombor + teks), jadi pseudo-element akan menjadi item flex
     ketiga dan memecahkan susun atur. */
  background-image: linear-gradient(90deg, var(--purple-l) 0, var(--border) 32%, transparent 100%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.section h2 .num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--grad-brand);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-purple);
}

.section h3 {
  margin: 1.6rem 0 .6rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy);
}
.section h3:first-of-type { margin-top: 1.1rem; }

/* ⚠️ Prosa badan MESTI menuntut warnanya sendiri, atas sebab yang sama
   seperti h1 di atas: `style.css` ada `p { color: var(--muted) }` bogel, jadi
   setiap perenggan yang tidak menetapkan warna jatuh kepada kelabu #647089
   (4.98:1). Kesannya pelik — teks klausa dan sel jadual duduk pada 15.97:1,
   jadi prosa biasa ialah teks paling PUCAT pada halaman, termasuk kotak
   `.core` yang sepatutnya paling menonjol. Semua ini ialah teks yang ibu bapa
   diminta baca dan persetujui. */
.section p,
.section > ul li,
.section > ol li,
.box p,
.box li,
.core p,
.cl .ct,
.ba li { color: var(--text); }

.section p { margin: 0 0 .8rem; }
.section p:last-child { margin-bottom: 0; }
.section > ul, .section > ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
.section > ul li, .section > ol li { margin-bottom: .4rem; }

/* `.section p.lead` (0,2,1) — mesti mengatasi `.section p` (0,1,1) di atas,
   kalau tidak perenggan pembuka kehilangan warna navy yang membezakannya. */
.lead,
.section p.lead {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--navy-l);
}

code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .4em;
  font-size: .88em;
  word-break: break-word;
}

/* ---------- Soal-jawab ---------- */
.qa {
  border-left: 3px solid var(--purple-l);
  background: var(--bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
}
.qa .q { font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.qa .a { color: var(--text); font-size: .95rem; }

/* ---------- Klausa bernombor (Terma & Syarat) ----------
   Pada A4 nombor klausa duduk sebaris dengan teks (`display:inline`). Pada
   telefon itu menyempitkan baris pertama sehingga janggal, jadi di sini ia
   grid dua lajur: nombor dalam lajur tetap, teks sejajar kemas di sebelahnya. */
.cl {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: .1rem .4rem;
  margin: 0 0 .75rem;
}
.cl .cn {
  font-weight: 800;
  color: var(--purple);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}
.cl .ct { min-width: 0; }
.cl .ct p:last-child { margin-bottom: 0; }
@media (max-width: 480px) { .cl { grid-template-columns: 2.7rem 1fr; } }

/* ---------- Kenyataan teras (had liabiliti) ----------
   Muncul DUA KALI dalam T&S (Bahagian 2 dan 8) dan mesti kekal sama perkataan
   demi perkataan dengan Bahagian 6 Dokumen #1 — lihat KONTEKS. Ia sengaja
   paling menonjol pada halaman: ia ayat yang paling mungkin diuji. */
.core {
  border: 2px solid var(--danger);
  border-radius: var(--r-md);
  background: #fef2f2;
  padding: 1.1rem 1.2rem;
  margin: 1.2rem 0;
  box-shadow: 0 2px 14px rgba(220, 38, 38, .09);
}
.core .core-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--danger);
  margin-bottom: .5rem;
}
.core p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ---------- Kotak nota ---------- */
.box {
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--bg-2);
  font-size: .95rem;
}
.box p { margin: 0 0 .5rem; }
.box p:last-child { margin-bottom: 0; }
.box ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.box li { margin-bottom: .3rem; }

.box-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .35rem;
}

.box-tip     { border-left-color: var(--purple);  background: #f7f4ff; }
.box-warn    { border-left-color: var(--orange);  background: #fffaf0; }
.box-danger  { border-left-color: var(--danger);  background: #fef4f3; }
.box-success { border-left-color: var(--success); background: #f0fdf6; }

.box-tip     .box-label { color: var(--purple); }
.box-warn    .box-label { color: #b06a00; }
.box-danger  .box-label { color: var(--danger); }
.box-success .box-label { color: #0b8a63; }

/* ---------- Jadual ----------
   Pada skrin sempit setiap baris menjadi kad; label lajur disuntik sebagai
   data-label oleh JS (labelTables()) daripada <thead>, jadi ia mustahil
   tidak selari dengan kepala jadual. */
.tbl-wrap { margin: .9rem 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
thead th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-weight: 700;
  font-size: .82rem;
  padding: .6rem .7rem;
  letter-spacing: .01em;
}
tbody td {
  padding: .6rem .7rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:nth-child(even) { background: var(--bg-2); }

@media (max-width: 700px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { border: 0; background: transparent; }
  tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: .7rem;
    padding: .25rem .2rem;
    box-shadow: var(--sh-sm);
  }
  tbody tr:nth-child(even) { background: var(--surface); }
  tbody td { border-top: 0; padding: .45rem .8rem; }
  tbody td + td { border-top: 1px dashed var(--border); }
  /* Sel pertama = subjek baris, jadi ia jadi tajuk kad. */
  tbody td:first-child {
    font-weight: 700;
    color: var(--navy);
    font-size: .96rem;
  }
  tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--subtle);
    margin-bottom: .15rem;
  }
}

/* ---------- Lencana ---------- */
.badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-green  { background: rgba(16, 185, 129, .14); color: #0b8a63; }
.badge-orange { background: rgba(245, 158, 11, .16); color: #b06a00; }
.badge-navy   { background: rgba(26, 39, 68, .1);    color: var(--navy); }

/* ---------- Blok dua lajur ----------
   Setiap lajur mempunyai penanda SENDIRI. Jangan biarkan .info atau .keep
   mewarisi ✕ merah .bad — itu pepijat visual yang sama seperti dalam
   Dokumen #1, di mana setiap baris peranan kami kelihatan negatif. */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin: 1rem 0;
}
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } }

.ba .col { border-radius: var(--r-md); padding: .85rem 1rem; border: 1px solid var(--border); }
.ba h4 { margin: 0 0 .5rem; font-size: .92rem; font-weight: 800; }
.ba ul { margin: 0; padding: 0; list-style: none; }
.ba li { font-size: .89rem; margin-bottom: .35rem; padding-left: 1.3rem; position: relative; line-height: 1.5; }
.ba li::before { position: absolute; left: 0; font-weight: 800; }

.ba .good { background: #f0fdf6; border-color: #bfeed6; }
.ba .good h4 { color: #0b8a63; }
.ba .good li::before { content: '✓'; color: var(--success); }

.ba .bad { background: #fef4f3; border-color: #f7d4cf; }
.ba .bad h4 { color: var(--danger); }
.ba .bad li::before { content: '✕'; color: var(--danger); }

.ba .info { background: #eef3ff; border-color: #ccd8f5; }
.ba .info h4 { color: var(--navy); }
.ba .info li::before { content: '▸'; color: var(--navy); }

.ba .keep { background: #fff7ed; border-color: #f5dcc0; }
.ba .keep h4 { color: #b06a00; }
.ba .keep li::before { content: '•'; color: var(--orange); font-size: 1.2em; line-height: 1; }

/* ---------- Kad angka ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: 1rem 0 1.2rem;
}
.metric {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-md);
  padding: .75rem .9rem;
}
.metric b {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
}
.metric span {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: .15rem;
}
.metric.green  { border-left-color: var(--success); }
.metric.orange { border-left-color: var(--orange); }
.metric.red    { border-left-color: var(--danger); }

/* ---------- Ruang belum diisi ----------
   Sengaja menyerlah. Kalau ini kelihatan pada halaman langsung, ia belum
   sedia diterbitkan. */
.ph {
  background: #fff3a8;
  border-bottom: 2px dotted #b8860b;
  padding: 0 .25rem;
  font-weight: 700;
  color: #6b5200;
}

/* ---------- Kaki ---------- */
.legal-foot {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: .88rem;
  color: var(--muted);
}
.legal-foot .ver { font-weight: 700; color: var(--text); }
.legal-foot nav { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.legal-foot nav a {
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
  padding: .4rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.legal-foot nav a:hover { background: var(--bg-2); }

/* ---------- Bahasa ---------- */
[data-lang] { display: none; }
[data-lang].is-active { display: block; }

/* ---------- Navigasi & fokus ----------
   Dokumen ini 12–14 bahagian panjang dan hampir setiap kemasukan datang
   melalui pautan Kandungan. Tanpa maklum balas, pembaca mendarat di tengah
   dinding teks tanpa tahu bahagian mana yang dituju. */
html { scroll-behavior: smooth; }

.section:target {
  border-color: var(--purple-l);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .16), var(--sh-sm);
}

/* Cincin fokus yang kelihatan pada latar terang MAHUPUN kad navy gelap
   (dua bayang bertindih: ungu di dalam, putih di luar). */
.legal-toc a:focus-visible,
.legal-foot nav a:focus-visible,
.legal-brand:focus-visible,
.lang-switch button:focus-visible,
.legal-doc a:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 2px var(--purple), 0 0 0 4px rgba(255, 255, 255, .9);
}

/* Pautan dalam badan dokumen — perlu kelihatan sebagai pautan tanpa
   mengganggu aliran bacaan. */
.legal-doc a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal-doc a:hover { color: var(--purple-l); }

/* Hormati tetapan sistem: tiada tatal beranimasi, tiada peralihan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .legal-top, .legal-toc, .legal-foot nav { display: none; }
  .section { break-inside: avoid; box-shadow: none; }
}