/* ==========================================================================
   FAMS CLOTHING — sistem desain
   --------------------------------------------------------------------------
   Palet  : hitam · abu-abu · putih, aksen hijau HANYA untuk tombol WhatsApp/CTWA
   Heading: Montserrat (700/800/900)   Body: Inter (400/500/600)
   Semua ukuran, jarak, sudut, dan bayangan memakai token di :root agar
   konsisten di seluruh halaman. Jangan tulis nilai acak di komponen.
   ========================================================================== */

:root{
  /* --- netral --------------------------------------------------------- */
  --ink:#0A0A0B;            /* hitam utama */
  --ink-2:#141417;          /* permukaan gelap kedua */
  --ink-3:#1D1D22;          /* permukaan gelap ketiga */
  --paper:#FFFFFF;
  --paper-2:#F7F7F8;        /* section abu sangat muda */
  --paper-3:#EFEFF1;        /* latar gambar */
  --line:#E4E4E8;           /* garis di latar terang */
  --line-2:#CFCFD6;         /* garis lebih tegas */
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.24);

  /* --- teks (kontras sudah dihitung) ---------------------------------- */
  --t1:#111114;             /* teks utama di latar terang  */
  --t2:#55555E;             /* teks sekunder (≈7.3:1)      */
  --t3:#6E6E78;             /* label kecil saja (≈5.5:1)   */
  --d1:#FFFFFF;             /* teks utama di latar gelap   */
  --d2:#C9C9D1;             /* teks sekunder (≈11:1)       */
  --d3:#A0A0AB;             /* teks tersier di latar gelap */

  /* --- aksen hijau (khusus WhatsApp/CTWA) ----------------------------- */
  --green:#0B7C36;          /* tombol + teks putih (≈5.3:1) */
  --green-hover:#096129;
  --green-terang:#3FBF6A;   /* hijau untuk ikon di latar gelap */
  --green-lembut:#EAF6EE;

  /* --- status --------------------------------------------------------- */
  --merah:#B3271A;
  --merah-lembut:#FBEDEB;
  --emas:#A8791F;
  --biru:#1B4EA8;
  --biru-lembut:#E9F0FD;
  --kuning:#7A5600;
  --kuning-lembut:#FEF6E3;
  --ungu:#5335B8;
  --ungu-lembut:#F0EBFD;

  /* --- jarak (skala 4) ------------------------------------------------ */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* --- sudut ---------------------------------------------------------- */
  --r-xs:8px; --r-sm:11px; --r:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  /* --- bayangan (seragam) --------------------------------------------- */
  --sh-1:0 1px 2px rgba(15,15,20,.04), 0 10px 24px -18px rgba(15,15,20,.22);
  --sh-2:0 22px 44px -26px rgba(15,15,20,.34);
  --sh-3:0 34px 64px -30px rgba(15,15,20,.45);
  --sh-green:0 16px 30px -18px rgba(11,124,54,.65);

  /* --- ritme tata letak ----------------------------------------------- */
  --wadah:1180px;
  --wadah-sempit:760px;
  --sec-y:clamp(60px,7.2vw,104px);
  --kartu-p:clamp(20px,2.4vw,28px);

  /* --- transisi & font ------------------------------------------------ */
  --t:.28s cubic-bezier(.2,.7,.2,1);
  --font-judul:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-teks:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--t1);
  font-family:var(--font-teks);font-size:1.02rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.sec-gelap :focus-visible,.hero :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-xs)}

/* ---------------------------------------------------------- tipografi --- */
h1,h2,h3,h4{font-family:var(--font-judul);font-weight:800;line-height:1.14;letter-spacing:-.021em;margin:0 0 .5em;color:var(--t1);text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:900}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.06rem,1.5vw,1.28rem);font-weight:700;letter-spacing:-.012em}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
small,.teks-kecil{font-size:.875rem}
.sec-gelap h1,.sec-gelap h2,.sec-gelap h3,.hero h1,.hero h2,.hero h3,.cta h2,.kaki h3{color:var(--d1)}
.sec-gelap p,.hero p{color:var(--d2)}

/* --------------------------------------------------------- tata letak --- */
.wadah{width:100%;max-width:var(--wadah);margin:0 auto;padding:0 20px}
.isi-sempit{max-width:var(--wadah-sempit)}
.tengah{text-align:center}
section,.sec{padding:var(--sec-y) 0}
.sec-abu{background:var(--paper-2)}
.sec-gelap{background:var(--ink);color:var(--d1)}
.sec-garis-atas{border-top:1px solid var(--line)}
.sec-kepala-baris{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:clamp(28px,3.6vw,44px)}
.sec-kepala-baris > .judul-section{margin-bottom:0}

.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-produk{grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:var(--sp-5)}

/* Anak grid/flex tidak boleh memaksa kolom melebar melebihi layar.
   Tanpa ini "min-content" isi kartu membuat halaman bisa digeser ke samping. */
.grid > *,.detail > *,.layout-2 > *,.dua-kolom > *,.cta > *,.langkah > *,.kaki-isi > *,
.stat-grid > *,.hero-isi > *,.toolbar > *,.form-baris > *,.qris-kotak > *,.tab-kepala > *,
.rincian > *,.kartu-aksi > *,.detail-aksi > *,.opsi-kartu > *,.ringkasan-baris > *,
.tabel-bungkus,.admin-kepala .wadah > *,.bar-atas-isi > *,
.aksi > *,.grid-jarak-3 > *,.grid-jarak-5 > *,.strip-unggul > *{min-width:0}

.ikon{width:20px;height:20px;flex:none}
.ikon-kecil{width:16px;height:16px;flex:none}
.hanya-mobile{display:none!important}
.komentar-layar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Rambu bagian (kicker) + judul section -------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-judul);font-weight:700;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3);
  margin-bottom:var(--sp-4);
}
.kicker::before{content:"";width:24px;height:2px;background:var(--t1);border-radius:2px;flex:none}
.sec-gelap .kicker,.hero .kicker{color:var(--d3)}
.sec-gelap .kicker::before,.hero .kicker::before{background:var(--d1)}
.judul-section{max-width:680px;margin-bottom:clamp(30px,4vw,48px)}
.judul-section h2{margin-bottom:.35em}
.judul-section p{color:var(--t2);font-size:1.04rem;margin:0}
.sec-gelap .judul-section p{color:var(--d2)}
.judul-section.tengah{margin-left:auto;margin-right:auto;text-align:center}
.judul-section.tengah .kicker::before{display:none}

/* ----------------------------------------------------------- tombol ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-full);border:1.5px solid transparent;
  font-family:var(--font-judul);font-weight:700;font-size:.95rem;line-height:1.25;
  cursor:pointer;transition:var(--t);text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:19px;height:19px;flex:none}
.btn-kecil{padding:11px 18px;font-size:.87rem;gap:7px}
.btn-kecil svg{width:17px;height:17px}
.btn-besar{padding:17px 34px;font-size:1.01rem}
.btn-penuh{width:100%}
.btn-lebar{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}

/* Utama = hitam pekat di latar terang (paling menonjol) */
.btn-hitam{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-hitam:hover{background:var(--ink-2);box-shadow:var(--sh-3)}
/* Utama = putih pekat di latar gelap */
.btn-putih{background:#fff;color:var(--ink);box-shadow:var(--sh-2)}
.btn-putih:hover{background:#F1F1F3;box-shadow:var(--sh-3)}
/* Pendukung = garis */
.btn-garis{border-color:var(--line-2);color:var(--t1);background:transparent}
.btn-garis:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-garis-terang{border-color:var(--line-dark-2);color:#fff;background:transparent}
.btn-garis-terang:hover{background:#fff;color:var(--ink);border-color:#fff}
/* Hijau = khusus WhatsApp / CTWA */
.btn-wa,.btn-hijau{background:var(--green);color:#fff;box-shadow:var(--sh-green)}
.btn-wa:hover,.btn-hijau:hover{background:var(--green-hover);box-shadow:0 20px 36px -18px rgba(11,124,54,.75)}

.tombol-tautan{background:none;border:0;padding:0;cursor:pointer;color:var(--t2);text-decoration:underline;font-size:.9rem}
.tombol-tautan:hover{color:var(--t1)}

/* ------------------------------------------------------ bar atas & header */
.bar-atas{background:var(--ink-2);color:var(--d3);font-size:.83rem;border-bottom:1px solid rgba(255,255,255,.06)}
.bar-atas-isi{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);height:40px;overflow:hidden}
.bar-atas span{display:flex;align-items:center;gap:7px;min-width:0}
.bar-atas .ikon-kecil{color:var(--green-terang)}
.bar-atas .teks-bar,.bar-atas span > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bar-atas .promo-pendek{display:none}
.bar-atas a{color:#fff;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap}
.bar-atas a:hover{color:var(--green-terang)}

.kepala{
  position:sticky;top:0;z-index:40;color:#fff;
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);
  border-bottom:1px solid var(--line-dark);
}
.kepala-isi{display:flex;align-items:center;gap:var(--sp-5);height:72px}
.merek{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
/* Logo gambar bisa sangat lebar (logo asli pemilik 600×119 = rasio 5:1) sehingga
   header bisa melebar melewati layar HP. Lebarnya wajib dibatasi. */
.logo-img{max-height:44px;width:auto;max-width:190px;object-fit:contain}
.logo-tulisan{display:flex;align-items:center;gap:10px}
.logo-kotak{width:34px;height:34px;border-radius:var(--r-xs);background:#fff;color:var(--ink);display:grid;place-items:center;font-family:var(--font-judul);font-weight:900;font-size:1.15rem;flex:none}
.logo-teks{display:flex;flex-direction:column;line-height:1}
.logo-teks strong{font-family:var(--font-judul);font-weight:900;font-size:1.1rem;letter-spacing:.15em}
.logo-teks em{font-style:normal;font-size:.6rem;letter-spacing:.4em;color:var(--d3);margin-top:4px}
.nav-utama{display:flex;gap:2px;margin-left:auto}
.nav-utama a{position:relative;padding:9px 14px;border-radius:var(--r-full);font-size:.92rem;font-weight:500;color:var(--d2);transition:var(--t)}
.nav-utama a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-utama a.aktif{color:#fff;font-weight:600}
.nav-utama a.aktif::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:#fff;border-radius:2px}
.kepala-aksi{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Hanya berlaku saat menu utama benar-benar TAMPIL (desktop): supaya isi kanan
   ikut terdorong ke tepi kanan lewat margin-left:auto milik .nav-utama saja.
   Dibatasi min-width karena .nav-utama cuma `display:none` di layar kecil —
   elemennya masih ada di DOM sehingga selektor ini tetap "cocok" dan dulu
   membuat keranjang + tombol menu (hamburger) berhenti di sebelah logo,
   bukan menempel di tepi kanan header. */
@media (min-width:901px){
  .nav-utama + .kepala-aksi{margin-left:0}
}
.ikon-tautan{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid var(--line-dark-2);transition:var(--t);flex:none}
.ikon-tautan:hover{background:#fff;color:var(--ink);border-color:#fff}
.keranjang-tautan{position:relative}
.badge-keranjang{
  position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;border-radius:var(--r-full);
  background:#fff;color:var(--ink);font-size:.72rem;font-weight:800;
  display:grid;place-items:center;padding:0 5px;font-family:var(--font-judul);
}
.tombol-menu{width:42px;height:42px;border:1px solid var(--line-dark-2);border-radius:var(--r-sm);display:grid;place-items:center;color:#fff;flex:none}

/* laci menu mobile */
.laci{
  position:fixed;inset:0 0 0 auto;width:min(85vw,340px);background:var(--ink-2);color:#fff;z-index:60;
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5);animation:masuk .28s ease;
  overflow-y:auto;
}
@keyframes masuk{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.laci-kepala{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-judul);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.83rem;color:var(--d3)}
.tombol-tutup{width:38px;height:38px;border:1px solid var(--line-dark-2);border-radius:var(--r-sm);color:#fff;display:grid;place-items:center}
.laci-nav{display:flex;flex-direction:column}
.laci-nav a{padding:15px 4px;border-bottom:1px solid var(--line-dark);font-family:var(--font-judul);font-weight:600;font-size:1rem}
.laci-nav a:hover,.laci-nav a.aktif{color:var(--green-terang)}
.tirai{position:fixed;inset:0;background:rgba(6,6,8,.62);z-index:55;backdrop-filter:blur(2px)}

/* -------------------------------------------------------------- hero ---- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:clamp(72px,10vw,132px) 0}
.hero-latar{position:absolute;inset:0;background-image:url('../img/hero.svg');background-size:cover;background-position:center}
/* Latar hero bisa diganti dari admin (Tampilan → Gambar). Gambar apa pun
   diberi lapisan gelap supaya tulisan tetap terbaca. */
.hero-latar-gambar{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-latar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,6,8,.96) 0%,rgba(6,6,8,.86) 42%,rgba(6,6,8,.66) 72%,rgba(6,6,8,.78) 100%);
}
/* tingkat kegelapan (diatur dari admin) */
.hero-overlay-terang .hero-latar::after{background:linear-gradient(100deg,rgba(6,6,8,.82) 0%,rgba(6,6,8,.66) 46%,rgba(6,6,8,.42) 100%)}
.hero-overlay-sedang .hero-latar::after{background:linear-gradient(100deg,rgba(6,6,8,.96) 0%,rgba(6,6,8,.86) 42%,rgba(6,6,8,.66) 72%,rgba(6,6,8,.78) 100%)}
.hero-overlay-gelap .hero-latar::after{background:linear-gradient(100deg,rgba(4,4,6,.98) 0%,rgba(4,4,6,.94) 48%,rgba(4,4,6,.82) 100%)}
/* gambar hero dari admin: tanpa latar SVG bawaan */
.hero-overlay-terang, .hero-overlay-sedang, .hero-overlay-gelap{background:var(--ink)}
.hero-isi{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
/* Isi hero dibatasi lebarnya, tetapi tepi kiri tetap sejajar dengan section lain
   (wadah tetap 1180px). Dulu max-width dipasang di wadah sehingga teks menjorok. */
.hero-isi > *{max-width:820px}
.hero h1{color:#fff;margin-bottom:var(--sp-4);text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero h1 .hero-sub-judul{
  display:block;margin-top:var(--sp-4);font-size:clamp(1rem,1.7vw,1.24rem);
  font-weight:500;letter-spacing:0;color:var(--d2);text-shadow:none;
}
.hero-tagline{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--d2);max-width:600px;margin-bottom:0}
.hero-aksi{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero-tanda{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line-dark)}
.hero-tanda div{min-width:88px}
.hero-tanda strong{display:block;font-family:var(--font-judul);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:800;line-height:1.2}
.hero-tanda span{font-size:.85rem;color:var(--d3)}

/* -------------------------------------------------- kepala halaman isi -- */
.kepala-halaman{background:var(--ink);color:#fff;padding:clamp(42px,5.6vw,72px) 0;position:relative;overflow:hidden}
.kepala-halaman::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 12%,rgba(255,255,255,.07),transparent 58%)}
.kepala-halaman .wadah{position:relative}
.kepala-halaman h1{margin-bottom:var(--sp-3)}
.kepala-halaman p{color:var(--d2);max-width:620px;margin:0}
.remah{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--d3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.remah a:hover{color:#fff}
.remah span{opacity:.55}

/* ------------------------------------------------------ kartu produk ---- */
.kartu-produk{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--t);box-shadow:var(--sh-1);
}
.kartu-produk:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.kartu-gambar{position:relative;display:block;background:var(--paper-3);aspect-ratio:1/1;overflow:hidden}
.kartu-gambar img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.kartu-produk:hover .kartu-gambar img{transform:scale(1.045)}
.label-kartu,.label-diskon{
  position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;
  font-family:var(--font-judul);font-size:.65rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 11px;border-radius:var(--r-full);
}
.label-diskon{left:auto;right:12px;background:var(--merah)}
.kartu-isi{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;flex:1}
.kartu-kategori{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);font-weight:600}
.kartu-isi h3{
  font-size:1.02rem;margin:0;line-height:1.38;
  /* tinggi nama dikunci 2 baris supaya semua kartu sama tinggi */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.76em;
}
.kartu-isi h3 a:hover{color:var(--t2)}
/* Baris harga dikunci SATU baris supaya semua kartu produk sama tinggi.
   Harga coret dipangkas dengan elipsis kalau angkanya sangat panjang. */
.kartu-harga{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;min-height:1.9em}
.kartu-harga strong{font-family:var(--font-judul);font-size:1.14rem;font-weight:800;color:var(--t1);white-space:nowrap}
.kartu-harga s{color:var(--t3);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* satuan (/pcs) disembunyikan HANYA di kartu produk (sudah ada info jumlah di bawahnya).
   Di halaman detail, satuan tetap tampil karena informasinya penting. */
.kartu-produk .kartu-satuan{display:none}
.kartu-satuan{color:var(--t2);font-size:.85rem}
.kartu-bawah{display:flex;justify-content:space-between;gap:10px;font-size:.83rem;color:var(--t2);border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:auto}
.kartu-min{color:var(--t2)}
.kartu-stok{font-weight:500}
.kartu-stok.habis{color:var(--merah);font-weight:700}
.kartu-aksi{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.kartu-aksi .btn-hitam{flex:1}
.kartu-aksi .btn-wa{padding:11px 14px;flex:none}


/* kartu statistik ringkas (tentang) */
.kartu-stat{padding:var(--sp-5)}
.kartu-stat strong{display:block;font-family:var(--font-judul);font-size:1.5rem;font-weight:900;line-height:1.2}
.kartu-stat p{margin:2px 0 0}
.kartu-mini{padding:var(--sp-5)}
.kartu-mini h3{font-size:1rem;margin-bottom:6px}
.gambar-panel{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper-3);width:100%}
.cta-sempit{display:block;padding:var(--sp-5)}
.cta-sempit h2{font-size:1.3rem;margin-bottom:var(--sp-3)}
.cta-sempit p{color:var(--d2);margin-bottom:var(--sp-4)}

/* ------------------------------------------------------ kartu umum ------ */
.kartu{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);transition:var(--t)}
.kartu-unggul{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);transition:var(--t);height:100%}
.kartu-unggul:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.unggul-ikon{width:46px;height:46px;border-radius:var(--r-sm);background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:var(--sp-4);flex:none}
.kartu-unggul h3{font-size:1.02rem;margin-bottom:8px}
.kartu-unggul p{color:var(--t2);font-size:.94rem;margin:0}
.sec-gelap .kartu-unggul{background:var(--ink-2);border-color:var(--line-dark)}
.sec-gelap .kartu-unggul p{color:var(--d2)}
.sec-gelap .unggul-ikon{background:#fff;color:var(--ink)}

.kartu-blok{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);margin-bottom:var(--sp-5);box-shadow:var(--sh-1)}
.kartu-blok > h3{display:flex;align-items:center;gap:10px;font-size:1.04rem;margin-bottom:var(--sp-5)}
.angka-langkah{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center;flex:none;font-family:var(--font-judul)}

/* strip keunggulan ringkas (beranda) */
.strip-unggul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,3vw,38px) 0}
.strip-unggul .item{display:flex;gap:var(--sp-3);align-items:flex-start}
.strip-unggul .ikon{color:var(--t1);margin-top:2px}
.strip-unggul strong{display:block;font-family:var(--font-judul);font-size:.98rem;font-weight:700;margin-bottom:2px}
.strip-unggul span{font-size:.9rem;color:var(--t2);display:block}

/* ---------------------------------------------------------- cara pesan -- */
.langkah{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);counter-reset:langkah}
.langkah-item{position:relative;padding-top:var(--sp-6);border-top:2px solid var(--line);counter-increment:langkah}
.langkah-item::before{
  counter-increment:none;content:"0" counter(langkah);
  position:absolute;top:var(--sp-4);left:0;
  font-family:var(--font-judul);font-weight:800;font-size:.82rem;letter-spacing:.16em;color:var(--t3);
}
.langkah-item h3{font-size:1rem;margin-bottom:6px;margin-top:8px}
.langkah-item p{font-size:.92rem;color:var(--t2);margin:0}
.sec-gelap .langkah-item{border-color:var(--line-dark)}
.sec-gelap .langkah-item::before{color:var(--d3)}
.sec-gelap .langkah-item p{color:var(--d2)}

/* ------------------------------------------------------- testimoni ------ */
.kartu-testimoni{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);display:flex;flex-direction:column;gap:var(--sp-4);transition:var(--t);height:100%;box-shadow:var(--sh-1)}
.kartu-testimoni:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.bintang{color:var(--line-2);font-size:.98rem;letter-spacing:1px}
.bintang.on{color:var(--emas)}
.kutipan{font-size:.98rem;color:var(--t1);margin:0;line-height:1.7}
.penulis{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font-judul);font-weight:700;flex:none}
.penulis strong{display:block;font-size:.94rem}
.penulis span:not(.avatar){font-size:.85rem;color:var(--t2)}
/* .avatar adalah <span> di dalam .penulis — warna putihnya harus ditegaskan lagi
   agar tidak tertimpa aturan .penulis span (dulu jadi teks abu di atas hitam). */
.avatar{color:#fff}
.sec-gelap .kartu-testimoni{background:var(--ink-2);border-color:var(--line-dark)}
.sec-gelap .kutipan{color:var(--d1)}
.sec-gelap .penulis{border-color:var(--line-dark)}
.sec-gelap .penulis span:not(.avatar){color:var(--d3)}
.sec-gelap .avatar{background:#fff;color:var(--ink)!important}

/* -------------------------------------------------------------- CTA ----- */
.cta{
  background:var(--ink);color:#fff;border-radius:var(--r-xl);
  padding:clamp(30px,4.4vw,52px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:var(--sp-6);align-items:center;
}
.cta::after{content:"";position:absolute;right:-100px;top:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}
.cta h2{margin-bottom:var(--sp-3)}
.cta p{color:var(--d2);margin:0}
.cta-aksi{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}

/* --------------------------------------------------- toolbar katalog ---- */
.toolbar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:var(--sp-4);
  align-items:end;box-shadow:var(--sh-1);margin-top:-40px;position:relative;z-index:2;
}
.toolbar label{font-size:.83rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:6px}
.chip-baris{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.chip{padding:9px 17px;border-radius:var(--r-full);border:1px solid var(--line-2);font-size:.88rem;font-weight:500;background:var(--paper);transition:var(--t);color:var(--t1)}
.chip:hover{border-color:var(--ink)}
.chip.aktif{background:var(--ink);color:#fff;border-color:var(--ink)}
.ringkas-hasil{color:var(--t2);font-size:.9rem;margin-top:var(--sp-4)}

/* ---------------------------------------------------------- formulir ---- */
.form-baris{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.form-baris-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-kelompok{margin-bottom:var(--sp-4)}
.form-kelompok:last-child{margin-bottom:0}
.form-kelompok label,.label-medan{display:block;font-size:.85rem;font-weight:600;color:var(--t1);margin-bottom:7px}
.form-kelompok .bantuan{font-size:.84rem;color:var(--t2);margin:6px 0 0;line-height:1.6}
.form-baris .form-kelompok{margin-bottom:0}
.bantuan{font-size:.85rem;color:var(--t2);line-height:1.6}
.wajib::after{content:" *";color:var(--merah)}
.medan{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);transition:var(--t);color:var(--t1);font-size:.97rem;
}
.medan::placeholder{color:var(--t3)}
.medan:hover{border-color:var(--t3)}
.medan:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(10,10,11,.08)}
.medan-kecil{padding:10px 12px;font-size:.92rem}
textarea.medan{min-height:120px;resize:vertical;line-height:1.65}
.pilih{
  appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ink);width:17px;height:17px;vertical-align:-2px}
.pesan-galat{color:var(--merah);font-size:.85rem;margin-top:6px;display:block}
.pesan-flash{border-radius:var(--r-sm);padding:14px 18px;font-size:.92rem;border:1px solid}
.pesan-flash.ok{background:var(--green-lembut);border-color:#BCE3C9;color:#0A6A2E}
.pesan-flash.galat{background:var(--merah-lembut);border-color:#EFC5BF;color:#8A2418}
.pesan-flash.info{background:var(--paper-2);border-color:var(--line);color:var(--t1)}
.pesan-flash-wrap{margin-top:var(--sp-5)}
.berhasil-kotak{background:var(--green-lembut);border:1px solid #BCE3C9;border-radius:var(--r-lg);padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start}
.berhasil-kotak .ikon{color:var(--green);margin-top:3px}
.berhasil-kotak strong{color:#0A6A2E}
.berhasil-kotak p{color:#20512F}
.kotak-info{background:var(--paper-2);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:var(--sp-4);font-size:.9rem;color:var(--t1)}
.kotak-info code{background:rgba(10,10,11,.06);padding:2px 6px;border-radius:6px;font-size:.88em}
.petunjuk{background:var(--kuning-lembut);border:1px solid #F0E0AE;border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);font-size:.9rem;color:var(--kuning);margin-bottom:var(--sp-5)}
.petunjuk strong{display:block;margin-bottom:4px}
.daftar-centang li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;color:var(--t2);font-size:.96rem}
.daftar-centang li:last-child{margin-bottom:0}
.daftar-centang .ikon{color:var(--green);margin-top:4px}

/* ------------------------------------------------------------ qris ------ */
.qris-kotak{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-5);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-5)}
.qris-kotak img{width:100%;height:auto;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.qris-ket strong{display:block;font-family:var(--font-judul);font-size:1rem;margin-bottom:8px}
.qris-ket p{color:var(--t2);font-size:.92rem;margin-bottom:10px}

/* ------------------------------------------------------- detail produk -- */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:start}
.galeri-utama{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);border:1px solid var(--line);aspect-ratio:1/1}
.galeri-utama img{width:100%;height:100%;object-fit:cover}
.galeri-mini{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.galeri-mini button{width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid var(--line);background:var(--paper-3);padding:0;transition:var(--t)}
.galeri-mini button:hover{border-color:var(--line-2)}
.galeri-mini button.aktif{border-color:var(--ink)}
.galeri-mini img{width:100%;height:100%;object-fit:cover}
.detail-harga{display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-2)}
.detail-harga strong{font-family:var(--font-judul);font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:900;color:var(--t1)}
.detail-harga s{color:var(--t3)}
.detail-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:.88rem;color:var(--t2);margin-bottom:var(--sp-5)}
.detail-meta span{display:flex;align-items:center;gap:6px}
.varian{margin-bottom:var(--sp-4)}
.varian-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.varian-kepala strong{font-size:.89rem;font-weight:600}
.varian-kepala span{font-size:.85rem;color:var(--t2)}
.varian-opsi{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.opsi{position:relative}
.opsi input{position:absolute;opacity:0;pointer-events:none}
.opsi span{
  display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:10px 15px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-size:.9rem;cursor:pointer;
  transition:var(--t);background:var(--paper);color:var(--t1);
}
.opsi span:hover{border-color:var(--ink)}
.opsi input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.opsi input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.opsi input:disabled + span{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.qty button{width:46px;height:48px;font-size:1.15rem;transition:var(--t);color:var(--t1)}
.qty button:hover{background:var(--paper-2)}
.qty input{width:66px;height:48px;text-align:center;border:0;border-left:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);font-weight:600;background:var(--paper)}
.detail-aksi{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-6) 0;align-items:center}
.info-penting{display:grid;gap:var(--sp-3);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.info-penting div{display:flex;gap:10px;font-size:.91rem;color:var(--t1)}
.info-penting .ikon{color:var(--green);margin-top:3px;flex:none}

.tab{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-6)}
.tab-kepala{display:flex;background:var(--paper-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab-kepala button{padding:15px 22px;font-family:var(--font-judul);font-weight:700;font-size:.89rem;color:var(--t2);border-bottom:2px solid transparent;transition:var(--t)}
.tab-kepala button:hover{color:var(--t1)}
.tab-kepala button.aktif{color:var(--t1);border-color:var(--ink);background:var(--paper)}
.tab-isi{padding:var(--sp-5)}
.tab-isi p:last-child{margin-bottom:0}

/* ----------------------------------------------------- tabel & keranjang */
.tabel-bungkus{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;padding:var(--sp-5);box-shadow:var(--sh-1)}
.tabel{min-width:100%;font-size:.95rem}
.tabel th{
  text-align:left;font-family:var(--font-judul);font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t3);padding:0 14px 13px 0;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
.tabel td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel td:last-child,.tabel th:last-child{padding-right:0;text-align:right}
.tabel-lebar{min-width:720px}
.baris-produk{display:flex;gap:var(--sp-4);align-items:center}
.baris-produk img{width:72px;height:72px;border-radius:var(--r-sm);object-fit:cover;background:var(--paper-3);border:1px solid var(--line);flex:none}
.baris-produk strong{display:block;font-size:.96rem;font-family:var(--font-judul);font-weight:700;line-height:1.35}
.baris-produk span{font-size:.82rem;color:var(--t2)}
.qty-mini{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-xs);overflow:hidden}
.qty-mini button{width:36px;height:38px;color:var(--t1)}
.qty-mini button:hover{background:var(--paper-2)}
.qty-mini input{width:50px;height:38px;text-align:center;border:0;border-left:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);background:var(--paper)}
.ringkasan{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);position:sticky;top:96px}
.ringkasan h3{font-size:1.06rem;margin-bottom:var(--sp-5)}
.ringkasan-baris{display:flex;justify-content:space-between;gap:var(--sp-4);padding:9px 0;font-size:.94rem;color:var(--t2)}
.ringkasan-baris strong{color:var(--t1);text-align:right}
.ringkasan-baris.total{border-top:2px solid var(--ink);margin-top:var(--sp-3);padding-top:var(--sp-4);font-family:var(--font-judul);font-weight:800;font-size:1.15rem;color:var(--t1)}
.ringkasan-baris.total strong{font-size:1.15rem}
.ringkasan-baris.diskon,.ringkasan-baris.diskon strong{color:var(--green)}
.kosong{text-align:center;padding:clamp(48px,7vw,80px) var(--sp-5);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--paper-2)}
.kosong h3{margin-bottom:var(--sp-3)}
.layout-2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:clamp(24px,3vw,44px);align-items:start}
.dua-kolom{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:var(--sp-5);align-items:start}
.opsi-kartu{display:flex;gap:var(--sp-3);padding:var(--sp-4);border:1.5px solid var(--line-2);border-radius:var(--r-sm);transition:var(--t);margin-bottom:var(--sp-3);align-items:flex-start;cursor:pointer;background:var(--paper)}
.opsi-kartu:last-child{margin-bottom:0}
.opsi-kartu:hover{border-color:var(--ink)}
.opsi-kartu input{margin-top:4px;flex:none}
.opsi-kartu.terpilih{border-color:var(--ink);background:var(--paper-2)}
.opsi-kartu strong{display:block;font-size:.96rem}
.opsi-kartu em{font-style:normal;font-size:.84rem;color:var(--t2);display:block;margin-top:3px;line-height:1.55}
.harga-opsi{margin-left:auto;font-family:var(--font-judul);font-weight:700;white-space:nowrap}
.kode-voucher{display:flex;gap:var(--sp-3)}
.kode-voucher input{flex:1;text-transform:uppercase}
.nota{display:grid;gap:6px}

/* -------------------------------------------------- status & timeline --- */
.timeline{display:grid;margin:var(--sp-5) 0 0}
.timeline-item{display:flex;gap:var(--sp-4);padding-bottom:var(--sp-5);position:relative}
.timeline-item::before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:1.5px;background:var(--line)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:last-child::before{display:none}
.titik{width:27px;height:27px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--paper);display:grid;place-items:center;flex:none;color:var(--t2);font-size:.72rem;font-weight:700}
.timeline-item.selesai .titik{background:var(--ink);border-color:var(--ink);color:#fff}
.timeline-item strong{display:block;font-size:.95rem}
.timeline-item span{font-size:.83rem;color:var(--t2)}
.badge-status{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-full);font-size:.77rem;font-weight:700;font-family:var(--font-judul);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.badge-hijau{background:var(--green-lembut);color:#0A6A2E}
.badge-abu{background:var(--paper-3);color:var(--t2)}
.badge-biru{background:var(--biru-lembut);color:var(--biru)}
.badge-kuning{background:var(--kuning-lembut);color:var(--kuning)}
.badge-ungu{background:var(--ungu-lembut);color:var(--ungu)}
.badge-merah{background:var(--merah-lembut);color:var(--merah)}
.rincian{display:grid}
.rincian div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rincian div:last-child{border-bottom:0}
.rincian span{color:var(--t2);flex:none}
.rincian strong{text-align:right;font-weight:600}
.rincian div > div{display:block;border:0;padding:0}

/* ----------------------------------------------------------- situs kaki - */
.kaki{background:var(--ink);color:var(--d2);padding:clamp(48px,6vw,76px) 0 26px}
.kaki-isi{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px)}
.kaki-merek{max-width:360px}
.kaki h3{color:#fff;font-size:.83rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--sp-5);font-weight:700}
.kaki-kolom ul li{margin-bottom:11px;font-size:.93rem}
.kaki-kolom ul li a{color:var(--d2)}
.kaki-kolom ul li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kaki-desk{font-size:.92rem;color:var(--d3);max-width:330px;margin:var(--sp-5) 0}
.kaki .logo-teks strong{color:#fff}
.kaki .logo-teks em{color:var(--d3)}
.sosmed{display:flex;gap:var(--sp-2)}
.sosmed a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark-2);display:grid;place-items:center;color:#fff;transition:var(--t)}
.sosmed a:hover{background:#fff;color:var(--ink);border-color:#fff}
.kaki-kontak li{display:flex;gap:10px;align-items:flex-start;color:var(--d2)}
.kaki-kontak .ikon{color:var(--green-terang);margin-top:4px}
.kaki-kontak a:hover{color:#fff}
.kaki-bawah{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:clamp(32px,4vw,48px);padding-top:var(--sp-5);font-size:.85rem;color:var(--d3)}
.kaki-bawah a{color:var(--d2)}
.kaki-bawah a:hover{color:#fff}

/* ------------------------------------------------- WA mengambang (CTWA) - */
.wa-mengambang{
  position:fixed;right:20px;bottom:20px;z-index:45;
  display:flex;align-items:center;gap:10px;
  background:var(--green);color:#fff;padding:13px 20px 13px 15px;border-radius:var(--r-full);
  box-shadow:0 18px 34px -14px rgba(11,124,54,.75);
  font-family:var(--font-judul);font-weight:700;font-size:.9rem;transition:var(--t);
}
.wa-mengambang:hover{background:var(--green-hover);transform:translateY(-3px)}
.ikon-mengambang{width:24px;height:24px;flex:none}
.wa-mengambang::after{content:"";position:absolute;inset:0;border-radius:var(--r-full);border:2px solid rgba(11,124,54,.45);animation:pulsasi 2.6s infinite;pointer-events:none}
@keyframes pulsasi{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
/* ruang aman di ujung halaman supaya tombol tidak menutupi konten terakhir */
.wa-ruang{height:0}
@media (max-width:900px){.wa-ruang{height:72px}}

/* ------------------------------------------------------------ animasi --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .wa-mengambang::after{animation:none}
  .btn:hover,.kartu-produk:hover,.kartu-unggul:hover,.kartu-testimoni:hover{transform:none}
}



/* ritme section: varian jarak yang konsisten (jangan pakai padding ad-hoc) */
.sec-rapat{padding:clamp(44px,5vw,72px) 0}
.sec-lanjut{padding-top:0}
.sec-toolbar{padding-top:clamp(36px,4vw,52px)}
.remah-wrap{padding-top:var(--sp-6)}
.tabel-tanpa-padding{padding:0;border:0;background:transparent;box-shadow:none}
.kaki-rapat{padding:26px 0}
.kaki-bawah-tanpa-garis{border:0;margin:0;padding:0}
.kartu-baris{padding:var(--sp-3) 0;border-bottom:1px solid var(--paper-2)}
.kartu-baris:last-child{border-bottom:0}
.gambar-izin{max-height:52px;background:var(--ink-2);padding:8px;border-radius:var(--r-xs)}
.gambar-qris-kecil{max-height:150px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;padding:6px}
.subtotal-baris{border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-4)}

/* -------------------------------------------------------- utilitas ------ */
.aksi{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.aksi-antar{justify-content:space-between}
.aksi-tengah{justify-content:center}
.aksi-akhir{margin-top:var(--sp-5)}
.aksi-tengah.aksi-akhir{margin-top:var(--sp-5)}
.aksi-tanpa-atas{margin-top:0}
.judul-produk{font-size:clamp(1.45rem,2.8vw,1.95rem)}
.label-hemat{position:static;background:var(--merah);color:#fff;font-family:var(--font-judul);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-full)}
.baris-tanpa-atas{padding-top:0!important}
.baris-rapat{padding-top:var(--sp-5)!important}
.rapat-atas{margin-top:var(--sp-4)}
.rapat-bawah{margin-bottom:var(--sp-4)}
.rapat-atas-besar{margin-top:var(--sp-6)}
.tanpa-atas{padding-top:0}
.tabel-kosong{color:var(--t2)}

/* ============================================================== ADMIN === */
.admin-badan{background:var(--paper-2)}
.admin-kepala{background:var(--ink);color:#fff;padding:14px 0}
.admin-kepala .wadah{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.admin-nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.admin-nav a{padding:9px 14px;border-radius:var(--r-full);font-size:.88rem;color:var(--d2);transition:var(--t)}
.admin-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.admin-nav a.aktif{background:#fff;color:var(--ink);font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-5)}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);display:block;box-shadow:var(--sh-1)}
a.stat:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.stat span{font-size:.81rem;letter-spacing:.11em;text-transform:uppercase;color:var(--t3);font-weight:600}
.stat strong{display:block;font-family:var(--font-judul);font-size:1.7rem;font-weight:900;margin-top:8px;line-height:1.2}
.stat em{font-style:normal;font-size:.83rem;color:var(--t2)}
.admin-kartu{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--kartu-p);margin-bottom:var(--sp-5);box-shadow:var(--sh-1)}
.admin-kartu > h2{font-size:1.12rem;margin-bottom:6px}
.admin-kartu > p.bantuan{margin-bottom:var(--sp-5)}
.admin-kartu ol{color:var(--t1)}
.admin-kartu ol li{color:var(--t1);font-size:.95rem}
.aksi-baris{display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap}
.aksi-baris a,.aksi-baris button{font-size:.83rem;padding:8px 13px}
.thumb-admin{width:56px;height:56px;border-radius:var(--r-xs);object-fit:cover;border:1px solid var(--line);background:var(--paper-3)}
.susunan-baris{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:var(--sp-2);background:var(--paper-2)}
.susunan-baris .nama-bagian{flex:1;min-width:0}
.susunan-baris .kendali{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.susunan-baris .kendali .btn{padding:8px 12px;min-width:42px}
@media (max-width:640px){
  .susunan-baris{flex-wrap:wrap;gap:var(--sp-2)}
  .susunan-baris .nama-bagian{flex:1 1 100%;order:-1;font-size:.95rem}
  .susunan-baris .kendali{width:100%;justify-content:space-between}
}
.login-kotak{max-width:420px;margin:clamp(40px,9vh,100px) auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,4vw,36px);box-shadow:var(--sh-3)}

/* =========================================================== RESPONSIF == */
@media (max-width:1024px){
  .hero-isi{max-width:100%}
  .kaki-isi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail,.layout-2,.dua-kolom{grid-template-columns:minmax(0,1fr)}
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-unggul{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
  .langkah{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-produk{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .ringkasan{position:static}
  .qris-kotak{grid-template-columns:minmax(0,1fr)}
  .qris-kotak img{max-width:320px}
}
@media (max-width:900px){
  .hanya-desktop{display:none!important}
  .hanya-mobile{display:inline-flex!important}
  .nav-utama{display:none}
  /* Menu utama disembunyikan di sini, jadi sisi kanan header dirapatkan ke tepi
     kanan lewat `margin-left:auto` milik .kepala-aksi (lihat catatan pada
     .nav-utama + .kepala-aksi di bagian header). */
  .kepala-isi{height:64px;gap:var(--sp-4)}
  .cta{grid-template-columns:minmax(0,1fr)}
  .cta-aksi{justify-content:flex-start}
  .bar-atas .promo-panjang{display:none}
  .bar-atas .promo-pendek{display:inline}
  .bar-atas-isi{font-size:.75rem}
  .bar-atas-isi .bar-atas-kanan{display:none}
  .kepala-halaman{padding:38px 0 42px}
}
@media (max-width:640px){
  :root{--sec-y:clamp(52px,11vw,72px);--kartu-p:20px}
  body{font-size:1rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .strip-unggul{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
  .langkah{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .langkah-item{padding-top:var(--sp-6)}
  .grid-produk{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
  .toolbar{grid-template-columns:minmax(0,1fr);margin-top:-28px}
  .form-baris,.form-baris-3{grid-template-columns:minmax(0,1fr)}
  .kaki-isi{grid-template-columns:minmax(0,1fr)}
  .kaki-bawah{flex-direction:column;gap:8px}
  .sec-kepala-baris{align-items:flex-start;margin-bottom:var(--sp-5)}
  .sec-kepala-baris > p{margin:0}
  .hero{padding:56px 0 64px}
  .hero-aksi{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .hero-aksi .btn{width:100%}
  .hero-tanda{gap:var(--sp-5);margin-top:var(--sp-6)}
  .hero-tanda div{min-width:0;flex:1 1 40%}
  .detail-aksi{flex-direction:column;align-items:stretch}
  .detail-aksi .btn{width:100%}
  .cta-aksi{flex-direction:column;align-items:stretch}
  .cta-aksi .btn{width:100%}
  .qty{width:100%;justify-content:space-between}
  .qty input{flex:1;width:auto}
  .tab-kepala button{padding:13px 16px;font-size:.85rem;flex:1 1 auto}
  .tabel-bungkus{padding:var(--sp-4)}
  .galeri-mini button{width:64px;height:64px}
  .kartu-aksi{flex-direction:column}
  .kartu-aksi .btn-wa{width:100%;justify-content:center}
  .toolbar label{font-size:.78rem}
  .form-kelompok label,.label-medan{font-size:.87rem}
  .form-kelompok .bantuan,.bantuan{font-size:.86rem}
  /* Tombol izinkan teks turun baris supaya tidak terpotong di HP */
  .btn{white-space:normal}
  .tabel th:nth-child(3),.tabel td:nth-child(3){display:none}
  .kode-voucher{flex-direction:column}
  .kode-voucher .btn{width:100%}
}

@media (max-width:640px){
  /* Pastikan teks terkecil tetap nyaman dibaca tanpa zoom (>=13px) */
  .kicker{font-size:.82rem;letter-spacing:.18em}
  .bar-atas,.bar-atas-isi{font-size:.82rem}
  .toolbar label{font-size:.83rem}
  .kartu-kategori{font-size:.84rem;letter-spacing:.12em}
  .kartu-bawah,.kartu-min,.kartu-stok{font-size:.83rem}
  .kartu-satuan{font-size:.84rem}
  .kaki h3{font-size:.8rem}
  .tabel th{font-size:.84rem}
  .varian-kepala strong,.varian-kepala span{font-size:.87rem}
  .laci-kepala{font-size:.84rem}
  .logo-teks strong{font-size:1.05rem}
  .logo-teks em{font-size:.68rem;letter-spacing:.3em}
  .kaki h3{font-size:.84rem}
  .angka-langkah{font-size:.84rem;width:30px;height:30px}
  .avatar{font-size:.95rem}
  .penulis span{font-size:.84rem}
  .stat span{font-size:.8rem}
  .stat em{font-size:.84rem}
  .badge-status{font-size:.76rem}
  .kartu-harga s{font-size:.88rem}
  /* label pada gambar tetap kecil karena bersifat hiasan */
  .label-kartu,.label-diskon,.label-hemat{font-size:.7rem}
}

@media (max-width:400px){
  .grid-produk{grid-template-columns:minmax(0,1fr)}
  .strip-unggul{grid-template-columns:minmax(0,1fr)}
  .wa-mengambang{padding:14px;gap:0}
  .wa-mengambang .wa-label{display:none}
  .wa-mengambang .ikon-mengambang{width:26px;height:26px}
  .kartu-isi{padding:var(--sp-4)}
}

/* ======================================================================
   UTILITAS TEMA
   ----------------------------------------------------------------------
   Satu-satunya tempat nilai tampilan ditulis. Semua halaman memakai kelas
   ini, bukan atribut style="" — supaya warna, jarak, dan ukuran huruf
   tetap ikut variabel tema (admin → Tampilan) dan mudah diubah serentak.
   Skala jarak memakai token --sp-*, jadi: .atas-3 = margin-top --sp-3.
   ====================================================================== */

/* --- jarak (memakai skala --sp-1..--sp-9) ----------------------------- */
.atas-0{margin-top:0}
.atas-1{margin-top:var(--sp-1)}
.atas-2{margin-top:var(--sp-2)}
.atas-3{margin-top:var(--sp-3)}
.atas-4{margin-top:var(--sp-4)}
.atas-5{margin-top:var(--sp-5)}
.atas-6{margin-top:var(--sp-6)}
.atas-7{margin-top:var(--sp-7)}
.bawah-0{margin-bottom:0}
.bawah-1{margin-bottom:var(--sp-1)}
.bawah-2{margin-bottom:var(--sp-2)}
.bawah-3{margin-bottom:var(--sp-3)}
.bawah-4{margin-bottom:var(--sp-4)}
.bawah-5{margin-bottom:var(--sp-5)}
.bawah-6{margin-bottom:var(--sp-6)}
.kiri-2{margin-left:var(--sp-2)}
.kiri-3{margin-left:var(--sp-3)}
.tanpa-jarak{margin:0}
.tengah-blok{margin-left:auto;margin-right:auto}

/* --- warna teks ------------------------------------------------------- */
.warna-1{color:var(--t1)}
.warna-2{color:var(--t2)}
.warna-3{color:var(--t3)}
.warna-utama{color:var(--ink)}
.warna-putih{color:var(--d1)}
.warna-putih-3{color:var(--d3)}

/* --- ukuran huruf ----------------------------------------------------- */
.fs-72{font-size:.72rem}
.fs-78{font-size:.78rem}
.fs-8{font-size:.8rem}
.fs-82{font-size:.82rem}
.fs-85{font-size:.85rem}
.fs-86{font-size:.86rem}
.fs-88{font-size:.88rem}
.fs-9{font-size:.9rem}
.fs-92{font-size:.92rem}
.fs-94{font-size:.94rem}
.fs-98{font-size:.98rem}
.fs-100{font-size:1rem}
.fs-105{font-size:1.05rem}
.fs-118{font-size:1.18rem}
.fs-13{font-size:1.3rem}
.fs-135{font-size:1.35rem}
.fs-14{font-size:1.4rem}
.fs-15{font-size:1.5rem}
.fs-16{font-size:1.6rem}
.tebal-normal{font-weight:400}
.font-judul{font-family:var(--font-judul)}
.teks-kanan{text-align:right}
.teks-tengah{text-align:center}
.jaga-baris{white-space:pre-line}
.tanpa-garis-bawah{text-decoration:none}

/* --- susunan & tampilan ----------------------------------------------- */
.blok{display:block}
.posisi-blok{position:relative;display:block}
.posisi-atas{position:relative;z-index:1}
.grid-jarak-3{display:grid;gap:var(--sp-3)}
.grid-jarak-5{display:grid;gap:var(--sp-5)}
.jarak-5{gap:var(--sp-5)}
.rata-tengah-vert{align-items:center}
.rata-atas-vert{align-items:flex-start}
.rata-bawah-vert{align-items:flex-end}
.aksi-tanpa-lipat{gap:var(--sp-2);flex-wrap:nowrap}
.aksi-rata-atas{align-items:flex-start}
.pad-5{padding:var(--sp-5)}
.pad-atas-6{padding-top:var(--sp-6)}
.tanpa-saring{filter:none}
.batas-putus-putus{border-style:dashed}

/* --- tabel & daftar --------------------------------------------------- */
.tabel-min-900{min-width:900px}
.daftar-poin{margin:0;padding-left:22px;list-style:disc}

/* --- medan isian (tinggi textarea) ----------------------------------- */
.medan-60{min-height:60px}
.medan-70{min-height:70px}
.medan-80{min-height:80px}
.medan-90{min-height:90px}
.medan-130{min-height:130px}
.medan-150{min-height:150px}
.medan-lentur{flex:1;min-width:240px}
.label-centang{display:flex;align-items:center;gap:7px;font-size:.85rem;white-space:nowrap}
.centang-baris{display:block;margin-bottom:var(--sp-3)}

/* --- gambar ----------------------------------------------------------- */
.img-lebar{width:100%;height:auto}
.thumb-74{width:74px;height:74px}
.thumb-90{width:90px}
.thumb-110{width:110px}
.thumb-130{max-width:130px}
.gambar-bingkai{max-width:100%;border-radius:var(--r);border:1px solid var(--line)}
.gambar-pratinjau{width:100%;max-height:170px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:var(--sp-3)}
.bingkai-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink)}
.gambar-qris-bayar{max-width:280px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper)}

/* --- judul & blok khusus --------------------------------------------- */
.judul-admin{font-size:1.5rem;margin-bottom:var(--sp-1)}
.judul-panel{font-size:1.5rem;margin-bottom:var(--sp-2)}
.judul-login{font-size:1.35rem;text-align:center;margin-bottom:var(--sp-2)}
.judul-kartu{font-size:1.05rem;margin-bottom:var(--sp-1)}
.judul-mini{font-size:1rem;margin-bottom:var(--sp-3)}
.angka-besar{font-family:var(--font-judul);font-weight:900;font-size:1.4rem}
.angka-total{font-family:var(--font-judul);font-weight:800;font-size:1.18rem}
.judul-kecil{font-family:var(--font-judul);font-size:1.06rem}
.label-huruf{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.label-kolom{font-family:var(--font-teks);font-weight:400;font-size:.82rem;color:var(--t2)}

/* bagian dalam panel admin */
.kotak-gelap{background:var(--ink);color:var(--d1)}
.grup-teks{cursor:pointer;padding:var(--sp-4);background:var(--paper-2);font-family:var(--font-judul);font-weight:700;font-size:.98rem;display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center}
.grup-kotak{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:var(--sp-3);overflow:hidden}
.aksi-lekat-bawah{align-items:center;position:sticky;bottom:0;background:var(--paper);padding:var(--sp-4) 0;border-top:1px solid var(--line);z-index:3}
.merek-login{color:var(--ink);justify-content:center;display:flex;margin-bottom:var(--sp-5)}
.pesan-flash-rapat{margin-bottom:var(--sp-4)}
.btn-garis.aktif{border-color:var(--line-2);color:var(--ink)}

/* --- blok khusus tema ------------------------------------------------- */
.kotak-sorot{border-left:4px solid var(--green)}
.kotak-info-gelap{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--d1)}

/* --- gratis ongkir ---------------------------------------------------- */
.harga-gratis{color:var(--green);display:inline-flex;align-items:center;gap:var(--sp-2)}
.harga-gratis s{color:var(--t3);font-weight:400;font-size:.85em}
.ringkasan-baris.gratis,.ringkasan-baris.gratis strong{color:var(--green)}
.warna-hijau{color:var(--green)}

/* --- editor warna di panel Tampilan ----------------------------------- */
.pilih-warna{width:64px;height:44px;padding:4px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;flex:none}
.medan-kode{max-width:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.aksi-rata-vert{align-items:center}

/* --- perbaikan tata letak (ditaruh paling akhir agar menang urutan) --- */

/* .rincian div{display:flex} punya kekhususan lebih tinggi daripada kelas
   utilitas .blok, sehingga baris tanya-jawab di halaman Kontak berubah jadi
   flex dan teksnya melebar keluar layar. Ditegaskan di sini. */
div.blok{display:block}

/* Peta Google Maps yang ditempel dari menu Pengaturan membawa atribut
   width="600" sehingga melebar melewati kolomnya di semua ukuran layar.
   Wadah .peta-embed memaksa peta mengikuti lebar kolom. */
.peta-embed{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper-3)}
.peta-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block;max-width:100%}
.peta-embed > *{max-width:100%}

/* --- logo & header di layar kecil ---------------------------------------- */
.merek{min-width:0}
@media (max-width:900px){
  .logo-img{max-height:38px;max-width:min(118px,36vw)}
}
@media (max-width:420px){
  /* di layar sangat sempit, ikon sosial di header disembunyikan
     (tautan yang sama tetap ada di footer dan menu laci) */
  .kepala-aksi > .ikon-tautan:not(.keranjang-tautan){display:none}
}

/* ============================================== panel Tampilan (editor) === */
/* Kotak pratinjau langsung: memperlihatkan hasil pilihan warna & font
   sebelum disimpan, memakai contoh elemen yang sama dengan website. */
.pratinjau-kotak{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--sp-5);background:var(--paper-2)}
.pratinjau-isi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5)}
.pratinjau-label{display:inline-block;font-family:var(--font-judul);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:var(--sp-3)}
.pratinjau-gelap{background:var(--ink);border-radius:var(--r);padding:var(--sp-4);display:grid;gap:var(--sp-2)}
.pratinjau-gelap h3,.pratinjau-gelap p{color:var(--d1)}
.pratinjau-nav{font-size:.85rem;color:var(--d2)}
.pratinjau-harga{font-family:var(--font-judul);font-weight:800;font-size:1.14rem;color:var(--t1)}

/* Satu baris elemen = nama + color picker + dropdown font */
.baris-elemen{display:grid;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.baris-elemen:last-child{border-bottom:0;padding-bottom:0}
.elemen-nama strong{display:block;font-size:.97rem}
.elemen-nama .bantuan{font-size:.83rem}
.elemen-kendali{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-3) var(--sp-5);align-items:start}
.kendali-mini{display:grid;gap:6px;min-width:0}
.kendali-mini > span:first-child{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.pilih-warna.kecil{width:52px;height:38px;padding:3px}
.elemen-bantuan{font-size:.83rem;margin:0}
@media (max-width:768px){
  .elemen-kendali{grid-template-columns:minmax(0,1fr)}
}

/* Daftar gambar produk di panel Tampilan */
.daftar-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--sp-4)}
.foto-item{display:grid;gap:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3);background:var(--paper)}
.foto-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xs);background:var(--paper-3)}
.foto-item strong{font-size:.82rem;line-height:1.3}
.foto-item .btn{width:100%}

/* Navigasi cepat antar bagian di menu Tampilan */
.nav-cepat{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.nav-cepat a{padding:9px 15px;border-radius:var(--r-full);border:1px solid var(--line-2);font-size:.85rem;background:var(--paper);transition:var(--t)}
.nav-cepat a:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* Kotak pencarian tulisan di menu Tampilan */
.cari-teks{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:4;background:var(--paper);padding:var(--sp-3) 0}
.cari-teks input{flex:1;min-width:220px}
@media (max-width:640px){.cari-teks{position:static}.cari-teks input{min-width:0}}