*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,sans-serif}
body{background-color:#061a33;background-size:cover;background-attachment:fixed;min-height:100vh;color:#fff;overflow-x:hidden;transition:background 0s}
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bubble{position:absolute;bottom:-100px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),rgba(255,255,255,.05));border-radius:50%;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}10%{opacity:.8}100%{transform:translateY(-110vh) translateX(50px) scale(1.2);opacity:0}}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:15px 30px;background:rgba(0,31,63,.75);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;border-bottom:2px solid rgba(127,219,255,.3);animation:slideDown .6s ease}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.nav-left{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-img{width:45px;height:45px;border-radius:50%;background:#fff;padding:4px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.brand{font-size:1.5rem;font-weight:bold;color:#7FDBFF;text-shadow:0 0 15px #7FDBFF}
.nav-menu{display:flex;list-style:none;gap:5px}
.nav-menu li a{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;font-size:.9rem;transition:all .3s;border:1.5px solid transparent}
.nav-menu li a:hover,.nav-menu li a.active{background:rgba(127,219,255,.2);border-color:#7FDBFF;box-shadow:0 0 15px rgba(127,219,255,.5);transform:translateY(-2px)}
.lang-switch{display:flex;gap:5px}
.lang-btn{background:transparent;border:1.5px solid #7FDBFF;color:#fff;padding:5px 10px;border-radius:8px;cursor:pointer;transition:.3s}
.lang-btn:hover{background:#7FDBFF;color:#001f3f}
.hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;z-index:1}
.hero-content h1{font-size:3rem;margin-bottom:20px;text-shadow:0 0 20px rgba(127,219,255,.8);animation:fadeUp 1s ease}
.hero-content p{font-size:1.2rem;margin-bottom:30px;animation:fadeUp 1.2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.btn-primary{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#0074D9,#7FDBFF);color:#001f3f;font-weight:bold;text-decoration:none;border-radius:30px;border:none;cursor:pointer;transition:.3s;box-shadow:0 5px 20px rgba(127,219,255,.5)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(127,219,255,.8)}
.btn-danger{background:linear-gradient(135deg,#FF4136,#FF725C);color:#fff}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding:40px;position:relative;z-index:1}
.card{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1.5px solid rgba(127,219,255,.4);border-radius:20px;padding:25px;text-align:center;transition:.3s}
.card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(127,219,255,.4)}
.page-title{text-align:center;padding:30px 20px 20px;font-size:2.2rem;color:#7FDBFF;text-shadow:0 0 20px rgba(127,219,255,.6);position:relative;z-index:1}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;padding:30px;position:relative;z-index:1}
.product-card{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1.5px solid rgba(127,219,255,.3);border-radius:18px;overflow:hidden;cursor:pointer;transition:.3s;animation:fadeUp .5s ease}
.product-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(127,219,255,.5)}
.product-img{width:100%;height:180px;object-fit:cover;background:rgba(0,0,0,.2)}
.product-info{padding:15px}
.product-info h3{color:var(--color-product-name,#7FDBFF);margin-bottom:8px}
.product-info p{font-size:.85rem;margin:4px 0;opacity:.9}
.stock-info{color:var(--color-stock-min,#FFFFFF)}
.min-order-info{color:var(--color-stock-min,#FFFFFF)}
.price-tag{color:var(--color-price,#FFDC00);font-weight:bold;font-size:1.1rem}
.click-to-order{color:var(--color-price,#FFDC00)}
.skeleton{height:320px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.15),rgba(255,255,255,.05));background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:18px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.modal{display:none;position:fixed;inset:0;background:rgba(0,31,63,.85);backdrop-filter:blur(8px);z-index:200;align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content{background:linear-gradient(135deg,#003366,#005599);border:2px solid #7FDBFF;border-radius:20px;padding:25px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 50px rgba(127,219,255,.5);animation:scaleIn .3s}
@keyframes scaleIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.close{position:absolute;top:10px;right:18px;font-size:2rem;cursor:pointer;color:#7FDBFF}
.modal-img{width:100%;height:220px;object-fit:cover;border-radius:12px;margin-bottom:15px}
.modal-content input,.modal-content textarea,.modal-content select{width:100%;padding:10px;border-radius:10px;border:1.5px solid #7FDBFF;background:rgba(255,255,255,.1);color:#fff;margin:10px 0;font-size:1rem}
.total{font-size:1.3rem;color:#FFDC00;margin:15px 0}
.modal-actions{display:flex;gap:10px;margin-top:15px}
.btn-like{flex:1;padding:14px;border-radius:30px;border:1.5px solid #FF4136;background:rgba(255,65,54,.2);color:#fff;cursor:pointer;font-weight:bold;transition:.3s}
.btn-like:hover{background:#FF4136}
.float-icon{position:fixed;width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 25px rgba(0,0,0,.4);z-index:150;transition:.3s;animation:pulse 2s infinite;bottom:25px}
.float-icon img{width:38px;height:38px}
.float-icon.wa{right:25px}
.float-icon.tt{right:25px;bottom:100px}
.float-icon:hover{transform:scale(1.15)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;position:relative;z-index:1}
.admin-tabs button{padding:12px 22px;background:rgba(127,219,255,.15);border:1.5px solid #7FDBFF;color:#fff;border-radius:12px;cursor:pointer;font-weight:bold;transition:.3s}
.admin-tabs button:hover,.admin-tabs button.active{background:#7FDBFF;color:#001f3f;transform:translateY(-2px)}
table{width:100%;border-collapse:collapse;margin-top:15px;background:rgba(0,0,0,.2);border-radius:10px;overflow:hidden}
table th{background:rgba(127,219,255,.25);padding:12px;text-align:left}
table td{padding:10px 12px;border-top:1px solid rgba(127,219,255,.15)}
table tr:hover{background:rgba(127,219,255,.08)}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:6px;color:#7FDBFF;font-weight:bold}
.form-group input,.form-group textarea{width:100%;padding:10px;border-radius:10px;border:1.5px solid #7FDBFF;background:rgba(255,255,255,.1);color:#fff;font-size:1rem}
@media(max-width:768px){.navbar{flex-direction:column;gap:10px;padding:10px}.nav-menu{flex-wrap:wrap;justify-content:center}.hero-content h1{font-size:2rem}}

/* Reseller catalog badge */
.reseller-badge{display:inline-block;padding:3px 10px;background:#FF851B;color:#001f3f;border-radius:8px;font-size:.75rem;font-weight:bold;margin-top:6px}

/* ============ CART ============ */
.cart-btn{position:relative;display:flex;align-items:center;gap:6px;background:rgba(127,219,255,.15);border:1.5px solid #7FDBFF;color:#fff;padding:8px 14px;border-radius:10px;cursor:pointer;font-size:.9rem;transition:.3s}
.cart-btn:hover{background:rgba(127,219,255,.3);transform:translateY(-2px)}
.cart-badge{position:absolute;top:-8px;right:-8px;background:#FF4136;color:#fff;border-radius:50%;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:bold;padding:0 4px}

.cart-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:92vw;height:100vh;background:linear-gradient(180deg,#001f3f,#003366);border-left:2px solid #7FDBFF;z-index:300;transition:right .35s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.5)}
.cart-drawer.open{right:0}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1.5px solid rgba(127,219,255,.3)}
.cart-header h2{color:#7FDBFF}
.cart-body{flex:1;overflow-y:auto;padding:15px}
.cart-item{display:flex;gap:12px;padding:12px;background:rgba(255,255,255,.07);border:1.5px solid rgba(127,219,255,.2);border-radius:12px;margin-bottom:10px;align-items:center}
.cart-item-img{width:60px;height:60px;object-fit:cover;border-radius:8px;background:#001f3f}
.cart-item-info{flex:1;min-width:0}
.cart-item-info h4{color:#7FDBFF;margin-bottom:4px;font-size:.95rem}
.cart-item-info p{font-size:.8rem;opacity:.85}
.cart-item-qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.cart-item-qty button{width:26px;height:26px;border-radius:6px;border:1px solid #7FDBFF;background:rgba(127,219,255,.15);color:#fff;cursor:pointer;font-weight:bold}
.cart-item-qty button:hover{background:#7FDBFF;color:#001f3f}
.cart-item-qty span{min-width:32px;text-align:center;font-weight:bold}
.cart-item-del{background:transparent;border:none;color:#FF4136;font-size:1.3rem;cursor:pointer;padding:4px}
.cart-item-del:hover{color:#ff725c}
.cart-footer{padding:20px;border-top:1.5px solid rgba(127,219,255,.3);background:rgba(0,0,0,.2)}
.cart-footer .total-line{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.95rem}
.cart-footer .total-line.big{font-size:1.2rem;font-weight:bold;color:#FFDC00;margin:12px 0}
.cart-empty{text-align:center;padding:40px 20px;opacity:.6}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:290;opacity:0;pointer-events:none;transition:.3s}
.cart-overlay.show{opacity:1;pointer-events:auto}

@media(max-width:600px){.cart-drawer{width:100%}}

/* Feature Icons — outline biru */
.feature-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:16px;
  background:rgba(127,219,255,.12);
  border:1.5px solid rgba(127,219,255,.4);
  color:#7FDBFF;
}
.feature-icon svg{
  width:36px;
  height:36px;
  color:#7FDBFF;
  filter:drop-shadow(0 0 6px rgba(127,219,255,.5));
}
.card:hover .feature-icon{
  background:rgba(127,219,255,.2);
  border-color:#7FDBFF;
  box-shadow:0 0 20px rgba(127,219,255,.4);
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 1024px){
  /* Navbar — compact & scrollable */
  .navbar{
    flex-wrap:wrap;
    padding:10px 15px;
    gap:8px;
  }
  .nav-left{ flex:1 1 auto; }
  .brand{ font-size:1.15rem; }
  .logo-img{ width:36px; height:36px; }
  
  .nav-menu{
    order:3;
    flex:1 1 100%;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding:4px 0 2px;
    gap:2px;
    scrollbar-width:none;
  }
  .nav-menu::-webkit-scrollbar{ display:none; }
  .nav-menu li a{
    padding:8px 12px;
    font-size:.82rem;
    white-space:nowrap;
    flex-shrink:0;
  }
  
  .lang-switch,
  .cart-btn{
    padding:6px 10px;
    font-size:.8rem;
  }
  .cart-btn span:not(.cart-badge){ display:none; } /* sembunyikan label "Keranjang" */
  .lang-btn{ padding:4px 8px; font-size:.8rem; }
  
  /* Hero */
  .hero{ min-height:auto; padding:50px 15px 30px; }
  .hero-content h1{ font-size:1.6rem; line-height:1.25; margin-bottom:12px; }
  .hero-content p{ font-size:.95rem; margin-bottom:22px; }
  .btn-primary{ padding:12px 24px; font-size:.9rem; }
  
  /* Features */
  .features{ padding:15px; gap:12px; grid-template-columns:1fr; }
  .card{ padding:18px 15px; }
  .feature-icon{ width:52px; height:52px; margin-bottom:12px; }
  .feature-icon svg{ width:28px; height:28px; }
  .card h3{ font-size:1.05rem; }
  .card p{ font-size:.85rem; }
  
  /* Product Grid */
  .product-grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:12px;
    padding:15px;
  }
  .product-img{ height:140px; }
  .product-info{ padding:10px; }
  .product-info h3{ font-size:.92rem; margin-bottom:5px; }
  .product-info p{ font-size:.75rem; margin:2px 0; }
  .price-tag{ font-size:.95rem; }
  
  /* Page title */
  .page-title{ font-size:1.5rem; padding:20px 15px 12px; }
  
  /* Modal — full screen di HP */
  .modal{ padding:0; }
  .modal-content{
    border-radius:0;
    max-width:100%;
    width:100%;
    min-height:100vh;
    max-height:100vh;
    padding:20px 15px;
  }
  .modal-img{ height:180px; }
  .modal-content h2{ font-size:1.3rem; }
  
  /* Cart drawer — full screen */
  .cart-drawer{
    width:100%;
    max-width:100%;
    right:-100%;
  }
  .cart-header h2{ font-size:1.1rem; }
  .cart-item-img{ width:52px; height:52px; }
  .cart-item-info h4{ font-size:.9rem; }
  .cart-item-info p{ font-size:.75rem; }
  
  /* Floating icons — lebih kecil & posisi pas */
  .float-icon{
    width:50px;
    height:50px;
    bottom:20px;
  }
  .float-icon img{ width:30px; height:30px; }
  .float-icon.wa{ right:15px; }
  .float-icon.tt{ right:15px; bottom:80px; }
  
  /* Tables — bisa scroll horizontal */
  .admin-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .admin-tabs::-webkit-scrollbar{ display:none; }
  .admin-tabs button{
    padding:10px 16px;
    font-size:.85rem;
    white-space:nowrap;
    flex-shrink:0;
  }
  
  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  table th,
  table td{
    padding:8px 10px;
    font-size:.8rem;
  }
  
  /* Status page mobile */
  .status-card{
    margin:20px auto;
    padding:0 15px;
  }
  .status-box{ padding:20px 15px; }
  .status-icon{ font-size:3rem; margin-bottom:10px; }
  .status-title{ font-size:1.3rem; }
  .status-desc{ font-size:.9rem; }
  .order-box{ padding:15px; }
  .order-row{ font-size:.82rem; padding:6px 0; }
  
  /* Form */
  .form-group input,
  .form-group textarea,
  .modal-content input{
    padding:10px;
    font-size:16px; /* prevent zoom on iOS */
  }
}

/* Extra small HP */
@media (max-width: 480px){
  .hero-content h1{ font-size:1.35rem; }
  .hero-content p{ font-size:.88rem; }
  .product-grid{ grid-template-columns:1fr 1fr; padding:12px; gap:10px; }
  .product-img{ height:120px; }
  .card{ padding:15px 12px; }
  .btn-primary{ padding:11px 20px; font-size:.85rem; }
  .float-icon{ width:46px; height:46px; }
  .float-icon img{ width:28px; height:28px; }
}

/* Navbar mobile scroll indicator */
@media (max-width: 1024px){
  .nav-menu::after{
    content:'';
    display:block;
    width:1px;
    flex-shrink:0;
  }
}

/* Touch friendly */
button, a, .btn-primary, .btn-like, .btn-danger,
.cart-item-qty button, .nav-menu li a{
  -webkit-tap-highlight-color:rgba(127,219,255,.2);
  touch-action:manipulation;
}
button{ user-select:none; -webkit-user-select:none; }
html{ scroll-behavior:smooth; }

@media (max-width: 1024px){
  body{ padding-bottom:80px; }
}

/* ============================================
   ROUNDED BUTTONS + CLICK ANIMATION
   ============================================ */

/* Base — semua button rounded */
button,
.btn-primary,
.btn-like,
.btn-danger,
.cart-item-del,
.cart-item-qty button,
.admin-tabs button{
  border-radius:24px !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

/* Animasi saat ditekan (active state) */
button:active,
.btn-primary:active,
.btn-like:active,
.btn-danger:active,
.cart-item-qty button:active{
  transform:scale(0.94);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Hover — naik dikit */
button:hover,
.btn-primary:hover,
.btn-like:hover,
.btn-danger:hover{
  transform:translateY(-2px);
}

/* Ripple effect saat klik */
button::after,
.btn-primary::after,
.btn-like::after,
.btn-danger::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.3) 10%, transparent 70%);
  opacity:0;
  transform:scale(0);
  border-radius:inherit;
  pointer-events:none;
  transition:transform .4s ease, opacity .4s ease;
}

button:active::after,
.btn-primary:active::after,
.btn-like:active::after,
.btn-danger:active::after{
  opacity:1;
  transform:scale(2);
  transition:transform 0s, opacity .3s ease;
}

/* Tombol Hapus khusus — merah rounded */
.btn-danger{
  border-radius:24px !important;
  padding:8px 16px !important;
  font-weight:600;
  letter-spacing:.3px;
}

/* Cart qty button kecil — rounded */
.cart-item-qty button{
  border-radius:8px !important;
  width:28px;
  height:28px;
}

/* Tombol close (X) di modal */
.modal-content .close,
.cart-header .close{
  border-radius:50% !important;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, transform .15s;
}
.modal-content .close:active,
.cart-header .close:active{
  background:rgba(255,65,54,.3);
  transform:scale(0.9);
}

/* Tombol cart drawer (Checkout) */
.cart-footer button{
  border-radius:24px !important;
  padding:14px 24px !important;
}

/* Tombol submit form */
#custSubmit,
#custCancel{
  border-radius:24px !important;
}

/* Admin tabs */
.admin-tabs button{
  border-radius:24px !important;
}

/* Lang buttons */
.lang-btn{
  border-radius:50% !important;
  width:36px;
  height:36px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:bold;
  transition:transform .15s, background .2s;
}
.lang-btn:active{
  transform:scale(0.9);
}

@keyframes rippleAnim{
  from{ transform:scale(0); opacity:.7; }
  to{ transform:scale(2.5); opacity:0; }
}

/* ============================================
   FIX NAVBAR MOBILE — menu scroll penuh
   ============================================ */
@media (max-width: 1024px){
  .navbar{
    padding:8px 0 !important;
  }
  
  .nav-left,
  .lang-switch,
  .cart-btn{
    padding-left:12px;
    padding-right:12px;
  }
  
  .nav-menu{
    padding-left:12px !important;
    padding-right:20px !important;   /* extra padding kanan */
    margin-right:0 !important;
    scroll-padding-right:20px;
  }
  
  .nav-menu li:last-child{
    padding-right:12px;              /* item terakhir punya ruang */
  }
  
  .nav-menu li:last-child a{
    margin-right:8px;
  }
  
  /* Pastikan nav-menu punya lebar penuh */
  .nav-menu{
    width:100%;
    box-sizing:border-box;
  }
}

/* Extra small HP */
@media (max-width: 480px){
  .nav-menu li a{
    padding:8px 10px !important;
    font-size:.78rem !important;
  }
  
  .nav-menu{
    padding-right:24px !important;
  }
}

/* Badge tipe order di tabel admin */
table td span[style*="RESELLER"],
table td span[style*="RETAIL"]{
  display:inline-block;
  font-weight:600;
  letter-spacing:.3px;
}

@keyframes pulseDot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(1.3); }
}

/* ============================================
   NAV ICONS + SEARCH ICON — Outline Biru
   ============================================ */
.nav-menu li a .nav-icon{
  display:inline-block;
  width:16px;
  height:16px;
  color:#7FDBFF;
  stroke:#7FDBFF;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
  margin-right:5px;
  margin-bottom:2px;
  transition:transform .2s ease;
}
.nav-menu li a:hover .nav-icon,
.nav-menu li a.active .nav-icon{
  transform:scale(1.15);
  filter:drop-shadow(0 0 4px rgba(127,219,255,.6));
}

.cart-btn .cart-icon{
  display:inline-block;
  width:18px;
  height:18px;
  color:#7FDBFF;
  stroke:#7FDBFF;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
  margin-right:5px;
}

.search-wrapper .search-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:#7FDBFF;
  stroke:#7FDBFF;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
  opacity:.85;
}

/* ===== MOBILE — compact navbar ===== */
@media (max-width: 1024px){
  .navbar{
    display:flex !important;
    flex-wrap:wrap !important;
    padding:8px 10px !important;
    gap:6px !important;
  }
  .nav-left{ flex:1 1 auto !important; min-width:0 !important; }
  .brand{ font-size:1.1rem !important; }
  .logo-img{ width:32px !important; height:32px !important; }

  .nav-menu{
    flex:1 1 100% !important;
    order:10 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:6px 2px 4px !important;
    gap:4px !important;
    width:100% !important;
  }
  .nav-menu::-webkit-scrollbar{ display:none !important; }
  .nav-menu li{ flex-shrink:0 !important; }
  .nav-menu li a{
    display:flex !important;
    align-items:center !important;
    padding:8px 12px !important;
    font-size:.8rem !important;
    white-space:nowrap !important;
    border-radius:16px !important;
  }
  .nav-menu li a .nav-icon{
    width:14px !important;
    height:14px !important;
    margin-right:4px !important;
  }
  .nav-menu::after{
    content:'' !important;
    display:block !important;
    width:16px !important;
    flex-shrink:0 !important;
  }
  .cart-btn{ padding:6px 10px !important; font-size:.8rem !important; flex-shrink:0 !important; }
  .lang-btn{ width:32px !important; height:32px !important; font-size:.75rem !important; }
}

@media (max-width: 480px){
  .nav-menu li a{ padding:7px 10px !important; font-size:.75rem !important; }
  .nav-menu li a .nav-icon{ width:13px !important; height:13px !important; }
}

/* Hamburger button */
.hamburger-btn{
  display:none;
  background:transparent;
  border:1.5px solid #7FDBFF;
  border-radius:12px;
  padding:6px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hamburger-btn svg{
  width:22px;
  height:22px;
  color:#7FDBFF;
  stroke:#7FDBFF;
}
.mobile-menu,
.mobile-menu-overlay{
  display:none;
}
.nav-auth-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:24px;
  background:rgba(127,219,255,.12);
  border:1.5px solid rgba(127,219,255,.35);
  color:#7FDBFF;
  text-decoration:none;
  font-size:.85rem;
  font-weight:500;
  flex-shrink:0;
}
.nav-auth-btn .auth-icon{
  width:18px;
  height:18px;
  color:#7FDBFF;
  stroke:#7FDBFF;
}

/* ============================================
   FIX OVERRIDE — Hamburger display
   (paling akhir, biar override semua)
   ============================================ */
@media (max-width: 1024px){
  .navbar .hamburger-btn,
  .hamburger-btn{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .navbar .nav-menu{
    display:none !important;
  }
  .navbar .lang-switch{
    display:none !important;
  }
  .navbar .nav-auth-btn .auth-label{
    display:none !important;
  }
  .navbar .cart-btn span:not(.cart-badge):not(.cart-icon){
    display:none !important;
  }
  .mobile-menu{
    display:flex !important;
  }
  .mobile-menu-overlay{
    display:block !important;
  }
}

/* Desktop — sembunyikan hamburger */
@media (min-width: 1025px){
  .hamburger-btn{
    display:none !important;
  }
  .mobile-menu,
  .mobile-menu-overlay{
    display:none !important;
  }
}

/* ============================================
   FIX HAMBURGER CLICKABLE
   ============================================ */
.hamburger-btn{
  position:relative;
  z-index:1000 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(127,219,255,.3);
}
.hamburger-btn svg{
  pointer-events:none;
}

/* Pastikan overlay tertutup saat menu belum dibuka */
.mobile-menu-overlay:not(.show){
  pointer-events:none !important;
  z-index:-1 !important;
}
.mobile-menu-overlay.show{
  pointer-events:auto !important;
  z-index:998 !important;
}

/* Drawer tidak boleh cover hamburger saat closed */
.mobile-menu:not(.open){
  pointer-events:none !important;
}
.mobile-menu.open{
  pointer-events:auto !important;
}

/* ============================================
   NAV-RIGHT — Container tombol kanan
   ============================================ */
.nav-right{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
}

/* ===== MOBILE ===== */
@media (max-width: 1024px){
  .navbar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:8px 12px !important;
    gap:8px !important;
  }
  
  .nav-left{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-shrink:0 !important;
  }
  .brand{ font-size:1rem !important; white-space:nowrap !important; }
  .logo-img{ width:30px !important; height:30px !important; }
  
  /* Hide nav-menu & lang-switch (nav) */
  .nav-menu{ display:none !important; }
  .navbar .nav-right .lang-switch{ display:none !important; }
  
  /* Nav-right — 1 baris horizontal */
  .nav-right{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:6px !important;
    flex-shrink:0 !important;
    margin-left:auto !important;
  }
  
  /* Tombol icon-only */
  .nav-auth-btn,
  .cart-btn,
  .hamburger-btn{
    padding:6px !important;
    min-width:36px !important;
    min-height:36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }
  
  .nav-auth-btn .auth-label{ display:none !important; }
  .cart-btn span:not(.cart-badge):not(.cart-icon){ display:none !important; }
  
  .nav-auth-btn .auth-icon,
  .cart-btn .cart-icon,
  .hamburger-btn svg{
    width:20px !important;
    height:20px !important;
    margin:0 !important;
  }
  
  .hamburger-btn{ display:flex !important; }
}

/* Desktop — reset */
@media (min-width: 1025px){
  .hamburger-btn{ display:none !important; }
  .mobile-menu,
  .mobile-menu-overlay{ display:none !important; }
}

.mobile-menu{
  position:fixed !important;
  top:0 !important;
  right:-100% !important;
  width:300px !important;
  max-width:85vw !important;
  height:100vh !important;
  background:linear-gradient(180deg,#001f3f,#003366) !important;
  border-left:2px solid #7FDBFF !important;
  z-index:9999 !important;
  display:flex !important;
  flex-direction:column !important;
  transition:right .3s ease !important;
  box-shadow:-10px 0 30px rgba(0,0,0,.5) !important;
  overflow-y:auto !important;
}
.mobile-menu.open{
  right:0 !important;
}
.mobile-menu-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.6) !important;
  z-index:9998 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .3s !important;
}
.mobile-menu-overlay.show{
  opacity:1 !important;
  pointer-events:auto !important;
}
@media (min-width: 1025px){
  .mobile-menu,
  .mobile-menu-overlay{
    display:none !important;
  }
}
@media (max-width: 1024px){
  .mobile-menu{ display:flex !important; }
  .mobile-menu-overlay{ display:block !important; }
}

/* ============================================
   FORCE SVG SIZE DI MOBILE MENU
   ============================================ */
.mobile-menu svg,
.mobile-menu-nav svg,
.mobile-menu-nav a svg,
aside.mobile-menu svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  color:#7FDBFF !important;
  stroke:#7FDBFF !important;
  fill:none !important;
  stroke-width:1.8 !important;
  flex-shrink:0 !important;
}

/* Link di drawer */
.mobile-menu-nav a{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 18px !important;
  margin-bottom:4px !important;
  border-radius:14px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:1rem !important;
  font-weight:500 !important;
  overflow:hidden !important;
}

.mobile-menu-nav a span{
  font-size:1rem !important;
  line-height:1.4 !important;
}

/* Header drawer */
.mobile-menu-header svg,
.mobile-menu-close svg{
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
}

/* ============================================
   ESTETIK DRAWER — Polish
   ============================================ */
.mobile-menu{
  background:linear-gradient(180deg,#001a33 0%,#001f3f 40%,#003366 100%) !important;
  border-left:1.5px solid rgba(127,219,255,.4) !important;
  box-shadow:-20px 0 50px rgba(0,0,0,.7), -1px 0 0 rgba(127,219,255,.2) !important;
  padding:0 !important;
}

/* Header drawer — fix overlap */
.mobile-menu-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:24px 22px 20px !important;
  border-bottom:1px solid rgba(127,219,255,.15) !important;
  background:rgba(0,0,0,.15);
  position:relative;
}
.mobile-menu-header::after{
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(127,219,255,.5),transparent);
}
.mobile-menu-header .brand{
  font-size:1.4rem !important;
  font-weight:600 !important;
  color:#7FDBFF !important;
  letter-spacing:.5px;
  text-shadow:0 0 15px rgba(127,219,255,.5);
  margin:0 !important;
}

/* Tombol close — lingkaran */
.mobile-menu-close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  background:rgba(255,65,54,.15) !important;
  border:1.5px solid rgba(255,65,54,.5) !important;
  padding:0 !important;
  transition:all .2s ease;
}
.mobile-menu-close:hover,
.mobile-menu-close:active{
  background:rgba(255,65,54,.35) !important;
  transform:rotate(90deg);
}
.mobile-menu-close svg{
  width:18px !important;
  height:18px !important;
  color:#FF4136 !important;
  stroke:#FF4136 !important;
}

/* Nav list */
.mobile-menu-nav{
  flex:1 !important;
  overflow-y:auto !important;
  padding:16px 12px 20px !important;
}
.mobile-menu-nav a{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 16px !important;
  margin-bottom:4px !important;
  border-radius:14px !important;
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  font-size:.98rem !important;
  font-weight:500 !important;
  letter-spacing:.3px;
  transition:all .2s ease;
  position:relative;
  overflow:hidden;
}
.mobile-menu-nav a::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;
  height:60%;
  background:linear-gradient(180deg,#7FDBFF,#00aaff);
  border-radius:2px;
  transition:transform .2s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active{
  background:rgba(127,219,255,.12) !important;
  color:#7FDBFF !important;
  transform:translateX(4px);
}
.mobile-menu-nav a:hover::before,
.mobile-menu-nav a:active::before{
  transform:translateY(-50%) scaleY(1);
}
.mobile-menu-nav a svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  color:#7FDBFF !important;
  stroke:#7FDBFF !important;
  flex-shrink:0 !important;
  transition:transform .2s ease;
}
.mobile-menu-nav a:hover svg{
  transform:scale(1.1);
  filter:drop-shadow(0 0 6px rgba(127,219,255,.7));
}

/* Language section — di bawah, styling rapi */
.mobile-menu-lang{
  display:flex !important;
  gap:10px !important;
  padding:18px 22px 24px !important;
  border-top:1px solid rgba(127,219,255,.15) !important;
  background:rgba(0,0,0,.15);
}
.mobile-menu-lang .lang-btn{
  flex:1 !important;
  padding:12px !important;
  height:auto !important;
  width:auto !important;
  border-radius:12px !important;
  font-size:.9rem !important;
  font-weight:600 !important;
  letter-spacing:.5px;
  background:rgba(127,219,255,.1) !important;
  border:1.5px solid rgba(127,219,255,.4) !important;
  color:#7FDBFF !important;
  transition:all .2s ease;
}
.mobile-menu-lang .lang-btn:hover,
.mobile-menu-lang .lang-btn.active{
  background:rgba(127,219,255,.3) !important;
  border-color:#7FDBFF !important;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(127,219,255,.3);
}

/* Scrollbar custom */
.mobile-menu-nav::-webkit-scrollbar{
  width:4px;
}
.mobile-menu-nav::-webkit-scrollbar-track{
  background:transparent;
}
.mobile-menu-nav::-webkit-scrollbar-thumb{
  background:rgba(127,219,255,.3);
  border-radius:2px;
}

/* ============================================
   DRAWER — Compact & Proporsional
   ============================================ */
.mobile-menu{
  width:280px !important;
  max-width:80vw !important;
}

/* Header compact */
.mobile-menu-header{
  padding:16px 18px !important;
}
.mobile-menu-header .brand{
  font-size:1.15rem !important;
}
.mobile-menu-close{
  width:32px !important;
  height:32px !important;
}
.mobile-menu-close svg{
  width:16px !important;
  height:16px !important;
}

/* Nav list — compact */
.mobile-menu-nav{
  padding:12px 8px !important;
}
.mobile-menu-nav a{
  padding:10px 12px !important;
  margin-bottom:2px !important;
  gap:12px !important;
  border-radius:10px !important;
  font-size:.9rem !important;
}

/* Icon LEBIH KECIL */
.mobile-menu-nav a svg,
.mobile-menu svg,
aside.mobile-menu svg{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  max-height:18px !important;
}

/* Language buttons compact */
.mobile-menu-lang{
  padding:12px 16px 16px !important;
  gap:8px !important;
}
.mobile-menu-lang .lang-btn{
  padding:8px !important;
  font-size:.8rem !important;
  border-radius:10px !important;
}

/* ============================================
   DRAWER COMPACT — Padding Minimal
   ============================================ */

/* Drawer container */
.mobile-menu{
  width:260px !important;
  max-width:78vw !important;
}

/* Header — compact */
.mobile-menu-header{
  padding:12px 14px !important;
  min-height:auto !important;
}
.mobile-menu-header .brand{
  font-size:1rem !important;
  letter-spacing:.3px !important;
}
.mobile-menu-close{
  width:28px !important;
  height:28px !important;
}
.mobile-menu-close svg{
  width:14px !important;
  height:14px !important;
}

/* Nav list — minimal padding */
.mobile-menu-nav{
  padding:6px 6px !important;
}
.mobile-menu-nav a{
  padding:8px 10px !important;
  margin-bottom:1px !important;
  gap:10px !important;
  border-radius:8px !important;
  font-size:.85rem !important;
  font-weight:500 !important;
}

/* Icon KECIL */
.mobile-menu-nav a svg,
.mobile-menu svg,
aside.mobile-menu svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  max-height:16px !important;
  stroke-width:2 !important;
}

/* Language buttons compact */
.mobile-menu-lang{
  padding:8px 12px 12px !important;
  gap:6px !important;
}
.mobile-menu-lang .lang-btn{
  padding:6px !important;
  font-size:.75rem !important;
  border-radius:8px !important;
  font-weight:600 !important;
}

/* ============================================
   DESKTOP (min-width: 1025px)
   Layout lama — nav-menu horizontal, NO hamburger
   ============================================ */
@media (min-width: 1025px){
  /* Navbar desktop — horizontal */
  .navbar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:15px 30px !important;
    gap:20px !important;
  }
  
  /* Logo kiri */
  .nav-left{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-shrink:0 !important;
  }
  .brand{ font-size:1.5rem !important; }
  .logo-img{ width:45px !important; height:45px !important; }
  
  /* Nav menu — muncul kembali di desktop */
  .nav-menu{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    list-style:none !important;
    gap:5px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
  }
  
  .nav-menu li{ display:inline-block !important; }
  
  .nav-menu li a{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:10px 14px !important;
    border-radius:10px !important;
    font-size:.9rem !important;
    color:#fff !important;
    text-decoration:none !important;
    transition:all .3s !important;
  }
  
  /* Nav-right — auth, lang, cart */
  .nav-right{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    flex-shrink:0 !important;
  }
  
  /* Auth button desktop — tampil dengan label */
  .nav-auth-btn{
    padding:8px 16px !important;
    border-radius:24px !important;
  }
  .nav-auth-btn .auth-label{
    display:inline !important;
  }
  
  /* Lang switch tampil */
  .navbar .nav-right .lang-switch{
    display:flex !important;
    gap:5px !important;
  }
  
  /* Cart button tampil dengan label */
  .cart-btn{
    padding:8px 16px !important;
    border-radius:24px !important;
  }
  .cart-btn span:not(.cart-badge){
    display:inline !important;
  }
  
  /* HAMBURGER — SEMBUNYIKAN */
  .hamburger-btn{
    display:none !important;
  }
  
  /* DRAWER — SEMBUNYIKAN */
  .mobile-menu,
  .mobile-menu-overlay{
    display:none !important;
    visibility:hidden !important;
  }
}

/* ============================================
   MOBILE (max-width: 1024px)
   Layout baru — hamburger menu
   ============================================ */
@media (max-width: 1024px){
  /* Navbar mobile — horizontal 1 baris */
  .navbar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 14px !important;
    gap:8px !important;
  }
  
  .nav-left{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-shrink:0 !important;
  }
  .brand{ font-size:1.15rem !important; white-space:nowrap !important; }
  .logo-img{ width:32px !important; height:32px !important; }
  
  /* Nav-menu SEMBUNYIKAN */
  .nav-menu{ display:none !important; }
  
  /* Nav-right — compact */
  .nav-right{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    flex-shrink:0 !important;
  }
  
  /* Auth icon-only */
  .nav-auth-btn{ padding:8px !important; }
  .nav-auth-btn .auth-label{ display:none !important; }
  .nav-auth-btn .auth-icon{ width:20px !important; height:20px !important; }
  
  /* Lang-switch SEMBUNYIKAN di navbar */
  .navbar .nav-right .lang-switch{ display:none !important; }
  
  /* Cart icon-only */
  .cart-btn{ padding:8px !important; }
  .cart-btn span:not(.cart-badge):not(.cart-icon){ display:none !important; }
  .cart-btn .cart-icon{ margin-right:0 !important; width:20px !important; height:20px !important; }
  
  /* HAMBURGER — TAMPILKAN */
  .hamburger-btn{ display:flex !important; }
}

/* ============================================
   DRAWER — Auto Height (fit konten)
   ============================================ */
.mobile-menu{
  height:auto !important;
  max-height:90vh !important;
  top:60px !important;   /* posisi di bawah navbar */
  right:-320px !important;
  border-radius:16px 0 0 16px !important;
  overflow-y:auto !important;
  padding-bottom:8px !important;
}

/* Body padding di nav */
.mobile-menu-nav{
  flex:unset !important;
  padding:6px 6px !important;
  max-height:none !important;
}

/* Header compact */
.mobile-menu-header{
  padding:12px 14px !important;
  border-radius:16px 0 0 0 !important;
}

/* Language area tetap di bawah */
.mobile-menu-lang{
  padding:8px 12px 12px !important;
}

/* Overlay tetap full */
.mobile-menu-overlay{
  inset:0 !important;
}

/* ============================================
   SEMUA MODAL/DRAWER — Auto Height (fit konten)
   Mobile only
   ============================================ */
@media (max-width: 1024px){

  /* Modal umum (produk, form pemesanan, login, dll) */
  .modal{
    align-items:center !important;
    padding:14px !important;
  }
  .modal-content{
    border-radius:20px !important;
    width:100% !important;
    max-width:420px !important;
    max-height:90vh !important;
    height:auto !important;
    min-height:auto !important;
    padding:24px 20px !important;
    margin:auto !important;
    overflow-y:auto !important;
  }
  
  /* Modal gambar produk — lebih kecil */
  .modal-img{
    height:180px !important;
    max-height:180px !important;
  }
  
  /* Cart drawer (retail) — auto height */
  .cart-drawer{
    top:auto !important;
    bottom:0 !important;
    right:0 !important;
    height:auto !important;
    max-height:85vh !important;
    width:100% !important;
    max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    border-left:none !important;
    border-top:2px solid #7FDBFF !important;
    transition:transform .3s ease !important;
    transform:translateY(100%) !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .cart-drawer.open{
    transform:translateY(0) !important;
  }
  
  /* Cart body — auto scroll */
  .cart-body{
    flex:1 1 auto !important;
    min-height:100px !important;
    max-height:50vh !important;
    overflow-y:auto !important;
  }
  
  /* Cart footer */
  .cart-footer{
    flex-shrink:0 !important;
    padding:16px !important;
    border-top:1.5px solid rgba(127,219,255,.3) !important;
  }
  
  /* Cart header */
  .cart-header{
    padding:16px 18px !important;
    border-radius:20px 20px 0 0 !important;
    flex-shrink:0 !important;
  }
  .cart-header h2{
    font-size:1.1rem !important;
  }
  
  /* Reseller cart drawer */
  #resellerCartDrawer{
    top:auto !important;
    bottom:0 !important;
    right:0 !important;
    height:auto !important;
    max-height:85vh !important;
    width:100% !important;
    max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    border-left:none !important;
    border-top:2px solid #7FDBFF !important;
    transition:transform .3s ease !important;
    transform:translateY(100%) !important;
    display:flex !important;
    flex-direction:column !important;
  }
  #resellerCartDrawer.open{
    transform:translateY(0) !important;
  }

  /* Modal admin (kalau dibuka di HP) — auto height */
  #custModal .modal-content{
    max-width:420px !important;
    max-height:85vh !important;
  }

  /* Login page modal */
  .modal-content.login-box,
  .modal-content[style*="max-width:400px"],
  .modal-content[style*="max-width:420px"]{
    max-height:85vh !important;
    margin:auto !important;
  }
}

/* ============================================
   FORCE CART DRAWER — Slide dari BAWAH (mobile)
   Override semua CSS lama
   ============================================ */
@media (max-width: 1024px){
  .cart-drawer{
    position:fixed !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:80vh !important;
    min-height:auto !important;
    border-radius:20px 20px 0 0 !important;
    border-left:none !important;
    border-top:2px solid #7FDBFF !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.5) !important;
    transition:transform .35s cubic-bezier(.4,0,.2,1) !important;
    transform:translateY(100%) !important;
    display:flex !important;
    flex-direction:column !important;
    z-index:500 !important;
  }
  
  .cart-drawer.open{
    transform:translateY(0) !important;
    right:auto !important;
  }
  
  /* Reseller cart drawer */
  #resellerCartDrawer{
    position:fixed !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:80vh !important;
    border-radius:20px 20px 0 0 !important;
    border-left:none !important;
    border-top:2px solid #7FDBFF !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.5) !important;
    transition:transform .35s cubic-bezier(.4,0,.2,1) !important;
    transform:translateY(100%) !important;
    display:flex !important;
    flex-direction:column !important;
    z-index:500 !important;
  }
  
  #resellerCartDrawer.open{
    transform:translateY(0) !important;
  }
  
  /* Cart body scroll */
  .cart-body{
    flex:1 1 auto !important;
    min-height:80px !important;
    max-height:45vh !important;
    overflow-y:auto !important;
    padding:12px 16px !important;
  }
  
  /* Cart footer sticky */
  .cart-footer{
    flex-shrink:0 !important;
    padding:16px !important;
    background:rgba(0,0,0,.25) !important;
    border-top:1.5px solid rgba(127,219,255,.3) !important;
  }
  
  /* Cart header */
  .cart-header{
    flex-shrink:0 !important;
    padding:16px 18px !important;
    border-radius:20px 20px 0 0 !important;
    border-bottom:1.5px solid rgba(127,219,255,.2) !important;
  }
  
  /* Overlay — full screen */
  .cart-overlay{
    z-index:499 !important;
  }
}

/* Auth label — nama customer */
.nav-auth-btn .auth-label{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  vertical-align:middle;
}

/* Mobile — sembunyikan label (icon saja) */
@media (max-width: 1279px){
  .nav-auth-btn .auth-label{
    display:none !important;
  }
}

/* Desktop — tampil nama */
@media (min-width: 1280px){
  .nav-auth-btn .auth-label{
    display:inline-block !important;
  }
}

/* ============================================
   FIX BADGE PENDING — Jangan Terpotong
   ============================================ */
.admin-tabs{
  overflow:visible !important;
  padding-top:8px !important;
}

.admin-tabs button{
  position:relative !important;
  overflow:visible !important;
}

/* Badge di tab Pesanan */
#pendingBadge{
  position:absolute !important;
  top:-8px !important;
  right:-8px !important;
  background:#FF4136 !important;
  color:#fff !important;
  border-radius:50% !important;
  min-width:22px !important;
  height:22px !important;
  font-size:.7rem !important;
  font-weight:bold !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 6px !important;
  box-shadow:0 0 0 2.5px #001b33, 0 0 12px rgba(255,65,54,.7) !important;
  z-index:10 !important;
  line-height:1 !important;
}

/* ============================================
   ADMIN ACTION BUTTONS
   ============================================ */
.btn-detail, .btn-confirm, .btn-undo, .btn-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1.5px solid;
  cursor:pointer;
  transition:all .2s ease;
  padding:0;
  margin-right:4px;
  background:transparent;
}
.btn-detail{border-color:#7FDBFF;background:rgba(127,219,255,.12);color:#7FDBFF}
.btn-confirm{border-color:#2ECC40;background:rgba(46,204,64,.12);color:#2ECC40}
.btn-undo{border-color:#FFDC00;background:rgba(255,220,0,.12);color:#FFDC00}
.btn-cancel{border-color:#FF4136;background:rgba(255,65,54,.12);color:#FF4136}
.btn-detail:hover{background:rgba(127,219,255,.3);transform:translateY(-2px)}
.btn-confirm:hover{background:rgba(46,204,64,.3);transform:translateY(-2px)}
.btn-undo:hover{background:rgba(255,220,0,.3);transform:translateY(-2px)}
.btn-cancel:hover{background:rgba(255,65,54,.3);transform:translateY(-2px)}
.btn-detail:active, .btn-confirm:active, .btn-undo:active, .btn-cancel:active{
  transform:scale(.9);
}
.btn-detail svg, .btn-confirm svg, .btn-undo svg, .btn-cancel svg{
  width:16px;
  height:16px;
  pointer-events:none;
}

/* ============================================
   FIX BADGE KERANJANG — Jangan Terpotong
   ============================================ */
.navbar{
  overflow:visible !important;
}
.cart-btn{
  position:relative !important;
  overflow:visible !important;
}
.cart-badge{
  position:absolute !important;
  top:-8px !important;
  right:-8px !important;
  background:#FF4136 !important;
  color:#fff !important;
  border-radius:50% !important;
  min-width:20px !important;
  height:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.7rem !important;
  font-weight:bold !important;
  padding:0 5px !important;
  box-shadow:0 0 0 2px #001b33, 0 0 8px rgba(255,65,54,.6) !important;
  z-index:10 !important;
  line-height:1 !important;
}

/* ============================================
   UNIFIED CART DRAWER — 2 Section
   ============================================ */
.cart-drawer{
  max-width:420px;
}
.cart-body{
  padding:12px;
  flex:1;
  overflow-y:auto;
}
.cart-section{
  background:rgba(0,0,0,.15);
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
}
.cart-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:bold;
  color:#7FDBFF;
  font-size:.95rem;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(127,219,255,.2);
}
.cart-section-count{
  font-size:.75rem;
  background:rgba(127,219,255,.15);
  padding:3px 8px;
  border-radius:8px;
  font-weight:normal;
}
.cart-items-list{
  max-height:220px;
  overflow-y:auto;
  padding-right:4px;
}
.cart-section-empty{
  text-align:center;
  font-size:.85rem;
  opacity:.5;
  padding:15px 10px;
}
.cart-section-footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(127,219,255,.15);
}
.cart-item{
  padding:8px;
  gap:10px;
  border-radius:10px;
  margin-bottom:6px;
}
.cart-item-img{
  width:52px;
  height:52px;
}
.cart-item-info h4{
  font-size:.85rem;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.cart-item-info p{
  font-size:.72rem;
  margin:2px 0;
}
.cart-item-price{
  color:#FFDC00;
  font-weight:bold;
  font-size:.85rem !important;
}
.cart-item-qty button{
  width:22px;
  height:22px;
  font-size:.75rem;
}
.cart-item-qty span{
  min-width:24px;
  font-size:.85rem;
}
.cart-item-del{
  font-size:1rem;
  padding:2px;
}
.cart-footer{
  padding:12px 16px;
}
.cart-footer .total-line{
  font-size:.85rem;
  margin-bottom:5px;
}
.cart-footer .total-line.big{
  font-size:1rem;
  margin:8px 0;
}

/* ============================================
   PRODUCT CARD — Compact & Fit
   ============================================ */
.product-grid{
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap:14px !important;
}
.product-card{
  max-width:100%;
  overflow:hidden;
}
.product-img{
  height:150px !important;
  max-height:150px !important;
}
.product-info{
  padding:12px;
}
.product-info h3{
  font-size:.92rem;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-info p{
  font-size:.78rem;
  margin:3px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.price-tag{
  font-size:.9rem !important;
}

@media (max-width: 768px){
  .product-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
    padding:12px !important;
  }
  .product-img{
    height:130px !important;
    max-height:130px !important;
  }
}

/* ============================================
   UNIFIED CART DRAWER — 2 Section
   ============================================ */
.cart-drawer{
  max-width:420px;
}
.cart-body{
  padding:12px;
  flex:1;
  overflow-y:auto;
}
.cart-section{
  background:rgba(0,0,0,.15);
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
}
.cart-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:bold;
  color:#7FDBFF;
  font-size:.95rem;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(127,219,255,.2);
}
.cart-section-count{
  font-size:.75rem;
  background:rgba(127,219,255,.15);
  padding:3px 8px;
  border-radius:8px;
  font-weight:normal;
}
.cart-items-list{
  max-height:220px;
  overflow-y:auto;
  padding-right:4px;
}
.cart-section-empty{
  text-align:center;
  font-size:.85rem;
  opacity:.5;
  padding:15px 10px;
}
.cart-section-footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(127,219,255,.15);
}
.cart-item{
  padding:8px;
  gap:10px;
  border-radius:10px;
  margin-bottom:6px;
}
.cart-item-img{
  width:52px;
  height:52px;
}
.cart-item-info h4{
  font-size:.85rem;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.cart-item-info p{
  font-size:.72rem;
  margin:2px 0;
}
.cart-item-price{
  color:#FFDC00;
  font-weight:bold;
  font-size:.85rem !important;
}
.cart-item-qty button{
  width:22px;
  height:22px;
  font-size:.75rem;
}
.cart-item-qty span{
  min-width:24px;
  font-size:.85rem;
}
.cart-item-del{
  font-size:1rem;
  padding:2px;
}
.cart-footer{
  padding:12px 16px;
}
.cart-footer .total-line{
  font-size:.85rem;
  margin-bottom:5px;
}
.cart-footer .total-line.big{
  font-size:1rem;
  margin:8px 0;
}

/* ============================================
   PRODUCT CARD — Compact & Fit
   ============================================ */
.product-grid{
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap:14px !important;
}
.product-card{
  max-width:100%;
  overflow:hidden;
}
.product-img{
  height:150px !important;
  max-height:150px !important;
}
.product-info{
  padding:12px;
}
.product-info h3{
  font-size:.92rem;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-info p{
  font-size:.78rem;
  margin:3px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.price-tag{
  font-size:.9rem !important;
}

@media (max-width: 768px){
  .product-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
    padding:12px !important;
  }
  .product-img{
    height:130px !important;
    max-height:130px !important;
  }
}

/* ============================================
   ADMIN NAVBAR + TABS STICKY
   ============================================ */
.navbar{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
}

.admin-tabs{
  position:sticky !important;
  top:66px !important;
  z-index:999 !important;
  background:linear-gradient(180deg, rgba(0,31,63,.98) 0%, rgba(0,31,63,.92) 100%) !important;
  backdrop-filter:blur(12px);
  padding:12px 20px !important;
  margin-left:-20px !important;
  margin-right:-20px !important;
  border-bottom:1px solid rgba(127,219,255,.2);
}

/* Mobile — sticky juga */
@media (max-width: 1279px){
  .navbar{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
  }
  .admin-tabs{
    top:60px !important;
    padding:10px 15px !important;
    margin-left:-20px !important;
    margin-right:-20px !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  .admin-tabs::-webkit-scrollbar{ display:none; }
  .admin-tabs button{
    flex-shrink:0;
  }
}

/* Pastikan body tidak block sticky */
body{
  overflow-x:hidden !important;
}

html{
  scroll-behavior:smooth;
}

/* SVG icon tabs */
.admin-tabs button{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.admin-tabs button svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  flex-shrink:0;
  transition:transform .2s ease;
}
.admin-tabs button:hover svg{
  transform:scale(1.15);
  filter:drop-shadow(0 0 4px rgba(127,219,255,.6));
}
.admin-tabs button.active svg{
  stroke:#001f3f;
}

/* Sticky Navbar + Tabs */
html, body{
  overflow-x:visible !important;
  overflow-y:auto !important;
}

.navbar{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

.admin-tabs{
  position:sticky !important;
  top:72px !important;
  z-index:999 !important;
  background:linear-gradient(180deg, rgba(0,18,32,.99) 0%, rgba(0,31,63,.96) 100%) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.3), 0 1px 0 rgba(127,219,255,.1) inset !important;
  border-bottom:1px solid rgba(127,219,255,.15) !important;
  padding:12px 24px !important;
  margin-left:-20px !important;
  margin-right:-20px !important;
  border-radius:0 !important;
}

#tabContent{
  position:relative;
  z-index:1;
  padding-top:20px !important;
}

@media (max-width: 1279px){
  .admin-tabs{
    top:60px !important;
    padding:10px 16px !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  .admin-tabs::-webkit-scrollbar{ display:none; }
  .admin-tabs button{ flex-shrink:0; }
}

/* ============================================
   FIX STICKY — Body overflow
   ============================================ */
html{
  overflow-x: clip !important;
  overflow-y: visible !important;
}

body{
  overflow-x: clip !important;  /* clip ≠ hidden — tidak block sticky */
  overflow-y: visible !important;
  min-height: 100vh !important;
}

/* Wrapper admin — biar sticky jalan */
.admin-tabs-wrapper{
  position: sticky !important;
  top: 70px !important;
  z-index: 9999 !important;
  background: linear-gradient(180deg, rgba(0,18,32,.99) 0%, rgba(0,31,63,.98) 100%) !important;
  border-bottom: 1px solid rgba(127,219,255,.2) !important;
  padding: 12px 24px !important;
  margin: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
}

.admin-content-wrapper{
  padding: 20px !important;
}

.admin-tabs{
  position: static !important;  /* tabs tidak perlu sticky sendiri */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.navbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
}

@media (max-width: 1279px){
  .admin-tabs-wrapper{
    top: 60px !important;
    padding: 10px 16px !important;
    overflow-x: auto !important;
  }
}