/* Extracted from templates/legal.html (redesign 2026-05-31). */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root[data-theme="dark"] {
      --bg: #0A0F1E; --bg-elev: #0F1729; --bg-card: rgba(255,255,255,0.025);
      --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.14);
      --txt: #F1F5F9; --txt-muted: #94A3B8; --txt-faint: #64748B;
    }
    :root[data-theme="light"] {
      --bg: #F6F7FB; --bg-elev: #FFFFFF; --bg-card: #FFFFFF;
      --line: #E5E9F0; --line-2: #CDD5E0;
      --txt: #0F172A; --txt-muted: #475569; --txt-faint: #94A3B8;
    }
    body {
      font-family: var(--ff-body); color: var(--txt);
      background: var(--bg); min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      line-height: 1.65;
    }

    /* Header */
    .lg-hdr {
      position: sticky; top: 0; z-index: 10;
      display: flex; align-items: center; gap: 16px;
      padding: 14px 32px; height: 64px;
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      backdrop-filter: saturate(140%) blur(12px);
      -webkit-backdrop-filter: saturate(140%) blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .lg-hdr a.brand {
      display: inline-flex; align-items: center; gap: 11px;
      text-decoration: none; color: var(--txt);
    }
    .lg-hdr .brand img { height: 28px; }
    .lg-hdr .brand-wm {
      font-family: var(--ff-display); font-size: 19px; font-weight: 500;
      letter-spacing: -0.012em;
    }
    .lg-hdr .brand-wm em {
      font-style: italic;
      background: var(--grad-text);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    /* ── Rel dunia versi halaman hukum ─────────────────────────────────────
       Kepala legal dulu hanya menawarkan dua tautan (merek + "Kembali ke
       App"), dan `scripts/ukur_kerangka_navigasi.py` menghitung /data-deletion
       serta /legal/data-deletion sebagai BENAR-BENAR BUNTU pada 25 Agu 2026.
       Sembilan rute hukum lain lolos hanya karena prosanya kebetulan
       menautkan keluar — bukan karena kepalanya menyediakan jalan.

       Kelas `hdr__pub-link` dipinjam dari kepala publik `base.html` supaya
       namanya satu. Gayanya WAJIB lokal: `shell.css` tidak dimuat di halaman
       hukum, dan memuatnya akan menabrak `:root` yang ditulis ulang di berkas
       ini. Warna aktifnya `--accent` (token palet pengguna), bukan heks — jadi
       ia ikut berubah di keenam palet, termasuk grafit.

       Pembedanya BUKAN warna: labelnya selalu tampil dan urutannya tetap.
       Tidak ada butir yang ditandai aktif di sini — halaman hukum memang tidak
       berada di dalam salah satu dunia, dan menyalakan salah satunya akan
       berbohong tentang posisi pembaca. */
    .lg-hdr .lg-worlds {
      display: flex; align-items: center; gap: 2px;
      min-width: 0; overflow-x: auto;
      scrollbar-width: none;
    }
    .lg-hdr .lg-worlds::-webkit-scrollbar { display: none; }
    .lg-hdr .hdr__pub-link {
      flex: 0 0 auto;
      font-family: var(--ff-body); font-size: 13.5px; font-weight: 500;
      letter-spacing: -0.005em;
      color: var(--txt-muted); text-decoration: none;
      padding: 8px 12px; border-radius: 999px;
      border: 1px solid transparent;
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
    .lg-hdr .hdr__pub-link:hover,
    .lg-hdr .hdr__pub-link:focus-visible {
      background: color-mix(in oklab, var(--txt) 6%, transparent);
      color: var(--txt);
    }
    .lg-hdr .hdr__pub-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .lg-hdr .spacer { flex: 1; }
    .lg-hdr .lang-tog {
      display: inline-flex; padding: 3px;
      background: color-mix(in oklab, var(--txt) 5%, transparent);
      border: 1px solid var(--line);
      border-radius: 999px;
    }
    .lg-hdr .lang-tog a {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 4px 12px; border-radius: 999px;
      text-decoration: none;
      color: var(--txt-faint);
      transition: all 0.18s;
    }
    .lg-hdr .lang-tog a.is-on {
      background: var(--bg-elev);
      color: var(--txt);
    }
    .lg-hdr a.back-link {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--txt-muted); text-decoration: none;
      padding: 8px 14px; border-radius: 999px;
      transition: all 0.18s;
    }
    .lg-hdr a.back-link:hover {
      background: color-mix(in oklab, var(--txt) 5%, transparent);
      color: var(--txt);
    }

    /* Main */
    .lg-main {
      max-width: 760px; margin: 0 auto;
      padding: 56px 28px 80px;
    }
    .lg-kicker {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--txt-faint);
      margin-bottom: 14px;
    }
    h1.lg-title {
      font-family: var(--ff-display); font-weight: 500;
      font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem);
      line-height: 1.04; letter-spacing: -0.025em;
      color: var(--txt); margin-bottom: 20px;
    }
    h1.lg-title em {
      font-style: italic;
      background: var(--grad-text);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .lg-meta {
      font-family: var(--ff-mono); font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--txt-faint);
      margin-bottom: 36px;
      padding-bottom: 24px; border-bottom: 1px solid var(--line);
    }
    .lg-section { margin-bottom: 36px; }
    .lg-section h2 {
      font-family: var(--ff-display); font-weight: 500;
      font-size: 1.5rem; line-height: 1.2;
      letter-spacing: -0.018em;
      color: var(--txt); margin: 36px 0 14px;
    }
    .lg-section h2:first-child { margin-top: 0; }
    .lg-section h3 {
      font-family: var(--ff-display); font-weight: 500;
      font-size: 1.15rem; letter-spacing: -0.012em;
      color: var(--txt); margin: 22px 0 10px;
    }
    .lg-section p {
      color: var(--txt-muted);
      margin-bottom: 14px;
      font-size: 16px;
    }
    .lg-section p strong { color: var(--txt); font-weight: 500; }
    .lg-section ul, .lg-section ol {
      padding-left: 24px; margin: 6px 0 18px;
      color: var(--txt-muted);
    }
    .lg-section ul li, .lg-section ol li {
      margin-bottom: 8px; padding-left: 4px;
    }
    .lg-section a {
      color: var(--c-accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .lg-section .lg-note {
      padding: 18px 22px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 14px;
      margin: 18px 0;
    }
    .lg-section .lg-note__lbl {
      font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--c-accent);
      margin-bottom: 6px;
    }

    .lg-toc {
      padding: 22px 26px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 16px;
      margin-bottom: 40px;
    }
    .lg-toc__lbl {
      font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--txt-faint);
      margin-bottom: 12px;
    }
    .lg-toc ol {
      list-style: none; padding: 0; margin: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
      counter-reset: toc;
    }
    @media (max-width: 600px) { .lg-toc ol { grid-template-columns: 1fr; } }
    .lg-toc li { counter-increment: toc; padding-left: 0; margin: 0; }
    .lg-toc li::before {
      content: counter(toc, decimal-leading-zero) ". ";
      font-family: var(--ff-mono); font-size: 11px;
      color: var(--txt-faint); letter-spacing: 0.04em;
      margin-right: 6px;
    }
    .lg-toc a {
      color: var(--txt); text-decoration: none;
      font-size: 14px; font-weight: 500;
      transition: color 0.18s;
    }
    .lg-toc a:hover { color: var(--c-accent); }

    .lg-foot {
      margin-top: 56px; padding-top: 24px;
      border-top: 1px solid var(--line);
      font-family: var(--ff-mono); font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--txt-faint);
      display: flex; gap: 18px; flex-wrap: wrap;
    }
    .lg-foot a { color: var(--txt-muted); text-decoration: none; }
    .lg-foot a:hover { color: var(--c-accent); }

    /* Tabel sub-prosesor (F2-28). Nol hex — semua warna lewat token halaman. */
    .lg-table-wrap {
      margin: 18px 0 8px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .lg-table {
      width: 100%; min-width: 620px;
      border-collapse: collapse;
      font-size: 14px;
      color: var(--txt-muted);
    }
    .lg-table th, .lg-table td {
      text-align: left; vertical-align: top;
      padding: 11px 14px;
      border-bottom: 1px solid var(--line);
    }
    .lg-table thead th {
      font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--txt-faint);
      background: color-mix(in oklab, var(--txt) 4%, transparent);
      border-bottom: 1px solid var(--line-2);
      white-space: nowrap;
    }
    .lg-table tbody tr:last-child td { border-bottom: 0; }
    .lg-table tbody td:first-child {
      color: var(--txt); font-weight: 500;
      white-space: nowrap;
    }
    .lg-pill {
      display: inline-block;
      font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 3px 9px; border-radius: 999px;
      border: 1px solid var(--line-2);
      color: var(--txt-muted);
    }
    .lg-pill--ok {
      color: var(--c-accent);
      border-color: color-mix(in oklab, var(--c-accent) 45%, transparent);
      background: color-mix(in oklab, var(--c-accent) 10%, transparent);
    }
    @media (max-width: 600px) {
      .lg-table { font-size: 13px; }
      .lg-table th, .lg-table td { padding: 9px 11px; }
    }

/* ──────────────────────────────────────────────────────────────────────
   Hak hapus untuk SUBJEK penelitian (halaman /legal/hapus-data-subjek).
   Satu-satunya halaman legal yang punya FORMULIR, jadi kelas-kelas di
   bawah lahir di sini dan tidak dipakai halaman legal lain.

   Semua warna lewat TOKEN. Halaman ini dibuka orang yang datanya dipanen,
   sering dari ponsel dan sering dari tautan yang dibagikan — jadi ia harus
   ikut berganti tema seperti halaman lain, bukan mengunci satu palet.
   ────────────────────────────────────────────────────────────────────── */
.lg-steps {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.75;
}
.lg-steps > li { margin-bottom: .6rem; }

.lg-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
  max-width: 34rem;
}
.lg-form label {
  font-size: .85rem;
  color: var(--txt-muted);
  margin-top: .4rem;
}
.lg-form input,
.lg-form select {
  width: 100%;
  /* min-width:0 wajib menyertai lebar-penuh di dalam flex — tanpa itu
     isian meluber melewati kartunya di layar 320px. Cacat yang sama
     pernah muncul di 20 halaman repo ini. */
  min-width: 0;
  /* 16px, bukan lebih kecil: iOS memperbesar seluruh halaman saat isian
     ber-font di bawah 16px difokuskan, dan formulir ini justru paling
     sering dibuka dari ponsel. */
  font-size: 16px;
  font-family: var(--ff-body);
  padding: .6rem .75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  color: var(--txt);
}
.lg-form input:focus,
.lg-form select:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.lg-form button {
  align-self: flex-start;
  margin-top: .9rem;
  padding: .65rem 1.4rem;
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 600;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--bg);
  cursor: pointer;
}
.lg-form button:hover { filter: brightness(1.08); }

.lg-box-ok,
.lg-box-warn {
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-2);
  background: var(--bg-card);
}
.lg-box-ok   { border-left: 3px solid var(--c-success); }
.lg-box-warn { border-left: 3px solid var(--c-warning); }

.lg-contact {
  font-family: var(--ff-mono);
  font-size: .95rem;
  word-break: break-word;
}

/* ──────────────────────────────────────────────────────────────────────
   Kepala halaman legal di layar 320px.

   Terukur dengan `web/scripts/periksa_responsif.mjs` (23 Agu 2026):
   `header.lg-hdr` meluber +12px keluar layar pada 320×568 — di SETIAP
   halaman legal (/privacy, /terms, dan halaman hak-hapus subjek), bukan
   hanya satu. Isinya empat benda dengan `gap: 16px` dan `padding: 14px 32px`:
   64px padding samping saja sudah memakan seperlima lebar layar.

   Kenapa tidak pernah ketahuan: `.lg-hdr` sticky dan penuh-lebar, jadi
   luberannya tidak menghasilkan bilah gulir yang mencolok — ia hanya
   mendorong tombol "Kembali ke App" sedikit keluar layar pada perangkat
   paling sempit yang masih dipakai. Tidak ada galat, tidak ada keluhan.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .lg-hdr {
    gap: 10px;
    padding: 12px 14px;
  }
  .lg-hdr .brand-wm { font-size: 17px; }
  .lg-hdr .brand img { height: 24px; }
  .lg-hdr .lang-tog a { padding: 4px 9px; }
  .lg-hdr a.back-link { padding: 8px 10px; letter-spacing: 0.06em; }
}

/* ──────────────────────────────────────────────────────────────────────
   Kepala legal di bawah 760px: DUA BARIS, bukan rel dunia yang disembunyikan.

   Godaannya adalah `display: none` pada `.lg-worlds` supaya kepalanya tetap
   64px. Itu persis kelas cacat yang sedang diperbaiki: halaman hukum paling
   sering dibuka dari HP (tautan kebijakan di corong bayar, di App Store, di
   surel), jadi menyembunyikan jalan keluarnya di lebar itu = mengembalikan
   halaman buntu untuk pembaca yang paling butuh.

   `height` diganti `auto` karena `.lg-hdr` memakai tinggi PATOK 64px; tanpa
   itu baris kedua terpotong dan tak ada galat yang memberi tahu.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lg-hdr {
    flex-wrap: wrap;
    height: auto;
    row-gap: 2px;
    padding-top: 8px; padding-bottom: 8px;
    /* `.spacer` (flex:1) dimatikan di bawah dan digantikan ini. Dibiarkan
       hidup, ia menambah satu celah lagi di baris pertama dan mendorong
       "Kembali ke App" turun — kepalanya jadi TIGA baris setinggi 133px di
       layar 320px, seperempat viewport yang lengket permanen. Terukur, bukan
       ditaksir. */
    justify-content: space-between;
  }
  .lg-hdr .spacer { display: none; }
  .lg-hdr .lg-worlds {
    order: 5;                 /* baris kedua, penuh lebar */
    width: 100%;
    margin: 0 -4px;
    padding: 0 4px;
  }
  .lg-hdr .hdr__pub-link { padding: 6px 10px; font-size: 13px; }
}