@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#202333;--muted:#85899a;--line:#ececf2;--bg:#f7f7fb;--purple:#6558d3;--purple-dark:#5144bd}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100% - 1120px)/2),24px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.5px}.brand-icon{width:34px;height:34px;border-radius:11px;background:var(--purple);color:#fff;display:grid;place-items:center;font-family:Manrope;font-size:18px}.brand-light{color:var(--purple);margin-left:2px}.top-note{font-size:12px;color:var(--muted)}.container{max-width:1120px;margin:38px auto 70px;padding:0 24px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--purple);margin:0 0 8px}h1,h2,h3,p{margin-top:0}h1{font:800 30px Manrope;margin-bottom:7px;letter-spacing:-1px}.muted{color:var(--muted);font-size:13px;margin-bottom:0}.btn{border:0;border-radius:9px;padding:11px 15px;font:700 12px 'DM Sans';text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}.primary{background:var(--purple);color:white}.primary:hover{background:var(--purple-dark)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:25px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;display:flex;align-items:center;gap:15px}.stat-icon{height:43px;width:43px;border-radius:12px;display:grid;place-items:center;font-size:20px}.purple{background:#efedff;color:var(--purple)}.green{background:#e9f8f0;color:#249b63}.stat-card p{font-size:12px;color:var(--muted);margin:0 0 3px}.stat-card strong{font:800 25px Manrope;display:block}.stat-card small{font-size:10px;color:#a0a2ae}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:23px}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel h2{font:800 17px Manrope;margin:0 0 5px}.search{height:45px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 13px;margin:20px 0 22px}.search>span{font-size:23px;color:#999}.search input{border:0;outline:0;flex:1;min-width:40px;font:13px 'DM Sans';color:var(--ink)}.search input::placeholder{color:#b0b1bc}.dark{background:#282a39;color:#fff;padding:9px 17px}.clear{font-size:11px;color:var(--purple);text-decoration:none}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;min-width:0}.product-photo{height:175px;background:#f5f5f8;display:grid;place-items:center;overflow:hidden}.product-photo img{width:100%;height:100%;object-fit:cover}.no-photo{display:flex;flex-direction:column;align-items:center;color:#b4b5c0;gap:5px}.no-photo span{font-size:35px}.no-photo small{font-size:10px}.product-info{padding:13px}.product-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:13px}.stock-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f4;padding-top:10px;font-size:10px;color:var(--muted)}.stock-line strong{font-size:16px;color:var(--ink)}.stock-line small{font-size:10px;color:var(--muted);font-weight:500}.card-actions{display:flex;gap:7px;margin-top:13px}.card-actions form{flex:1}.card-actions .btn{width:100%;padding:8px 9px;font-size:10px}.edit{background:#efedff;color:var(--purple)}.delete{background:#fff0f0;color:#d64b55}.empty{text-align:center;padding:50px 15px}.empty>div{font-size:35px;color:#b8b8c5}.empty h3{font:700 16px Manrope;margin:12px 0 6px}.empty p{font-size:12px;color:var(--muted);margin-bottom:18px}.alert{padding:12px 15px;border-radius:9px;font-size:12px;margin-bottom:15px}.alert.success{background:#eaf8f0;color:#218451}.alert.error{background:#fff0f0;color:#b83e48}.back{display:inline-block;color:var(--muted);font-size:12px;text-decoration:none;margin-bottom:22px}.form-wrap{max-width:620px;margin:0 auto}.form-title{margin-bottom:22px}.form-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:25px}.form-card label{display:block;font-size:12px;font-weight:700;margin:0 0 8px}.form-card label b{color:#d64b55}.form-card input[type=text],.form-card input[type=number],.form-card input[type=file]{width:100%;border:1px solid #e6e6ed;border-radius:9px;padding:12px;font:13px 'DM Sans';outline:none;margin-bottom:19px;background:#fff}.form-card input:focus{border-color:var(--purple)}.input-suffix{position:relative}.input-suffix input{padding-right:55px!important}.input-suffix span{position:absolute;right:13px;top:12px;color:var(--muted);font-size:12px}.help{display:block;color:var(--muted);font-size:10px;margin-top:-13px;margin-bottom:20px}.current-photo{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:var(--muted);font-size:11px}.current-photo img{width:76px;height:76px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}.form-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--line);padding-top:18px;margin-top:5px}.cancel{background:#f1f1f5;color:#656879}footer{text-align:center;color:#aaaab5;font-size:10px;padding:0 20px 25px}@media(max-width:850px){.product-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.container{margin:25px auto 45px;padding:0 15px}.topbar{padding:0 16px}.top-note{display:none}.page-heading{align-items:flex-start;flex-direction:column}.stats{gap:9px}.stat-card{padding:13px;gap:9px}.stat-icon{width:35px;height:35px}.stat-card strong{font-size:21px}.panel{padding:15px}.product-grid{grid-template-columns:repeat(2,1fr);gap:10px}.product-photo{height:145px}.product-info{padding:10px}.search{gap:6px}.clear{display:none}.form-card{padding:18px}}


/* Popup foto: gambar utuh, tidak dipotong, responsif untuk HP dan desktop */
.product-photo img, .current-photo img { cursor: zoom-in; }
.image-preview {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 64px 24px 24px;
  background: rgba(10, 12, 20, .92);
}
.image-preview.show { display: flex; }
.image-preview img {
  display: block; max-width:  min(96vw, 1500px); max-height:  calc(100vh - 96px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 12px 50px rgba(0,0,0,.45);
}
.image-preview-close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: #202333; font: 32px/1 Arial, sans-serif;
  cursor: pointer; display: grid; place-items: center;
}
.image-preview-close:hover { background: #ececf2; }
body.preview-open { overflow: hidden; }
@media(max-width:620px) {
  .image-preview { padding: 58px 10px 16px; }
  .image-preview img { max-width: 98vw; max-height: calc(100vh - 82px); }
  .image-preview-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}

/* Ringkasan nilai persediaan */
.stat-icon.orange{background:#fff1df;color:#b96b12}