/* ==========================================================================
   Halaman dokumen hukum (.wz-lg)

   Satu berkas untuk DUA halaman: syarat-ketentuan.html dan
   terms-conditions.html. Keduanya berstruktur identik — yang berbeda cuma
   bahasanya — jadi memberi masing-masing berkas gaya sendiri berarti membuat
   tempat kedua di mana nilainya bisa melenceng. Awalan .wz-lg (legal) dipakai
   untuk semua kelas di dalamnya.

   Halaman ini tidak memakai lapisan hias. Bukan karena lupa: dokumen hukum
   dibaca dari atas ke bawah selama beberapa menit, dan pola latar yang di
   section pemasaran terbaca sebagai tekstur, di sini terbaca sebagai
   gangguan. Yang dipakai cuma --wz-wash-soft, cuci latar paling kalem yang
   sudah ada di sistem.

   Padding ATAS section tidak ditulis di sini melainkan di nav-revamp.css,
   sebaris dengan milik hero. Alasannya sama: yang memakan ruang itu bar
   melayang, jadi biayanya dipikul berkas yang memasang bar-nya.

   Gaya kepala section (pill -> h1 -> sub) ada di tipografi.css, bukan di
   sini — lihat kaidah.md §4.

   Kontras, dihitung di atas #fdf6f8 (puncak --wz-wash-soft, kasus terburuk
   di halaman ini) — bukan di atas putih, karena di situ semua nilainya lebih
   longgar dan angkanya jadi menipu:

     badan dokumen  #171717 16,83:1   ambang 4,5
     tautan TOC     #5a5a5a  6,47:1   ambang 4,5
     nomor TOC      #6e6e6e  4,79:1   ambang 4,5  <- paling sempit
     TOC aktif      #a8244f  6,51:1   ambang 4,5
     judul bagian   #171717 16,83:1   ambang 4,5
     nomor bagian   #da336b  4,22:1   ambang 3,0 (24px/700 = teks besar;
                                       di ponsel 20px/700, masih di atas
                                       ambang teks besar 18,66px tebal)
     bulatan butir  #da336b  4,22:1   ambang 3,0 (ikon)

   Kalau --wz-tint-soft pernah digelapkan, nomor TOC yang pertama jatuh.
   ========================================================================== */

.wz-lg {
  /* Lebar kolom bacaan. Bukan piksel melainkan ch, karena yang menentukan
     nyaman-tidaknya membaca itu jumlah karakter per baris, bukan lebar
     fisiknya — jadi angkanya tidak perlu disetel ulang tiap ukuran huruf
     berubah.

     62ch, bukan 68ch. Satuan ch = lebar angka "0", dan di Quicksand angka
     itu lebih lebar daripada rata-rata hurufnya (10,22px vs 8,89px pada
     17px). Jadi 68ch bukan 68 karakter melainkan ~78 — di atas pita nyaman
     60-75. 62ch mendarat di ~71. Diukur di peramban, bukan dikira. */
  --wz-lg-measure: 62ch;
  --wz-lg-toc-w: 244px;

  position: relative;
  padding: var(--wz-sec-y) 0;
  background: var(--wz-wash-soft);
  font-family: var(--wz-ui-font);
  color: var(--wz-ink);
}

/* ---------- Gulir halus -------------------------------------------------
   Lompatan dari daftar isi ke bagian yang dituju terjadi seketika, dan di
   dokumen sepuluh bagian itu membingungkan: pembaca kehilangan rasa SEBERAPA
   JAUH ia berpindah, jadi tidak tahu apakah bagian yang muncul ada di atas
   atau di bawah tempatnya tadi.

   Ditulis di sini, bukan di wz-ui.css, dan itu yang membuatnya cukup ditulis
   pada `html` tanpa merembet: berkas ini hanya dimuat oleh syarat-ketentuan
   dan terms-conditions. Halaman lain punya penanganan jangkarnya sendiri di
   nav-revamp.js dan tidak boleh ikut berubah diam-diam.

   Dibungkus no-preference, bukan dimatikan di blok reduced-motion di bawah:
   scroll-behavior perlu TIDAK PERNAH menyala untuk yang memintanya, bukan
   menyala lalu dibatalkan.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wz-lg *,
.wz-lg *::before,
.wz-lg *::after { box-sizing: border-box; }

/* :where() punya kekhususan nol, jadi margin di kelas .wz-lg-* di bawah
   tetap menang atas reset ini. */
.wz-lg :where(p, h1, h2, h3, ul, ol, li) { margin: 0; padding: 0; }
.wz-lg :where(ul, ol) { list-style: none; }

.wz-lg-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Pemilih bahasa -----------------------------------------------
   Halaman lama memakai satu kalimat tautan ("You can read the English version
   here" — berbahasa Inggris, di halaman berbahasa Indonesia). Diganti kontrol
   dua sisi karena kalimat itu tidak memberi tahu pembaca bahwa ia SEDANG
   berada di versi yang mana, dan tidak simetris: versi Inggris menuliskannya
   dalam bahasa Indonesia, jadi keduanya sama-sama menyapa dalam bahasa yang
   bukan bahasa halamannya.

   Tiap sisi ditulis dalam bahasanya sendiri — "Bahasa Indonesia" dan
   "English" — supaya pembaca yang tidak mengerti bahasa halaman ini tetap
   mengenali pilihannya. Yang sedang aktif memakai aria-current="page",
   bukan sekadar warna, jadi pembaca layar ikut mendengarnya.
   ------------------------------------------------------------------------ */

.wz-lg-lang {
  display: inline-flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid var(--wz-line-warm);
  border-radius: 999px;
  background: #fff;
}

.wz-lg-lang a {
  display: inline-flex;
  align-items: center;
  /* 40px cukup di desktop (dituju kursor, bukan jari); di ≤1024px dinaikkan
     ke 44px oleh blok tablet di bawah. */
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wz-ink-soft);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.wz-lg-lang a:hover { background: var(--wz-tint); color: var(--wz-pill-text); }

.wz-lg-lang a[aria-current="page"] {
  background: var(--wz-btn-bg);
  color: #fff;
  cursor: default;
}

.wz-lg-lang a:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: 3px;
}

/* ---------- Tata letak: daftar isi + dokumen ----------------------------- */

.wz-lg-body {
  display: grid;
  grid-template-columns: var(--wz-lg-toc-w) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ---------- Daftar isi ---------------------------------------------------
   Melekat saat digulir. `top` dihitung dari kaki bar melayang — 78px, yaitu
   12px padding atas pembungkus ditambah tinggi pulau 66px, diukur di
   peramban — plus 28px nafas. Tanpa itu baris teratas daftar isi tertutup
   bar begitu halaman digulir.
   ------------------------------------------------------------------------ */

.wz-lg-toc {
  position: sticky;
  top: 106px;
}

.wz-lg-toc__h {
  margin: 0 0 12px;
  font-family: var(--wz-display-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wz-ink-mute);
}

.wz-lg-toc ol {
  /* Nomornya dari counter CSS, bukan diketik ke markup. Judul bagian di
     dokumen sudah bernomor ("1. Apa itu WatZap?"); tanpa nomor di sini
     pembaca harus mencocokkan dua daftar lewat teksnya saja. Counter juga
     berarti menyisipkan bagian baru cukup menambah satu <li> — tidak ada
     sembilan nomor yang harus digeser tangan. */
  counter-reset: wz-lg-toc;

  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Garis rel di sisi kiri. Penanda "sedang dibaca" nanti menebalkan
     potongan garis ini, bukan menambah elemen baru — jadi tidak ada apa pun
     yang bergeser saat penanda berpindah. */
  border-left: 2px solid var(--wz-line-warm);
}

.wz-lg-toc li { counter-increment: wz-lg-toc; }

.wz-lg-toc a {
  /* Dua lajur, bukan nomor sebaris: judul dua baris jadi menggantung rata di
     bawah huruf pertamanya, bukan kembali ke bawah nomornya. */
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 7px 12px;
  /* Menutup garis rel dengan potongan sewarna aksen saat aktif. */
  border-left: 2px solid transparent;
  margin-left: -2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wz-ink-soft);
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wz-lg-toc a::before {
  content: counter(wz-lg-toc) ".";
  color: var(--wz-ink-mute);
  /* Angka selebar sama, jadi 1 dan 10 tidak menggeser judulnya. */
  font-variant-numeric: tabular-nums;
}

.wz-lg-toc a:hover { color: var(--wz-pill-text); }

.wz-lg-toc a:focus-visible {
  outline: 2px solid var(--wz-brand);
  outline-offset: -2px;
}

/* Kelas ini dipasang JavaScript. Tanpa skripnya daftar isi tetap berfungsi
   penuh sebagai daftar tautan — yang hilang cuma penandanya. */
.wz-lg-toc a.is-active {
  border-left-color: var(--wz-btn-bg);
  color: var(--wz-pill-text);
}

.wz-lg-toc a.is-active::before { color: inherit; }

/* Pembungkus <details> hanya dipakai di layar sempit; di desktop daftar isi
   berdiri terbuka tanpa ringkasan yang bisa diketuk. */
.wz-lg-toc__tog {
  display: none;
  list-style: none;
}

.wz-lg-toc__tog::-webkit-details-marker { display: none; }

/* ---------- Dokumen ------------------------------------------------------ */

/* Tiga nilai di bawah ini sempat salah semua, dan penyebabnya satu: aturan ini
   dulu tidak menyetel bobot sama sekali, jadi badan dokumen mewarisi
   `font-weight: 400` dari reset.css.

   400 itu bukan bobot teks berjalan di sistem ini. tipografi.css memakai
   Quicksand 500 untuk setiap sub-judul, dan sistem-desain.md §3 menuliskannya
   sebagai satu-satunya bobot badan teks. Quicksand juga sans geometris
   berujung bulat — 400-nya terbaca lebih tipis daripada 400 di kebanyakan muka
   huruf lain, jadi selisih satu tingkat di sini terasa seperti dua.

   Warnanya ikut salah token. --wz-ink-soft didokumentasikan sebagai "sub-judul,
   teks pendukung"; yang ada di halaman ini bukan teks pendukung — ia SATU-
   SATUNYA isi halaman. Tokennya --wz-ink.

   17px, bukan 16px: kolomnya dibatasi 68ch dan dibaca menerus beberapa menit.
   Ini satu-satunya halaman di situs ini yang dibaca seperti itu.
   ------------------------------------------------------------------------ */
.wz-lg-doc {
  max-width: var(--wz-lg-measure);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--wz-ink);
}

/* Tiap bagian bernomor jadi <article> sendiri supaya jangkar daftar isi
   menunjuk ke blok yang utuh, bukan ke judul yang melayang di atasnya. */
.wz-lg-sec + .wz-lg-sec { margin-top: 40px; }

/* Jangkar dipasang lewat scroll-margin, bukan lewat elemen kosong seperti
   di index.html: halaman ini tidak punya warisan Elementor yang perlu
   ditiru, dan scroll-margin lebih sedikit markup untuk hasil yang sama.
   Nilainya = tinggi bar melayang + nafas. */
.wz-lg-sec { scroll-margin-top: 106px; }

.wz-lg-sec > h2 {
  margin: 0 0 14px;
  font-family: var(--wz-display-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: var(--wz-ink);
  text-wrap: balance;
}

/* Nomor bagian dipisah jadi <span> supaya bisa diberi warna aksen tanpa
   menyentuh teks judulnya — dan supaya pembaca yang melompat dari daftar isi
   bisa memastikan ia mendarat di bagian yang benar. */
.wz-lg-sec > h2 > span { color: var(--wz-brand); }

.wz-lg-sub2 {
  margin: 26px 0 12px;
  font-family: var(--wz-display-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wz-ink);
}

/* Sub-judul pertama di sebuah bagian tidak perlu jarak atas — judul bagian
   di atasnya sudah membawa jaraknya sendiri. */
.wz-lg-sec > h2 + .wz-lg-sub2 { margin-top: 0; }

.wz-lg-doc p + p,
.wz-lg-doc ul + p,
.wz-lg-doc p + ul,
.wz-lg-doc ul + ul { margin-top: 12px; }

/* Warnanya tidak lagi perlu dinaikkan — badan dokumen sudah --wz-ink. Yang
   membedakan tinggal bobotnya: 500 ke 700. */
.wz-lg-doc b,
.wz-lg-doc strong { font-weight: 700; }

/* ---------- Daftar butir -------------------------------------------------
   Penanda digambar sendiri lewat ::before, bukan list-style bawaan. Dua
   alasan: bulatan bawaan ukurannya ikut ukuran huruf dan jadi terlalu besar
   di 16px, dan posisinya tidak bisa disejajarkan dengan baris pertama teks
   tanpa trik yang berbeda-beda antar peramban.
   ------------------------------------------------------------------------ */

.wz-lg-list > li {
  position: relative;
  padding-left: 22px;
}

.wz-lg-list > li + li { margin-top: 9px; }

.wz-lg-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  /* 0.875em: setengah tinggi baris (1,75/2) — menaruh bulatan tepat di
     tengah baris PERTAMA, bukan di tengah butir. Butir dua baris jadi tetap
     punya bulatan yang sejajar dengan huruf pertamanya. */
  top: 0.875em;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--wz-brand);
}

/* Daftar bersarang: satu tingkat, dipakai di 4.2 dan 4.5. Penandanya cincin,
   bukan bulatan penuh, supaya tingkatnya terbaca tanpa perlu menghitung
   indentasi. */
.wz-lg-list .wz-lg-list {
  margin-top: 9px;
  padding-left: 4px;
}

.wz-lg-list .wz-lg-list > li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wz-brand);
}

/* ---------- Blok penutup ------------------------------------------------- */

.wz-lg-end {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--wz-line-warm);
}

.wz-lg-end .wz-cta2 { margin-top: 0; justify-content: flex-start; }

/* ---------- Tablet ------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Satu kolom. Daftar isi naik ke atas dokumen dan melipat jadi <details>:
     di lebar ini ia tidak punya tempat untuk melekat di samping, dan sepuluh
     baris tautan di atas dokumen berarti pembaca harus menggulir melewatinya
     dulu sebelum sampai ke kalimat pertama. */
  .wz-lg-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .wz-lg-toc {
    position: static;
    /* Padding tegaknya NOL, dan itu disengaja. Sebelumnya 16px, lalu
       <summary> menariknya balik dengan margin -16px supaya baris judul
       mengisi kotak penuh saat tertutup — tapi tarikan yang sama juga
       memakan margin-atas daftar saat panel dibuka, jadi tautan pertama
       menempel persis di kaki baris judul (terukur 0px) sementara di bawah
       daftar ada 16px. Panel yang seharusnya berimbang jadi miring.

       Sekarang tidak ada yang perlu ditarik balik: jarak panel terbuka
       ditaruh di dalam pembungkus yang dianimasikan, jadi ia ikut menutup. */
    padding: 0 18px;
    border: 1px solid var(--wz-line-warm);
    border-radius: 14px;
    background: #fff;
  }

  .wz-lg-toc__tog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    /* Hanya mendatar: baris ini mengisi kotak dari tepi ke tepi, sementara
       sisi tegaknya sudah pas tanpa tarikan apa pun. */
    margin: 0 -18px;
    padding: 0 18px;
    font-family: var(--wz-display-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--wz-ink);
    cursor: pointer;
  }

  /* ---------- Koreksi optis label ---------------------------------------
     align-items:center memusatkan KOTAK BARIS, bukan tinta hurufnya. Di Hind
     15px/700 dengan line-height 22,5px, baseline duduk 15,25px dari atas
     kotak baris. Label ini — "Daftar Isi" dan "Table of Contents" — tidak
     punya satu pun huruf turun (g, j, p, q, y), jadi tintanya berhenti
     0,08px di bawah baseline. Hasilnya:

       ruang di atas tinta   4,16px
       ruang di bawah tinta  7,17px   -> kelebihan 3,01px di bawah

     Kotaknya sendiri sudah simetris (diukur 10,8px vs 11,3px dari tepi);
     yang miring tintanya, dan itu yang dilihat mata. padding-top 3px pada
     item yang dipusatkan menggesernya turun separuhnya, 1,5px, jadi tinta
     yang terpusat — bukan kotaknya.

     Ditaruh pada <span> tersendiri, bukan pada <summary>, supaya HANYA teks
     yang bergeser. Kalau dipasang di <summary>, chevron ikut turun 1,5px —
     dan chevron itu bentuk geometris tanpa masalah baseline, jadi justru
     ia yang jadi miring.

     Kalau teks labelnya nanti diganti jadi frasa yang PUNYA huruf turun,
     angka ini harus dihitung ulang — atau dihapus, karena tidak lagi perlu.
     ---------------------------------------------------------------------- */
  .wz-lg-toc__label { padding-top: 3px; }

  .wz-lg-toc__tog::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--wz-ink-mute);
    border-bottom: 2px solid var(--wz-ink-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
  }

  .wz-lg-toc[open] .wz-lg-toc__tog::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Saat skrip hidup, atribut `open` baru dilepas SESUDAH animasi menutup
     selesai — kalau chevron mengikutinya, ia berputar 0,32 detik terlambat,
     seperti tersendat. Kelas .is-open dibalik di awal animasi, jadi panel dan
     chevron bergerak bersamaan. Kekhususannya sama dengan aturan di atas
     (0,2,0), jadi yang menentukan urutan — blok ini sengaja di bawahnya. */
  .wz-lg-toc-js[open] .wz-lg-toc__tog::after {
    transform: rotate(45deg) translate(-2px, -2px);
  }

  .wz-lg-toc-js.is-open .wz-lg-toc__tog::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Pembungkus yang dianimasikan. overflow:hidden yang memotongnya saat
     tingginya 0 — termasuk margin-atas <ol> di dalamnya, jadi jaraknya ikut
     menutup mulus, bukan tertinggal sebagai celah 16px. */
  .wz-lg-toc__isi { overflow: hidden; }

  /* Transisinya hanya hidup kalau skripnya jalan. Tanpa itu <details> tetap
     buka-tutup seperti biasa — cuma seketika. */
  .wz-lg-toc-js .wz-lg-toc__isi {
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .wz-lg-toc__tog:focus-visible {
    outline: 2px solid var(--wz-brand);
    outline-offset: 2px;
  }

  /* Judul "Daftar Isi" versi desktop diganti oleh ringkasan yang bisa
     diketuk, jadi tidak boleh muncul dua kali. */
  .wz-lg-toc__h { display: none; }

  /* Jarak atas DAN bawah daftar, keduanya 16px — sepadan dengan padding
     mendatar kotaknya. Ditulis sebagai margin pada <ol> di dalam pembungkus
     ber-overflow:hidden, bukan sebagai padding pembungkusnya: pembungkus itu
     tingginya dianimasikan ke 0, dan padding tidak ikut menyusut ke 0 (kotak
     border-box tidak bisa lebih pendek dari paddingnya), jadi 32px akan
     tertinggal sebagai celah saat panel tertutup. Margin di dalamnya terpotong
     bersih. Pola yang sama dipakai .wz5-ain di faq-revamp.css. */
  .wz-lg-toc__isi ol { margin: 16px 0; }

  /* Sasaran sentuh. Di desktop tautan daftar isi setinggi 34px — cukup untuk
     kursor, di bawah ambang 44px untuk jari. Dari 1024px ke bawah halaman ini
     dipakai dengan sentuhan, jadi paddingnya dinaikkan. Yang berubah cuma
     tinggi barisnya; nomor dan judulnya tetap di tempat yang sama. */
  .wz-lg-toc a { padding: 12px; }

  .wz-lg-lang a { min-height: 44px; }

  .wz-lg-doc { max-width: none; }
}

/* ---------- Ponsel ------------------------------------------------------- */

@media (max-width: 767px) {
  .wz-lg-inner { padding: 0 16px; }

  .wz-lg-doc { font-size: 16px; line-height: 1.65; }

  .wz-lg-sec + .wz-lg-sec { margin-top: 32px; }

  .wz-lg-sec > h2 { font-size: 20px; }

  .wz-lg-sub2 { font-size: 16px; margin-top: 22px; }

  /* Bar melayang di ponsel lebih tinggi (76px + padding), jadi jangkarnya
     ikut turun. Angkanya sengaja sama dengan .wz-lg-toc di atas supaya
     keduanya tidak pernah berselisih. */
  .wz-lg-sec { scroll-margin-top: 96px; }

  .wz-lg-lang { margin-top: 16px; }

  .wz-lg-end { margin-top: 34px; padding-top: 24px; }

  .wz-lg-end .wz-cta2 { justify-content: center; }
}

/* ---------- Cetak --------------------------------------------------------
   Dokumen hukum termasuk yang benar-benar dicetak dan dilampirkan. Yang
   dibuang cuma yang tidak punya arti di atas kertas: bar melayang, daftar
   isi (nomor halamannya tidak ada), tombol, dan footer.
   ------------------------------------------------------------------------ */

@media print {
  .wzn,
  .wzf,
  .wz-lg-toc,
  .wz-lg-lang,
  .wz-lg-end,
  .wz-skip { display: none; }

  .wz-lg {
    padding: 0;
    background: none;
    color: #000;
  }

  .wz-lg-body { display: block; }
  .wz-lg-doc { max-width: none; color: #000; }

  /* Judul bagian tidak boleh berdiri sendirian di kaki halaman. */
  .wz-lg-sec { break-inside: avoid-page; }
  .wz-lg-sec > h2 { break-after: avoid-page; }
}

/* ---------- Hormati preferensi gerak ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wz-lg-lang a,
  .wz-lg-toc a,
  .wz-lg-toc__tog::after { transition-duration: 0.01ms; }

  /* Animasi tingginya dilewati sama sekali, bukan dipercepat — skripnya juga
     melompat langsung ke keadaan akhir, jadi tidak ada transisi tergantung
     yang perlu diselesaikan. */
  .wz-lg-toc-js .wz-lg-toc__isi { transition: none; }
}