/*
 * Situs Tuntas — Sprint 58.5 (docs/72).
 *
 * Rasa yang dituju sama dengan aplikasinya (docs/70): tenang seperti Microsoft Fluent 2 / Apple,
 * abu-abu netral, SATU warna aksen (biru "brand" Fluent #0f6cbd, sama dengan tema.ts), garis tipis,
 * bayangan halus. Font sistem — tidak dibundel dan tidak lewat CDN: Segoe UI Variable dan SF Pro
 * tidak boleh didistribusikan, dan font dari Google membuat browser setiap pengunjung menghubungi
 * Google.
 *
 * Warna hanya didefinisikan di :root di bawah. Pasangan tulisan/latar sudah dihitung kontrasnya
 * (docs/72 §5) — kalau mengganti satu nilai, hitung ulang pasangannya.
 */

:root {
  color-scheme: light dark;

  --latar: #ffffff;
  --latar-lembut: #fafafa;
  --kartu: #ffffff;
  --garis: #e6e6e6;
  --garis-kuat: #858585;
  --teks: #1f1f1f;
  --teks-redup: #525252;
  --utama: #0f6cbd;
  --utama-hover: #115ea3;
  --utama-aktif: #0f548c;
  --utama-teks: #ffffff;
  --utama-lembut: #ebf3fc;
  --tautan: #0f6cbd;
  --fokus: #0f6cbd;
  --bahaya-teks: #b91c1c;
  --bahaya-latar: #fef2f2;
  --bahaya-garis: #fecaca;
  --berhasil-teks: #166534;
  --berhasil-latar: #f0fdf4;
  --berhasil-garis: #bbf7d0;
  --bayangan: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px rgb(0 0 0 / 8%);
  --bayangan-kecil: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 5%);

  --huruf: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --huruf-judul: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 12px;
  --radius-kecil: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --latar: #141414;
    --latar-lembut: #1b1b1b;
    --kartu: #242424;
    --garis: #3d3d3d;
    --garis-kuat: #858585;
    --teks: #f0f0f0;
    --teks-redup: #a3a3a3;
    --utama: #62abf5;
    --utama-hover: #96c6fa;
    --utama-aktif: #b4d6fa;
    --utama-teks: #141414;
    --utama-lembut: #0c3b5e;
    --tautan: #62abf5;
    --fokus: #62abf5;
    --bahaya-teks: #fca5a5;
    --bahaya-latar: #3a1717;
    --bahaya-garis: #7f1d1d;
    --berhasil-teks: #bbf7d0;
    --berhasil-latar: #11291a;
    --berhasil-garis: #166534;
    --bayangan: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%);
    --bayangan-kecil: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
  }
}

/* ------------------------------------------------------------------ Dasar */

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

html {
  scroll-behavior: smooth;
  /* Tinggi kepala yang menempel, supaya judul bagian tidak tertutup saat tautan # diikuti. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: var(--huruf);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⚠️ Aturan display apa pun (grid, flex) mengalahkan [hidden] bawaan browser — tanpa baris ini
   formulir yang sudah terkirim tetap tergambar di samping pesan terima kasihnya. */
[hidden] {
  display: none !important;
}

.pratinjau {
  padding-block: 0.75rem;
  background: var(--utama-lembut);
  border-bottom: 1px solid var(--garis);
  font-size: 0.9375rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--huruf-judul);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--tautan);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wadah {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 40rem) {
  .wadah {
    padding-inline: 1.5rem;
  }
}

.wadah--sempit {
  max-width: 48rem;
}

.lompat {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--kartu);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
}

.lompat:focus {
  top: 1rem;
}

.label-kecil {
  color: var(--tautan);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.catatan-kecil {
  color: var(--teks-redup);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Tombol */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-kecil);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tombol {
    transition: none;
  }
}

.tombol--utama {
  background: var(--utama);
  color: var(--utama-teks);
}

.tombol--utama:hover {
  background: var(--utama-hover);
}

.tombol--utama:active {
  background: var(--utama-aktif);
}

.tombol--kedua {
  background: var(--kartu);
  color: var(--teks);
  border-color: var(--garis-kuat);
}

.tombol--kedua:hover {
  background: var(--latar-lembut);
}

/* Lebih ringkas, tapi tetap 44px tinggi: di ponsel ini tombol satu-satunya di kepala halaman. */
.tombol--kecil {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

.tombol--penuh {
  width: 100%;
}

.tombol[disabled] {
  cursor: progress;
  opacity: 0.75;
}

.deret-tombol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ Kepala */

.kepala {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--latar) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--garis);
}

.kepala__baris {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.merek {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--teks);
  font-family: var(--huruf-judul);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.navigasi {
  display: none;
  gap: 1.5rem;
  margin-left: auto;
}

.navigasi a {
  color: var(--teks-redup);
  font-size: 0.9375rem;
  text-decoration: none;
}

.navigasi a:hover {
  color: var(--teks);
}

.kepala .tombol {
  margin-left: auto;
}

@media (min-width: 56rem) {
  .navigasi {
    display: flex;
  }

  .kepala .tombol {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ Pembuka */

.pembuka {
  padding-block: 3.5rem 4rem;
  overflow: hidden;
}

.pembuka__teks {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin-bottom: 3rem;
  text-align: center;
}

.pembuka h1 {
  max-width: 18ch;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.pembuka__lead {
  max-width: 40rem;
  color: var(--teks-redup);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.pembuka .deret-tombol {
  justify-content: center;
  margin-top: 0.5rem;
}

@media (min-width: 56rem) {
  .pembuka {
    padding-block: 5rem 5.5rem;
  }
}

/* ------------------------------------------------------------------ Bingkai tangkapan layar */

.bingkai {
  margin: 0;
}

.bingkai picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  box-shadow: var(--bayangan);
}

.bingkai figcaption {
  margin-top: 0.75rem;
  color: var(--teks-redup);
  font-size: 0.875rem;
  text-align: center;
}

/* ------------------------------------------------------------------ Fakta singkat */

.fakta {
  border-block: 1px solid var(--garis);
  background: var(--latar-lembut);
}

.fakta__daftar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-block: 0;
  padding-block: 2rem;
  list-style: none;
}

.fakta__daftar li {
  display: grid;
  gap: 0.25rem;
}

.fakta__daftar span {
  color: var(--teks-redup);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Bagian */

.bagian {
  padding-block: 4.5rem;
}

.bagian--lembut {
  background: var(--latar-lembut);
  border-block: 1px solid var(--garis);
}

.bagian__kepala {
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
  margin-bottom: 3rem;
}

.bagian__kepala h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.bagian__kepala p:not(.label-kecil) {
  color: var(--teks-redup);
  font-size: 1.125rem;
}

@media (min-width: 56rem) {
  .bagian {
    padding-block: 6rem;
  }
}

/* ------------------------------------------------------------------ Langkah */

.langkah {
  display: grid;
  gap: 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langkah__butir {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.langkah__teks {
  display: grid;
  gap: 0.75rem;
  max-width: 32rem;
}

.langkah__teks h3 {
  font-size: 1.5rem;
  font-weight: 650;
}

.langkah__teks p {
  color: var(--teks-redup);
}

.langkah__nomor {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--utama-lembut);
  color: var(--tautan);
  font-weight: 700;
}

@media (min-width: 56rem) {
  .langkah__butir {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
  }

  .langkah__butir:nth-child(even) .langkah__teks {
    order: 2;
  }
}

/* ------------------------------------------------------------------ Fitur */

.kelompok-fitur {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .kelompok-fitur {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.kelompok h3 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--garis);
  font-size: 1.125rem;
  font-weight: 650;
}

.fitur {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fitur li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.875rem;
}

.fitur h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.fitur p {
  color: var(--teks-redup);
  font-size: 0.9375rem;
}

.ikon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--tautan);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sambungan {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.875rem;
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
}

.sambungan p {
  color: var(--teks-redup);
}

.sambungan strong {
  color: var(--teks);
}

/* ------------------------------------------------------------------ Kartu */

.kartu-deret {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .kartu-deret {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .kartu-deret {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kartu {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  box-shadow: var(--bayangan-kecil);
}

.kartu h3 {
  font-size: 1.1875rem;
  font-weight: 650;
}

.kartu__contoh {
  color: var(--teks-redup);
  font-size: 0.9375rem;
}

.centang {
  display: grid;
  gap: 0.625rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.centang li {
  position: relative;
  padding-left: 1.625rem;
}

/* Tanda centang digambar garis CSS, bukan karakter — karakter centang tampil berbeda (dan kadang
   berwarna emoji) di tiap sistem. */
.centang li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.4em;
  width: 0.4rem;
  height: 0.7rem;
  border: solid var(--tautan);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dua-kolom {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .dua-kolom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ Harga */

.harga {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 56rem) {
  .harga {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.paket {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  box-shadow: var(--bayangan-kecil);
}

.paket--sorot {
  border: 2px solid var(--utama);
}

.paket h3 {
  font-size: 1.25rem;
  font-weight: 650;
}

.paket__harga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.paket__angka {
  font-family: var(--huruf-judul);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.paket__satuan,
.paket__syarat {
  color: var(--teks-redup);
  font-size: 0.9375rem;
}

.paket .centang {
  margin-block: 0.5rem 1rem;
}

.harga__catatan {
  margin-top: 1.5rem;
  text-align: center;
}

/* ------------------------------------------------------------------ Tanya jawab */

.tanya {
  display: grid;
  gap: 0.75rem;
}

.tanya details {
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  background: var(--kartu);
}

.tanya summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.tanya summary::-webkit-details-marker {
  display: none;
}

.tanya summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 1.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--teks-redup);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tanya details[open] summary::after {
  top: 1.55rem;
  transform: rotate(-135deg);
}

.tanya details p {
  padding: 0 1.25rem 1rem;
  color: var(--teks-redup);
}

/* ------------------------------------------------------------------ Formulir demo */

.demo {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .demo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }
}

.demo__teks {
  display: grid;
  gap: 0.75rem;
}

.demo__teks h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.demo__teks p:not(.label-kecil):not(.catatan-kecil) {
  color: var(--teks-redup);
  font-size: 1.125rem;
}

.demo__kotak {
  padding: 1.5rem;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  box-shadow: var(--bayangan);
}

@media (min-width: 40rem) {
  .demo__kotak {
    padding: 2rem;
  }
}

.formulir {
  display: grid;
  gap: 1.125rem;
}

.isian {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.isian-deret {
  display: grid;
  gap: 1.125rem;
}

@media (min-width: 40rem) {
  .isian-deret {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.isian label,
.pilihan legend {
  font-size: 0.9375rem;
  font-weight: 600;
}

.wajib {
  color: var(--teks-redup);
  font-weight: 400;
}

.isian input,
.isian select,
.isian textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--garis-kuat);
  border-radius: var(--radius-kecil);
  background: var(--kartu);
  color: var(--teks);
  font: inherit;
  font-size: 1rem;
}

.isian textarea {
  resize: vertical;
}

.isian input:focus-visible,
.isian select:focus-visible,
.isian textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--fokus);
}

.isian [aria-invalid="true"] {
  border-color: var(--bahaya-teks);
}

.isian__salah {
  color: var(--bahaya-teks);
  font-size: 0.875rem;
}

.pilihan {
  margin: 0;
  padding: 0;
  border: 0;
}

.pilihan legend {
  margin-bottom: 0.375rem;
  padding: 0;
}

.pilihan label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-right: 1.25rem;
  font-weight: 400;
}

.pilihan input {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--utama);
}

/* Dari mata dan dari urutan tab — tapi tetap ada di DOM, karena robot mengisi apa yang ia lihat
   di HTML, bukan apa yang tergambar. display:none terlalu mudah dikenali. */
.penjebak {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pemberitahuan {
  padding: 1rem 1.25rem;
  border: 1px solid;
  border-radius: var(--radius-kecil);
}

.pemberitahuan--gagal {
  border-color: var(--bahaya-garis);
  background: var(--bahaya-latar);
  color: var(--bahaya-teks);
}

.pemberitahuan--gagal a {
  color: inherit;
  font-weight: 600;
}

.pemberitahuan--berhasil {
  display: grid;
  gap: 0.5rem;
  border-color: var(--berhasil-garis);
  background: var(--berhasil-latar);
  color: var(--berhasil-teks);
}

.pemberitahuan--berhasil h3 {
  font-size: 1.125rem;
}

/* ------------------------------------------------------------------ Kaki */

.kaki {
  padding-block: 2.5rem;
  border-top: 1px solid var(--garis);
  background: var(--latar-lembut);
}

.kaki__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.navigasi--kaki {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-left: 0;
}

.navigasi--kaki a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.kaki .catatan-kecil {
  margin-left: auto;
}