:root{
  --bg: #f5f5f5;
  --card: #ffffff;
  --text: #171717;
  --muted: #6b7280;
  --brand: #111111;
  --accent: #ff2d55;
  --accent-2: #111827;
  --ring: rgba(0,0,0,.08);
  --container: 1120px%;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}

/* Utilities */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:50px;
}
.small{ font-size:.925rem; }
.tiny{ font-size:.85rem; }
.muted{ color:var(--muted); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--ring);
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  min-height:64px;
}
.brand{
  display:flex; align-items:baseline; gap:6px;
  text-decoration:none; color:var(--brand);
  font-weight:800; letter-spacing:.4px;
}
.brand-logo img{
  font-family: Archivo, Inter, sans-serif;
  font-size:1.4rem; padding:.2rem .4rem;
  border-radius:.4rem;
  width: 75px;
  height: 50px;
}
.brand-sub{ font-weight:800; letter-spacing:2px; }

.nav{
  margin-right:auto; display:flex; gap:18px; align-items:center;
}
.nav a{
  color:var(--text); text-decoration:none; font-weight:600;
  font-size:.95rem; opacity:.85;
}
.nav a:hover{ opacity:1; }

/* ===== Navbar auth button (Login / Logout) ===== */
.nav .nav-logout{
  appearance:none;
  border:1px solid #111;
  background:#111;
  color:#fff;
  height:36px;
  padding:0 14px;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:36px;
  cursor:pointer;
  margin-left:10px;          /* jarak dari tombol cart */
  transition:filter .15s ease, background .15s ease, color .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.nav .nav-logout:hover{ filter:brightness(1.05); }
.nav .nav-logout:active{ transform: translateY(1px); }

/* Variasi outline untuk tombol Login */
.nav .nav-logout.is-ghost{
  background:#fff;
  color:#111;
  border-color:#111;
}
.nav .nav-logout.is-ghost:hover{
  background:#111;
  color:#fff;
}


.header-actions{
  display:flex; align-items:center; gap:10px;
}
.search{
  display:flex; align-items:center; gap:8px;
  padding:.35rem .6rem; border:1px solid var(--ring);
  border-radius:.6rem; color:#444;
}
.search svg{ width:18px; height:18px; }
.search input{
  border:none; outline:none; background:transparent;
  width:150px; font-size:.95rem;
}
.icon-btn{
  background:#fff; border:1px solid var(--ring);
  width:40px; height:40px; border-radius:.6rem;
  display:grid; place-items:center; cursor:pointer;
}
.icon-btn svg{ width:20px; height:20px; }

.hamburger{ display:none; background:none; border:0; padding:6px 4px; }
.hamburger span{ display:block; width:22px; height:2px; background:#000; margin:5px 0; transition:.25s; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ================= Login Page (scoped) ================= */
.login-shell{
  position:relative; min-height:100vh; width:100%;
  overflow:hidden;
  font-family: inherit;
}
.login-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: none;          /* biar tajam seperti referensi */
  transform:scale(1.02); /* sedikit zoom untuk full bleed */
}
.login-center{
  position:relative; z-index:1;
  min-height:100vh; display:grid; place-items:center;
  padding:24px;
  /* overlay tipis agar card lebih pop */
  background: rgba(255,255,255,0.02);
}
.login-card{
  width:min(680px, 92vw);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding:24px 28px 28px;
}
.login-card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.login-title{
  font-size:28px; line-height:1.1;
  letter-spacing: .5px;
  font-weight: 800;
  margin:0;
  color:#111;
}
.login-logo{
  width:86px; height:auto; object-fit:contain; margin-left:12px;
}
.login-form{
  display:grid; grid-template-columns:1fr; gap:14px;
}
.login-label{
  font-size:14px; font-weight:800; color:#222; letter-spacing:.3px;
}
.login-input{
  height:44px; border-radius:10px;
  border:1px solid #ddd; background:#f7f7f7;
  padding:0 14px; font-weight:700; letter-spacing:.3px;
  outline:none; transition:border-color .15s ease, background .15s ease;
}
.login-input:focus{
  border-color:#111; background:#fff;
}
.login-captcha{
  display:flex; align-items:center; gap:14px;
  margin:8px 0 4px; user-select:none; cursor:pointer;
}
.login-captcha input{ display:none; }
.login-cb{
  width:28px; height:28px; border-radius:8px;
  border:2px solid #cfcfcf; background:#fff; display:inline-block;
  position:relative; transition: all .15s ease;
}
.login-captcha input:checked + .login-cb{
  border-color:#111; background:#111;
}
.login-captcha input:checked + .login-cb::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(#fff,#fff) center/40% 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 40% no-repeat;
  transform: rotate(45deg);
}
.login-cb-text{
  font-weight:800; color:#222; letter-spacing:.3px;
}
.login-btn{
  height:46px; border:none; border-radius:10px;
  background:#111; color:#fff; font-weight:800; letter-spacing:.6px;
  cursor:pointer; transition:filter .15s ease, transform .02s ease;
}
.login-btn:active{ transform: translateY(1px); }
.login-btn--ghost{
  height:44px; border-radius:10px; background:#fff; color:#111;
  border:1px solid rgba(0,0,0,.18); font-weight:800; letter-spacing:.4px;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 560px){
  .login-card{ padding:20px; border-radius:14px; }
  .login-title{ font-size:24px; }
  .login-logo{ width:74px; }
  .login-input{ height:42px; }
  .login-btn{ height:44px; }
  .login-btn--ghost{ height:42px; }
}


/* Hero */
.hero{
  position:relative; min-height:72vh; display:grid;
  place-items:center; overflow:hidden;
}

.hero-media{
  position:absolute; inset:0; overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;   /* efek cover seperti background-size:cover */
  display:block;
  filter:saturate(95%);
}

.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35));
  pointer-events:none;
}

.hero-content{
  position:relative; color:#fff; padding-block:64px;
}
.hero h1{
  font-family: Archivo, Inter, sans-serif;
  font-weight:800; line-height:.95; margin:0 0 22px;
  text-transform:uppercase; letter-spacing:1px;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
}
.hero h1 span{ display:block; }
.btn-cta{
  display:inline-block; background:#fff; color:#000;
  font-weight:800; padding:.9rem 1.25rem; border-radius:2rem;
  text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.btn-cta:hover{ transform:translateY(-1px); }
.hero-sub{
  max-width:680px; margin-top:18px; opacity:.95;
}
.hashtag{
  margin-top:36px; font-weight:800; letter-spacing:3px;
  opacity:.9;
}

/* Products grid */
.products{
  padding-block:54px 90px;
  display:grid; gap:28px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 12;
  background:var(--card); border:1px solid var(--ring);
  border-radius:16px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }

.card-media{ position: relative; z-index: 1; border-radius: 16px; }
.card-media img{ display:block; width:100%; height:100%; object-fit:cover; border-radius: 16px; }

.card-media.dark{ background:#0a0a0a; }
.card-media.plain{ background:#f7f7f7; }

.card-info{ padding:18px 18px 20px; }
.meta{
  color:var(--muted); font-weight:600; letter-spacing:.3px;
  margin:0 0 6px;
}
.title{
  margin:0 0 8px; font-size:1.15rem; line-height:1.2;
}
.price{ font-weight:800; margin:0 0 12px; }
.price-old{
  color:var(--muted); text-decoration:line-through; margin-right:10px;
  font-weight:600;
}
.price-new{ color:var(--accent); }

/* Add to Cart Button */
.btn-add-cart{
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}
.btn-add-cart:hover{
  background: #333;
  transform: translateY(-1px);
}
.btn-add-cart:active{
  transform: translateY(0);
}

.badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;             
  padding: .35rem .6rem;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
  background: var(--accent);  
  border-radius: .5rem;
}

.products .card { position: relative; cursor:pointer ;}

.card{ position:relative; }


/* Footer */
.site-footer{
  border-top:1px solid var(--ring);
  background:#fafafa;
}
.footer-grid{
  display:grid; gap:36px; padding-block:40px;
  grid-template-columns: repeat(12, 1fr); align-items: flex-start;
}
.foot-brand{ grid-column: span 7; }
.foot-loc{ grid-column: span 5; justify-self: end; text-align: left; margin-left: auto; }
.brand--footer .brand-logo{ width: 30%; width: 30%; }
.brand--footer{ font-size:1.35rem; margin-bottom:10px; display:inline-flex; }

@media (max-width: 720px){
  .foot-loc{
    justify-self:start;
    text-align:left;
    margin-left:0;
  }
}

.socials{ display:flex; gap:10px; margin:14px 0 6px; }
.socials .icon-btn{
  width:42px; height:42px; border-radius:10px;
}
.socials img{ width:20px; height:20px; }
.foot-loc h4{ margin:0 0 6px; }
.foot-loc h5{ margin:12px 0 6px; }

.madein{
  border-top:1px solid var(--ring);
   padding:14px; color:var(--muted);
  font-size:.85rem;
}

/* Responsive */
@media (min-width: 720px){
  .products .card{ grid-column: span 6; }
}

@media (min-width: 1024px){
  .products .card{ grid-column: span 4; }
  .hamburger{ display:none; }
}
@media (max-width: 980px){
  .nav{ display:none; }
  .nav.is-open{
    position:absolute; inset:64px 0 auto 0; background:#fff;
    display:flex; flex-direction:column; gap:10px; padding:12px 20px;
    border-bottom:1px solid var(--ring);
  }
  .hamburger{ display:block; margin-left:4px; }
  .header-actions{ margin-left:auto; }
}


/* ===== Overlay Product Modal ===== */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
}
.modal {
  width: min(960px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  border: 1px solid var(--ring);
  overflow: hidden;
}
.modal-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  padding: 28px;
}
.modal-media {
  background: #f7f7f7;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.modal-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.modal-meta { color: var(--muted); font-weight: 700; letter-spacing:.3px; }
.modal-title { margin: 6px 0 8px; font-size: 1.6rem; }
.modal-price { font-weight: 800; font-size: 1.6rem; margin: 10px 0 16px; }

.modal-desc {
  color: #6b7280;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 46ch;
}

.modal-perks{
  display:grid; grid-template-columns: 1fr; gap:10px; margin:14px 0 18px;
}
.perk{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:#111827; }
.perk-icon{
  flex:0 0 36px; width:36px; height:36px; border:1px solid var(--ring);
  border-radius:10px; display:grid; place-items:center;
}
.perk-icon svg{ width:18px; height:18px; }

.modal-label{ font-weight:800; margin:18px 0 10px; }

.size-picker{ display:flex; gap:12px; }
.size-btn{
  width:44px; height:44px; border-radius:12px;
  border:1px solid #d1d5db; background:#fff; cursor:pointer;
  font-weight:700; transition:.15s;
}
.size-btn:hover{ transform: translateY(-1px); }
.size-btn.is-active{
  background:#111827; color:#fff; border-color:#111827;
}

.btn-cart{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:12px 16px; border-radius:12px;
  background:#111; color:#fff; border:0; cursor:pointer;
  font-weight:800; margin-top:18px;
}
.btn-cart svg{ width:18px; height:18px; margin-right:8px; }

.modal-actions{
  padding: 0 28px 28px;
}
.modal-close{
  position:absolute; top:10px; right:10px;
  border:0; background:transparent; cursor:pointer;
  width:40px; height:40px; border-radius:12px;
}
.modal-close:after{
  content:"✕"; font-size:20px; color:#6b7280;
}

/* Responsive modal */
/* breakpoint kecil: ≤600px — rapikan jarak */
@media (max-width: 600px){
  .overlay{ padding:0; }                               /* buang padding tepi */
  .modal{
    width:100vw; height:100vh;                         /* full screen */
    border-radius:0;                                   /* sudut rata */
    display:flex; flex-direction:column;               /* biar body bisa flex:1 */
    max-height:100vh;
  }
  .modal-body{
    grid-template-columns:1fr;                         /* 1 kolom */
    gap:16px;
    padding:16px;
    overflow:auto;                                     /* konten bisa scroll */
    flex:1;                                            /* isi tinggi tersisa */
  }
  .modal-media{
    width:100%; max-width:100%;
    height:38vh;                                       /* tinggi proporsional */
    min-height:220px;                                  /* jaga agar tidak terlalu kecil */
    aspect-ratio:auto;                                 /* agar pakai height */
    margin:0 auto;
  }
  .modal-title{ font-size:1.35rem; }
  .modal-price{ font-size:1.25rem; }
  .modal-desc{ max-width:100%; font-size:0.98rem; line-height:1.6; }

  .modal-actions{
    position:sticky; bottom:0;                         /* tombol nempel bawah */
    background:linear-gradient(to top,#fff,rgba(255,255,255,.92) 60%, transparent);
    padding:12px 16px 16px;
    border-top:1px solid rgba(0,0,0,.06);
  }
  .btn-cart{ height:48px; border-radius:12px; font-size:1rem; }

  .modal-close{
    position:fixed; top:10px; right:10px;              /* close selalu terlihat */
    background:#fff; border:1px solid rgba(0,0,0,.08);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-radius:12px;
  }
}

/* ekstra kecil: ≤380px — kompres lagi tipis-tipis */
@media (max-width: 380px){
  .modal-body{ gap:12px; padding:12px; }
  .modal-media{ height:34vh; min-height:200px; }
  .size-btn{ width:42px; height:42px; border-radius:10px; }
  .btn-cart{ height:46px; font-weight:800; }
}



/* =============== CART OVERLAY (drawer kanan) =============== */
.cart-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  display:flex; justify-content:flex-end;
}
.cart-drawer{
  width:min(420px,92vw); height:100%;
  background:#fff; border-left:1px solid var(--ring);
  box-shadow:-16px 0 40px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
  animation: slideIn .18s ease;
}
@keyframes slideIn{from{transform:translateX(12px); opacity:.0} to{transform:none; opacity:1}}
.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--ring);
  font-weight:800;
}
.cart-close{
  width:40px; height:40px; border-radius:12px;
  border:0; background:transparent; cursor:pointer;
  font-size:24px; color:#6b7280;
}
.cart-items{ padding:16px; display:grid; gap:14px; overflow:auto; flex:1; }

.cart-item{
  display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:flex-start;
  padding-bottom:12px; border-bottom:1px solid var(--ring);
}
.cart-thumb{ width:72px; height:72px; border-radius:12px; overflow:hidden; border:1px solid var(--ring); background:#f7f7f7; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.cart-title{ margin:0 0 6px; font-weight:700; }
.cart-meta{ font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.cart-price{ font-weight:700; }

.cart-ctl{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.cart-qty{ display:inline-flex; align-items:center; border:1px solid var(--ring); border-radius:10px; height:28px; overflow:hidden; }
.cart-qty button{ width:28px; height:28px; border:0; background:transparent; cursor:pointer; }
.cart-qty span{ width:28px; text-align:center; }
.cart-remove{ border:0; background:transparent; color:#6b7280; cursor:pointer; }

.cart-summary{ padding:16px; border-top:1px solid var(--ring); }
.cart-row{ display:flex; justify-content:space-between; margin:8px 0; color:#6b7280; }
.cart-sep{ border:none; border-top:1px solid var(--ring); margin:8px 0 12px; }
.cart-total{ display:flex; justify-content:space-between; font-weight:800; margin:8px 0 16px; }
.btn-checkout{
  width:100%; padding:10px 14px; border-radius:12px;
  background:#111; color:#fff; border:0; cursor:pointer; font-weight:800;
  scroll-padding-top: 10px;
}

/* mobile safe */
@media (max-width:480px){
  .cart-item{ grid-template-columns:64px 1fr auto; }
  .cart-thumb{ width:64px; height:64px; }
}


/* =========================
   PAYMENT PAGE (scoped)
   ========================= */
.pay{ padding:20px 0 40px; }
.pay *{ box-sizing:border-box; }

/* tokens */
.pay :root{} /* dummy agar tidak bentrok */
.pay .tiny{ font-size:.8rem; }
.pay .small{ font-size:.9rem; }
.pay .pay-muted{ color:#6b7280; }

/* back button */
.pay__back{ margin:10px 0 16px; }
.pay-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; font-weight:800; border:0; cursor:pointer; text-decoration:none;
}
.pay-btn--pill{ border-radius:999px; padding:10px 16px; }
.pay-btn--dark{ background:#111; color:#fff; }
.pay-btn__icon{
  display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:999px; background:#fff; color:#000; font-size:14px; line-height:1;
}

/* grid layout */
.pay-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:18px; }
@media (max-width: 920px){ .pay-grid{ grid-template-columns:1fr; } }

/* left card */
.pay-card{
  border:1px solid rgba(0,0,0,.1); border-radius:14px; background:#fff; overflow:hidden;
}
.pay-card__head{ padding:18px 18px 6px; }
.pay-title{ margin:0 0 6px; font-size:1.35rem; font-weight:800; }

/* form */
.pay-form{ padding:0 18px 18px; }
.pay-h4{ margin:14px 0 10px; font-weight:800; }
.pay-row{ display:grid; gap:12px; }
.pay-row--2{ grid-template-columns:1fr 1fr; }
.pay-row--align-end{ align-items:end; }
.pay-col-2{ grid-column:1 / -1; }

.pay-field{}
.pay-label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; }
.pay-input{
  width:100%; padding:12px; border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#f3f4f6; outline:none;
}
.pay-input:focus{ border-color:#111; background:#fff; }
.pay-textarea{ resize:vertical; }

/* info strip */
.pay-info{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#f9fafb; margin-bottom:10px;
  color:#374151; font-size:.9rem;
}
.pay-info__dot{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:999px; border:1px solid rgba(0,0,0,.15); font-weight:800;
}

/* upload */
.pay-upload{
  position:relative; display:block; border:2px dashed rgba(0,0,0,.1);
  border-radius:12px; padding:28px 14px; background:#fff; cursor:pointer;
}
.pay-upload__content{ text-align:center; color:#9ca3af; }
.pay-upload__arrow{ font-size:26px; line-height:1; }
.pay-upload__input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}

/* right side */
.pay-side{ display:flex; flex-direction:column; gap:12px; }
.pay-box{
  border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:12px; background:#fff;
}
.pay-box__title{ display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:10px; }
.pay-ico{ width:18px; height:18px; display:inline-block; }

/* banks */
.pay-banks{ display:grid; gap:10px; }
.pay-bank{
  border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:12px; background:#f3f4f6;
}
.pay-bank__no{ font-weight:800; }

/* order no */
.pay-orderno{ font-weight:900; font-size:1.6rem; }

/* summary */
.pay-summarylist > .item{ }
.pay-sum{
  display:grid; grid-template-columns:1fr auto; gap:6px; margin-top:12px; color:#6b7280;
}
.pay-hr{ border:none; border-top:1px solid rgba(0,0,0,.1); margin:10px 0; }
.pay-total{ display:grid; grid-template-columns:1fr auto; gap:6px; font-weight:900; }

/* summary list items (rendered by JS) */
.pay-summarylist .pay-sumitem{
  display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center;
  padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.1);
}
.pay-summarylist .thumb{
  width:56px; height:56px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(0,0,0,.1); background:#f7f7f7;
}
.pay-summarylist .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.pay-submit{ margin-top:16px; text-align:center; }

/* meta note kanan atas bank */
.pay-note{ text-align:right; color:#6b7280; }


/* =========================
   PAYMENT SUCCESS OVERLAY
   ========================= */
.pay-ovl{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  display:grid; place-items:center; padding:20px;
}
.pay-ovl__box{
  width:min(680px,100%); background:#fff; border-radius:16px;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 30px 90px rgba(0,0,0,.25);
  padding:26px 22px 18px; text-align:center;
}
.pay-ovl__title{ margin:6px 0 18px; font-weight:900; font-size:1.4rem; letter-spacing:.2px; }
.pay-ovl__circle{
  width:240px; height:240px; margin:0 auto 16px; border-radius:50%;
  background:#111; display:grid; place-items:center;
}
.pay-ovl__circle svg{ width:130px; height:130px; }
.pay-ovl__desc{ color:#6b7280; line-height:1.7; margin:0 auto 10px; max-width:520px; }
.pay-ovl__tag{ color:#6b7280; font-weight:800; letter-spacing:.4px; margin-bottom:16px; }
.pay-ovl__btn{
  width:min(420px,100%); margin:0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:#111; color:#fff; border:0; border-radius:999px; padding:12px 16px; font-weight:800; cursor:pointer;
}
@media (max-width:480px){
  .pay-ovl__title{ font-size:1.2rem; }
  .pay-ovl__circle{ width:190px; height:190px; }
  .pay-ovl__circle svg{ width:100px; height:100px; }
}


/* =========================
   CONTACT PAGE (scoped)
   ========================= */
.contact{ padding:24px 0 40px; }
.contact *{ box-sizing:border-box; }

.contact__hero{ text-align:center; padding:24px 0 18px; }
.contact__hero h1{ margin:0 0 8px; font-size:2rem; font-weight:900; }
.contact__hero p{ color:#6b7280; max-width:680px; margin:0 auto; }

.contact__grid{ display:grid; grid-template-columns: 2fr 1fr; gap:18px; }
@media (max-width: 960px){ .contact__grid{ grid-template-columns:1fr; } }

/* Cards */
.c-card, .c-box{
  background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:14px;
}
.c-card__head{ padding:14px 16px 0; }
.c-headline{ font-weight:800; display:flex; align-items:center; gap:8px; }
.c-dot{ font-size:.9rem; color:#111; }
.c-form{ padding:12px 16px 16px; }
.c-row{ display:grid; gap:12px; }
.c-row--2{ grid-template-columns:1fr 1fr; }
@media (max-width: 560px){ .c-row--2{ grid-template-columns:1fr; } }
.c-field{ }
.c-label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; }
.c-input{
  width:100%; padding:12px; border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#f3f4f6; outline:none;
}
.c-input:focus{ border-color:#111; background:#fff; }
.c-textarea{ resize:vertical; }
.c-submit{ margin-top:10px; }
.c-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; border:0; cursor:pointer; text-decoration:none;
}
.c-btn--pill{ border-radius:999px; padding:10px 16px; }
.c-btn--dark{ background:#111; color:#fff; }
.c-send{ font-size:.9rem; }

/* Side column */
.c-side{ display:flex; flex-direction:column; gap:12px; }
.c-box{ padding:12px; }
.c-box__title{ font-weight:800; margin-bottom:10px; }
.c-sub{ font-size:.8rem; color:#6b7280; font-weight:600; margin-top:2px; }

.c-info{ display:grid; gap:10px; }
.c-info__item{ display:flex; gap:10px; align-items:flex-start; }
.c-ico{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:#f3f4f6; border:1px solid rgba(0,0,0,.08); }
.c-info__label{ font-size:.82rem; font-weight:800; color:#6b7280; }
.c-info__text{ font-size:.92rem; }

.c-map{ border:1px solid rgba(0,0,0,.1); border-radius:12px; overflow:hidden; }
.c-map img{ display:block; width:100%; height:auto; }

/* FAQ */
.c-faq{ padding:28px 0 0; text-align:center; }
.c-faq__title{ margin:0 0 6px; font-weight:900; font-size:1.6rem; }
.c-faq__sub{ color:#6b7280; max-width:720px; margin:0 auto 16px; }
.c-faq__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 720px){ .c-faq__grid{ grid-template-columns:1fr; } }
.c-faq__card{
  background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:14px; padding:16px;
  text-align:left;
}
.c-faq__card h3{ margin:0 0 8px; font-size:1.05rem; }
.c-faq__card p{ margin:0; color:#6b7280; line-height:1.6; }

/* token padding yang dipakai di semua page */
:root{
  --container-pad-x: 16px;   /* mobile */
}
@media (min-width: 920px){
  :root{ --container-pad-x: 28px; }  /* desktop */
}

/* terapkan ke halaman-halaman full-width */
.pay,                /* payment page wrapper */
.contact,            /* contact page wrapper */
.site-header .container,
.site-footer .container,
.madein,             /* bar credit di footer (jika ada) */
.products,           /* grid produk di home */
.hero-content{       /* konten hero supaya sejajar */
  padding-left:  var(--container-pad-x) !important;
  padding-right: var(--container-pad-x) !important;
}

/* =========================================================
   ADMIN SHELL (scope .admin) — match screenshot
   ========================================================= */
.admin{
  --admin-bg: #f3f4f6;
  --admin-aside: #f6f6f6;
  --admin-border: rgba(0,0,0,.10);
  --admin-pad-x: clamp(16px, 3vw, 28px);

  display:grid; grid-template-columns: 230px 1fr;
  min-height: calc(100vh - 0px);
  background: var(--admin-bg);
}
.admin-aside{
  background: var(--admin-aside);
  border-right:1px solid var(--admin-border);
  padding: 16px 10px;
}
.admin-brand{ font-weight:900; display:flex; align-items:center; gap:8px; padding:6px 8px; }
.admin-tag{ font-size:.78rem; font-weight:800; color:#6b7280; }

.admin-menu{ display:grid; gap:8px; margin-top:8px; }
.admin-menu__item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding: 10px 12px;
  border:0; border-radius:10px;
  background: transparent; color:#111; font-weight:800; cursor:pointer;
}
.admin-menu__item.is-active{ background:#e9e9ea; }
.admin-menu__item:hover{ background:#ececec; }
.am-ico{
  width:22px;height:22px; display:grid; place-items:center;
  border-radius:6px; background:#fff; border:1px solid var(--admin-border);
  font-size:12px; color:#111; flex:0 0 22px;
}

img .am-ico {
  width: 24px;
  height: 24px;;
}
.am-text{ line-height:1; }

.admin-main{
  padding: 22px var(--admin-pad-x) 40px;
}
.admin-topbar{ display:flex; align-items:end; justify-content:space-between; }
.admin-h1{ margin:0; font-size:2.1rem; font-weight:900; letter-spacing:.2px; }
.admin-sub{ margin:4px 0 18px; color:#9196a1; font-weight:700; letter-spacing:.02em; }
.ad-btn{ border:0; cursor:pointer; font-weight:800; }
.ad-btn--ghost{ background:#fff; border:1px solid var(--admin-border); border-radius:10px; padding:8px 12px; }

@media (max-width: 1024px){
  .admin{ grid-template-columns: 1fr; }
  .admin-aside{ border-right:0; border-bottom:1px solid var(--admin-border); }
  .admin-menu{ grid-auto-flow:column; overflow:auto hidden; padding-bottom:6px; }
  .admin-menu__item{ white-space:nowrap; }
}

/* =========================================================
   ADMIN DASH (scope: #adminContent .usd-*)
   ========================================================= */
#adminContent .usd{ --usd-gap:18px; --usd-border: rgba(0,0,0,.10); --usd-muted:#8b909a; }

#adminContent .usd-grid{ display:grid; gap:var(--usd-gap); padding-bottom: 10px; }
#adminContent .usd-grid--stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; }
#adminContent .usd-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.usd img {
  width: 24px;
  height: 24px;
}

@media (min-width: 1080px){
  #adminContent .usd-grid--stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 860px){
  #adminContent .usd-grid--stats{ max-width: 435px; padding-bottom: 20px;}
  #adminContent .usd-grid--2{ grid-template-columns:1fr; max-width: 435px; }
}

#adminContent .usd-card{
  background:#fff; border:1px solid var(--usd-border);
  border-radius:10px; padding:16px 18px;
}
#adminContent .usd-card__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
#adminContent .usd-card__title{
  font-weight:900; letter-spacing:.02em;
}
#adminContent .usd-card__title--section{ margin-bottom:8px; }
#adminContent .usd-badge{
  width:26px;height:26px; display:grid; place-items:center;
  border-radius:8px; background:#fff; border:1px solid var(--usd-border);
  font-size:13px; color:#111;
}

#adminContent .usd-kpi{
  font-weight:900; font-size:2rem; margin:6px 0 4px;
}
#adminContent .usd-kpi--big{ font-size:2.2rem; }
#adminContent .usd-muted{ color: var(--usd-muted); }
#adminContent .usd-tiny{ font-size:.82rem; }

#adminContent .usd-activity{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
#adminContent .usd-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; transform:translateY(1px); }
#adminContent .usd-dot--green{ background:#22c55e; }
#adminContent .usd-dot--blue{  background:#3b82f6; }
#adminContent .usd-dot--orange{background:#f59e0b; }

#adminContent .usd-top{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
#adminContent .usd-top__name{ font-weight:900; letter-spacing:.01em; }
#adminContent .usd-top__meta{ }

/* tampilan halaman admin = abu-abu terang */
.admin .admin-main{ background: transparent; }

/* ===== Admin shell: cegah kepotong & rapikan di layar kecil ===== */
@media (max-width: 720px){
  .admin{
    grid-template-columns: 1fr;              /* hide 2-col layout */
    overflow-x: hidden;                      /* no horizontal scroll */
  }
  .admin-main{
    padding: 14px clamp(12px, 4vw, 18px) 22px;
    height: auto;
  }
  .admin-topbar{ gap: 10px; }
  .admin-h1{ font-size: 1.6rem; }
  .admin-sub{ margin: 2px 0 12px; }
  .ad-btn--ghost{ padding: 6px 10px; border-radius: 8px; }
  /* sidebar → horizontal scroller yang tipis */
  .admin-aside{ padding: 10px var(--admin-pad-x); }
  .admin-menu{ gap: 6px; }
  .admin-menu__item{ padding: 8px 10px; font-size: .92rem; border-radius: 9px; }
  .am-ico{ width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
}

/* ===== Admin DASH partial (#adminContent .usd-*) ===== */
@media (max-width: 720px){
  /* semua grid → 1 kolom */
  #adminContent .usd-grid--stats,
  #adminContent .usd-grid--2{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  /* ringkas kartu */
  #adminContent .usd-card{
    padding: 12px 14px;
    border-radius: 10px;
  }
  #adminContent .usd-card__title{ font-size: 1rem; }
  #adminContent .usd-badge{
    width: 22px; height: 22px; font-size: 12px; border-radius: 7px;
  }
  /* angka KPI mengecil agar tidak wrap berlebihan */
  #adminContent .usd-kpi{ font-size: 1.6rem; margin: 4px 0; }
  #adminContent .usd-kpi--big{ font-size: 1.8rem; }

  /* list jarak lebih rapat */
  #adminContent .usd-activity,
  #adminContent .usd-top{ gap: 10px; }
  #adminContent .usd-top__name{ font-size: 1rem; }
  #adminContent .usd-muted{ font-size: .85rem; }
  #adminContent .usd-tiny{ font-size: .78rem; }
}

/* ekstra ketat untuk ponsel sangat kecil */
@media (max-width: 420px){
  .admin-h1{ font-size: 1.4rem; }
  .admin-sub{ font-size: .88rem; }
  #adminContent .usd-card{ padding: 10px 12px; }
  #adminContent .usd-kpi{ font-size: 1.45rem; }
  #adminContent .usd-kpi--big{ font-size: 1.6rem; }
}

/* ========== Admin compact menu (mobile) ========== */
.admin-menu-toggle{
  display:none;                /* hidden on desktop */
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  margin: 6px 0 8px;
}

.admin-menu-active{ display:none; }   /* hidden on desktop */
.admin-menu-sheet{ display:block; }   /* normal on desktop */
.admin-menu-backdrop{ display:none; } /* created by JS */

/* Mobile behavior */
@media (max-width: 1024px){
  .admin-aside{ padding:12px var(--admin-pad-x); }

  .admin-menu-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .admin-menu-active{ display:block; }
  .admin-menu-active .admin-menu__item{
    width:auto; display:inline-flex; gap:10px;
    padding:10px 12px; border-radius:10px;
    background:#e9e9ea; border:0; font-weight:900; cursor:default;
  }

  /* Drawer: hidden by default */
  .admin-menu-sheet{
    position: fixed; left:0; right:0; bottom:-100%;
    background:#fff; border-top:1px solid rgba(0,0,0,.1);
    box-shadow: 0 -20px 60px rgba(0,0,0,.15);
    padding:12px var(--admin-pad-x) 18px;
    transition: bottom .22s ease;
    z-index: 3000;
  }
  .admin-menu-sheet.is-open{ bottom:0; }

  .admin-menu{
    display:grid; gap:8px;
    max-height: 48vh; overflow:auto;
    padding-right: 2px;
  }

  .admin-menu-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
    z-index: 2999;
  }
  .admin-menu-backdrop.is-show{ display:block; }
}

/* ========== Admin compact menu as DROPDOWN (mobile) ========== */
@media (max-width: 1024px){
  .admin-aside{ position: relative; padding: 12px var(--admin-pad-x); }

  .brand-logo{width: 20%; height: 20%;}
  .brand--footer .brand-logo {width: 50%; height: 50%;}

  .admin-menu-toggle{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff; border-radius:10px; padding:8px 12px;
    font-weight:800; cursor:pointer; margin: 6px 0 8px;
  }

  .admin-menu-active{ display:block; margin-bottom: 6px; }
  .admin-menu-active .admin-menu__item{
    display:inline-flex; gap:10px; padding:10px 12px; border-radius:10px;
    background:#e9e9ea; border:0; font-weight:900; cursor:default;
  }

  /* ▼ dropdown */
  .admin-menu-dropdown{
    position:absolute; left: var(--admin-pad-x); right: var(--admin-pad-x);
    top: calc(100% - 4px);
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
    padding:10px;
    display:none; z-index: 3000;
  }
  .admin-menu-dropdown.is-open{ display:block; }

  .admin-menu{
    display:grid; gap:8px; max-height: 50vh; overflow:auto;
  }

  /* jangan lebar penuh */
  .admin-menu__item{ width:auto !important; flex:0 0 auto; padding:8px 12px; border-radius:10px; }
}

/* desktop tetap seperti biasa */
@media (min-width: 1025px){
  .admin-menu-toggle, .admin-menu-active, .admin-menu-dropdown{ display:none !important; }
}

/* ===== Desktop behavior untuk admin menu (perbaikan) ===== */
@media (min-width: 1025px){
  /* Hanya sembunyikan elemen khusus mobile */
  .admin-menu-toggle,
  .admin-menu-active{
    display: none !important;
  }

  /* Tampilkan container dropdown sebagai container biasa */
  .admin-menu-dropdown{
    display: block !important;
    position: static !important;
    inset: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: auto !important;
  }

  /* Tata ulang menu seperti semula (sidebar) */
  .admin-menu{
    display: grid;
    gap: 8px;
    max-height: none;
    overflow: visible;
  }
}

/* ===== Auth button (Login/Logout) — non-colliding, independent of .nav ===== */
.nav-auth{
  appearance:none;
  box-sizing:border-box;
  border:1px solid #111;
  background:#111;
  color:#fff;
  height:36px;
  padding:0 14px;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:36px;
  cursor:pointer;
  margin-left:10px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:filter .15s ease, background .15s ease, color .15s ease, transform .02s ease;
}
.nav-auth:hover{ filter:brightness(1.05); }
.nav-auth:active{ transform: translateY(1px); }

/* Variant outline untuk Login */
.nav-auth.is-ghost{
  background:#fff;
  color:#111;
  border-color:#111;
}
.nav-auth.is-ghost:hover{
  background:#111;
  color:#fff;
}

/* ================== ADMIN PRODUCTS (SCOPED) ================== */
.admin-products{ --ap-b: #0f0f0f; --ap-g:#6b7280; --ap-m:#9aa0a6; --ap-br:#e5e7eb; --ap-bg:#fafafa; }
.admin-products .aprod-head{ margin-bottom:18px; }
.admin-products .aprod-h2{ font-size:34px; line-height:1.1; margin:0 0 6px; }
.admin-products .aprod-sub{ color:var(--ap-g); margin:0; font-size:14px; letter-spacing:.2px; }

.admin-products .aprod-card{
  background:#fff; border:1px solid var(--ap-br); border-radius:14px; padding:16px;
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
}
.admin-products .aprod-card__header{
  display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px;
  flex-wrap:wrap;
}
.admin-products .aprod-title{ font-weight:800; letter-spacing:.3px; }

.admin-products .aprod-toolbar{ display:flex; align-items:center; gap:10px; }

.admin-products .aprod-btn{
  height:34px; padding:0 14px; border-radius:10px; border:1px solid var(--ap-b);
  background:#fff; color:var(--ap-b); font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.admin-products .aprod-btn--icon{ width:34px; padding:0; justify-content:center; }
.admin-products .aprod-btn--primary{ background:var(--ap-b); color:#fff; }
.admin-products .aprod-plus{ font-weight:900; margin-right:.35rem; }

.admin-products .aprod-search{
  height:34px; border:1px solid var(--ap-br); border-radius:999px; display:flex; align-items:center; gap:8px; padding:0 10px 0 12px; background:#fff;
}
.admin-products .aprod-search input{
  border:0; outline:0; height:30px; font:inherit; width:180px; min-width:120px;
}

/* Table */
.admin-products .aprod-table{ width:100%; }
.admin-products .aprod-thead,
.admin-products .aprod-tr{
  display:grid; grid-template-columns: 92px 1fr 160px 160px 120px; align-items:center;
}
.admin-products .aprod-thead{ color:var(--ap-g); font-weight:700; font-size:12px; padding:6px 12px; }
.admin-products .aprod-tbody{ border-top:1px solid var(--ap-br); }

.admin-products .aprod-tr{
  padding:8px 12px; border-bottom:1px solid var(--ap-br); background:#fff;
}
.admin-products .aprod-tr:hover{ background:#fcfcfc; }
.admin-products .aprod-td{ display:flex; align-items:center; gap:10px; }

.admin-products .aprod-thumb{
  width:56px; height:56px; border-radius:10px; overflow:hidden; border:1px solid var(--ap-br); background:var(--ap-bg);
}
.admin-products .aprod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.admin-products .aprod-name{ font-weight:700; }
.admin-products .aprod-badge{
  display:inline-block; padding:.2rem .5rem; border-radius:999px;
  background:#f3f4f6; color:#111; font-size:12px; font-weight:700;
}
.admin-products .aprod-price{ font-weight:700; }
.admin-products .aprod-tag-sale{
  background:#ef4444; color:#fff; font-size:10px; padding:.1rem .35rem; border-radius:6px; margin-left:.4rem; font-weight:900;
}

.admin-products .aprod-actions{ display:flex; gap:8px; }
.admin-products .aprod-ibtn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ap-br); border-radius:8px; background:#fff; cursor:pointer;
}
.admin-products .aprod-ibtn:hover{ background:#f9fafb; }

/* Responsive */
@media (max-width: 920px){
  .admin-products .aprod-thead{ display:none; }
  .admin-products .aprod-tr{
    grid-template-columns: 72px 1fr; gap:8px; padding:10px 12px;
  }
  .admin-products .aprod-c1{ grid-row:1/span 2; }
  .admin-products .aprod-c3,
  .admin-products .aprod-c4,
  .admin-products .aprod-c5{
    justify-content:flex-start;
  }
  .admin-products .aprod-c3{ grid-column:2; order:2; }
  .admin-products .aprod-c4{ grid-column:2; order:3; }
  .admin-products .aprod-c5{ grid-column:2; order:4; }
  .admin-products .aprod-search input{ width:140px; }
}

@media (max-width: 500px){
  .admin-products .aprod-toolbar{ width:100%; justify-content:space-between; }
  .admin-products .aprod-search input{ width:110px; }
  .admin-products .aprod-btn--primary{ padding:0 10px; }
}

/* =========================================================
   ADMIN PRODUCTS – BUTTONS (scoped)
   ========================================================= */
.admin-products .aprod-toolbar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

/* Primary Button (Tambah Produk) */
.admin-products .aprod-btn {
  --ap-btn-bg: #111;
  --ap-btn-fg: #fff;
  --ap-btn-bg-hover: #000;
  --ap-btn-bg-active: #1f2937;
  --ap-btn-bd: transparent;

  display: inline-flex; align-items: center; gap:.5rem;
  padding: .55rem .9rem; border-radius: .625rem;
  border: 1px solid var(--ap-btn-bd);
  background: var(--ap-btn-bg); color: var(--ap-btn-fg);
  font-weight: 700; letter-spacing:.2px;
  transition: background .15s ease, box-shadow .15s ease, transform .02s ease;
  cursor: pointer; user-select: none;
}
.admin-products .aprod-btn:hover { background: var(--ap-btn-bg-hover); }
.admin-products .aprod-btn:active { background: var(--ap-btn-bg-active); transform: translateY(1px); }
.admin-products .aprod-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.admin-products .aprod-btn .aprod-plus { 
  width:1.25rem;height:1.25rem;display:inline-grid;place-items:center;
  border-radius: .5rem; background:#fff1; color:#fff; font-weight:900; line-height:1;
}

/* Icon/Ghost Button (Filter, ikon aksi) */
.admin-products .aprod-btn--icon,
.admin-products .aprod-ibtn {
  --ap-ibtn-bg: #f3f4f6;        /* slate-100 */
  --ap-ibtn-bg-hover: #e5e7eb;  /* slate-200 */
  --ap-ibtn-bd: #e5e7eb;

  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.6rem;
  border:1px solid var(--ap-ibtn-bd); background:var(--ap-ibtn-bg); color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.admin-products .aprod-btn--icon:hover,
.admin-products .aprod-ibtn:hover { background: var(--ap-ibtn-bg-hover); }
.admin-products .aprod-btn--icon:active,
.admin-products .aprod-ibtn:active { transform: translateY(1px); }
.admin-products .aprod-ibtn svg,
.admin-products .aprod-btn--icon svg { display:block }

/* Aksi (group) */
.admin-products .aprod-actions { display:flex; gap:.35rem; }

/* Search pill */
.admin-products .aprod-search{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border:1px solid #e5e7eb; background:#fff;
  border-radius:.6rem; min-width:180px;
}
.admin-products .aprod-search svg{ color:#6b7280 }
.admin-products .aprod-search input{
  border:none; outline:none; width:140px; font:inherit; color:#111; background:transparent;
}
.admin-products .aprod-search input::placeholder{ color:#9ca3af }

/* Sort buttons on table header */
.admin-products .aprod-th { display:flex; align-items:center; gap:.25rem; }
.admin-products .aprod-sort{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent; cursor:pointer;
  font: inherit; font-weight:800; color:#111; padding:.25rem .35rem; border-radius:.4rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.admin-products .aprod-sort:hover{ background:#f3f4f6; }
.admin-products .aprod-sort:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Sort indicator – mengikuti data-sort-order yg di-set app.js */
.admin-products .aprod-sort::after{
  content:""; width:.8rem; height:.8rem; display:inline-block;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  background:#9ca3af;
}
.admin-products .aprod-sort[data-sort-order="asc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  background:#111;
}
.admin-products .aprod-sort[data-sort-order="desc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  background:#111;
}

/* Tombol kecil danger (jika diperlukan) */
.admin-products .aprod-btn--danger{
  --ap-btn-bg:#fee2e2; --ap-btn-fg:#991b1b; --ap-btn-bd:#fecaca;
  color:var(--ap-btn-fg); background:var(--ap-btn-bg); border-color:var(--ap-btn-bd);
}
.admin-products .aprod-btn--danger:hover{ background:#fecaca; }

/* Responsif: rapikan toolbar di layar kecil */
@media (max-width: 640px){
  .admin-products .aprod-toolbar { gap:.4rem; }
  .admin-products .aprod-btn { padding:.5rem .7rem; }
  .admin-products .aprod-btn--icon,
  .admin-products .aprod-ibtn { width:2rem; height:2rem; }
  .admin-products .aprod-search { min-width: 0; width: 100%; }
  .admin-products .aprod-search input{ width:100%; }
}



/* ================== Edit Product Overlay (Scoped) ================== */
.apedit-ovl{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
}
.apedit-ovl__backdrop{
  position:absolute; inset:0; background:rgba(17,17,17,.55);
  backdrop-filter: blur(2px);
}
.apedit{
  position:relative; z-index:1; width:min(680px, 94vw);
}
.apedit__box{
  background:#fff; border-radius:14px; border:1px solid #e5e7eb; padding:18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.apedit__title{
  font-size:20px; font-weight:900; letter-spacing:.3px; margin-bottom:12px;
}
.apedit__form{ margin-top:6px; }
.apedit__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.apedit__field{ display:flex; flex-direction:column; gap:6px; }
.apedit__field span{ font-size:12px; font-weight:800; color:#374151; letter-spacing:.2px; }
.apedit__field b{ color:#111; }
.apedit__field input, .apedit__selectwrap select{
  border:1px solid #d1d5db; border-radius:8px; height:36px; padding:0 12px; outline:0;
  font:inherit; color:#111; background:#fff;
}
.apedit__selectwrap{ position:relative; }
.apedit__selectwrap select{ width:100%; appearance:none; -webkit-appearance:none; }
.apedit__selecticon{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#6b7280; pointer-events:none; }
.apedit__field--full{ grid-column:1 / -1; }

.apedit__actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px;
}
.apedit-btn{
  height:34px; padding:0 14px; border-radius:999px; font-weight:900; cursor:pointer;
  border:1px solid #111; background:#111; color:#fff;
}
.apedit-btn--ghost{ background:#fff; color:#111; }
.apedit-btn--ghost:hover{ background:#f9fafb; }
.apedit-btn--primary:hover{ filter:brightness(1.05); }

@media (max-width: 560px){
  .apedit__grid{ grid-template-columns:1fr; }
}


/* ================== Add Product Overlay (Scoped) ================== */
.apadd-ovl{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.apadd-ovl__backdrop{ position:absolute; inset:0; background:rgba(17,17,17,.55); backdrop-filter: blur(2px); }
.apadd{ position:relative; z-index:1; width:min(680px, 94vw); }
.apadd__box{ background:#fff; border-radius:14px; border:1px solid #e5e7eb; padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.apadd__title{ font-size:20px; font-weight:900; letter-spacing:.3px; margin-bottom:12px; }
.apadd__form{ margin-top:6px; }
.apadd__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.apadd__field{ display:flex; flex-direction:column; gap:6px; }
.apadd__field span{ font-size:12px; font-weight:800; color:#374151; letter-spacing:.2px; }
.apadd__field b{ color:#111; }
.apadd__field input, .apadd__selectwrap select{
  border:1px solid #d1d5db; border-radius:8px; height:36px; padding:0 12px; outline:0; font:inherit; color:#111; background:#fff;
}
.apadd__selectwrap{ position:relative; }
.apadd__selectwrap select{ width:100%; appearance:none; -webkit-appearance:none; }
.apadd__selecticon{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#6b7280; pointer-events:none; }
.apadd__field--full{ grid-column:1 / -1; }
.apadd__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.apadd-btn{ height:34px; padding:0 14px; border-radius:999px; font-weight:900; cursor:pointer; border:1px solid #111; background:#111; color:#fff; }
.apadd-btn--ghost{ background:#fff; color:#111; }
.apadd-btn--ghost:hover{ background:#f9fafb; }
.apadd-btn--primary:hover{ filter:brightness(1.05); }
@media (max-width:560px){ .apadd__grid{ grid-template-columns:1fr; } }


/* =========================================================
   ADMIN ORDERS (scoped .aorders*)
   ========================================================= */
.aorders { padding: 18px 16px; }
.aorders__head { margin-bottom: 12px; }
.aorders__title { margin:0; font-size:28px; font-weight:900; color:#0f172a; letter-spacing:.3px; }
.aorders__sub { margin:6px 0 0; color:#94a3b8; font-weight:700; }

/* Card */
.aorders__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px;
}
.aorders__cardhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.aorders__cardtitle{ font-weight:900; color:#0f172a; }

/* Tools (Filter + Search) */
.aorders__tools{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.aorders__iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.6rem;
  border:1px solid #e5e7eb; background:#f3f4f6; color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.aorders__iconbtn:hover{ background:#e5e7eb; }
.aorders__iconbtn:active{ transform: translateY(1px); }
.aorders__iconbtn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

.aorders__search{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border:1px solid #e5e7eb; background:#fff;
  border-radius:.6rem; min-width:220px;
}
.aorders__search svg{ color:#6b7280 }
.aorders__search input{
  border:none; outline:none; width:160px; font:inherit; color:#111; background:transparent;
}
.aorders__search input::placeholder{ color:#9ca3af }

/* Table */
.aorders__table{ width:100%; overflow:auto; }
.aorders__thead{ position:sticky; top:0; z-index:1; background:#fff; }
.aorders__tr{
  display:grid;
  grid-template-columns: 1.1fr 2fr 1.3fr 1.2fr 1.2fr 1.3fr; /* No, Cust, Date, Total, Status, Aksi */
  gap:10px; align-items:center;
  padding:10px 8px; border-top:1px solid #f1f5f9;
}
.aorders__tr--head{
  border-top:none; padding:8px 8px; background:#f8fafc; border-bottom:1px solid #e5e7eb;
}
.aorders__th{ font-weight:800; color:#111; display:flex; align-items:center; gap:.25rem; }
.aorders__td{ color:#0f172a; }
.aorders__nowrap{ white-space:nowrap; }
.aorders__th--aksi, .aorders__aksi{ text-align:right; }

/* Sort buttons (di header) */
.aorders .aorders-sort{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent; cursor:pointer;
  font: inherit; font-weight:800; color:#111; padding:.25rem .35rem; border-radius:.4rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.aorders .aorders-sort:hover{ background:#f3f4f6; }
.aorders .aorders-sort:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* INDICATOR ▲/▼ mengikuti data-sort-order yg di-set app.js */
.aorders .aorders-sort::after{
  content:""; width:.8rem; height:.8rem; display:inline-block;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  background:#9ca3af;
}
.aorders .aorders-sort[data-sort-order="asc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  background:#111;
}
.aorders .aorders-sort[data-sort-order="desc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  background:#111;
}

/* Cells detail */
.aorders__order{ font-weight:900; letter-spacing:.2px; }
.aorders__name{ font-weight:800; }
.aorders__muted{ color:#94a3b8; font-weight:600; font-size:.9rem; }

/* Badges */
.aorders__badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:900; color:#334155; background:#e2e8f0;
}
.aorders__badge--done{ color:#0b3a4a; background:#bae6fd; }  /* selesai */
.aorders__badge--warn{ color:#7c2d12; background:#fed7aa; }  /* opsional */
.aorders__badge--err { color:#7f1d1d; background:#fecaca; }  /* opsional */

/* Action buttons */
.aorders__aksi{ display:flex; justify-content:flex-end; gap:.35rem; }
.aorders__ibtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:.55rem;
  border:1px solid #e5e7eb; background:#f8fafc; color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.aorders__ibtn:hover{ background:#eef2f7; }
.aorders__ibtn:active{ transform: translateY(1px); }
.aorders__ibtn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Hover states per-row (opsional) */
.aorders__tbody .aorders__tr:hover{ background:#fcfcfd; }

/* Responsive */
@media (max-width: 980px){
  .aorders__tr{
    grid-template-columns: 1fr 1.8fr 1.1fr 1.1fr 1fr 1fr;
  }
}
@media (max-width: 760px){
  .aorders__card{ padding:12px; }
  .aorders__tr{
    grid-template-columns: 1fr 1.8fr .9fr 1fr .9fr .9fr;
    gap:8px; padding:10px 6px;
  }
  .aorders__search{ min-width:0; flex:1; }
  .aorders__search input{ width:100%; }
}
@media (max-width: 560px){
  /* Ubah jadi dua baris grid agar tidak kepotong */
  .aorders__tr{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .aorders__tr--head{
    display:grid; grid-template-columns: 1fr 1fr; gap:6px;
  }
  /* Mapping kolom ke area */
  .aorders__td:nth-child(1){ order:1; } /* No */
  .aorders__td:nth-child(2){ order:3; grid-column: 1 / -1; } /* Customer full width */
  .aorders__td:nth-child(3){ order:2; justify-self:start; }  /* Date */
  .aorders__td:nth-child(4){ order:4; justify-self:start; }  /* Total */
  .aorders__td:nth-child(5){ order:5; }                      /* Status */
  .aorders__td:nth-child(6){ order:6; justify-self:end; }    /* Aksi */

  .aorders__aksi{ justify-content:flex-start; gap:.4rem; }
  .aorders__ibtn{ width:2rem; height:2rem; border-radius:.5rem; }
  .aorders__title{ font-size:24px; }
}


/* =========================================================
   ADMIN PAYMENTS (scoped .apay*)
   ========================================================= */

/* Page head */
.apay { padding: 18px 16px; }
.apay__head { margin-bottom: 12px; }
.apay__title { margin:0; font-size:28px; font-weight:900; color:#0f172a; letter-spacing:.3px; }
.apay__sub { margin:6px 0 0; color:#94a3b8; font-weight:700; }

/* Pending banner */
.apay__alert{
  display:block;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border:1px solid #fde68a;               /* amber-200 */
  background:#fffbeb;                      /* amber-50 */
  color:#92400e;                           /* amber-800 */
  font-weight:800; border-radius:10px;
}

/* Card */
.apay__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px;
}
.apay__cardhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.apay__cardtitle{ font-weight:900; color:#0f172a; }

/* Tools (Filter + Search) */
.apay__tools{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.apay__iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.6rem;
  border:1px solid #e5e7eb; background:#f3f4f6; color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.apay__iconbtn:hover{ background:#e5e7eb; }
.apay__iconbtn:active{ transform: translateY(1px); }
.apay__iconbtn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

.apay__search{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border:1px solid #e5e7eb; background:#fff;
  border-radius:.6rem; min-width:220px;
}
.apay__search svg{ color:#6b7280 }
.apay__search input{
  border:none; outline:none; width:160px; font:inherit; color:#111; background:transparent;
}
.apay__search input::placeholder{ color:#9ca3af }

/* Table */
.apay__table{ width:100%; overflow:auto; }
.apay__thead{ position:sticky; top:0; z-index:1; background:#fff; }
.apay__tr{
  display:grid;
  grid-template-columns: 1.1fr 2fr 1.3fr 1.2fr 1.2fr 1.3fr; /* No, Cust, Date, Total, Status, Aksi */
  gap:10px; align-items:center;
  padding:10px 8px; border-top:1px solid #f1f5f9;
}
.apay__tr--head{
  border-top:none; padding:8px 8px; background:#f8fafc; border-bottom:1px solid #e5e7eb;
}
.apay__th{ font-weight:800; color:#111; display:flex; align-items:center; gap:.25rem; }
.apay__th--aksi, .apay__aksi{ text-align:right; }
.apay__td{ color:#0f172a; }
.apay__nowrap{ white-space:nowrap; }

/* Sort buttons (header) */
.apay .apay-sort{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; background:transparent; cursor:pointer;
  font: inherit; font-weight:800; color:#111; padding:.25rem .35rem; border-radius:.4rem;
  display:inline-flex; align-items:center; gap:.35rem;
}
.apay .apay-sort:hover{ background:#f3f4f6; }
.apay .apay-sort:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Sort indicator (data-sort-order di-set oleh app.js) */
.apay .apay-sort::after{
  content:""; width:.8rem; height:.8rem; display:inline-block;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  background:#9ca3af;
}
.apay .apay-sort[data-sort-order="asc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  background:#111;
}
.apay .apay-sort[data-sort-order="desc"]::after{
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  background:#111;
}

/* Content cells */
.apay__order{ font-weight:900; letter-spacing:.2px; }
.apay__name{ font-weight:800; }
.apay__muted{ color:#94a3b8; font-weight:600; font-size:.9rem; }

/* Badges */
.apay__badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:900; color:#334155; background:#e2e8f0;
}
.apay__badge--pending{ color:#854d0e; background:#fef3c7; } /* amber-100 */
.apay__badge--done{ color:#065f46; background:#d1fae5; }    /* emerald-100 */
.apay__badge--reject{ color:#7f1d1d; background:#fecaca; }  /* rose-200 */

/* Actions */
.apay__aksi{ display:flex; justify-content:flex-end; gap:.35rem; }
.apay__ibtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:.55rem;
  border:1px solid #e5e7eb; background:#f8fafc; color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.apay__ibtn:hover{ background:#eef2f7; }
.apay__ibtn:active{ transform: translateY(1px); }
.apay__ibtn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.apay__ibtn.is-hidden{ display:none !important; }

/* Row hover (opsional) */
.apay__tbody .apay__tr:hover{ background:#fcfcfd; }

/* Responsive */
@media (max-width: 980px){
  .apay__tr{
    grid-template-columns: 1fr 1.8fr 1.1fr 1.1fr 1fr 1fr;
  }
}
@media (max-width: 760px){
  .apay__card{ padding:12px; }
  .apay__tr{
    grid-template-columns: 1fr 1.8fr .9fr 1fr .9fr .9fr;
    gap:8px; padding:10px 6px;
  }
  .apay__search{ min-width:0; flex:1; }
  .apay__search input{ width:100%; }
}
@media (max-width: 560px){
  /* Susun ulang jadi 2 kolom agar tidak kepotong */
  .apay__tr{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .apay__tr--head{
    display:grid; grid-template-columns: 1fr 1fr; gap:6px;
  }
  /* urutkan cell agar tetap logis di mobile */
  .apay__td:nth-child(1){ order:1; }              /* No */
  .apay__td:nth-child(2){ order:3; grid-column:1 / -1; } /* Pelanggan full width */
  .apay__td:nth-child(3){ order:2; }              /* Tanggal */
  .apay__td:nth-child(4){ order:4; }              /* Total */
  .apay__td:nth-child(5){ order:5; }              /* Status */
  .apay__td:nth-child(6){ order:6; justify-self:end; }   /* Aksi */

  .apay__aksi{ justify-content:flex-start; gap:.4rem; }
  .apay__ibtn{ width:2rem; height:2rem; border-radius:.5rem; }
  .apay__title{ font-size:24px; }
}



/* ===================== ADMIN PAYMENT DETAIL (SCOPED) ===================== */
.apaydetail-ovl{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  font-family: inherit;
}

/* Backdrop */
.apaydetail-ovl__backdrop{
  position:absolute; inset:0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  animation: apdFade .18s ease;
}

/* Panel */
.apaydetail{
  position: relative;
  width: min(980px, calc(100vw - 24px));
  max-height: min(86vh, 880px);
  background: #ffffff;
  color:#0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2, 6, 23, .25);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: apdPop .18s ease;
}

/* Header */
.apaydetail__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #eef2f7; background:#f8fafc;
}
.apaydetail__title{
  margin:0; font-size:18px; font-weight:900; letter-spacing:.2px; color:#0f172a;
}
.apaydetail__close{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer;
  font-size:20px; line-height:1; color:#111827;
  transition: background .15s ease, transform .05s ease;
}
.apaydetail__close:hover{ background:#f3f4f6; }
.apaydetail__close:active{ transform: translateY(1px); }
.apaydetail__close:focus-visible{ outline:2px solid #111827; outline-offset:2px; }

/* Content grid (info kiri, bukti kanan) */
.apaydetail__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  column-gap: 20px;
  padding:18px;
  overflow:auto;
}

/* ========== INFO META (VERTICAL ROWS) ========== */
.apaydetail__meta{
  background:#ffffff; border:1px solid #eef2f7;
  border-radius: 12px; padding:14px;
}
.apaydetail__row{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; padding:12px 2px;
}
.apaydetail__row + .apaydetail__row{
  border-top:1px dashed #eef2f7; margin-top:8px; padding-top:12px;
}
.apaydetail__label{
  min-width:0;
  color:#64748b; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.3px;
}
.apaydetail__value{ color:#0f172a; font-size:14px; font-weight:900; }
.apaydetail__name{ font-weight:900; color:#0f172a; }
.apaydetail__muted{ color:#94a3b8; font-weight:600; font-size:12px; margin-top:-2px; }
.apaydetail__sep{ height:10px; }

/* Badge status */
.apaydetail__badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:900; color:#fff; background:#a3a3a3; margin-top:2px;
}
.apaydetail__badge--done{ background:#0ea5e9; }    /* Disetujui */
.apaydetail__badge--reject{ background:#ef4444; }  /* Ditolak */

/* ========== PROOF / BUKTI TRANSFER ========== */
.apaydetail__proof .apaydetail__label{
  display:block; margin-bottom:8px;
}
.apaydetail__proofbox{
  border:1px solid #eef2f7; background:#f8fafc;
  border-radius:12px; padding:10px;
  display:grid; place-items:center;
}
.apaydetail__proofbox img{
  max-width:100%; max-height:58vh;
  width:auto; height:auto; display:block; border-radius:8px;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(2,6,23,.04) inset;
}

/* Footer */
.apaydetail__foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; padding:14px 18px; border-top:1px solid #eef2f7; background:#fff;
}
.apaydetail__totalwrap{ display:flex; align-items:baseline; gap:10px; }
.apaydetail__totallabel{
  color:#64748b; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.3px;
}
.apaydetail__total{ font-size:20px; font-weight:900; color:#0f172a; letter-spacing:.2px; }

/* CTA buttons */
.apaydetail__cta{ display:flex; gap:10px; }
.apaydetail__btn{
  min-width:120px; height:40px; padding:0 14px;
  border-radius:10px; border:1px solid #e5e7eb;
  font-weight:900; font-size:14px; cursor:pointer;
  transition: transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.apaydetail__btn:active{ transform: translateY(1px); }
.apaydetail__btn--ok{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.apaydetail__btn--ok:hover{ background:#0284c7; border-color:#0284c7; }
.apaydetail__btn--no{ background:#fff; color:#ef4444; border-color:#fecaca; }
.apaydetail__btn--no:hover{ background:#fff5f5; border-color:#ef4444; }
.apaydetail__btn:focus-visible{ outline:2px solid #111827; outline-offset:2px; }

/* Animations */
@keyframes apdFade{ from{opacity:0} to{opacity:1} }
@keyframes apdPop{ from{ transform: translateY(6px) scale(.99); opacity:.96 } to{ transform: translateY(0) scale(1); opacity:1 } }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .apaydetail__grid{ grid-template-columns: 1fr; row-gap:14px; }
  .apaydetail__proofbox img{ max-height: 44vh; }
}
@media (max-width: 560px){
  .apaydetail{
    width: calc(100vw - 16px);
    max-height: calc(92vh);
    border-radius: 14px;
  }
  .apaydetail__head{ padding:12px 14px; }
  .apaydetail__title{ font-size:16px; }
  .apaydetail__grid{ padding:12px; }
  .apaydetail__meta{ padding:12px; }
  .apaydetail__label{ font-size:11px; }
  .apaydetail__value{ font-size:13px; }
  .apaydetail__foot{ padding:12px; flex-direction:column; align-items:flex-start; gap:10px; }
  .apaydetail__total{ font-size:18px; }
  .apaydetail__cta{ width:100%; }
  .apaydetail__btn{ flex:1; min-width:auto; height:42px; }
}

/* ===================== UTILITY ===================== */
.apaydetail [hidden]{ display:none !important; }


/* ===================== ADMIN STORE (SCOPED .astore*) ===================== */
.astore{ padding:18px 16px; }
.astore__header{ margin-bottom:12px; }
.astore__title{ margin:0; font-size:28px; font-weight:900; color:#0f172a; letter-spacing:.3px; }
.astore__sub{ margin:6px 0 0; color:#94a3b8; font-weight:700; }

/* card */
.astore__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px; margin-bottom:14px;
}
.astore__cardtitle{ font-weight:900; color:#0f172a; margin-bottom:6px; }
.astore__hint{ color:#9ca3af; font-size:12px; margin:0 0 10px; }

/* grid */
.astore__grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width: 760px){ .astore__grid-2{ grid-template-columns:1fr; } }

/* field */
.astore__field{ display:flex; flex-direction:column; gap:6px; }
.astore__field--full{ grid-column:1/-1; }
.astore__label{ font-size:12px; font-weight:800; color:#6b7280; text-transform:uppercase; letter-spacing:.3px; }
.astore__input, .astore__textarea{
  width:100%; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font:inherit; color:#0f172a;
}
.astore__textarea{ resize:vertical; }

/* addon (field + icon) */
.astore__addon{ position:relative; }
.astore__addon .astore__input{ padding-right:36px; }
.astore__addon-icon{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center; color:#9ca3af;
}

/* upload logo */
.astore__upload-input{ display:none; }
.astore__upload-box{
  border:1px dashed #cbd5e1; background:#f8fafc; border-radius:12px;
  min-height:96px; display:flex; align-items:center; justify-content:center;
  gap:10px; cursor:pointer; text-align:center;
}
.astore__upload-icon{ font-size:18px; color:#6b7280; }
.astore__upload-text{ color:#6b7280; font-weight:800; }
.astore__upload-text small{ display:block; color:#a1a1aa; font-weight:700; }

/* bank */
.astore__bankhead{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.astore__bankblock{
  border:1px solid #eef2f7; border-radius:10px; padding:12px; margin-bottom:10px; background:#fff;
}

/* actions / buttons */
.astore__actions{ display:flex; justify-content:flex-start; gap:10px; margin-top:8px; }
.astore__btn-primary{
  background:#111827; color:#fff; border:1px solid #111827; border-radius:10px;
  padding:10px 14px; font-weight:900; cursor:pointer;
}
.astore__btn-primary:hover{ background:#0b1220; }
.astore__btn-outline{
  background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:10px;
  padding:8px 12px; font-weight:900; cursor:pointer;
}
.astore__btn-outline:hover{ background:#f8fafc; }

/* =========================================================
   ADMIN CONSISTENCY PATCH — Harmonize with admin-dash
   (Tanpa mengubah scope masing-masing page)
   ========================================================= */

/* Shared tokens for admin pages (inherit usd feel) */
#adminContent{
  --adm-pad-x: 16px;
  --adm-pad-y: 18px;
  --adm-gap: 10px;
  --adm-border: #e5e7eb;
  --adm-border-soft: #eef2f7;
  --adm-radius: 12px;
  --adm-radius-lg: 14px;
  --adm-card-bg: #fff;
  --adm-head-bg: #f8fafc;
  --adm-text: #0f172a;
  --adm-muted: #94a3b8;
  --adm-ink: #111;
}

/* 1) Headings & subheading seragam (ala admin-dash) */
#adminContent :is(.admin-products, .aorders, .apay, .astore) :is(h1,.aprod-h2){
  color: var(--adm-text);
  letter-spacing: .3px;
}
#adminContent :is(.aorders__title, .apay__title, .astore__title){
  font-weight: 900;
  font-size: 28px;
  margin: 0;
}
#adminContent :is(.aorders__sub, .apay__sub, .astore__sub){
  margin: 6px 0 0;
  color: var(--adm-muted);
  font-weight: 700;
}

/* 2) Card look & feel diseragamkan */
#adminContent :is(.admin-products .aprod-card,
                  .aorders__card,
                  .apay__card,
                  .astore__card){
  background: var(--adm-card-bg);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-lg);
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
}

/* 3) Section padding selaras dengan dash */
#adminContent :is(.admin-products, .aorders, .apay, .astore){
  padding: var(--adm-pad-y) var(--adm-pad-x);
}

/* 4) Toolbar controls: search pill & icon button seragam */
#adminContent :is(.aprod-search, .aorders__search, .apay__search){
  border: 1px solid var(--adm-border);
  border-radius: .6rem;
  background: #fff;
  padding: .4rem .6rem;
  display: flex; align-items: center; gap: .5rem;
}
#adminContent :is(.aprod-search input, .aorders__search input, .apay__search input){
  border: none; outline: none; background: transparent; color: var(--adm-ink);
  font: inherit;
}

#adminContent :is(.aprod-btn--icon, .aprod-ibtn, .aorders__iconbtn, .aorders__ibtn, .apay__iconbtn, .apay__ibtn){
  width: 2.25rem; height: 2.25rem; border-radius: .6rem;
  border: 1px solid var(--adm-border);
  background: #f3f4f6; color: var(--adm-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .02s;
  cursor: pointer;
}
#adminContent :is(.aprod-btn--icon:hover, .aprod-ibtn:hover, .aorders__iconbtn:hover, .aorders__ibtn:hover, .apay__iconbtn:hover, .apay__ibtn:hover){
  background: #e5e7eb;
}
#adminContent :is(.aprod-btn--icon:active, .aprod-ibtn:active, .aorders__iconbtn:active, .aorders__ibtn:active, .apay__iconbtn:active, .apay__ibtn:active){
  transform: translateY(1px);
}

/* 5) Sticky table header dan grid row spacing konsisten */
#adminContent :is(.aprod-thead, .aorders__thead, .apay__thead){
  position: sticky; top: 0; z-index: 1;
  background: #fff;
}
#adminContent :is(.aprod-tr, .aorders__tr, .apay__tr){
  border-top: 1px solid #f1f5f9;
  padding: 10px 8px;
}
#adminContent :is(.aprod-thead, .aorders__tr--head, .apay__tr--head){
  background: var(--adm-head-bg);
  border-bottom: 1px solid var(--adm-border);
}

/* 6) Sort button indicator: gunakan pola yang sama antar-scope */
#adminContent :is(.aprod-sort, .aorders-sort, .apay-sort){
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--adm-ink);
  padding: .25rem .35rem; border-radius: .4rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
#adminContent :is(.aprod-sort:hover, .aorders-sort:hover, .apay-sort:hover){
  background: #f3f4f6;
}
#adminContent :is(.aprod-sort, .aorders-sort, .apay-sort)::after{
  content:""; width:.8rem; height:.8rem; display:inline-block; background:#9ca3af;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5-5 5 5H7z'/><path d='M17 14l-5 5-5-5h10z'/></svg>") no-repeat center / contain;
}
#adminContent :is(.aprod-sort[data-sort-order="asc"],
                  .aorders-sort[data-sort-order="asc"],
                  .apay-sort[data-sort-order="asc"])::after{
  background:#111;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 14l5-5 5 5H7z'/></svg>");
}
#adminContent :is(.aprod-sort[data-sort-order="desc"],
                  .aorders-sort[data-sort-order="desc"],
                  .apay-sort[data-sort-order="desc"])::after{
  background:#111;
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5H7z'/></svg>");
}

/* 7) Badge & text utility sinkron */
#adminContent :is(.aprod-badge, .aorders__badge, .apay__badge){
  border-radius: 999px;
  font-size: 11px; font-weight: 900;
}

/* 8) Hover row subtle */
#adminContent :is(.aprod-tbody .aprod-tr,
                  .aorders__tbody .aorders__tr,
                  .apay__tbody .apay__tr):hover{
  background:#fcfcfd;
}

/* 9) Responsif minimum — kompakkan padding kartu di layar kecil */
@media (max-width: 760px){
  #adminContent :is(.admin-products .aprod-card, .aorders__card, .apay__card, .astore__card){
    padding: 12px;
  }
}

/* 10) Perketat scope brand logo agar tidak pengaruh ke non-admin */
.admin .brand-logo{ width: 20%; height: 20%; }
.admin .brand--footer .brand-logo { width: 60%; height: 60%; }


/* =========================================================
   ADMIN TYPE SYSTEM — konsisten untuk semua halaman admin
   Berlaku di dalam #adminContent saja agar tidak nabrak front store
   ========================================================= */

/* 1) Token tipografi */
#adminContent{
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  /* Scale (desktop) */
  --fs-xs: 12px;   /* badge, label kecil */
  --fs-sm: 13px;   /* helper/muted kecil */
  --fs-base: 14px; /* teks umum cell/field */
  --fs-md: 16px;   /* subheading, body besar */
  --fs-lg: 18px;   /* judul kartu & section kecil */
  --fs-xl: 24px;   /* h1 mobile */
  --fs-2xl: 28px;  /* h1 desktop */
  --fs-3xl: 34px;  /* headline besar (aprod-h2) */
  --fs-kpi: 2rem;  /* KPI angka */
  --fs-kpi-big: 2.2rem;

  --lh-tight: 1.15;
  --lh-default: 1.45;
  --lh-loose: 1.6;

  --fw-regular: 600;
  --fw-bold: 800;
  --fw-black: 900;

  --trk-tight: .2px;
  --trk-wide: .3px;
}

/* 2) Base font di admin container */
#adminContent, #adminContent *{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums; /* angka tabel rapi */
}

/* 3) Heading & subheading konsisten */
#adminContent :is(.admin-products .aprod-h2,
                  .aorders__title,
                  .apay__title,
                  .astore__title,
                  .admin-h1){
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--trk-wide);
  margin: 0;
  color: #0f172a;
}
/* Headline ekstra besar yang memang kamu pakai di products */
#adminContent .admin-products .aprod-h2{ font-size: var(--fs-3xl); }

#adminContent :is(.aorders__sub, .apay__sub, .astore__sub, .admin-sub){
  font-size: var(--fs-md);
  line-height: var(--lh-default);
  font-weight: var(--fw-bold);
  letter-spacing: var(--trk-tight);
  color:#94a3b8;
  margin: 6px 0 0;
}

/* 4) Judul kartu */
#adminContent :is(.aprod-title, .aorders__cardtitle, .apay__cardtitle, .astore__cardtitle){
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: var(--trk-tight);
  color:#0f172a;
  margin: 0;
}

/* 5) Body text & cell */
#adminContent :is(.aprod-td, .aorders__td, .apay__td, .astore__input, .astore__textarea){
  font-size: var(--fs-base);
  line-height: var(--lh-default);
  font-weight: var(--fw-regular);
  color:#0f172a;
}
#adminContent :is(.aprod-name, .aorders__name, .apay__name){
  font-weight: var(--fw-black);
  letter-spacing: var(--trk-tight);
}
#adminContent :is(.usd-muted, .aorders__muted, .apay__muted, .astore__hint){
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  font-weight: var(--fw-bold);
}

/* 6) Table header & sort button */
#adminContent :is(.aprod-th, .aorders__th, .apay__th){
  font-size: var(--fs-sm);
  line-height: var(--lh-default);
  font-weight: var(--fw-bold);
  color:#111;
}
#adminContent :is(.aprod-sort, .aorders-sort, .apay-sort){
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
}

/* 7) Badge/Tag/Label */
#adminContent :is(.aprod-badge, .aorders__badge, .apay__badge,
                  .apaydetail__badge){
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: .2px;
}
#adminContent .aprod-tag-sale{ font-size: 10px; font-weight: var(--fw-black); }

/* 8) Buttons */
#adminContent :is(.aprod-btn, .apedit-btn, .apadd-btn,
                  .aorders__ibtn, .apay__ibtn,
                  .astore__btn-primary, .astore__btn-outline,
                  .apaydetail__btn, .nav-auth){
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  letter-spacing: var(--trk-tight);
  line-height: var(--lh-tight);
}
#adminContent :is(.aprod-btn--icon, .aprod-ibtn,
                  .aorders__iconbtn, .aorders__ibtn,
                  .apay__iconbtn, .apay__ibtn){
  font-size: var(--fs-sm); /* icon wrapper */
}

/* 9) KPI di dashboard */
#adminContent :is(.usd-kpi){ font-size: var(--fs-kpi); line-height: var(--lh-tight); font-weight: var(--fw-black); }
#adminContent :is(.usd-kpi--big){ font-size: var(--fs-kpi-big); }

/* 10) Payment Detail overlay */
#adminContent :is(.apaydetail__title){ font-size: 18px; font-weight: var(--fw-black); }
#adminContent :is(.apaydetail__label){ font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing:.3px; }
#adminContent :is(.apaydetail__value){ font-size: var(--fs-base); font-weight: var(--fw-black); }
#adminContent :is(.apaydetail__total){ font-size: 20px; font-weight: var(--fw-black); }

/* 11) Form fields Store Management */
#adminContent :is(.astore__label){ font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing:.3px; }
#adminContent :is(.astore__input, .astore__textarea){ font-size: var(--fs-base); }

/* 12) Search pill input */
#adminContent :is(.aprod-search input, .aorders__search input, .apay__search input){
  font-size: var(--fs-base);
}

/* 13) Responsive scaling (mobile tighten) */
@media (max-width: 720px){
  #adminContent{
    --fs-xl: 22px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-lg: 17px;
    --fs-md: 15px;
    --fs-base: 14px; /* keep readable */
    --fs-kpi: 1.6rem;
    --fs-kpi-big: 1.8rem;
  }
  #adminContent :is(.admin-products .aprod-h2,
                    .aorders__title, .apay__title, .astore__title, .admin-h1){
    font-size: var(--fs-2xl);
  }
  #adminContent .admin-products .aprod-h2{ font-size: var(--fs-3xl); }
}

/* 14) Extra small devices */
@media (max-width: 420px){
  #adminContent{
    --fs-2xl: 22px;
    --fs-3xl: 26px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-base: 13.5px;
  }
}

/* 15) Konsistensi angka harga/total agar rata */
#adminContent :is(.aprod-price, .aorders__td:nth-child(4), .apay__td:nth-child(4), .apaydetail__total){
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   MOBILE-XS POLISH — semua halaman admin (≤400px / ≤320px)
   Letakkan PATCH INI PALING AKHIR
   ========================================================= */

/* ---------- breakpoint utama: ≤400px ---------- */
@media (max-width: 400px){

  /* Shell & spacing */
  #adminContent{
    --adm-pad-x: 10px;
    --adm-pad-y: 12px;
  }
  #adminContent :is(.admin-products, .aorders, .apay, .astore){
    padding: var(--adm-pad-y) var(--adm-pad-x);
  }

  /* Headline & sub */
  #adminContent :is(.aorders__title, .apay__title, .astore__title, .admin-h1){ 
    font-size: 20px; line-height: 1.2;
  }
  #adminContent :is(.aorders__sub, .apay__sub, .astore__sub, .admin-sub){
    font-size: 13px; margin-top: 4px;
  }

  /* Card generik */
  #adminContent :is(.admin-products .aprod-card, .aorders__card, .apay__card, .astore__card){
    border-radius: 10px; padding: 10px;
  }

  /* Toolbar: susun vertikal, search full width */
  #adminContent :is(.aprod-toolbar, .aorders__tools, .apay__tools){
    width: 100%; gap: 6px; flex-wrap: wrap;
  }
  #adminContent :is(.aprod-search, .aorders__search, .apay__search){
    min-width: 0; width: 100%; padding: .35rem .55rem;
  }
  #adminContent :is(.aprod-search input, .aorders__search input, .apay__search input){
    width: 100%; font-size: 13.5px;
  }
  /* Icon button & kecilkan */
  #adminContent :is(.aprod-btn--icon, .aprod-ibtn, .aorders__iconbtn, .aorders__ibtn, .apay__iconbtn, .apay__ibtn){
    width: 34px; height: 34px; border-radius: 8px;
  }
  /* Button utama lebih ramping */
  #adminContent .admin-products .aprod-btn{ padding: .45rem .7rem; }

  /* ===== PRODUCTS TABLE → 1 kolom stack ===== */
  .admin-products .aprod-thead{ display:none; }
  .admin-products .aprod-tr{
    grid-template-columns: 64px 1fr; gap: 8px; padding: 10px;
  }
  .admin-products .aprod-thumb{ width: 56px; height: 56px; }
  .admin-products .aprod-name{ font-size: 14px; }
  .admin-products .aprod-c3,
  .admin-products .aprod-c4,
  .admin-products .aprod-c5{ grid-column: 2; justify-content: flex-start; }
  .admin-products .aprod-actions{ gap: 6px; }

  /* ===== ORDERS TABLE → 2 kolom, aksi turun ===== */
  .aorders__tr{
    grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 10px 8px;
  }
  .aorders__td:nth-child(1){ order:1; }                 /* No */
  .aorders__td:nth-child(3){ order:2; }                 /* Tanggal */
  .aorders__td:nth-child(2){ order:3; grid-column:1/-1; } /* Customer full */
  .aorders__td:nth-child(4){ order:4; }                 /* Total */
  .aorders__td:nth-child(5){ order:5; }                 /* Status */
  .aorders__td:nth-child(6){ order:6; justify-self: start; } /* Aksi */
  .aorders__aksi{ gap: 6px; }

  /* ===== PAYMENTS TABLE → 2 kolom, aksi turun ===== */
  .apay__tr{
    grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 10px 8px;
  }
  .apay__td:nth-child(1){ order:1; }                    /* No */
  .apay__td:nth-child(3){ order:2; }                    /* Tanggal */
  .apay__td:nth-child(2){ order:3; grid-column:1/-1; }  /* Pelanggan */
  .apay__td:nth-child(4){ order:4; }                    /* Total */
  .apay__td:nth-child(5){ order:5; }                    /* Status */
  .apay__td:nth-child(6){ order:6; justify-self: start; }/* Aksi */
  .apay__aksi{ gap: 6px; }

  /* ===== PAYMENT DETAIL OVERLAY ===== */
  .apaydetail{
    width: calc(100vw - 12px); max-height: 90vh; border-radius: 12px;
  }
  .apaydetail__head{ padding: 10px 12px; }
  .apaydetail__title{ font-size: 16px; }
  .apaydetail__grid{ padding: 10px; grid-template-columns: 1fr; row-gap: 10px; }
  .apaydetail__meta{ padding: 10px; }
  .apaydetail__row{ padding: 10px 2px; gap: 5px; }
  .apaydetail__label{ font-size: 11px; }
  .apaydetail__value{ font-size: 13.5px; }
  .apaydetail__proofbox img{ max-height: 44vh; }
  .apaydetail__foot{
    padding: 10px 12px; gap: 10px; flex-direction: column; align-items: flex-start;
  }
  .apaydetail__cta{ width: 100%; gap: 8px; }
  .apaydetail__btn{ flex: 1; height: 40px; }

  /* ===== STORE MANAGEMENT ===== */
  .astore__grid-2{ grid-template-columns: 1fr; gap: 10px; }
  .astore__card{ padding: 10px; }
  .astore__label{ font-size: 11px; }
  .astore__input, .astore__textarea{ padding: 8px 10px; }

  /* ===== Dashboard (usd-*) ===== */
  #adminContent .usd-grid--stats,
  #adminContent .usd-grid--2{ grid-template-columns: 1fr !important; gap: 12px; }
  #adminContent .usd-card{ padding: 12px; border-radius: 10px; }
  #adminContent .usd-kpi{ font-size: 1.45rem; }
  #adminContent .usd-kpi--big{ font-size: 1.6rem; }

  /* ===== Auth buttons di nav ===== */
  .nav-auth{
    height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 999px;
  }
  .nav-auth + .nav-auth{ margin-left: 6px; }
}

/* ---------- ekstra ketat: ≤320px ---------- */
@media (max-width: 320px){

  /* Kecilkan padding global */
  #adminContent{
    --adm-pad-x: 8px;
    --adm-pad-y: 10px;
  }

  /* Sempitkan typografi */
  #adminContent :is(.aorders__title, .apay__title, .astore__title, .admin-h1){ 
    font-size: 18px;
  }
  #adminContent :is(.aorders__sub, .apay__sub, .astore__sub){ 
    font-size: 12.5px;
  }

  /* Toolbar */
  #adminContent :is(.aprod-toolbar, .aorders__tools, .apay__tools){ gap: 5px; }
  #adminContent :is(.aprod-search, .aorders__search, .apay__search){ padding: .3rem .5rem; }
  #adminContent :is(.aprod-btn--icon, .aprod-ibtn, .aorders__iconbtn, .aorders__ibtn, .apay__iconbtn, .apay__ibtn){
    width: 32px; height: 32px; border-radius: 7px;
  }

  /* Products row padding */
  .admin-products .aprod-tr{ padding: 8px; gap: 6px; }
  .admin-products .aprod-thumb{ width: 52px; height: 52px; }

  /* Orders/Payments row padding */
  .aorders__tr, .apay__tr{ padding: 8px; gap: 6px; }
  .aorders__ibtn, .apay__ibtn{ width: 32px; height: 32px; }

  /* Overlay detail */
  .apaydetail__btn{ height: 38px; }
  .apaydetail__total{ font-size: 18px; }
}

/* =========================================================
   CENTER "AKSI" COLUMN (Produk, Pesanan, Pembayaran)
   ========================================================= */

/* --- Produk (admin-products) --- */
.admin-products .aprod-th.aprod-c5{
  justify-content:center; text-align:center;
}
.admin-products .aprod-c5{
  justify-content:center;
}
.admin-products .aprod-actions{
  justify-content:center;
}

/* --- Pesanan (aorders) --- */
.aorders__th--aksi{
  justify-content:center; text-align:center;
}
.aorders__aksi{
  justify-content:center;
}

/* --- Pembayaran (apay) --- */
.apay__th--aksi{
  justify-content:center; text-align:center;
}
.apay__aksi{
  justify-content:center;
}

/* ---------- Pastikan juga rapi di layar kecil ---------- */
@media (max-width: 560px){
  /* Pada layout mobile kolom aksi sering diubah justify-self,
     paksa ke tengah agar konsisten */
  .aorders__td:nth-child(6),
  .apay__td:nth-child(6){
    justify-self:center !important;
  }
  .aorders__aksi,
  .apay__aksi{
    justify-content:center !important;
  }
  /* Produk mobile (kolom aksi di grid-2) */
  .admin-products .aprod-c5{
    justify-content:center !important;
  }
}


/* ================================
   ADMIN USERS (scoped .ausers*)
   ================================= */
.ausers{ padding:18px 16px; }
.ausers__head{ margin-bottom:12px; }
.ausers__title{ margin:0; font-size:28px; font-weight:900; color:#0f172a; letter-spacing:.3px; }
.ausers__sub{ margin:6px 0 0; color:#94a3b8; font-weight:700; }

/* Card */
.ausers__card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; }
.ausers__cardhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ausers__cardtitle{ font-weight:900; color:#0f172a; }

/* Tools */
.ausers__tools{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ausers__iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.6rem;
  border:1px solid #e5e7eb; background:#f3f4f6; color:#111; cursor:pointer;
  transition: background .15s, border-color .15s, transform .02s;
}
.ausers__iconbtn:hover{ background:#e5e7eb; }
.ausers__iconbtn:active{ transform: translateY(1px); }
.ausers__iconbtn:focus-visible{ outline:2px solid #111; outline-offset:2px; }

.ausers__search{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border:1px solid #e5e7eb; background:#fff;
  border-radius:.6rem; min-width:220px;
}
.ausers__search svg{ color:#6b7280 }
.ausers__search input{
  border:none; outline:none; width:160px; font:inherit; color:#111; background:transparent;
}
.ausers__search input::placeholder{ color:#9ca3af }

.ausers__btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:.625rem; border:1px solid #111;
  background:#111; color:#fff; font-weight:900; letter-spacing:.2px; cursor:pointer;
  transition: background .15s ease, transform .02s ease;
}
.ausers__btn:hover{ background:#000; }
.ausers__btn:active{ transform: translateY(1px); }
.ausers__plus{ width:1.25rem;height:1.25rem; display:grid; place-items:center; border-radius:.4rem; background:#fff1; color:#fff; font-weight:900; }

/* Table */
.ausers__table{ width:100%; overflow:auto; }
.ausers__thead{ position:sticky; top:0; z-index:1; background:#fff; }
.ausers__tr{
  display:grid;
  grid-template-columns: 1.3fr 1.3fr 1fr 1.4fr 1fr; /* username, name, role, phone, aksi */
  gap:10px; align-items:center;
  padding:10px 8px; border-top:1px solid #f1f5f9;
}
.ausers__tr--head{ border-top:none; padding:8px 8px; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.ausers__th{ font-weight:800; color:#111; }
.ausers__th--aksi{ text-align:center; justify-content:center; }
.ausers__td{ color:#0f172a; }

.ausers__badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:900; color:#334155; background:#e2e8f0;
}
.ausers__badge--admin{ color:#0b3a4a; background:#bae6fd; }

.ausers__aksi{ display:flex; justify-content:center; gap:.35rem; }
.ausers__ibtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; border-radius:.55rem;
  border:1px solid #e5e7eb; background:#f8fafc; color:#111;
  cursor:pointer; transition: background .15s, border-color .15s, transform .02s;
}
.ausers__ibtn:hover{ background:#eef2f7; }
.ausers__ibtn:active{ transform: translateY(1px); }

/* Responsive */
@media (max-width: 900px){
  .ausers__tr{ grid-template-columns: 1.1fr 1.1fr .9fr 1.2fr 1fr; }
  .ausers__search{ min-width:0; flex:1; }
}
@media (max-width: 600px){
  .ausers__card{ padding:12px; }
  .ausers__tr{
    grid-template-columns: 1fr 1fr; grid-auto-rows:auto; gap:8px; padding:10px 6px;
  }
  .ausers__td:nth-child(1){ order:1; }                 /* Username */
  .ausers__td:nth-child(2){ order:2; }                 /* Nama */
  .ausers__td:nth-child(3){ order:3; }                 /* Role */
  .ausers__td:nth-child(4){ order:4; }                 /* Phone */
  .ausers__td:nth-child(5){ order:5; justify-self:center; } /* Aksi */
  .ausers__title{ font-size:24px; }
}

/* -------- Overlay Tambah/Edit User -------- */
.auedit-ovl{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.auedit-ovl__backdrop{ position:absolute; inset:0; background:rgba(17,17,17,.55); backdrop-filter: blur(2px); }
.auedit{ position:relative; z-index:1; width:min(680px, 94vw); }
.auedit__box{ background:#fff; border-radius:14px; border:1px solid #e5e7eb; padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.auedit__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.auedit__title{ font-size:20px; font-weight:900; }
.auedit__close{ width:34px; height:34px; border:1px solid #e5e7eb; background:#fff; border-radius:10px; cursor:pointer; }
.auedit__form{ margin-top:6px; }
.auedit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auedit__field{ display:flex; flex-direction:column; gap:6px; }
.auedit__field span{ font-size:12px; font-weight:800; color:#374151; letter-spacing:.2px; }
.auedit__field b{ color:#111; }
.auedit__field input, .auedit__selectwrap select{
  border:1px solid #d1d5db; border-radius:8px; height:36px; padding:0 12px; outline:0;
  font:inherit; color:#111; background:#fff;
}
.auedit__selectwrap{ position:relative; }
.auedit__selectwrap select{ width:100%; appearance:none; -webkit-appearance:none; }
.auedit__selecticon{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#6b7280; pointer-events:none; }
.auedit__field--full{ grid-column:1 / -1; }

.auedit__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.auedit-btn{ height:34px; padding:0 14px; border-radius:999px; font-weight:900; cursor:pointer; border:1px solid #111; background:#111; color:#fff; }
.auedit-btn--ghost{ background:#fff; color:#111; }
.auedit-btn--ghost:hover{ background:#f9fafb; }

/* mobile */
@media (max-width:560px){
  .auedit__grid{ grid-template-columns:1fr; }
}

/* optional: biar tombol clear ikut tema ketika ada stylesheet */
.btn-clear:focus-visible{ outline:2px solid #ef4444; outline-offset:2px; }
.btn-clear:hover{ background:#fff5f5; border-color:#fecaca; }

/* =========================================================
   PATCH TERBARU
   - Cart: tombol Remove All
   - Nav: Category dropdown panel (sticky to trigger)
   ========================================================= */

/* ---------- CART: tombol "Remove All" ---------- */
.cart-overlay .btn-removeall{
  --rm-fg:#b91c1c;            /* red-700 */
  --rm-fg-hover:#991b1b;      /* red-800 */
  --rm-bg:#fff;
  --rm-bg-hover:#fff5f5;
  --rm-bd:#fecaca;            /* red-200 */
  --rm-bd-hover:#fca5a5;      /* red-300 */

  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem;
  border:1px solid var(--rm-bd);
  background:var(--rm-bg);
  color:var(--rm-fg);
  border-radius:.625rem;
  font-weight:900; letter-spacing:.2px;
  cursor:pointer; user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .02s ease, box-shadow .15s ease;
}
.cart-overlay .btn-removeall:hover{
  background:var(--rm-bg-hover);
  color:var(--rm-fg-hover);
  border-color:var(--rm-bd-hover);
}
.cart-overlay .btn-removeall:active{ transform: translateY(1px); }
.cart-overlay .btn-removeall:focus-visible{
  outline:2px solid var(--rm-fg-hover); outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--rm-fg-hover) 35%, transparent);
}
/* ikon trash kecil */
.cart-overlay .btn-removeall::before{
  content:""; width:1rem; height:1rem; display:inline-block; background:currentColor;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 3h6a1 1 0 0 1 1 1v1h4a1 1 0 1 1 0 2h-1.1l-1.2 13a2 2 0 0 1-2 1.8H9.3a2 2 0 0 1-2-1.8L6.1 7H5a1 1 0 1 1 0-2h4V4a1 1 0 0 1 1-1Zm1 2h4V4h-4v1Zm-1.8 2 1.1 12.3c.03.4.37.7.77.7h6.3c.4 0 .74-.3.77-.7L18.3 7H8.2ZM10 10a1 1 0 0 1 2 0v7a1 1 0 1 1-2 0v-7Zm4 0a1 1 0 0 1 2 0v7a1 1 0 1 1-2 0v-7Z'/></svg>") no-repeat center/contain;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 3h6a1 1 0 0 1 1 1v1h4a1 1 0 1 1 0 2h-1.1l-1.2 13a2 2 0 0 1-2 1.8H9.3a2 2 0 0 1-2-1.8L6.1 7H5a1 1 0 1 1 0-2h4V4a1 1 0 0 1 1-1Zm1 2h4V4h-4v1Zm-1.8 2 1.1 12.3c.03.4.37.7.77.7h6.3c.4 0 .74-.3.77-.7L18.3 7H8.2ZM10 10a1 1 0 0 1 2 0v7a1 1 0 1 1-2 0v-7Zm4 0a1 1 0 0 1 2 0v7a1 1 0 1 1-2 0v-7Z'/></svg>") no-repeat center/contain;
}
/* tata letak di footer cart: tombol ini di kiri, checkout di kanan */
.cart-summary .cart-footer-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
}
.cart-summary .cart-footer-actions .btn-removeall{ margin-right:auto; }

@media (max-width:560px){
  .cart-summary .cart-footer-actions{ flex-wrap:wrap; gap:.6rem; }
  .cart-overlay .btn-removeall{
    width:100%; justify-content:center; order:-1; /* muncul paling atas pada footer mobile */
  }
}

/* ---------- NAV: CATEGORY DROPDOWN (nempel ke trigger) ---------- */
/* container panel (diposisikan via JS agar menempel tombol saat scroll) */
.nav .cat-dd{
  position:fixed; /* akan diposisikan JS: top/left/width mengikuti tombol */
  z-index:1200;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  padding:8px;
  display:none;
}
.nav .cat-dd.is-open{ display:block; }

.nav .cat-dd__list{
  list-style:none; margin:0; padding:4px;
  display:grid; gap:4px; min-width:180px;
}
.nav .cat-dd__item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-radius:10px;
  color:#111; text-decoration:none; font-weight:800; letter-spacing:.2px;
  cursor:pointer;
}
.nav .cat-dd__item:hover{ background:#f3f4f6; }
.nav .cat-dd__item.is-active{
  background:#111; color:#fff;
}

/* indikator kecil di tombol aktif */
.nav .cat-trigger.is-open{
  background:#111 !important; color:#fff !important; border-color:#111 !important;
}

/* mobile: dropdown lebar penuh nav */
@media (max-width:980px){
  .nav .cat-dd{
    position:absolute; left:0 !important; right:0 !important; top:100% !important;
    width:auto !important; margin-top:6px;
  }
}


/* ===== ADMIN ORDER DETAIL (SCOPED .aod*) ===== */
.aod-ovl{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; font-family:inherit; }
.aod-ovl__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); animation:aodFade .18s ease; }

.aod{
  position:relative; width:min(980px, calc(100vw - 24px)); max-height:min(86vh, 880px);
  background:#fff; color:#0f172a; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 12px 40px rgba(2,6,23,.25); display:flex; flex-direction:column; overflow:hidden;
  animation:aodPop .18s ease;
}
.aod__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eef2f7; background:#f8fafc; }
.aod__title{ margin:0; font-size:18px; font-weight:900; letter-spacing:.2px; }
.aod__close{ width:36px;height:36px; display:grid;place-items:center; border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer; font-size:20px; color:#111827; }
.aod__close:hover{ background:#f3f4f6; }
.aod__close:active{ transform:translateY(1px); }

.aod__grid{ display:grid; grid-template-columns:1.15fr .85fr; column-gap:20px; padding:18px; overflow:auto; }
.aod__meta{ background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:14px; }
.aod__row{ display:flex; flex-direction:column; gap:6px; padding:12px 2px; }
.aod__row + .aod__row{ border-top:1px dashed #eef2f7; margin-top:8px; padding-top:12px; }

.aod__label{ color:#64748b; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
.aod__value{ color:#0f172a; font-size:14px; font-weight:900; }
.aod__name{ font-weight:900; }
.aod__muted{ color:#94a3b8; font-weight:600; font-size:12px; margin-top:-2px; }
.aod__badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:900; color:#fff; background:#a3a3a3; }
.aod__total{ font-size:20px; font-weight:900; letter-spacing:.2px; }

.aod__foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px; border-top:1px solid #eef2f7; background:#fff; }
.aod__totalwrap{ display:flex; align-items:baseline; gap:10px; }
.aod__totallabel{ color:#64748b; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
.aod__cta{ display:flex; gap:10px; }
.aod__btn{ min-width:120px; height:40px; padding:0 14px; border-radius:10px; border:1px solid #e5e7eb; font-weight:900; font-size:14px; cursor:pointer; }
.aod__btn--ok{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.aod__btn--ok:hover{ background:#0284c7; border-color:#0284c7; }

@keyframes aodFade{ from{opacity:0} to{opacity:1} }
@keyframes aodPop{ from{ transform:translateY(6px) scale(.99); opacity:.96 } to{ transform:none; opacity:1 } }

@media (max-width:900px){
  .aod__grid{ grid-template-columns:1fr; row-gap:14px; }
  .aod__total{ font-size:18px; }
}
@media (max-width:560px){
  .aod{ width:calc(100vw - 16px); max-height:92vh; border-radius:14px; }
  .aod__head{ padding:12px 14px; }
  .aod__grid{ padding:12px; }
  .aod__meta{ padding:12px; }
  .aod__btn{ height:42px; }
}

.c-map iframe{ display:block; width:100%; height:360px; }
@media (min-width: 720px){ .c-map iframe{ height:420px; } }



/* Footer bottom alignment fix */
.madein__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;   /* <- pastikan rata atas */
  gap:16px;
}

.madein__left{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.madein__copy,
.madein__support{
  margin:0;                 /* hilangkan jarak ekstra */
}

.madein__copy{ margin-bottom:2px; }   /* jarak kecil antar baris */