/* ═══════════════════════════════════════════════════════════════════════════
   DOKUMEN HUKUM GLYIV — /ketentuan.html & /privasi.html
   ───────────────────────────────────────────────────────────────────────────
   Pemilik, verbatim: "saya pikir ini terlalu banyak text yang kita tampilkan.
   Saya bahkan sampai bingung." Dokumen hukum memang panjang — yang bisa
   diperbaiki adalah TATA LETAKNYA. Tiga alat dipakai di sini:

     1. daftar isi yang menempel (rel kiri di layar lebar, lipatan di ponsel);
     2. tiap bagian dibuka-tutup, dengan tombol "Ciutkan semua";
     3. RINGKASAN bahasa manusia di atas tiap bagian — dan di layar tertulis
        bahwa ringkasan itu BUKAN pengganti pasalnya.

   ⚠︎ Bagian pasal SENGAJA `<details open>`, bukan tertutup. Isi `<details>`
   yang tertutup TIDAK ADA di `innerText`, jadi dokumen yang tergulung rapat
   terbaca "hampir kosong" oleh pembaca layar, mesin pencari, dan gerbang
   `sapu-halaman.cjs`. Yang tergulung adalah PILIHAN pembaca, bukan keadaan
   bawaan halaman.

   Semua warna memakai token merek dari lab.css. Tidak ada hex mentah kecuali
   untuk keadaan (peringatan/penekanan) yang memang tidak punya token.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--paper); }

/* ── kerangka: rel daftar isi + badan ─────────────────────────────────────── */
.dok-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.dok-grid { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(30px, 5vh, 56px) 0 clamp(44px, 7vh, 80px); }
.dok-grid > * { min-width: 0; }

/* ── kerangka KEDUA: hero + badan, tanpa rel daftar isi ────────────────────────
   ⛔ KELIMA KELAS DI BAWAH SEBELUMNYA TIDAK ADA SAMA SEKALI, dan itu tidak
   pernah memunculkan galat. `delete-account.html` — halaman yang SUDAH
   diserahkan ke Google sebagai "Delete account URL" — memakai `.dok-hero`,
   `.dok-hero__k`, `.dok-hero__d`, `.dok-hero__meta`, dan `.dok-body` sejak
   17 Agustus 2026, sementara berkas ini hanya mengenal kerangka `.dok-grid`.
   CSS tidak mengeluh untuk kelas yang tidak dikenal: elemennya cuma jatuh ke
   gaya bawaan, halaman tetap "tampil", dan tidak ada yang tahu.

   Terukur di https://glyiv.web.app/delete-account (18 Agustus 2026):
     getComputedStyle('.dok-hero__meta').display → "block"   (bukan grid)
     ketiga kotaknya di y = 137 / 193 / 249                  (menumpuk, bukan sebaris)
     aturan CSS yang cocok `.dok-hero|.dok-body` di SELURUH lembar → 0
   Sementara `.dok-sec`, `.dok-ring`, `.dok-pasal`, `.dok-tabel` semuanya
   bergaya normal — itulah sebabnya cacatnya lolos: halamannya terlihat
   sembilan-per-sepuluh benar, dan yang salah justru bagian paling atas.

   Dipakai oleh halaman dokumen yang TIDAK punya daftar isi panjang
   (delete-account, masthead). Halaman berpasal seperti privasi & ketentuan
   tetap memakai `.dok-versi` + `.dok-grid` + `.dok-toc`. */
/* ⛔ PADDING ATAS HARUS MELEWATI NAVBAR — INI BUKAN SELERA, INI TERUKUR.
   `.lnav` adalah `position: fixed` setinggi 69 px dengan `z-index: 80`, jadi ia
   TIDAK menyisihkan ruang untuk dirinya sendiri. Nilai lama
   `clamp(28px, 5vh, 52px)` menghasilkan padding efektif 45 px — lebih pendek
   daripada navbarnya sendiri.

   Terukur di https://glyiv.io/masthead, 1440×900, 18 Agustus 2026:
       jarak dasar navbar → puncak <h1>            2 px
       .dok-hero__k ("Glyiv News") di y = 45       TERTUTUP PENUH
       elementFromPoint di tengah kicker           .ldrop--mega  (milik navbar)
   Jadi bukan hanya "mepet": eyebrow yang menyebut nama terbitannya HILANG dari
   layar sepenuhnya, dan tidak ada galat apa pun yang memberitahukannya.

   96 px = 69 navbar + 27 napas. Sama besarnya dengan `padding-top: 88px` yang
   sudah dipakai `.ga-hero`, jadi ia mengikuti kebiasaan yang ada, bukan angka
   baru. `12vh` membuatnya tumbuh di layar tinggi. */
.dok-hero { padding: clamp(96px, 12vh, 132px) 0 clamp(24px, 3.5vh, 36px); border-bottom: 1px solid var(--hair); }
.dok-hero__k { font-family: var(--l-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.dok-hero h1 { font-family: var(--l-serif); font-weight: 600; font-size: clamp(27px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: var(--pine); margin: 10px 0 0; }
.dok-hero__d { font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.72; color: var(--slate); margin: 12px 0 0; max-width: 62ch; }

/* Baris keterangan: kartu-kartu sejajar yang MELIPAT sendiri di layar sempit.
   `auto-fit` + `minmax` dipilih alih-alih jumlah kolom tetap karena halaman ini
   dibaca di tablet pemilik dan di ponsel peninjau Play; kolom tetap akan
   memaksa gulir mendatar pada salah satunya. */
.dok-hero__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; margin: 20px 0 0; }
.dok-hero__meta > div { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 11px 14px; box-shadow: var(--sh1); }
.dok-hero__meta .k { font-family: var(--l-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dok-hero__meta .v { font-size: 14px; line-height: 1.45; color: var(--pine); font-weight: 700; margin-top: 4px; }
/* `.v.g` = nilai yang ingin ditonjolkan (nama aplikasi, penanggung jawab).
   Teal di atas kartu PUTIH — bukan di atas latar gelap. */
.dok-hero__meta .v.g { color: var(--teal); }

/* Lebar baca dibatasi: `.dok-wrap` 1180px terlalu lebar untuk paragraf, dan
   halaman ini hampir seluruhnya paragraf. Tabelnya tetap bisa lebih lebar
   sebab `.dok-tabelw` menggulir sendiri. */
/* ⛔ `.dok-body` KINI MEMAKAI KERANGKA `.dok-grid` — SATU POLA UNTUK KEEMPAT
   HALAMAN DOKUMEN, bukan dua.

   Versi lama menaruh `<main>` selebar 860 px di dalam `.dok-wrap` selebar
   1180 px TANPA `margin: auto`. Terukur di /masthead 1440×900:
       main   x = 165, lebar 860
       wrap   x = 125, lebar 1180
       sisa kosong di kanan          280 px
   Delapan puluh persen halaman rapat di kiri, dan 280 px di kanan tidak
   mengerjakan apa pun — sementara `privasi.html` dan `ketentuan.html` memakai
   ruang yang sama persis itu untuk daftar isi yang melekat. Dua tampilan untuk
   satu keluarga halaman = varian yang dilarang prinsip #6.

   Sekarang `.dok-body` cukup membungkus; kerangkanya `.dok-grid` yang sudah ada
   di atas, dengan `.dok-toc` di kolom kiri. Tidak ada CSS kerangka baru yang
   ditemukan di sini — yang lama dipakai ulang.

   ⚠︎ `> main` tidak lagi dibatasi 860 px: lebar kolomnya kini datang dari
   `minmax(0, 1fr)` milik `.dok-grid`, dan membatasinya lagi akan menyisakan
   lubang kedua di sisi kanan. */
.dok-body { padding: 0 0 clamp(44px, 7vh, 80px); }
.dok-body .dok-grid { padding-top: clamp(24px, 4vh, 40px); }
/* Rel daftar isi menempel di bawah navbar tetap (69 px), bukan di puncak layar. */
.dok-body .dok-toc { top: 92px; }

/* ── pita versi ───────────────────────────────────────────────────────────── */
.dok-versi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--sh1); padding: 14px 18px; margin-bottom: 22px; }
.dok-versi__b { font-family: var(--l-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.dok-versi__v { font-family: var(--l-mono); font-size: 12px; color: var(--pine); background: var(--paper2); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 11px; -webkit-user-select: all; user-select: all; }
.dok-versi__t { font-size: 13px; color: var(--slate); }
.dok-versi__t b { color: var(--pine); }

/* ── daftar isi ───────────────────────────────────────────────────────────── */
.dok-toc { position: sticky; top: 92px; }
.dok-toc__k { font-family: var(--l-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dok-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: dok; }
.dok-toc li { counter-increment: dok; }
.dok-toc a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 7px 10px; border-radius: 11px; text-decoration: none; font-size: 13.5px; line-height: 1.45; color: var(--slate); border-left: 2px solid transparent; transition: .16s var(--ease); }
.dok-toc a::before { content: counter(dok, decimal-leading-zero); font-family: var(--l-mono); font-size: 10px; color: var(--muted); flex: 0 0 auto; }
.dok-toc a:hover { background: var(--paper2); color: var(--pine); border-left-color: var(--teal); }
.dok-toc a.is-here { background: var(--paper2); color: var(--pine); font-weight: 600; border-left-color: var(--teal); }
.dok-toc a.is-here::before { color: var(--teal); }

/* Di ponsel rel itu jadi lipatan biasa di atas badan. */
.dok-toc__lipat { display: none; }

/* ── alat baca ────────────────────────────────────────────────────────────── */
.dok-alat { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 24px; }
.dok-alat button, .dok-alat a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; color: var(--pine); font-family: var(--l-sans); font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; transition: .16s var(--ease); }
.dok-alat button:hover, .dok-alat a:hover { border-color: var(--teal); color: var(--teal); }
.dok-alat svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── bagian ───────────────────────────────────────────────────────────────── */
.dok-sec { scroll-margin-top: 96px; padding-bottom: clamp(26px, 4vh, 40px); }
.dok-sec + .dok-sec { border-top: 1px solid var(--hair); padding-top: clamp(26px, 4vh, 40px); }
.dok-sec__n { font-family: var(--l-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.dok-sec h2 { font-family: var(--l-serif); font-weight: 600; font-size: clamp(21px, 2.7vw, 29px); line-height: 1.16; letter-spacing: -.01em; color: var(--pine); margin: 8px 0 0; }

/* ── ringkasan bahasa manusia ─────────────────────────────────────────────── */
.dok-ring { background: var(--paper2); border: 1px solid var(--hair); border-left: 3px solid var(--brass); border-radius: 0 16px 16px 0; padding: 15px 18px; margin: 16px 0 0; }
.dok-ring__k { font-family: var(--l-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 600; display: block; margin-bottom: 6px; }
.dok-ring p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--ink); }
.dok-ring p b { color: var(--pine); }

/* ── pasal (bisa dibuka-tutup) ────────────────────────────────────────────── */
.dok-pasal { margin-top: 14px; border: 1px solid var(--hair); border-radius: 16px; background: #fff; box-shadow: var(--sh1); overflow: hidden; }
.dok-pasal > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; cursor: pointer; list-style: none; font-family: var(--l-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; transition: .16s var(--ease); }
.dok-pasal > summary::-webkit-details-marker { display: none; }
.dok-pasal > summary:hover { color: var(--teal); background: var(--paper2); }
.dok-pasal > summary .cv { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .18s var(--ease); }
.dok-pasal[open] > summary .cv { transform: rotate(180deg); }
.dok-pasal__isi { padding: 2px 18px 18px; border-top: 1px solid var(--hair); }
.dok-pasal__isi > *:first-child { margin-top: 14px; }

.dok-pasal__isi p { font-size: 14.5px; line-height: 1.75; color: var(--slate); margin: 0 0 12px; }
.dok-pasal__isi p b { color: var(--pine); }
.dok-pasal__isi h3 { font-family: var(--l-sans); font-weight: 800; font-size: 14px; color: var(--pine); margin: 20px 0 8px; }
/* `list-style` DITULIS EKSPLISIT: lab.css mencabut penanda daftar secara global
   (`ul{list-style:none}`) untuk daftar navigasi, dan tanpa baris ini daftar
   larangan & daftar hak di dokumen hukum tampil sebagai paragraf pendek yang
   menempel — pembaca kehilangan satu-satunya isyarat bahwa itu ENUMERASI. */
.dok-pasal__isi ul { list-style: disc; }
.dok-pasal__isi ol { list-style: decimal; }
.dok-pasal__isi ul, .dok-pasal__isi ol { margin: 0 0 12px; padding-left: 22px; }
.dok-pasal__isi li::marker { color: var(--brass); }
.dok-pasal__isi li { font-size: 14.5px; line-height: 1.72; color: var(--slate); margin-bottom: 7px; }
.dok-pasal__isi li b { color: var(--pine); }
.dok-pasal__isi a { color: var(--teal); }
.dok-pasal__isi code { font-family: var(--l-mono); font-size: 12px; background: var(--paper2); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 5px; color: var(--pine); word-break: break-word; }

/* ── pita catatan / peringatan ────────────────────────────────────────────── */
.dok-nota { display: flex; gap: 11px; align-items: flex-start; border-radius: 14px; padding: 13px 15px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; }
.dok-nota svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }
.dok-nota b { display: block; margin-bottom: 3px; }
.dok-nota--awas { background: #fdf6e9; border: 1px solid #e8d5ad; color: #5a4413; }
.dok-nota--awas b { color: #4a3608; }
.dok-nota--tutup { background: #eefaf3; border: 1px solid #bfe6d2; color: #154b34; }
.dok-nota--tutup b { color: var(--pine); }

/* ── tabel inventaris data ────────────────────────────────────────────────── */
/* Wadahnya sendiri yang menggulir — badan halaman TIDAK BOLEH menggulir
   mendatar (aturan proyek). */
.dok-tabelw { overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.dok-tabel { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }
.dok-tabel th, .dok-tabel td { text-align: left; vertical-align: top; padding: 11px 13px; border-bottom: 1px solid var(--hair); font-size: 13.5px; line-height: 1.6; color: var(--slate); }
.dok-tabel th { font-family: var(--l-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--paper2); font-weight: 600; }
.dok-tabel tr:last-child td { border-bottom: 0; }
.dok-tabel td b { color: var(--pine); }
.dok-tabel .ya { color: #15603f; font-weight: 700; }
.dok-tabel .tidak { color: #8a3b2f; font-weight: 700; }

/* ── kotak kontak ─────────────────────────────────────────────────────────── */
.dok-kontak { background: linear-gradient(160deg, #0f2e22, #123c2c 62%, #0c261c); color: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 38px); margin-top: 10px; }
.dok-kontak .k { font-family: var(--l-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8affc1; font-weight: 600; }
.dok-kontak h3 { font-family: var(--l-serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); color: #fff; margin: 10px 0 10px; }
.dok-kontak p { color: rgba(255, 255, 255, .84); font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; max-width: 62ch; }
.dok-kontak p b { color: #fff; }
.dok-kontak a.tb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 18px; border-radius: 999px; background: linear-gradient(135deg, #11804F, #0A6B41); color: #fff; font-family: var(--l-sans); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.dok-kontak a.tb:hover { transform: translateY(-2px); }
.dok-kontak small { display: block; margin-top: 14px; font-family: var(--l-mono); font-size: 11px; line-height: 1.7; color: rgba(255, 255, 255, .62); }
.dok-kontak small a { color: #8affc1; }

/* ── kaki dokumen ─────────────────────────────────────────────────────────── */
.dok-kaki { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--hair); font-family: var(--l-mono); font-size: 11px; line-height: 1.9; color: var(--muted); }
.dok-kaki a { color: var(--teal); }

/* ── ponsel & tablet tegak ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dok-grid { grid-template-columns: 1fr; gap: 18px; }
  .dok-toc { position: static; }
  .dok-toc__lipat { display: block; border: 1px solid var(--hair); border-radius: 16px; background: #fff; box-shadow: var(--sh1); overflow: hidden; }
  .dok-toc__lipat > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 16px; cursor: pointer; list-style: none; font-family: var(--l-sans); font-weight: 700; font-size: 14px; color: var(--pine); }
  .dok-toc__lipat > summary::-webkit-details-marker { display: none; }
  .dok-toc__lipat > summary .cv { width: 14px; height: 14px; margin-left: auto; transition: transform .18s var(--ease); }
  .dok-toc__lipat[open] > summary .cv { transform: rotate(180deg); }
  .dok-toc__isi { padding: 4px 10px 12px; border-top: 1px solid var(--hair); }
  .dok-toc__k { display: none; }
  /* Rel tetap diganti lipatan — kalau tidak, daftar isinya muncul DUA KALI. */
  .dok-toc__daftar { display: none; }
}

/* Jari kasar (tablet pemilik) — bukan hanya lebar ponsel. */
@media (pointer: coarse) {
  .dok-toc a, .dok-pasal > summary, .dok-alat button, .dok-alat a { min-height: 48px; }
}

@media print {
  .lnav, .lfoot, .dok-toc, .dok-alat, .liv-fab, .liv-chat, .gv-bg-root, .ga-hero { display: none !important; }
  .dok-grid { grid-template-columns: 1fr; padding: 0; }
  .dok-pasal { break-inside: avoid; box-shadow: none; }
  .dok-pasal__isi { display: block !important; }
}