/* Catat Rekap — gaya situs publik.

   Token warna TIDAK didefinisikan di sini. Nilainya datang dari
   assets/token.css, yang dihasilkan dari design/token.json — satu sumber untuk
   aplikasi Flutter, situs ini, dan dashboard. Menyalinnya ke sini lagi adalah
   persis cara ketiganya pernah melenceng.

   `@import "token.css"` SENGAJA dibuang. Dua sebabnya:

   1. Alamatnya tidak bisa diberi versi. Server tidak mengirim `Cache-Control`
      sama sekali, jadi peramban memakai cache heuristik — dan saat rupa situs
      berganti, pengunjung lama memegang token LAMA yang masih punya blok mode
      gelap. Hasilnya halaman hitam dengan navigasi polos, dan tidak ada yang
      bisa dilakukan pengunjung selain memuat paksa. Sebagai <link> terpisah,
      keduanya bisa diberi cap versi dan tiap deploy membatalkan cache lama.

   2. @import menunda penemuan. Peramban baru tahu token.css ada SESUDAH
      style.css terunduh dan terurai — dua perjalanan berurutan pada koneksi
      yang paling lambat. Dua <link> ditemukan bersamaan. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  /* Plus Jakarta Sans dari mockup. Ini MENGGANTI font sistem yang dipakai
     sebelumnya, dan ongkosnya nyata: dua permintaan ke domain pihak ketiga
     yang menahan render. Yang menahan ongkos itu tetap terkendali:
     `display=swap` di tautannya, `preconnect` ke kedua host, dan tumpukan
     cadangan di bawah yang sungguhan — bukan `sans-serif` telanjang — supaya
     halaman tetap terbaca dengan huruf yang mirip bila Google tak terjangkau. */
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Warna teks badan adalah --ink-soft, bukan --ink. Di palet mockup --ink
   (#0B1F3A) khusus judul; badan memakai #4A5B72 yang 71× lebih sering muncul.
   Memakai --ink untuk keduanya membuat halaman terasa lebih keras daripada
   rancangannya. */
h1, h2, h3, h4 { color: var(--ink); }

/* Angka yang berjajar — harga, kuota, tabel — tidak boleh bergoyang lebarnya. */
.mono, .lencana span, .kaki-judul {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------- halaman dari mockup

   Isi yang di-port `scripts/port-mockup.mjs` membawa gaya sebarisnya sendiri;
   blok ini hanya menambahkan yang TIDAK bisa dinyatakan sebaris.

   Batas 1440px adalah lebar pratinjau yang dipakai merancangnya (`$preview`
   di props mockup). Tanpa batas ini, ukuran ber-`vw` di layar 2560px
   merentangkan tata letak jauh melewati apa pun yang pernah dilihat
   perancangnya. */
.mockup { max-width: var(--lebar-mockup); margin: 0 auto; }

/* Keadaan tetikus dan papan ketik. Mockup menyatakannya lewat atribut
   `style-hover` — perluasan Claude Design yang tidak berlaku di peramban mana
   pun, jadi tanpa blok ini tidak ada satu pun tombol yang memberi tanggapan.
   Dipilih lewat selector atribut karena gayanya memang sebaris; yang dicocokkan
   adalah string token yang dihasilkan generator, sehingga ia ikut berubah bila
   tokennya berubah. */
.mockup a, .mockup button { transition: filter .15s, color .15s, border-color .15s; }
.mockup a[style*="background:var(--brand)"]:hover,
.mockup a[style*="background:#fff"]:hover,
.mockup a[style*="background:var(--ink)"]:hover { filter: brightness(.93); }
.mockup a[style*="color:var(--brand-text)"]:hover,
.mockup a[style*="color:var(--ink-soft)"]:hover { color: var(--brand-dark); }
.mockup a:focus-visible, .mockup button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px;
}

/* Gerak hanya untuk yang memintanya. `gerak.js` sudah melewati parallax dan
   gerak kursor saat setelan ini menyala; baris ini menutup transisi CSS yang
   dibawa gaya sebaris mockup. */
@media (prefers-reduced-motion: reduce) {
  .mockup *, .mockup *::before, .mockup *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------- header */

.bilah {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bilah-isi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  /* 1440px + padding clamp(20px,5vw,88px), sama persis dengan bagian-bagian
     mockup di bawahnya. Sebelumnya dibatasi `--wrap` (1080px) dan hasilnya
     terlihat langsung: logo di bilah tidak sejajar dengan judul di bawahnya.
     Bilah yang tidak sejajar dengan isinya membuat seluruh halaman terasa
     miring tanpa orang bisa menunjuk sebabnya. */
  max-width: var(--lebar-mockup); margin: 0 auto;
  padding: clamp(12px, 1.3vw, 16px) clamp(20px, 5vw, 88px);
}

/* Mockup memakai satuan `cqw` di seluruh ukurannya. Di sana ada bingkai
   pratinjau yang menjadi container-nya; di halaman sungguhan tidak ada, dan
   `cqw` tanpa container jatuh ke ukuran viewport — yaitu `vw`. Ditulis `vw`
   langsung supaya yang terbaca sama dengan yang terjadi. */

.merek {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 800;
  letter-spacing: -.02em; color: var(--brand-dark);
}
.merek img { width: clamp(26px, 2.2vw, 32px); height: auto; display: block; }
.merek-aksen { color: var(--aksen); }

.menu { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.menu a {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.menu a:hover { color: var(--brand-text); }
.menu a.aktif { color: var(--ink); font-weight: 700; }

.bilah-aksi { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tautan-masuk {
  font-size: 15px; font-weight: 600; color: var(--brand-dark);
  text-decoration: none; white-space: nowrap;
}

/* --------------------------------------------- menu ponsel, tanpa JavaScript

   `<details>` dipakai sebagai sakelar buka-tutup. Mockup memakai React untuk
   ini; situs ini tidak punya React, dan navigasi adalah satu-satunya bagian
   halaman yang tidak boleh gagal saat skrip gagal dimuat. */
.menu-hp { position: relative; display: none; }
.menu-hp summary {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; cursor: pointer; list-style: none;
}
/* Tiga jalan mematikan penanda bawaan, karena tidak ada satu pun yang cukup
   di semua peramban: `list-style` untuk yang modern, `::marker` untuk Chrome
   yang masih menggambar segitiga walau list-style none, dan yang -webkit-
   untuk Safari lama. */
.menu-hp summary::-webkit-details-marker { display: none; }
.menu-hp summary::marker { content: ""; }
.menu-hp summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.menu-garis {
  display: block; width: 16px; height: 10px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.menu-hp[open] .menu-garis { border-top-color: var(--brand); border-bottom-color: var(--brand); }
.menu-hp-isi {
  position: absolute; right: 0; top: calc(100% + 10px);
  display: grid; gap: 2px;
  min-width: 220px; padding: 6px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(11, 31, 58, .5);
}
.menu-hp-isi a {
  padding: 11px 4px; font-size: 16px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--surface-alt);
}
.menu-hp-isi a:last-child { border-bottom: 0; }
.menu-hp-masuk { color: var(--brand-dark) !important; font-weight: 700 !important; }

/* Ambangnya 900px, bukan 640px seperti nav lama: lima tautan + "Masuk" +
   tombol sudah berdesakan jauh sebelum 640. */
@media (max-width: 900px) {
  .menu, .tautan-masuk { display: none; }
  .menu-hp { display: block; }
}

/* ------------------------------------------------------------------- hero */

.hero { padding: 72px 0 56px; }
.hero h1 {
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px;
}
.hero p.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-soft); max-width: 60ch; margin: 0 0 32px; }
.badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-text);
  font-size: 13px; font-weight: 700; margin-bottom: 20px;
}

.btn {
  display: inline-block; padding: 14px 26px; border-radius: 12px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* Untuk di atas kaki navy: putih pekat, karena --surface di sana justru hilang
   ke dalam latarnya sendiri. */
.btn-putih { background: #fff; color: var(--brand-dark); border-color: transparent; }
.btn-putih:hover { background: var(--brand-soft); color: var(--brand-dark); }
.note { font-size: 14px; color: var(--muted); margin-top: 14px; }

/* ------------------------------------------------------------------ cards */

section { padding: 56px 0; }
h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.01em; margin: 0 0 12px; }
.sub { color: var(--muted); max-width: 62ch; margin: 0 0 36px; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.card .ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
  background: var(--brand-soft); color: var(--brand-text);
  display: grid; place-items: center; font-size: 20px;
}

.highlight {
  background: linear-gradient(135deg, var(--brand), #5B8DEF);
  color: #fff; border-radius: 22px; padding: 40px;
}
.highlight h2, .highlight p { color: #fff; }
.highlight p { opacity: 0.92; }

/* ------------------------------------------------------------------ tabel */

.table-scroll, .tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* --------------------------------------------------------------- dokumen */

.doc { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; }
.doc h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; }
.doc .meta { color: var(--muted); font-size: 14px; margin-bottom: 36px; }
.doc h2 { font-size: 21px; margin: 36px 0 10px; }
.doc h3 { font-size: 17px; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 22px; }
.doc a { color: var(--brand-text); }

.callout {
  border-left: 3px solid var(--gold);
  background: var(--surface-alt);
  padding: 16px 18px; border-radius: 0 12px 12px 0; margin: 24px 0;
  font-size: 15px;
}
.callout strong { color: var(--ink); }

/* Bagian yang WAJIB diisi sebelum situs dianggap final. Sengaja mencolok
   supaya tidak lolos ke publikasi tanpa disadari. */
/* Tanpa penimpaan mode gelap — sisa dari masa situs ini masih punya mode gelap.
   Sekarang paletnya terang saja, jadi satu-satunya yang dilakukan penimpaan itu
   adalah mengubah kotak kuning ini jadi cokelat tua di tengah halaman putih
   saat sistem pembacanya bermode gelap. */
.isi-dulu {
  background: #FFF4D6; color: #6B4E00;
  border: 1px dashed #D9A400; border-radius: 10px;
  padding: 14px 16px; margin: 20px 0; font-size: 14px;
}

/* --------------------------------------------- bagian bertinta (inverted) */

/* Judul di bagian bertinta harus PUTIH, dan ini tidak bisa diserahkan pada
   pewarisan.

   `h1, h2, h3, h4 { color: var(--ink) }` di atas menyetel warna LANGSUNG pada
   elemennya, dan deklarasi langsung selalu mengalahkan warna yang diwarisi —
   berapa pun spesifisitasnya. Jadi `color:#fff` pada <section>-nya tidak
   pernah sampai ke judul di dalamnya, dan hasilnya judul navy di atas latar
   navy: hilang sama sekali, bukan sekadar kurang kontras.

   Penanda yang dipakai adalah `color:#fff`, BUKAN warna latarnya. Versi
   pertama aturan ini menyasar `background:var(--ink)` dan karena itu melewatkan
   bagian penutup yang latarnya gradien — cacat yang sama persis muncul lagi di
   halaman yang sama, beberapa layar di bawahnya. Latar bisa berupa warna,
   gradien, atau gambar; yang selalu ditulis penulisnya saat ia bermaksud
   "teks di sini putih" adalah warna teksnya sendiri. */
.mockup [style*="color:#fff"] h1,
.mockup [style*="color:#fff"] h2,
.mockup [style*="color:#fff"] h3,
.mockup [style*="color:#fff"] h4 { color: #fff; }

/* ------------------------------------------------------- kaki: ikon & unduh */

/* Kolom ini memuat alamat surel dan nomor telepon — dua untaian terpanjang di
   seluruh kaki halaman. Dengan lebar dasar yang sama seperti kolom tautan
   (170px), nomornya patah jadi dua baris dan "(WA Only)" turun sendirian.
   Melebarkan kolomnya memperbaiki sebabnya; `nowrap` menjaga agar tidak
   terulang saat nomornya berganti jadi lebih panjang. */
.kaki-kolom-hubungi { flex: 0 1 275px; }
.kaki-kolom-hubungi .kaki-ikon span { white-space: nowrap; }

.kaki-ikon { display: flex; align-items: center; gap: 10px; }
.kaki-ikon svg {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none; stroke: var(--aksen-terang); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.kaki-ikon:hover { color: #fff; }
.kaki-ikon:hover svg { stroke: #fff; }

/* Sasaran sentuh 40px, bukan sebesar ikonnya.
   Ikon 18px yang bisa diketuk hanya pada 18px-nya adalah tiga sasaran kecil
   berdempetan di kaki halaman — tempat jempol paling tidak teliti. Ikonnya
   tetap 18px; yang membesar wilayah ketukannya. */
/* Sasaran sentuh 46px, bukan sebesar ikonnya.
   Ikon 23px yang bisa diketuk hanya pada 23px-nya adalah tiga sasaran kecil
   berdempetan — dan di kaki halaman, tempat jempol paling tidak teliti.
   Ikonnya tetap 23px; yang membesar wilayah ketukannya.

   Satu blok untuk dua latar: warna bawaannya untuk latar TERANG (halaman
   Kontak), dan `.kaki .sosial` di bawah menimpanya untuk kaki bertinta navy.
   Markupnya sendiri dipakai bersama lewat `{{sosial}}`. */
.sosial { display: flex; gap: 8px; }
.sosial a {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface);
}
.sosial svg {
  width: 23px; height: 23px;
  fill: none; stroke: var(--brand-text); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sosial a:hover { border-color: var(--brand); background: var(--brand-soft); }

.kaki .sosial { margin-top: 18px; }
.kaki .sosial a { border-color: rgba(255, 255, 255, .16); background: transparent; }
.kaki .sosial svg { stroke: var(--aksen-terang); }
.kaki .sosial a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.kaki .sosial a:hover svg { stroke: #fff; }

/* ------------------------------------------------------- kartu halaman Kontak */

.kontak-kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kontak-ikon {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: var(--brand-soft);
}
.kontak-ikon svg {
  width: 19px; height: 19px;
  fill: none; stroke: var(--brand-text); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Warna ikon mengikuti saluran yang diwakilinya, bukan seragam — supaya kartu
   WhatsApp bisa dikenali sebelum tulisannya dibaca. */
.kontak-ikon-wa { background: var(--income-soft); }
.kontak-ikon-wa svg { stroke: var(--income); }
.kontak-ikon-data { background: var(--surface-alt); }
.kontak-ikon-data svg { stroke: var(--ink-soft); }

/* `hidden` harus selalu berarti tersembunyi.
 *
 * Atribut `hidden` bawaannya hanya `display: none` dari stylesheet peramban —
 * kelas mana pun yang memasang `display` sendiri mengalahkannya tanpa suara.
 * Terlihat di halaman unduh: tombol "Unduh APK" disembunyikan untuk pemakai
 * iPhone, `hidden` terpasang, dan tombolnya tetap muncul karena `.unduh`
 * memasang `display: inline-flex`. Yang menyembunyikan tidak mendapat satu pun
 * tanda bahwa ia gagal.
 */
[hidden] { display: none !important; }

.unduh {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--brand-dark);
  padding: 11px 20px 11px 14px; border-radius: 14px;
  text-decoration: none; margin-top: 4px;
}
.unduh:hover { background: var(--brand-soft); }
.unduh img { display: block; flex-shrink: 0; }
.unduh-teks { display: grid; line-height: 1.25; }
.unduh-teks em {
  font-style: normal; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.unduh-teks strong { font-size: 16.5px; font-weight: 800; }
.unduh-nota {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--muted-gelap); max-width: 42ch;
}
.unduh-nota a { color: var(--aksen-terang); }

/* ------------------------------------------------------------------ pilih */

/* Daftar buka-bawah bergaya sendiri.
   `appearance:none` mencabut rupa bawaan sistem — di macOS itu tombol abu-abu
   berpanah ganda yang tidak ada hubungannya dengan halaman ini. Panahnya
   digambar ulang sebagai SVG sebaris supaya tidak ada permintaan jaringan
   untuk satu tanda seberat 200 bait.
   `.pilih` juga jangkar untuk daftar bergaya yang dipasang gerak.js: daftar
   yang TERBUKA digambar sistem operasi, dan satu-satunya cara mengubahnya
   adalah menggantinya. Tanpa JavaScript, <select> aslinya tetap dipakai dan
   formulirnya tetap bekerja. */
.pilih { position: relative; }
.pilih > select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637288' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 44px 13px 15px;
  cursor: pointer; outline: none;
}
.pilih > select:focus-visible { border-color: var(--brand); }

/* Tombol pengganti yang dipasang gerak.js. Sebelum skripnya jalan ia tidak
   ada, jadi tidak ada yang berkedip. */
.pilih-tombol {
  display: none; width: 100%; text-align: left;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 44px 13px 15px; cursor: pointer;
  position: relative;
}
.pilih-tombol::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637288' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  transition: transform .18s ease;
}
.pilih[data-buka] .pilih-tombol::after { transform: rotate(180deg); }
.pilih[data-siap] > select { display: none; }
.pilih[data-siap] .pilih-tombol { display: block; }
.pilih-tombol:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.pilih-daftar {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 31, 58, .14);
  max-height: 288px; overflow-y: auto;
}
.pilih-daftar li {
  padding: 11px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14.5px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pilih-daftar li:hover, .pilih-daftar li[data-sorot] { background: var(--surface-alt); }
.pilih-daftar li[aria-selected="true"] { color: var(--brand-text); font-weight: 700; }
.pilih-daftar li[aria-selected="true"]::after { content: "✓"; font-size: 13px; }

/* Medan umpan penangkap robot. Disembunyikan dari mata DAN dari pembaca layar,
   tetapi tetap ada di markup — perayap mengabaikan `type="hidden"` sementara
   medan yang tampak biasa justru diisinya. `left:-9999px`, bukan
   `display:none`: sebagian perayap memang melewati yang display-none. */
.umpan {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ---------------------------------------------------------------- panduan */

/* Halaman panduan dibaca di DUA tempat dengan lebar yang jauh berbeda: di
   peramban desktop, dan di dalam WebView aplikasi selebar ponsel. Karena itu
   ukuran ditulis relatif dan tidak ada satu pun lebar tetap di bawah ini. */

.panduan { max-width: 780px; margin: 0 auto; padding: 40px 20px 72px; }
.panduan h1 { font-size: clamp(27px, 4.4vw, 38px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.02em; }
.panduan h2 { font-size: clamp(19px, 2.4vw, 23px); margin: 40px 0 12px; }
.panduan h3 { font-size: 17px; margin: 28px 0 8px; }
.panduan p, .panduan li { color: var(--ink-soft); line-height: 1.7; }
.panduan a { color: var(--brand-text); }
.panduan strong { color: var(--ink); }

.remah { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.remah a { color: var(--muted); text-decoration: none; }
.remah a:hover { color: var(--brand-text); }

.mata {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11.5px; letter-spacing: 0.14em; color: var(--aksen);
  margin: 0 0 10px;
}

.panduan-lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-soft); margin: 0 0 8px; }

.panduan-paket {
  display: inline-block; margin: 6px 0 0;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}

/* Langkah bernomor. `counter` dan bukan `<ol>` bawaan karena nomornya perlu
   duduk di luar teks dan tetap sejajar saat langkahnya memuat dua paragraf. */
.langkah { list-style: none; counter-reset: langkah; padding: 0; margin: 20px 0; }
.langkah > li {
  counter-increment: langkah; position: relative;
  padding: 0 0 0 40px; margin: 0 0 18px;
}
.langkah > li::before {
  content: counter(langkah);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}

/* Penjelasan opsi: istilah dan artinya. */
.opsi { margin: 20px 0; padding: 0; }
.opsi dt { font-weight: 700; color: var(--ink); margin-top: 16px; }
.opsi dd { margin: 4px 0 0; color: var(--ink-soft); line-height: 1.65; }

/* Tangkapan layar ponsel. Dibatasi 280px karena sumbernya 720px lebar dan
   1600px tinggi — ditampilkan apa adanya, satu gambar mengisi seluruh layar
   pembaca dan panduannya berhenti terbaca sebagai teks. */
.tangkapan { margin: 24px 0; text-align: center; }
.tangkapan img {
  max-width: min(280px, 72vw); height: auto;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface);
}
.tangkapan figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }

/* Dua tangkapan berdampingan untuk perbandingan sebelum/sesudah. */
.tangkapan-duo { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.tangkapan-duo .tangkapan { margin: 0; flex: 0 1 280px; }

.panduan-lain { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 28px; }
.panduan-lain h2 { margin-top: 0; font-size: 17px; }
.panduan-tautan { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.panduan-tautan a {
  display: block; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--surface);
}
.panduan-tautan a:hover { border-color: var(--brand); }
.panduan-tautan strong { display: block; font-size: 15px; margin-bottom: 4px; }
.panduan-tautan span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Daftar isi di /tutorial/. Lebarnya mengikuti bagian mockup di atasnya
   (--lebar-mockup) supaya tidak ada lompatan lebar di tengah halaman. */
.panduan-daftar {
  max-width: var(--lebar-mockup); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 88px) clamp(52px, 6.5vw, 100px);
}
.panduan-daftar h2 { font-size: clamp(20px, 2.4vw, 27px); margin: 0 0 8px; }
.panduan-daftar h2 + .sub { margin-bottom: 22px; }
.panduan-daftar .callout { margin-top: 40px; }

.panduan-grid {
  display: grid; gap: 14px; margin-bottom: 48px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.panduan-kartu {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px;
}
.panduan-kartu:hover { border-color: var(--brand); }
.panduan-kartu strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.panduan-kartu span { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.panduan-kartu em {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-dark);
  padding: 2px 7px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle;
}

/* ----------------------------------------------------------------- footer */

/* Kaki bertinta navy penuh — satu-satunya blok gelap di situs terang ini.
   Karena itu warnanya TIDAK boleh diambil dari token yang dipakai di atas
   putih: --muted (#637288) di atas navy hanya 2,6:1. Di sini dipakai
   --muted-gelap dan --aksen-terang, yang memang disediakan untuk latar gelap
   (6,65:1 dan 7,91:1). */
.kaki {
  background: var(--ink); color: #fff;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 88px) clamp(24px, 3vw, 36px);
  margin-top: 0;
}
.kaki-isi {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px);
  align-items: flex-start;
  max-width: var(--lebar-mockup); margin: 0 auto;
}
.kaki-merek { flex: 1 1 260px; min-width: 0; }
.merek-kaki { color: #fff; font-size: 19px; margin-bottom: 14px; }
.kaki-merek p {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.65;
  color: var(--muted-gelap); max-width: 34ch;
}

.kaki-kolom { flex: 0 1 170px; min-width: 0; }
.kaki-judul {
  font-size: 11px; letter-spacing: .14em;
  color: var(--aksen-terang); margin-bottom: 14px;
}
.kaki-tautan { display: grid; gap: 10px; }
.kaki-tautan a, .kaki-tautan span {
  color: var(--muted-gelap); text-decoration: none; font-size: 14.5px;
}
.kaki-tautan a:hover { color: #fff; }

.lencana-baris { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.lencana { display: grid; gap: 5px; justify-items: center; }
/* Diredam, dan itu bagian dari pesannya: keduanya BUKAN tautan, karena
   aplikasinya memang belum ada di toko mana pun. */
.lencana img { height: 36px; width: auto; display: block; opacity: .5; }
.lencana span {
  font-size: 9px; letter-spacing: .12em; color: var(--muted-gelap);
}

.kaki-bawah {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  max-width: var(--lebar-mockup); margin: clamp(28px, 3vw, 44px) auto 0;
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; color: var(--muted-gelap);
}

/* Fokus keyboard harus selalu terlihat — jangan pernah dimatikan. */
a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------- halaman harga & fitur
 *
 * Tidak ada satu nilai warna pun di bawah ini — semuanya menyusun custom
 * property dari token.css, yang dihasilkan dari design/token.json bersama
 * aplikasi dan dasbor. Menuliskan hex di sini berarti warna keempat yang harus
 * tetap sama dengan tiga lainnya.
 */

.aktif { color: var(--brand); font-weight: 600; }

.btn-sm { padding: 8px 14px; font-size: 14px; }

.badge-kecil {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--brand-soft, rgba(53, 70, 214, .10));
  color: var(--brand);
  vertical-align: middle;
}

.harga-terbuka {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 22px;
  background: var(--surface-alt, transparent);
}
.harga-terbuka h3 { margin: 0 0 10px; font-size: 15px; }
.harga-terbuka ul { margin: 0; padding-left: 20px; }
.harga-terbuka li { margin: 4px 0; }

.harga-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* `stretch`, bukan `start`: tiga kartu setinggi isinya masing-masing
     membuat daftar fiturnya tidak sejajar, dan mata membandingkan panjang
     kartu alih-alih membandingkan isinya. */
  align-items: stretch;
}

/* ----------------------------------------------------------- kartu paket
 *
 * Tiga paket, tiga identitas warna — dan ketiganya diambil dari token yang
 * sudah ada, bukan warna baru. Halaman harga adalah tempat orang memutuskan;
 * tiga kotak putih yang sama persis menuntut mereka membaca seluruhnya dulu
 * sebelum tahu mana yang berbeda.
 *
 * Yang disorot ditentukan `disarankan` di design/harga.json, bukan di sini:
 * mengubah paket unggulan tidak boleh menuntut siapa pun membuka stylesheet.
 */
.harga-kartu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.harga-kartu:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(11, 31, 58, .3); }

/* Pita kepala: satu-satunya blok berwarna, dan justru itu yang membuat
   ketiganya bisa dibedakan dari ujung ruangan. */
.harga-pita {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 22px;
}
.harga-pita h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }

.harga-lencana {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .22); color: #fff;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}

.paket-free .harga-pita { background: var(--surface-alt); }
.paket-free .harga-pita h3 { color: var(--ink); }

.paket-basic .harga-pita { background: linear-gradient(120deg, var(--brand), var(--brand-dark)); }
.paket-basic .harga-pita h3 { color: #fff; }

.paket-premium .harga-pita { background: linear-gradient(120deg, var(--ink), var(--aksen)); }
.paket-premium .harga-pita h3 { color: #fff; }

/* Paket yang disarankan: cincin merek dan sedikit terangkat. Bukan lebih
   besar — kartu yang lebih besar merusak kesejajaran daftar fiturnya, dan
   justru kesejajaran itu yang membuat ketiganya bisa dibandingkan. */
.harga-kartu:has(.harga-lencana) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 26px 44px -30px rgba(43, 68, 212, .5);
}

.harga-badan { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.harga-ringkas { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Harga utama besar; durasi lain jadi baris pembanding di bawahnya. Tiga
   angka berukuran sama menuntut pembaca membandingkan sebelum ia sempat tahu
   berapa harganya sama sekali. */
.harga-utama {
  margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.harga-utama strong {
  font-size: clamp(28px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.harga-utama span { font-size: 14px; color: var(--muted); }

.paket-basic .harga-utama strong { color: var(--brand-text); }
.paket-premium .harga-utama strong { color: var(--brand-dark); }

.harga-baris { list-style: none; margin: 0 0 18px; padding: 0; }
.harga-baris li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
.harga-baris span { color: var(--muted); }
/* Angka disejajarkan supaya dua baris harga bisa dibandingkan sekilas. */
.harga-baris strong { font-variant-numeric: tabular-nums; color: var(--ink); }

/* Centang, bukan titik. Daftar fitur adalah daftar yang ANDA DAPAT — dan
   tanda centang mengatakannya tanpa satu kata tambahan. `margin-top` pada
   ::before, bukan align-items, supaya centangnya tetap sejajar baris pertama
   saat teksnya melipat ke dua baris. */
/* `margin-top: 4px`, BUKAN `auto`. Mendorong daftar ke dasar kartu memang
   menyejajarkan ujung bawahnya, tetapi paket Gratis hanya punya dua fitur —
   dan hasilnya lubang kosong setinggi enam baris di tengah kartunya. */
.harga-fitur { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.harga-fitur li {
  position: relative; padding-left: 26px; margin: 9px 0;
  line-height: 1.5; color: var(--ink-soft);
}
.harga-fitur li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--income);
}
.paket-basic .harga-fitur li::before { color: var(--brand-text); }
.paket-premium .harga-fitur li::before { color: var(--aksen); }

/* Daftar, bukan tabel.
 *
 * Sebelumnya lima kolom: paket, per bulan, lalu total 3, 6, dan 12 bulan. Itu
 * memaksa tabelnya selebar 520px — lebih lebar dari layar ponsel mana pun —
 * dan halaman meluap 150px ke samping. Ia juga menjawab pertanyaan yang tidak
 * sedang dipikirkan pembaca: add-on selalu mengikuti masa langganan yang sudah
 * berjalan, jadi yang ingin diketahui adalah tambahannya per bulan. */
.harga-addon {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.harga-addon li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
}
.harga-addon strong { font-weight: 700; }
.harga-addon span {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.harga-catatan { color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------------------- akordeon
 *
 * `<details>`/`<summary>` bawaan peramban, tanpa satu baris JavaScript pun.
 * Halaman publik ini sengaja tidak memuat skrip: jawaban FAQ yang butuh JS
 * untuk terbaca tidak terindeks mesin pencari, dan tidak terbaca oleh siapa pun
 * yang membukanya lewat koneksi yang gagal memuat skrip.
 */
/* Kelas eksplisit, bukan `details` telanjang.
 *
 * Aturan ini dulu menyasar setiap <details> di halaman, dan itu bocor pada
 * <details> pertama yang bukan akordeon: menu ponsel di bilah atas mewarisi
 * garis bawah, padding 14px, dan tanda '+' yang muncul di sebelah ikon
 * hamburgernya. Kelas menutup kebocoran itu untuk setiap <details> yang
 * ditambahkan nanti, bukan hanya untuk yang sudah telanjur ada. */
.akordeon {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.akordeon summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
}
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after {
  content: '+';
  float: right;
  color: var(--muted);
  font-weight: 400;
}
.akordeon[open] summary::after { content: '−'; }
.akordeon > p { margin: 0 0 14px; color: var(--ink); }

/* FAQ hasil port mockup duduk di dalam kartu putih ber-radius yang tidak punya
   padding mendatar sendiri, jadi akordeonnya yang memberi jarak dari tepi.
   Butir-butirnya dulu <button> dengan `onClick` React — yang dicabut saat
   di-port, sehingga dua belas pertanyaan terbit sebagai tombol yang tidak
   melakukan apa pun dan jawabannya terkunci di balik `max-height:0`. Sekarang
   <details> bawaan: bisa dibuka tanpa satu baris skrip, terbaca mesin pencari,
   dan bekerja dengan papan ketik. */
.mockup .akordeon { padding: 0; border-bottom-color: var(--surface-alt); }
.mockup .akordeon:last-of-type { border-bottom: 0; }
.mockup .akordeon summary {
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  padding: clamp(15px, 1.5vw, 20px) clamp(16px, 1.7vw, 26px);
}
.mockup .akordeon summary::after { font-size: 20px; }
.mockup .akordeon summary:hover { color: var(--brand-text); }

/* ------------------------------------------------------------------ langkah */
ol.langkah { padding-left: 22px; }
ol.langkah li { margin: 10px 0; }
ol.langkah code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-alt, rgba(0, 0, 0, .05));
  font-size: 13px;
}