/* =========================================================
   Kios Camp — gaya bersama semua halaman  |  prefix: kiosweb-
   Dipakai index.html, kategori.html, detail.html, cart.html, invoice.html.

   Yang ada di sini cuma komponen yang dipakai lebih dari satu halaman
   (header, tab bar, kartu produk, tombol, chip, action bar).
   Gaya yang cuma dipakai satu halaman tetap ditulis di <style> halaman itu,
   biar gampang dicari waktu ngoprek.
   ========================================================= */

:root{
  /* Ganti satu baris ini kalau mau warna utama toko diubah */
  --kiosweb-primary:#0B4F4A;
  --kiosweb-primary-dark:#083A36;
  --kiosweb-primary-soft:#EDF4F2;
  --kiosweb-accent:#E2552B;

  --kiosweb-bg:#FFFFFF;
  --kiosweb-surface:#FFFFFF;
  --kiosweb-surface-2:#F5F7F7;

  --kiosweb-ink:#0F1C1A;
  --kiosweb-muted:#71827F;
  --kiosweb-line:#E8EDEC;

  --kiosweb-radius-sm:12px;
  --kiosweb-radius:18px;
  --kiosweb-radius-lg:24px;
  --kiosweb-radius-xl:30px;

  --kiosweb-shadow:0 1px 2px rgba(15,28,26,.03), 0 10px 24px -14px rgba(15,28,26,.16);
  --kiosweb-shadow-lift:0 2px 4px rgba(15,28,26,.04), 0 24px 44px -20px rgba(11,79,74,.35);
  --kiosweb-shadow-float:0 10px 30px -8px rgba(15,28,26,.22);
  --kiosweb-shadow-nav:0 6px 16px -6px rgba(15,28,26,.14), 0 18px 40px -12px rgba(11,79,74,.28);

  /* Warna aksen yang menyiram bagian atas halaman lalu memudar jadi putih.
     Ini yang bikin header terasa menyatu dengan konten, bukan bar terpisah. */
  --kiosweb-wash-1:#D3E9E2;
  --kiosweb-wash-2:#E7F3EF;
  --kiosweb-wash-tinggi:440px;

  /* tinggi tab bar melayang + jarak aman layar HP berponi.
     Dilebihkan sedikit dari tinggi asli bar (±75px) supaya konten terakhir
     tidak mepet — dulu peran itu dipegang footer, yang sekarang sudah dihapus. */
  --kiosweb-tabbar:100px;
}

*,*::before,*::after{box-sizing:border-box;}
/* Pantulan (rubber band) di ujung halaman:
   JANGAN pasang overscroll-behavior-y:none/contain di sini. Dulu sempat dipasang
   untuk mematikan pantulan, tapi efek sampingnya pull-to-refresh (swipe dari atas
   ke bawah) ikut mati di Chrome Android — dan `contain` pun sama saja, karena
   browser menghitung pull-to-refresh sebagai scroll chaining ke browser.
   Pantulan sekarang dibiarkan jalan; peredamnya warna kanvas: <html> SENGAJA
   dikasih warna dasar abu, jadi waktu memantul (tab bar & action bar yang
   position:fixed ikut terangkat) yang kelihatan di bawahnya warna dasar yang
   menyatu, bukan blok putih kosong yang kebaca sebagai halaman rusak.
   Karena <html> punya background sendiri, warna body tidak lagi dipropagasi ke
   kanvas — jadi body WAJIB minimal setinggi layar (min-height:100%) supaya latar
   halamannya tetap menutup penuh. */
html{
  height:100%;
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  background:var(--kiosweb-surface-2);
}
body{min-height:100%;}
body,h1,h2,h3,p,figure,dl,dd{margin:0;}
button,input,select,textarea{font:inherit;color:inherit;}
img{display:block;max-width:100%;}
svg{width:100%;height:100%;display:block;}

.kiosweb-body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  background:
    linear-gradient(180deg,var(--kiosweb-wash-1) 0%,var(--kiosweb-wash-2) 34%,transparent 100%)
      no-repeat top center / 100% var(--kiosweb-wash-tinggi),
    var(--kiosweb-bg);
  color:var(--kiosweb-ink);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  /* ruang buat tab bar melayang */
  padding-bottom:calc(var(--kiosweb-tabbar) + env(safe-area-inset-bottom));
}
/* halaman yang isinya kartu putih (keranjang, invoice) — dasarnya abu,
   siraman aksennya tetap sama supaya sekeluarga dengan halaman lain */
.kiosweb-body--abu{
  background:
    linear-gradient(180deg,var(--kiosweb-wash-1) 0%,var(--kiosweb-wash-2) 34%,transparent 100%)
      no-repeat top center / 100% var(--kiosweb-wash-tinggi),
    var(--kiosweb-surface-2);
}
.kiosweb-container{width:min(1180px,100% - 32px);margin-inline:auto;}

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

/* =========================================================
   Header aplikasi — logo kiri, tombol bulat kanan
   ========================================================= */
/* Di paling atas halaman header dibiarkan menyatu dengan siraman warna.
   Begitu digeser turun, muncul lapisan putih TIPIS + blur — cukup untuk
   memisahkan header dari konten yang lewat, tanpa jadi bar putih pekat. */
.kiosweb-appbar{
  position:sticky;top:0;z-index:40;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
}
.kiosweb-appbar--scrolled{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom-color:rgba(232,237,236,.55);
}
.kiosweb-appbar__inner{display:flex;align-items:center;gap:12px;height:64px;}

.kiosweb-logo{display:flex;align-items:center;text-decoration:none;color:var(--kiosweb-ink);margin-right:auto;}
.kiosweb-logo__text{font-weight:800;font-size:20px;letter-spacing:-.035em;}
.kiosweb-logo__text em{font-style:normal;color:var(--kiosweb-primary);}

/* judul halaman dalam (dipakai cart & invoice) */
.kiosweb-appbar__title{font-size:16px;font-weight:800;letter-spacing:-.03em;margin-right:auto;}

/* Tombol bulat putih solid yang mengambang di atas siraman warna —
   bukan kotak abu berbingkai seperti header biasa. */
.kiosweb-round{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:#fff;border:0;
  display:grid;place-items:center;color:var(--kiosweb-ink);
  text-decoration:none;
  box-shadow:0 2px 8px -2px rgba(15,28,26,.14), 0 8px 20px -12px rgba(15,28,26,.24);
  transition:color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.kiosweb-round:hover{color:var(--kiosweb-primary);box-shadow:0 4px 12px -2px rgba(15,28,26,.18), 0 12px 26px -12px rgba(11,79,74,.4);}
.kiosweb-round:active{transform:scale(.94);}
.kiosweb-round svg{width:19px;height:19px;}
.kiosweb-round--solid{background:rgba(255,255,255,.94);box-shadow:var(--kiosweb-shadow-float);}

.kiosweb-dot{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  background:var(--kiosweb-accent);color:#fff;border-radius:999px;
  font-size:11px;font-weight:700;display:grid;place-items:center;
  border:2px solid #fff;
}
.kiosweb-dot[hidden]{display:none;}

/* =========================================================
   Tab bar melayang — Home / Kategori / Video / Notifikasi / Akun
   ========================================================= */
.kiosweb-tabbar{
  position:fixed;z-index:45;
  left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:6px;
  padding:8px;border-radius:999px;
  /* lapisan tipis + blur, sama resepnya dengan header saat di-scroll */
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:0;
  box-shadow:var(--kiosweb-shadow-nav);
}
.kiosweb-tab{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:12px 15px;border-radius:999px;
  text-decoration:none;color:#4B5A58;
  font-size:13.5px;font-weight:700;letter-spacing:-.02em;
  transition:background .2s ease,color .2s ease;
}
.kiosweb-tab svg{width:21px;height:21px;flex:none;}
.kiosweb-tab__text{display:none;}
.kiosweb-tab:hover{background:var(--kiosweb-primary-soft);color:var(--kiosweb-primary);}
.kiosweb-tab--active{background:var(--kiosweb-primary);color:#fff;}
/* tab aktif latarnya gelap — hover JANGAN mengubah warna teks,
   nanti hijau ketemu hijau dan tulisannya hilang */
.kiosweb-tab--active:hover{background:var(--kiosweb-primary);color:#fff;}
/* Cuma Home yang memunculkan tulisannya waktu aktif; tab lain yang aktif
   tetap ikon saja — 5 tab + satu label sudah pas di layar HP paling sempit,
   kalau tiap tab ikut menampilkan teks barisnya jadi berdesakan. */
.kiosweb-tab--home.kiosweb-tab--active .kiosweb-tab__text{display:inline;}
.kiosweb-tab .kiosweb-dot{top:4px;right:4px;}

@media (max-width:380px){
  .kiosweb-tab{padding:12px 12px;}
  .kiosweb-tabbar{gap:4px;}
}

/* =========================================================
   Tombol
   ========================================================= */
.kiosweb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;cursor:pointer;border-radius:999px;
  padding:14px 24px;font-size:14px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;
  transition:background .18s ease,transform .18s ease,border-color .18s ease,color .18s ease;
}
.kiosweb-btn svg{width:16px;height:16px;}
.kiosweb-btn--primary{background:var(--kiosweb-primary);color:#fff;}
.kiosweb-btn--primary:hover{background:var(--kiosweb-primary-dark);}
.kiosweb-btn--ghost{background:var(--kiosweb-surface);color:var(--kiosweb-primary);border-color:var(--kiosweb-line);}
.kiosweb-btn--ghost:hover{background:var(--kiosweb-primary-soft);border-color:var(--kiosweb-primary);}
.kiosweb-btn--sm{padding:10px 18px;font-size:13px;}
.kiosweb-btn--block{width:100%;}
.kiosweb-btn:active{transform:scale(.98);}
.kiosweb-btn:disabled{cursor:not-allowed;background:#E3E8E7;color:#98A5A3;border-color:transparent;}

/* =========================================================
   Judul bagian — "Produk Terbaru" + "Lihat semua"
   ========================================================= */
.kiosweb-sec{margin-top:26px;}
.kiosweb-sec__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;
}
.kiosweb-sec__title{font-size:17px;font-weight:800;letter-spacing:-.035em;}
.kiosweb-sec__link{
  font-size:13px;font-weight:700;color:var(--kiosweb-primary);
  text-decoration:none;flex:none;
}
.kiosweb-sec__link:hover{text-decoration:underline;}

/* =========================================================
   Chip filter yang bisa digeser ke samping
   ========================================================= */
.kiosweb-chiprow{
  display:flex;gap:9px;overflow-x:auto;
  padding:2px 16px 2px;margin-inline:-16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.kiosweb-chiprow::-webkit-scrollbar{display:none;}
.kiosweb-chip{
  flex:none;cursor:pointer;
  border:1px solid var(--kiosweb-line);background:var(--kiosweb-surface);
  padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--kiosweb-muted);
  transition:all .16s ease;white-space:nowrap;
}
.kiosweb-chip:hover{border-color:var(--kiosweb-primary);color:var(--kiosweb-primary);}
.kiosweb-chip--active{background:var(--kiosweb-ink);border-color:var(--kiosweb-ink);color:#fff;}
/* chip yang sedang aktif latarnya hitam — hover tidak boleh menghijaukan
   teksnya, karena hijau tua di atas hitam praktis tidak kebaca */
.kiosweb-chip--active:hover{background:var(--kiosweb-ink);border-color:var(--kiosweb-ink);color:#fff;}

/* =========================================================
   Kartu produk — grid 2 kolom di HP, tombol suka di pojok
   ========================================================= */
.kiosweb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}

.kiosweb-prod{
  position:relative;display:flex;flex-direction:column;
  background:var(--kiosweb-surface);
  border-radius:var(--kiosweb-radius-lg);
  animation:kiosweb-rise .45s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes kiosweb-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.kiosweb-prod__media{
  position:relative;display:block;
  border-radius:var(--kiosweb-radius-lg);overflow:hidden;
  background:var(--kiosweb-surface-2);
}
.kiosweb-prod__img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.kiosweb-prod:hover .kiosweb-prod__img{transform:scale(1.045);}

/* barang habis: foto diredupkan */
.kiosweb-prod--out .kiosweb-prod__img{filter:grayscale(1);opacity:.55;}
.kiosweb-prod--out:hover .kiosweb-prod__img{transform:none;}

.kiosweb-prod__badge{
  position:absolute;left:10px;top:10px;
  padding:6px 11px;border-radius:999px;
  background:var(--kiosweb-ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:-.01em;
}
.kiosweb-prod__badge--sale{background:var(--kiosweb-accent);}
.kiosweb-prod__badge--out{background:#8A9997;}

/* tombol hati */
.kiosweb-wish{
  position:absolute;right:9px;top:9px;z-index:2;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:0;padding:8px;
  background:rgba(255,255,255,.92);color:var(--kiosweb-ink);
  box-shadow:0 2px 8px rgba(15,28,26,.14);
  display:grid;place-items:center;
  transition:transform .18s ease,color .18s ease,background .18s ease;
}
.kiosweb-wish svg{width:17px;height:17px;}
.kiosweb-wish:hover{transform:scale(1.08);}
.kiosweb-wish:active{transform:scale(.9);}
.kiosweb-wish--on{color:var(--kiosweb-accent);}

.kiosweb-prod__body{padding:11px 4px 4px;display:flex;flex-direction:column;gap:3px;flex:1;}
.kiosweb-prod__name{
  font-size:13.5px;font-weight:700;line-height:1.35;letter-spacing:-.02em;
  /* dipotong 2 baris biar tinggi kartu rata */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kiosweb-prod__link{color:inherit;text-decoration:none;}
.kiosweb-prod__link:hover{color:var(--kiosweb-primary);}
.kiosweb-prod__brand{font-size:12px;color:var(--kiosweb-muted);font-weight:500;}
.kiosweb-prod__foot{display:flex;align-items:baseline;gap:7px;margin-top:auto;padding-top:5px;flex-wrap:wrap;}
.kiosweb-prod__price{font-size:15px;font-weight:800;letter-spacing:-.03em;}
.kiosweb-prod__old{font-size:12px;font-weight:600;color:var(--kiosweb-muted);text-decoration:line-through;}

/* =========================================================
   Bintang rating
   ========================================================= */
.kiosweb-rate{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;
}
.kiosweb-rate svg{width:13px;height:13px;color:#F5A524;flex:none;}
.kiosweb-rate em{font-style:normal;font-weight:500;color:var(--kiosweb-muted);}

/* =========================================================
   Action bar bawah — dipakai detail & cart
   ========================================================= */
.kiosweb-actionbar{
  position:fixed;left:0;right:0;z-index:46;
  bottom:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--kiosweb-line);
  display:flex;align-items:center;gap:12px;
}
.kiosweb-actionbar__inner{
  width:min(1180px,100%);margin-inline:auto;
  display:flex;align-items:center;gap:12px;
}
.kiosweb-actionbar__price{display:flex;flex-direction:column;gap:1px;padding-left:4px;}
.kiosweb-actionbar__label{font-size:11.5px;font-weight:600;color:var(--kiosweb-muted);}
.kiosweb-actionbar__value{font-size:18px;font-weight:800;letter-spacing:-.035em;}
.kiosweb-actionbar .kiosweb-btn{flex:1;}

/* halaman yang punya action bar tidak perlu ruang tab bar */
.kiosweb-body--bar{padding-bottom:calc(84px + env(safe-area-inset-bottom));}

/* =========================================================
   Kartu putih biasa (cart, invoice)
   ========================================================= */
.kiosweb-card{
  background:var(--kiosweb-surface);
  border:1px solid var(--kiosweb-line);
  border-radius:var(--kiosweb-radius-lg);
  padding:18px;
}
.kiosweb-card + .kiosweb-card{margin-top:14px;}
.kiosweb-card__title{font-size:15px;font-weight:800;letter-spacing:-.03em;margin-bottom:14px;}

/* =========================================================
   Stepper jumlah
   ========================================================= */
.kiosweb-stepper{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--kiosweb-surface-2);border-radius:999px;padding:3px;
}
.kiosweb-stepper button{
  width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--kiosweb-primary);
  font-size:17px;font-weight:700;line-height:1;
  display:grid;place-items:center;
  transition:background .16s ease;
}
.kiosweb-stepper button:hover:not(:disabled){background:#fff;}
.kiosweb-stepper button:disabled{color:#B6C2C0;cursor:not-allowed;}
.kiosweb-stepper__value{
  min-width:32px;text-align:center;
  font-size:13px;font-weight:700;
}

/* =========================================================
   Keadaan kosong
   ========================================================= */
.kiosweb-empty{
  border:1px dashed var(--kiosweb-line);border-radius:var(--kiosweb-radius-lg);
  padding:56px 24px;text-align:center;color:var(--kiosweb-muted);
}
.kiosweb-empty svg{width:36px;height:36px;margin:0 auto 14px;color:var(--kiosweb-primary);opacity:.4;}
.kiosweb-empty__title{font-size:15px;font-weight:800;color:var(--kiosweb-ink);letter-spacing:-.03em;}
.kiosweb-empty__text{font-size:13.5px;margin-top:6px;line-height:1.6;}
.kiosweb-empty .kiosweb-btn{margin-top:18px;}

/* =========================================================
   Lapisan gelap untuk sheet/pencarian
   ========================================================= */
.kiosweb-overlay{
  position:fixed;inset:0;z-index:48;
  background:rgba(15,28,26,.4);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.kiosweb-overlay--show{opacity:1;visibility:visible;}

/* =========================================================
   Layar besar — kartu jadi lebih banyak per baris,
   tab bar tetap melayang di bawah seperti di HP.
   ========================================================= */
@media (min-width:640px){
  .kiosweb-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
  .kiosweb-tab__text{display:inline;}
  .kiosweb-tab{padding:11px 16px;}
}
@media (min-width:960px){
  .kiosweb-grid{grid-template-columns:repeat(4,1fr);gap:20px;}
  .kiosweb-sec{margin-top:34px;}
  .kiosweb-sec__title{font-size:19px;}
  .kiosweb-prod__name{font-size:14.5px;}
  .kiosweb-prod__price{font-size:16px;}
}