/* Tampak — halaman jualan, Syarat Layanan, dan Kebijakan Privasi. Arah "Apple modern, hitam-putih premium".
   Huruf Inter. Hanya hitam, putih, dan abu. Selang-seling bagian hitam, putih, dan abu muda.
   Tiga jenis sudut: kartu 28 px (HP 20 px), kontrol 12 px, kapsul 980 px.
   Tanpa biru, tanpa hijau, tanpa kaca buram (backdrop-filter), tanpa huruf monospace.
   Gradasi hanya hitam ke abu sangat gelap, dan peralihan foto ke hitam.
   Berkas ini berdiri sendiri (tidak memakai gaya.css milik aplikasi). */

:root {
  --hitam: #000000;
  --tinta: #1d1d1f;
  --putih: #ffffff;
  --abu-latar: #f5f5f7;
  --abu-teks: #6e6e73;
  --abu-teks-gelap: #a1a1a6;
  --garis: #d2d2d7;
  --garis-gelap: #424245;
  --abu-tombol: #d2d2d7;
  --abu-tombol-gelap: #333336;

  --r-kartu: 28px;
  --r-kontrol: 12px;
  --r-kapsul: 980px;

  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --f-hero: clamp(48px, 5.6vw, 80px);
  --f-judul: clamp(36px, 3.9vw, 56px);
  --f-kartu: 28px;
  --f-harga: 40px;
  --f-pengantar: 17px;
  --f-isi: 17px;
  --f-halus: 14px;
  --f-ket: 14px;

  --lebar: 1120px;
  --tepi: 40px;
  --bagian: 140px;
  --nav: 48px;
  --subnav: 52px;
  --gerak: cubic-bezier(.25, .1, .25, 1);
}
@media (max-width: 1068px) { :root { --tepi: 32px; --bagian: 112px; } }
@media (max-width: 734px) { :root { --tepi: 20px; --bagian: 80px; --r-kartu: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--abu-latar); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--subnav) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--putih); color: var(--tinta);
  font-family: var(--font); font-size: var(--f-isi); line-height: 1.47; font-weight: 400;
  letter-spacing: -0.011em; font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.07; letter-spacing: -0.025em; text-wrap: balance; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }
sup { font-size: 14px; line-height: 0; vertical-align: super; }
sup a { text-decoration: none; padding: 0 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.wadah { width: min(var(--lebar), 100% - 2 * var(--tepi)); margin-inline: auto; }

/* ---------- tautan lompat ---------- */
.lompat { position: absolute; left: var(--tepi); top: -120px; z-index: 40; padding: 10px 20px; border-radius: var(--r-kapsul); background: var(--putih); color: var(--tinta); font-size: var(--f-halus); font-weight: 500; text-decoration: none; }
.lompat:focus { top: 8px; }

/* ---------- tombol kapsul dan tautan teks ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 24px; border-radius: var(--r-kapsul); border: 1px solid transparent;
  background: var(--tinta); color: var(--putih); font-size: var(--f-isi); font-weight: 500; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s var(--gerak), color .2s var(--gerak);
}
.tombol:hover { background: #3a3a3c; }
.tombol.terang { background: var(--putih); color: var(--tinta); }
.tombol.terang:hover { background: var(--abu-tombol); }
.tombol.garis { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.tombol.garis:hover { background: var(--tinta); color: var(--putih); }
.tombol.kecil { min-height: 32px; padding: 6px 16px; font-size: var(--f-halus); white-space: nowrap; }
@media (pointer: coarse) { .tombol { min-height: 48px; } .tombol.kecil { min-height: 44px; } }

.tautan-lanjut { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--f-isi); font-weight: 500; text-decoration: none; }
.tautan-lanjut span { margin-left: 2px; }
.tautan-lanjut:hover { text-decoration: underline; text-underline-offset: 4px; }
.tautan-isi { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tautan-isi:hover { text-decoration-thickness: 2px; }
button.tautan { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- nav global: tipis, hitam ---------- */
.nav { background: var(--hitam); color: #d2d2d7; position: relative; z-index: 30; }
.nav .wadah { height: var(--nav); display: flex; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; min-height: 44px; }
.logo svg { width: 18px; height: 18px; flex: none; }
.nav .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-tautan { display: flex; gap: 32px; margin-inline: auto; }
.nav-aksi { display: flex; gap: 28px; margin-left: auto; }
.nav-tautan + .nav-aksi { margin-left: 0; }
.nav a.teks { font-size: 14px; text-decoration: none; color: #d2d2d7; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s; }
.nav a.teks:hover { color: var(--putih); }
@media (max-width: 834px) { .nav-tautan { display: none; } .nav .wadah { justify-content: space-between; } .nav a.teks { font-size: 14px; } }

/* ---------- subnav produk: menempel, warna mengikuti bagian di bawahnya ---------- */
.subnav { position: sticky; top: 0; z-index: 25; background: var(--hitam); color: var(--putih); border-bottom: 1px solid var(--garis-gelap); transition: background-color .3s var(--gerak), color .3s var(--gerak), border-color .3s var(--gerak); }
.subnav .wadah { height: var(--subnav); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.subnav-judul { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.subnav-kanan { display: flex; align-items: center; gap: 28px; }
.subnav-tautan { display: flex; gap: 24px; }
.subnav-tautan a { font-size: 14px; text-decoration: none; color: inherit; opacity: .8; display: inline-flex; align-items: center; min-height: 44px; }
.subnav-tautan a:hover { opacity: 1; }
.subnav-beli { visibility: hidden; opacity: 0; transition: opacity .3s var(--gerak), visibility .3s; min-height: 28px; padding: 4px 14px; font-size: 12px; }
.subnav-beli.tampil { visibility: visible; opacity: 1; }
.subnav .tombol.subnav-beli { background: var(--putih); color: var(--tinta); }
.subnav.terang { background: var(--putih); color: var(--tinta); border-bottom-color: var(--garis); }
.subnav.terang .tombol.subnav-beli { background: var(--tinta); color: var(--putih); }
@media (max-width: 734px) { .subnav-tautan { display: none; } .subnav-judul { font-size: 17px; } .subnav-beli { min-height: 32px; } }
@media (pointer: coarse) { .subnav .tombol.subnav-beli { min-height: 36px; } }

/* ---------- bagian umum ---------- */
.bagian { padding-block: var(--bagian); }
.putih { background: var(--putih); color: var(--tinta); }
.abu { background: var(--abu-latar); color: var(--tinta); }
.hitam { background: radial-gradient(120% 70% at 50% 0%, #1d1d1f 0%, var(--hitam) 62%); color: #f5f5f7; }
.kepala { display: grid; gap: 20px; max-width: 860px; margin-bottom: 64px; }
.kepala.tengah { max-width: 980px; margin-inline: auto; text-align: center; justify-items: center; }
.eyebrow-bagian { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--abu-teks); }
.hitam .eyebrow-bagian { color: var(--abu-teks-gelap); }
.judul-bagian { font-size: var(--f-judul); letter-spacing: -0.028em; line-height: 1.07; }
.pengantar { font-size: var(--f-pengantar); line-height: 1.38; letter-spacing: -0.016em; color: var(--abu-teks); font-weight: 500; }
.hitam .pengantar { color: var(--abu-teks-gelap); }
.bantu { font-size: var(--f-isi); color: var(--abu-teks); }
.kepala .buka { display: grid; gap: 10px; }
.kartu { background: var(--putih); border-radius: var(--r-kartu); }
.abu .kartu { background: var(--putih); }
.putih .kartu { background: var(--abu-latar); }

/* label foto: judul, keterangan, dan alat pembuat */
.label { display: grid; gap: 2px; padding-top: 14px; font-size: var(--f-halus); line-height: 1.43; color: var(--abu-teks); }
.label .no { font-size: var(--f-ket); font-weight: 600; letter-spacing: .02em; color: var(--abu-teks); }
.label .judul-karya { font-size: var(--f-isi); font-weight: 600; color: var(--tinta); letter-spacing: -0.015em; }
.label .ket-alat { font-size: var(--f-ket); color: var(--abu-teks); }
.hitam .label, .hero .label, .penutup .label { color: var(--abu-teks-gelap); }
.hitam .label .no, .hitam .label .ket-alat, .hero .label .ket-alat, .penutup .label .ket-alat { color: var(--abu-teks-gelap); }
.hitam .label .judul-karya, .hero .label .judul-karya, .penutup .label .judul-karya { color: #f5f5f7; }

/* ---------- hero hitam ---------- */
.hero { background: var(--hitam); color: #f5f5f7; padding-top: 64px; padding-bottom: 72px; overflow: clip; }
.hero-teks { text-align: center; display: grid; justify-items: center; }
.eyebrow { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #f5f5f7; margin-bottom: 14px; }
.hero h1 { font-size: var(--f-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 980px; }
.hero .uraian { margin-top: 22px; max-width: 640px; font-size: var(--f-pengantar); line-height: 1.38; font-weight: 500; letter-spacing: -0.016em; color: var(--abu-teks-gelap); }
.aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 32px; }
.hero .tautan-lanjut, .penutup .tautan-lanjut { color: #f5f5f7; }
.hero .catatan { margin-top: 14px; font-size: var(--f-halus); color: var(--abu-teks-gelap); }
.hero-foto { margin: 56px auto 0; max-width: 1680px; }
.hero-foto .foto { transform: scale(var(--hero-skala, 1)); transform-origin: 50% 0; will-change: transform; }
.hero-foto img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  /* Peralihan halus ke hitam di atas dan bawah. Foto tetap utuh (16:9, tidak dipotong). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 76%, transparent 100%);
}
@media (min-width: 1681px) {
  .hero-foto img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 76%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 76%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
}
.hero-foto .label { margin-top: -24px; position: relative; text-align: center; justify-items: center; }
@media (max-width: 734px) {
  .hero { padding-top: 48px; padding-bottom: 56px; }
  .eyebrow { font-size: 17px; margin-bottom: 10px; }
  .hero h1 { max-width: 11ch; }
  .hero .uraian { margin-top: 18px; }
  .aksi { margin-top: 26px; }
  .hero-foto { margin-top: 40px; }
  .hero-foto .label { margin-top: -8px; }
}

/* ---------- masalah (putih) ---------- */
#masalah .kepala { max-width: 980px; }
.masalah-daftar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.masalah-daftar li { background: var(--abu-latar); border-radius: var(--r-kartu); padding: 36px 32px 40px; display: grid; align-content: start; gap: 14px; }
.masalah-daftar .no { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--abu-teks); }
.masalah-daftar h3 { font-size: var(--f-kartu); letter-spacing: -0.022em; line-height: 1.14; }
.masalah-daftar .isi { display: grid; gap: 8px; color: var(--abu-teks); }
.masalah-daftar .isi p { color: #424245; }
.masalah-tutup { margin-top: 72px; display: grid; gap: 16px; max-width: 860px; }
.masalah-tutup .pernyataan { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
.masalah-tutup .lanjut { font-size: var(--f-pengantar); color: var(--abu-teks); font-weight: 500; }
.sumber { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--garis); display: grid; gap: 6px; font-size: var(--f-ket); color: var(--abu-teks); counter-reset: sumber; }
.sumber li { display: flex; gap: 8px; counter-increment: sumber; }
.sumber li::before { content: counter(sumber) "."; }
.sumber li:target { color: var(--tinta); }
@media (max-width: 1068px) { .masalah-daftar { grid-template-columns: 1fr; } .masalah-daftar li { grid-template-columns: 1fr; } }

/* ---------- cara kerja (abu muda): tiga kartu besar ---------- */
.langkah { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.langkah .kartu { padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 520px; }
.langkah .no { font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); }
.langkah h3 { font-size: var(--f-kartu); letter-spacing: -0.022em; }
.langkah .ket { color: #424245; }
.alat { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; font-size: var(--f-halus); }
.alat .unggah { display: grid; justify-items: center; gap: 10px; padding: 30px 16px; border: 1.5px dashed var(--garis); border-radius: var(--r-kontrol); color: var(--abu-teks); text-align: center; }
.alat .unggah svg { color: var(--tinta); }
.alat .berkas { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-kontrol); background: var(--abu-latar); }
.alat .berkas span:last-child { color: var(--abu-teks); }
.alat .kepala-alat { font-size: var(--f-ket); font-weight: 600; color: var(--abu-teks); }
.alat .prompt { padding: 16px; border-radius: var(--r-kontrol); background: var(--abu-latar); line-height: 1.5; color: var(--tinta); }
.alat .baris-pilih { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-kontrol); border: 1px solid var(--garis); }
.alat .baris-pilih span { color: var(--abu-teks); }
.alat .baris-pilih b { font-weight: 600; }
.alat .jalankan { display: grid; place-items: center; min-height: 44px; border-radius: var(--r-kapsul); background: var(--tinta); color: var(--putih); font-weight: 500; }
@media (max-width: 1068px) { .langkah { grid-template-columns: 1fr; } .langkah .kartu { min-height: 0; } .alat { max-width: 440px; } }

/* ---------- bukti (hitam, panggung penuh) ---------- */
.plat { display: grid; grid-template-columns: min(600px, calc((100svh - var(--subnav) - 96px) * 0.8)) minmax(0, 440px); gap: 64px; align-items: center; justify-content: center; }
.pembanding { margin: 0; }
.banding { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; border-radius: var(--r-kartu); background: #1d1d1f; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.banding img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.banding .atas { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--posisi, 50%)) 0 0); }
.banding .garis-geser { position: absolute; top: 0; bottom: 0; left: var(--posisi, 50%); width: 2px; background: var(--putih); transform: translateX(-1px); pointer-events: none; }
.banding .pegangan { position: absolute; top: 50%; left: var(--posisi, 50%); width: 48px; height: 48px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: var(--r-kapsul); background: var(--putih); color: var(--tinta); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); pointer-events: none; }
.banding input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
@media (pointer: coarse) { .banding input[type=range] { pointer-events: none; } }
.banding:has(input:focus-visible) .pegangan { outline: 2px solid var(--putih); outline-offset: 4px; }
.banding .tanda { position: absolute; top: 16px; padding: 5px 12px; border-radius: var(--r-kapsul); background: rgba(0, 0, 0, .62); color: var(--putih); font-size: var(--f-ket); font-weight: 500; pointer-events: none; }
.banding .tanda.kiri { left: 16px; }
.banding .tanda.kanan { right: 16px; }
.pembanding .instruksi { margin-top: 14px; text-align: center; font-size: var(--f-halus); color: var(--abu-teks-gelap); }
.samping { display: grid; gap: 32px; max-width: 440px; }
.judul-plat { font-size: var(--f-kartu); font-weight: 600; letter-spacing: -0.022em; line-height: 1.14; color: #f5f5f7; margin-bottom: 20px; }
.rincian { display: grid; }
.rincian div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--garis-gelap); }
.rincian div:last-child { border-bottom: 1px solid var(--garis-gelap); }
.rincian dt { font-size: var(--f-halus); color: var(--abu-teks-gelap); padding-top: 2px; }
.rincian dd { color: #f5f5f7; }
.jujur { display: grid; gap: 8px; font-size: var(--f-halus); color: var(--abu-teks-gelap); }
@media (max-width: 1068px) {
  .plat { grid-template-columns: 1fr; gap: 48px; justify-items: center; }
  .pembanding { width: min(100%, 560px, calc((100svh - var(--subnav) - 96px) * 0.8)); min-width: 300px; }
  .samping { max-width: 600px; width: 100%; }
}
@media (max-width: 734px) {
  .banding { width: 100%; min-width: 0; }
  .pembanding { width: 100%; }
  .rincian div { grid-template-columns: 110px 1fr; }
}

/* ---------- contoh karya: galeri geser kartu besar ---------- */
.bab { display: grid; gap: 8px; max-width: 760px; margin: 0 0 32px; }
.bab .no { font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); }
.bab h3 { font-size: 40px; letter-spacing: -0.025em; }
.bab p:last-child { color: var(--abu-teks); font-size: var(--f-isi); }
.bab.gelap .no, .bab.gelap p:last-child { color: var(--abu-teks-gelap); }
#karya .kepala { margin-bottom: 80px; }
.galeri { --h: clamp(300px, 38vw, 560px); margin-bottom: 96px; }
.galeri:last-child { margin-bottom: 0; }
.geser {
  display: flex; gap: 20px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--tepi), (100% - var(--lebar)) / 2);
  scroll-padding-inline: max(var(--tepi), (100% - var(--lebar)) / 2);
  padding-bottom: 4px; scrollbar-width: none;
}
.geser::-webkit-scrollbar { display: none; }
.geser:focus-visible { outline-offset: -4px; }
.geser .karya { flex: none; width: calc(var(--h) * 16 / 9); scroll-snap-align: start; margin: 0; }
.geser .karya.r32 { width: calc(var(--h) * 3 / 2); }
.karya .foto { position: relative; overflow: hidden; border-radius: var(--r-kartu); background: var(--abu-latar); aspect-ratio: 16 / 9; }
.karya.r32 .foto { aspect-ratio: 3 / 2; }
.karya .foto img, .karya .foto video { width: 100%; height: 100%; object-fit: cover; }
.karya .label { padding-right: 24px; }
.kendali-galeri { display: flex; justify-content: flex-end; gap: 14px; margin-top: 20px; }
.bulat { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-kapsul); border: 0; background: var(--abu-tombol); color: var(--tinta); cursor: pointer; transition: background-color .2s, opacity .2s; }
.bulat:hover { background: #dcdce1; }
.bulat:disabled { opacity: .4; cursor: default; }
@media (max-width: 734px) {
  .galeri { margin-bottom: 64px; }
  .geser { gap: 12px; }
  .geser .karya, .geser .karya.r32 { width: 84vw; }
  #karya .kepala { margin-bottom: 56px; }
}

/* ---------- paviliun (hitam): video + enam potongan adegan ---------- */
.paviliun { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; align-items: start; }
.paviliun .karya { margin: 0; }
.paviliun .karya .foto { background: #1d1d1f; aspect-ratio: 9 / 16; }
.p-adegan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.p-video .label .tautan { color: #f5f5f7; font-weight: 500; min-height: 44px; }
.p-video .label { padding-top: 10px; }
@media (max-width: 734px) {
  .paviliun { grid-template-columns: 1fr; gap: 40px; }
  .p-video { width: min(100%, 360px); justify-self: center; }
  .p-adegan {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--tepi) * -1); padding-inline: var(--tepi); scroll-padding-inline: var(--tepi);
  }
  .p-adegan::-webkit-scrollbar { display: none; }
  .p-adegan .karya { flex: none; width: 56vw; scroll-snap-align: start; }
}

/* ---------- dua mode (putih): tabel perbandingan ---------- */
.tabel { width: 100%; border-collapse: collapse; text-align: left; }
.tabel th, .tabel td { padding: 18px 16px 18px 0; vertical-align: top; border-bottom: 1px solid var(--garis); }
.tabel thead th { font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); padding-bottom: 14px; }
.tabel-mode thead th { font-size: var(--f-kartu); color: var(--tinta); letter-spacing: -0.022em; padding-bottom: 24px; border-bottom-color: var(--tinta); }
.tabel-mode tbody th { font-weight: 600; width: 28%; }
.tabel-mode td { width: 36%; color: #424245; }
.tambahan { margin-top: 56px; display: grid; gap: 16px; justify-items: start; text-align: left; }
.tambahan > p { font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); }
.tambahan ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.tambahan li { padding: 9px 18px; border-radius: var(--r-kapsul); background: var(--abu-latar); font-size: var(--f-halus); font-weight: 500; }
@media (max-width: 734px) {
  .tabel-mode thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel-mode, .tabel-mode tbody, .tabel-mode tr, .tabel-mode th, .tabel-mode td { display: block; width: auto; }
  .tabel-mode tr { padding: 20px 0; border-bottom: 1px solid var(--garis); }
  .tabel-mode tr:first-child { border-top: 1px solid var(--tinta); }
  .tabel-mode th, .tabel-mode td, .tabel-mode tbody th { border: 0; padding: 0; width: auto; }
  .tabel-mode tbody th { font-size: 17px; margin-bottom: 12px; }
  .tabel-mode td { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 6px 0; }
  .tabel-mode td::before { content: attr(data-mode); font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); padding-top: 2px; }
}

/* ---------- lima suasana (abu muda) ---------- */
.cahaya { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.foto-cahaya { margin: 0; }
.foto-cahaya .foto { border-radius: var(--r-kartu); overflow: hidden; aspect-ratio: 16 / 9; background: var(--garis); }
.foto-cahaya img { width: 100%; height: 100%; object-fit: cover; }
.daftar-cahaya { padding: 12px 32px; counter-reset: c; }
.daftar-cahaya li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.daftar-cahaya li:last-child { border-bottom: 0; }
.daftar-cahaya .no { grid-row: span 2; font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); padding-top: 2px; }
.daftar-cahaya .nama { font-weight: 600; }
.daftar-cahaya .di-foto { font-weight: 400; color: var(--abu-teks); }
.daftar-cahaya .ket { font-size: var(--f-halus); color: var(--abu-teks); }
@media (max-width: 1068px) { .cahaya { grid-template-columns: 1fr; } .daftar-cahaya { padding: 8px 24px; } }

/* ---------- harga (putih): kolom paket berdampingan ala "Bandingkan model" ---------- */
.pesan { margin: 0 auto 40px; max-width: 640px; padding: 16px 20px; border-radius: var(--r-kontrol); background: var(--abu-latar); text-align: center; font-weight: 500; }
.paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--garis); }
.paket li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px; }
.paket li + li { border-left: 1px solid var(--garis); }
.paket h3 { display: grid; gap: 10px; }
.paket h3 .nama { font-size: var(--f-kartu); letter-spacing: -0.022em; }
.paket h3 .harga { font-size: var(--f-harga); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.paket .rinci { margin: 20px 0 32px; display: grid; gap: 4px; color: var(--abu-teks); }
.paket .rinci .kredit { font-size: 17px; font-weight: 600; color: var(--tinta); letter-spacing: -0.016em; margin-bottom: 4px; }
.paket .rinci p:last-child { margin-top: 12px; max-width: 26ch; margin-inline: auto; color: #424245; }
/* Tombol rata bawah, sejajar di ketiga kolom walau rincian berbeda panjang. */
.paket .tombol.pilih { margin-top: auto; }
@media (max-width: 1068px) { .paket li { padding: 40px 12px; } .paket h3 .harga { letter-spacing: -0.04em; } }
@media (max-width: 734px) {
  .paket { grid-template-columns: 1fr; border-top: 0; }
  .paket li { padding: 36px 0; border-top: 1px solid var(--garis); }
  .paket li + li { border-left: 0; }
}
.biaya { margin-top: 96px; }
.tabel-biaya caption { text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -0.022em; padding-bottom: 20px; color: var(--tinta); }
.tabel-biaya thead th { border-bottom-color: var(--tinta); }
.tabel-biaya .nama-q { font-weight: 600; font-size: 17px; }
.tabel td.nowrap { font-size: 17px; }
.tabel-biaya .ket { color: #424245; }
.tabel-biaya .ket-hp { display: none; }
.tabel-biaya .angka { text-align: right; padding-right: 0; white-space: nowrap; font-weight: 600; }
@media (max-width: 734px) {
  .tabel-biaya th.ket, .tabel-biaya td.ket { display: none; }
  .tabel-biaya .ket-hp { display: block; font-size: var(--f-halus); color: var(--abu-teks); margin-top: 2px; }
  .tabel-biaya td { font-size: 16px; }
}
.info-beli { margin-top: 56px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.judul-kecil { font-size: var(--f-kartu); font-weight: 600; letter-spacing: -0.022em; margin-bottom: 16px; }
.daftar-garis { display: grid; gap: 8px; }
.daftar-garis li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; color: #424245; }
.daftar-garis li span:first-child { font-weight: 600; color: var(--tinta); }
.tanya-wa { display: grid; gap: 12px; justify-items: start; color: var(--abu-teks); font-size: var(--f-halus); }
@media (max-width: 734px) { .info-beli { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; } }

/* ---------- tanya jawab (abu muda) ---------- */
.tanya-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.tanya details { border-bottom: 1px solid var(--garis); }
.tanya details:first-child { border-top: 1px solid var(--garis); }
.tanya summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; line-height: 1.3; }
.tanya summary::-webkit-details-marker { display: none; }
.tanya .tanda { position: relative; flex: none; width: 16px; height: 16px; }
.tanya .tanda::before, .tanya .tanda::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--gerak); }
.tanya .tanda::after { transform: rotate(90deg); }
.tanya details[open] .tanda::after { transform: rotate(0deg); }
.tanya .jawab { display: grid; gap: 10px; padding: 0 40px 26px 0; color: #424245; }
@media (max-width: 1068px) { .tanya-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 734px) { .tanya summary { font-size: 17px; } .tanya .jawab { padding-right: 0; } }

/* ---------- penutup (hitam) ---------- */
.penutup { background: radial-gradient(110% 60% at 50% 0%, #1d1d1f 0%, var(--hitam) 60%); color: #f5f5f7; padding: var(--bagian) 0; }
.penutup-teks { text-align: center; display: grid; justify-items: center; }
.penutup h2 { font-size: var(--f-judul); letter-spacing: -0.028em; max-width: 16ch; }
.penutup #penutup-ket { margin-top: 18px; font-size: var(--f-pengantar); color: var(--abu-teks-gelap); font-weight: 500; }
.penutup-foto { margin-top: 64px; max-width: 980px; }
.penutup-foto .foto { border-radius: var(--r-kartu); overflow: hidden; aspect-ratio: 16 / 9; background: #1d1d1f; }
.penutup-foto img { width: 100%; height: 100%; object-fit: cover; }
.penutup-foto .label { text-align: center; justify-items: center; }

/* ---------- footer abu ala Apple ---------- */
.kaki { background: var(--abu-latar); color: var(--abu-teks); font-size: var(--f-ket); line-height: 1.5; padding: 20px 0 24px; }
.kaki-catatan { padding: 14px 0 18px; border-bottom: 1px solid var(--garis); }
.kaki-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding: 24px 0; }
.kaki .logo { color: var(--tinta); font-size: 14px; min-height: 32px; }
.kenal { display: grid; gap: 6px; align-content: start; }
.judul-kaki { font-size: var(--f-ket); font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--tinta); margin-bottom: 8px; }
.kaki ul { display: grid; gap: 4px; }
.kaki ul a, .kaki .kontak a { color: #424245; text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; }
.kaki ul a:hover, .kaki .kontak a:hover { text-decoration: underline; }
.kontak { display: grid; gap: 6px; align-content: start; justify-items: start; }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--garis); }
@media (max-width: 834px) { .kaki-grid { grid-template-columns: 1fr 1fr; } .kenal { grid-column: 1 / -1; } }
@media (pointer: coarse) { .kaki ul a, .kaki .kontak a { min-height: 44px; } .kaki ul { gap: 0; } }

/* ---------- Syarat Layanan dan Kebijakan Privasi ---------- */
.dok-halaman .subnav { display: none; }
.kepala-dok { padding: 96px 0 56px; display: grid; gap: 14px; border-bottom: 1px solid var(--garis); }
.kepala-dok .pembuka { font-size: 19px; font-weight: 600; color: var(--abu-teks); }
.kepala-dok h1 { font-size: var(--f-judul); font-weight: 700; letter-spacing: -0.03em; }
.kepala-dok .buka { display: grid; gap: 8px; max-width: 720px; margin-top: 8px; }
.kepala-dok .lead { font-size: var(--f-pengantar); line-height: 1.38; font-weight: 500; color: var(--abu-teks); }
.kepala-dok .berlaku { font-size: var(--f-halus); color: var(--abu-teks); }
.dok { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; padding: 56px 0 120px; }
.daftar-isi { position: sticky; top: 24px; align-self: start; font-size: var(--f-halus); }
.daftar-isi p { font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.daftar-isi ol { display: grid; padding-top: 6px; }
.daftar-isi a { display: flex; align-items: center; min-height: 36px; color: var(--abu-teks); text-decoration: none; }
.daftar-isi a:hover { color: var(--tinta); }
.isi-dok { display: grid; gap: 56px; max-width: 720px; }
.isi-dok section { display: grid; gap: 14px; }
.isi-dok h2 { font-size: var(--f-kartu); letter-spacing: -0.022em; display: flex; gap: 14px; align-items: baseline; }
.isi-dok h2 .no { font-size: var(--f-halus); font-weight: 600; color: var(--abu-teks); min-width: 16px; }
.isi-dok p, .isi-dok li { color: #424245; }
.isi-dok ul { display: grid; gap: 8px; }
.isi-dok ul li { position: relative; padding-left: 20px; }
.isi-dok ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--tinta); }
.isi-dok .tabel { margin: 4px 0 8px; }
.isi-dok .tabel td { color: var(--tinta); }
.isi-dok .tabel .angka { text-align: right; padding-right: 0; white-space: nowrap; }
.isi-dok a.tautan { text-decoration: underline; text-underline-offset: 3px; }
.kontak-dok { display: grid; }
.kontak-dok div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--garis); }
.kontak-dok div:last-child { border-bottom: 1px solid var(--garis); }
.kontak-dok dt { color: var(--abu-teks); font-size: var(--f-halus); padding-top: 2px; }
@media (max-width: 1068px) { .dok { grid-template-columns: 1fr; gap: 40px; } .daftar-isi { position: static; } }
@media (max-width: 734px) { .kepala-dok { padding: 56px 0 40px; } .dok { padding-bottom: 80px; } }

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-foto .foto { transform: none !important; }
}
.dok-halaman .nav .logo span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }