/* Elephas - katalog resmi. Mobile-first: aturan dasar untuk 375px, lebar besar menyusul. */

:root {
  --pink: #d94f86;
  --pink-soft: #fde9f0;
  --pink-line: #f7d3e0;
  --sky: #2e86b8;
  --sky-soft: #e4f2fa;
  --ink: #27354b;
  --muted: #6b7a90;
  --line: #ecdfe6;
  --bg: #ffffff;
  --bg-soft: #fff8fb;
  --r: 20px;
  --r-sm: 12px;
  --shadow: 0 10px 30px -18px rgba(39, 53, 75, 0.45);
  --gutter: 16px;
  --max: 1120px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }            /* clip, bukan hidden: hidden mematikan position:sticky */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* HANYA padding kiri-kanan. Versi sebelumnya memakai `padding: 0 var(--gutter)`
   dan nol atas-bawahnya itu MENGALAHKAN `section { padding: 80px 0 }`, karena
   selektor kelas menang atas selektor elemen. Akibatnya jarak antar section
   yang disetel di `section` tidak pernah benar-benar berlaku. */
.in { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark { width: 41px; height: 30px; flex: none; object-fit: contain; }
.brand span { font-size: 17px; }
/* Di layar sempit menu pindah ke laci (lihat .laci), bukan ke baris kedua yang
   digeser ke samping: di baris geser, tautan terakhir selalu terpotong di tepi
   dan tidak ada yang tahu masih ada menu di sebelah kanan. */
.hd-nav { display: none; margin-left: 10px; gap: 4px; }
.hd-nav a {
  text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600;
  padding: 8px 11px; border-radius: 999px; white-space: nowrap;
}
.hd-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.hd-nav a[aria-current="page"] { color: var(--pink); background: var(--pink-soft); }
.hd-sp { flex: 1; }
.hd-act { display: flex; align-items: center; gap: 8px; }

.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; text-decoration: none;
  background: var(--pink); color: #fff; line-height: 1.2;
  transition: transform 0.15s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.985); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sky { background: var(--sky); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-wide { width: 100%; }

/* ---------- hero ---------- */
/* overflow:hidden supaya foto yang sengaja menjorok ke bawah terpotong rapi di
   batas section, bukan menindih bagian berikutnya. */
.hero { background: linear-gradient(170deg, var(--pink-soft) 0%, var(--sky-soft) 100%); overflow: hidden; }
.hero-in { padding: 40px 0 44px; text-align: center; }
.tagline {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pink); background: #fff;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
}
h1 { font-size: 30px; line-height: 1.17; letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 800; }
.hero p { margin: 0 auto 22px; max-width: 46ch; color: #4b5a73; }
.hero-cta { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--ink);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow);
}
.chip svg { width: 15px; height: 15px; flex: none; color: var(--pink); }

/* ---------- sections ---------- */
/* Jarak antar section digandakan atas permintaan founder: bagian yang padat
   terbaca sebagai satu blok panjang, dan mata kehilangan tempat beristirahat.
   Section yang menyusul section lain mematikan padding atasnya lewat gaya
   sebaris, jadi jarak antar dua section = satu kali nilai ini, bukan dua. */
section { padding: 80px 0; }
.sec-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
h2 { font-size: 21px; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
.sec-hd a { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--pink); text-decoration: none; white-space: nowrap; }
.lead { color: var(--muted); margin: 2px 0 20px; max-width: 54ch; }

/* ---------- kartu produk ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; text-decoration: none; min-width: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.thumb { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 46%; height: 46%; color: var(--pink); opacity: 0.5; }
.thumb.sky { background: var(--sky-soft); }
.thumb.sky svg { color: var(--sky); }
.badge {
  position: absolute; left: 10px; top: 10px; background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px;
}
.card-b { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { font-size: 11px; font-weight: 700; color: var(--sky); letter-spacing: 0.04em; text-transform: uppercase; }
.card-nm { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0; }
.card-pr { margin-top: auto; padding-top: 6px; }
.pr-lbl { font-size: 11px; color: var(--muted); }
.pr-val { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.pr-none { font-size: 13px; font-weight: 700; color: var(--muted); }
.mks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mk { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }

/* ---------- kategori ---------- */
/* Kotak kategori 1:1, sebentuk dengan foto produk di kartu katalog supaya dua
   bagian ini terbaca sebagai satu keluarga, bukan dua komponen dari dua situs. */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 12px; border-radius: var(--r); border: 1px solid var(--line);
  background: #fff; text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.cat:hover { border-color: var(--pink-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-ik {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--bg-soft); margin-bottom: 6px;
}
.cat svg { width: 26px; height: 26px; color: var(--pink); }
.cat-nm { font-weight: 700; font-size: 14px; line-height: 1.25; }
.cat small { font-weight: 600; color: var(--muted); font-size: 12px; }

/* ---------- filter katalog ---------- */
/* Menempel di SEMUA ukuran. Dulu dimatikan di layar sempit karena menu HP ada
   di baris kedua sehingga tinggi headernya berubah-ubah; sejak menu pindah ke
   laci, tingginya pasti 60px di mana pun, jadi tidak ada lagi celah tempat
   kartu produk mengintip di antara header dan bilah filter. */
.filters {
  position: sticky; top: 59px; z-index: 30;
  background: var(--bg); padding: 12px 0; border-bottom: 1px solid var(--line);
}
.search { position: relative; margin-bottom: 10px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.search input {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 14px 11px 39px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--pink-line); outline-offset: 1px; background: #fff; }
.pills { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.pill[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }
.count { color: var(--muted); font-size: 13px; margin: 14px 0 12px; }

/* ---------- detail produk ---------- */
.crumb { font-size: 13px; color: var(--muted); padding: 14px 0 0; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--pink); }
.detail { display: grid; gap: 20px; padding: 16px 0 40px; }
.gal { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1 / 1; background: var(--bg-soft); display: grid; place-items: center; }
.gal svg { width: 38%; height: 38%; color: var(--pink); opacity: 0.45; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.detail h1 { font-size: 23px; margin-bottom: 8px; }
.full-title { margin: 0 0 14px; }
.full-title summary { cursor: pointer; font-size: 13px; color: var(--sky); font-weight: 700; }
.full-title p { font-size: 13px; color: var(--muted); margin: 8px 0 0; line-height: 1.6; }

.offers { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: #fff; }
.offers h3 { margin: 0 0 3px; font-size: 15px; }
.offers .note { font-size: 12px; color: var(--muted); margin: 0 0 13px; }
.offer { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.offer:first-of-type { border-top: 0; }
.offer-id { min-width: 0; flex: 1; }
.offer-nm { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.offer-pr { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.offer-was { font-size: 12px; color: var(--muted); text-decoration: line-through; margin-left: 6px; font-weight: 600; }
.tag { font-size: 10px; font-weight: 800; color: var(--pink); background: var(--pink-soft); padding: 3px 7px; border-radius: 999px; letter-spacing: 0.03em; }
.offer .btn { flex: none; }

/* ---------- gerbang harga ---------- */
.gate {
  background: var(--pink-soft); border-radius: var(--r-sm); padding: 14px; margin-bottom: 14px;
}
.gate[hidden] { display: none; }
.gate strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.gate p { margin: 0 0 12px; font-size: 13px; color: #6b4a58; line-height: 1.5; }
.gate .btn { margin-right: 8px; }
/* Angka tetap digambar supaya lebar barisnya tidak melompat saat terbuka. */
.offer.terkunci .pr-kunci { color: var(--muted); letter-spacing: 0.06em; }
.offer.terkunci .tag-wrap,
.offer.terkunci .asal-wrap { display: none; }
.offer.terkunci .btn { opacity: 0.55; }

.vars { margin-top: 20px; }
.vars h3 { font-size: 15px; margin: 0 0 9px; }
.vlist { display: flex; flex-wrap: wrap; gap: 6px; }
.v { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); }
.vmore { font-size: 12px; color: var(--muted); align-self: center; }

.promise { margin-top: 20px; border-radius: var(--r); background: var(--sky-soft); padding: 16px; }
.promise h3 { margin: 0 0 9px; font-size: 15px; }
.promise ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: #3c4c66; }
.promise li { margin-bottom: 5px; }
/* Hanya tautan di dalam daftar. Ditulis `.promise a` dulu, dan itu menang
   melawan `.btn` (spesifisitas lebih tinggi) sehingga tombol "Ajukan penukaran"
   jadi biru di atas biru alias tidak terbaca. */
.promise ul a { color: var(--sky); font-weight: 700; }

/* ---------- formulir ---------- */
.form { display: grid; gap: 13px; max-width: 560px; }
.f { display: grid; gap: 6px; }
.f span { font-size: 13px; font-weight: 700; }
.f small { font-size: 12px; color: var(--muted); font-weight: 500; }
.f input, .f select, .f textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; color: var(--ink); width: 100%;
}
.f textarea { min-height: 96px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--pink-line); outline-offset: 1px; }
.rules { background: var(--pink-soft); border-radius: var(--r); padding: 16px; margin-bottom: 22px; }
.rules h3 { margin: 0 0 9px; font-size: 15px; }
.rules ol { margin: 0; padding-left: 19px; font-size: 13.5px; color: #5a3d4c; }
.rules li { margin-bottom: 6px; }
.addr { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.55; }

/* ---------- modal akun ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(39, 53, 75, 0.45); }
.modal-card {
  position: relative; width: 100%; max-width: 420px; background: #fff;
  border-radius: var(--r) var(--r) 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
.modal-x { position: absolute; right: 12px; top: 12px; border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 6px; line-height: 0; }
.tabs { display: flex; gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 999px; margin: 4px 0 18px; }
.tabs button {
  flex: 1; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  padding: 9px; border-radius: 999px; background: transparent; color: var(--muted);
}
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.modal h2 { font-size: 19px; margin: 0 0 4px; }
.modal .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.forgot { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--sky); }
/* Dua langkah: langkah 1 nama dan WhatsApp, langkah 2 email dan sandi. */
#form-daftar > div { display: grid; gap: 13px; }
#form-daftar > div[hidden] { display: none; }
.langkah-no {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pink);
}
.msg { font-size: 13px; font-weight: 600; border-radius: var(--r-sm); padding: 10px 12px; margin-top: 12px; }
.msg.ok { background: var(--sky-soft); color: #1d5e85; }
.msg.err { background: #fdeaea; color: #a12d2d; }
.msg[hidden] { display: none; }

/* ---------- akun ---------- */
.acct { display: grid; gap: 14px; max-width: 560px; }
.acct-card { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.acct-card h3 { margin: 0 0 4px; font-size: 15px; }
.acct-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv:first-of-type { border-top: 0; }
.kv b { font-weight: 700; }

/* ---------- footer ---------- */
footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 32px 0 40px; margin-top: 20px; }
.ft { display: grid; gap: 22px; }
.ft h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 9px; }
/* `.brand` di footer juga sebuah <a>; tanpa pengecualian ini ia ikut jadi
   display:block dan logonya lepas dari namanya. */
.ft a:not(.brand) { display: block; text-decoration: none; font-size: 14px; padding: 4px 0; font-weight: 600; }
.ft a.brand { text-decoration: none; }
.ft a:not(.brand):hover { color: var(--pink); }
.ft p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.ft-btm { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; font-size: 12.5px; color: var(--muted); }

.wa-float {
  position: fixed; right: 14px; bottom: 14px; z-index: 35; width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.7);
}
.wa-float svg { width: 27px; height: 27px; color: #fff; }

.empty { text-align: center; padding: 48px 0; color: var(--muted); }

/* ---------- lebar besar ---------- */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  h1 { font-size: 40px; }
  .hero-in { padding: 64px 0 68px; }
  .hero-cta { flex-direction: row; justify-content: center; max-width: none; }
  .card-nm { font-size: 15px; }
  .modal { place-items: center; }
  .modal-card { border-radius: var(--r); padding: 24px; }
  .detail h1 { font-size: 28px; }
}

@media (min-width: 960px) {
  .hd-nav { display: flex; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* auto-fit, bukan jumlah kolom tetap: tujuh kategori di grid enam kolom
     meninggalkan satu kartu sendirian di baris kedua. */
  .cats { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .cat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px; }
  h1 { font-size: 46px; }
  h2 { font-size: 25px; }
  section { padding: 112px 0; }
  .detail { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 36px; align-items: start; }
  .ft { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Tombol WhatsApp melayang menutupi tombol Beli di baris penawaran saat layar
   sempit. Di halaman produk tombol itu disembunyikan: kontak WhatsApp tetap ada
   di kotak garansi dan di footer. */
@media (max-width: 639px) {
  body.h-produk .wa-float { display: none; }
}

/* ---------- klip sosial ---------- */
.klip-rel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; scrollbar-width: none;
}
.klip-rel::-webkit-scrollbar { display: none; }
.klip {
  width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft); scroll-snap-align: start;
}
.klip-tiktok { height: 740px; }

@media (min-width: 960px) {
  .klip-rel { grid-auto-columns: minmax(340px, 1fr); }
}

/* Banner di kepala tab Daftar.
   Ditaruh di dalam padding kartu, bukan ditarik keluar dengan margin negatif:
   versi pertama memakai margin negatif dan banner itu naik menutupi bilah tab
   Daftar/Masuk. Gambar yang menutupi kendali adalah bug, bukan gaya. */
.modal-banner {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-sm); margin: 0 0 16px;
}

/* Baris "beli di website ini": belum dibuka, jadi tampil sebagai janji, bukan
   sebagai pilihan beli. Tanpa angka rupiah dan tombolnya <span>, bukan <a>,
   supaya tidak ada yang bisa diklik dan tidak ada yang bisa gagal. */
.offer-web { background: var(--pink-soft); border-radius: var(--r-sm); padding: 12px; margin-top: 4px; border-top: 0; }
.offer-web-pr { font-size: 14px; font-weight: 700; color: var(--pink); letter-spacing: 0; }
.tag-segera { background: var(--sky-soft); color: var(--sky); }
.btn-mati { opacity: 0.6; cursor: default; pointer-events: none; }

/* ---------- kartu akun sosial ---------- */
.sos-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sos {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; text-decoration: none;
}
.sos:hover { border-color: var(--pink-line); background: var(--bg-soft); }
.sos-ik { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--bg-soft); }
.sos-ik svg { width: 21px; height: 21px; }
.sos-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sos-tx b { font-size: 14px; font-weight: 700; }
.sos-ak { font-size: 13px; font-weight: 600; color: var(--sky); }
.sos-tx small { font-size: 12.5px; color: var(--muted); }

/* ---------- sematan akun ---------- */
.feed { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feed-k { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.feed-j {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line);
}
.feed-j svg { width: 17px; height: 17px; }
.feed-f { display: block; width: 100%; height: 420px; border: 0; }
/* Sematan profil TikTok adalah deretan mendatar yang bisa digeser, bukan satu
   video tegak: tingginya jauh lebih pendek daripada pemutar YouTube. */
.feed-f-tiktok { height: 420px; }

@media (min-width: 640px) {
  .sos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .sos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feed { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .feed-f { height: 480px; }
}

/* ---------- kepala halaman katalog ---------- */
.kat-top {
  background: linear-gradient(165deg, var(--pink-soft) 0%, var(--sky-soft) 120%);
  padding: 26px 0 22px; border-bottom: 1px solid var(--line);
}
.kat-judul { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kat-top h1 { font-size: 28px; margin: 0; letter-spacing: -0.03em; }
.kat-hitung {
  background: #fff; color: var(--pink); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.kat-top p { margin: 8px 0 16px; color: #4b5a73; max-width: 56ch; font-size: 14.5px; }
.kat-top .search { margin: 0; }
.kat-top .search input { background: #fff; border-color: transparent; box-shadow: var(--shadow); }

/* Pil kategori dengan ikon: kategori jadi bisa dikenali dari bentuk, bukan
   cuma dibaca satu per satu. */
.pill { display: inline-flex; align-items: center; gap: 7px; }
.pill svg { width: 15px; height: 15px; flex: none; }
.pills { padding-top: 2px; }

@media (min-width: 640px) {
  .kat-top { padding: 40px 0 30px; }
  .kat-top h1 { font-size: 36px; }
}

/* ---------- blok janji di beranda ---------- */
/* Daftar di atas permukaan merah muda, BUKAN kartu putih di dalam kartu merah
   muda. Versi sebelumnya kotak di dalam kotak, dan ikonnya ditengahkan terhadap
   dua baris teks sehingga mengambang di antara judul dan keterangannya. */
.janji { background: var(--pink-soft); border-radius: var(--r); padding: 22px 18px; }
.janji h2 { margin: 0 0 4px; font-size: 20px; }
.janji-list { list-style: none; margin: 0; padding: 0; }
.janji-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 0; border-top: 1px solid var(--pink-line);
}
.janji-list li:first-child { border-top: 0; }
.janji-ik {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; margin-top: 1px;
}
.janji-ik svg { width: 18px; height: 18px; color: var(--pink); }
.janji-list b { display: block; font-size: 15px; line-height: 1.3; }
.janji-list small { display: block; font-size: 13px; color: #6b4a58; line-height: 1.45; margin-top: 2px; }
.janji-tombol { margin-top: 16px; }

@media (min-width: 640px) {
  .janji { padding: 28px 26px; }
  .janji-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
  .janji-list li { border-top: 0; padding: 16px 0 0; }
}

/* ---------- menu laci (layar sempit) ---------- */
.hd-burger {
  appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink);
  padding: 6px; margin-left: -6px; line-height: 0; border-radius: 10px;
}
.hd-burger:hover { background: var(--bg-soft); }
.hd-burger svg { width: 24px; height: 24px; }

.laci { position: fixed; inset: 0; z-index: 70; }
.laci[hidden] { display: none; }
.laci-bg { position: absolute; inset: 0; background: rgba(39, 53, 75, 0.45); }
.laci-p {
  position: absolute; inset: 0 auto 0 0; width: min(86%, 340px);
  background: #fff; padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto; display: flex; flex-direction: column;
  animation: laci-masuk 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes laci-masuk { from { transform: translateX(-100%); } to { transform: none; } }
.laci-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.laci-top .search { flex: 1; margin: 0; }
.laci-top .search input { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.laci-x { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 6px; line-height: 0; }
.laci-x svg { width: 22px; height: 22px; }

.laci-p > a, .laci-sub > summary {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 16px; font-weight: 700; padding: 15px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.laci-p > a:active, .laci-sub > summary:active { color: var(--pink); }
.laci-sub > summary { list-style: none; justify-content: space-between; }
.laci-sub > summary::-webkit-details-marker { display: none; }
.laci-sub > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px;
}
.laci-sub[open] > summary::after { transform: rotate(-135deg); }
.laci-kat { display: grid; gap: 2px; padding: 6px 0 10px; }
.laci-kat a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--muted); padding: 9px 2px;
}
.laci-kat svg { width: 18px; height: 18px; color: var(--pink); }
.laci-wa {
  margin-top: auto; border: 0 !important; color: #fff !important; background: #25d366;
  border-radius: 999px; justify-content: center; margin-bottom: 4px;
}
.laci-wa svg { width: 18px; height: 18px; }

@media (min-width: 960px) {
  .hd-burger { display: none; }
  .laci { display: none !important; }
}

/* ---------- hero dengan dua foto model ---------- */
/* Urutan DOM: foto kiri, teks, foto kanan. Di layar sempit teks mengambil
   seluruh baris pertama dan dua fotonya berdiri berdampingan di baris kedua;
   mengapit teks selebar 343 piksel dengan dua foto hanya menyisakan lorong
   sempit yang tidak terbaca. */
.hero-in {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding-bottom: 0; column-gap: 0;
}
.hero-teks { grid-column: 1 / -1; grid-row: 1; text-align: center; padding-bottom: 18px; }
.hero-kiri { grid-column: 1; grid-row: 2; }
.hero-kanan { grid-column: 2; grid-row: 2; }
.hero-foto {
  width: 100%; max-width: 240px; height: auto; justify-self: center; align-self: end;
  pointer-events: none;
  /* Menjorok 44px ke bawah batas section lalu dipotong. Itu jatah gerak
     paralaks: sejauh apa pun fotonya terangkat saat digulir, tepi bawahnya
     tidak pernah naik meninggalkan celah di batas hero. */
  margin-bottom: -44px;
  opacity: 0; animation: hero-naik 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  will-change: transform;
}
.hero-kiri { animation-delay: 0.05s; }
.hero-kanan { animation-delay: 0.18s; }
@keyframes hero-naik {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 960px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
    column-gap: 8px;
  }
  .hero-teks { grid-column: 2; grid-row: 1; padding-bottom: 56px; }
  .hero-kiri { grid-column: 1; grid-row: 1; justify-self: end; }
  .hero-kanan { grid-column: 3; grid-row: 1; justify-self: start; }
  .hero-foto { max-width: 310px; }
}