/* p-produk.css — gaya v2 halaman Produk / Menu (dimuat SETELAH semua css lama). Prefix: pd- */
@keyframes pdRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pdBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-10px) scale(1.08)}}
@keyframes pdGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.pd-hero{position:relative;overflow:hidden;color:#fff;border-radius:28px;padding:24px 26px 20px;margin-bottom:16px;background:linear-gradient(140deg,#F26A2E -10%,#D53E0F 46%,#7E0306 118%);box-shadow:0 22px 46px rgba(126,3,6,.26);animation:pdRise .55s cubic-bezier(.2,.8,.2,1) both}
.pd-hero>*{position:relative;z-index:1}
.pd-hero i.pd-b1,.pd-hero i.pd-b2{position:absolute;z-index:0;border-radius:50%;background:rgba(255,255,255,.1);animation:pdBlob 9s ease-in-out infinite}
.pd-hero i.pd-b1{width:240px;height:240px;right:-70px;top:-100px}
.pd-hero i.pd-b2{width:150px;height:150px;right:130px;bottom:-90px;animation-delay:-4s;background:rgba(255,255,255,.07)}
.pd-htop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pd-ht{font-size:24px;font-weight:800;letter-spacing:-.02em}
.pd-hs{font-size:13px;opacity:.9;margin-top:3px;max-width:520px}
.pd-new{background:#fff;color:var(--red);border:none;border-radius:999px;padding:0 22px;min-height:46px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.pd-new:active{transform:scale(.96)}
.pd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.pd-kpis>div{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:12px 16px;backdrop-filter:blur(6px)}
.pd-kpis span{display:block;font-size:11.5px;font-weight:600;opacity:.9}
.pd-kpis b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.pd-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pd-search{border-radius:999px!important;padding:0 20px!important;min-height:48px;font-size:14px!important;border:1.5px solid var(--line)!important;background:#fff;box-shadow:0 4px 14px rgba(40,40,60,.05)}
.pd-search:focus{border-color:var(--orange)!important;box-shadow:0 0 0 4px rgba(242,106,46,.14)}
.pd-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.pd-chips::-webkit-scrollbar{display:none}
.pd-chips button{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:0 16px;min-height:40px;font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
.pd-chips button.on{background:linear-gradient(135deg,#F26A2E,#D53E0F);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(213,62,15,.3)}

.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pd-card{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(40,40,60,.07);transition:transform .2s,box-shadow .2s}
.pd-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(126,3,6,.14)}
.pd-card:active{transform:scale(.985)}
.pd-img{position:relative;aspect-ratio:4/3;background:var(--cream);overflow:hidden}
.pd-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.pd-card:hover .pd-img img{transform:scale(1.06)}
.pd-ph{width:100%;height:100%;display:grid;place-items:center;font-size:60px;font-weight:800;color:hsl(var(--h),70%,38%);background:linear-gradient(145deg,hsl(var(--h),85%,92%),hsl(calc(var(--h) + 30),90%,84%))}
.pd-cat{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:800;border-radius:999px;padding:5px 11px;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.pd-warn{position:absolute;left:12px;bottom:12px;background:var(--amber);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:5px 11px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.pd-warn.out{background:var(--red)}
.pd-x{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--muted);font-size:13px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.pd-x:hover{color:var(--red)}
.pd-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pd-name{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pd-mid{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-prices{display:flex;flex-direction:column;gap:6px}
.pd-prices span{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.pd-prices b{font-size:19px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.pd-prices i{font-style:normal;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pd-ring{--c:var(--green);width:68px;height:68px;border-radius:50%;flex-shrink:0;display:grid;place-content:center;text-align:center;position:relative;background:conic-gradient(var(--c) calc(var(--p)*1%),#f1eeed 0)}
.pd-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.pd-ring>*{position:relative}
.pd-ring b{font-size:15px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--c)}
.pd-ring small{font-size:8.5px;color:var(--muted);font-weight:700;margin-top:1px}
.pd-ring.mid{--c:var(--amber)}.pd-ring.lo{--c:var(--red)}
.pd-stock{min-height:30px}
.pd-sl{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px}
.pd-sl b{color:var(--ink);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pd-sbar{height:8px;border-radius:999px;background:#f1eeed;overflow:hidden}
.pd-sbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3fb26f,var(--green));transform-origin:left;animation:pdGrowX .9s .2s cubic-bezier(.2,.8,.2,1) both}
.pd-sbar i.low{background:linear-gradient(90deg,#f6b44f,var(--amber))}.pd-sbar i.out{background:var(--red)}
.pd-acts{display:flex;gap:8px;margin-top:auto}
.pd-b{flex:1;min-height:44px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer}
.pd-b.pri{background:var(--cream);border-color:transparent;color:var(--red)}
.pd-b:active{transform:scale(.96)}
.pd-lowc{border-color:#f6d9a8}

/* modal edit & penyesuaian stok */
.pd-modal .btn{border-radius:999px;min-height:44px;padding:0 22px;font-weight:700}
.pd-modal input,.pd-modal select{border-radius:14px;min-height:44px}
.pd-modal input[type=checkbox]{width:20px;min-height:0;height:20px;accent-color:var(--red)}
.pd-pbox{background:var(--cream);border-radius:22px;padding:14px}
.pd-pbox .logobox{border-radius:20px;background:#fff}
.pd-rq{border:none;background:var(--bg);border-radius:18px;padding:8px 12px}
.pd-rqi{padding:8px 0;min-height:40px;border-bottom:1px solid rgba(0,0,0,.05)}
.pd-rqi:last-child{border-bottom:none}
.pd-act{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}
.pd-act .btn:last-child{background:linear-gradient(135deg,#F26A2E,#D53E0F);box-shadow:0 10px 22px rgba(213,62,15,.32)}
.pd-curst{border-radius:22px;padding:16px 20px;background:linear-gradient(145deg,#fff3ec,#ffe3d4);color:var(--red)}
.pd-curst b{font-size:30px;letter-spacing:-.02em}

@media(max-width:820px){
  .pd-hero{border-radius:26px;padding:18px 18px 16px}
  .pd-ht{font-size:20px}
  .pd-hs{font-size:12px}
  .pd-new{width:100%}
  .pd-kpis{gap:8px}
  .pd-kpis>div{padding:10px 12px;border-radius:18px}
  .pd-kpis b{font-size:21px}
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pd-card{border-radius:22px}
  .pd-card:hover{transform:none}
  .pd-img{aspect-ratio:1/.9}
  .pd-ph{font-size:46px}
  .pd-body{padding:11px 12px 12px;gap:8px}
  .pd-name{font-size:14px}
  .pd-ring{width:56px;height:56px}
  .pd-ring::before{inset:6px}
  .pd-prices b{font-size:16px}
  .pd-b{font-size:12px;padding:0 4px}
  .pd-act{flex-direction:column-reverse}
  .pd-act .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.pd-hero,.pd-hero i,.pd-sbar i,.pd-grid>*{animation:none!important}.pd-card,.pd-img img{transition:none}}