/* ==========================================================================
   PT Mughni Mubarok Lestari — gaya halaman publik
   Warna diambil dari logo: biru tetes, hijau daun, navy malam.
   ========================================================================== */
:root {
  --tetes: #2B01F4;
  --tetes-tua: #1A0E9E;
  --tetes-muda: #5B8CFF;
  --daun: #0B7A1E;
  --daun-muda: #E3F4E6;
  --malam: #0F1240;
  --embun: #F1F4FF;
  --garis: #DDE2F2;
  --redup: #545B78;
  --putih: #FFFFFF;
  --wa: #0F8A45;
  --wa-tua: #0B6E37;
  --peringatan: #8A5A00;
  --peringatan-bg: #FFF3D6;
  --galat: #B42318;

  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lebar: 1180px;
  --jari: 14px;
  --bayang: 0 18px 50px -24px rgba(26, 14, 158, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--huruf);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--malam);
  background: var(--putih);
  -webkit-font-smoothing: antialiased;
}
.produk-harga, .ringkas b, .hasil-angka b, .tabel-item, .item-keranjang .harga-item { font-variant-numeric: tabular-nums; }
img, svg { display: block; max-width: 100%; }
a { color: var(--tetes); text-underline-offset: 3px; }
a:hover { color: var(--tetes-tua); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tetes-muda); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wadah { width: min(var(--lebar), 100% - 32px); margin-inline: auto; }
.lewati { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--malam); color: #fff; padding: 10px 16px; border-radius: 8px; }
.lewati:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.tombol:active { transform: translateY(1px); }
.tombol svg { width: 20px; height: 20px; }
.tombol-utama { background: var(--tetes); color: #fff; }
.tombol-utama:hover { background: var(--tetes-tua); color: #fff; }
.tombol-wa { background: var(--wa); color: #fff; }
.tombol-wa:hover { background: var(--wa-tua); color: #fff; }
.tombol-garis { background: transparent; border-color: currentColor; color: var(--tetes-tua); }
.tombol-garis:hover { background: var(--embun); color: var(--tetes-tua); }
.tombol-kecil { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.tombol-penuh { width: 100%; }
.tombol[disabled] { opacity: .55; cursor: progress; }

/* ---------- Header ---------- */
.kepala {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kepala.menggulir { border-bottom-color: var(--garis); }
.kepala-isi { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--malam); font-weight: 800; letter-spacing: -.01em; }
.merek-logo { display: grid; place-items: center; width: 48px; height: 48px; background: #fff; border-radius: 50%; flex: none; }
.merek-logo img { width: 44px; height: 44px; }
.merek-logo.besar { width: 76px; height: 76px; }
.merek-logo.besar img { width: 66px; height: 66px; }
.merek-teks { line-height: 1.15; font-size: 1.02rem; }
.merek-teks small { font-size: .8em; font-weight: 700; color: var(--redup); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--malam); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.nav a:hover, .nav a.aktif { background: var(--embun); color: var(--tetes-tua); }
.kepala-aksi { display: flex; align-items: center; gap: 8px; }
.tombol-keranjang {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--malam); color: #fff; font-weight: 700; cursor: pointer;
}
.tombol-keranjang svg { width: 20px; height: 20px; }
.jumlah-keranjang {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--daun); color: #fff; font-size: .8125rem; display: grid; place-items: center;
}
.jumlah-keranjang.denyut { animation: denyut .35s ease; }
@keyframes denyut { 50% { transform: scale(1.3); } }
.tombol-menu { display: none; width: 44px; height: 44px; border: 0; background: var(--embun); border-radius: 10px; cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.tombol-menu i { display: block; height: 2px; background: var(--malam); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { background: var(--tetes-tua); color: #fff; overflow: hidden; }
.hero-isi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 72px 0 56px; }
.hero-sejak { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 600; font-size: .9375rem; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; max-width: 15ch; margin-bottom: 20px; }
.hero-sub { font-size: 1.1875rem; max-width: 52ch; color: #DCE3FF; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.hero .tombol-utama { background: #fff; color: var(--tetes-tua); }
.hero .tombol-utama:hover { background: var(--embun); }
.hero-fakta { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; color: #C9D3FF; font-size: .9375rem; }
.hero-fakta strong { display: block; color: #fff; font-size: 1.25rem; }
.hero-visual { position: relative; justify-self: center; width: min(360px, 100%); }
.galon-hero { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(5, 2, 60, .45)); }
.air-naik { transform: translateY(150px); animation: isi 2.6s cubic-bezier(.2, .7, .2, 1) .3s forwards; }
.gelombang { animation: ombak 6s linear infinite; }
@keyframes isi { from { transform: translateY(420px); } to { transform: translateY(150px); } }
@keyframes ombak { to { transform: translateX(240px); } }
.gelembung circle { fill: #fff; opacity: 0; animation: gelembung 4s ease-in infinite; }
.gelembung circle:nth-child(2) { animation-delay: 1.2s; }
.gelembung circle:nth-child(3) { animation-delay: 2.1s; }
.gelembung circle:nth-child(4) { animation-delay: 2.9s; }
@keyframes gelembung { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .7; } 100% { opacity: 0; transform: translateY(-190px); } }
.hero-kartu {
  position: absolute; left: -24px; bottom: 36px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px;
  background: #fff; color: var(--malam); box-shadow: var(--bayang);
}
.hero-kartu img { width: 54px; height: 54px; }
.hero-kartu b { display: block; font-size: .9375rem; }
.hero-kartu span { font-size: .875rem; color: var(--redup); }
.pita-merek { background: #fff; color: var(--malam); }
.pita-merek .wadah { display: flex; align-items: center; gap: 32px; padding: 22px 0; flex-wrap: wrap; }
.pita-judul { margin: 0; font-size: .9375rem; color: var(--redup); font-weight: 600; }
.pita-merek ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 0; margin: 0; }
.pita-merek li { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--tetes-tua); }

/* ---------- Bagian umum ---------- */
.bagian { padding: 88px 0; }
.bagian-kepala { max-width: 62ch; margin-bottom: 36px; }
.bagian-kepala p { color: var(--redup); }
.bagian-kepala-baris { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.bagian-kepala-baris > div { max-width: 62ch; }

/* ---------- Filter & rak produk ---------- */
.saring { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.saring-jenis { display: inline-flex; padding: 4px; background: var(--embun); border-radius: 999px; }
.saring-jenis button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: var(--redup); cursor: pointer; }
.saring-jenis button[aria-checked="true"] { background: #fff; color: var(--tetes-tua); box-shadow: 0 2px 8px rgba(15, 18, 64, .12); }
.saring-merek select, .saring-cari input {
  min-height: 46px; border: 1.5px solid var(--garis); border-radius: 999px; background: #fff; padding: 0 18px;
}
.saring-merek select { padding-right: 36px; }
.saring-cari { position: relative; flex: 1 1 220px; max-width: 340px; }
.saring-cari svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--redup); }
.saring-cari input { width: 100%; padding-left: 42px; }

.rak { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 40px 28px; }
.produk { display: flex; flex-direction: column; }
.produk-gambar {
  position: relative; display: grid; place-items: end center;
  height: 210px; padding-top: 12px;
  background: linear-gradient(180deg, var(--embun) 0%, #E7ECFC 100%);
  border-radius: var(--jari) var(--jari) 4px 4px;
  border-bottom: 8px solid #C8D2F2; /* papan rak */
}
.ilus { width: 150px; height: 188px; }
.produk-info { padding: 16px 2px 0; flex: 1; }
.produk-merek { margin: 0 0 2px; font-size: .875rem; font-weight: 700; color: var(--daun); }
.produk h3 { margin-bottom: 4px; }
.produk-isi { margin: 0; color: var(--redup); font-size: .9375rem; }
.produk-desk { margin: 6px 0 0; font-size: .875rem; color: var(--redup); }
.produk-harga { margin: 12px 0 0; font-size: 1.25rem; font-weight: 800; }
.produk-harga span { font-size: .875rem; font-weight: 600; color: var(--redup); }
.produk-aksi { display: flex; gap: 8px; margin-top: 14px; }
.produk-aksi .tombol { flex: 1; padding: 0 12px; }
.produk-aksi .tombol.ada { background: var(--daun); }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--garis); border-radius: 999px; overflow: hidden; height: 42px; flex: none; }
.stepper button { width: 34px; height: 100%; border: 0; background: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; color: var(--tetes-tua); }
.stepper button:hover { background: var(--embun); }
.stepper input { width: 40px; height: 100%; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rak-kosong { text-align: center; padding: 40px 0; color: var(--redup); }

/* ---------- Kalkulator ---------- */
.bagian-kalkulator { background: var(--embun); }
.kalkulator { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 40px; align-items: start; }
.kalkulator-teks p { color: var(--redup); }
.kalkulator-form { display: grid; gap: 22px; }
.isian-geser span { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.isian-geser output { font-weight: 800; color: var(--tetes-tua); }
input[type="range"] { width: 100%; accent-color: var(--tetes); height: 28px; }
.isian-pilih { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.isian-pilih legend { font-weight: 600; margin-bottom: 8px; width: 100%; }
.isian-pilih label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--garis); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600; }
.isian-pilih label:has(input:checked) { border-color: var(--tetes); background: #fff; color: var(--tetes-tua); box-shadow: inset 0 0 0 1px var(--tetes); }
.isian-pilih input { accent-color: var(--tetes); }
.kalkulator-hasil { background: #fff; border-radius: var(--jari); padding: 28px; border-top: 6px solid var(--tetes); box-shadow: var(--bayang); }
.hasil-angka { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.hasil-angka b { display: block; font-size: 4rem; line-height: 1; letter-spacing: -.04em; color: var(--tetes); }
.hasil-rinci { color: var(--redup); }

/* ---------- Isian form umum ---------- */
.isian { display: grid; gap: 6px; }
.isian > span { font-weight: 600; font-size: .9375rem; }
.isian em { font-style: normal; font-weight: 500; color: var(--redup); }
.isian input, .isian select, .isian textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid var(--garis); border-radius: 10px; background: #fff;
}
.isian textarea { resize: vertical; }
.isian input:focus, .isian select:focus, .isian textarea:focus { border-color: var(--tetes); outline: none; box-shadow: 0 0 0 3px rgba(43, 1, 244, .15); }
.isian.salah input, .isian.salah select, .isian.salah textarea { border-color: var(--galat); }
small[data-galat] { color: var(--galat); font-size: .875rem; font-weight: 600; }
small[data-galat]:empty { display: none; }
.galat-umum { color: var(--galat); font-weight: 600; margin: 0; }
.galat-umum:empty { display: none; }
.petunjuk { color: var(--redup); font-size: .875rem; }
.jebakan { position: absolute; left: -9999px; }

/* ---------- Langkah pesan ---------- */
.langkah { list-style: none; counter-reset: langkah; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 0; margin: 0 0 64px; }
.langkah li { counter-increment: langkah; position: relative; padding-top: 64px; }
.langkah li::before {
  content: counter(langkah); position: absolute; top: 0; left: 0;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tetes); color: #fff; font-weight: 800; font-size: 1.25rem;
}
.langkah li:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 60px; right: -16px; height: 2px; background: repeating-linear-gradient(90deg, var(--garis) 0 8px, transparent 8px 14px); }
.langkah p { color: var(--redup); }
.bayar { border-top: 1px solid var(--garis); padding-top: 40px; }
.bayar > h3 { font-size: 1.375rem; }
.bayar-daftar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bayar-daftar > div { border-left: 4px solid var(--daun); padding-left: 18px; }
.bayar-daftar h4 { font-size: 1.0625rem; margin-bottom: 4px; }
.bayar-daftar p { color: var(--redup); margin: 0; }

/* ---------- Area ---------- */
.bagian-area { background: var(--malam); color: #fff; }
.bagian-area p { color: #C9D0EE; }
.area { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.area .isian > span { color: #fff; }
.area .isian select { border-color: transparent; color: var(--malam); }
.cek-area { max-width: 420px; margin-top: 24px; }
.cek-hasil { margin-top: 14px; font-weight: 600; }
.cek-hasil.ya { color: #9EF0AE !important; }
.cek-hasil.tidak { color: #FFD38A !important; }
.area-daftar { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.area-daftar li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.area-daftar b { font-size: 1.125rem; }
.area-daftar span { color: #C9D0EE; }

/* ---------- Ulasan ---------- */
.ulasan-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.ulasan { position: relative; margin: 0; padding: 28px; border-radius: var(--jari); background: var(--embun); }
.ulasan-contoh { background: #fff; border: 2px dashed #E5C77A; }
.label-contoh { position: absolute; top: -12px; right: 18px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; background: var(--peringatan-bg); color: var(--peringatan); }
.bintang { color: #E9A100; letter-spacing: 2px; margin-bottom: 10px; }
.bintang span { color: var(--garis); }
.ulasan blockquote { margin: 0 0 18px; font-size: 1.0625rem; }
.ulasan figcaption b { display: block; }
.ulasan figcaption span { color: var(--redup); font-size: .9375rem; }
.kosong { color: var(--redup); }

/* ---------- Tentang & FAQ ---------- */
.bagian-tentang { background: var(--embun); }
.tentang { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; }
.tentang-teks p { font-size: 1.125rem; max-width: 52ch; }
.faq h2 { font-size: 1.5rem; }
.faq details { border-bottom: 1px solid var(--garis); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 500; color: var(--tetes); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--redup); padding-right: 40px; }

/* ---------- Kontak ---------- */
.kontak { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: stretch; }
.kontak dl { display: grid; grid-template-columns: 140px 1fr; gap: 14px 16px; margin: 24px 0 8px; }
.kontak dt { font-weight: 700; }
.kontak dd { margin: 0; color: var(--redup); }
.peta { min-height: 380px; border-radius: var(--jari); overflow: hidden; background: var(--embun); }
.peta iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ---------- Footer ---------- */
.kaki { background: var(--malam); color: #C9D0EE; padding: 64px 0 0; }
.kaki a { color: #fff; }
.kaki h2 { font-size: 1rem; color: #fff; letter-spacing: 0; }
.kaki-isi { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr .8fr; gap: 40px; }
.kaki-merek { display: flex; gap: 16px; align-items: flex-start; }
.kaki-merek strong { color: #fff; }
.kaki-tautan { display: grid; gap: 6px; }
.kaki-bawah { margin-top: 48px; padding: 20px 0 96px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; }

/* ---------- Tombol WA melayang ---------- */
.wa-melayang {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px; border-radius: 999px;
  background: var(--wa); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(11, 110, 55, .7);
}
.wa-melayang:hover { background: var(--wa-tua); color: #fff; }
.wa-melayang svg { width: 28px; height: 28px; }
body.laci-buka .wa-melayang { display: none; }

/* ---------- Laci keranjang ---------- */
.lapisan { position: fixed; inset: 0; z-index: 60; background: rgba(15, 18, 64, .45); }
.laci {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(460px, 100%); display: flex; flex-direction: column;
  background: #fff; box-shadow: -20px 0 60px rgba(15, 18, 64, .25);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  visibility: hidden;
}
.laci.buka { transform: none; visibility: visible; }
.laci-kepala { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--garis); }
.laci-kepala h2 { font-size: 1.25rem; margin: 0; }
.tutup { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--embun); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.laci-isi { flex: 1; overflow-y: auto; padding: 20px 22px; }
.item-keranjang { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.item-keranjang h3 { font-size: 1rem; margin: 0; }
.item-keranjang p { margin: 0; color: var(--redup); font-size: .875rem; }
.item-keranjang .harga-item { font-weight: 800; text-align: right; }
.item-keranjang .baris-aksi { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.hapus-item { border: 0; background: none; color: var(--galat); font-weight: 600; cursor: pointer; padding: 6px 0; }
.keranjang-kosong { text-align: center; padding: 48px 0; color: var(--redup); }
.form-pesan fieldset { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
.form-pesan legend { font-weight: 800; font-size: 1.0625rem; margin-bottom: 10px; }
.pil label { padding: 8px 18px; }
.pilih-bayar { display: grid; gap: 8px; }
.pilih-bayar label { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--garis); border-radius: 10px; cursor: pointer; font-weight: 600; }
.pilih-bayar label:has(input:checked) { border-color: var(--tetes); box-shadow: inset 0 0 0 1px var(--tetes); }
.pilih-bayar label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pilih-bayar input { accent-color: var(--tetes); }
.centang { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.centang input { width: 20px; height: 20px; accent-color: var(--tetes); }
.laci-kaki { border-top: 1px solid var(--garis); padding: 16px 22px 20px; background: #fff; }
.ringkas { display: flex; justify-content: space-between; align-items: baseline; }
.ringkas b { font-size: 1.375rem; }
.ringkas-catatan { font-size: .8125rem; color: var(--redup); margin: 2px 0 12px; }
.laci-tombol { display: flex; gap: 8px; }

/* ---------- Dialog ---------- */
.dialog { width: min(440px, calc(100% - 32px)); border: 0; border-radius: 18px; padding: 28px; color: var(--malam); box-shadow: 0 30px 80px rgba(15, 18, 64, .35); }
.dialog::backdrop { background: rgba(15, 18, 64, .5); }
.dialog h2 { font-size: 1.5rem; }
.dialog p { color: var(--redup); }
.dialog form { display: grid; gap: 14px; }
.dialog form p, .dialog form h2 { margin: 0; }
.sukses-ikon svg { width: 56px; height: 56px; margin-bottom: 14px; }
.kode-pesanan { font-size: 1.75rem; font-weight: 800; color: var(--tetes-tua) !important; letter-spacing: .02em; margin-top: -6px; }
.dialog-tombol { display: grid; gap: 8px; margin-top: 8px; }
.rating { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating legend { width: 100%; font-weight: 600; margin-bottom: 4px; }
.rating input { position: absolute; opacity: 0; }
.rating label { font-size: 2rem; color: var(--garis); cursor: pointer; line-height: 1; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #E9A100; }
.rating input:focus-visible + label { outline: 3px solid var(--tetes-muda); border-radius: 4px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s;
  background: var(--malam); color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600;
  max-width: calc(100% - 32px);
}
.toast.tampil { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Halaman lacak ---------- */
.lacak { padding: 64px 0 96px; }
.lacak-isi { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.lacak-form { display: grid; gap: 16px; padding: 28px; border-radius: var(--jari); background: var(--embun); }
.lacak-hasil h2 { font-size: 1.5rem; }
.lacak-ringkas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 20px 0 28px; }
.lacak-ringkas div span { display: block; color: var(--redup); font-size: .875rem; }
.lacak-ringkas div b { font-size: 1.0625rem; }
.status-label { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .875rem; font-weight: 700; background: var(--embun); color: var(--tetes-tua); }
.status-label.selesai { background: var(--daun-muda); color: var(--daun); }
.status-label.batal { background: #FDE8E7; color: var(--galat); }
.jejak { list-style: none; padding: 0; margin: 0; }
.jejak li { position: relative; padding: 0 0 22px 32px; }
.jejak li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--garis); }
.jejak li.selesai::before { background: var(--tetes); }
.jejak li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--garis); }
.jejak li.selesai:not(:last-child)::after { background: var(--tetes); }
.jejak b { display: block; }
.jejak span { color: var(--redup); font-size: .9375rem; }
.tabel-item { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
.tabel-item th, .tabel-item td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--garis); }
.tabel-item td:last-child, .tabel-item th:last-child { text-align: right; }
.kotak-info { padding: 16px 18px; border-radius: 12px; background: var(--peringatan-bg); color: var(--peringatan); font-weight: 600; }

/* ---------- Responsif ---------- */
@media (max-width: 1080px) {
  .nav { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 20px; background: #fff; border-bottom: 1px solid var(--garis); display: none; }
  .nav.buka { display: flex; }
  .nav a { padding: 14px 8px; border-bottom: 1px solid var(--garis); border-radius: 0; }
  .tombol-menu { display: flex; }
  .kepala-aksi { margin-left: auto; }
  .kalkulator { grid-template-columns: 1fr 1fr; }
  .kalkulator-teks { grid-column: 1 / -1; }
  .kaki-isi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-isi { grid-template-columns: 1fr; padding: 48px 0 40px; gap: 32px; }
  .hero-visual { width: min(260px, 70%); }
  .hero-kartu { left: auto; right: -40px; bottom: 16px; }
  .langkah { grid-template-columns: 1fr 1fr; }
  .langkah li::after { display: none; }
  .bayar-daftar, .area, .tentang, .kontak, .lacak-isi { grid-template-columns: 1fr; gap: 32px; }
  .bagian { padding: 64px 0; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .merek-teks { font-size: .9rem; }
  .merek-teks small { display: none; }
  .tombol-keranjang span { display: none; }
  .tombol-keranjang { padding: 0 12px; }
  .hero-fakta { gap: 16px 24px; }
  .hero-kartu { right: -20px; }
  .kalkulator { grid-template-columns: 1fr; }
  .langkah { grid-template-columns: 1fr; }
  .area-daftar li { grid-template-columns: 1fr; gap: 2px; }
  .kontak dl { grid-template-columns: 1fr; gap: 2px; }
  .kontak dd { margin-bottom: 10px; }
  .kaki-isi { grid-template-columns: 1fr; }
  .rak { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .produk-gambar { height: 170px; }
  .ilus { width: 120px; height: 152px; }
  .produk-aksi { flex-direction: column; }
  .stepper { justify-content: space-between; width: 100%; }
  .stepper input { flex: 1; }
  .produk h3 { font-size: 1rem; }
  .wa-melayang span { display: none; }
  .wa-melayang { padding: 14px; }
  .saring-cari { max-width: none; }
  .lacak-ringkas { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .rak { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .air-naik { animation: none; transform: translateY(150px); }
}