/* =====================================================================
   Situs penjualan Kontenika (kontenika.online)
   ---------------------------------------------------------------------
   Arah "Lini Produksi", sama dengan aplikasi: identitas datang dari huruf
   (Archivo lebar untuk judul, IBM Plex Sans untuk isi) dan dari struktur
   stasiun bernomor -- bukan dari gradasi warna. Ungu hanya untuk yang bisa
   diklik. Warna tahap (biru/ungu/kuning/hijau) sama dengan Board.
   Mobile dulu: hampir semua pengunjung datang dari Reels di HP.
   ===================================================================== */

:root {
  --kertas: #f6f5fb;
  --kertas-2: #eeecf6;
  --panel: #ffffff;
  --tinta: #17152a;
  --redup: #5b5872;
  --garis: #e2dfed;
  --tautan: #6b2bd9;
  --tombol: #6b2bd9;
  --tombol-tekan: #5720b8;
  --tombol-teks: #ffffff;
  --aksen-lembut: #efe8fc;

  /* Warna tahap -- sama dengan --normal/--review/--tinggi/--done di app */
  --t-brief: #6b7280;   --t-brief-bg: #eceef2;
  --t-tulis: #3f5fa8;   --t-tulis-bg: #e7ebf7;
  --t-periksa: #7c3aed; --t-periksa-bg: #f0e9fd;
  --t-produksi: #b86e08; --t-produksi-bg: #fdf0da;
  --t-tutup: #1f8b5c;   --t-tutup-bg: #e3f5ec;
  --revisi: #c0392b;    --revisi-bg: #fde8e6;

  --pita: #17152a;      /* bagian penutup */
  --pita-teks: #f6f5fb;

  --f-judul: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-isi: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-kontrol: 6px;
  --r-kartu: 12px;
  --r-pil: 999px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .06);
  --bayang-kartu: 0 6px 18px rgba(23, 21, 42, .10);

  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kertas: #121120;
    --kertas-2: #1a1830;
    --panel: #1f1d36;
    --tinta: #eceaf6;
    --redup: #a9a6bf;
    --garis: #302d4a;
    --tautan: #b99cff;
    --tombol: #7c3aed;
    --tombol-tekan: #6d28d9;
    --aksen-lembut: #2a2250;
    --t-brief: #a1a7b3;   --t-brief-bg: #262638;
    --t-tulis: #8fa8e6;   --t-tulis-bg: #1f2a45;
    --t-periksa: #b596ff; --t-periksa-bg: #2d2350;
    --t-produksi: #e9a646; --t-produksi-bg: #3a2c14;
    --t-tutup: #5cc794;   --t-tutup-bg: #173628;
    --revisi: #ff8a7a;    --revisi-bg: #3d1f1c;
    --pita: #eceaf6;
    --pita-teks: #17152a;
    --bayang-kartu: 0 6px 18px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --kertas: #121120; --kertas-2: #1a1830; --panel: #1f1d36; --tinta: #eceaf6;
  --redup: #a9a6bf; --garis: #302d4a; --tautan: #b99cff; --tombol: #7c3aed;
  --tombol-tekan: #6d28d9; --aksen-lembut: #2a2250;
  --t-brief: #a1a7b3; --t-brief-bg: #262638; --t-tulis: #8fa8e6; --t-tulis-bg: #1f2a45;
  --t-periksa: #b596ff; --t-periksa-bg: #2d2350; --t-produksi: #e9a646; --t-produksi-bg: #3a2c14;
  --t-tutup: #5cc794; --t-tutup-bg: #173628; --revisi: #ff8a7a; --revisi-bg: #3d1f1c;
  --pita: #eceaf6; --pita-teks: #17152a; --bayang-kartu: 0 6px 18px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--f-isi);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 76px; /* ruang untuk tombol lengket di HP */
}
h1, h2, h3 { margin: 0; font-family: var(--f-judul); text-wrap: balance; }
p { margin: 0; }
a { color: var(--tautan); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--tautan);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wadah { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.wadah-sempit { max-width: 760px; }

.lewati {
  position: absolute; left: 8px; top: -48px; z-index: 30;
  background: var(--panel); color: var(--tinta); padding: 8px 12px; border-radius: var(--r-kontrol);
}
.lewati:focus { top: 8px; }

/* --- Tombol ---------------------------------------------------------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--tombol); color: var(--tombol-teks);
  border: 1.5px solid var(--tombol); border-radius: var(--r-kontrol);
  font-family: var(--f-isi); font-weight: 600; font-size: 16px;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.tombol:hover { background: var(--tombol-tekan); border-color: var(--tombol-tekan); }
.tombol-garis { background: transparent; color: var(--tinta); border-color: var(--garis); }
.tombol-garis:hover { background: var(--panel); border-color: var(--tinta); }
.tombol-kecil { min-height: 38px; padding: 0 14px; font-size: 14px; }
.tombol-penuh { width: 100%; }
.tombol-terang { background: var(--pita-teks); color: var(--pita); border-color: var(--pita-teks); }
.tombol-terang:hover { background: var(--kertas-2); border-color: var(--kertas-2); }

/* --- Kepala ---------------------------------------------------------- */
.kepala {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--kertas) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--garis);
}
.kepala-isi { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.merek {
  font-family: var(--f-judul); font-weight: 800; font-stretch: 125%;
  font-size: 19px; letter-spacing: -.02em; color: var(--tinta); text-decoration: none;
}
.kepala-nav { display: none; gap: 24px; margin-left: 16px; }
.kepala-nav a, .tautan-masuk { color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 500; }
.kepala-nav a:hover, .tautan-masuk:hover { color: var(--tautan); }
.kepala-aksi { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* --- Pembuka --------------------------------------------------------- */
.pembuka { padding: 40px 0 48px; }
.pembuka-teks { max-width: 800px; }
.pembuka h1 {
  font-weight: 800; font-stretch: 125%;
  font-size: clamp(31px, 7.2vw, 60px);
  line-height: 1.04; letter-spacing: -.025em;
}
.pembuka-sub { margin-top: 18px; font-size: 17px; color: var(--redup); max-width: 62ch; }
.pembuka-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pembuka-catatan { margin-top: 12px; font-size: 14px; color: var(--redup); }

/* --- Lini produksi (satu-satunya animasi) ---------------------------- */
.lini {
  margin: 36px 0 0;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--bayang);
}
.lini-stasiun {
  list-style: none; margin: 0; padding: 0 0 124px; /* ruang kartu di HP */
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
.st { --w: var(--t-brief); --wb: var(--t-brief-bg); display: flex; }
.st-kepala { flex: 1; } /* kolom sama tinggi walau nama tahapnya dua baris */
.st-2 { --w: var(--t-tulis); --wb: var(--t-tulis-bg); }
.st-3 { --w: var(--t-periksa); --wb: var(--t-periksa-bg); }
.st-4 { --w: var(--t-produksi); --wb: var(--t-produksi-bg); }
.st-5 { --w: var(--t-tutup); --wb: var(--t-tutup-bg); }
.st-kepala {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 2px 8px;
  border-top: 3px solid var(--w);
  background: var(--kertas-2);
  border-radius: 4px 4px 8px 8px;
  text-align: center;
}
.st-no {
  position: relative; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--f-judul); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta); background: var(--panel);
}
.st-no::before { /* cincin "sedang di sini" */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wb); box-shadow: 0 0 0 2px var(--w);
  opacity: 0; z-index: 0;
}
.st-no { isolation: isolate; }
.st-no::before { z-index: -1; }
.st-nama { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.st-peran { display: none; font-size: 12px; color: var(--redup); line-height: 1.3; }

.kartu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 112px;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--w);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--bayang-kartu);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.35;
  opacity: 0;
}
.kartu-atas { display: flex; gap: 6px; align-items: center; }
.kartu-brand {
  background: #8a5a2b; color: #fff; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: var(--r-pil);
}
.kartu-kanal { font-size: 12px; color: var(--redup); }
.kartu-judul { font-weight: 600; font-size: 14px; }
.kartu-bawah { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.kartu-orang { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wb, var(--aksen-lembut)); color: var(--w, var(--tautan));
  font-size: 10px; font-weight: 700; letter-spacing: .02em; flex: none;
}
.kartu-status { display: grid; justify-items: end; font-size: 12px; color: var(--redup); text-align: right; }
.kartu-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; }
.status-b { opacity: 0; }
.status-revisi { color: var(--revisi); background: var(--revisi-bg); padding: 1px 8px; border-radius: var(--r-pil); font-weight: 600; }
.status-setuju { color: var(--t-tutup); font-weight: 600; }
.st-5 .kartu-status { color: var(--t-tutup); font-weight: 600; }

.lini-cerita {
  display: grid; margin-top: 12px; min-height: 3.2em;
  font-size: 14.5px; color: var(--redup);
}
.cerita { grid-area: 1 / 1; opacity: 0; }

/* 7 langkah x 2 detik. Kartu tiap stasiun muncul di jendela waktunya;
   stasiun Naskah dan Approval dilewati dua kali (revisi). */
@media (prefers-reduced-motion: no-preference) {
  .kartu-1, .st-1 .st-no::before { animation: jendela-1 14s infinite; }
  .kartu-2, .st-2 .st-no::before { animation: jendela-2 14s infinite; }
  .kartu-3, .st-3 .st-no::before { animation: jendela-3 14s infinite; }
  .kartu-4, .st-4 .st-no::before { animation: jendela-4 14s infinite; }
  .kartu-5, .st-5 .st-no::before { animation: jendela-5 14s infinite; }
  .kartu-2 .status-a { animation: naskah-a 14s infinite; }
  .kartu-2 .status-b { animation: naskah-b 14s infinite; }
  .kartu-3 .status-a { animation: approval-a 14s infinite; }
  .kartu-3 .status-b { animation: approval-b 14s infinite; }
  .cerita { animation: cerita 14s infinite; }
  .cerita-2 { animation-delay: -12s; }
  .cerita-3 { animation-delay: -10s; }
  .cerita-4 { animation-delay: -8s; }
  .cerita-5 { animation-delay: -6s; }
  .cerita-6 { animation-delay: -4s; }
  .cerita-7 { animation-delay: -2s; }
}
@keyframes jendela-1 { 0% { opacity: 0 } 2%, 12.5% { opacity: 1 } 14.29%, 100% { opacity: 0 } }
@keyframes jendela-2 {
  0%, 14.29% { opacity: 0 } 16.3%, 26.8% { opacity: 1 } 28.57%, 42.86% { opacity: 0 }
  44.9%, 55.4% { opacity: 1 } 57.14%, 100% { opacity: 0 }
}
@keyframes jendela-3 {
  0%, 28.57% { opacity: 0 } 30.6%, 40.8% { opacity: 1 } 42.86%, 57.14% { opacity: 0 }
  59.2%, 69.6% { opacity: 1 } 71.43%, 100% { opacity: 0 }
}
@keyframes jendela-4 { 0%, 71.43% { opacity: 0 } 73.5%, 83.9% { opacity: 1 } 85.71%, 100% { opacity: 0 } }
@keyframes jendela-5 { 0%, 85.71% { opacity: 0 } 87.8%, 98% { opacity: 1 } 100% { opacity: 0 } }
@keyframes naskah-a { 0%, 42.8% { opacity: 1 } 42.86%, 57.14% { opacity: 0 } 57.2%, 100% { opacity: 1 } }
@keyframes naskah-b { 0%, 42.8% { opacity: 0 } 42.86%, 57.14% { opacity: 1 } 57.2%, 100% { opacity: 0 } }
@keyframes approval-a { 0%, 62% { opacity: 1 } 62.5%, 71.43% { opacity: 0 } 71.5%, 100% { opacity: 1 } }
@keyframes approval-b { 0%, 62% { opacity: 0 } 62.5%, 71.43% { opacity: 1 } 71.5%, 100% { opacity: 0 } }
@keyframes cerita { 0% { opacity: 0 } 1.5%, 12.8% { opacity: 1 } 14.29%, 100% { opacity: 0 } }

/* Tanpa gerak: tampilkan satu keadaan yang paling bercerita -- menunggu persetujuan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kartu-3, .st-3 .st-no::before, .cerita-3 { opacity: 1; }
}

/* --- Bagian umum ----------------------------------------------------- */
.bagian { padding: 56px 0; }
.bagian-alt { background: var(--kertas-2); }
.judul-bagian {
  font-weight: 800; font-stretch: 125%;
  font-size: clamp(25px, 4.6vw, 40px);
  line-height: 1.1; letter-spacing: -.02em;
  max-width: 24ch;
}
.bagian-sub { margin-top: 12px; color: var(--redup); max-width: 62ch; }
h3 { font-weight: 700; font-size: 19px; line-height: 1.3; }

/* Masalah -> jawaban */
.masalah { display: grid; gap: 36px; margin-top: 32px; }
.masalah-item p { margin-top: 8px; color: var(--redup); }
.cuplik {
  margin-top: 16px; background: var(--panel); border: 1px solid var(--garis);
  border-radius: var(--r-kartu); padding: 12px; font-size: 13px;
}
.cuplik-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cuplik-kolom { display: flex; flex-direction: column; gap: 6px; background: var(--kertas-2); border-radius: 8px; padding: 8px; }
.cuplik-kolom:first-child { --w: var(--t-tulis); --wb: var(--t-tulis-bg); border-top: 3px solid var(--t-tulis); }
.cuplik-kolom:last-child { --w: var(--t-produksi); --wb: var(--t-produksi-bg); border-top: 3px solid var(--t-produksi); }
.cuplik-label { font-weight: 600; font-size: 12px; }
.cuplik-label b { font-family: var(--f-judul); margin-right: 4px; }
.cuplik-kartu {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--garis); border-radius: 6px; padding: 6px 8px;
}
.cuplik-riwayat { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cuplik-riwayat li { display: flex; align-items: baseline; gap: 8px; }
.titik { width: 9px; height: 9px; border-radius: 50%; background: var(--t-brief); flex: none; transform: translateY(1px); }
.titik-revisi { background: var(--revisi); }
.titik-setuju { background: var(--t-tutup); }
.cuplik-laporan { display: flex; flex-direction: column; gap: 10px; }
.batang { display: grid; grid-template-columns: 76px 1fr 28px; align-items: center; gap: 8px; }
.batang span { color: var(--redup); }
.batang i { display: block; height: 10px; width: var(--n); background: var(--t-tulis); border-radius: 3px; }
.batang:last-child i { background: var(--t-tutup); }
.batang b { font-family: var(--f-judul); font-variant-numeric: tabular-nums; text-align: right; }

/* Langkah -- memang berurutan, jadi bernomor */
.langkah { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; counter-reset: langkah; }
.langkah li { counter-increment: langkah; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.langkah li::before {
  content: counter(langkah);
  grid-row: span 2;
  font-family: var(--f-judul); font-weight: 800; font-stretch: 125%; font-size: 34px; line-height: 1;
  color: var(--tautan);
}
.langkah p { margin-top: 6px; color: var(--redup); }

/* Fitur lain */
.fitur { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.fitur li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.fitur svg {
  box-sizing: content-box; padding: 9px; border-radius: 10px;
  background: var(--aksen-lembut); color: var(--tautan);
}
.fitur h3 { font-size: 17px; }
.fitur p { margin-top: 4px; color: var(--redup); font-size: 15px; }

/* Perbandingan */
.banding { margin-top: 28px; border-top: 1px solid var(--garis); }
.banding-kepala { display: none !important; }
.banding-baris { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.banding-aspek { font-weight: 600; }
.banding-lama, .banding-baru { font-size: 15px; }
.banding-lama { color: var(--redup); }
.banding-lama::before, .banding-baru::before {
  content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--redup);
}
.banding-baru::before { color: var(--t-tutup); }

/* --- Harga ----------------------------------------------------------- */
.harga { margin-top: 28px; }
.periode-input { position: absolute; opacity: 0; pointer-events: none; }
.periode {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--kertas-2); border: 1px solid var(--garis); border-radius: var(--r-pil);
}
.periode label {
  cursor: pointer; padding: 8px 16px; border-radius: var(--r-pil);
  font-weight: 600; font-size: 15px; color: var(--redup);
}
.periode-bonus { font-weight: 500; font-size: 12.5px; color: var(--t-tutup); margin-left: 4px; }
#periode-bulan:checked ~ .periode label[for="periode-bulan"],
#periode-tahun:checked ~ .periode label[for="periode-tahun"] {
  background: var(--panel); color: var(--tinta); box-shadow: var(--bayang);
}
#periode-bulan:focus-visible ~ .periode label[for="periode-bulan"],
#periode-tahun:focus-visible ~ .periode label[for="periode-tahun"] { outline: 2px solid var(--tautan); outline-offset: 2px; }
.harga-tahun { display: none; }
#periode-tahun:checked ~ .paket-daftar .harga-bulan { display: none; }
#periode-tahun:checked ~ .paket-daftar .harga-tahun { display: block; }

.kuota { margin-top: 16px; font-size: 15px; color: var(--redup); }
.kuota strong { color: var(--tinta); }
.kuota-angka { font-family: var(--f-judul); font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }

.paket-daftar { display: grid; gap: 16px; margin-top: 22px; align-items: start; }
.paket {
  background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r-kartu);
  padding: 22px 20px; display: flex; flex-direction: column;
}
.paket-unggulan { border: 2px solid var(--tombol); box-shadow: var(--bayang-kartu); }
.paket-tanda { font-size: 13px; font-weight: 600; color: var(--tautan); margin-bottom: 8px; }
.paket-nama { font-weight: 800; font-stretch: 125%; font-size: 26px; letter-spacing: -.02em; }
.paket-sub { margin-top: 4px; color: var(--redup); font-size: 15px; min-height: 3em; }
.paket-harga { margin-top: 16px; }
.paket-harga s { display: block; color: var(--redup); font-size: 14px; font-variant-numeric: tabular-nums; }
.paket-harga .angka {
  font-family: var(--f-judul); font-weight: 800; font-stretch: 125%;
  font-size: 40px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.paket-harga .per { color: var(--redup); font-size: 15px; margin-left: 2px; }
.paket-setara { display: block; margin-top: 8px; font-size: 13.5px; color: var(--t-tutup); }
.paket-batas, .paket-modul { list-style: none; margin: 0; padding: 0; }
.paket-batas { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); display: grid; gap: 4px; font-size: 15px; }
.paket-batas strong { font-family: var(--f-judul); font-variant-numeric: tabular-nums; }
.paket-modul { margin: 14px 0 20px; display: grid; gap: 7px; font-size: 15px; }
.paket-modul li { display: flex; align-items: center; gap: 10px; }
.paket-modul li::before { content: ''; flex: none; width: 16px; height: 16px; }
.paket-modul .ada::before {
  background: var(--t-tutup);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.paket-modul .tidak { color: var(--redup); opacity: .7; }
.paket-modul .tidak::before { height: 2px; width: 10px; margin: 0 3px; background: var(--garis); }
.paket .tombol { margin-top: auto; }

.addon { margin-top: 24px; border: 1px solid var(--garis); border-radius: var(--r-kartu); background: var(--panel); }
.addon summary { cursor: pointer; padding: 16px 20px; font-weight: 600; }
.addon ul { list-style: none; margin: 0; padding: 0 20px 12px; }
.addon li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--garis); font-size: 15px; }
.addon li small { display: block; color: var(--redup); font-size: 13px; }
.addon-harga { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Tanya jawab ----------------------------------------------------- */
.tanya { border-bottom: 1px solid var(--garis); }
.tanya:first-of-type { margin-top: 24px; border-top: 1px solid var(--garis); }
.tanya summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  font-weight: 600; font-size: 17px;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--redup); border-bottom: 2px solid var(--redup);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.tanya[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tanya p { padding: 0 0 18px; color: var(--redup); max-width: 65ch; }

/* --- Penutup --------------------------------------------------------- */
.penutup { background: var(--pita); color: var(--pita-teks); padding: 56px 0; }
.penutup h2 {
  font-weight: 800; font-stretch: 125%; font-size: clamp(26px, 5vw, 42px);
  line-height: 1.1; letter-spacing: -.02em; max-width: 22ch;
}
.penutup p { margin: 12px 0 24px; opacity: .8; }

/* --- Kaki ------------------------------------------------------------ */
.kaki { padding: 36px 0 28px; font-size: 14px; color: var(--redup); }
.kaki-isi { display: grid; gap: 18px; }
.kaki .merek { font-size: 17px; }
.kaki-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kaki-nav a { color: var(--redup); }
.kaki-nav a:hover { color: var(--tinta); }

.cta-lengket {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--kertas) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--garis);
}

/* --- Halaman teks: masuk, hukum, 404 --------------------------------- */
.dokumen { padding: 44px 0 64px; }
.dokumen h1 {
  font-weight: 800; font-stretch: 125%; font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1; letter-spacing: -.02em;
}
.dokumen .diperbarui { margin-top: 8px; color: var(--redup); font-size: 14px; }
.dokumen h2 { font-size: 20px; font-weight: 700; margin-top: 32px; }
.dokumen p, .dokumen ul, .dokumen ol { margin-top: 10px; max-width: 68ch; }
.dokumen li + li { margin-top: 4px; }
.masuk-kotak {
  margin-top: 24px; max-width: 460px; background: var(--panel);
  border: 1px solid var(--garis); border-radius: var(--r-kartu); padding: 22px;
}
.masuk-kotak label { display: block; font-weight: 600; font-size: 15px; }
.alamat-isian {
  display: flex; align-items: stretch; margin-top: 8px;
  border: 1.5px solid var(--garis); border-radius: var(--r-kontrol); background: var(--kertas); overflow: hidden;
}
.alamat-isian:focus-within { border-color: var(--tautan); }
.alamat-isian input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta);
  padding: 12px; font: inherit; font-size: 16px; outline: none;
}
.alamat-isian span { display: grid; place-items: center; padding: 0 12px; color: var(--redup); font-size: 15px; background: var(--kertas-2); }
.masuk-kotak .tombol { margin-top: 14px; }
.galat { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--revisi); background: var(--revisi-bg); border-radius: 0 6px 6px 0; font-size: 14.5px; }
.catatan-kecil { margin-top: 14px; font-size: 14px; color: var(--redup); }

/* =====================================================================
   Layar lebar
   ===================================================================== */
@media (min-width: 760px) {
  :root { --gutter: 24px; }
  body { padding-bottom: 0; }
  .cta-lengket { display: none; }
  .kepala-nav { display: flex; }
  .pembuka { padding: 72px 0 72px; }
  .pembuka-sub { font-size: 19px; }

  .lini { padding: 18px; margin-top: 48px; }
  .lini-stasiun { padding-bottom: 0; gap: 10px; }
  .st {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--kertas-2); border-top: 3px solid var(--w); border-radius: 4px 4px 10px 10px;
    padding: 12px 10px; min-height: 212px;
  }
  .st-kepala {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 2px 8px; padding: 0; border: 0; background: none; text-align: left;
    flex: none;
  }
  .st-nama { font-size: 14px; }
  .st-peran { display: block; flex-basis: 100%; padding-left: 34px; }
  .kartu { position: static; height: auto; min-height: 118px; }
  .lini-cerita { font-size: 15.5px; margin-top: 14px; }

  .bagian { padding: 88px 0; }
  .masalah { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; }
  .langkah { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
  .fitur { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 40px; }

  .banding-kepala { display: grid !important; font-size: 14px; font-weight: 600; color: var(--redup); }
  .banding-baris { grid-template-columns: 1fr 1.4fr 1.4fr; gap: 24px; align-items: start; }
  .banding-lama::before, .banding-baru::before { display: none; }
  .banding-kepala span:last-child { color: var(--t-tutup); }

  .paket-daftar { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .paket-unggulan { transform: translateY(-8px); }
  .penutup { padding: 88px 0; }
  .kaki-isi { grid-template-columns: 1fr auto; align-items: start; }
  .kaki-hak { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .fitur { grid-template-columns: repeat(4, 1fr); }
  .fitur li { grid-template-columns: 1fr; gap: 12px; }
}

/* Beranda "segera hadir" -- satu layar, tanpa tombol lengket */
.segera { padding: 64px 0 80px; }
body:has(.segera) { padding-bottom: 0; }