/* mewah-user.css (v100) — halaman pengguna lebih rapi, simetris, ber-bayangan, dan ada efek saat ditekan.
   Hanya tampilan; dimuat setelah rapi-user.css. Batalkan dengan menghapus satu baris <link> di index.html.
   Ubah warna/bayangan lewat variabel di bawah. */
body.bk-on:not(.admin-mode){
  --mw-r:14px;                       /* kelengkungan sudut kartu */
  --mw-line:#ececf0;
  --mw-sh:0 1px 2px rgba(20,20,30,.05),0 4px 14px rgba(20,20,30,.07);          /* bayangan diam */
  --mw-sh-hov:0 6px 14px rgba(20,20,30,.10),0 14px 30px rgba(20,20,30,.12);    /* bayangan saat disorot */
  --mw-sh-press:inset 0 2px 6px rgba(20,20,30,.16);                              /* bayangan saat ditekan */
  --mw-ease:cubic-bezier(.2,.7,.2,1);
  background:#f6f6f9;
}
body.bk-on:not(.admin-mode) html,html.bg-slate-50{background:#f6f6f9!important}

/* ---------- Efek dasar: semua yang bisa diklik ---------- */
body.bk-on .bk-it,body.bk-on .bk-tile,body.bk-on .bk-fi,body.bk-on .bk-ha,body.bk-on .bk-btn,
body.bk-on .bk-help,body.bk-on .bk-pill,body.bk-on .bk-ni,body.bk-on .bk-sl-btn,body.bk-on .nm-card,
body.bk-on .nm-ic,body.bk-on #bk-footer a,body.bk-on .bk-strip-in>*{
  transition:transform .18s var(--mw-ease),box-shadow .18s var(--mw-ease),background-color .18s,border-color .18s,color .18s,opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
/* Ditekan: mengecil sedikit + bayangan masuk ke dalam */
body.bk-on .bk-it:active,body.bk-on .bk-tile:active,body.bk-on .bk-fi:active,body.bk-on .nm-card:active,
body.bk-on .bk-strip-in>*:active{transform:scale(.97)!important;box-shadow:var(--mw-sh-press)!important}
body.bk-on .bk-btn:active,body.bk-on .bk-help:active,body.bk-on .bk-pill:active,body.bk-on .bk-ha:active,
body.bk-on .bk-sl-btn:active,body.bk-on .nm-ic:active{transform:translateY(1px) scale(.95)!important;box-shadow:var(--mw-sh-press)!important}
body.bk-on .bk-sl-btn.p:active,body.bk-on .bk-sl-btn.n:active{transform:translateY(-50%) scale(.92)!important}

/* ---------- Header & menu ---------- */
body.bk-on header.nm-header{box-shadow:0 4px 18px rgba(120,0,10,.22)}
body.bk-on header.nm-header .nm-search{box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.4);transition:box-shadow .2s}
body.bk-on header.nm-header .nm-search:focus-within{box-shadow:0 4px 16px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.45)}
body.bk-on #bk-hdr .bk-ha{padding:6px 10px;border-radius:12px}
body.bk-on #bk-hdr .bk-ha:hover{background:rgba(255,255,255,.14);opacity:1;transform:translateY(-1px)}
body.bk-on .bk-help{box-shadow:0 4px 12px rgba(160,70,0,.35)}
body.bk-on .bk-help:hover{box-shadow:0 8px 18px rgba(160,70,0,.4);transform:translateY(-2px)}
body.bk-on #bk-nav{background:#fff;box-shadow:0 3px 12px rgba(20,20,30,.08)}
body.bk-on .bk-ni{padding:6px 12px;border-radius:10px}
body.bk-on .bk-ni:hover{background:#fff1f2;color:var(--nm-ac,#d9000d)}
body.bk-on .bk-btn{box-shadow:0 2px 6px rgba(11,58,126,.18);border-radius:10px;height:34px}
body.bk-on .bk-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(11,58,126,.28)}
body.bk-on .bk-login:hover{background:#f1f5fc}
body.bk-on .bk-reg:hover{background:#0d4699}

/* ---------- Beranda: ritme jarak simetris ---------- */
body.bk-on .bk-home{gap:24px}
body.bk-on .bk-box{border:1px solid var(--mw-line);border-radius:18px;box-shadow:var(--mw-sh);padding:20px 18px 18px;background:#fff}
body.bk-on .bk-hero{gap:24px;align-items:stretch}
body.bk-on .bk-sl-track,body.bk-on .bk-sl,body.bk-on .bk-sl-slide img{border-radius:14px}
body.bk-on .bk-sl{box-shadow:0 6px 18px rgba(20,20,30,.16);overflow:hidden}
body.bk-on .bk-sl-btn{border-radius:50%!important;width:34px;height:34px;box-shadow:0 2px 8px rgba(0,0,0,.28);background:rgba(255,255,255,.95)}
body.bk-on .bk-sl-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.34)}
body.bk-on .bk-sl-btn.p{left:8px}body.bk-on .bk-sl-btn.n{right:8px}
body.bk-on .bk-hl-head,body.bk-on .bk-pop-head{margin-bottom:14px}
body.bk-on .bk-hl-head h3,body.bk-on .bk-hl-head h2,body.bk-on .bk-pop-head h2,body.bk-on .bk-feat h2{
  position:relative;padding-left:14px;font-weight:800}
body.bk-on .bk-hl-head h3::before,body.bk-on .bk-hl-head h2::before,body.bk-on .bk-pop-head h2::before,body.bk-on .bk-feat h2::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:5px;border-radius:5px;background:var(--nm-ac,#d9000d)}

/* ---------- Kartu produk (highlight & terpopuler): sama tinggi, simetris ---------- */
body.bk-on .bk-hl-row,body.bk-on .bk-pop-row{padding:10px 8px 18px;margin:-10px -8px -6px;gap:14px;align-items:stretch}
body.bk-on .bk-hl-row .bk-it,body.bk-on .bk-pop-row .bk-it{
  background:#fff;border:1px solid var(--mw-line);border-radius:var(--mw-r);padding:12px;box-shadow:var(--mw-sh);height:100%;
  position:relative;overflow:hidden}
body.bk-on .bk-hl-row .bk-it:hover,body.bk-on .bk-pop-row .bk-it:hover{transform:translateY(-5px);box-shadow:var(--mw-sh-hov);border-color:#e0e0e8}
body.bk-on .bk-hl-row .bk-it-img,body.bk-on .bk-pop-row .bk-it-img{border-radius:10px;background:#f7f7fa}
body.bk-on .bk-it-img img{transition:transform .35s var(--mw-ease)}
body.bk-on .bk-it:hover .bk-it-img img{transform:scale(1.06)}
body.bk-on .bk-pop-row .bk-it{padding:12px 12px 14px;gap:8px}
body.bk-on .bk-pop-row .bk-it-img{padding:6px}
body.bk-on .bk-pop-row .bk-it-t{display:flex;flex-direction:column;flex:1}
body.bk-on .bk-pop-row .bk-nm{-webkit-line-clamp:3;min-height:calc(1.5em*3)}
body.bk-on .bk-pop-row .bk-pr{color:var(--nm-ac,#d9000d);font-size:17px;font-weight:800}
body.bk-on .bk-bdg,body.bk-on .bk-hl-row .bk-bdg{left:0;top:0;border-radius:10px 0 10px 0;padding:4px 7px;box-shadow:0 2px 6px rgba(160,0,20,.3)}
body.bk-on .bk-lb,body.bk-on .bk-pop-row .bk-lb,body.bk-on .bk-hl-row .bk-lb{border-radius:999px;padding:3px 10px}
body.bk-on .bk-pop-row .bk-sold{border-radius:8px;border-color:#e1e1e8;background:#fafafc}

/* ---------- Kotak fitur & strip ---------- */
body.bk-on .bk-tiles{gap:14px;margin-top:22px}
body.bk-on .bk-tile{border-radius:var(--mw-r);box-shadow:0 2px 8px rgba(40,90,160,.12);min-height:124px;cursor:pointer}
body.bk-on .bk-tile:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(40,90,160,.22);background:#d3e4fa}
body.bk-on .bk-strip{background:#fff;border:1px solid var(--mw-line);border-radius:18px;box-shadow:var(--mw-sh);margin-top:0}
body.bk-on .bk-strip-in{gap:14px;padding:14px}
body.bk-on .bk-strip-in>*{border-radius:12px;padding:10px 12px;justify-content:center}
body.bk-on .bk-strip-in>*:hover{background:#f6f9ff;transform:translateY(-2px);box-shadow:var(--mw-sh)}

/* ---------- Kategori unggulan: kartu terpisah, rata ---------- */
body.bk-on .bk-feat{background:#fff;border:1px solid var(--mw-line);border-radius:18px;box-shadow:var(--mw-sh);padding:20px 18px 18px}
body.bk-on .bk-fgrid{gap:14px;border:0;background:transparent;margin-top:16px}
body.bk-on .bk-fi{border:1px solid var(--mw-line);border-radius:var(--mw-r);box-shadow:var(--mw-sh);background:#fff;min-height:160px;padding:18px 10px 14px}
body.bk-on .bk-fi:hover{transform:translateY(-5px);box-shadow:var(--mw-sh-hov);background:#fff;border-color:#f0c9cc;color:var(--nm-ac,#d9000d)}
body.bk-on .bk-fi .bk-fimg{border-radius:12px}

/* ---------- Hasil pencarian / daftar produk ---------- */
body.bk-on .nm-card{border-radius:var(--mw-r)!important;border:1px solid var(--mw-line)!important;box-shadow:var(--mw-sh)!important;overflow:hidden}
body.bk-on .nm-card:hover{transform:translateY(-5px);box-shadow:var(--mw-sh-hov)!important;border-color:#e0e0e8!important}
body.bk-on .nm-card .nm-img{border-radius:0}
body.bk-on #app-viewport .cat-grid .cat-btn{border-radius:var(--mw-r)!important;box-shadow:var(--mw-sh)!important;transition:transform .18s var(--mw-ease),box-shadow .18s}
body.bk-on #app-viewport .cat-grid .cat-btn:hover{transform:translateY(-4px)!important;box-shadow:var(--mw-sh-hov)!important}
body.bk-on #app-viewport .cat-grid .cat-btn:active{transform:scale(.96)!important;box-shadow:var(--mw-sh-press)!important}
body.bk-on .rounded-2xl{border-radius:var(--mw-r)!important}
body.bk-on .group:hover{box-shadow:var(--mw-sh-hov)!important}

/* ---------- Footer ---------- */
body.bk-on #bk-footer{box-shadow:0 -6px 20px rgba(20,20,30,.08)}
body.bk-on #bk-footer a:hover{transform:translateX(2px)}
body.bk-on #bk-footer a:active{transform:scale(.97);opacity:.8}

/* ---------- Muncul halus saat halaman dibuka ---------- */
@keyframes mw-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.bk-on .bk-home>*{animation:mw-in .45s var(--mw-ease) both}
body.bk-on .bk-home>*:nth-child(2){animation-delay:.05s}body.bk-on .bk-home>*:nth-child(3){animation-delay:.1s}
body.bk-on .bk-home>*:nth-child(4){animation-delay:.15s}body.bk-on .bk-home>*:nth-child(5){animation-delay:.2s}

/* ---------- HP ---------- */
@media(max-width:900px){
  body.bk-on .bk-box,body.bk-on .bk-feat{border-radius:14px;padding:14px 12px}
  body.bk-on .bk-home{gap:16px}
  body.bk-on .bk-hl-row .bk-it:hover,body.bk-on .bk-pop-row .bk-it:hover,body.bk-on .bk-fi:hover,body.bk-on .bk-tile:hover{transform:none}
  body.bk-on .bk-fgrid{gap:10px}
  body.bk-on .bk-tiles{gap:8px}
}

/* ---------- Hormati pengguna yang mematikan animasi ---------- */
@media(prefers-reduced-motion:reduce){
  body.bk-on *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- Penyempurnaan ---------- */
body.bk-on .bk-lb,body.bk-on .bk-hl-row .bk-lb,body.bk-on .bk-pop-row .bk-lb{white-space:nowrap}
body.bk-on .bk-pop{background:#fff;border:1px solid var(--mw-line);border-radius:18px;box-shadow:var(--mw-sh);padding:20px 18px 14px}
@media(max-width:900px){body.bk-on .bk-pop{border-radius:14px;padding:14px 12px 8px}}

/* ---------- Simetri: baris harga/label sejajar antar kartu, kategori rata tengah ---------- */
body.bk-on .bk-pop-row .bk-pr+.bk-lb{margin-top:22px}      /* kartu tanpa catatan harga/unit tetap sejajar */
body.bk-on .bk-hl-row .bk-pr+.bk-lb{margin-top:21px}
@media(min-width:901px){
  body.bk-on .bk-fgrid{display:flex;flex-wrap:wrap;justify-content:center}
  body.bk-on .bk-fgrid>.bk-fi{flex:0 0 calc((100% - 7*14px)/8);min-width:0}
}

/* ---------- HP: kartu highlight tersusun atas-bawah agar tidak terpotong ---------- */
@media(max-width:900px){
  body.bk-on .bk-hl-row{grid-auto-columns:calc((100% - 12px)/2.15);gap:12px}
  body.bk-on .bk-hl-row .bk-it{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
  body.bk-on .bk-hl-row .bk-it-img{flex:none;width:100%;height:auto;aspect-ratio:1/1}
  body.bk-on .bk-hl-row .bk-it-t{width:100%}
  body.bk-on .bk-lb{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- Kategori Unggulan: kisi bergaris 8 kolom x 2 baris dengan foto kategori ---------- */
body.bk-on .bk-fgrid{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;margin-top:16px;
  border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-radius:0;background:#fff;box-shadow:none}
body.bk-on .bk-fgrid>.bk-fi{flex:none;border:0;border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;border-radius:0;box-shadow:none;
  min-height:186px;padding:16px 10px 14px;position:relative}
body.bk-on .bk-fgrid>.bk-fi:hover{transform:none;background:#fff;color:var(--nm-ac,#d9000d);z-index:1;box-shadow:0 8px 20px rgba(20,20,30,.16)}
body.bk-on .bk-fgrid>.bk-fi:active{transform:scale(.98)!important;box-shadow:var(--mw-sh-press)!important}
body.bk-on .bk-fgrid .bk-fimg img{transition:transform .3s var(--mw-ease)}
body.bk-on .bk-fgrid>.bk-fi:hover .bk-fimg img{transform:scale(1.08)}
@media(max-width:1024px){body.bk-on .bk-fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){body.bk-on .bk-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}body.bk-on .bk-fgrid>.bk-fi{min-height:150px}}