/* ═══════════════════════════════════════════════════════════════════════════
   SISTEM DESAIN — dibagi oleh /promo (HTML statis) dan /harga (React)

   Nilai di berkas ini diambil terukur dari merlin.computer, bukan dikira-kira:
   root 62.5%, judul 70px dengan letter-spacing -3px dan line-height 1:1, satu
   keluarga huruf (Inter), latar putih dengan pita abu hangat #f4f4f2, pil
   radius penuh, kartu radius 24-32px, dan pemisah garis rambut. Tidak ada
   bayangan tebal di mana pun; kedalaman dibangun dari garis dan jarak.

   Mode gelap bukan bagian dari acuan — itu turunan kita sendiri dengan token
   yang sama persis, supaya toggle tema yang sudah dipakai /promo dan /harga
   tidak perlu dibuang.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root 62.5% membuat 1rem = 10px, jadi angka rem di seluruh berkas ini terbaca
   langsung sebagai piksel. Ini persis trik yang dipakai acuan. */
:root { font-size: 62.5%; }

:root {
  --bg:         #ffffff;
  --band:       #f4f4f2;   /* pita abu hangat yang menyelang-nyeling putih */
  --card:       #ffffff;
  --card-sunk:  #fafafa;

  --ink:        #000000;   /* judul: hitam penuh, bukan abu tua */
  --ink-2:      #6b6b6b;   /* lede dan teks pendukung */
  --ink-3:      #9a9a9a;   /* label, metadata, keterangan gambar */

  --rule:       #e6e6e4;   /* pemisah struktural */
  --rule-soft:  #efefed;   /* pemisah di dalam komponen */

  --pill-bg:    #000000;   /* tombol utama */
  --pill-fg:    #ffffff;
  --pill-hover: #1a1a1a;

  --green:      #22c55e;   /* hanya untuk blok penutup dan aksen tulis tangan */
  --green-deep: #16a34a;
  --green-wash: #eefaf0;   /* latar kartu tiga langkah */
  --dot:        #ef4444;   /* titik kecil di eyebrow */

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  --page-max: 132rem;      /* 1320px, sedikit lebih lebar dari kolom teks acuan */
  --gutter: 2.4rem;

  --r-card: 2.8rem;
  --r-card-lg: 3.2rem;
  --r-pill: 100px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg:         #0a0a0a;
  --band:       #141414;
  --card:       #121212;
  --card-sunk:  #0f0f0f;

  --ink:        #fafafa;
  --ink-2:      #a1a1a1;
  --ink-3:      #737373;

  --rule:       #262626;
  --rule-soft:  #1e1e1e;

  --pill-bg:    #fafafa;
  --pill-fg:    #0a0a0a;
  --pill-hover: #e5e5e5;

  --green:      #34d399;
  --green-deep: #10b981;
  --green-wash: #0f2018;
}

/* ── Dasar ─────────────────────────────────────────────────────────────── */

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

/* Scroll anchoring Chrome diam-diam geser posisi scroll begitu layout di
   atas viewport berubah (mis. gambar telat dimuat) — Firefox dan Safari
   tidak berperilaku sama. GSAP ScrollTrigger membaca posisi scroll manual,
   jadi pergeseran diam-diam ini bikin titik pemicu '.rise' salah hitung
   khusus di Chrome, dan elemen tertahan opacity:0. Rekomendasi resmi GSAP
   untuk ScrollTrigger: matikan scroll anchoring. */
html { overflow-anchor: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.6rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* height:auto wajib. Gambar di halaman ini membawa atribut width/height asli
   (supaya peramban bisa memesan ruang dan tidak ada layout shift), dan tanpa
   height:auto atribut itu menang atas rasio aslinya — hasilnya setiap gambar
   teregang vertikal. */
img { max-width: 100%; height: auto; display: block; }

/* Lenis memegang kendali gulir; scroll-behavior bawaan harus mati atau
   keduanya saling tarik dan gulirnya tersendat. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Pita ──────────────────────────────────────────────────────────────── */

.band { background: var(--band); }
.sec  { padding-block: 12rem; }
.sec-tight { padding-block: 8rem; }

@media (max-width: 768px) {
  .sec { padding-block: 7.2rem; }
  .sec-tight { padding-block: 5.6rem; }
}

/* ── Tipografi ─────────────────────────────────────────────────────────── */

/* Judul hero: 70px / weight 400 / -3px / line-height 1. Weight 400 pada ukuran
   sebesar ini yang membuatnya terbaca tenang, bukan berteriak — itu inti gaya
   acuan dan gampang salah kalau dinaikkan ke 600. */
.h-hero {
  font-size: clamp(3.6rem, 6.2vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.043em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.h-sec {
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

.h-sub {
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.lede {
  font-size: 1.7rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 1.6rem 0 0;
  max-width: 58ch;
}

.lede-center { margin-inline: auto; text-align: center; }

.muted { color: var(--ink-2); }
.small { font-size: 1.4rem; }
.tiny  { font-size: 1.3rem; color: var(--ink-3); }

/* Logo yang disisipkan di tengah kalimat judul. Ukurannya ikut ukuran huruf
   induk supaya tetap sejajar saat judul mengecil di ponsel. Yang dipakai
   logo-mark.svg (tiga batang tanpa kotak hitam), jadi latarnya ikut warna
   halaman di mode terang maupun gelap. */
.h-chip {
  display: inline-block;
  vertical-align: -0.1em;
  width: 0.78em;
  height: 0.9em;
  object-fit: contain;
  margin-inline: 0.14em;
}

/* Catatan: potongan foto yang disisipkan di tengah kalimat sengaja tidak
   dipakai lagi. Di acuan, gambar sekecil itu punya gerakan yang dikendalikan
   gulir; versi kita hanya menutupi baris kedua judul dan tidak menambah apa
   pun, jadi dibuang seluruhnya alih-alih dipaksakan. */

/* ── Eyebrow ───────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  color: var(--ink-2);
  margin: 0 0 2.4rem;
}
.eyebrow::before {
  content: '';
  width: 0.7rem; height: 0.7rem;
  border-radius: 100px;
  background: var(--dot);
  flex: none;
}

/* Varian tagline: logo menggantikan titik, teks masuk dengan transisi warna
   merah ke hijau alih-alih fade polos. */
.eyebrow-tag::before { display: none; }
.eyebrow-tag { font-size: 1.5rem; font-weight: 500; }
.eyebrow-logo { width: 1.6rem; height: 1.6rem; flex: none; }

/* Tagline sampul memakai aksen tulis-tangan yang sama dengan .hand,
   tapi tanpa rotate/nowrap-nya supaya rapi sejajar dengan logo di eyebrow. */
.eyebrow-tag-hand { font-family: var(--font-hand); font-size: 2.1rem; font-weight: 500; }
.eyebrow-tag .id, .eyebrow-tag .en {
  animation: tag-flash 1.8s ease forwards;
  animation-delay: 0.2s;
}
@keyframes tag-flash {
  0%   { opacity: 0; color: var(--dot); }
  30%  { opacity: 1; color: var(--dot); }
  100% { opacity: 1; color: var(--green-deep); }
}

/* ── Tombol ────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.4rem 2.4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.pill:hover { background: var(--pill-hover); transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

.pill-green { background: var(--green); color: #fff; }
.pill-green:hover { background: var(--green-deep); }

.pill-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.pill-ghost:hover { background: var(--band); }

.pill-sm { padding: 0.9rem 1.6rem; font-size: 1.4rem; }

/* ── Aksen tulis tangan ────────────────────────────────────────────────── */

.hand {
  font-family: var(--font-hand);
  font-size: 2.2rem;
  color: var(--green);
  transform: rotate(-4deg);
  display: inline-block;
  white-space: nowrap;
}
.hand-arrow { color: var(--green); width: 4.8rem; height: auto; }

/* ── Garis rambut & baris angka ────────────────────────────────────────── */

.rule-row {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  color: var(--ink-3);
  font-size: 1.3rem;
}
.rule-row::before, .rule-row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.8rem 6.4rem;
  margin-top: 3.2rem;
}
.stat-n {
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-l { font-size: 1.3rem; color: var(--ink-3); margin-top: 0.8rem; }

/* ── Kartu ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 3.2rem;
}
.card-lg { border-radius: var(--r-card-lg); padding: 4rem; }
.card-plain { border: 0; background: var(--card-sunk); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Perangkat: bingkai generate + layar screenshot asli ───────────────── */

/* Aturan yang mengunci syarat "screenshot tidak boleh berubah": foto perangkat
   selalu digenerate dengan layar kosong, lalu screenshot Laksa asli ditempel ke
   layarnya oleh scratch/bake-shots.mjs saat menyiapkan aset. Piksel screenshot
   tidak pernah lewat model gambar.

   Penempelan sengaja dilakukan di berkas gambarnya, bukan lewat lapisan CSS
   berposisi persen: kotak layar pada foto tidak pernah persis serasio dengan
   screenshot, dan tepi yang dihitung ulang tiap kali lebar halaman berubah
   selalu berakhir meleset sepersekian piksel ke bezel. Kalau asetnya diganti,
   ukur ulang kotaknya lalu jalankan lagi skrip itu. */
.plate { position: relative; display: block; }
.plate > img.bg { width: 100%; border-radius: var(--r-card); }

/* ── Banding dua kolom ─────────────────────────────────────────────────── */

.cmp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
@media (max-width: 800px) { .cmp { grid-template-columns: 1fr; } }

.cmp-col {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cmp-head {
  padding: 2.4rem;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--band);
  border-bottom: 1px solid var(--rule);
}
.cmp-item {
  display: flex;
  gap: 1.4rem;
  padding: 2rem 2.4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}
.cmp-item:last-child { border-bottom: 0; }
.cmp-ico { flex: none; width: 1.8rem; height: 1.8rem; margin-top: 0.2rem; }
.cmp-yes .cmp-ico { color: var(--ink); }
.cmp-no  { color: var(--ink-2); }
.cmp-no .cmp-ico { color: var(--ink-3); }

/* ── Akordion ──────────────────────────────────────────────────────────── */

.acc { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.8rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.acc-plus {
  flex: none;
  width: 1.8rem; height: 1.8rem;
  position: relative;
  transition: transform .35s var(--ease);
}
.acc-plus::before, .acc-plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--ink);
}
.acc-plus::after { transform: rotate(90deg); }
.acc-item.open .acc-plus { transform: rotate(135deg); }

.acc-body {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .4s var(--ease), opacity .3s var(--ease);
}
.acc-item.open .acc-body { opacity: 1; }
.acc-body > div { padding: 0 0 2.8rem 3.8rem; color: var(--ink-2); max-width: 78ch; }

/* ── Navbar pil melayang ───────────────────────────────────────────────── */

.floatnav {
  position: fixed;
  left: 50%;
  bottom: 2.4rem;
  transform: translate(-50%, 2rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem 0.7rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(38, 38, 38, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.floatnav.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.floatnav a, .floatnav button {
  color: #d4d4d4;
  font-size: 1.4rem;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font);
  transition: color .2s var(--ease);
}
.floatnav a:hover, .floatnav button:hover { color: #fff; }
.floatnav .fn-logo {
  width: 2.8rem; height: 2.8rem;
  margin-inline: 0.6rem 0.2rem;
  flex: none;
}
.floatnav .fn-cta {
  background: #fff;
  color: #0a0a0a;
  font-weight: 500;
  padding: 0.8rem 1.6rem;
  white-space: nowrap;
}
.floatnav .fn-cta:hover { color: #0a0a0a; background: #e5e5e5; }

@media (max-width: 560px) {
  .floatnav { gap: 0.2rem; padding: 0.6rem; }
  .floatnav a { padding: 0.6rem 0.9rem; font-size: 1.3rem; }
}

/* Di layar sempit, tiga tautan tengah (Fitur/Galeri/Harga) bikin pil jadi
   sesak dan "Coba gratis" kepaksa pecah dua baris — bukannya ramping malah
   berantakan. Ringkas jadi cuma logo + tombol utama, seperti navbar mobile
   web pada umumnya; tautan lengkap tetap ada di footer. */
@media (max-width: 420px) {
  .floatnav a:not(.fn-cta) { display: none; }
  .floatnav { gap: 0.6rem; padding: 0.5rem 0.5rem 0.5rem 0.9rem; }
  .floatnav .fn-logo { margin-inline: 0; }
  .floatnav .fn-cta { padding: 0.8rem 1.5rem; font-size: 1.4rem; }
}

/* Widget chat (lx-chat, disuntik chat-widget.js) fixed di bottom:20px
   kanan bawah — sebaris persis dengan floatnav yang juga fixed di dasar
   layar, jadi dempet di layar mobile. Naikkan bubble-nya di atas floatnav
   supaya ada jarak. !important perlu karena <style> milik widget disuntik
   belakangan (script defer di akhir body), jadi menang urutan cascade atas
   selector .lx-chat yang sama spesifisitasnya kalau tidak dipaksa. */
@media (max-width: 900px) {
  .lx-chat { bottom: 8.8rem !important; }
}

/* ── Blok tiga langkah, kartu gradasi hijau ────────────────────────────── */

.steps {
  border-radius: var(--r-card-lg);
  background: linear-gradient(180deg, var(--bg) 0%, var(--green-wash) 100%);
  padding: 6.4rem 4rem;
  text-align: center;
}
.step-n {
  width: 4rem; height: 4rem;
  border-radius: 100px;
  background: #262626;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}
[data-theme="dark"] .step-n { background: #fafafa; color: #0a0a0a; }

/* ── Wordmark kaki halaman ─────────────────────────────────────────────── */

.wordmark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 2.8rem);
}
.wordmark-logo {
  width: clamp(6rem, 16vw, 19rem);
  height: clamp(6rem, 16vw, 19rem);
  flex: none;
}
.wordmark {
  font-size: clamp(8rem, 22vw, 26rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.82;
  color: var(--ink);
  text-align: center;
  margin: 0;
  user-select: none;
}

/* ── Blur gradasi pelangi hero ─────────────────────────────────────────── */

.aurora {
  position: absolute;
  inset: -24rem 0 auto;
  height: 42rem;
  pointer-events: none;
  z-index: 0;
  /* Acuan memakai gradasi yang nyaris tidak terlihat sebagai warna, hanya
     terasa sebagai kehangatan di puncak halaman. Nilai lebih tinggi dari ini
     membuat teks hero terbaca di atas latar berwarna, dan itu bukan efek yang
     dipakai acuan. */
  opacity: 0.5;
  filter: blur(80px);
  background:
    radial-gradient(38% 60% at 12% 42%, rgba(255,138,76,.55), transparent 70%),
    radial-gradient(34% 58% at 33% 34%, rgba(255,214,102,.55), transparent 70%),
    radial-gradient(34% 58% at 54% 40%, rgba(120,214,160,.50), transparent 70%),
    radial-gradient(34% 58% at 74% 34%, rgba(120,180,255,.50), transparent 70%),
    radial-gradient(38% 60% at 92% 44%, rgba(196,150,255,.50), transparent 70%);
}
[data-theme="dark"] .aurora { opacity: 0.42; }

/* ── Animasi masuk ─────────────────────────────────────────────────────── */

/* GSAP yang menjalankan, CSS yang menyembunyikan dulu. Kalau JavaScript gagal
   dimuat, aturan .no-js di bawah mengembalikan semuanya jadi terlihat — halaman
   tidak boleh kosong hanya karena satu berkas CDN gagal. */
.rise { opacity: 0; transform: translateY(2.4rem); }
.word { display: inline-block; }
html.no-motion .rise, html.no-js .rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Dialog persetujuan cookie ─────────────────────────────────────────── */

.cookie {
  position: fixed;
  left: 2.4rem;
  bottom: 2.4rem;
  z-index: 80;
  width: min(42rem, calc(100vw - 4.8rem));
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 2.4rem;
  box-shadow: 0 1.2rem 4rem rgba(0,0,0,.10);
  transform: translateY(1.6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie.on { opacity: 1; transform: none; pointer-events: auto; }
.cookie h3 { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.cookie p { font-size: 1.4rem; color: var(--ink-2); margin: 0 0 2rem; line-height: 1.5; }
.cookie-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cookie-prefs { display: none; border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 2rem; }
.cookie.prefs-open .cookie-prefs { display: block; }
.cookie-pref {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cookie-pref:last-of-type { border-bottom: 0; }
.cookie-pref b { display: block; font-size: 1.4rem; font-weight: 500; }
.cookie-pref span { font-size: 1.3rem; color: var(--ink-3); }
.cookie-pref input { margin-top: 0.4rem; accent-color: var(--green); width: 1.6rem; height: 1.6rem; }

@media (max-width: 560px) {
  .cookie { left: 1.6rem; right: 1.6rem; bottom: 1.6rem; width: auto; padding: 2rem; }
  /* Banner cookie dan navbar pil tidak boleh saling menimpa di layar
     sempit — tapi kalau navbar pindah ke atas, jangan sampai malah
     menimpa sakelar bahasa/tema di .topbar (juga top:1.6rem). Diberi
     jarak di bawahnya. Butuh `.cookie` mendahului `.floatnav` di DOM
     supaya combinator `~` ini cocok (lihat promo.html). */
  .cookie.on ~ .floatnav.on { bottom: auto; top: 6.4rem; }
}