/* ==========================================================================
   Jastip Australia Rara — gaya dasar

   Ditulis MOBILE-FIRST: aturan dasar untuk layar HP, lalu diperluas ke layar
   besar lewat @media (min-width). Tidak ada max-width sama sekali.

   Palet diturunkan dari lapangan keras Australian Open dan bendera Australia.
   Dua aksen (bola & herbal) menandai dua lini produk — jadi warnanya membawa
   informasi, bukan sekadar hiasan.

   Tanpa web font: pembeli mayoritas memakai kuota seluler, dan 30–80 KB font
   di tiap halaman lebih mahal daripada nilai estetikanya. Kepribadian tipografi
   ditaruh pada perlakuannya — tracking, bobot, dan angka tabular untuk harga.
   ========================================================================== */

:root {
  /* --- warna ------------------------------------------------------------ */
  --lapangan:     #1a5c86;   /* biru lapangan keras AO */
  --lapangan-tua: #0d2f47;   /* bayangan lapangan: kepala & kaki halaman */
  --lapangan-muda:#e7eff5;   /* biru sangat pucat: latar sorot */
  --garis:        #f1f4f0;   /* putih garis lapangan: latar halaman */
  --kertas:       #ffffff;   /* permukaan kartu */
  --bola:         #d6e04b;   /* kuning bola tenis: lini Australia Open */
  --herbal:       #3f8f5f;   /* hijau daun: lini Suplemen */
  --tinta:        #15202b;   /* teks utama */
  --kabut:        #66727f;   /* teks sekunder */
  --sekat:        #dde3df;   /* garis pemisah */
  --bahaya:       #a3271f;
  --awas:         #7a5600;
  --awas-latar:   #fdf4dc;

  /* --- tipografi -------------------------------------------------------- */
  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --angka: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-mikro:  0.6875rem;   /* 11px — label kategori */
  --t-kecil:  0.8125rem;   /* 13px — keterangan */
  --t-dasar:  0.9375rem;   /* 15px — badan teks */
  --t-sedang: 1.0625rem;   /* 17px */
  --t-besar:  1.25rem;     /* 20px — harga di kartu */
  --t-judul:  1.625rem;    /* 26px — h1 di HP */
  --t-manifes:2rem;        /* 32px — tanggal pengiriman */

  /* --- ruang ------------------------------------------------------------ */
  --r1: 4px;  --r2: 8px;  --r3: 12px;  --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px;

  --lengkung:  10px;
  --lengkung-s: 8px;
  --bayang: 0 1px 2px rgba(13, 47, 71, .05), 0 6px 20px rgba(13, 47, 71, .07);

  --lebar: 1180px;
  --sentuh: 44px;            /* target sentuh minimum */
  --tinggi-kepala: 56px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--huruf);
  font-size: var(--t-dasar);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--garis);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lapangan); }
a:hover { color: var(--lapangan-tua); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--r2); letter-spacing: -.018em; }
h1 { font-size: var(--t-judul); }
h2 { font-size: var(--t-sedang); }

.wadah { width: 100%; margin: 0 auto; padding: 0 var(--r4); }
.wadah-sempit { max-width: 860px; }
.kecil { font-size: var(--t-kecil); color: var(--kabut); }

/* Fokus keyboard selalu terlihat — bagian dari lantai kualitas, bukan opsi. */
:focus-visible {
  outline: 3px solid var(--lapangan);
  outline-offset: 2px;
  border-radius: 3px;
}

.lompat {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lapangan-tua); color: #fff; padding: var(--r3) var(--r4);
}
.lompat:focus { left: 0; }

/* ------------------------------------------------------------------ kepala */

.kepala {
  background: var(--lapangan-tua);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
}
.kepala-isi {
  display: flex; align-items: center; gap: var(--r2);
  min-height: var(--tinggi-kepala);
}

.merek {
  display: inline-flex; align-items: center; gap: var(--r2);
  color: #fff; text-decoration: none; font-weight: 700;
  letter-spacing: -.02em; margin-right: auto; min-width: 0;
  min-height: var(--sentuh); padding-right: var(--r2);
}
.merek:hover { color: var(--bola); }
.merek-teks {
  font-size: var(--t-dasar); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.merek-bendera {
  width: 30px; height: 15px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.nav-atas { display: flex; align-items: center; gap: var(--r1); flex: none; }
.nav-atas a {
  color: #fff; text-decoration: none; font-weight: 600;
  font-size: var(--t-kecil);
  min-height: var(--sentuh); padding: 0 var(--r3);
  display: inline-flex; align-items: center; border-radius: var(--lengkung-s);
}
.nav-atas a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Ditulis sebagai .nav-atas .nav-katalog, bukan .nav-katalog saja: selektor
   .nav-atas a di atas punya spesifisitas lebih tinggi dan akan membatalkannya.
   Di HP tautan ini disembunyikan — logo dan menu kategori sudah menuju katalog. */
.nav-atas .nav-katalog { display: none; }

.lencana {
  display: inline-block; min-width: 20px; margin-left: var(--r1);
  padding: 0 6px; border-radius: 999px;
  background: var(--bola); color: var(--lapangan-tua);
  font-size: var(--t-mikro); font-weight: 700; text-align: center; line-height: 20px;
}

.pita-ingat {
  background: var(--awas-latar); color: var(--awas);
  padding: var(--r3) var(--r4); font-size: var(--t-kecil);
  border-bottom: 1px solid #f0e2b8; text-align: center;
}

/* ------------------------------------------------------- burger / kategori */

.burger { flex: none; }

/* Tombolnya memakai geometri yang persis sama dengan tautan .nav-atas —
   tinggi sentuh, padding, radius — supaya terbaca sebagai satu deret kontrol
   di kepala halaman, bukan elemen asing yang menempel di sebelah kiri. */
.burger > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-width: var(--sentuh); min-height: var(--sentuh);
  padding: 0 var(--r3);
  border-radius: var(--lengkung-s); color: #fff;
  font-weight: 600; font-size: var(--t-kecil);
}
.burger > summary::-webkit-details-marker { display: none; }
.burger > summary:hover { background: rgba(255, 255, 255, .12); }

/* Saat terbuka tombolnya memakai kuning bola — aksen yang sama dipakai lencana
   keranjang dan tombol di bar bawah. Warnanya sekaligus memberi tahu bahwa
   tombol ini sekarang berfungsi menutup, penting karena tanpa JavaScript
   hanya tombol inilah jalan keluarnya. */
.burger[open] > summary { background: var(--bola); color: var(--lapangan-tua); }

.burger-ikon { position: relative; display: block; width: 18px; height: 14px; }
.burger-ikon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.burger-ikon span:nth-child(1) { top: 0; }
.burger-ikon span:nth-child(2) { top: 6px; }
.burger-ikon span:nth-child(3) { top: 12px; }
.burger[open] .burger-ikon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[open] .burger-ikon span:nth-child(2) { opacity: 0; }
.burger[open] .burger-ikon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.burger-teks { display: none; }

/* Layar gelap di belakang laci — perlakuan yang sama dengan lembar filter,
   sehingga dua panel yang menutupi layar berperilaku seragam. */
.burger-tirai {
  position: fixed; inset: var(--tinggi-kepala) 0 0 0; z-index: 50;
  background: rgba(13, 47, 71, .45);
}

/* Di HP: panel yang menggantung dari kepala halaman, setinggi isinya saja.
   Dulu laci ini selalu setinggi layar penuh sehingga dua baris kategori
   menyisakan bidang putih kosong sepanjang halaman. */
.burger-panel {
  position: fixed; inset: var(--tinggi-kepala) auto auto 0; z-index: 55;
  width: min(86vw, 340px);
  max-height: calc(100vh - var(--tinggi-kepala));
  max-height: calc(100dvh - var(--tinggi-kepala));
  overflow-y: auto;
  background: var(--kertas); color: var(--tinta);
  border: 1px solid var(--sekat); border-left: 0;
  border-radius: 0 var(--lengkung) var(--lengkung) 0;
  box-shadow: 0 14px 44px rgba(13, 47, 71, .22);
  padding: var(--r3);
  display: grid; gap: var(--r2); align-content: start;
}

/* Label mikro huruf besar — perangkat yang sama dengan label manifes dan
   kategori di kartu produk. Memberi panel ini tepi atas dan judul. */
.burger-kepala {
  grid-column: 1 / -1; margin: 0;
  padding: var(--r1) var(--r3) var(--r3);
  border-bottom: 1px solid var(--sekat);
  font-size: var(--t-mikro); font-weight: 700; color: var(--kabut);
  text-transform: uppercase; letter-spacing: .12em;
}

.burger-grup { min-width: 0; }

.burger-judul {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: var(--r2);
  font-weight: 700; color: var(--lapangan-tua);
  font-size: var(--t-dasar); letter-spacing: -.015em;
  min-height: var(--sentuh); padding: 0 var(--r3);
  background: var(--lapangan-muda);
  border-left: 3px solid var(--sekat);
  border-radius: 0 var(--lengkung-s) var(--lengkung-s) 0;
}
.burger-judul::-webkit-details-marker { display: none; }
.burger-judul:hover { background: #d9e6ef; }
.burger-nama { flex: 1 1 auto; min-width: 0; }

/* Panah sebagai penanda buka/tutup — memberi tahu ada isi di dalamnya. */
.burger-panah {
  width: 8px; height: 8px; flex: none; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.burger-grup[open] > .burger-judul .burger-panah { transform: rotate(45deg); }
.burger-grup[open] > .burger-judul { margin-bottom: var(--r1); }

/* Garis warna lini produk — penanda yang membawa informasi, bukan hiasan.
   Bentuknya sengaja sama dengan kotak uang muka dan blok peringatan:
   pita 3px di tepi kiri, sudut kanan yang dilengkungkan. */
.burger-grup-ao > .burger-judul { border-left-color: var(--bola); }
.burger-grup-cw > .burger-judul { border-left-color: var(--herbal); }

.burger-daftar { list-style: none; margin: 0; padding: 0; }
.burger-daftar a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
  min-height: var(--sentuh); padding: 0 var(--r3);
  border-radius: var(--lengkung-s); text-decoration: none;
  color: var(--tinta); font-size: var(--t-dasar);
}
.burger-daftar a:hover { background: var(--lapangan-muda); color: var(--lapangan); }
.burger-daftar a.burger-semua { font-weight: 700; color: var(--lapangan); }

/* Angka dibungkus pil, sama dengan lencana keranjang dan rem status di admin. */
.burger-jml {
  flex: none; min-width: 26px; padding: 1px 6px;
  border-radius: 999px; background: #eef1ef; color: var(--kabut);
  font-family: var(--angka); font-size: var(--t-mikro); font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
}
.burger-judul .burger-jml { background: #fff; }

/* ------------------------------------------ manifes: elemen tanda tangan --
   Menggantikan hero pemasaran. Menampilkan fakta yang paling dicari pembeli
   jastip — kapan barangnya benar-benar berangkat — dengan perlakuan seperti
   papan keberangkatan. */

.manifes {
  background: var(--lapangan-tua);
  color: #fff;
  border-bottom: 3px solid var(--bola);
}
.manifes-isi { padding-top: var(--r5); padding-bottom: var(--r5); }

.manifes-label {
  margin: 0 0 var(--r1);
  font-size: var(--t-mikro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--bola);
}
.manifes-tanggal {
  margin: 0 0 var(--r4);
  font-size: var(--t-manifes); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05;
}
.manifes-tanggal span {
  display: block; font-size: var(--t-sedang); font-weight: 600;
  letter-spacing: -.01em; opacity: .72;
}

.manifes-angka {
  display: flex; flex-wrap: wrap; gap: var(--r5);
  margin: 0; padding-top: var(--r4);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.manifes-angka > div { min-width: 0; }
.manifes-angka dt {
  font-size: var(--t-mikro); text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255, 255, 255, .62); font-weight: 600;
}
.manifes-angka dd {
  margin: 2px 0 0; font-size: var(--t-besar); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.manifes-catatan {
  margin: var(--r4) 0 0; font-size: var(--t-kecil);
  color: rgba(255, 255, 255, .72); max-width: 54ch;
}

/* -------------------------------------------------------- cari dan filter */

.panel-cari {
  position: relative;
  background: var(--kertas); border-bottom: 1px solid var(--sekat);
  padding: var(--r3) 0;
  position: sticky; top: var(--tinggi-kepala); z-index: 30;
}
.panel-cari > .baris-cari { padding: 0 var(--r4); }

.baris-cari { display: flex; gap: var(--r2); align-items: center; }
.baris-cari .labelku { position: absolute; left: -9999px; }   /* label untuk pembaca layar */
.baris-cari input[type="search"] { flex: 1 1 auto; min-width: 0; }

input[type="text"], input[type="search"], input[type="tel"], input[type="number"],
input[type="password"], select, textarea {
  font: inherit; font-size: var(--t-dasar); color: var(--tinta); background: #fff;
  border: 1px solid #c4cec6; border-radius: var(--lengkung-s);
  padding: 0 var(--r3); width: 100%; min-height: var(--sentuh);
}
textarea { padding: var(--r3); resize: vertical; min-height: 96px; line-height: 1.5; }
select { min-height: var(--sentuh); }
input:focus, select:focus, textarea:focus { border-color: var(--lapangan); }
input[aria-invalid="true"] { border-color: var(--bahaya); }

.labelku { display: block; font-weight: 600; font-size: var(--t-kecil); margin: var(--r4) 0 var(--r1); }
.petunjuk { font-size: var(--t-kecil); color: var(--kabut); margin: var(--r1) 0 0; }
.galat-kolom { font-size: var(--t-kecil); color: var(--bahaya); margin: var(--r1) 0 0; font-weight: 600; }
.wajib { color: var(--bahaya); }
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Panel filter dibuka lewat checkbox + CSS: tetap jalan tanpa JavaScript. */
.pemicu-filter { position: absolute; opacity: 0; width: 1px; height: 1px; }

.tombol-filter {
  flex: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--r2);
  min-height: var(--sentuh); padding: 0 var(--r4);
}
.pemicu-filter:checked ~ .baris-cari .tombol-filter {
  background: var(--lapangan-muda); border-color: var(--lapangan); color: var(--lapangan-tua);
}
.pemicu-filter:focus-visible ~ .baris-cari .tombol-filter {
  outline: 3px solid var(--lapangan); outline-offset: 2px;
}
.ikon-filter {
  width: 14px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 2px 5px / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 10px / 6px 2px no-repeat;
}

/* Di HP filter muncul sebagai lembar dari bawah — ibu jari lebih mudah menjangkau. */
.tirai-filter {
  position: fixed; inset: 0; z-index: 44; display: none;
  background: rgba(13, 47, 71, .45);
}
.pemicu-filter:checked ~ .tirai-filter { display: block; }

.baris-filter {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  transform: translateY(101%);
  transition: transform .22s ease;
  background: var(--kertas);
  border-radius: var(--lengkung) var(--lengkung) 0 0;
  box-shadow: 0 -8px 32px rgba(13, 47, 71, .22);
  padding: var(--r3) var(--r4) var(--r5);
  max-height: 82vh; overflow-y: auto;
  display: grid; gap: var(--r3);
}
.pemicu-filter:checked ~ .baris-filter { transform: none; }

.filter-kepala {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; padding-bottom: var(--r2);
  border-bottom: 1px solid var(--sekat); margin-bottom: var(--r1);
}
.filter-tutup {
  cursor: pointer; color: var(--lapangan); font-weight: 600;
  font-size: var(--t-kecil);
  min-height: var(--sentuh); display: inline-flex; align-items: center;
  padding: 0 var(--r2);
}
.baris-filter label:not(.filter-tutup) {
  display: grid; gap: var(--r1);
  font-size: var(--t-kecil); color: var(--kabut); font-weight: 600;
}

/* Chip filter aktif. Menggantikan panel yang dulu terbuka sendiri: menjelaskan
   kenapa hasilnya tersaring tanpa menutupi layar. */
.chip-aktif {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2);
  margin: var(--r4) 0 0;
}
.chip-label { font-size: var(--t-kecil); color: var(--kabut); }
.chip {
  display: inline-flex; align-items: center; gap: var(--r2);
  min-height: 36px; padding: 0 var(--r2) 0 var(--r3);
  border-radius: 999px; border: 1px solid var(--lapangan);
  background: var(--lapangan-muda); color: var(--lapangan-tua);
  font-size: var(--t-kecil); font-weight: 600; text-decoration: none;
}
.chip:hover { background: #d9e6ef; color: var(--lapangan-tua); }
.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(26, 92, 134, .16); font-size: 15px; line-height: 1;
}
.chip-bersih {
  border-style: dashed; background: transparent; color: var(--kabut);
  padding: 0 var(--r3);
}
.chip-bersih:hover { color: var(--lapangan-tua); }

.hanya-pembaca-layar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------------- tombol */

.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: var(--t-dasar); font-weight: 600; line-height: 1.2;
  min-height: var(--sentuh); padding: 0 var(--r4);
  border-radius: var(--lengkung-s); border: 1px solid #c4cec6;
  background: #fff; color: var(--lapangan-tua);
  text-decoration: none; cursor: pointer; text-align: center;
}
.tombol:hover { background: var(--lapangan-muda); color: var(--lapangan-tua); }
.tombol-utama {
  background: var(--lapangan); color: #fff; border-color: var(--lapangan);
}
.tombol-utama:hover { background: var(--lapangan-tua); border-color: var(--lapangan-tua); color: #fff; }
.tombol-samar { background: transparent; }

/* Aksi yang tidak bisa dibatalkan. Sengaja bergaris dulu, baru terisi penuh saat
   disentuh: merah pekat yang diam di halaman menarik klik yang tidak disengaja. */
.tombol-bahaya {
  border-color: var(--bahaya); color: var(--bahaya); background: #fff;
}
.tombol-bahaya:hover { background: var(--bahaya); border-color: var(--bahaya); color: #fff; }
.tombol-lebar { display: flex; width: 100%; margin-top: var(--r4); }
.tombol[disabled], .tombol-utama[disabled] { opacity: .5; cursor: not-allowed; }

.tautan-hapus {
  background: none; border: 0; font: inherit; font-size: var(--t-kecil);
  color: var(--bahaya); cursor: pointer; text-decoration: underline;
  min-height: var(--sentuh); padding: 0;
}

/* ------------------------------------------------------------- notifikasi */

.notis {
  border-radius: var(--lengkung-s); padding: var(--r3) var(--r4);
  margin: 0 0 var(--r3); font-size: var(--t-kecil); border: 1px solid;
}
.notis-sukses { background: #e9f5ed; border-color: #b6ddc3; color: #1c6b3f; }
.notis-galat  { background: #fdeceb; border-color: #f2c2bd; color: var(--bahaya); }
.notis-ingat  { background: var(--awas-latar); border-color: #f0e2b8; color: var(--awas); }
.notis-mini   { font-size: var(--t-kecil); color: var(--bahaya); margin: var(--r1) 0 0; }

/* -------------------------------------------------------------- katalog */

.ringkas-hasil {
  margin: var(--r4) 0 var(--r3); color: var(--kabut); font-size: var(--t-kecil);
}
.ringkas-hasil strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Dua kolom sejak 360px: pembeli memindai lebih banyak barang per layar. */
.grid-produk {
  display: grid; gap: var(--r3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--r5);
}
.kartu {
  background: var(--kertas); border: 1px solid var(--sekat);
  border-radius: var(--lengkung); overflow: hidden;
  display: flex;
}
.kartu-tautan { text-decoration: none; color: inherit; display: flex; flex-direction: column; width: 100%; }
.kartu-gambar { position: relative; background: #fff; aspect-ratio: 1 / 1; }
.kartu-gambar img { width: 100%; height: 100%; object-fit: contain; padding: var(--r2); }
.kartu-isi { padding: var(--r2) var(--r3) var(--r3); display: flex; flex-direction: column; gap: 2px; }

/* Dibiarkan membungkus, bukan dipotong elipsis: di kolom selebar 165px lencana
   memakan ruang sampai jenis barang tinggal "LAN…", padahal justru itu
   informasi yang membedakan satu kartu dari kartu lain. */
.kartu-kategori {
  margin: 0; font-size: var(--t-mikro); color: var(--kabut);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  line-height: 1.5;
}
.kartu-nama {
  font-size: var(--t-kecil); font-weight: 600; margin: 0; line-height: 1.3;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Harga adalah teks terbesar di kartu: itu keputusan yang sedang diambil pembeli. */
.kartu-harga {
  margin: var(--r1) 0 0; font-size: var(--t-besar); font-weight: 700;
  color: var(--lapangan-tua); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kartu-harga .awalan { font-size: var(--t-kecil); font-weight: 600; color: var(--kabut); }
.kartu-ukuran {
  margin: var(--r1) 0 0; font-size: var(--t-mikro); color: var(--kabut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kartu-habis .kartu-gambar img { opacity: .5; }

.tanda {
  position: absolute; top: var(--r2); left: var(--r2); z-index: 2;
  font-size: var(--t-mikro); font-weight: 700;
  padding: 3px var(--r2); border-radius: 999px;
}
.tanda-habis { background: #3b4148; color: #fff; }

/* Lencana lini produk — warnanya membawa arti, sama dengan garis di menu. */
.lencana-toko {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: var(--t-mikro); font-weight: 700; letter-spacing: .02em;
  text-transform: none; vertical-align: middle; flex: none;
}
.lencana-ao { background: var(--bola); color: #3a3f0d; }
.lencana-cw { background: #dcefe2; color: #1d5c37; }

.paginasi {
  display: flex; gap: var(--r1); align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 0 0 var(--r6);
}
.paginasi a, .paginasi .hal-aktif {
  min-width: var(--sentuh); min-height: var(--sentuh);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--r3); border-radius: var(--lengkung-s);
  text-decoration: none; border: 1px solid var(--sekat); background: #fff;
  color: var(--lapangan-tua); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.paginasi .hal-aktif { background: var(--lapangan-tua); color: #fff; border-color: var(--lapangan-tua); }

.kosong {
  background: var(--kertas); border: 1px dashed #c4cec6; border-radius: var(--lengkung);
  padding: var(--r6) var(--r4); text-align: center; margin-bottom: var(--r5);
}
.kosong p { margin: 0 0 var(--r3); }
.kosong p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- detail produk */

.remah {
  font-size: var(--t-kecil); color: var(--kabut);
  margin: var(--r2) 0; display: flex; align-items: center;
  flex-wrap: wrap; gap: 2px;
}
.remah a {
  text-decoration: none; display: inline-flex; align-items: center;
  min-height: var(--sentuh); padding: 0 var(--r1);
}
.remah > span { padding: 0 var(--r1); }

.detail { display: grid; gap: var(--r4); margin-bottom: var(--r6); }
.detail-gambar {
  position: relative; background: #fff; border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r3);
}
.detail-gambar img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.detail-info {
  background: var(--kertas); border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r4);
}
.detail-brand {
  margin: 0 0 var(--r1); font-size: var(--t-mikro); color: var(--kabut);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
}
.detail-harga { margin: var(--r3) 0 var(--r1); }
.detail-harga strong {
  font-size: 1.75rem; color: var(--lapangan-tua); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.detail-catatan { display: block; font-size: var(--t-kecil); color: var(--kabut); }

.form-beli {
  margin: var(--r4) 0 0; padding: var(--r4);
  background: var(--lapangan-muda); border-radius: var(--lengkung);
}
.form-beli .labelku:first-child { margin-top: 0; }
.form-beli input[type="number"] { max-width: 110px; }

.blok-info { margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--sekat); }
.blok-info h2 { font-size: var(--t-dasar); }
.blok-info p { margin: 0 0 var(--r2); }

.daftar-ukuran { display: flex; flex-wrap: wrap; gap: var(--r1); margin: 0; }
.pil {
  display: inline-block; padding: 4px var(--r3); border-radius: 999px;
  background: var(--lapangan-muda); color: var(--lapangan-tua);
  font-size: var(--t-kecil); font-weight: 600;
}

.tabel-ukuran { width: 100%; border-collapse: collapse; font-size: var(--t-kecil); }
.tabel-ukuran th, .tabel-ukuran td {
  padding: var(--r2); border-bottom: 1px solid var(--sekat); text-align: left;
}
.tabel-ukuran th { width: 68px; color: var(--lapangan-tua); font-weight: 700; }

.teks-peringatan {
  background: var(--awas-latar); border-left: 3px solid #d8b452;
  padding: var(--r3); border-radius: 0 var(--lengkung-s) var(--lengkung-s) 0;
}

/* -------------------------------------------------------------- keranjang */

.daftar-keranjang { list-style: none; margin: var(--r4) 0; padding: 0; }
.item-keranjang {
  display: grid; gap: var(--r3); align-items: start;
  grid-template-columns: 72px minmax(0, 1fr);
  background: var(--kertas); border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r3); margin-bottom: var(--r2);
}
.item-habis { background: var(--awas-latar); border-color: #f0e2b8; }
.item-gambar img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: var(--lengkung-s); }
.item-nama { font-weight: 600; text-decoration: none; color: var(--tinta); font-size: var(--t-dasar); }
.item-nama:hover { color: var(--lapangan); }
.item-varian, .item-satuan { margin: var(--r1) 0 0; font-size: var(--t-kecil); color: var(--kabut); }
.item-aksi {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--r3);
  flex-wrap: wrap; padding-top: var(--r2); border-top: 1px solid var(--sekat);
}
.item-aksi .labelku { margin: 0; }
.item-aksi input { max-width: 78px; }
.item-subtotal {
  margin: 0 0 0 auto; font-weight: 700; color: var(--lapangan-tua);
  font-variant-numeric: tabular-nums; font-size: var(--t-sedang);
}

.aksi-keranjang { display: flex; gap: var(--r2); flex-wrap: wrap; margin-bottom: var(--r5); }

.kotak-total {
  background: var(--kertas); border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r4); margin-bottom: var(--r5);
}
.tabel-rincian { width: 100%; border-collapse: collapse; font-size: var(--t-dasar); margin: var(--r2) 0; }
.tabel-rincian td { padding: var(--r2) 0; border-bottom: 1px solid var(--sekat); vertical-align: top; }
.tabel-rincian td:last-child {
  text-align: right; white-space: nowrap; padding-left: var(--r3);
  font-variant-numeric: tabular-nums;
}
.tabel-rincian .baris-total td {
  font-weight: 700; font-size: var(--t-sedang); color: var(--lapangan-tua);
  border-bottom: 0; border-top: 2px solid var(--lapangan-tua); padding-top: var(--r3);
}

/* Uang muka: angka kedua yang dicari pembeli setelah total, jadi diberi
   kotaknya sendiri agar tidak tenggelam di antara baris rincian. */
.kotak-dp {
  margin-top: var(--r4); padding: var(--r3) var(--r4);
  background: var(--lapangan-muda);
  border-left: 3px solid var(--lapangan);
  border-radius: 0 var(--lengkung-s) var(--lengkung-s) 0;
}
.dp-label { margin: 0; font-size: var(--t-kecil); color: var(--kabut); font-weight: 600; }
.dp-nilai {
  margin: 2px 0 0; font-size: var(--t-besar); font-weight: 700;
  color: var(--lapangan-tua); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dp-sisa { margin: var(--r1) 0 0; font-size: var(--t-kecil); color: var(--kabut); }

/* Bar keranjang lengket: di HP, tindakan berikutnya selalu berada di jangkauan ibu jari. */
.bar-keranjang {
  position: fixed; inset: auto 0 0 0; z-index: 35;
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  padding-bottom: calc(var(--r3) + env(safe-area-inset-bottom, 0px));
  background: var(--lapangan-tua); color: #fff; text-decoration: none;
  box-shadow: 0 -4px 20px rgba(13, 47, 71, .25);
}
.bar-keranjang:hover { color: #fff; background: #0a2639; }
.bar-jumlah { font-size: var(--t-kecil); color: rgba(255, 255, 255, .78); }
.bar-total {
  font-weight: 700; font-size: var(--t-sedang);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.bar-aksi {
  margin-left: auto; background: var(--bola); color: var(--lapangan-tua);
  font-weight: 700; font-size: var(--t-kecil);
  padding: 0 var(--r4); min-height: 38px;
  display: inline-flex; align-items: center; border-radius: var(--lengkung-s);
  flex: none;
}
body.ada-bar-keranjang { padding-bottom: 76px; }

/* --------------------------------------------------------------- checkout */

.dua-kolom { display: grid; gap: var(--r4); margin: var(--r4) 0 var(--r6); }
.form-checkout, .ringkas-pesanan {
  background: var(--kertas); border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r4);
}
.ringkas-pesanan { order: -1; }            /* ringkasan lebih dulu di HP */
.ringkas-daftar { list-style: none; margin: 0 0 var(--r3); padding: 0; }
.ringkas-daftar li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--r2); padding: var(--r2) 0;
  border-bottom: 1px solid var(--sekat); font-size: var(--t-kecil);
}
.ringkas-qty { color: var(--kabut); font-weight: 700; font-variant-numeric: tabular-nums; }
.ringkas-nama em { display: block; font-style: normal; font-size: var(--t-mikro); color: var(--kabut); }
.ringkas-harga { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ringkas-baris { display: flex; justify-content: space-between; font-size: var(--t-kecil); margin: var(--r1) 0; }
.ringkas-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: var(--r3) 0 var(--r1); padding-top: var(--r3);
  border-top: 2px solid var(--lapangan-tua); font-weight: 600;
}
.ringkas-total strong {
  font-size: var(--t-besar); color: var(--lapangan-tua);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ---------------------------------------------------------------- selesai */

.kotak-sukses {
  background: var(--kertas); border: 1px solid #b6ddc3;
  border-top: 3px solid #1c6b3f; border-radius: var(--lengkung);
  padding: var(--r5) var(--r4); margin: var(--r4) 0; text-align: center;
}
.kode-pesanan {
  margin: var(--r4) 0; font-size: var(--t-mikro); color: var(--kabut);
  text-transform: uppercase; letter-spacing: .12em;
}
.kode-pesanan strong {
  display: block; margin-top: var(--r1); font-size: 1.5rem; letter-spacing: .08em;
  color: var(--lapangan-tua); font-family: var(--angka);
}

/* ------------------------------------------------------------------- kaki */

.kaki {
  background: var(--lapangan-tua); color: #c3d3de; margin-top: var(--r6);
  padding: var(--r5) 0; font-size: var(--t-kecil);
}
.kaki p { margin: 0 0 var(--r3); max-width: 72ch; }
.kaki a { color: var(--bola); }
.kaki .kecil { color: #8ea6b6; }

/* Tautan kaki tetap target sentuh penuh, bukan teks kecil yang sulit ditekan. */
.kaki-tautan { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r4); }
.kaki-tautan a {
  display: inline-flex; align-items: center;
  min-height: var(--sentuh); padding: 0 var(--r3);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--lengkung-s);
  text-decoration: none; font-weight: 600;
}
.kaki-tautan a:hover { background: rgba(255, 255, 255, .1); }

/* --------------------------------------- halaman sistem (install, sandi) */

.halaman-sistem { background: var(--garis); padding: var(--r5) var(--r4); }
.kotak-sistem {
  max-width: 700px; margin: 0 auto; background: #fff; padding: var(--r5);
  border: 1px solid var(--sekat); border-radius: var(--lengkung); box-shadow: var(--bayang);
}
.tabel-cek { width: 100%; border-collapse: collapse; font-size: var(--t-kecil); margin-bottom: var(--r4); }
.tabel-cek td { padding: var(--r2) 0; border-bottom: 1px solid var(--sekat); }
.tabel-cek td:last-child { text-align: right; font-weight: 600; }
.tabel-cek .ok { color: #1c6b3f; }
.tabel-cek .x  { color: var(--bahaya); }
.kotak-salin {
  width: 100%; font-family: var(--angka); font-size: var(--t-kecil);
  padding: var(--r3); border: 1px solid var(--sekat);
  border-radius: var(--lengkung-s); background: var(--garis);
}

/* ------------------------------------------------------------------ admin */

.admin-kepala { background: #081d2e; }
.admin-nav-aktif { background: rgba(255, 255, 255, .16); }

.bungkus-tabel {
  overflow-x: auto; border: 1px solid var(--sekat); border-radius: var(--lengkung);
  margin-bottom: var(--r4); background: #fff;
  -webkit-overflow-scrolling: touch;
}
.tabel-data { width: 100%; border-collapse: collapse; font-size: var(--t-kecil); background: #fff; }
.tabel-data th, .tabel-data td {
  padding: var(--r3); border-bottom: 1px solid var(--sekat);
  text-align: left; vertical-align: middle;
}
.tabel-data th {
  background: var(--lapangan-muda); color: var(--lapangan-tua);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.tabel-data tr:hover td { background: #fafcfa; }
.tabel-data .angka { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kolom tautan ke toko asal: nama domainnya dijaga tetap satu baris supaya
   lebar kolom tidak berubah-ubah dari baris ke baris. */
.sel-sumber { white-space: nowrap; font-size: var(--t-mikro); }
.sel-sumber a { text-decoration: none; font-weight: 600; }
.sel-sumber a:hover { text-decoration: underline; }

.kartu-statistik {
  display: grid; gap: var(--r3);
  grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--r4) 0;
}
.statistik {
  background: #fff; border: 1px solid var(--sekat);
  border-radius: var(--lengkung); padding: var(--r3);
}
.statistik span {
  display: block; font-size: var(--t-mikro); text-transform: uppercase;
  letter-spacing: .05em; color: var(--kabut); font-weight: 700;
}
.statistik strong {
  font-size: var(--t-besar); color: var(--lapangan-tua);
  font-variant-numeric: tabular-nums;
}

.baris-alat { display: grid; gap: var(--r3); margin: var(--r4) 0; }
.baris-alat form { display: grid; gap: var(--r3); }

.kotak-form {
  background: #fff; border: 1px solid var(--sekat); border-radius: var(--lengkung);
  padding: var(--r4); margin-bottom: var(--r4); max-width: 720px;
}
.kotak-form .labelku:first-child { margin-top: 0; }
.grup-isian { display: grid; gap: var(--r3); }

.rem {
  display: inline-block; padding: 2px var(--r2); border-radius: 999px;
  font-size: var(--t-mikro); font-weight: 700;
}
.rem-tampil { background: #e9f5ed; color: #1c6b3f; }
.rem-sembunyi { background: #eef1ef; color: var(--kabut); }
.rem-habis { background: #fdeceb; color: var(--bahaya); }
.rem-regulasi { background: var(--awas-latar); color: var(--awas); cursor: help; }

/* ==========================================================================
   Layar lebih besar. Semua penambahan memakai min-width.
   ========================================================================== */

@media (min-width: 480px) {
  .grid-produk { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .kartu-nama { font-size: var(--t-dasar); }
  .kartu-statistik { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .item-keranjang { grid-template-columns: 88px minmax(0, 1fr); }
  .item-gambar img { width: 88px; height: 88px; }
}

@media (min-width: 768px) {
  :root {
    --t-dasar: 1rem;
    --t-judul: 2rem;
    --t-manifes: 2.75rem;
    --tinggi-kepala: 62px;
  }

  .wadah { padding: 0 var(--r5); max-width: var(--lebar); }
  .nav-atas .nav-katalog { display: inline-flex; }
  .burger-teks { display: inline; }
  .merek-teks { font-size: var(--t-sedang); -webkit-line-clamp: 1; }
  .nav-atas a { font-size: var(--t-dasar); }

  /* Menu kategori jadi panel melayang, bukan laci. Tirai ikut dilepas —
     panel sekecil ini tidak menutupi halaman, persis seperti lembar filter
     yang juga kembali jadi panel biasa di lebar ini. */
  .burger { position: relative; }
  .burger-tirai { display: none; }
  .burger-panel {
    position: absolute; inset: auto auto auto 0; top: calc(100% + var(--r2));
    width: min(88vw, 620px); max-height: min(74vh, 560px);
    border: 1px solid var(--sekat); border-radius: var(--lengkung);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--r3);
    padding: var(--r4);
  }

  .manifes-isi { padding-top: var(--r6); padding-bottom: var(--r6); }
  .manifes-tanggal span { display: inline; font-size: var(--t-manifes); opacity: .5; margin-right: var(--r2); }

  /* Filter kembali menjadi panel biasa di dalam alur halaman. */
  .panel-cari { padding: var(--r4) 0; }
  .panel-cari > .baris-cari { padding: 0 var(--r5); }
  .tirai-filter, .filter-kepala { display: none !important; }
  .baris-filter {
    position: static; transform: none; transition: none;
    box-shadow: none; border-radius: 0; max-height: none; overflow: visible;
    padding: var(--r4) var(--r5) 0;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
  }
  .pemicu-filter:checked ~ .baris-filter { display: grid; }

  .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r5); align-items: start; }
  .detail-gambar { position: sticky; top: calc(var(--tinggi-kepala) + var(--r4)); }
  .detail-info { padding: var(--r5); }

  .dua-kolom { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .ringkas-pesanan { order: 0; position: sticky; top: calc(var(--tinggi-kepala) + var(--r4)); }

  .item-keranjang { grid-template-columns: 96px minmax(0, 1fr) 160px; }
  .item-aksi {
    grid-column: auto; border-top: 0; padding-top: 0;
    flex-direction: column; align-items: flex-end; gap: var(--r1);
  }
  .item-subtotal { margin: var(--r1) 0 0; }

  .baris-alat { display: flex; gap: var(--r3); flex-wrap: wrap; align-items: flex-end; }
  .baris-alat form { display: flex; gap: var(--r2); flex-wrap: wrap; align-items: flex-end; }
  .grup-isian { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

  /* Bar keranjang hanya untuk layar sentuh kecil; di desktop navigasi sudah cukup. */
  .bar-keranjang { display: none; }
  body.ada-bar-keranjang { padding-bottom: 0; }
}

@media (min-width: 1024px) {
  :root { --t-judul: 2.25rem; }
  .grid-produk { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--r4); }
}

/* Hormati preferensi gerak minimal. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .kepala, .kaki, .lompat, .pita-ingat, .baris-alat, .tombol,
  .bar-keranjang, .panel-cari, .burger { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}