/* ══════════════════════════════════════════════════════════════════════
   ARIES TOKO — gaya etalase
   ----------------------------------------------------------------------
   TERANG SAJA. Mode gelap sengaja TIDAK ada.

   Alasannya bukan selera: warna kemasan barang — merah Indomie, biru Aqua,
   kuning Bimoli — adalah bagian dari cara orang mengenali belanjaannya, dan
   di atas latar gelap warna-warna itu berubah rasa. Foto produk juga hampir
   selalu berlatar putih; menaruhnya di kartu gelap menghasilkan kotak putih
   menyala yang menusuk mata. Satu tema yang dikerjakan dengan sungguh-
   sungguh lebih baik daripada dua tema yang setengah jadi.

   KONTRAS DIPERIKSA, BUKAN DIKIRA-KIRA. Tiap pasangan teks/latar di bawah
   sudah dihitung terhadap ambang WCAG AA (4,5:1 untuk teks biasa, 3:1 untuk
   teks besar dan elemen antarmuka). Angkanya ditulis di sebelah warnanya
   supaya penggantian warna berikutnya tidak bisa diam-diam menurunkannya.

   Tidak ada pustaka luar sama sekali — tidak ada CDN, tidak ada webfont.
   Halaman toko harus terbuka cepat di jaringan seluler yang buruk.
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Dikunci ke terang. Tanpa baris ini, peramban bermode gelap akan
     mewarnai sendiri kotak isian dan bilah gulir jadi gelap, sementara
     halamannya tetap putih — campuran yang terlihat rusak. */
  color-scheme: light;

  /* ── Hijau pasar: warna aksi, harga, dan kepercayaan ─────────────────
     Dipilih cukup gelap supaya teks PUTIH di atasnya lolos AA. Hijau yang
     lebih cerah terlihat lebih segar di layar desainer, tapi tombol utamanya
     jadi tidak terbaca di luar ruangan — dan di situlah orang berbelanja. */
  --hijau:        #0E7A4E;   /* teks putih di atasnya = 5,0:1  ✓ AA      */
  --hijau-tua:    #0A5C3B;   /* hover, dan teks hijau di atas putih 7,4:1 */
  --hijau-teks:   #0A5C3B;   /* dipakai kalau hijau jadi TEKS di latar terang */
  --hijau-lembut: #E7F4EC;   /* latar samar; teks --hijau-tua di atasnya 7,1:1 */
  --hijau-garis:  #A8D8BE;

  /* ── Jingga promo: hanya untuk potongan harga dan lencana promo ──────
     Sengaja jarang dipakai. Kalau tiap elemen berteriak, tidak ada yang
     terdengar — promo justru kehilangan artinya. */
  --promo:        #C2410C;   /* teks putih di atasnya = 4,9:1  ✓ AA      */
  --promo-teks:   #9A3412;   /* jingga sebagai TEKS di latar putih 6,4:1 */
  --promo-lembut: #FFF3EC;
  --promo-garis:  #FDD3B8;

  --kuning:       #A16207;   /* teks di latar putih 4,8:1 ✓             */
  --kuning-lembut:#FEF6E7;
  --kuning-garis: #F5D89B;

  --merah:        #B91C1C;   /* teks di latar putih 6,4:1 ✓             */
  --merah-lembut: #FEF2F2;
  --merah-garis:  #F5B5B5;

  /* ── Permukaan ───────────────────────────────────────────────────────
     Latar halaman abu HANGAT, bukan abu kebiruan: kemasan barang dan foto
     produk terlihat lebih hidup di atasnya, dan putihnya kartu jadi terbaca
     sebagai "kartu" tanpa perlu bayangan tebal. */
  --latar:      #F7F6F3;
  --kartu:      #FFFFFF;
  --kartu-2:    #F4F3EF;
  --garis:      #E4E2DC;
  --garis-2:    #EFEDE8;

  /* ── Teks ────────────────────────────────────────────────────────────
     Tiga tingkat saja. Lebih dari itu dan pembeda antar tingkatnya jadi
     terlalu halus untuk berarti apa-apa. */
  --teks:       #1A1A17;   /* di atas putih 16,4:1 — judul & harga        */
  --teks-2:     #4B4B45;   /* di atas putih  8,6:1 — kalimat biasa        */
  --teks-3:     #6E6E66;   /* di atas putih  5,2:1 — keterangan kecil     */
  /* CATATAN: tidak ada tingkat keempat yang lebih pudar. Abu #A8A29E yang
     dipakai versi sebelumnya cuma 2,6:1 di atas putih — di bawah ambang,
     dan praktis tidak terbaca di layar ponsel yang kena matahari. */

  --bayang:     0 1px 2px rgba(26,26,23,.04), 0 1px 3px rgba(26,26,23,.05);
  --bayang-2:   0 2px 4px rgba(26,26,23,.05), 0 4px 12px rgba(26,26,23,.06);
  --bayang-3:   0 8px 16px rgba(26,26,23,.08), 0 16px 32px rgba(26,26,23,.08);

  --bulat:      14px;
  --bulat-s:    10px;
  --bulat-p:    999px;

  --lebar:      1180px;
  --tinggi-atas: 62px;
}

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

body {
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--latar);
  color: var(--teks);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Cincin fokus yang SAMA di seluruh aplikasi. Menghapus outline tanpa
   menggantinya membuat halaman ini tidak bisa dipakai dengan keyboard. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--hijau);
  outline-offset: 2px;
  border-radius: 4px;
}

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 16px; }

/* ── Bilah atas ───────────────────────────────────────────────────────── */
.atas {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--garis);
}
.atas-isi { display: flex; align-items: center; gap: 12px; height: var(--tinggi-atas); }

.merek { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-weight: 700; letter-spacing: -.02em; }
.merek-ikon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, #129460, var(--hijau));
  color: #fff; display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 2px 8px rgba(14,122,78,.28);
}
.merek-nama { font-size: 16.5px; white-space: nowrap; color: var(--teks); }
.merek-nama small { display: block; font-size: 11px; font-weight: 500; color: var(--teks-3); letter-spacing: 0; }

.cari { flex: 1; position: relative; min-width: 0; }
.cari input {
  width: 100%; height: 42px; padding: 0 38px;
  border: 1.5px solid var(--garis); border-radius: var(--bulat-p);
  background: var(--kartu-2); color: var(--teks); outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cari input:focus {
  border-color: var(--hijau); background: var(--kartu);
  box-shadow: 0 0 0 4px rgba(14,122,78,.13);
}
.cari input::placeholder { color: var(--teks-3); }
.cari-ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--teks-3); pointer-events: none; }
.cari-hapus {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--teks-2); cursor: pointer; display: none; place-items: center;
}
.cari-hapus:hover { background: var(--garis-2); }
.cari.isi .cari-hapus { display: grid; }

.aksi-atas { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.tombol-ikon {
  position: relative; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: transparent; color: var(--teks); cursor: pointer;
  display: grid; place-items: center; font-size: 18px; transition: background .15s;
}
.tombol-ikon:hover { background: var(--kartu-2); }
.lencana {
  position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--bulat-p); background: var(--promo); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  border: 2px solid #fff;
}

/* ── Tombol ───────────────────────────────────────────────────────────── */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 18px; border: 1.5px solid transparent;
  border-radius: var(--bulat-p); background: var(--kartu-2); color: var(--teks);
  font-weight: 650; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.tbl:active { transform: scale(.97); }
.tbl-utama {
  background: var(--hijau); color: #fff;
  box-shadow: 0 2px 8px rgba(14,122,78,.24);
}
.tbl-utama:hover { background: var(--hijau-tua); box-shadow: 0 4px 14px rgba(14,122,78,.32); }
.tbl-garis { background: var(--kartu); border-color: var(--garis); color: var(--teks); }
.tbl-garis:hover { border-color: var(--hijau); color: var(--hijau-teks); }
.tbl-lembut { background: var(--hijau-lembut); color: var(--hijau-tua); border-color: var(--hijau-garis); }
.tbl-lembut:hover { background: #DBEDE3; }
.tbl-bahaya { background: var(--merah-lembut); color: var(--merah); border-color: var(--merah-garis); }
.tbl-kecil { height: 34px; padding: 0 13px; font-size: 13px; }
.tbl-besar { height: 50px; padding: 0 26px; font-size: 15.5px; }
.tbl-penuh { width: 100%; }
.tbl:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ══ HERO ══════════════════════════════════════════════════════════════
   Beranda sebelumnya cuma spanduk hijau datar dengan tiga lencana. Yang
   membuat halaman awal terasa hidup bukan gradasi yang lebih ramai,
   melainkan JAWABAN atas hal pertama yang dicari orang: apa yang dijual,
   berapa harganya, dan bagaimana barangnya sampai. */
.hero {
  position: relative; overflow: hidden;
  border-radius: 22px; margin: 18px 0 6px;
  padding: 34px 30px 30px;
  background:
    radial-gradient(1100px 380px at 88% -22%, rgba(255,255,255,.20), transparent 62%),
    linear-gradient(135deg, #073F29 0%, #0A5C3B 45%, #0E7A4E 100%);
  /* Ujung paling terang gradasi ini DIBATASI di #0E7A4E. Hijau yang lebih
     cerah (#129460) terlihat lebih segar, tapi teks putih di atasnya cuma
     3,9:1 — di bawah ambang, dan justru di bagian halaman yang paling
     banyak dibaca orang pertama kali. Sudah dihitung, bukan dikira. */
  color: #fff;
}
/* Pola titik halus — memberi tekstur tanpa mengganggu keterbacaan teks. */
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
  -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
}
.hero > * { position: relative; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--bulat-p);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  font-size: 12px; font-weight: 650; letter-spacing: .01em; margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(24px, 4.2vw, 36px); font-weight: 780;
  letter-spacing: -.03em; line-height: 1.12; max-width: 20ch;
}
.hero p {
  font-size: 15px; line-height: 1.55; margin-top: 10px;
  max-width: 42ch; color: rgba(255,255,255,.90);
}

/* Kotak cari besar di dalam hero — pintu masuk utama ke katalog. */
.hero-cari { display: flex; gap: 9px; margin-top: 20px; max-width: 34rem; }
.hero-cari input {
  flex: 1; min-width: 0; height: 50px; padding: 0 18px;
  border: 0; border-radius: var(--bulat-p);
  background: #fff; color: var(--teks); font-size: 15px;
  box-shadow: 0 6px 18px rgba(6,50,32,.20);
}
.hero-cari input::placeholder { color: var(--teks-3); }
.hero-cari button {
  height: 50px; padding: 0 24px; border: 0; border-radius: var(--bulat-p);
  background: #062F1F; color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer;
  transition: background .15s;
}
.hero-cari button:hover { background: #041F14; }

.hero-pintas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-pintas a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--bulat-p);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  font-size: 13px; font-weight: 600; transition: background .15s;
}
.hero-pintas a:hover { background: rgba(255,255,255,.26); }

/* Tiga janji layanan — bukan hiasan, ini yang ditanyakan pembeli baru. */
.hero-janji {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.20);
}
.hero-janji div { display: flex; align-items: flex-start; gap: 10px; }
.hero-janji .ikon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.hero-janji b { display: block; font-size: 13.5px; font-weight: 700; }
.hero-janji span { font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.45; }
@media (max-width: 720px) {
  .hero { padding: 26px 20px 24px; border-radius: 18px; }
  .hero-janji { grid-template-columns: 1fr; gap: 12px; }
  .hero-cari button { padding: 0 18px; }
}

/* ── Kategori berjajar ────────────────────────────────────────────────── */
.kategori-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 5px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kategori-bar::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 38px; padding: 0 16px; border: 1.5px solid var(--garis);
  border-radius: var(--bulat-p); background: var(--kartu);
  font-size: 13.5px; font-weight: 600; color: var(--teks-2);
  cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--hijau-garis); color: var(--teks); background: var(--hijau-lembut); }
.chip.pilih {
  background: var(--hijau); border-color: var(--hijau); color: #fff;
  box-shadow: 0 2px 8px rgba(14,122,78,.26);
}
.chip .jml { font-size: 11.5px; opacity: .75; font-weight: 500; }

/* ── Judul bagian ─────────────────────────────────────────────────────── */
.judul-bagian {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 30px 0 13px;
}
.judul-bagian h2 { font-size: 18px; font-weight: 750; letter-spacing: -.015em; color: var(--teks); }
.judul-bagian .ket { font-size: 13px; color: var(--teks-3); }
.judul-bagian a.ket:hover { color: var(--hijau-teks); }

/* ══ SECTION PROMO ═════════════════════════════════════════════════════
   Hanya muncul kalau memang ada promo berjalan hari ini. Kalau tidak, tidak
   ada bingkai kosong bertuliskan "belum ada promo" — bagian yang selalu ada
   tapi sering kosong justru mengajari orang untuk mengabaikannya. */
.promo-blok {
  border-radius: 20px; padding: 20px;
  background: linear-gradient(135deg, var(--promo-lembut) 0%, #FFF9F4 100%);
  border: 1.5px solid var(--promo-garis);
  margin-top: 26px;
}
.promo-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.promo-ikon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--promo); color: #fff;
  display: grid; place-items: center; font-size: 21px;
  box-shadow: 0 3px 10px rgba(194,65,12,.28);
}
.promo-kepala h2 { font-size: 18.5px; font-weight: 780; letter-spacing: -.02em; color: var(--promo-teks); }
.promo-kepala p { font-size: 13px; color: var(--teks-2); margin-top: 1px; }
.promo-kepala .kanan { margin-left: auto; }

/* ── Petak barang ─────────────────────────────────────────────────────── */
.petak {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
@media (max-width: 480px) { .petak { gap: 10px; grid-template-columns: repeat(2, 1fr); } }

.kartu {
  position: relative; display: flex; flex-direction: column;
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--bulat); overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.kartu:hover { transform: translateY(-3px); box-shadow: var(--bayang-3); border-color: var(--hijau-garis); }

.kartu-gbr { position: relative; aspect-ratio: 1; background: var(--kartu-2); overflow: hidden; }
.kartu-gbr img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.kartu:hover .kartu-gbr img { transform: scale(1.05); }

/* Pengganti gambar: ikon jenis barang di atas gradasi yang ditentukan kode
   barangnya — selalu sama untuk barang yang sama. Terlihat sebagai pilihan
   desain, bukan sebagai gambar yang gagal dimuat. */
.gbr-ganti {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.gbr-ganti .gg-ikon { font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.20)); }
.gbr-ganti .gg-ini { font-size: 11px; font-weight: 750; letter-spacing: .16em; opacity: .88; text-transform: uppercase; }

.kartu-badge { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--bulat-p);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.badge-promo { background: var(--promo); color: #fff; box-shadow: 0 2px 6px rgba(194,65,12,.30); }
.badge-hemat { background: var(--hijau); color: #fff; }
.badge-habis { background: rgba(26,26,23,.80); color: #fff; }
.badge-tipis { background: #fff; color: var(--kuning); border: 1.5px solid var(--kuning-garis); }

.kartu-tirai { position: absolute; inset: 0; background: rgba(255,255,255,.66); display: grid; place-items: center; }

.kartu-isi { padding: 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.kartu-grp { font-size: 11px; font-weight: 700; color: var(--hijau-teks); text-transform: uppercase; letter-spacing: .05em; }
.kartu-nama {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--teks);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.kartu-harga { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.harga-kini { font-size: 17px; font-weight: 780; color: var(--teks); letter-spacing: -.025em; }
.harga-kini .sat { font-size: 11.5px; font-weight: 500; color: var(--teks-3); letter-spacing: 0; }
.harga-coret { font-size: 12.5px; color: var(--teks-3); text-decoration: line-through; }
.kartu-tangga { font-size: 11.5px; color: var(--hijau-teks); font-weight: 650; margin-top: 4px; }

.kartu-kaki { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.kartu-kaki .tbl { flex: 1; }
.stok-info { font-size: 11.5px; color: var(--teks-3); }

.kartu-tautan { position: absolute; inset: 0; z-index: 1; }
.kartu-kaki, .kartu-badge { position: relative; z-index: 2; }

/* ── Halaman barang ───────────────────────────────────────────────────── */
.brg { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 30px; margin-top: 18px; }
@media (max-width: 820px) { .brg { grid-template-columns: 1fr; gap: 18px; } }

.brg-gbr {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  background: var(--kartu-2); border: 1px solid var(--garis);
}
.brg-gbr img { width: 100%; height: 100%; object-fit: cover; }
.brg-gbr .gbr-ganti .gg-ikon { font-size: 92px; }
.brg-gbr .gbr-ganti .gg-ini { font-size: 15px; }
.brg-mini { display: flex; gap: 8px; margin-top: 10px; }
.brg-mini button {
  width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--garis); background: var(--kartu-2); cursor: pointer; padding: 0;
}
.brg-mini button.pilih { border-color: var(--hijau); }
.brg-mini img { width: 100%; height: 100%; object-fit: cover; }

.brg-judul { font-size: 23px; font-weight: 780; letter-spacing: -.025em; line-height: 1.25; color: var(--teks); }
.brg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.pil {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--bulat-p);
  background: var(--kartu); border: 1.5px solid var(--garis);
  font-size: 12px; font-weight: 650; color: var(--teks-2);
}
.pil-hijau { background: var(--hijau-lembut); border-color: var(--hijau-garis); color: var(--hijau-tua); }
.pil-merah { background: var(--merah-lembut); border-color: var(--merah-garis); color: var(--merah); }

.harga-utama { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.harga-besar { font-size: 32px; font-weight: 800; letter-spacing: -.035em; color: var(--teks); }
.harga-besar .sat { font-size: 14px; font-weight: 500; color: var(--teks-3); letter-spacing: 0; }

.kotak {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--bulat); padding: 16px; margin-top: 15px;
}
.kotak-judul {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--teks-3);
}

/* Tangga harga */
.tangga { display: flex; flex-direction: column; gap: 7px; }
.anak {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--bulat-s);
  background: var(--kartu-2); border: 1.5px solid transparent;
}
.anak.kini { background: var(--hijau-lembut); border-color: var(--hijau-garis); }
.anak.kunci { opacity: .78; }
.anak-hrg { font-size: 15.5px; font-weight: 780; white-space: nowrap; letter-spacing: -.02em; color: var(--teks); }
.anak.kini .anak-hrg { color: var(--hijau-tua); }
.anak-hrg.kunci { font-size: 13px; font-weight: 650; color: var(--teks-3); }
.anak-syarat { font-size: 12.5px; color: var(--teks-2); line-height: 1.4; flex: 1; }
.anak-tanda {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--bulat-p);
  background: var(--hijau); color: #fff; white-space: nowrap;
}

/* Pemilih satuan */
.satuan-pilih { display: flex; gap: 8px; flex-wrap: wrap; }
.satuan-pilih button {
  flex: 1; min-width: 100px; padding: 10px 13px; cursor: pointer;
  border: 1.5px solid var(--garis); border-radius: var(--bulat-s);
  background: var(--kartu); text-align: left; transition: all .15s;
}
.satuan-pilih button:hover { border-color: var(--hijau-garis); }
.satuan-pilih button.pilih { border-color: var(--hijau); background: var(--hijau-lembut); }
.satuan-pilih .nm { font-size: 13.5px; font-weight: 700; text-transform: uppercase; color: var(--teks); }
.satuan-pilih .is { font-size: 11.5px; color: var(--teks-3); }
.satuan-pilih .hr { font-size: 13px; font-weight: 700; color: var(--hijau-teks); margin-top: 2px; }

/* Pengatur jumlah */
.jml-atur { display: inline-flex; align-items: center; border: 1.5px solid var(--garis); border-radius: var(--bulat-p); overflow: hidden; background: var(--kartu); }
.jml-atur button {
  width: 40px; height: 42px; border: 0; background: transparent; cursor: pointer;
  font-size: 19px; font-weight: 600; color: var(--hijau-teks); transition: background .15s;
}
.jml-atur button:hover { background: var(--hijau-lembut); }
.jml-atur button:disabled { color: var(--teks-3); cursor: not-allowed; background: transparent; }
.jml-atur input {
  width: 58px; height: 42px; border: 0; text-align: center;
  font-weight: 700; background: transparent; outline: none; color: var(--teks);
  -moz-appearance: textfield;
}
.jml-atur input::-webkit-outer-spin-button,
.jml-atur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.beli-bar { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.beli-bar .tbl-utama { flex: 1; min-width: 180px; }

/* ── Keranjang ────────────────────────────────────────────────────────── */
.krj-tata { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; margin-top: 18px; }
@media (max-width: 860px) { .krj-tata { grid-template-columns: 1fr; } }

.krj-baris {
  display: grid; grid-template-columns: 78px minmax(0,1fr) auto; gap: 14px;
  padding: 14px; background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--bulat); margin-bottom: 10px; align-items: start;
}
.krj-gbr { width: 78px; height: 78px; border-radius: 10px; overflow: hidden; position: relative; background: var(--kartu-2); }
.krj-gbr img { width: 100%; height: 100%; object-fit: cover; }
.krj-gbr .gbr-ganti .gg-ikon { font-size: 26px; }
.krj-gbr .gbr-ganti .gg-ini { display: none; }
.krj-nama { font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--teks); }
.krj-sat { font-size: 12px; color: var(--teks-3); margin-top: 2px; }
.krj-kanan { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.krj-jml { font-size: 15.5px; font-weight: 780; white-space: nowrap; color: var(--teks); }
@media (max-width: 560px) {
  .krj-baris { grid-template-columns: 64px minmax(0,1fr); }
  .krj-gbr { width: 64px; height: 64px; }
  .krj-kanan { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

.ringkas { position: sticky; top: calc(var(--tinggi-atas) + 14px); }
.ringkas-baris { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--teks-2); }
.ringkas-baris.total {
  border-top: 1.5px dashed var(--garis); margin-top: 8px; padding-top: 13px;
  font-size: 17.5px; font-weight: 780; color: var(--teks);
}
.ringkas-baris .nilai { font-weight: 650; color: var(--teks); }

/* ── Pemberitahuan ────────────────────────────────────────────────────── */
.beri {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--bulat-s);
  font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; border: 1.5px solid;
}
.beri-ikon { flex-shrink: 0; font-size: 16px; line-height: 1.3; }
.beri-info  { background: var(--hijau-lembut);  border-color: var(--hijau-garis);  color: var(--hijau-tua); }
.beri-ingat { background: var(--kuning-lembut); border-color: var(--kuning-garis); color: var(--kuning); }
.beri-salah { background: var(--merah-lembut);  border-color: var(--merah-garis);  color: var(--merah); }
.beri b { font-weight: 700; }
.beri a { text-decoration: underline; }

/* ── Kosong ───────────────────────────────────────────────────────────── */
.kosong { text-align: center; padding: 58px 20px; color: var(--teks-2); }
.kosong-ikon { font-size: 48px; margin-bottom: 12px; opacity: .6; }
.kosong h3 { font-size: 17px; font-weight: 750; color: var(--teks); margin-bottom: 6px; }
.kosong p { font-size: 13.5px; max-width: 26rem; margin: 0 auto 16px; color: var(--teks-2); }

/* ── Halaman berikutnya ───────────────────────────────────────────────── */
.halaman { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 28px 0; flex-wrap: wrap; }
.halaman a, .halaman span {
  min-width: 40px; height: 40px; padding: 0 13px; border-radius: var(--bulat-s);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--garis); background: var(--kartu);
  font-size: 13.5px; font-weight: 650; color: var(--teks-2);
}
.halaman a:hover { border-color: var(--hijau); color: var(--hijau-teks); }
.halaman .kini { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.halaman .putus { border: 0; background: transparent; color: var(--teks-3); }

/* ── Bilah bawah (ponsel) ─────────────────────────────────────────────── */
.bawah {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: none; background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); border-top: 1px solid var(--garis);
  padding: 7px 0 max(7px, env(safe-area-inset-bottom));
}
.bawah-isi { display: flex; }
.bawah a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 0; font-size: 10.5px; font-weight: 650; color: var(--teks-3);
  position: relative;
}
.bawah a.kini { color: var(--hijau-teks); }
.bawah .lencana { top: -1px; right: 50%; margin-right: -20px; }
@media (max-width: 720px) {
  .bawah { display: block; }
  body { padding-bottom: 70px; }
}

/* ── Kaki halaman ─────────────────────────────────────────────────────── */
.kaki { margin-top: 48px; padding: 28px 0 32px; border-top: 1px solid var(--garis); background: var(--kartu); }
.kaki-isi { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; font-size: 13px; color: var(--teks-2); }
.kaki h4 { font-size: 13px; font-weight: 700; color: var(--teks); margin-bottom: 8px; }
.kaki a:hover { color: var(--hijau-teks); }
.kaki-segar { font-size: 11.5px; color: var(--teks-3); margin-top: 16px; text-align: center; }

/* ── Roti (breadcrumb) ────────────────────────────────────────────────── */
.roti { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--teks-3); padding: 15px 0 0; flex-wrap: wrap; }
.roti a:hover { color: var(--hijau-teks); }

/* ── Formulir ─────────────────────────────────────────────────────────── */
.form-grup { margin-bottom: 15px; }
.form-grup label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--teks-2); }
.form-grup .bantu { font-size: 11.5px; color: var(--teks-3); margin-top: 5px; line-height: 1.5; }
.isian {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--garis); border-radius: var(--bulat-s);
  background: var(--kartu); color: var(--teks); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea.isian { height: auto; padding: 12px 14px; resize: vertical; min-height: 88px; line-height: 1.55; }
.isian::placeholder { color: var(--teks-3); }
.isian:focus { border-color: var(--hijau); box-shadow: 0 0 0 4px rgba(14,122,78,.13); }
.isian.salah { border-color: var(--merah); }
.isian:disabled { background: var(--kartu-2); color: var(--teks-3); }

.pilihan { display: grid; gap: 9px; }
.pilihan label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 13px 15px; border: 1.5px solid var(--garis); border-radius: var(--bulat-s);
  background: var(--kartu); transition: all .15s; font-size: 14px; font-weight: 500; color: var(--teks);
}
.pilihan label:hover { border-color: var(--hijau-garis); background: #FCFDFC; }
.pilihan input { margin-top: 2px; accent-color: var(--hijau); width: 18px; height: 18px; flex-shrink: 0; }
.pilihan label:has(input:checked) { border-color: var(--hijau); background: var(--hijau-lembut); }
.pilihan .jdl { font-weight: 700; display: block; color: var(--teks); }
.pilihan .ket { font-size: 12px; color: var(--teks-2); display: block; margin-top: 2px; }

/* Kotak kode OTP */
.otp-kotak { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.otp-kotak input {
  width: 48px; height: 58px; text-align: center; font-size: 23px; font-weight: 780;
  border: 1.5px solid var(--garis); border-radius: var(--bulat-s);
  background: var(--kartu); color: var(--teks); outline: none;
}
.otp-kotak input:focus { border-color: var(--hijau); box-shadow: 0 0 0 4px rgba(14,122,78,.13); }

/* ── Kartu member ─────────────────────────────────────────────────────── */
.kartu-member {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 20px 22px; margin-top: 16px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--w) 86%, #000 14%),
              color-mix(in srgb, var(--w) 64%, #fff 6%));
  color: #fff; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--w) 70%, transparent);
}
.kartu-member::after {
  content: ''; position: absolute; top: -60%; right: -10%;
  width: 60%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.km-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; position: relative; }
.km-label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .78; font-weight: 700; }
.km-nama { font-size: 20px; font-weight: 780; letter-spacing: -.02em; margin-top: 3px; }
.km-telp { font-size: 12.5px; opacity: .88; font-family: ui-monospace, monospace; margin-top: 2px; }
.km-tingkat { text-align: right; flex-shrink: 0; }
.km-bintang { font-size: 23px; line-height: 1; }
.km-tnama { font-size: 14px; font-weight: 780; letter-spacing: .02em; margin-top: 2px; }
.km-bawah {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
  margin-top: 18px; padding-top: 15px; position: relative;
  border-top: 1px solid rgba(255,255,255,.26);
}
.km-kecil { font-size: 11.5px; opacity: .85; }
.km-poin { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.km-poin span { font-size: 12.5px; font-weight: 600; opacity: .85; letter-spacing: 0; }
.km-tbl {
  flex-shrink: 0; padding: 9px 16px; border-radius: var(--bulat-p);
  background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.32);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background .15s;
}
.km-tbl:hover { background: rgba(255,255,255,.32); }

/* ── Daftar tingkat member ────────────────────────────────────────────── */
.tingkat-baris {
  display: flex; align-items: center; gap: 15px;
  padding: 14px 16px; border-radius: var(--bulat);
  border: 1.5px solid var(--garis); background: var(--kartu); margin-bottom: 9px;
}
.tingkat-baris.punya { border-color: var(--t); background: color-mix(in srgb, var(--t) 6%, #fff); }
.tingkat-cip {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t) 86%, #000 14%), var(--t));
}
.tingkat-nama { font-size: 15.5px; font-weight: 780; letter-spacing: -.01em; }
.tingkat-ket { font-size: 12.5px; color: var(--teks-2); margin-top: 3px; line-height: 1.45; }

/* ── Riwayat poin ─────────────────────────────────────────────────────── */
.poin-baris { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--garis-2); }
.poin-ikon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; font-weight: 700; }
.poin-masuk { background: var(--hijau-lembut); color: var(--hijau-tua); }
.poin-tukar { background: var(--promo-lembut); color: var(--promo-teks); }
.poin-nilai { margin-left: auto; font-weight: 780; font-size: 15px; white-space: nowrap; }
.poin-nilai.masuk { color: var(--hijau-teks); }
.poin-nilai.tukar { color: var(--promo-teks); }

/* ── Pembayaran ───────────────────────────────────────────────────────── */
.bayar-qris { display: block; max-width: 260px; margin: 12px auto; border-radius: var(--bulat); border: 1.5px solid var(--garis); background: #fff; padding: 10px; }
.bukti-pratinjau { max-width: 100%; border-radius: var(--bulat-s); border: 1.5px solid var(--garis); margin-top: 10px; }
.rek-baris {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--bulat-s);
  background: var(--kartu-2); border: 1.5px solid var(--garis); margin-bottom: 7px; font-size: 13.5px;
}
.rek-salin { border: 0; background: none; cursor: pointer; color: var(--hijau-teks); font-weight: 700; font-size: 12.5px; }

/* ── Pesan singkat melayang ───────────────────────────────────────────── */
.sembur {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(14px);
  z-index: 90; max-width: min(92vw, 24rem);
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: var(--bulat-p);
  background: #1A1A17; color: #fff;
  font-size: 13.5px; font-weight: 650; box-shadow: var(--bayang-3);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.sembur.tampil { opacity: 1; transform: translateX(-50%) translateY(0); }
.sembur.salah { background: var(--merah); }

/* ── Rangka memuat ────────────────────────────────────────────────────── */
@keyframes denyut { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.rangka { background: var(--kartu-2); border-radius: 6px; animation: denyut 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}