/* ============================================================================
   FUN HEALTHY — sistem desain
   Arah: "Terapi Presisi" — bersih, hangat, terpercaya. Palet diturunkan dari logo
   (hijau tua #006C24 = 6,6:1 di atas krem; hijau daun #6CA800 hanya untuk grafis besar).
   Prinsip: satu aksen, netral bertinta, dua lompatan skala tipografi, dua jeda grid
   per halaman, satu seksi hening.
   ========================================================================== */

:root {
  /* warna */
  --paper: #faf8f3;
  --paper-2: #f2eee4;
  --surface: #ffffff;
  --ink: #16211b;
  --ink-2: #4e5c54;
  /* Teks paling redup yang masih lolos WCAG AA (5,1:1 di atas krem). */
  --ink-3: #5f6a63;
  /* HANYA untuk garis dan ornamen — jangan dipakai pada teks. */
  --ink-4: #8a948d;
  --hijau: #006c24;
  --hijau-tua: #00521b;
  --hijau-lembut: #e7f1e3;
  --daun: #6ca800;
  --emas: #7e6318;
  --emas-garis: rgba(176, 138, 46, 0.42);
  --gelap: #0d2b19;
  --gelap-2: #123a22;
  --garis: rgba(22, 33, 27, 0.12);
  --garis-ketat: rgba(22, 33, 27, 0.07);
  --garis-terang: rgba(255, 255, 255, 0.16);

  /* bayangan ditint dari tinta, bukan hitam murni */
  --bayang-1: 0 1px 2px rgba(19, 32, 26, 0.05);
  --bayang-2: 0 1px 2px rgba(19, 32, 26, 0.05), 0 14px 34px -14px rgba(19, 32, 26, 0.16);
  --bayang-3: 0 2px 6px rgba(19, 32, 26, 0.06), 0 30px 64px -24px rgba(19, 32, 26, 0.24);

  /* radius sengaja tidak seragam */
  --r-kecil: 2px;
  --r: 4px;
  --r-besar: 8px;
  --r-pil: 999px;

  /* tipografi */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-display: clamp(2.35rem, 1.3rem + 4.2vw, 4.25rem);
  --t-h2: clamp(1.7rem, 1.26rem + 1.9vw, 2.5rem);
  --t-h3: clamp(1.14rem, 1.05rem + 0.4vw, 1.36rem);
  --t-lead: clamp(1.06rem, 1rem + 0.35vw, 1.26rem);
  --t-body: 1.0625rem;
  --t-kecil: 0.9375rem;
  --t-micro: 0.75rem;

  /* tata letak */
  --kontainer: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --seksi: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
  --seksi-kecil: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);

  /* gerak */
  --ease-masuk: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--hijau);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--hijau-tua);
}

:focus-visible {
  outline: 2px solid var(--hijau);
  outline-offset: 3px;
  border-radius: var(--r-kecil);
}

::selection {
  background: var(--hijau-lembut);
  color: var(--ink);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------ teks */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.026em;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
}

p {
  margin: 0 0 1.1em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

.prosa p,
.prosa li {
  max-width: 72ch;
}

.prosa h2 {
  margin-top: 2.2em;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa ul {
  padding-left: 1.15rem;
}

.prosa li {
  margin-bottom: 0.5em;
}

.mikro {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-3);
}

strong,
b {
  font-weight: 600;
  color: var(--ink);
}

/* label kecil di atas judul — satu garis rambut sebagai penanda sistem */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emas);
  margin: 0 0 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--emas-garis);
  flex: none;
}

.eyebrow--terang {
  color: #dcc48a;
}

.eyebrow--terang::before {
  background: rgba(220, 196, 138, 0.5);
}

/* angka bab berciri serif — detail tanda tangan yang diulang di seluruh situs */
.bab {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--emas);
}

/* ------------------------------------------------------------------ tata letak */
.wrap {
  width: 100%;
  max-width: var(--kontainer);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--sempit {
  max-width: 860px;
}

.section {
  padding-block: var(--seksi);
}

.section--kecil {
  padding-block: var(--seksi-kecil);
}

.section--paper2 {
  background: var(--paper-2);
}

.section--putih {
  background: var(--surface);
}

.section--gelap {
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.86);
}

.section--gelap h1,
.section--gelap h2,
.section--gelap h3 {
  color: #fff;
}

.section--gelap .lead,
.section--gelap p {
  color: rgba(255, 255, 255, 0.78);
}

.section--gelap a:not(.tombol) {
  color: #dcc48a;
}

.section--gelap .tombol {
  color: #fff;
}

.section--gelap .eyebrow {
  color: #dcc48a;
}

.section--gelap .eyebrow::before {
  background: rgba(220, 196, 138, 0.5);
}

/* seksi hening: satu kalimat, banyak ruang */
.section--hening {
  padding-block: clamp(4rem, 3rem + 6vw, 8.5rem);
  text-align: center;
}

.section--hening p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
  margin-inline: auto;
}

.section--hening cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* kepala seksi: kiri judul, kanan penjelasan — bukan tumpukan tengah */
.kepala {
  display: grid;
  gap: clamp(1rem, 2vw, 2.6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem);
}

@media (min-width: 900px) {
  .kepala {
    grid-template-columns: 7fr 5fr;
  }
}

.kepala p {
  color: var(--ink-2);
  margin: 0;
}

.kepala--tengah {
  text-align: center;
  grid-template-columns: 1fr;
  max-width: 62ch;
  margin-inline: auto;
}

.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pisah-57 {
  display: grid;
  gap: clamp(1.6rem, 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .pisah-57 {
    grid-template-columns: 5fr 7fr;
  }
  .pisah-57--balik > :first-child {
    order: 2;
  }
}

/* ------------------------------------------------------------------ tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--hijau);
  color: #fff;
  font-size: var(--t-kecil);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 180ms var(--ease-ui), transform 180ms var(--ease-ui),
    box-shadow 180ms var(--ease-ui);
}

.tombol:hover {
  background: var(--hijau-tua);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--bayang-2);
}

.tombol--garis {
  background: transparent;
  border-color: var(--garis);
  color: var(--ink);
}

.tombol--garis:hover {
  background: var(--surface);
  border-color: var(--garis-kuat, rgba(22, 33, 27, 0.24));
  color: var(--ink);
  box-shadow: var(--bayang-1);
}

.section--gelap .tombol--garis {
  border-color: var(--garis-terang);
  color: #fff;
}

.section--gelap .tombol--garis:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tombol--wa {
  background: var(--surface);
  border-color: var(--garis);
  color: var(--ink);
}

.tombol--wa:hover {
  background: var(--hijau-lembut);
  border-color: rgba(0, 108, 36, 0.28);
  color: var(--hijau-tua);
}

.tombol--kecil {
  min-height: 38px;
  padding: 0.42rem 0.85rem;
  font-size: 0.875rem;
}

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

.tautan-panah {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-kecil);
  font-weight: 600;
  text-decoration: none;
}

.tautan-panah::after {
  content: "→";
  transition: transform 180ms var(--ease-ui);
}

.tautan-panah:hover::after {
  transform: translateX(3px);
}

/* ------------------------------------------------------------------ bar atas */
.bar-atas {
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.bar-atas__dalam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding-block: 0.55rem;
}

.bar-atas__jam {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.titik-buka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7bc86c;
  box-shadow: 0 0 0 3px rgba(123, 200, 108, 0.22);
  flex: none;
}

.titik-tutup {
  background: #d9a34a;
  box-shadow: 0 0 0 3px rgba(217, 163, 74, 0.2);
}

.bar-atas__cabang {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.bar-atas__cabang a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.bar-atas__cabang a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------ kepala */
.kepala-situs {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--garis-ketat);
}

.kepala-situs__dalam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.7rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}

.logo img {
  width: clamp(148px, 20vw, 190px);
  height: auto;
}

.nav {
  display: none;
}

@media (min-width: 1000px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

.nav a {
  color: var(--ink);
  font-size: var(--t-kecil);
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease-ui), color 160ms var(--ease-ui);
}

.nav a:hover {
  color: var(--hijau);
  border-bottom-color: var(--hijau);
}

.nav a[aria-current="page"] {
  color: var(--hijau);
  border-bottom-color: var(--emas-garis);
}

.kepala-situs__aksi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kepala-situs__aksi .tombol--garis {
  display: none;
}

@media (min-width: 620px) {
  .kepala-situs__aksi .tombol--garis {
    display: inline-flex;
  }
}

@media (max-width: 619px) {
  .kepala-situs__aksi .tombol {
    white-space: nowrap;
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }
}

.tombol-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--surface);
}

@media (min-width: 1000px) {
  .tombol-menu {
    display: none;
  }
}

.tombol-menu span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
}

.tombol-menu span::before,
.tombol-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
}

.tombol-menu span::before {
  top: -5px;
}

.tombol-menu span::after {
  top: 5px;
}

/* menu ponsel */
.menu-ponsel {
  display: none;
  border-bottom: 1px solid var(--garis);
  background: var(--surface);
}

.menu-ponsel[data-terbuka="true"] {
  display: block;
}

.menu-ponsel__dalam {
  padding-block: 1rem 1.4rem;
  display: grid;
  gap: 0.15rem;
}

.menu-ponsel a {
  display: block;
  padding: 0.7rem 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--garis-ketat);
}

.menu-ponsel .tombol {
  margin-top: 0.9rem;
}

/* ------------------------------------------------------------------ hero */
.hero {
  padding-block: clamp(2.25rem, 1.6rem + 3vw, 4rem) var(--seksi);
}

.hero__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
  }
}

.hero h1 {
  margin-bottom: 1rem;
}

.hero__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.hero__catatan {
  margin-top: 1.1rem;
  font-size: var(--t-kecil);
  color: var(--ink-2);
}

.hero__gambar {
  position: relative;
}

.hero__gambar img {
  width: 100%;
  border-radius: var(--r-besar);
  box-shadow: var(--bayang-3);
}

/* kartu jam yang menumpuk di sudut gambar — bukan kartu mengambang generik */
.hero__jam {
  position: absolute;
  right: -0.5rem;
  bottom: -1.25rem;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--daun);
  border-radius: var(--r);
  padding: 0.85rem 1.05rem;
  box-shadow: var(--bayang-2);
  max-width: 15rem;
}

.hero__jam strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.hero__jam span {
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

@media (max-width: 560px) {
  .hero__jam {
    position: static;
    margin-top: 0.9rem;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ kartu cabang */
.kartu-cabang {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  padding: 1.35rem 1.3rem 1.25rem;
  box-shadow: var(--bayang-1);
  transition: box-shadow 220ms var(--ease-ui), transform 220ms var(--ease-ui),
    border-color 220ms var(--ease-ui);
}

.kartu-cabang:hover {
  box-shadow: var(--bayang-2);
  transform: translateY(-3px);
  border-color: rgba(0, 108, 36, 0.22);
}

.kartu-cabang__nomor {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--emas);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}

.kartu-cabang h3 {
  margin-bottom: 0.35rem;
}

.kartu-cabang__alamat {
  font-size: var(--t-kecil);
  color: var(--ink-2);
  margin-bottom: 0.85rem;
}

.kartu-cabang__fakta {
  display: grid;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  padding-block: 0.8rem;
  margin-bottom: 0.95rem;
  border-top: 1px solid var(--garis-ketat);
  border-bottom: 1px solid var(--garis-ketat);
}

.kartu-cabang__fakta span {
  display: flex;
  gap: 0.5rem;
}

.kartu-cabang__fakta b {
  font-weight: 600;
  color: var(--ink);
  min-width: 4.6rem;
  flex: none;
}

.kartu-cabang__aksi {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}

.kartu-cabang__kecil {
  display: flex;
  gap: 0.5rem;
}

.kartu-cabang__kecil .tombol {
  flex: 1;
}

/* ------------------------------------------------------------------ harga */
.tabel-harga {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-kecil);
  background: var(--surface);
}

.tabel-harga caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emas);
  padding-bottom: 0.7rem;
  font-weight: 600;
}

.tabel-harga th,
.tabel-harga td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--garis-ketat);
  vertical-align: middle;
}

.tabel-harga thead th {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  border-bottom: 1px solid var(--garis);
}

.tabel-harga tbody tr:hover {
  background: rgba(231, 241, 227, 0.42);
}

.tabel-harga .nama {
  font-weight: 600;
  color: var(--ink);
}

.tabel-harga .nama small {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-top: 0.2rem;
  max-width: 46ch;
}

.tabel-harga .durasi {
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabel-harga .harga {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 1rem;
}

.tabel-harga .aksi {
  text-align: right;
  white-space: nowrap;
}

.tabel-harga .aksi .tombol {
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
}

.label-unggulan {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hijau-tua);
  background: var(--hijau-lembut);
  border-radius: var(--r-pil);
  padding: 0.15rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: 2px;
}

.catatan-harga {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 0.85rem;
}

.kartu-kategori {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.kartu-kategori__kepala {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--garis-ketat);
  background: linear-gradient(180deg, rgba(231, 241, 227, 0.5), transparent);
}

.kartu-kategori__kepala h3 {
  margin: 0 0 0.2rem;
}

.kartu-kategori__kepala p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.kartu-kategori__isi {
  overflow-x: auto;
}

.kartu-kategori .tabel-harga th:first-child,
.kartu-kategori .tabel-harga td:first-child {
  padding-left: 1.25rem;
}

.kartu-kategori .tabel-harga th:last-child,
.kartu-kategori .tabel-harga td:last-child {
  padding-right: 1.25rem;
}

/* Di layar kecil, tabel harga menjadi kartu bertumpuk.
   Tabel 4 kolom yang dipaksa muat membuat deskripsi satu kata per baris dan
   memotong tombol pesan — ini masalah nyata karena mayoritas tamu memakai ponsel. */
@media (max-width: 719px) {
  .kartu-kategori__isi {
    overflow-x: visible;
  }

  .tabel-harga,
  .tabel-harga tbody,
  .tabel-harga tr,
  .tabel-harga td {
    display: block;
    width: 100%;
  }

  .tabel-harga thead {
    display: none;
  }

  .tabel-harga caption {
    display: block;
    width: 100%;
    padding: 0.9rem 1.15rem 0;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .tabel-harga tr {
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid var(--garis);
  }

  .tabel-harga tr:last-child {
    border-bottom: 0;
  }

  .kartu-kategori .tabel-harga td {
    padding: 0;
    border: 0;
  }

  .tabel-harga .nama {
    font-size: 1.0625rem;
    margin-bottom: 0.35rem;
  }

  .tabel-harga .nama small {
    max-width: none;
    margin-top: 0.35rem;
  }

  .tabel-harga .durasi {
    color: var(--ink-2);
    font-size: 0.875rem;
  }

  .tabel-harga .durasi::before {
    content: "Durasi: ";
    color: var(--ink-3);
  }

  .tabel-harga .harga {
    text-align: left;
    font-size: 1.25rem;
    margin-top: 0.4rem;
  }

  .tabel-harga .aksi {
    text-align: left;
    margin-top: 0.75rem;
  }

  .tabel-harga .aksi .tombol {
    width: 100%;
    min-height: 44px;
  }
}

/* ------------------------------------------------------------------ promo */
.kartu-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--bayang-1);
}

.kartu-promo--utama {
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.86);
  border-color: transparent;
  box-shadow: var(--bayang-3);
}

.kartu-promo--utama h3,
.kartu-promo--utama .harga-besar {
  color: #fff;
}

.kartu-promo--utama .kartu-promo__syarat,
.kartu-promo--utama p {
  color: rgba(255, 255, 255, 0.72);
}

.kartu-promo h3 {
  margin-bottom: 0.4rem;
}

.kartu-promo__syarat {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.harga-besar {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 0.15rem;
}

.harga-coret {
  font-size: 0.9rem;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.kartu-promo--utama .harga-coret {
  color: rgba(255, 255, 255, 0.55);
}

.kartu-promo .tombol {
  margin-top: auto;
}

/* ------------------------------------------------------------------ langkah */
.langkah {
  counter-reset: langkah;
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}

@media (min-width: 760px) {
  .langkah {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.langkah__item {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid var(--garis);
}

.langkah__item::before {
  counter-increment: langkah;
  content: "0" counter(langkah);
  position: absolute;
  top: 1rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--emas);
  font-variant-numeric: tabular-nums;
}

.langkah__item h3 {
  margin-bottom: 0.4rem;
}

.langkah__item p {
  font-size: var(--t-kecil);
  color: var(--ink-2);
  margin: 0;
}

/* ------------------------------------------------------------------ keunggulan */
.daftar-unggulan {
  display: grid;
  gap: 1px;
  background: var(--garis-ketat);
  border: 1px solid var(--garis-ketat);
  border-radius: var(--r-besar);
  overflow: hidden;
}

@media (min-width: 760px) {
  .daftar-unggulan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .daftar-unggulan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.unggulan {
  background: var(--surface);
  padding: 1.5rem 1.35rem;
}

/* Jumlah item ganjil: item terakhir memenuhi baris supaya tidak ada sel kosong. */
.unggulan:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.unggulan h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.unggulan p {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0;
}

/* ------------------------------------------------------------------ FAQ */
.faq {
  border-top: 1px solid var(--garis);
}

.faq__item {
  border-bottom: 1px solid var(--garis);
}

.faq__tanya {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.faq__tanda {
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 0.28rem;
}

.faq__tanda::before,
.faq__tanda::after {
  content: "";
  position: absolute;
  background: var(--hijau);
  transition: transform 240ms var(--ease-ui);
}

.faq__tanda::before {
  left: 0;
  top: 9px;
  width: 20px;
  height: 1.5px;
}

.faq__tanda::after {
  left: 9px;
  top: 0;
  width: 1.5px;
  height: 20px;
}

.faq__item[data-terbuka="true"] .faq__tanda::after {
  transform: scaleY(0);
}

.faq__jawab {
  display: none;
  padding-bottom: 1.2rem;
  max-width: 72ch;
  color: var(--ink-2);
}

.faq__item[data-terbuka="true"] .faq__jawab {
  display: block;
}

/* ------------------------------------------------------------------ galeri */
.galeri {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .galeri {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .galeri__item--lebar {
    grid-column: span 2;
  }
  .galeri__item--tinggi {
    grid-row: span 2;
  }
}

.galeri__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  margin: 0;
}

.galeri__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform 420ms var(--ease-masuk);
}

.galeri__item--lebar img {
  aspect-ratio: 16 / 10;
}

.galeri__item:hover img {
  transform: scale(1.03);
}

.galeri__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.9rem 0.7rem;
  font-size: var(--t-micro);
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(19, 32, 26, 0.78));
}

/* penanda jujur: gambar ilustrasi vs foto asli */
.cap-ilustrasi {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 0.9rem;
}

.cap-ilustrasi::before {
  content: "◦";
  color: var(--emas);
}

/* ------------------------------------------------------------------ pita fakta */
/* Paragraf di dalam .kepala memakai warna tinta; di seksi gelap harus dibalik.
   Specificity dinaikkan karena .kepala p ditulis setelah aturan seksi gelap. */
.section--gelap .kepala p,
.section--gelap .kepala .lead {
  color: rgba(255, 255, 255, 0.78);
}

/* pita fakta: pembungkus gelap + grid angka di dalamnya */
.pita-bungkus {
  background: var(--gelap);
  border-top: 1px solid var(--garis-terang);
  border-bottom: 1px solid var(--garis-terang);
}

.pita {
  display: grid;
  gap: 1px;
  background: var(--garis-terang);
  border-top: 1px solid var(--garis-terang);
  border-bottom: 1px solid var(--garis-terang);
}

@media (min-width: 700px) {
  .pita {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pita__item {
  background: linear-gradient(180deg, var(--gelap-2), var(--gelap));
  padding: 1.5rem 1.25rem;
}

.pita__angka {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.pita__label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ kaki */
.kaki {
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 1.5rem;
  font-size: var(--t-kecil);
}

.kaki h2,
.kaki h3 {
  color: #fff;
}

.kaki__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.kaki .mikro {
  color: rgba(255, 255, 255, 0.58);
  max-width: 46ch;
}

.kaki__logo {
  display: inline-block;
  background: var(--paper);
  border-radius: var(--r);
  padding: 0.7rem 0.85rem;
  margin-bottom: 1rem;
}

.kaki__logo img {
  width: 168px;
}

.kaki h3 {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.kaki ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.kaki a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.kaki a:hover {
  color: #fff;
  text-decoration: underline;
}

.kaki__cabang h3 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.35rem;
}

.kaki__cabang li {
  display: grid;
  gap: 0.15rem;
}

.kaki__bawah {
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--garis-terang);
  display: grid;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 820px) {
  .kaki__bawah {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.kaki__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

/* ------------------------------------------------------------------ remah */
.remah {
  font-size: 0.8125rem;
  color: var(--ink-3);
  padding-block: 0.9rem;
}

.remah ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}

.remah li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--garis);
}

.remah a {
  color: var(--ink-2);
  text-decoration: none;
}

/* ------------------------------------------------------------------ catatan */
.kotak-catatan {
  border-left: 2px solid var(--emas-garis);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin-block: 1.5rem;
  font-size: var(--t-kecil);
  color: var(--ink-2);
}

.kotak-catatan strong {
  color: var(--ink);
}

/* ------------------------------------------------------------------ banner izin */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.86);
  border-top: 1px solid var(--garis-terang);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-masuk);
}

.consent[data-tampil="true"] {
  transform: translateY(0);
}

.consent__dalam {
  display: grid;
  gap: 0.9rem;
  padding-block: 1rem;
  align-items: center;
}

@media (min-width: 860px) {
  .consent__dalam {
    grid-template-columns: 1fr auto;
  }
}

.consent p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.76);
}

.consent__aksi {
  display: flex;
  gap: 0.6rem;
}

.consent .tombol--garis {
  border-color: var(--garis-terang);
  color: #fff;
}

/* ------------------------------------------------------------------ masuk halus */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease-masuk), transform 620ms var(--ease-masuk);
}

[data-reveal][data-tampil="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ bantuan */
.lewati-ke-konten {
  position: absolute;
  left: -9999px;
}

.lewati-ke-konten:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 80;
  background: var(--surface);
  padding: 0.6rem 1rem;
  border: 1px solid var(--hijau);
  border-radius: var(--r);
}

.hanya-pembaca-layar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tengah {
  text-align: center;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mb-0 {
  margin-bottom: 0;
}

/* ============================================================================
   DESAIN v2 — perbaikan setelah evaluasi
   Yang diperbaiki, semuanya mengikuti catatan riset sendiri:
   1. Hero foto penuh (full-bleed) dengan scrim padat, bukan dua tombol pil di tengah.
   2. Foto gelap-editorial, bukan still-life krem pucat.
   3. Satu CTA utama; CTA kedua berupa tautan teks.
   4. Jeda grid: band foto tiga potong tanpa celah, pernyataan gelap, seksi hening.
   5. Seksi "Sesi pertama Anda" 4 langkah bernomor + diagram kaki + sketsa peta.
   ========================================================================== */

/* -------------------------------------------------- hero foto penuh */
.hero-penuh {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 62vh, 44rem);
  background: var(--gelap);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-penuh__gambar {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-penuh__gambar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* scrim padat — bukan gradasi hiasan, tapi supaya teks tetap terbaca */
.hero-penuh__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(9, 32, 18, 0.94) 0%, rgba(9, 32, 18, 0.86) 38%, rgba(9, 32, 18, 0.42) 68%, rgba(9, 32, 18, 0.18) 100%);
}

.hero-penuh__isi {
  width: 100%;
  padding-block: clamp(3rem, 2rem + 6vw, 5.5rem) clamp(2.5rem, 2rem + 4vw, 4rem);
}

.hero-penuh h1 {
  color: #fff;
  max-width: 22ch;
  margin-bottom: 1rem;
}

.hero-penuh__mekanisme {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 52ch;
  margin-bottom: 1.6rem;
}

.hero-penuh__aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1.75rem;
}

.hero-penuh .tombol {
  background: #fff;
  color: var(--hijau-tua);
}

.hero-penuh .tombol:hover {
  background: var(--hijau-lembut);
  color: var(--hijau-tua);
}

/* CTA kedua: tautan teks bergaris bawah, bukan tombol pil kedua */
.tautan-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-size: var(--t-kecil);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}

.tautan-cta:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.tautan-cta::after {
  content: "→";
  transition: transform 180ms var(--ease-ui);
}

.tautan-cta:hover::after {
  transform: translateX(3px);
}

/* chip kepercayaan di hero */
.chip-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.chip-fakta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chip-fakta li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--daun);
  flex: none;
}

@media (max-width: 700px) {
  .hero-penuh {
    min-height: 0;
  }
  .hero-penuh__gambar img {
    object-position: 68% 50%;
  }
  .hero-penuh__scrim {
    background: linear-gradient(180deg, rgba(9, 32, 18, 0.78) 0%, rgba(9, 32, 18, 0.92) 55%, rgba(9, 32, 18, 0.96) 100%);
  }
}

/* -------------------------------------------------- baris fakta berangka */
.fakta-baris {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--garis);
  border-bottom: 1px solid var(--garis);
}

@media (min-width: 760px) {
  .fakta-baris {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fakta {
  background: var(--paper);
  padding: 1.5rem 1.35rem;
}

.fakta__angka {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--hijau-tua);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}

.fakta__label {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin: 0;
}

/* -------------------------------------------------- tiga potong tanpa celah */
.triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--gelap);
}

@media (min-width: 700px) {
  .triptych {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.triptych figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--gelap-2);
}

.triptych img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-masuk);
}

.triptych figure:hover img {
  transform: scale(1.025);
}

.triptych figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem 0.9rem;
  font-size: 0.8125rem;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(9, 32, 18, 0.82));
}

/* -------------------------------------------------- pernyataan gelap */
.pernyataan {
  background: var(--gelap);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(3.5rem, 2.6rem + 5vw, 7rem);
}

.pernyataan__kutip {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: #fff;
  max-width: 30ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.pernyataan__catatan {
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.pernyataan__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

@media (min-width: 900px) {
  .pernyataan__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
  }
}

/* -------------------------------------------------- langkah pertama */
/* Sengaja TERANG: band pernyataan tepat di atasnya sudah gelap, dan dua blok
   gelap yang menempel membuat halaman terasa berat. */
.langkah-pertama {
  background: var(--surface);
  color: var(--ink);
  padding-block: var(--seksi);
}

.langkah-pertama h2 {
  color: var(--ink);
}

.langkah-pertama__daftar {
  display: grid;
  gap: 0;
  counter-reset: langkah;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

@media (min-width: 860px) {
  .langkah-pertama__daftar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.langkah-pertama__item {
  padding: 1.4rem 1.25rem 1.4rem 0;
  border-top: 1px solid var(--garis);
}

.langkah-pertama__item::before {
  counter-increment: langkah;
  content: "0" counter(langkah);
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--emas);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.65rem;
}

.langkah-pertama__item h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.langkah-pertama__item p {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin: 0;
}

.langkah-pertama__catatan {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: 62ch;
}

/* -------------------------------------------------- blok khas (diagram & peta) */
.blok-khas {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .blok-khas {
    grid-template-columns: 5fr 7fr;
  }
  .blok-khas--balik > :first-child {
    order: 2;
  }
}

.blok-khas__gambar {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  padding: clamp(1rem, 2vw, 1.75rem);
  box-shadow: var(--bayang-1);
}

.blok-khas__gambar img,
.blok-khas__gambar svg {
  width: 100%;
  height: auto;
  display: block;
}

.blok-khas__gambar figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--garis-ketat);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* -------------------------------------------------- tanda "diperbarui" */
.diperbarui {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin: 0;
}

.section--gelap .diperbarui,
.kaki .diperbarui {
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================================
   DESAIN MEWAH (v3, 12 Okt 2026) — permintaan pemilik: situs mewah, hijau tua
   supaya kontras, logo tetap dengan warna khasnya.
   Hijau hutan pekat + emas hangat + krem. Logo selalu di atas lempeng krem supaya
   telapak hijau muda dan daun hijau tua tidak tenggelam di latar gelap.
   ========================================================================== */
:root {
  --m-hijau: #0a2214;
  --m-hijau-2: #0f2c1b;
  --m-emas: #d4b06a;
  --m-emas-tua: #b8924a;
  --m-emas-garis: rgba(212, 176, 106, 0.34);
  --m-krem: #f5efe2;
  --m-teks: rgba(245, 239, 226, 0.86);
  --m-teks-2: rgba(245, 239, 226, 0.72);
}

/* -------------------------------------------- tombol emas (dipakai seluruh situs) */
.tombol--emas {
  background: linear-gradient(180deg, #ddbd7c, var(--m-emas-tua));
  border-color: rgba(255, 236, 196, 0.35);
  color: #1d1406;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.tombol--emas:hover {
  background: linear-gradient(180deg, #e7cb90, #c49d53);
  color: #1d1406;
}

.tombol--garis-emas {
  background: transparent;
  border-color: var(--m-emas-garis);
  color: var(--m-krem);
}

.tombol--garis-emas:hover {
  background: rgba(212, 176, 106, 0.12);
  border-color: var(--m-emas);
  color: #fff;
}

.eyebrow--emas {
  color: var(--m-emas);
}

.eyebrow--emas::before {
  background: var(--m-emas-garis);
}

.kepala--tengah .eyebrow {
  justify-content: center;
}

/* -------------------------------------------------- kepala situs gelap */
.bar-atas {
  background: #061710;
  border-bottom: 1px solid rgba(212, 176, 106, 0.16);
}

.kepala-situs {
  background: rgba(10, 34, 20, 0.96);
  border-bottom: 1px solid var(--m-emas-garis);
}

.logo {
  background: var(--m-krem);
  border-radius: var(--r-pil);
  padding: 0.3rem 1rem 0.3rem 0.8rem;
  box-shadow: 0 0 0 1px rgba(212, 176, 106, 0.55), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

.logo img {
  width: clamp(124px, 17vw, 170px);
}

.nav a {
  color: var(--m-teks);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--m-emas);
  border-bottom-color: var(--m-emas);
}

.tombol-menu {
  background: transparent;
  border-color: var(--m-emas-garis);
}

.tombol-menu span,
.tombol-menu span::before,
.tombol-menu span::after {
  background: var(--m-krem);
}

.menu-ponsel {
  background: var(--m-hijau);
  border-bottom-color: var(--m-emas-garis);
}

.menu-ponsel a {
  color: var(--m-krem);
  border-bottom-color: rgba(212, 176, 106, 0.16);
}

.menu-ponsel a.tombol {
  margin-top: 0.9rem;
  color: #1d1406;
  border-bottom: 0;
}

.kaki {
  background: #061710;
  border-top: 1px solid var(--m-emas-garis);
}

.kaki__logo {
  background: var(--m-krem);
  border-radius: var(--r-besar);
}

/* -------------------------------------------------- beranda mewah */
.fh-mewah .hero-penuh {
  background: var(--m-hijau);
  min-height: clamp(32rem, 74vh, 48rem);
}

.fh-mewah .hero-penuh__scrim {
  background: linear-gradient(100deg, rgba(6, 23, 16, 0.95) 0%, rgba(6, 23, 16, 0.86) 40%, rgba(6, 23, 16, 0.4) 72%, rgba(6, 23, 16, 0.2) 100%);
}

.fh-mewah .hero-penuh h1 {
  font-size: clamp(2.5rem, 1.4rem + 4.8vw, 4.75rem);
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.fh-mewah .hero-penuh__mekanisme strong {
  color: var(--m-emas);
  font-weight: 600;
}

.fh-mewah .chip-fakta {
  border-top-color: var(--m-emas-garis);
}

.fh-mewah .chip-fakta li::before {
  background: var(--m-emas);
}

.fh-mewah .tautan-cta {
  border-bottom-color: var(--m-emas-garis);
}

@media (max-width: 700px) {
  .fh-mewah .hero-penuh {
    min-height: 0;
  }
  .fh-mewah .hero-penuh__scrim {
    background: linear-gradient(180deg, rgba(6, 23, 16, 0.7) 0%, rgba(6, 23, 16, 0.9) 50%, rgba(6, 23, 16, 0.97) 100%);
  }
}

/* seksi gelap mewah */
.mewah-seksi {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 176, 106, 0.09), transparent 70%),
    var(--m-hijau);
  color: var(--m-teks);
  padding-block: var(--seksi);
}

.mewah-seksi--rapat {
  padding-block: var(--seksi-kecil);
}

.mewah-seksi h2,
.mewah-seksi h3 {
  color: var(--m-krem);
}

.mewah-seksi .kepala p,
.mewah-seksi .mikro {
  color: var(--m-teks-2);
}

.mewah-catatan {
  margin-top: 2rem;
}

/* kartu paket Fun Me */
.paket-grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

@media (min-width: 700px) {
  .paket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .paket-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.paket {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--m-hijau-2), #0c2617);
  border: 1px solid var(--m-emas-garis);
  border-radius: var(--r-besar);
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8);
  transition: transform 260ms var(--ease-ui), border-color 260ms var(--ease-ui);
}

.paket:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 176, 106, 0.7);
}

.paket__gambar {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #071a10;
}

.paket__gambar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-masuk);
}

.paket:hover .paket__gambar img {
  transform: scale(1.04);
}

.paket__ilustrasi {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-pil);
  background: rgba(6, 23, 16, 0.78);
  color: rgba(245, 239, 226, 0.92);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.paket__label {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pil);
  background: var(--m-emas);
  color: #1d1406;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.paket__isi {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.35rem 1.35rem 1.45rem;
  flex: 1;
}

.paket__judul {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(212, 176, 106, 0.2);
  padding-bottom: 0.75rem;
}

.paket__judul h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  margin: 0;
}

.paket__durasi {
  margin: 0;
  color: var(--m-emas);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.paket__daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--m-krem);
}

.paket__daftar li {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
}

.paket__daftar li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 1.5px solid var(--m-emas);
  border-bottom: 1.5px solid var(--m-emas);
  transform: rotate(-45deg) translateY(-0.15rem);
}

.paket__ringkas {
  margin: 0;
  font-size: 0.9rem;
  color: var(--m-teks-2);
}

.paket__harga {
  margin-top: auto;
  padding-top: 0.3rem;
}

.paket__angka {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--m-emas);
  font-variant-numeric: tabular-nums;
}

.paket__coret {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--m-teks-2);
}

.paket__rumah {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--m-krem);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.paket__rumah::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m-emas);
}

/* Happy Hour: pita terang di dalam seksi gelap */
.happy {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-besar);
  overflow: hidden;
  background: var(--m-krem);
  color: var(--ink);
  border: 1px solid rgba(212, 176, 106, 0.6);
}

@media (min-width: 900px) {
  .happy {
    grid-template-columns: 11fr 9fr;
  }
}

.happy__gambar {
  position: relative;
  margin: 0;
}

.happy__gambar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.happy__isi {
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: center;
}

.mewah-seksi .happy__isi h3 {
  color: var(--ink);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  margin: 0;
}

.happy__isi p {
  margin: 0;
  color: var(--ink-2);
}

.happy .eyebrow--emas {
  color: #6f5114;
}

.happy .paket__angka {
  color: var(--hijau-tua);
}

.happy .paket__coret {
  color: var(--ink-3);
}

.happy .tombol {
  align-self: flex-start;
}

/* layanan ke rumah */
.rumah {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--m-emas-garis);
  border-radius: var(--r-besar);
  background: rgba(255, 255, 255, 0.03);
}

@media (min-width: 900px) {
  .rumah {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.rumah h3 {
  margin-bottom: 0.5rem;
}

.rumah p {
  margin: 0;
}

.rumah__tombol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.rumah__tombol .tombol {
  font-size: 0.8125rem;
  text-align: center;
  line-height: 1.25;
}

/* daftar harga ringkas (details) */
.ringkas {
  display: grid;
  gap: 0.6rem;
}

.ringkas__item {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  transition: border-color 200ms var(--ease-ui);
}

.ringkas__item[open] {
  border-color: rgba(184, 146, 74, 0.55);
}

.ringkas__item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: 52px;
  padding: 0.85rem 3rem 0.85rem 1.15rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

.ringkas__item summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--emas);
}

.ringkas__item[open] summary::after {
  content: "–";
}

.ringkas__nama {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.ringkas__info {
  font-size: 0.875rem;
  color: var(--ink-2);
}

.ringkas__daftar {
  list-style: none;
  margin: 0;
  padding: 0 1.15rem 0.9rem;
}

.ringkas__daftar li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--garis-ketat);
  font-size: 0.9375rem;
}

.ringkas__daftar small {
  color: var(--ink-3);
  white-space: nowrap;
}

.ringkas__daftar b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* langkah mewah */
.langkah-mewah {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  counter-reset: lm;
}

@media (min-width: 860px) {
  .langkah-mewah {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.langkah-mewah li {
  padding: 1.3rem 0;
  border-top: 1px solid var(--m-emas-garis);
}

.langkah-mewah li::before {
  counter-increment: lm;
  content: "0" counter(lm);
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--m-emas);
  line-height: 1;
  margin-bottom: 0.7rem;
}

.langkah-mewah h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.langkah-mewah p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--m-teks-2);
}

/* keluarga */
.blok-keluarga {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .blok-keluarga {
    grid-template-columns: 6fr 5fr;
  }
}

.keluarga-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  box-shadow: var(--bayang-1);
}

.keluarga-daftar li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
}

.keluarga-daftar li + li {
  border-top: 1px solid var(--garis-ketat);
}

.keluarga-daftar b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.keluarga-daftar small {
  display: block;
  color: var(--ink-3);
}

.keluarga-daftar__harga {
  font-weight: 700;
  color: var(--hijau-tua);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ulasan */
.ulasan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--garis);
}

.ulasan__tautan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

/* penutup */
.mewah-penutup h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  margin-inline: auto;
  max-width: 20ch;
}

.mewah-penutup .lead {
  color: var(--m-teks);
  margin-inline: auto;
}

.mewah-penutup .eyebrow {
  justify-content: center;
}

.mewah-penutup .diperbarui {
  color: var(--m-teks-2);
}

/* bar pesan ponsel: muncul setelah hero lewat, sembunyi saat pemilih cabang terlihat */
.bar-pesan {
  display: none;
}

@media (max-width: 759px) {
  .bar-pesan {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(6, 23, 16, 0.97);
    border-top: 1px solid var(--m-emas-garis);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 260ms var(--ease-ui), visibility 260ms;
  }
  .bar-pesan[data-tampil="true"] {
    transform: none;
    visibility: visible;
  }
  .bar-pesan__teks {
    margin: 0;
    font-size: 0.875rem;
    color: var(--m-teks);
  }
  .bar-pesan__teks b {
    color: var(--m-emas);
  }
  .fh-mewah .kaki {
    padding-bottom: 5rem;
  }
}

.kartu-promo__isi {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.kartu-promo__isi li::before {
  content: "· ";
  color: var(--emas);
  font-weight: 700;
}

/* tombol utama hero memakai emas, bukan putih */
.hero-penuh .tombol--emas,
.hero-penuh .tombol--emas:hover {
  background: linear-gradient(180deg, #ddbd7c, var(--m-emas-tua));
  color: #1d1406;
}

/* HP sempit: kepala situs muat tanpa geser samping, kartu cabang satu kolom */
@media (max-width: 459px) {
  .kepala-situs__dalam {
    gap: 0.6rem;
  }
  .logo {
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
  }
  .logo img {
    width: 108px;
  }
  .kepala-situs__aksi {
    gap: 0.4rem;
  }
  .kepala-situs__aksi .tombol {
    padding-inline: 0.7rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 699px) {
  .bar-atas__cabang {
    display: none;
  }
}

@media (max-width: 599px) {
  .grid--4:has(> .kartu-cabang) {
    grid-template-columns: 1fr;
  }
}

.fh-mewah .hero-penuh h1 {
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.4rem);
  max-width: 18ch;
}

.hero-emas {
  display: block;
  color: var(--m-emas);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================================
   PERBAIKAN AUDIT KONVERSI (12 Okt 2026) — hasil audit agen riset, copywriting,
   dan desain untuk trafik iklan Meta/TikTok (mayoritas HP, browser dalam aplikasi).
   ========================================================================== */

/* judul: tanpa faux-italic (berkas italic tidak dimuat), emas tegak tipis */
.hero-emas {
  font-style: normal;
  font-weight: 400;
}

.fh-mewah .hero-penuh h1 {
  font-size: clamp(2rem, 1.2rem + 4vw, 4.4rem);
  margin-bottom: 0.8rem;
}

.fh-mewah h2 {
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.8rem);
}

/* strip penawaran di layar pertama */
.tawaran {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 34rem;
  margin: 0 0 1.25rem;
}

.tawaran__petak {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem 0.75rem;
  border: 1px solid var(--m-emas-garis);
  border-radius: var(--r-besar);
  background: rgba(6, 23, 16, 0.55);
  color: var(--m-krem);
  text-decoration: none;
  transition: border-color 200ms var(--ease-ui), background 200ms var(--ease-ui);
}

.tawaran__petak:hover {
  border-color: var(--m-emas);
  background: rgba(6, 23, 16, 0.75);
  color: var(--m-krem);
}

.tawaran__nama {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--m-teks);
}

.tawaran__harga {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--m-emas);
  font-variant-numeric: tabular-nums;
}

.tawaran__kecil {
  font-size: 0.75rem;
  color: var(--m-teks-2);
}

.tombol--besar {
  min-height: 52px;
  padding-inline: 1.6rem;
  font-size: 1rem;
}

@media (max-width: 699px) {
  .bar-atas {
    display: none;
  }
  .fh-mewah .hero-penuh__isi {
    padding-block: 1.6rem 1.75rem;
  }
  .fh-mewah .hero-penuh .eyebrow {
    margin-bottom: 0.7rem;
  }
  .fh-mewah .hero-penuh__mekanisme {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .fh-mewah .hero-penuh__gambar img {
    object-position: 78% 50%;
  }
  .fh-mewah .hero-penuh__scrim {
    background: linear-gradient(180deg, rgba(6, 23, 16, 0.55) 0%, rgba(6, 23, 16, 0.88) 42%, rgba(6, 23, 16, 0.96) 100%);
  }
  .hero-penuh__aksi {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
  }
  .hero-penuh__aksi .tautan-cta {
    align-self: center;
  }
  .fh-mewah .chip-fakta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    padding-top: 1rem;
  }
}

/* kartu paket: label bukan tombol, hemat menonjol, teks lebih besar */
.paket__label {
  background: rgba(6, 23, 16, 0.78);
  border: 1px solid var(--m-emas);
  color: var(--m-emas);
}

.paket__ilustrasi {
  font-size: 0.75rem;
}

.paket__ringkas {
  font-size: 0.9375rem;
}

.hemat {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--r-pil);
  background: rgba(212, 176, 106, 0.16);
  border: 1px solid var(--m-emas-garis);
  color: var(--m-krem);
  font-size: 0.875rem;
  font-weight: 600;
}

.happy .hemat {
  background: rgba(10, 34, 20, 0.08);
  border-color: rgba(10, 34, 20, 0.25);
  color: var(--hijau-tua);
}

@media (max-width: 699px) {
  .paket__gambar {
    aspect-ratio: 16 / 9;
  }
}

/* tombol hijau tua di pita krem Happy Hour */
.tombol--hijau {
  background: var(--m-hijau);
  border-color: var(--m-hijau);
  color: var(--m-krem);
}

.tombol--hijau:hover {
  background: #123a22;
  color: #fff;
}

.happy .mikro {
  color: var(--ink-3);
  margin: 0;
}

/* pemilih cabang ringkas */
.daftar-cabang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .daftar-cabang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.baris-cabang {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--m-emas-tua);
  border-radius: var(--r-besar);
  box-shadow: var(--bayang-1);
}

.baris-cabang__info h3 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.baris-cabang__info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.baris-cabang__aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
}

.baris-cabang__aksi .tombol--emas {
  border-color: rgba(122, 92, 30, 0.5);
}

/* tautan di beranda mewah: hijau tua + garis emas, bukan hijau terang v1 */
.fh-mewah .section .tautan-panah {
  color: var(--m-hijau);
  text-decoration-color: var(--m-emas-tua);
}

/* penutup: empat tombol booking langsung */
.penutup-cabang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 40rem;
  margin: 1.5rem auto 0;
}

.penutup-cabang .tombol {
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: center;
}

@media (min-width: 900px) {
  .penutup-cabang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
  }
}

/* bar pesan HP: dua baris harga, tombol 44 px */
.bar-pesan__teks small {
  display: block;
  font-size: 0.75rem;
  color: var(--m-teks-2);
}

.bar-pesan .tombol--kecil,
.kepala-situs__aksi .tombol--kecil {
  min-height: 44px;
}

/* footer HP lebih ringkas */
.kaki__cabang li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
}

@media (max-width: 699px) {
  .kaki__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
  .kaki__merek {
    grid-column: 1 / -1;
  }
  .kaki__cabang {
    font-size: 0.8125rem;
  }
}

.baris-cabang__ulasan {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-hijau);
  text-decoration: none;
}

.baris-cabang__ulasan span {
  color: var(--m-emas-tua);
}

/* ---------------------------------------------- baris video Instagram (facade) */
.ig-baris {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 699px) {
  .ig-baris {
    grid-auto-columns: 62%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

.ig-baris > li {
  scroll-snap-align: start;
}

.ig-kartu {
  position: relative;
  display: block;
  aspect-ratio: 350 / 469;
  border-radius: var(--r-besar);
  overflow: hidden;
  background: var(--m-hijau);
  border: 1px solid var(--m-emas-garis);
  text-decoration: none;
}

.ig-kartu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-masuk);
}

.ig-kartu:hover img {
  transform: scale(1.04);
}

.ig-kartu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 23, 16, 0.85));
}

.ig-kartu__putar {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(6, 23, 16, 0.6);
  border: 1.5px solid var(--m-emas);
}

.ig-kartu__putar::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 18px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent var(--m-emas);
}

.ig-kartu__judul {
  position: absolute;
  z-index: 1;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.8rem;
  color: var(--m-krem);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.ig-tayang {
  aspect-ratio: auto;
  height: 560px;
  border-radius: var(--r-besar);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--garis);
}

.ig-tayang iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* banner izin: latar hijau tua mewah, tautan emas (kontras > 7:1) */
.consent {
  background: #061710;
  border-top: 1px solid var(--m-emas-garis);
}

.consent a {
  color: var(--m-emas);
  text-decoration: underline;
}

.consent p {
  color: var(--m-teks);
}

/* halaman layanan ke rumah */
.remah--terang a,
.remah--terang li {
  color: var(--m-teks-2);
}

@media (min-width: 700px) {
  .paket-grid--dua {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 52rem;
    margin-inline: auto;
  }
}

.langkah-mewah--terang li {
  border-top-color: var(--garis);
}

.langkah-mewah--terang h3 {
  color: var(--ink);
}

.langkah-mewah--terang p {
  color: var(--ink-2);
}

.langkah-mewah--terang li::before {
  color: var(--m-emas-tua);
}

.rumah__wa .tombol--emas {
  width: 100%;
}

/* paket member */
.member-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.member {
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--m-hijau);
  color: var(--m-teks);
  border: 1px solid var(--m-emas-garis);
  border-radius: var(--r-besar);
}

.member h3 {
  color: var(--m-krem);
  margin: 0.2rem 0 0.6rem;
}

.member__paket {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-emas);
}

.member__harga {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
  font-weight: 600;
  color: var(--m-emas);
  font-variant-numeric: tabular-nums;
}

.member__ket {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--m-teks-2);
}

.paket-pilihan {
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--m-emas-tua);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

/* sasaran tautan "#..." tidak tertutup kepala situs yang menempel */
#paket,
#happy-hour,
#pilih-cabang,
#video,
#member,
#layanan-lain {
  scroll-margin-top: 76px;
}

/* ==========================================================================
   LEMBAR PESANAN WHATSAPP (dialog)
   Ponsel: lembar dari bawah layar. Layar lebar: kotak di tengah.
   ========================================================================== */
.lembar {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--m-krem);
  color: var(--ink);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.lembar[open] {
  display: flex;
  flex-direction: column;
  animation: lembar-naik 260ms ease-out;
}

.lembar::backdrop {
  background: rgba(6, 23, 16, 0.62);
}

@keyframes lembar-naik {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lembar[open] {
    animation: none;
  }
}

@media (min-width: 700px) {
  .lembar {
    margin: auto;
    border-radius: 18px;
    max-height: 88vh;
  }
}

.lembar__isi {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1rem;
}

.lembar__kepala {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 -1rem 0.25rem;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--m-hijau);
  color: var(--m-krem);
}

.lembar__kepala h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--m-krem);
}

.lembar__tutup {
  width: 44px;
  height: 44px;
  border: 1px solid var(--m-emas-garis);
  border-radius: 50%;
  background: transparent;
  color: var(--m-krem);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lembar__bagian {
  min-width: 0;
  margin: 0;
  padding: 0.9rem 0 0.4rem;
  border: 0;
  border-bottom: 1px solid rgba(22, 33, 27, 0.1);
}

.lembar__bagian legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5524;
}

.lembar__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.lembar__item .lembar__pilih {
  grid-column: 1 / -1;
}

.lembar__item .lembar__hapus {
  justify-self: end;
}

.lembar__pilih {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(22, 33, 27, 0.25);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.lembar__jam {
  margin-top: 0.6rem;
}

.lembar__jumlah {
  display: flex;
  align-items: center;
  border: 1px solid rgba(22, 33, 27, 0.25);
  border-radius: 10px;
  background: #fff;
}

.lembar__jumlah button {
  width: 42px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--m-hijau);
  font-size: 1.3rem;
  cursor: pointer;
}

.lembar__jumlah output {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
}

.lembar__jumlah output::after {
  content: " org";
  font-weight: 400;
  font-size: 0.75rem;
}

.lembar__hapus,
.lembar__tambah-layanan {
  min-height: 40px;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--m-hijau);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lembar__hapus {
  color: #8a2f1d;
  font-weight: 500;
}

.lembar__chip-daftar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lembar__chip-daftar--geser {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: none;
}

.lembar__chip-daftar--geser::-webkit-scrollbar {
  display: none;
}

.lembar__chip {
  position: relative;
  flex: none;
}

.lembar__chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.lembar__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(22, 33, 27, 0.25);
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  white-space: nowrap;
}

.lembar__chip input:checked + span {
  border-color: var(--m-hijau);
  background: var(--m-hijau);
  color: var(--m-krem);
  font-weight: 600;
}

.lembar__chip input:focus-visible + span {
  outline: 3px solid var(--m-emas);
  outline-offset: 2px;
}

.lembar__chip input:disabled + span {
  opacity: 0.38;
  text-decoration: line-through;
}

.lembar__rumah {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.75rem 0 0.3rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  font-size: 0.92rem;
}

.lembar__rumah[hidden] {
  display: none;
}

.lembar__rumah input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--m-hijau);
}

.lembar__catatan {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: #4a5550;
}

.lembar__kaki {
  position: sticky;
  bottom: 0;
  margin: 0.75rem -1rem 0;
  padding: 0.7rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--m-krem);
  border-top: 1px solid rgba(22, 33, 27, 0.14);
  box-shadow: 0 -8px 18px rgba(22, 33, 27, 0.08);
}

.lembar__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lembar__total span {
  font-weight: 600;
}

.lembar__total small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #4a5550;
}

.lembar__total b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--m-hijau);
  font-variant-numeric: tabular-nums;
}

/* hijau WhatsApp, digelapkan sedikit agar teks putih tetap terbaca (kontras 4,8:1) */
.lembar__kirim {
  gap: 0.5rem;
  margin-top: 0.6rem;
  background: #11833f;
  border-color: #11833f;
  color: #fff;
  font-weight: 700;
}

.lembar__kirim:hover,
.lembar__kirim:focus-visible {
  background: #0c6b33;
  border-color: #0c6b33;
  color: #fff;
}

.lembar__kirim svg {
  flex: none;
}

.lembar__kirim[aria-disabled="true"] {
  background: #7fb595;
  border-color: #7fb595;
  color: #fff;
}

.lembar__peringatan {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #8a2f1d;
  text-align: center;
}

.lembar__tanya {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.88rem;
}

.lembar__tanya a {
  color: var(--m-hijau);
}

.lembar__tanya a[hidden] {
  display: none;
}

body:has(.lembar[open]) {
  overflow: hidden;
}

.lembar__item .lembar__jumlah {
  justify-self: start;
}

.lembar__peringatan:empty {
  display: none;
}



/* --- pemilih layanan bergaya kartu (pengganti <select> bawaan) --- */
.lembar__pilih--asli {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lembar__pemilih {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  min-height: 52px;
  padding: 0.6rem 2.4rem 0.6rem 0.85rem;
  border: 1px solid rgba(22, 33, 27, 0.25);
  border-radius: 12px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a2214' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.9rem center;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lembar__pemilih-nama {
  font-weight: 600;
  font-size: 1rem;
}

.lembar__pemilih:not(.lembar__pemilih--terisi) .lembar__pemilih-nama {
  font-weight: 400;
  color: #5b6560;
}

.lembar__pemilih-meta {
  font-size: 0.82rem;
  color: #4a5550;
}

.lembar__daftar {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--m-krem);
}

.lembar__daftar[hidden] {
  display: none;
}

.lembar__daftar .lembar__kepala {
  position: static;
  margin: 0;
}

.lembar__daftar-isi {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 1rem 1.5rem;
}

.lembar__daftar-grup {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5524;
}

/* baris ringkas (semua layanan selain Fun Me) */
.lembar__opsi {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  row-gap: 0.05rem;
  width: 100%;
  padding: 0.6rem 0.25rem;
  border: 0;
  border-bottom: 1px solid rgba(22, 33, 27, 0.1);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lembar__opsi:hover {
  background: rgba(255, 255, 255, 0.6);
}

.lembar__opsi:focus-visible {
  outline: 3px solid var(--m-emas);
  outline-offset: 2px;
}

.lembar__opsi[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--m-hijau);
  padding-left: 0.6rem;
}

/* kotak lengkap: Paket Fun Me */
.lembar__opsi--kotak {
  row-gap: 0.15rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(22, 33, 27, 0.14);
  border-radius: 12px;
  background: #fff;
}

.lembar__opsi--kotak:hover {
  background: #fff;
  border-color: rgba(10, 34, 20, 0.4);
}

.lembar__opsi--kotak[aria-pressed="true"] {
  border: 2px solid var(--m-hijau);
  padding: calc(0.75rem - 1px) calc(0.85rem - 1px);
  background: #f3f7f1;
  box-shadow: none;
}

.lembar__opsi-nama {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.lembar__opsi--kotak .lembar__opsi-nama {
  font-size: 1rem;
}

.lembar__opsi-saran {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #fbf1da;
  color: #6b5524;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.lembar__opsi-harga {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--m-hijau);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lembar__opsi-meta {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: #4a5550;
}

.lembar__opsi-hemat {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #e3f1e6;
  color: #0c6b33;
  font-weight: 700;
  font-size: 0.72rem;
}

.lembar__opsi-rinci {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(22, 33, 27, 0.15);
  font-size: 0.78rem;
  line-height: 1.5;
  color: #5b6560;
}

/* rincian pada baris ringkas (promo): tanpa garis, lebih rapat */
.lembar__opsi:not(.lembar__opsi--kotak) .lembar__opsi-rinci {
  margin-top: 0.15rem;
  padding-top: 0;
  border-top: 0;
}

/* kotak layanan terpilih: tata letak sama dengan kartu di daftar */
.lembar__pemilih--terisi {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.75rem 2.4rem 0.75rem 0.85rem;
  border: 2px solid var(--m-hijau);
  background-color: #f3f7f1;
}

.lembar__pemilih--terisi .lembar__opsi-nama {
  font-size: 1rem;
}

.lembar__pemilih--terisi .lembar__opsi-rinci {
  border-top-color: rgba(22, 33, 27, 0.15);
}