/* ==========================================================================
   ProArgi-9 Plus — Landing Page
   Semua warna, ukuran, dan jarak diatur dari blok :root di bawah.
   Ubah di satu tempat, berubah di seluruh halaman.
   ========================================================================== */

:root {
  /* Warna brand */
  --brand-50:  #fef2f4;
  --brand-100: #fde3e8;
  --brand-200: #fbc7d1;
  --brand-500: #ef4b6b;
  --brand-600: #d93257;
  --brand-700: #b62544;

  --accent-50:  #fff6ef;
  --accent-100: #ffe8d8;
  --accent-500: #ff8641;
  --accent-600: #ee6e22;

  /* Hijau WhatsApp yang digelapkan. Hijau resmi #25D366 terlalu terang:
     teks putih di atasnya cuma 2.0:1. Nilai ini memberi 5.2:1. */
  --wa-500: #0d7d3c;
  --wa-600: #0a6531;

  /* Warna netral */
  --ink-50:  #f8fafc;
  --ink-200: #e2e8f0;
  --ink-300: #94a3b8;
  --ink-500: #4a5769;
  --ink-700: #334155;
  --ink-900: #0f172a;
  --white:   #ffffff;

  /* Tipografi */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Lain-lain */
  --radius:    16px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.1);
  --maxw: 1120px;
}

/* --------------------------------------------------------------------------
   Reset ringan
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 17px;
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Ruang untuk sticky CTA di mobile */
  padding-bottom: 72px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Utilitas
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  /* padding-inline, BUKAN "padding: 0 24px". Bentuk ringkas itu ikut menyetel
     padding atas-bawah jadi nol, dan karena aturan .wrap di media query lebar
     ditulis paling akhir, ia menimpa padding-block milik .hero__grid — hero di
     layar besar jadi menempel persis di bawah header. */
  padding-inline: 24px;
}

.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 900px; }

/* Kotak pembatas yang dipakai SENDIRI (bukan bersama .wrap) tidak punya
   margin auto, jadi dia menempel ke kiri. Untuk blok rata kiri itu memang
   yang diinginkan — sejajar dengan kartu di bawahnya.
   Tapi begitu isinya ditengahkan, teks jadi terpusat di kotak 900px yang
   sendirinya menempel kiri, sehingga seluruh blok tampak melenceng ~110px
   ke kiri dari kartu di bawahnya. Baris ini menengahkan kotaknya juga. */
.wrap--narrow.center,
.wrap--mid.center { margin-inline: auto; }

.section { padding: 64px 0; }
.section--muted { background: var(--ink-50); }
.section--dark  { background: var(--ink-900); color: var(--white); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.section--dark .eyebrow { color: var(--accent-500); }

.h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.15;
}

.lead {
  margin-top: 16px;
  font-size: 18px;
  color: var(--ink-700);
  line-height: 1.65;
}

.section--dark .lead { color: rgba(255, 255, 255, 0.85); }

.center { text-align: center; }
.gradient-bg { background-image: linear-gradient(90deg, #ef4b6b, #ff8641); }

.gradient-text {
  background-image: linear-gradient(90deg, #ef4b6b, #ff8641);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--brand-600);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--brand-700); }

.btn--outline {
  border-color: var(--brand-200);
  color: var(--brand-700);
  background: var(--white);
}
.btn--outline:hover { border-color: var(--brand-500); background: var(--brand-50); }

/* Hijau = perjalanannya berujung di WhatsApp.
   Merah = pindah ke bagian lain halaman ini.
   Garis  = pilihan kedua.
   Tiga tingkat itu yang membuat mata tahu tombol mana yang utama. */
.btn--wa {
  background: var(--wa-500);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 20px -8px rgba(11, 112, 56, .55);
}
.btn--wa:hover { background: var(--wa-600); }

.btn--white {
  background: var(--white);
  color: var(--brand-700);
  box-shadow: var(--shadow);
}
.btn--white:hover { background: var(--brand-50); }

.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn__icon { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-200);
}

.header__inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo { display: flex; align-items: center; gap: 10px; }

.logo__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
}

.logo__name { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.logo__sub  { display: block; font-size: 12px; font-weight: 500; color: var(--ink-500); }

.nav { display: none; gap: 22px; font-size: 15px; font-weight: 500; color: var(--ink-700); }
.nav a:hover { color: var(--brand-600); }

.header__cta {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--wa-500);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.header__cta:hover { background: var(--wa-600); }
.header__cta .btn__icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--brand-50), var(--white) 60%);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: 40px;
  /* padding-block, BUKAN "padding: 48px 0 56px" — bentuk ringkas itu ikut
     menyetel kiri-kanan jadi NOL dan menimpa jarak tepi dari .wrap, sehingga
     judul hero menempel persis di tepi layar. */
  padding-block: 48px 56px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-700);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  flex: none;
}

/* Nama produk — H1 halaman. Ditulis kecil dan rapat: tugasnya menegaskan
   "ini produk apa, dan ini yang resmi", bukan bersaing dengan judul pemasaran
   di bawahnya. */
.hero__brand {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.25;
  /* Warnanya datang dari .gradient-text yang dipasang bersama kelas ini di
     HTML — sama persis dengan "Energi Kembali Stabil" pada judul di bawahnya. */
}

.hero__title {
  margin-top: 20px;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1;
}

.hero__text {
  margin-top: 20px;
  font-size: 18px;
  color: var(--ink-700);
  line-height: 1.65;
  max-width: 34em;
}

.ticks { margin-top: 24px; display: grid; gap: 12px; font-size: 17px; color: var(--ink-700); }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: "✓"; color: var(--brand-500); font-weight: 700; flex: none; }

.hero__actions { margin-top: 32px; display: grid; gap: 12px; }
.hero__note { margin-top: 16px; font-size: 15px; color: var(--ink-500); }

.hero__card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* Di HP, foto produk naik ke paling atas — yang pertama dilihat pengunjung
   adalah barangnya, bukan tulisan. Urutannya diatur lewat CSS, bukan dengan
   memindah HTML-nya, supaya di layar lebar susunannya tetap teks di kiri dan
   foto di kanan.
   Tingginya dibatasi 34vh: cukup besar untuk dikenali sebagai produk, tapi
   masih menyisakan ruang agar judul dan tombol tidak terdorong keluar layar. */
@media (max-width: 767px) {
  .hero__grid { gap: 24px; padding-block: 16px 48px; }

  /* Urutan di HP: nama produk -> foto -> badge & judul. */
  /* Ukurannya ikut lebar layar supaya tetap satu baris di HP sempit sekalipun:
     28px di layar 360px, naik sampai batas 32px. */
  .hero__brand { order: -2; text-align: center; font-size: clamp(26px, 7.4vw, 32px); }

  /* Kotak putihnya dilepas di HP. Setelah foto naik ke paling atas, kotak itu
     menutupi hampir seluruh layar pertama dan membuat latar merah muda hero
     tidak kelihatan lagi. Foto produknya sendiri berlatar transparan, jadi ia
     bisa duduk langsung di atas gradasi. */
  .hero__card {
    order: -1;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  /* Selebar kolom isi. Berkas fotonya punya ±19% ruang kosong transparan di
     bagian atas; margin negatif menariknya kembali supaya yang naik ke layar
     pertama adalah produknya, bukan ruang kosongnya. */
  .hero__card > img {
    width: 100%;
    max-width: none;
    max-height: none;
    margin-top: -9%;
  }

  /* Tiga angka tetap berbentuk kartu — sekarang putih, supaya tetap terbaca
     sebagai kotak tersendiri di atas latar merah muda. */
  .stats { margin-top: 16px; }
  .stat {
    padding: 12px 6px;
    background: var(--white);
    border: 1px solid var(--brand-100, var(--ink-200));
  }
}

.stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.stat {
  background: var(--ink-50);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.stat__num { font-size: 20px; font-weight: 800; color: var(--brand-600); }
.stat__label { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-500); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Strip kredibilitas
   -------------------------------------------------------------------------- */

.trust {
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  background: var(--white);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
  padding-block: 28px 24px;
  text-align: center;
}

.trust__item { display: flex; flex-direction: column; align-items: center; }

/* Logo sertifikasi bentuknya beda-beda: BPOM melebar, Halal menjulang, NSF
   bulat. Kalau tingginya disamakan, yang bulat terlihat jauh lebih besar dari
   yang melebar. Karena itu yang dikunci KOTAK-nya (48x48), lalu tiap logo
   dimuat di dalamnya lewat object-fit — jadi bobot visualnya seimbang. */
.trust__slot {
  width: 68px;
  height: 68px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
}

.trust__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.trust__title { font-size: 15px; font-weight: 700; }
.trust__body  { margin-top: 4px; font-size: 14px; color: var(--ink-500); line-height: 1.35; }

/* Bingkai foto: dibulatkan penuh dan dipangkas dengan object-fit: cover.
   Logo memakai "contain" karena bentuknya harus utuh; foto memakai "cover"
   supaya mengisi lingkaran tanpa jadi lonjong. */
.trust__slot--foto {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--ink-200);
}

.trust__slot--foto .trust__logo { object-fit: cover; }

/* --------------------------------------------------------------------------
   Kartu grid umum
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 16px; margin-top: 40px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.card {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--white);
}

.card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-50);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.card__title { margin-top: 16px; font-size: 17px; font-weight: 700; }
.card__text  { margin-top: 10px; font-size: 16px; color: var(--ink-500); line-height: 1.6; }

/* Kartu langkah bernomor */
.step {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.step__num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 800;
}

.step__num--round { border-radius: 50%; margin: 0 auto; }
.step__title { margin-top: 20px; font-size: 18px; }
.step__text  { margin-top: 10px; font-size: 16px; color: var(--ink-700); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Kandungan
   -------------------------------------------------------------------------- */

.panel {
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}

.panel__title { font-size: clamp(20px, 3vw, 24px); }
.panel__note  { margin-top: 8px; font-size: 16px; color: var(--ink-500); }

.ingredients {
  margin-top: 28px;
  display: grid;
  gap: 20px 32px;
  grid-template-columns: 1fr;
}

.ingredient { border-left: 2px solid var(--brand-500); padding-left: 16px; }
.ingredient--accent { border-left-color: var(--accent-500); }
.ingredient__name { font-size: 17px; font-weight: 700; }
.ingredient__text { margin-top: 6px; font-size: 16px; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Manfaat
   -------------------------------------------------------------------------- */

.benefit {
  border: 1px solid var(--brand-100);
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(to bottom right, var(--brand-50), var(--white));
}

.benefit--accent {
  border-color: var(--accent-100);
  background: linear-gradient(to bottom right, var(--accent-50), var(--white));
}

.benefit__icon  { font-size: 24px; }
.benefit__title { margin-top: 12px; font-size: 17px; font-weight: 700; }
.benefit__text  { margin-top: 8px; font-size: 16px; color: var(--ink-700); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Untuk siapa
   -------------------------------------------------------------------------- */

.who { display: grid; gap: 48px; align-items: start; }

.arrows { margin-top: 28px; display: grid; gap: 16px; font-size: 16px; }
.arrows li { display: flex; gap: 12px; }
.arrows li::before { content: "→"; color: var(--accent-500); font-weight: 700; flex: none; }

.who__box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.who__box h3 { font-size: 20px; }
.dots { margin-top: 20px; display: grid; gap: 14px; font-size: 17px; color: rgba(255, 255, 255, 0.8); }
.who__disclaimer { margin-top: 24px; font-size: 15px; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }
/* Hanya jarak atas. Warnanya diserahkan ke varian tombol —
   sebelumnya baris ini memaksa SEMUA tombol di seksi gelap jadi putih,
   termasuk yang seharusnya hijau. */
.who__box .btn { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Tabel pembanding
   -------------------------------------------------------------------------- */

.table-scroll {
  margin-top: 40px;
  overflow-x: auto;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; text-align: left; }

thead {
  background: var(--ink-50);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

th, td { padding: 16px 24px; }
th { font-weight: 700; }
th.is-ours { color: var(--brand-700); }
tbody tr + tr { border-top: 1px solid var(--ink-200); }
td:first-child { font-weight: 600; }
td.is-theirs { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Paket
   -------------------------------------------------------------------------- */

.packs { display: grid; gap: 24px; margin-top: 48px; align-items: start; }

.pack {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}

.pack--featured { border: 2px solid var(--brand-500); }

.pack__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pack__photo { background: var(--ink-50); border-radius: var(--radius); padding: 12px; }
.pack--featured .pack__photo { margin-top: 8px; }
.pack__name  { margin-top: 20px; font-size: 18px; }
.pack__units { margin-top: 6px; font-size: 15px; color: var(--ink-500); }
.pack__price { margin-top: 20px; font-size: 30px; font-weight: 800; }
.pack--featured .pack__price { color: var(--brand-600); }
.pack__perday { margin-top: 6px; font-size: 15px; color: var(--ink-500); }

.pack__perks { margin-top: 24px; display: grid; gap: 12px; font-size: 16px; color: var(--ink-700); }
.pack__perks li { display: flex; gap: 8px; }
.pack__perks li::before { content: "✓"; color: var(--brand-500); font-weight: 700; flex: none; }
.pack--swift .pack__perks li::before { color: var(--accent-500); }
.pack__perks strong { font-weight: 700; }
.pack .btn { margin-top: 28px; }

.packs__note { margin-top: 32px; text-align: center; font-size: 15px; color: var(--ink-500); }
.packs__note a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Testimoni
   -------------------------------------------------------------------------- */

.quote {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin: 0;
}

.quote__stars { color: var(--accent-500); font-size: 18px; letter-spacing: 2px; }
.quote blockquote { margin: 16px 0 0; font-size: 17px; color: var(--ink-700); line-height: 1.7; }
.quote figcaption { margin-top: 20px; display: flex; align-items: center; gap: 12px; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  flex: none;
}

.quote__name { font-size: 16px; font-weight: 700; }
.quote__meta { font-size: 14px; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { margin-top: 40px; border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }

.faq details { border-bottom: 1px solid var(--ink-200); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.faq__chev {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--brand-500);
  transition: transform 0.2s ease;
}

.faq details[open] .faq__chev { transform: rotate(180deg); }
.faq__answer { padding: 0 0 22px; font-size: 17px; color: var(--ink-700); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Form konsultasi
   -------------------------------------------------------------------------- */

.cta { scroll-margin-top: 80px; }

.cta__box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--white);
  padding: 40px 24px;
}

.cta__grid { display: grid; gap: 40px; align-items: center; }
.cta__title { font-size: clamp(26px, 4.5vw, 40px); }
.cta__text { margin-top: 20px; font-size: 18px; color: rgba(255, 255, 255, 0.9); line-height: 1.65; }

.cta__ticks { margin-top: 28px; display: grid; gap: 14px; font-size: 17px; color: rgba(255, 255, 255, 0.9); }
.cta__ticks li { display: flex; gap: 10px; }
.cta__ticks li::before { content: "✓"; font-weight: 700; flex: none; }

.cta__note { margin-top: 28px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }

/* Kartu form sengaja PUTIH PEKAT, bukan lapisan tembus pandang di atas
   gradien. Versi tembus pandang membuat label, isian, dan teks bantuan
   sama-sama pucat — pengunjung harus memicingkan mata untuk membaca kolom
   yang justru paling ingin kita isi.

   Sekarang kontrasnya jelas: teks putih di kiri, kartu putih di kanan.
   Matanya langsung tahu di mana harus mengetik. */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-700);
}

.field .optional { color: var(--ink-500); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-500); opacity: 0.75; }

/* Cincin fokus dibuat tebal — separuh pengunjung berusia 45+ dan mengisi
   form ini di layar HP. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(239, 75, 107, 0.18);
}

/* Pilihan di dropdown dirender oleh sistem — perlu warna gelap agar terbaca */
.field select option { color: var(--ink-900); background: var(--white); }

/* Honeypot: tersembunyi dari manusia, terlihat oleh bot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 12px; font-size: 14px; color: var(--brand-600); font-weight: 600; }
.form-privacy { margin-top: 16px; font-size: 14px; color: var(--ink-500); line-height: 1.6; }
.form-privacy a { color: var(--brand-700); font-weight: 600; text-decoration: underline;
                  text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--ink-200); background: var(--ink-50); }
.footer__grid { display: grid; gap: 32px; padding: 48px 0 0; }
.footer__about { margin-top: 16px; font-size: 16px; color: var(--ink-500); line-height: 1.65; }
.footer h4 { margin: 0; font-size: 15px; font-weight: 700; }
.footer__list { margin-top: 16px; display: grid; gap: 12px; font-size: 16px; color: var(--ink-500); }
.footer__list a:hover { color: var(--brand-600); }
.footer__list strong a { color: var(--brand-600); font-weight: 600; }

.footer__legal { margin-top: 40px; padding: 32px 0 48px; border-top: 1px solid var(--ink-200); }
.footer__legal p { font-size: 14px; color: var(--ink-500); line-height: 1.7; }
.footer__legal strong { color: var(--ink-700); }
.footer__copy { margin-top: 24px !important; }

/* --------------------------------------------------------------------------
   Halaman legal (Kebijakan Privasi, Syarat & Ketentuan)

   Dua halaman ini dibaca, bukan dipindai. Lebar kolomnya sengaja dibatasi
   ±70 karakter dan barisnya direnggangkan — teks hukum yang melebar penuh
   layar membuat mata kehilangan baris, apalagi untuk pembaca 40+.
   -------------------------------------------------------------------------- */

/* Halaman ini tidak punya bilah sticky, jadi ruang cadangannya dihapus. */
body.is-legal { padding-bottom: 0; }

.legal { padding: 40px 0 24px; }
.legal__doc { max-width: 760px; margin-inline: auto; }

.legal__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink-500);
}
.legal__back:hover { color: var(--brand-600); }

.legal__title { margin: 20px 0 0; font-size: 34px; line-height: 1.2; font-weight: 800; }
.legal__meta { margin: 12px 0 0; font-size: 15px; color: var(--ink-500); }
.legal__intro {
  margin: 24px 0 0; padding: 20px 22px;
  font-size: 17px; line-height: 1.7; color: var(--ink-700);
  background: var(--ink-50); border-radius: var(--radius);
  border: 1px solid var(--ink-200);
}

.legal__doc h2 {
  margin: 44px 0 0; font-size: 22px; line-height: 1.3; font-weight: 800;
  padding-top: 20px; border-top: 1px solid var(--ink-200);
}
.legal__doc h3 { margin: 28px 0 0; font-size: 18px; font-weight: 700; }
.legal__doc p { margin: 14px 0 0; font-size: 17px; line-height: 1.75; color: var(--ink-700); }
/* Reset global mematikan bullet (ul { list-style: none }). Di halaman legal
   bullet-nya justru dibutuhkan — daftar syarat tanpa penanda sulit dibedakan
   dari paragraf biasa. */
.legal__doc ul { margin: 14px 0 0; padding-left: 24px; list-style: disc; }
.legal__doc li {
  margin-top: 10px; font-size: 17px; line-height: 1.7; color: var(--ink-700);
}
.legal__doc li::marker { color: var(--ink-300); }
.legal__doc a { color: var(--brand-600); font-weight: 600; text-decoration: underline; }
.legal__doc a:hover { color: var(--brand-700); }

/* Ditulis setelah aturan tautan di atas supaya tautan "kembali" tidak ikut
   berwarna merah dan bergaris bawah seperti tautan di dalam badan teks. */
.legal__doc .legal__back { color: var(--ink-500); text-decoration: none; }
.legal__doc .legal__back:hover { color: var(--brand-600); }

/* Kotak peringatan — dipakai untuk hal yang tidak boleh terlewat dibaca:
   status produk sebagai suplemen, dan penanganan data kesehatan. */
.legal__note {
  margin: 24px 0 0; padding: 20px 22px;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-left: 4px solid var(--accent-600); border-radius: var(--radius);
}
.legal__note p, .legal__note li { color: var(--ink-900); }
.legal__note > :first-child { margin-top: 0; }

.legal__contact { margin: 14px 0 0; display: grid; gap: 10px; font-size: 17px; }

@media (min-width: 768px) {
  .legal { padding: 56px 0 32px; }
  .legal__title { font-size: 40px; }
}

/* --------------------------------------------------------------------------
   Sticky CTA mobile
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  /* Seluruh bilah adalah tautan; ini menjaga warna teksnya tetap seperti
     semula, bukan warna tautan bawaan browser. */
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ink-200);
}

.sticky-cta:active { background: var(--ink-50); }
.sticky-cta:focus-visible { outline: 3px solid var(--brand-500); outline-offset: -3px; }
/* Tombol memenuhi seluruh lebar bilah. line-height 1.2 menjaga bilahnya tetap
   pendek tanpa mengecilkan hurufnya; tinggi tombol 48px, di atas ambang 44px
   untuk sasaran sentuh jari. */
.sticky-cta .btn {
  flex: 1 1 auto;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .wrap { padding-inline: 32px; }
  .hero__actions { grid-template-columns: auto auto; justify-content: start; }
  .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ingredients { grid-template-columns: repeat(2, 1fr); }
  .cta__box { padding: 48px 40px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .section { padding: 88px 0; }
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  /* Tiga anak dalam dua kolom, jadi penempatannya ditulis eksplisit: nama
     produk dan teks bertumpuk di kolom kiri, foto menempati kolom kanan utuh
     dari baris atas sampai bawah. Tanpa ini, grid akan menaruh foto di bawah
     nama produk dan tata letak dua kolomnya buyar. */
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    row-gap: 0;
    padding-block: 72px 80px;
  }
  .hero__brand { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 16px; }
  .hero__copy  { grid-column: 1; grid-row: 2; align-self: start; }
  .hero__card  { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 32px; }
  .trust__grid { grid-template-columns: repeat(3, 1fr); }
  .who { grid-template-columns: 1fr 1fr; }
  .packs { grid-template-columns: repeat(3, 1fr); }
  .pack--featured { margin-top: -16px; }
  .panel { padding: 40px; }
  .cta__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .sticky-cta { display: none; }
  /* Kolom pertama (logo + deskripsi) lebih lebar dari tiga kolom tautan. */
  .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .wrap { padding-inline: 40px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ingredients { grid-template-columns: repeat(3, 1fr); }
  .trust__grid { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------------------
   VIDEO

   Setiap pembungkus memakai aspect-ratio sesuai ukuran asli videonya, supaya
   tinggi kotaknya sudah benar SEBELUM video termuat. Tanpa ini halaman
   "melompat" saat video masuk — dan lompatan itu menurunkan skor Core Web
   Vitals yang dipakai Google.

   Ukuran asli:
     proargi2025      1280 x 720   -> 16 / 9
     cara-minum        640 x 368   -> 640 / 368  (bukan 16:9, sedikit lebih tinggi)
     testimoni piktor  404 x 720   -> 404 / 720  (vertikal, rekaman HP)
   -------------------------------------------------------------------------- */

.video {
  position: relative;
  margin: 32px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: 0 12px 40px rgba(20, 24, 31, .12);
  line-height: 0;
}

/* Tombol play besar di tengah, tampil sebelum video diputar.
   Dibuat oleh main.js, hanya untuk video yang memakai kontrol. */
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.video__play::before {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #ef4b6b, #ff8641);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease;
}

/* Ukuran dipilih supaya tinggi segitiga ~38% dari diameter lingkaran —
   proporsi yang dipakai pemutar video pada umumnya.

   TIDAK ada transform di sini. Koreksi posisi sudah dijahit ke dalam
   koordinat path-nya (lihat main.js): titik berat segitiga, bukan kotak
   pembatasnya, yang diletakkan tepat di titik tengah viewBox. Menggeser
   lagi lewat transform justru membuatnya lari ke kanan. */
.video__play svg {
  position: relative;
  width: 42px;
  height: 42px;
  fill: #fff;
}

.video__play:hover { background: rgba(15, 23, 42, 0.18); }
.video__play:hover::before { transform: scale(1.06); }

.video__play:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -6px;
}

/* Saat diputar, tombol hilang tanpa mengganggu kontrol bawaan browser. */
.video.is-playing .video__play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 480px) {
  .video__play::before { width: 62px; height: 62px; }
  .video__play svg { width: 34px; height: 34px; }
}

.video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video--wide     { aspect-ratio: 16 / 9;    max-width: 860px; }
.video--demo     { aspect-ratio: 640 / 368; max-width: 560px; }
.video--vertical { aspect-ratio: 404 / 720; max-width: 300px; margin-top: 0; }

.video__note {
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-500);
}

/* Kartu testimoni video */
.vtesti {
  display: grid;
  gap: 24px;
  justify-items: center;
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 8px 28px rgba(20, 24, 31, .06);
}

.vtesti__body { text-align: center; }
.vtesti__title { margin: 10px 0 0; font-size: 18px; }
.vtesti__text { margin-top: 10px; font-size: 16px; color: var(--ink-500); line-height: 1.65; }
.vtesti__meta { margin-top: 12px; font-size: 14px; color: var(--ink-500); }

@media (min-width: 768px) {
  .vtesti {
    grid-template-columns: 300px 1fr;
    align-items: center;
    justify-items: stretch;
    padding: 32px;
    gap: 32px;
  }
  .vtesti__body { text-align: left; }
}

/* --------------------------------------------------------------------------
   TAKARAN MINUM

   Dua kotak berdampingan, bukan daftar — karena pembaca sedang memilih ANTARA
   dua tujuan, bukan membaca urutan langkah. Kotak "terapi" diberi aksen karena
   itu yang relevan untuk sebagian besar pengunjung halaman ini.
   -------------------------------------------------------------------------- */

.dose {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.dose__mode {
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
}

.dose__mode--terapi {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}

.dose__tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.dose__mode--terapi .dose__tag { color: var(--brand-700); }

.dose__big {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dose__mode--terapi .dose__big { color: var(--brand-600); }

.dose__text {
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-700);
  line-height: 1.6;
}

.dose__supply {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-200);
  font-size: 15px;
  color: var(--ink-500);
}

.dose__supply strong { color: var(--ink-900); }

.dose__note {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--accent-50);
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.dose__note strong { color: var(--accent-600); }

@media (min-width: 640px) {
  .dose { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   LIGHTBOX FOTO PRODUK
   -------------------------------------------------------------------------- */

/* Penanda bahwa foto bisa diklik. Kelasnya dipasang oleh main.js, jadi kalau
   JS mati kursornya tidak berbohong. */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 8px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  animation: lb-masuk 0.18s ease-out;
}

/* .lightbox memakai display:grid, yang tanpa baris ini mengalahkan aturan
   bawaan browser untuk atribut [hidden] — lapisannya akan tetap terlihat. */
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: min(900px, 100%);
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

@keyframes lb-masuk {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}