/* Tepuk — stylesheet landing page v2 (eksperimen).

   Dipasangkan dengan landing-baru.php, bukan menggantikan landing.css. Bentuk
   halamannya mengikuti template Dusk: satu jenis huruf, huruf judul besar,
   bidang warna gelap di pembuka, pil kaca untuk navigasi, dan dua kartu putih
   kecil yang mengambang sebagai tekstur. Urutan bagiannya mengikuti
   provecho.my.id.

   Yang tidak ikut dari referensi: warna biru. Biru di halaman ulasan Google
   langsung terbaca "ini punya Google" — hijau tua sudah dipilih justru untuk
   menghindari itu. Dan tidak ada testimoni bernama: halaman ini menjual barang
   yang bisa dicoba sendiri, jadi buktinya pun barangnya.

   Semua aturan berawalan .v2 (atau body.v2) supaya tidak bocor ke halaman
   lain. app.css tetap dimuat karena .card-sq lahir di sana. */

@font-face {
  font-family: 'Tepuk Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* Satu palet dengan app.css: putih, tinta hampir hitam, biru primary.
     Dulu halaman ini krem + hijau hutan karena sengaja dijauhkan dari biru
     (biru di halaman ulasan Google mudah terbaca "ini punya Google"). Pemilik
     memilih token biru ini untuk seluruh produk, jadi seluruh produk ikut. */
  --v2-bg: #ffffff;
  --v2-card: #ffffff;
  --v2-ink: #0a0a0a;
  --v2-ink-2: #52525b;
  --v2-ink-3: #6b6b73;
  --v2-line: #dadee4;
  --v2-line-2: #e8ebef;

  --v2-accent: #1447e6;
  --v2-accent-2: #1039c4;
  --v2-accent-ink: #fafafa;
  --v2-accent-soft: rgba(20, 71, 230, .08);

  /* Bidang gelap pembuka dan penutup. Bukan hitam: biru malam, supaya masih
     satu keluarga dengan aksen dan tidak terasa seperti bagian dari merek lain. */
  --v2-deep-1: #060d24;
  --v2-deep-2: #0b1840;
  --v2-deep-3: #10275e;

  --v2-sans: 'Tepuk Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --v2-max: 1060px;
  --v2-r: 18px;
  --v2-r-lg: 26px;
}

html { background: var(--v2-bg); }

body.v2 {
  margin: 0;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-family: var(--v2-sans);
  font-size: 16px;
  line-height: 1.6;
  /* Plus Jakarta Sans punya spasi kata sangat sempit; tanpa ini "1 kartu"
     terbaca "1kartu". */
  word-spacing: .05em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.v2, .v2 * { box-sizing: border-box; }

.v2 h1, .v2 h2, .v2 h3 {
  margin: 0;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.08;
}
/* Reset jarak paragraf lewat :where() supaya bobotnya 0,0,0. Dulu ditulis
   `.v2 p` (0,1,1) dan itu MENGALAHKAN `.v2-lede`, `.v2-sub`, `.v2-kicker`,
   dan `.v2-price-note` (semuanya 0,1,0): setiap margin-top di sana mati, jadi
   paragraf pembuka menempel ke judul dan `margin: auto` yang seharusnya
   memusatkan teks tidak pernah jalan. */
.v2 :where(p) { margin: 0; }

/* app.css mewarnai semua tautan hijau dan memberi garis bawah saat hover.
   Di sini tautan adalah pil dan kartu, jadi warnanya ikut induknya.

   :where() dipakai supaya bobot aturan ini tetap 0,1,0. Dengan `.v2 a` biasa
   (0,1,1) aturan ini MENANG atas `.v2-pill-solid` (0,1,0) — dan itu yang
   membuat label tombol putih menghilang di atas pil putih. Persis jebakan
   yang dulu kejadian di landing.css. */
.v2 :where(a) { color: inherit; text-decoration: none; }
.v2 a:hover { text-decoration: none; }

.v2 :focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.v2-skip { position: absolute; left: -9999px; }
.v2-skip:focus {
  left: 12px; top: 12px; z-index: 90;
  padding: 11px 18px; border-radius: 999px;
  background: var(--v2-ink); color: #ffffff; font-weight: 650;
}

.v2-wrap {
  width: 100%;
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: 0 22px;
}

/* ------------------------------------------------------------------- pil */
/* Semua tombol berbentuk pil penuh. Ukuran kecil 44 px, bukan 40: target
   sentuh minimum yang dipakai di seluruh proyek. */
.v2-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.v2-pill-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.v2-pill:hover { transform: translateY(-1px); }
.v2-pill:active { transform: translateY(0); }

.v2-pill-solid {
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 8px 24px -12px rgba(6, 13, 36, .55);
}
.v2-pill-solid:hover { background: #f4f4f5; }

.v2-pill-glass {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.v2-pill-glass:hover { background: rgba(255, 255, 255, .2); }

/* Hijau tua untuk tombol di atas latar terang. */
.v2-pill-quiet {
  background: transparent;
  border-color: rgba(20, 71, 230, .28);
  color: var(--v2-accent);
}
.v2-pill-quiet:hover { background: rgba(20, 71, 230, .06); }

.v2-pill-light { background: #ffffff; color: #0a0a0a; }
.v2-pill-off {
  background: rgba(10, 10, 10, .06);
  border-color: var(--v2-line);
  color: var(--v2-ink-3);
  cursor: default;
  /* Ini label status, bukan ajakan klik, dan teksnya bisa panjang ("Nomor
     WhatsApp belum diisi"). nowrap bawaan .v2-pill membuatnya 280 px di
     layar 320 px, jadi halaman bisa digeser ke samping. */
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.v2-pill-off:hover { transform: none; }

/* ------------------------------------------------------------- kepala */
/* Pil navigasi mengambang, mengikuti Dusk. Di atas bidang gelap ia kaca; di
   atas kertas ia jadi putih dengan bayangan tipis — kalau tetap kaca, teks
   putihnya hilang. */
.v2-top {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0 16px;
  pointer-events: none;
}
.v2-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  transition: background-color .22s ease, border-color .22s ease,
              color .22s ease, box-shadow .22s ease;
}
.v2-top[data-stuck="1"] .v2-bar {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(10, 10, 10, .08);
  color: var(--v2-ink);
  box-shadow: 0 14px 34px -22px rgba(6, 13, 36, .45);
}
.v2-top[data-stuck="1"] .v2-pill-solid {
  background: var(--v2-accent);
  color: #ffffff;
  box-shadow: none;
}
.v2-top[data-stuck="1"] .v2-pill-solid:hover { background: var(--v2-accent-2); }

.v2-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.03em;
  min-height: 44px;
}
.v2-mark i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-soft);
}

/* Logo unggahan pemilik toko menggantikan titik biru. Datanya data URI dari
   tabel settings, jadi tidak ada permintaan jaringan tambahan dan tidak ada
   berkas di folder publik yang bisa ditimpa orang lain. */
.v2-mark-logo {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, .1);
}

.v2-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.v2-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 550;
  color: inherit;
  opacity: .82;
  transition: background-color .16s ease, opacity .16s ease;
}
.v2-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.v2-top[data-stuck="1"] .v2-nav a:hover { background: rgba(10, 10, 10, .06); }

.v2-bar-cta { min-height: 44px; padding: 0 20px; font-size: 14.5px; }

/* Menu lipat: disembunyikan di layar lebar, muncul di bawah 940 px. */
.v2-menu { display: none; position: relative; }
.v2-menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
}
.v2-menu summary::-webkit-details-marker { display: none; }
.v2-menu summary span,
.v2-menu summary span::before,
.v2-menu summary span::after {
  display: block;
  width: 17px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.v2-menu summary span { position: relative; }
.v2-menu summary span::before { position: absolute; top: -5.5px; }
.v2-menu summary span::after  { position: absolute; top: 5.5px; }
.v2-menu[open] summary span { background: transparent; }
.v2-menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.v2-menu[open] summary span::after  { top: 0; transform: rotate(-45deg); }

.v2-menu-panel {
  position: absolute;
  top: 52px;
  right: 0;
  min-width: 208px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--v2-line);
  box-shadow: 0 26px 50px -24px rgba(6, 13, 36, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.v2-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2-menu-panel a:hover { background: rgba(20, 71, 230, .07); }

/* ------------------------------------------------------------- pembuka */
.v2-field {
  position: relative;
  overflow: hidden;
  padding-top: 104px;
  padding-bottom: 74px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(80, 133, 251, .22) 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(80, 133, 251, .14) 0%, transparent 62%),
    linear-gradient(168deg, var(--v2-deep-1) 0%, var(--v2-deep-2) 48%, var(--v2-deep-3) 100%);
  color: #ffffff;
  border-radius: 0 0 34px 34px;
}

.v2-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.v2-glow-a {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(80, 133, 251, .34), transparent 68%);
}
.v2-glow-b {
  width: 460px; height: 460px;
  bottom: -220px; right: -100px;
  background: radial-gradient(circle, rgba(120, 200, 255, .12), transparent 70%);
}

/* Butir halus: bidang gradasi besar tanpa tekstur terlihat seperti gambar
   yang dipotong, bukan permukaan. */
.v2-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 4px 4px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 80%);
}

.v2-hero-in {
  position: relative;
  text-align: center;
}

.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.v2-h1 {
  margin: 26px auto 0;
  max-width: 100%;
  font-size: clamp(33px, 7.4vw, 86px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.045em;
  color: #ffffff;
  /* Dua baris, masing-masing satu blok. Tanpa balance baris kedua pecah
     sendiri dan menyisakan satu kata menggantung di baris ketiga. */
  text-wrap: balance;
}
.v2-h1 span { display: block; }

.v2-lede {
  max-width: 44ch;
  margin: 24px auto 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  text-wrap: pretty;
}

.v2-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.v2-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 550;
  color: rgba(255, 255, 255, .78);
}
.v2-trust li { display: flex; align-items: center; gap: 8px; }
.v2-trust li::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  background: rgba(80, 133, 251, .26);
  box-shadow: inset 0 0 0 1px rgba(80, 133, 251, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235085fb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------- panggung kartu */
.v2-stage {
  position: relative;
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.v2-stage-in {
  position: relative;
  width: 100%;
  max-width: 360px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45));
}

/* Kartu memakai markup .card-sq dari app.css — satu sumber dengan lembar
   cetak. Ukurannya sengaja tidak dilebih-lebihkan: 380 px di layar kira-kira
   100 mm, jadi yang dilihat di sini memang sebesar benda aslinya. */
.v2-stage .card-sq,
.v2-card-hold .card-sq {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 3.4mm;
}

/* Isi kartu di app.css dipaku di mm dan pt karena aslinya benda cetak 100 mm.
   Begitu kartunya menyusut mengikuti layar (360 px di desktop, 330 px di HP),
   isinya tidak ikut menyusut: pada 330 px panelnya meluber 16 px dan baris
   merek di bawah terpotong tepi kartu. Di sini seluruh ukuran kartu dijadikan
   relatif terhadap lebar kartu (1cqw = 1% lebar = 1 mm saat kartunya 100 mm),
   jadi pada ukuran cetak hasilnya sama persis dan di layar kecil semuanya
   mengecil bersama. */
.v2-stage-in,
.v2-card-hold {
  container-type: inline-size;
}
.v2-stage .card-sq,
.v2-card-hold .card-sq { padding: 4.5cqw; }                   /* 4,5 mm */
.v2-stage .cs-panel,
.v2-card-hold .cs-panel {
  font-size: 3.81cqw;                     /* 10.8pt = 3,81 mm */
  border-radius: 4cqw;                    /* 4 mm */
  padding: 3.8cqw 4cqw 3.4cqw;            /* 3,8 / 4 / 3,4 mm */
}
.v2-stage .cs-sep,
.v2-card-hold .cs-sep { margin-bottom: 4cqw; }                /* 4 mm */
.v2-stage .sq-qr canvas,
.v2-stage .sq-qr img,
.v2-card-hold .sq-qr canvas,
.v2-card-hold .sq-qr img {
  width: 26cqw;                           /* 26 mm */
  height: 26cqw;
}

/* Keterangan contoh kartu. Dulu ini pil yang digeser naik menimpa tepi bawah
   kartu, dan tepinya terpotong bingkai gradasi. Sekarang ia baris biasa di
   bawah kartu: tidak ada yang perlu ditumpuk supaya terbaca. */
.v2-stage-cap {
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  color: rgba(255, 255, 255, .66);
  text-align: center;
}

/* ------------------------------------------------------ pita jenis usaha */
.v2-types {
  padding: 46px 0 10px;
}
.v2-kicker {
  margin: 0 0 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--v2-ink-3);
}

.v2-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.v2-track {
  display: flex;
  width: max-content;
  animation: v2-slide 52s linear infinite;
}
.v2-marquee:hover .v2-track { animation-play-state: paused; }

.v2-chips {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
}
.v2-chips li {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--v2-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink-2);
  white-space: nowrap;
}

@keyframes v2-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------- bagian umum */
.v2-sec { padding-top: 86px; padding-bottom: 86px; }

/* Tombol pesan mengarah ke #harga, bukan ke WhatsApp. Gulirannya dibuat halus,
   dan tiap bagian diberi jarak atas supaya judulnya tidak tertutup bar
   navigasi yang mengambang (tinggi bar ± 68 px + jarak 14 px). */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.v2-eyebrow {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--v2-accent);
}

.v2-h2 {
  max-width: 22ch;
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -.038em;
  /* Without this, "Minta ulasan manual, atau pakai kartu." drops a lone
     "kartu." onto its own line at desktop width. Mobile already broke
     cleanly; balance makes both widths agree. */
  text-wrap: balance;
}
.v2-sub {
  max-width: 56ch;
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--v2-ink-2);
}

/* Bagian berlatar putih: memisahkan blok tanpa menambah garis. */
.v2-band {
  background: #ffffff;
  border-top: 1px solid var(--v2-line-2);
  border-bottom: 1px solid var(--v2-line-2);
}

/* ------------------------------------------------------------ tiga langkah */
.v2-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.v2-steps li {
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--v2-r-lg);
  background: #ffffff;
  border: 1px solid var(--v2-line);
}
.v2-num {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(20, 71, 230, .08);
  color: var(--v2-accent);
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.v2-steps h3 {
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.22;
}
.v2-steps p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--v2-ink-2);
}

/* ------------------------------------------------------------ anatomi kartu */
.v2-anat {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.v2-anat-card {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Cahaya latar di belakang kartu. Melebar ke samping dulu (-12%) bikin
   halaman bisa digeser 20 px di HP — gradasinya sudah memudar ke transparan
   sebelum tepi kotak, jadi 0 sudah cukup. */
.v2-anat-card::before {
  content: "";
  position: absolute;
  inset: -8% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 71, 230, .13), transparent 74%);
}
.v2-card-hold {
  position: relative;
  width: 100%;
  /* Di bawah 940 px grid-nya jadi satu kolom, dan tanpa batas ini kartunya
     ikut melebar sampai 724 px — dua kali ukuran aslinya, jadi mustahil
     dibaca sebagai "kartu sebesar kartu nama". 380 px = 100 mm. */
  max-width: 380px;
  filter: drop-shadow(0 26px 40px rgba(6, 13, 36, .18));
}
.v2-anat-copy .v2-h2 { max-width: 18ch; }

.v2-anat-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--v2-line);
}
.v2-anat-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--v2-line);
}
/* The list is the last thing in its column, so a rule under the final item
   reads like a table with an empty row below it. Stop at the last item. */
.v2-anat-list li:last-child { border-bottom: 0; }
.v2-anat-list b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.018em;
}
.v2-anat-list span {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  color: var(--v2-ink-2);
}

/* ------------------------------------------------------------ perbandingan */
.v2-cmp {
  margin-top: 42px;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  background: var(--v2-bg);
}
.v2-cmp-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  border-top: 1px solid var(--v2-line);
}
.v2-cmp-row:first-child { border-top: 0; }
.v2-cmp-row > div {
  padding: 15px 20px;
  font-size: 14.8px;
  line-height: 1.5;
  color: var(--v2-ink-2);
}
.v2-cmp-head { background: rgba(20, 71, 230, .05); }
.v2-cmp-head > div {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--v2-ink);
}
.v2-cmp-row > [role="rowheader"] {
  font-weight: 650;
  color: var(--v2-ink);
}
.v2-cmp-us {
  background: rgba(255, 255, 255, .72);
  color: var(--v2-ink) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------- harga */
.v2-price {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 42px;
  align-items: start;
}
.v2-price-main {
  padding: 34px 32px 32px;
  border-radius: var(--v2-r-lg);
  background: #ffffff;
  border: 1px solid var(--v2-line);
}
.v2-price-side {
  padding: 30px 28px;
  border-radius: var(--v2-r-lg);
  background: rgba(20, 71, 230, .05);
}
.v2-price-lbl {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--v2-ink-3);
}
.v2-price-num {
  margin-top: 8px;
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: 1.06;
}
.v2-price-num small {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--v2-ink-3);
}
.v2-price-note {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v2-ink-2);
}

.v2-inc {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--v2-line-2);
}
.v2-inc li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--v2-line-2);
  font-size: 14.8px;
  line-height: 1.5;
}
.v2-inc svg {
  width: 17px; height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--v2-accent);
}

.v2-price-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.v2-tiers { margin-top: 12px; }
.v2-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(10, 10, 10, .08);
  font-size: 14.5px;
  color: var(--v2-ink-2);
}
.v2-tier b { font-weight: 650; color: var(--v2-ink); }

.v2-promise {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff;
}
.v2-promise svg {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--v2-accent);
}
.v2-promise b { font-size: 14.5px; font-weight: 700; }
.v2-promise p {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-ink-2);
}

/* ------------------------------------------------------------------ FAQ */
.v2-faq {
  margin-top: 34px;
  border-top: 1px solid var(--v2-line);
}
.v2-faq details {
  border-bottom: 1px solid var(--v2-line);
}
.v2-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 16px 0;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -.018em;
  cursor: pointer;
  list-style: none;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  margin-right: 6px;
  border-right: 2px solid var(--v2-ink-3);
  border-bottom: 2px solid var(--v2-ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.v2-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.v2-faq details > p {
  max-width: 68ch;
  padding: 0 40px 20px 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--v2-ink-2);
}

/* --------------------------------------------------------------- penutup */
.v2-end {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: 88px 0 92px;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(110% 90% at 88% 0%, rgba(80, 133, 251, .22) 0%, transparent 60%),
    linear-gradient(172deg, var(--v2-deep-2) 0%, var(--v2-deep-1) 100%);
  color: #ffffff;
  text-align: center;
}
.v2-end-in { position: relative; }
.v2-end h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1.06;
}
.v2-end p {
  margin-top: 16px;
  font-size: 17px;
  color: rgba(255, 255, 255, .78);
}

/* ---------------------------------------------------------------- kaki */
.v2-foot {
  padding: 40px 0 56px;
  background: var(--v2-deep-1);
  color: rgba(255, 255, 255, .66);
}
.v2-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}
.v2-foot-links { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-foot-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}
.v2-foot-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.v2-legal {
  max-width: 76ch;
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .48);
}

/* ------------------------------------------------------------ responsif */
@media (max-width: 940px) {
  .v2-nav { display: none; }
  .v2-menu { display: block; }
  .v2-bar { gap: 4px; padding-right: 4px; }
  .v2-bar-cta { margin-left: auto; }
  .v2-anat { grid-template-columns: 1fr; gap: 40px; }
  .v2-anat-card { order: 2; }
  .v2-anat-copy { order: 1; }
  .v2-anat-copy .v2-h2 { max-width: 22ch; }
  .v2-price { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .v2-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .v2-sec { padding-top: 64px; padding-bottom: 64px; }

  /* Tabel perbandingan jadi daftar bertumpuk: tiga kolom di 390 px memaksa
     tiap sel jadi dua kata per baris. Label kolom dibawa tiap sel lewat
     data-h supaya tidak ada angka yang kehilangan konteks. */
  .v2-cmp { border: 0; background: transparent; border-radius: 0; }
  .v2-cmp-head { display: none; }
  .v2-cmp-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
    border-top: 1px solid var(--v2-line);
  }
  .v2-cmp-row > div { padding: 0; font-size: 15px; }
  .v2-cmp-row > [role="cell"] {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 10px;
    align-items: baseline;
  }
  .v2-cmp-row > [role="cell"]::before {
    content: attr(data-h);
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--v2-ink-3);
  }
  .v2-cmp-us { background: transparent; }
}

@media (max-width: 560px) {
  .v2-field { padding-top: 96px; padding-bottom: 58px; border-radius: 0 0 26px 26px; }
  .v2-hero-in .v2-chip { font-size: 12.5px; padding: 7px 14px; }
  .v2-h1 { margin-top: 20px; }
  .v2-lede { font-size: 15.5px; margin-top: 20px; }
  .v2-cta { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .v2-cta .v2-pill { width: 100%; }
  .v2-trust { font-size: 12.5px; gap: 6px 16px; }
  .v2-stage { margin-top: 40px; }
  .v2-stage-in { max-width: 330px; }
  .v2-stage-cap { font-size: 12px; }
  .v2-price-main { padding: 26px 22px 24px; }
  .v2-price-side { padding: 24px 22px; }
  .v2-price-cta .v2-pill { width: 100%; }
  .v2-end { padding: 64px 0 68px; border-radius: 26px 26px 0 0; }
  .v2-foot-links a { padding: 0 10px; }
  .v2-cmp-row > [role="cell"] { grid-template-columns: 40% 1fr; }
}

/* ------------------------------------------------------- batang admin */
/* Hanya dirender kalau sesi yang membuka halaman ini memang sesi admin
   (index.php memeriksa is_admin()). Pengunjung biasa tidak pernah menerima
   elemen ini, jadi tidak ada satu pun tautan /admin di HTML publik.
   Ditempel di bawah supaya tidak menggeser tata letak yang sudah diukur. */
/* Dipusatkan dengan left+right 12px lalu margin auto, BUKAN left:50% +
   translateX(-50%). Dengan left saja, kotak yang boleh dipakai elemen fixed
   ini cuma sisa dari titik 50% ke tepi kanan — setengah layar. Di HP 390px
   artinya cuma 195px, dua tombolnya tidak muat sebaris dan turun jadi dua
   baris. left+right membuat ruang yang dihitung selebar layar. */
.v2-adminbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  width: fit-content;
  margin-inline: auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(10, 10, 10, .1);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 32px -18px rgba(6, 13, 36, .6);
  font-size: 13px;
  line-height: 1.3;
  color: var(--v2-ink-2);
}
.v2-adminbar span { white-space: nowrap; }
.v2-adminbar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--v2-ink);
  color: #ffffff;
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
}
.v2-adminbar a + a {
  background: transparent;
  color: var(--v2-ink);
  border: 1px solid var(--v2-line);
}
.v2-adminbar a:hover { filter: brightness(1.15); }
.v2-adminbar a + a:hover { background: var(--v2-accent-soft); filter: none; }

@media (max-width: 560px) {
  .v2-adminbar { bottom: 10px; padding: 8px; gap: 6px; font-size: 12.5px; }
  .v2-adminbar span { display: none; }
  .v2-adminbar a { min-height: 40px; padding: 0 16px; }
}

/* Hormati preferensi sistem: pita berhenti berjalan dan bisa digeser tangan. */
@media (prefers-reduced-motion: reduce) {
  .v2-track { animation: none; }
  .v2-marquee { overflow-x: auto; }
  .v2-pill { transition: none; }
  .v2-pill:hover { transform: none; }
}