/* Desatizen, halaman situs. Warna dan bentuk diambil dari UI game (panel krem, garis cokelat tebal, tombol teal). */
:root {
  --rumput: #7cc142;
  --rumput-tua: #4f8a2a;
  --cokelat: #4b2a1a;
  --cokelat-muda: #6b4330;
  --krem: #fffaf0;
  --krem-2: #f6ecd8;
  --emas: #f2b134;
  --aspal: #3b3f46;
  --aspal-2: #4a4f57;
  --teal: #23705c;
  --teal-tua: #1a5646;
  --putih: #ffffff;

  --huruf: "Baloo 2", system-ui, sans-serif;
  --s-raksasa: clamp(64px, 12.4vw, 200px);
  --s-judul: clamp(38px, 5vw, 80px);
  --s-pernyataan: clamp(22px, 2vw, 28px);
  --s-teks: 18px;
  --s-kecil: 15px;

  --tepi: clamp(16px, 3vw, 44px);
  --sudut: 14px;
  --garis: 3px;
  --header: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--krem);
  color: var(--cokelat);
  font-family: var(--huruf);
  font-size: var(--s-teks);
  line-height: 1.5;
  font-weight: 500;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: .95; }
a { color: inherit; }
::selection { background: var(--emas); color: var(--cokelat); }
:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; border-radius: 6px; }

.lewati { position: absolute; left: -9999px; }
.lewati:focus { left: var(--tepi); top: 8px; z-index: 50; background: var(--krem); padding: 8px 14px; }

/* Tombol: bentuk tombol game (isi penuh, garis cokelat tebal, sudut 14px) */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; padding: 0 26px;
  font: 800 18px/1 var(--huruf);
  color: var(--putih); background: var(--teal);
  border: var(--garis) solid var(--cokelat); border-radius: var(--sudut);
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s;
}
.tombol:hover { background: var(--teal-tua); transform: translateY(-2px); }
.tombol:active { transform: translateY(1px) scale(.98); }
.tombol--emas { background: var(--emas); color: var(--cokelat); }
.tombol--emas:hover { background: #e3a120; }
.tombol--krem { background: var(--krem); color: var(--cokelat); }
.tombol--krem:hover { background: var(--putih); }
.tautan { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: opacity .15s; }
.tautan:hover { opacity: .75; }

/* Kepala halaman: ikut warna bab di bawahnya */
.kepala {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--tepi);
  background: var(--k-latar, var(--rumput)); color: var(--k-tinta, var(--cokelat));
  transition: background-color .3s, color .3s;
}
.kepala__merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; text-decoration: none; letter-spacing: -0.01em; }
.kepala__merek img { width: 40px; height: 40px; border-radius: 50%; border: var(--garis) solid var(--cokelat); }
.kepala nav { display: flex; gap: 24px; margin-left: auto; }
.kepala nav a { text-decoration: none; font-weight: 700; font-size: 18px; }
.kepala nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.kepala .tombol { min-height: 44px; padding: 0 18px; font-size: 15px; }

.bab { position: relative; padding: calc(var(--header) + 72px) var(--tepi) 120px; }
.kisi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

/* 1. Pembuka */
.pembuka { background: var(--rumput); min-height: 100svh; padding-bottom: 72px; overflow: hidden; grid-template-rows: auto auto 1fr; }
.pembuka h1 { font-size: var(--s-raksasa); line-height: .84; letter-spacing: -0.035em; grid-column: 1 / -1; }
.pembuka h1 span { display: block; }
.pembuka h1 .pucat { color: var(--cokelat); }
.pembuka h1 span + span { color: #1f4d14; }
.pembuka__isi { grid-column: 1 / 7; margin-top: 40px; }
.pembuka__isi p { font-size: var(--s-pernyataan); line-height: 1.35; max-width: 28ch; font-weight: 600; }
.pembuka__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.pembuka__fakta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 44px; padding: 0; list-style: none; font-weight: 700; font-size: 18px; }
.pembuka__fakta li { display: flex; align-items: center; gap: 8px; }
.pembuka__fakta li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cokelat); }
.pembuka__fakta { grid-column: 1 / 7; grid-row: 3; align-self: start; }
.pembuka__gambar { grid-column: 7 / -1; grid-row: 2 / span 2; position: relative; margin-top: -24px; display: flex; justify-content: flex-end; align-items: flex-start; gap: 20px; }
.layar-hp { width: min(330px, 100%); border: 4px solid var(--cokelat); border-radius: 30px; overflow: hidden; transform: rotate(4deg); background: var(--cokelat); }
.layar-hp img { width: 100%; aspect-ratio: 1/2; object-fit: cover; }
.layar-lebar { width: min(460px, 62%); border: 4px solid var(--cokelat); border-radius: var(--sudut); overflow: hidden; transform: rotate(-3deg); margin-top: 120px; }
.warga-jalan { position: absolute; bottom: -10px; left: 6%; display: flex; gap: 14px; }
.warga-jalan img { width: 56px; height: 93px; image-rendering: auto; }

/* 2. Pengenalan: papan petak */
.kenal { background: var(--krem); padding: calc(var(--header) + 8px) 8px 8px; }
.papan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 38svh 38svh; gap: 8px; }
.petak { border-radius: var(--sudut); overflow: hidden; position: relative; display: flex; align-items: flex-end; }
.petak--a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--cokelat); color: var(--krem); padding: 28px 32px; }
.petak--a h2 { font-size: clamp(56px, 8.4vw, 132px); line-height: .86; letter-spacing: -0.035em; }
.petak--b { grid-column: 9 / -1; grid-row: 1; background: var(--emas); padding: 22px 26px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.petak--b strong { font-size: clamp(56px, 7.2vw, 116px); line-height: .9; font-weight: 800; letter-spacing: -0.03em; }
.petak--b span { font-size: var(--s-kecil); font-weight: 700; }
.petak--c { grid-column: 9 / -1; grid-row: 2; background: var(--rumput); }
.petak--c img { width: 100%; height: 100%; object-fit: cover; }
.petak--teks { grid-column: 1 / -1; margin-top: 8px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 64px 32px 96px; background: var(--krem-2); border-radius: var(--sudut); }
.petak--teks .fitur { grid-column: 1 / 6; display: flex; flex-wrap: wrap; gap: 18px; align-content: flex-start; }
.fitur figure { margin: 0; width: calc(33.33% - 12px); min-width: 96px; text-align: center; font-size: var(--s-kecil); font-weight: 700; }
.fitur figure img { margin: 0 auto 6px; height: 110px; width: auto; object-fit: contain; }
.petak--teks-isi { grid-column: 7 / -1; }
.petak--teks p { font-size: 22px; line-height: 1.42; }
.petak--teks p + p { margin-top: 18px; }

/* 3. Papan nama: judul yang bisa diketik */
.papan-nama { background: var(--aspal); color: var(--krem); min-height: 90svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
.papan-nama__kiri { grid-column: 1 / 8; }
.papan-nama .jawab { grid-column: 8 / -1; grid-row: 1; align-self: center; }
.papan-nama h2 { font-size: var(--s-judul); max-width: 16ch; }
.papan-nama .pengantar { margin-top: 18px; max-width: 46ch; color: var(--krem); }
.ketik { margin-top: 48px; display: flex; align-items: center; position: relative; }
.ketik label { position: absolute; left: -9999px; }
.ketik input {
  width: 100%; border: 0; background: transparent; color: var(--emas); padding: 0;
  font: 800 clamp(48px, 6.4vw, 104px)/1.05 var(--huruf); letter-spacing: -0.03em; caret-color: var(--emas);
}
.ketik input:focus { outline: none; }
.ketik:focus-within { outline: 3px solid var(--emas); outline-offset: 8px; border-radius: 8px; }
.jawab { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.persil { position: relative; width: min(300px, 100%); padding-top: 44px; }
.persil img { width: 100%; height: auto; }
.papan-tiang { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.papan-tiang b {
  display: block; background: var(--krem); color: var(--cokelat); border: var(--garis) solid var(--cokelat);
  border-radius: 12px; padding: 8px 18px; font-size: 22px; font-weight: 800; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.papan-tiang i { width: 6px; height: 22px; background: var(--cokelat); }
.jawab__ket { font-size: 15px; max-width: 36ch; }
.jawab__ket .status { font-size: 18px; font-weight: 800; color: var(--putih); margin-bottom: 4px; }
.jawab__ket .salah { color: #ffb4a6; }
.contoh { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.contoh button {
  font: 700 18px var(--huruf); color: var(--krem); background: var(--aspal-2); border: 0; border-radius: var(--sudut);
  min-height: 44px; padding: 0 18px; cursor: pointer; transition: background-color .15s, transform .15s var(--ease);
}
.contoh button:hover { background: #5b616b; transform: translateY(-2px); }
.contoh span { align-self: center; font-size: 18px; margin-right: 6px; }
.catatan-aman { margin-top: 20px; font-size: var(--s-kecil); color: #e8e2d6; max-width: 60ch; }

/* 4. Harga: tiket */
.harga { background: var(--emas); }
.harga h2 { font-size: var(--s-judul); }
.harga .pengantar { margin-top: 18px; max-width: 52ch; }
.tiket {
  margin: 56px 0 0; display: grid; grid-template-columns: 7fr 3fr; position: relative;
  background: var(--krem); border: var(--garis) solid var(--cokelat); border-radius: 20px; min-height: 380px;
}
.tiket__utama { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.tiket__utama h3 { font-size: clamp(36px, 4vw, 60px); }
.tiket__utama .sub { font-size: 22px; font-weight: 700; margin-top: 10px; line-height: 1.3; }
.tiket__utama ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; font-size: 18px; line-height: 1.4; }
.tiket__utama li { padding-left: 18px; position: relative; }
.tiket__utama li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tiket__sobek { position: relative; padding: 40px 28px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; text-align: center; background: var(--krem-2); border-radius: 0 17px 17px 0; }
.tiket__sobek .rp { font-size: clamp(44px, 4.6vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tiket__sobek span { font-size: var(--s-kecil); font-weight: 700; }
.tiket__sobek .tombol { margin-top: 18px; width: 100%; min-height: 56px; }
.tiket__lubang { position: absolute; left: 70%; width: 32px; height: 32px; border-radius: 50%; background: var(--emas); border: var(--garis) solid var(--cokelat); transform: translateX(-50%); }
.tiket__lubang--atas { top: -17px; clip-path: inset(50% 0 0 0); }
.tiket__lubang--bawah { bottom: -17px; clip-path: inset(0 0 50% 0); }
.tiket__titik { position: absolute; left: 70%; top: 24px; bottom: 24px; width: 0; transform: translateX(-50%); border-left: 6px dotted var(--emas); }

.paket > * { min-width: 0; }
.paket { margin: 64px 0 0; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.paket h3 { font-size: clamp(30px, 3vw, 44px); }
.paket .pengantar { margin-top: 14px; font-size: 18px; }
.tabel-koin { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 18px; }
.tabel-koin th { text-align: left; font-size: var(--s-kecil); font-weight: 700; padding: 0 20px; }
.tabel-koin td { background: var(--krem); padding: 16px 20px; font-weight: 700; }
.tabel-koin td:first-child { border-radius: var(--sudut) 0 0 var(--sudut); }
.tabel-koin td:last-child { border-radius: 0 var(--sudut) var(--sudut) 0; text-align: right; font-weight: 800; font-size: 22px; }
.tabel-koin th:last-child { text-align: right; }
.tabel-koin .koin { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.tabel-koin .koin::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--emas); border: 2px solid var(--cokelat); }
.ketentuan-singkat { margin-top: 16px; font-size: 18px; }
.ketentuan-singkat li + li { margin-top: 6px; }

/* 5. Cara beli: geser tahap */
.cara { display: grid; grid-template-columns: 1fr 1fr; min-height: 80svh; padding: 0; }
.cara__kiri { background: var(--teal); color: var(--putih); padding: calc(var(--header) + 72px) var(--tepi) 150px; }
.cara__kiri h2 { font-size: var(--s-kecil); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 18px; font-size: 22px; }
.cara__kalimat { font-size: clamp(40px, 4.6vw, 76px); font-weight: 800; line-height: .98; letter-spacing: -0.025em; min-height: 2em; transition: opacity .2s; }
.cara__jelas { margin-top: 28px; max-width: 40ch; font-size: 18px; transition: opacity .2s; }
.cara__kanan { background: var(--krem-2); display: flex; align-items: center; justify-content: center; padding: calc(var(--header) + 40px) 24px 150px; }
.cara__geser { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px var(--tepi) 20px; background: var(--krem-2); color: var(--cokelat); }
.cara__geser input { width: 100%; -webkit-appearance: none; appearance: none; height: 32px; background: transparent; cursor: pointer; margin: 0; }
.cara__geser input::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: var(--cokelat); }
.cara__geser input::-moz-range-track { height: 10px; border-radius: 5px; background: #c9bfa9; }
.cara__geser input::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--cokelat); }
.cara__geser input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 9px; background: var(--emas); border: var(--garis) solid var(--cokelat); }
.cara__geser input::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: var(--emas); border: var(--garis) solid var(--cokelat); }
.cara__nama { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 15px; font-weight: 700; padding: 0; list-style: none; }
.cara__nama li { color: var(--cokelat-muda); cursor: pointer; }
.cara__nama li:nth-child(n+3) { text-align: right; }
.cara__nama li:nth-child(3) { text-align: center; }
.cara__nama li:nth-child(2) { text-align: center; }
.cara__nama li[aria-current="step"] { color: var(--cokelat); font-weight: 800; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; }
.cara__nama-kiri { color: var(--putih); }

/* Pecahan UI game (gaya panel game sebenarnya) */
.ui { width: min(460px, 100%); background: var(--krem); border: var(--garis) solid var(--cokelat); border-radius: 18px; padding: 22px; color: var(--cokelat); font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.4; transition: opacity .2s; }
.ui h4 { margin: 0 0 8px; font-size: 21px; font-weight: 800; }
.ui p { margin: 0 0 6px; }
.ui .kecil { font-size: 14px; color: #6b4a38; margin-bottom: 14px; }
.ui .btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 2.5px solid var(--cokelat); border-radius: 12px; font-weight: 700; margin-top: 10px; background: var(--putih); }
.ui .btn--hijau { background: #8fd18a; }
.ui .btn--emas { background: var(--emas); }
.ui .btn--teal { background: #23705c; color: var(--putih); }
.ui .btn--sorot { outline: 4px solid var(--teal); outline-offset: 3px; }
.ui .pilih { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 0 14px; border: 2.5px solid #b57a48; border-radius: 12px; margin-top: 8px; background: var(--putih); font-weight: 700; }
.ui .pilih--aktif { border-color: var(--cokelat); background: #fff3c4; outline: 3px solid var(--teal); }
.ui .baris { display: flex; justify-content: space-between; padding: 6px 0; }
.ui .baris + .baris { border-top: 0; }
.ui .total { font-weight: 800; font-size: 19px; margin-top: 4px; }
.ui .metode { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ui .metode span { padding: 6px 12px; border-radius: 10px; background: #f2e6cf; font-weight: 700; font-size: 14px; }
.ui .metode span:first-child { background: #fff3c4; outline: 2.5px solid var(--cokelat); }
.ui .kabar { background: #23705c; color: var(--putih); border: 2.5px solid #1f5e4d; border-radius: 12px; padding: 12px 14px; font-weight: 700; margin-bottom: 14px; }
.ui .dompet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2.5px solid var(--cokelat); border-radius: 999px; background: var(--krem); font-weight: 800; font-size: 18px; }
.ui .dompet::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--emas); border: 2px solid var(--cokelat); }

/* 6. Tanya jawab */
.tanya { background: var(--krem); }
.tanya .kisi { align-items: start; }
.tanya__judul { grid-column: 1 / 5; position: sticky; top: calc(var(--header) + 32px); }
.tanya__judul h2 { font-size: var(--s-judul); }
.tanya__judul p { margin-top: 18px; max-width: 30ch; }
.tanya__daftar { grid-column: 5 / -1; display: flex; flex-direction: column; gap: 8px; }
.tanya details { background: var(--krem-2); border-radius: var(--sudut); transition: background-color .25s; }
.tanya summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding: 14px 26px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary:hover { color: var(--teal-tua); }
.plus { position: relative; flex: none; width: 18px; height: 18px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 18px; height: 3px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
.plus::after { transform: rotate(90deg); }
.tanya details[open] { background: var(--teal); color: var(--putih); }
.tanya details[open] summary:hover { color: var(--putih); }
.tanya details[open] .plus::after { transform: rotate(0deg); }
.tanya details > div { padding: 0 26px 24px; font-size: 18px; max-width: 60ch; }
.tanya details > div p + p { margin-top: 10px; }
.tanya details a { color: var(--putih); }

/* 7. Kontak: baris alamat besar */
.kontak.bab { background: var(--cokelat); color: var(--krem); padding-left: 0; padding-right: 0; padding-bottom: 0; }
.kontak h2 { font-size: var(--s-judul); padding: 0 var(--tepi) 28px; }
.kontak__logo { position: absolute; right: var(--tepi); top: calc(var(--header) + 56px); width: clamp(160px, 22vw, 320px); border-radius: 50%; border: 4px solid var(--krem); transform: rotate(-5deg); }
.kontak .pengantar { padding: 0 var(--tepi) 40px; max-width: 60ch; }
.baris-besar { display: block; padding: 48px var(--tepi) 22px; font-size: clamp(32px, 4.6vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.baris-besar small { display: block; font-size: var(--s-kecil); font-weight: 700; letter-spacing: 0; margin-bottom: 6px; color: #e9d9c6; }
.baris-besar:nth-of-type(even) { background: var(--cokelat-muda); }
a.baris-besar:hover { color: var(--emas); }
.isi-dulu { color: var(--emas); }
.sapa { display: flex; align-items: center; gap: 24px; padding: 40px var(--tepi) 56px; background: var(--teal); color: var(--putih); font-size: clamp(40px, 6vw, 92px); font-weight: 800; text-decoration: none; letter-spacing: -0.03em; line-height: 1; }
.sapa span.bulat { flex: none; display: inline-flex; align-items: center; justify-content: center; width: .9em; height: .9em; border-radius: 50%; background: var(--emas); border: var(--garis) solid var(--cokelat); transition: transform .25s var(--ease); }
.sapa span.bulat svg { width: 46%; height: 46%; }
.sapa:hover span.bulat { transform: translateX(10px); }
.sapa small { display: block; font-size: 18px; font-weight: 600; letter-spacing: 0; margin-top: 10px; }

/* 8. Kaki: merek dari balok atap */
.kaki { background: var(--rumput); color: var(--cokelat); padding: 72px var(--tepi) 32px; }
.balok { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 200px; }
.balok span { flex: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px 10px 4px 4px; border: var(--garis) solid var(--cokelat); color: var(--krem); font-weight: 800; font-size: clamp(36px, 8vw, 132px); line-height: .9; padding-bottom: 8px; }
.balok span:nth-child(1) { height: 100%; background: #e0553f; }
.balok span:nth-child(2) { height: 78%; background: #3e8fd0; }
.balok span:nth-child(3) { height: 90%; background: #f39b2f; }
.balok span:nth-child(4) { height: 66%; background: #3f9a52; }
.balok span:nth-child(5) { height: 96%; background: #e0553f; }
.balok span:nth-child(6) { height: 72%; background: #3e8fd0; }
.balok span:nth-child(7) { height: 86%; background: #f39b2f; }
.balok span:nth-child(8) { height: 62%; background: #3f9a52; }
.balok span:nth-child(9) { height: 92%; background: #e0553f; }
.kaki__kolom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 56px; font-size: 15px; }
.kaki__kolom > div { grid-column: span 2; }
.kaki__kolom > div:nth-child(4) { grid-column: 9 / -1; }
.kaki__kolom h3 { font-size: 18px; letter-spacing: 0; line-height: 1.3; margin-bottom: 10px; }
.kaki__kolom ul { list-style: none; padding: 0; margin: 0; }
.kaki__kolom li + li { margin-top: 6px; }
.kaki__kolom a { text-decoration: none; font-weight: 600; }
.kaki__kolom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kaki__akhir { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; font-size: 15px; font-weight: 600; }
.kaki__akhir .tombol { min-height: 44px; font-size: 15px; }

/* Halaman kebijakan */
.dok { background: var(--krem); padding: calc(var(--header) + 64px) max(var(--tepi), calc((100vw - 1240px) / 2)) 120px; }
.dok h1 { font-size: clamp(48px, 7vw, 110px); max-width: 14ch; }
.dok .pengantar { margin-top: 24px; max-width: 60ch; font-size: 22px; }
.dok__daftar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.dok section { margin-top: 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.dok__buka { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.dok__logo { width: clamp(120px, 20vw, 300px); border-radius: 50%; border: 4px solid var(--cokelat); transform: rotate(-5deg); }
.dok__kiri { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header) + 24px); }
.dok__kiri img { margin-top: 28px; width: min(240px, 80%); height: auto; }
.dok section h2 { font-size: clamp(32px, 3.4vw, 52px); }
.dok section .isi { grid-column: 5 / -1; }
.dok section .isi h3 { font-size: 22px; letter-spacing: 0; line-height: 1.25; margin: 32px 0 8px; }
.dok section .isi h3:first-child { margin-top: 0; }
.dok section .isi p, .dok section .isi li { font-size: 18px; }
.dok section .isi ul, .dok section .isi ol { padding-left: 22px; margin: 8px 0; }
.dok section .isi li + li { margin-top: 6px; }
.dok .berlaku { margin-top: 18px; font-size: var(--s-kecil); }
.dok section:nth-of-type(2n) { background: var(--krem-2); border-radius: var(--sudut); padding: 56px 32px; margin-left: calc(-1 * min(32px, var(--tepi))); margin-right: calc(-1 * min(32px, var(--tepi))); }

/* Gerak masuk (konten tetap tampil tanpa skrip) */
.js .muncul { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 75ms); }
.js .muncul.tampak { opacity: 1; transform: none; }
.layar-hp img, .layar-lebar img { transition: transform 6s linear; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .muncul { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; animation: none !important; }
}

/* Tablet */
@media (max-width: 1000px) {
  .kepala nav { display: none; }
  .kepala .tombol { margin-left: auto; }
  .pembuka__isi { grid-column: 1 / 8; }
  .pembuka__gambar { grid-column: 8 / -1; }
  .pembuka__fakta { grid-column: 1 / 8; }
  .layar-lebar { display: none; }
  .papan-nama__kiri { grid-column: 1 / -1; }
  .papan-nama .jawab { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .petak--teks .fitur { grid-column: 1 / -1; }
  .petak--teks-isi { grid-column: 1 / -1; }
  .paket { grid-template-columns: 1fr; }
  .tanya__judul { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .tanya__daftar { grid-column: 1 / -1; }
  .kaki__kolom > div { grid-column: span 6; }
  .kaki__kolom > div:nth-child(4) { grid-column: span 6; }
  .dok__kiri { grid-column: 1 / -1; position: static; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .dok__kiri img { margin-top: 0; width: 110px; }
  .dok section .isi { grid-column: 1 / -1; }
}

/* HP */
@media (max-width: 640px) {
  :root { --header: 60px; --s-teks: 18px; }
  .kepala { gap: 12px; }
  .kepala__merek { font-size: 22px; }
  .kepala__merek img { width: 34px; height: 34px; }
  .bab { padding-top: calc(var(--header) + 48px); padding-bottom: 96px; }
  .kisi { column-gap: 12px; }
  .pembuka h1 { font-size: 15.4vw; }
  .pembuka__isi { grid-column: 1 / -1; margin-top: 28px; }
  .pembuka__isi p { font-size: 22px; }
  .pembuka__gambar { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; justify-content: center; }
  .pembuka__fakta { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .layar-hp { width: 78%; }
  .warga-jalan { left: 0; bottom: 0; }
  .warga-jalan img { width: 44px; height: 73px; }
  .papan { grid-template-columns: 1fr 1fr; grid-template-rows: 34svh auto; gap: 6px; }
  .kenal { padding: calc(var(--header) + 6px) 6px 6px; }
  .petak--a { grid-column: 1 / -1; grid-row: 1; padding: 20px; }
  .petak--a h2 { font-size: 15vw; }
  .petak--b { grid-column: 1; grid-row: 2; aspect-ratio: 1; padding: 16px; }
  .petak--b strong { font-size: 13vw; }
  .petak--c { grid-column: 2; grid-row: 2; aspect-ratio: 1; }
  .petak--teks { padding: 32px 20px 56px; gap: 28px; }
  .petak--teks p { font-size: 18px; }
  .fitur figure { width: calc(33.33% - 12px); min-width: 0; }
  .fitur figure img { height: 80px; }
  .papan-nama h2 { font-size: 10vw; }
  .ketik input { font-size: 11vw; }
  .papan-nama__kiri, .papan-nama .jawab { grid-column: 1 / -1; grid-row: auto; }
  .papan-nama .jawab { margin-top: 32px; }
  .persil { width: 280px; }
  .contoh { margin-top: 32px; }
  .harga h2 { font-size: 10vw; }
  .tiket { grid-template-columns: 1fr; min-height: 0; }
  .tiket__utama { padding: 28px 22px; }
  .tiket__utama h3 { font-size: 9vw; }
  .tiket__utama ul { grid-template-columns: 1fr; }
  .tiket__sobek { border-radius: 0 0 17px 17px; padding: 28px 22px; }
  .tiket__sobek .rp { font-size: 14vw; }
  .tiket__lubang { left: auto; top: auto; transform: none; }
  .tiket__lubang--atas { left: -17px; top: calc(100% - 228px); clip-path: inset(0 0 0 50%); }
  .tiket__lubang--bawah { right: -17px; bottom: auto; top: calc(100% - 228px); clip-path: inset(0 50% 0 0); }
  .tiket__titik { left: 22px; right: 22px; top: calc(100% - 213px); bottom: auto; width: auto; height: 0; transform: none; border-left: 0; border-top: 6px dotted var(--emas); }
  .tabel-koin { font-size: 15px; }
  .ketentuan-singkat { padding-left: 20px; }
  .kontak__logo { width: 72px; top: calc(var(--header) + 38px); border-width: 3px; }
  .tabel-koin td { padding: 14px 14px; }
  .tabel-koin td:last-child { font-size: 18px; }
  .cara { grid-template-columns: 1fr; }
  .cara__kanan { order: 2; padding: 32px 16px; min-height: 46svh; }
  .cara__geser { position: static; order: 3; background: var(--krem-2); padding: 0 16px 20px; }
  .cara__geser input::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -15px; }
  .cara__kiri { order: 1; padding: calc(var(--header) + 40px) 16px 40px; }
  .cara__kalimat { font-size: 9.4vw; }
  .cara__nama { grid-template-columns: 1fr 1fr; gap: 6px; font-size: 15px; }
  .cara__nama li:nth-child(n) { text-align: left; }
  .tanya summary { font-size: 18px; min-height: 64px; padding: 12px 20px; }
  .tanya details > div { padding: 0 20px 20px; font-size: 15px; }
  .tanya__judul h2 { font-size: 11vw; }
  .kontak h2 { font-size: 11vw; }
  .baris-besar { font-size: 7.6vw; padding: 32px var(--tepi) 16px; }
  .sapa { font-size: 12vw; justify-content: space-between; }
  .sapa span.bulat { width: 56px; height: 56px; }
  .balok { height: 15svh; min-height: 110px; gap: 3px; }
  .balok span { font-size: 9vw; border-radius: 6px 6px 3px 3px; padding-bottom: 4px; border-width: 2px; }
  .kaki__kolom { gap: 24px 16px; }
  .kaki__kolom > div:nth-child(4) { grid-column: 1 / -1; }
  .dok section:nth-of-type(2n) { padding: 40px 20px; }
}

/* Halaman kebijakan: ukuran baca dan HP */
.dok section .isi > * { max-width: 68ch; }
@media (max-width: 640px) {
  .dok__buka { grid-template-columns: 1fr; gap: 24px; }
  .dok__logo { grid-row: 1; width: 96px; }
  .dok h1 { font-size: 12vw; }
  .dok .pengantar { font-size: 18px; }
}