/* Wedding Saving Dashboard — situs publik
   Champagne & Blush. Gelap saja, disengaja — tanpa prefers-color-scheme
   terang. CSS murni: tanpa framework, tanpa build step, tanpa javascript. */

/* ---------------------------------------------------------------------
   1. Token desain
------------------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --surface: #0d0b0c;
  --surface-2: #141011;
  --card: #171314;
  --card-2: #1e1819;
  --border: #2a2224;
  --border-strong: #3a2f31;

  --ink: #f0e9e6;
  --muted: #a79a95;
  --faint: #756a67;

  --gold: #d9b06c;
  --gold-strong: #e6c489;
  --gold-btn: #d9b06c;
  --on-gold: #1c140f;

  --rose: #d9a3b0;
  --rose-soft: #2a1c20;
  --rose-border: #4a2c34;

  --success: #5fbf8a;
  --danger: #e07a7a;

  /* Warna ambient khusus untuk aurora latar belakang — dijaga persis
     sesuai identitas visual dashboard (admin.weddingsaving.my.id). */
  --aurora-gold: #d9b06c;
  --aurora-blush: #c98b9b;

  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 1.1rem;
  --radius-sm: 0.6rem;

  /* Irama vertikal: satu skala jarak antar-bagian, didefinisikan sekali
     di sini dan dipakai di mana-mana (section, hero, footer) — 4rem di
     ponsel, 6–7rem di desktop, menyempit/melebar mengikuti lebar layar. */
  --space-section: clamp(4rem, 2.5rem + 6vw, 7rem);
}

/* Tema terang sengaja tidak disediakan: identitas produk ini emas
   di atas charcoal, dan situs ini harus terlihat sama dengan aplikasi. */


/* ---------------------------------------------------------------------
   2. Reset dasar
------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-serif); font-weight: 600; line-height: 1.2;
  margin: 0 0 0.6em; letter-spacing: -0.01em; text-wrap: balance;
}
/* Skala judul tunggal, didefinisikan sekali di sini dan dipakai di
   seluruh situs — bukan diatur ulang per bagian atau per halaman. */
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 1.2rem + 0.9vw, 1.85rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 0.35em;
  overflow-wrap: anywhere;
}
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 640px) {
  input, textarea, select { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   2b. Aurora ambient — latar belakang animasi CSS murni, senada dengan
   nuansa dashboard. Selalu fixed, dekoratif, tidak pernah interaktif:
   pointer-events: none di semua elemen, dimatikan total di bawah
   prefers-reduced-motion (lihat bagian 17).
------------------------------------------------------------------------ */
.bg-decor { pointer-events: none; }

.bg-blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  will-change: transform;
  z-index: -2;
}
.bg-blob-1 {
  top: -22vh; left: -16vw;
  width: 62vmax; height: 62vmax;
  background: radial-gradient(circle, var(--aurora-gold) 0%, transparent 68%);
  opacity: 0.32;
  animation: drift-a 52s ease-in-out infinite;
}
.bg-blob-2 {
  bottom: -26vh; right: -18vw;
  width: 66vmax; height: 66vmax;
  background: radial-gradient(circle, var(--aurora-blush) 0%, transparent 70%);
  opacity: 0.26;
  animation: drift-b 64s ease-in-out infinite;
}
.bg-blob-3 {
  top: 32vh; left: 58vw;
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle, var(--aurora-gold) 0%, transparent 72%);
  opacity: 0.18;
  animation: drift-c 71s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 6vh, 0) scale(1.06); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, -4vh, 0) scale(1.08); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4vw, 5vh, 0) scale(0.94); }
}

/* Butiran grain tipis dan fixed: memecah efek banding pada bidang gelap
   tanpa pernah terasa mencolok. Data-URI, tanpa permintaan jaringan. */
.bg-grain {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
}

/* ---------------------------------------------------------------------
   3. Layout
------------------------------------------------------------------------ */
.shell { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 1024px) { .shell { padding-inline: 2.5rem; } }
@media (min-width: 1440px) { .shell { padding-inline: 4rem; } }
/* .prose tidak pernah boleh membatasi max-width kontainernya sendiri:
   div ini selalu duduk di dalam .shell (mis. <div class="shell prose">),
   dan .shell sudah mengatur max-width 78rem + margin-inline:auto untuk
   memusatkan seluruh halaman. Kalau .prose ikut memberi max-width di
   elemen yang sama, aturan itu menang (didefinisikan belakangan, bobot
   sama) lalu margin-inline:auto milik .shell memusatkan ulang kotak
   yang sudah menyempit itu — hasilnya paragraf melayang di tengah
   halaman sementara judul, kartu, dan footer tetap di tepi kiri yang
   sama. Lebar baca yang lebih sempit karena itu diberikan ke anak
   langsungnya saja, bukan ke kontainernya. */
.prose > * { max-width: 42rem; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.4em; }
.section { padding-block: var(--space-section); position: relative; }
.section + .section { padding-top: 0; }

/* Irama halaman: sebagian bagian mendapat nuansa sedikit lebih gelap
   supaya halaman yang panjang ini terasa berbabak, tanpa menutupi
   aurora di belakangnya — karena itu nuansanya tembus cahaya, bukan
   warna solid. */
.section-alt { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold-btn); color: var(--on-gold);
  padding: 0.75rem 1rem; border-radius: 0 0 0.5rem 0;
  font-weight: 600; z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   4. Header
------------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px;
  margin-right: auto; text-decoration: none;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.brand img { width: 30px; height: 30px; border-radius: 0.4rem; }
.site-nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--muted); font-size: 0.92rem; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

/* Tanpa tombol CTA lagi di header (situs publik tidak butuh ajakan
   masuk) — nav cukup didorong ke kanan oleh margin-right:auto milik
   .brand. */
@media (min-width: 860px) {
  .site-nav { order: 2; flex-basis: auto; }
}

/* ---------------------------------------------------------------------
   5. Tombol
------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.65rem 1.15rem;
  border-radius: 0.7rem; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--gold-btn); color: var(--on-gold);
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--gold-btn) 60%, transparent);
}
.btn-primary:hover { background: var(--gold-strong); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--faint); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ---------------------------------------------------------------------
   6. Hero
------------------------------------------------------------------------ */
/* Hero duduk di .shell yang sama persis dengan setiap bagian lain di
   bawahnya (hero-inner tidak lagi menimpa max-width shell dengan
   nilainya sendiri) — satu garis tepi kiri berjalan dari judul sampai
   footer. Padding atas/bawahnya juga sengaja lebih ringkas: empat
   kartu fakta tepat di bawahnya adalah jawaban langsung atas judul,
   bukan topik baru, jadi jaraknya lebih dekat daripada jarak
   antar-bagian yang tak berkaitan (var(--space-section)). */
.hero { padding-block: clamp(1.75rem, 1.3rem + 2vw, 3rem); }
.hero + .section { padding-top: 0; }
.hero-copy { min-width: 0; max-width: 40rem; position: relative; z-index: 1; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.9em;
}
.hero h1 { margin-bottom: 0.45em; }
.lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--muted); max-width: 40rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Komposisi dua kolom di layar lebar: teks di kiri, elemen visual di
   kanan. Di layar sempit, kolom visual disembunyikan sepenuhnya —
   bukan ditumpuk — supaya beranda tetap ringkas di ponsel. */
.hero-visual { display: none; }

@media (min-width: 1024px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  }
  .hero-visual { display: flex; align-items: center; justify-content: center; }
}

.hero-ring-glow {
  position: relative;
  width: min(22rem, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Glow dibuat asimetris dan dibiarkan bocor ke arah kolom teks (kiri)
   melewati batas grid, supaya cincin dan teks terbaca sebagai satu
   komposisi menyatu, bukan dua panel yang sekadar duduk bersebelahan.
   .hero-copy diberi z-index sendiri di atas supaya teks tetap terbaca
   jernih walau glow-nya melewati batas kolom. */
.hero-ring-glow::before {
  content: "";
  position: absolute;
  top: -18%; bottom: -18%; left: -46%; right: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 45%, transparent) 0%, transparent 72%);
  filter: blur(34px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-ring-glow::before { animation: glow-pulse 9s ease-in-out infinite; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}
.hero-ring-logo {
  position: relative;
  width: 60%; height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

/* ---------------------------------------------------------------------
   7. Grid & kartu
------------------------------------------------------------------------ */
.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.contact-grid { margin-top: 1.25rem; }

.fact-card, .card {
  background: linear-gradient(168deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fact-card p:last-child, .card p:last-child { margin-bottom: 0; }
.fact-card p:last-child { color: var(--ink); font-size: 0.95rem; }
.card-heading { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5em; color: var(--ink); }
.card-note { font-size: 0.88rem; color: var(--muted); margin-top: 0.75em; }

/* Empat kartu fakta: aksen emas di tepi atas, tinggi seragam, dan
   sedikit terangkat saat hover supaya barisnya terasa disengaja. */
.fact-card {
  min-height: clamp(9rem, 7.5rem + 5vw, 10.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fact-card::before {
  content: "";
  position: absolute; top: 0; left: 1.1rem; right: 1.1rem; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.fact-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.6);
  border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .fact-card:hover, .card:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   7b. Showcase produk & panel demo
------------------------------------------------------------------------ */
/* Baris pertama: satu tangkapan layar desktop (lanskap), sendirian,
   selebar mungkin — lanskap dan potret tidak pernah dipasangkan di
   lebar yang sama lagi. Baris kedua: tiga tangkapan layar ponsel di
   dalam bingkai perangkat CSS murni (lihat "Bingkai perangkat" di
   bawah), dipaksa ke rasio 393:852 yang sama persis dengan berkas
   aslinya (iPhone 15 Pro, ukuran logis) lewat aspect-ratio, sehingga
   tak pernah memotong gambar dan ketiganya selalu selebar dan
   setinggi satu sama lain, tepi atas sejajar. */
.showcase-row-desktop {
  display: flex; justify-content: center;
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.showcase-figure-desktop { width: 100%; max-width: 56rem; }

.showcase-pair-mobile {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}
.showcase-figure-mobile { flex: 0 1 15rem; max-width: 15rem; }

.showcase-figure { margin: 0; }
.showcase-figure figcaption {
  margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); max-width: 32rem;
}
@media (max-width: 700px) {
  .showcase-pair-mobile { gap: 1.25rem; }
  .showcase-figure-mobile { flex: 0 1 11rem; max-width: 11rem; }
}
@media (max-width: 420px) {
  .showcase-figure-mobile { flex: 0 1 9rem; max-width: 9rem; }
}

/* ---------------------------------------------------------------------
   7c. Bingkai perangkat — CSS murni, tanpa gambar tambahan, tanpa
   javascript. Dua gaya: bingkai ponsel (dynamic island + home
   indicator) untuk tiga tangkapan layar potret, dan bingkai
   peramban (title bar tiga titik) untuk tangkapan layar desktop.
------------------------------------------------------------------------ */

/* Bingkai peramban: judul palsu tiga titik di atas, lalu tangkapan
   layar apa adanya di bawahnya — cukup untuk membaca sebagai "jendela
   di layar", tanpa berpura-pura jadi Chrome atau Safari sungguhan. */
.browser-frame {
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--card);
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.65),
    0 0 42px -12px color-mix(in srgb, var(--gold) 40%, transparent);
}
.browser-titlebar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(180deg, var(--card-2), var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; display: block; }
.browser-dot-red { background: #ec6a5e; }
.browser-dot-yellow { background: #f5bd4e; }
.browser-dot-green { background: #61c454; }
.browser-frame img { width: 100%; height: auto; display: block; }

/* Bingkai ponsel: bezel ~12px dengan gradasi gelap dan tepi terang
   tipis (supaya terbaca sebagai logam, bukan cuma garis pinggir
   datar), sudut ~48px, lalu layar di dalamnya dikliping ke radius
   sedikit lebih kecil (48px - 12px padding = 36px) supaya sudut
   tangkapan layar mengikuti sudut bingkai. Rasio dikunci persis ke
   ukuran asli berkas (393x852) lewat aspect-ratio, jadi tidak pernah
   memotong gambar (object-fit: cover di sini murni jaring pengaman
   untuk pembulatan sub-piksel, bukan untuk memotong komposisi). */
.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 852;
  padding: 12px;
  border-radius: 48px;
  background: linear-gradient(155deg, #4a4244 0%, #1a1516 45%, #050404 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.55),
    0 30px 60px -25px rgba(0, 0, 0, 0.65),
    0 0 42px -12px color-mix(in srgb, var(--gold) 32%, transparent);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
}
.phone-screen img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
}
/* Dynamic Island: melayang di atas tangkapan layar (pseudo-element
   absolute selalu tergambar di atas <img> yang statis, tak peduli
   urutan sumber), bukan mendorong kontennya turun. Ukurannya relatif
   terhadap rasio 393x852 (≈120x32px pada lebar tampil penuh) supaya
   proporsinya tetap benar di ukuran tampil berapa pun. */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 1.2%; left: 50%; transform: translateX(-50%);
  width: 30.5%; height: 3.8%;
  background: #000;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Home indicator: garis tipis dan pudar di bawah. */
.phone-screen::after {
  content: "";
  position: absolute;
  bottom: 1%; left: 50%; transform: translateX(-50%);
  width: 33%; height: 0.6%;
  background: rgba(240, 233, 230, 0.5);
  border-radius: 999px;
}

/* Panel demo: sekarang aktif dan sungguhan — bukan lagi placeholder.
   Aksen emas solid (bukan garis putus-putus) menandakan tautan ini
   bisa diklik sekarang juga. */
.demo-panel {
  margin-top: 1.5rem; padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 5%, var(--card));
}
.demo-panel .check-list { margin: 0.9rem 0 1.4rem; max-width: 34rem; }

/* ---------------------------------------------------------------------
   8. Callout (peran bot — bagian paling penting di halaman)
------------------------------------------------------------------------ */
.callout {
  border: 1px solid var(--rose-border); border-left-width: 4px;
  background: var(--rose-soft); border-radius: var(--radius-sm);
  padding: 1.25rem 1.4rem;
}
.callout-title {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose);
  margin-bottom: 0.6em;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   9. Langkah bernomor
------------------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; gap: 1.15rem; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; }
.step-no {
  flex-shrink: 0; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--gold-btn); color: var(--on-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1rem;
}
.step-title { font-weight: 600; color: var(--ink); margin-bottom: 0.2em; }
.steps p:last-child { margin-bottom: 0; color: var(--muted); }

/* ---------------------------------------------------------------------
   10. Daftar bisa / tidak bisa
------------------------------------------------------------------------ */
.check-list li, .x-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6em; color: var(--ink); }
.check-list li::before, .x-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.check-list li::before { content: "\2713"; color: var(--success); }
.x-list li::before { content: "\2715"; color: var(--danger); }

/* ---------------------------------------------------------------------
   11. Bagian penekanan (pemisahan kewenangan)
------------------------------------------------------------------------ */
/* Bagian paling meyakinkan di halaman ini untuk reviewer risiko:
   diberi treatment sendiri — garis emas tipis di atas dan bawah,
   ikon kontrol, dan kesimpulan ditonjolkan dalam kotak bertepi emas. */
.section-emphasis {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-block: 1px solid var(--border);
  position: relative;
}
.section-emphasis::before, .section-emphasis::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-emphasis::before { top: -1px; }
.section-emphasis::after { bottom: -1px; }

.control-heading { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6em; }
.control-heading h2 { margin: 0; }
.control-icon { flex-shrink: 0; color: var(--gold); }

.control-grid { margin: 1.5rem 0; }
.control-card {
  border-left: 3px solid var(--gold);
  background: linear-gradient(168deg, color-mix(in srgb, var(--gold) 6%, var(--card)), var(--card-2));
}
.control-conclusion {
  font-size: 1.02rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 9%, var(--card));
}
.control-conclusion:last-child { margin-bottom: 0; }
.control-conclusion strong { color: var(--gold-strong); }

/* ---------------------------------------------------------------------
   12. Daftar definisi (angka, data yang disimpan)
------------------------------------------------------------------------ */
.deflist { border-top: 1px solid var(--border); margin: 0; }
.deflist-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--border); margin: 0; }
.deflist-row dt { font-size: 0.82rem; color: var(--muted); margin: 0; }
.deflist-row dd { margin: 0; font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 560px) {
  .deflist-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
  .deflist-row dd { text-align: right; }
}
.deflist-wide .deflist-row { flex-direction: column !important; }
.deflist-wide .deflist-row dt { font-family: var(--font-serif); font-size: 1rem; color: var(--ink); font-weight: 600; }
.deflist-wide .deflist-row dd { text-align: left !important; font-family: var(--font-sans); font-size: 0.95rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   13. FAQ (details/summary — tanpa javascript)
------------------------------------------------------------------------ */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); padding: 0 1.2rem; }
.faq-item summary {
  cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: 1rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------------
   13b. Pernyataan singkat ("tidak ada yang dijual, tidak ada yang
   diteruskan") — satu judul, satu paragraf pendek. Sengaja diberi
   padding lebih ringkas daripada var(--space-section): bagian ini
   genuinely pendek, jadi tingginya mengikuti, bukan dipaksa setinggi
   bagian-bagian yang berisi banyak teks. Di desktop, teks berbagi
   baris dengan tanda centang dekoratif di sebelah kanan (motif yang
   sama dengan .control-icon) supaya sisi kanan yang lapang terbaca
   sebagai komposisi dua kolom yang disengaja, bukan ruang kosong yang
   kelupaan diisi.
------------------------------------------------------------------------ */
.section-statement { padding-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.statement-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.statement-mark {
  display: none;
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
}
@media (min-width: 860px) {
  .statement-grid { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
  .statement-mark { display: block; }
}

/* ---------------------------------------------------------------------
   14. CTA penutup & hero halaman dalam
------------------------------------------------------------------------ */
/* .cta-final-inner dulunya membawa max-width + margin-inline:auto
   sendiri di atas .shell — pola "kelas kedua menimpa .shell" yang
   sama persis dengan bug .prose (lihat catatan di bagian 3, Layout):
   kelas kedua mendefinisikan max-width lebih sempit pada elemen yang
   sama dengan .shell, lalu margin-inline:auto memusatkan ulang kotak
   yang sudah menyempit itu — hasilnya blok CTA ini melayang di tengah
   halaman sementara setiap bagian lain tetap di tepi kiri yang sama.
   Diperbaiki dengan cara yang sama seperti .prose: .shell tetap
   memegang max-width dan margin-inline:auto (satu tepi kiri untuk
   seluruh halaman), dan kolom ini hanya mengatur arah susun serta
   perataannya sendiri (flex-start, bukan center) — tanpa lebar atau
   margin sendiri. */
.cta-final-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.cta-final-inner .btn { margin-top: 0.85rem; }

/* Genuinely bagian pendek juga (judul + satu paragraf + satu tombol):
   padding-bawahnya dipersempit supaya tombol tidak terdampar di atas
   kotak yang jauh lebih tinggi daripada isinya. padding-top tetap
   diatur ulang ke 0 oleh .section + .section di bagian 3 seperti
   semua bagian lain — hanya padding-bawah yang berubah di sini. */
.cta-final { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* Sama seperti .hero: jarak ke bagian pertama di bawahnya sengaja
   lebih dekat daripada var(--space-section) (judul halaman dan
   paragraf pertamanya masih satu kesatuan), dan section berikutnya
   tidak menambah padding-top-nya sendiri di atas itu. */
.page-hero { padding-block: clamp(2rem, 1.6rem + 2vw, 3rem) clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.page-hero + .section { padding-top: 0; }
.page-updated { color: var(--faint); font-size: 0.85rem; margin-top: 0.5em; }

/* ---------------------------------------------------------------------
   15. Footer
------------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  /* Tanpa margin-top sendiri: bagian terakhir sebelum footer sudah
     .section, jadi padding-bottom var(--space-section) miliknya
     sendiri sudah memberi satu jarak yang bersih — margin tambahan di
     sini akan menggandakannya, sama seperti bug yang diperbaiki di
     hero. */
}

/* Tiga kolom: identitas proyek, tautan halaman, kontak. Ditumpuk satu
   kolom di ponsel. */
.footer-inner {
  padding-block: 2.75rem 2rem;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 700px) {
  .footer-inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
}

.footer-col-brand { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; width: fit-content; }
.footer-brand img { width: 34px; height: 34px; border-radius: 0.5rem; }
.footer-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.footer-tagline { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 26rem; }

.footer-col-heading {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 0.9em;
}

.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.footer-nav a {
  text-decoration: none; color: var(--muted); font-size: 0.92rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-nav a:hover { color: var(--gold); }

.footer-contact {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 44px; text-decoration: none; color: var(--muted);
  font-size: 0.92rem; overflow-wrap: anywhere;
}
.footer-contact-icon { flex-shrink: 0; color: var(--gold); }
.footer-contact:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-copyright { margin: 0; font-size: 0.82rem; color: var(--faint); }

/* Ikon GitHub inline (bukan hotlink font/CDN) — tanpa teks URL yang
   terlihat, hanya aria-label untuk pembaca layar. */
.footer-github {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.footer-github svg { display: block; }
.footer-github:hover, .footer-github:focus-visible { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }

/* ---------------------------------------------------------------------
   15b. Reveal saat scroll — peningkatan progresif murni. Kalau browser
   tidak mendukung animation-timeline: view(), konten tampil normal
   sejak awal: tidak pernah disembunyikan di luar @supports ini.
   Sengaja HANYA menganimasikan transform, bukan opacity: alat tangkap
   layar "halaman penuh" (termasuk DevTools) merender tanpa scroll
   sungguhan dan bisa membekukan timeline di progres awal — dengan
   opacity itu berarti konten hilang total, dengan transform saja
   konten paling buruk hanya bergeser sedikit, tetap terbaca penuh. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal-up {
      from { transform: translateY(1.75rem); }
    }
    .section h2,
    .fact-card,
    .card,
    .callout,
    .faq-item,
    .showcase-figure {
      animation: reveal-up 0.7s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---------------------------------------------------------------------
   16. Preferensi gerak & cetak
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

@media print {
  .site-header, .skip-link, .hero-actions, .cta-final, .bg-decor, .bg-grain, .footer-github { display: none !important; }
  body, .card, .fact-card, .callout, .faq-item { background: #fff !important; color: #000 !important; }

  /* Cetak/"simpan sebagai PDF" merender seluruh halaman tanpa scroll
     sungguhan, sehingga animation-timeline: view() bisa "membeku" di
     progres awal (0%). Matikan paksa di sini supaya tidak ada konten
     yang pernah tercetak dalam keadaan tersembunyi. */
  .section h2, .fact-card, .card, .callout, .faq-item, .showcase-figure {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}