<style>
/* =========================================================
   BASE & PERFORMANCE
========================================================= */
html, body { height: 100%; }
img { content-visibility: auto; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* =========================================================
   VARIABLES (GLOBAL)
========================================================= */
:root{
  /* Glossy palette */
  --glossy-top:#1b1b1b;
  --glossy-mid:#000000;
  --glossy-bottom:#1a1a1a;

  /* Text & accents */
  --text:#ffffff;
  --text-muted:#d6d6d6;
  --accent:#2fdf84;        /* hijau neon */
  --accent-soft:#55f1a4;   /* varian hover */
  --cyan:#8fb6ff;
  --cyan-soft:#b9d0ff;

  /* Focus ring */
  --ring: rgba(47,223,132,.35);
}

/* =========================================================
   UTILITIES
========================================================= */
.svgfont { display:inline-block; width:5em; height:5em; fill:currentColor; font-size:1em; }
.text-muted { color: var(--text-muted); }
.shadow-inset-soft {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 6px rgba(0,0,0,.7);
}

/* =========================================================
   HEADER / TOP BARS
========================================================= */
.lzd-header .lzd-links-bar {
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  color: var(--text);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px; height:64px; box-sizing:border-box;
}
.lzd-header .lzd-links-bar .top-links-item {
  color: var(--text); margin-left:16px;
  transition: color .2s ease, opacity .2s ease;
}
.lzd-header .lzd-links-bar .top-links-item:hover { color: var(--text-muted); }
/* Accent links */
.lzd-header .lzd-links-bar .top-links-item.orange, .lzd-header .lzd-links-bar .top-links-item .orange { color: var(--accent); }
.lzd-header .lzd-links-bar .top-links-item.orange:hover { color: var(--accent-soft); }
.lzd-header .lzd-links-bar .top-links-item.cyan, .lzd-header .lzd-links-bar .top-links-item .cyan { color: var(--cyan); }
.lzd-header .lzd-links-bar .top-links-item.cyan:hover { color: var(--cyan-soft); }

/* Logo bar */
.lzd-header .lzd-logo-bar{
  background: linear-gradient(to bottom, #1a1a1a, #000000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.lzd-header .lzd-logo-bar .logo-bar-content .lzd-logo-content img,
.logo-modern{
  max-height:40px; width:auto; height:auto; object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
}

/* =========================================================
   BREADCRUMB (RESPONSIVE)
========================================================= */
.breadcrumb_list {
  max-width:1188px; width:100%;
  height:48px; margin:0 auto; padding:0 12px; box-sizing:border-box;
  border-bottom:1px solid #333;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background: linear-gradient(to bottom, #1a1a1a, #000000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.breadcrumb_list_empty { height:0; border:none; overflow:hidden; }
.breadcrumb_list .breadcrumb { padding-left:0; margin-left:-4px; height:48px; display:inline-block; white-space:nowrap; }
.breadcrumb_item { position:relative; display:table-cell; vertical-align:middle; font-size:13px; font-weight:300; height:48px; }
.breadcrumb_item_text { display:inline-block; margin:0; line-height:100%; font-weight:300; }
.breadcrumb_item_anchor{
  display:inline-block; vertical-align:middle; color:#00c8ff;
  padding:0 4px; font-size:14px; font-family:Roboto, Helvetica, Arial, sans-serif;
  max-width:200px; white-space:nowrap; line-height:16px; overflow:hidden; text-overflow:ellipsis;
  transition:color .3s ease;
}
.breadcrumb_item_anchor:hover{ color:#ff0033; }
.breadcrumb_item_anchor_last{ color:#aaa; max-width:none; height:16px; line-height:16px; white-space:normal; }
.breadcrumb_right_arrow{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACKUExURUxpcYGBgYGBgYWFhYCAgICAgICAgIKCgv///4GBgZWVlYyMjIGBgYCAgIKCgoGBgYGBgaqqqoODg7+/v4GBgZKSko6OjoGBgYWFhYGBgYSEhIGBgZmZmYCAgIGBgYGBgYCAgICAgIGBgYCAgICAgIiIiICAgIeHh4GBgYSEhIODg4GBgYGBgYCAgPLijmAAAAAtdFJOUwCS7jCDi/E1AbYMFJrrK9ToAycEugcJtBfYG64Fp+S+vb+god0e4SLcHyPgwPJLUkAAAAB6SURBVDjLY2AYYoCdkwu/AgVdHTG8Crj5dUVE8aqQkNQVl8GrQkpDV1oYrwpVbV1ZQbwq1OV0lTnwqhAS0OXBr4KPV5cRf3AwM+myEghRNl0WihQQsoKQIwl5U0tOVwmfvKYa/qCWUsEfWYSim2CCkddVFKMs0Q5aAABM4wlSQJ87yAAAAABJRU5ErkJggg==);
  background-repeat:no-repeat; background-size:contain;
  display:inline-block; width:16px; height:16px; vertical-align:middle;
  filter:brightness(0) invert(1);
}

/* =========================================================
   BADGES & BRAND
========================================================= */
/* Seller badge (merged, no duplication) */
.seller-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:12px;
  font-size:14px; font-weight:700; letter-spacing:.3px;
  color:#fff; text-decoration:none; cursor:pointer;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              inset 0 -2px 6px rgba(0,0,0,0.7),
              0 6px 12px rgba(0,0,0,0.35);
  position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.seller-badge::before { content:"✔"; color: var(--accent); font-weight:800; }
.seller-badge::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
}
.seller-name { color: var(--accent); font-weight:800; }
.seller-motto { font-size:12px; font-style:italic; color:#aaa; margin-left:8px; }

/* Brand info */
.pdp-product-brand{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:10px; color:#fff;
  font-family:Arial, sans-serif; font-size:14px; font-weight:600;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              inset 0 -2px 6px rgba(0,0,0,0.7),
              0 4px 10px rgba(0,0,0,0.35);
  position:relative; overflow:hidden;
}
.pdp-product-brand::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
}
.pdp-product-brand__label { color:#d6d6d6; font-weight:500; }
.pdp-product-brand__value { color: var(--accent); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

/* =========================================================
   PRICE CARD / PRICING
========================================================= */
.gcard{
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  color:#fff; border-radius:14px; padding:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              inset 0 -2px 8px rgba(0,0,0,.7),
              0 6px 18px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.gcard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  mix-blend-mode:screen;
}
.pdp-price-note{ margin:0 0 8px; color:#d6d6d6; font-size:14px; }

.gprice{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.pdp-price--main{
  font-weight:800; font-size:28px; letter-spacing:.2px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.pdp-price--striked{ color:#bdbdbd; text-decoration:line-through; font-size:14px; opacity:.9; margin-right:8px; }
.pdp-product-price__discount{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.3px;
  color:#0b1f17; background: var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}

/* =========================================================
   QUANTITY CONTROLS
========================================================= */
.glossy-qty{
  display:inline-flex; align-items:center; gap:8px; padding:8px; border-radius:14px;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              inset 0 -2px 8px rgba(0,0,0,.7),
              0 6px 18px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.glossy-qty::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
}
.qty__btn{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px; border:none; cursor:pointer; user-select:none;
  color:#fff; font-size:20px; font-weight:800; line-height:1;
  background: linear-gradient(180deg, #232323 0%, #0b0b0b 60%, #1a1a1a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              inset 0 -2px 6px rgba(0,0,0,.7),
              0 3px 10px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, opacity .2s ease;
  will-change: transform;
}
.qty__btn:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -2px 8px rgba(0,0,0,.75),
             0 8px 16px rgba(0,0,0,.45);
}
.qty__btn:active{ transform:translateY(0); }
.qty__btn[disabled]{ opacity:.45; cursor:not-allowed; }
.qty__input{
  width:68px; height:36px; text-align:center; color:#fff; font-weight:700; font-size:16px; letter-spacing:.3px;
  border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg,#151515 0%, #0a0a0a 60%, #141414 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  outline:none; transition: border-color .2s ease, box-shadow .2s ease;
}
.qty__input:focus, .qty__input:focus-visible{
  border-color: rgba(47,223,132,.8);
  box-shadow: 0 0 0 3px rgba(47,223,132,.25);
}
.qty__hint{ display:block; margin-top:8px; font-size:12px; color:var(--text-muted); }

/* =========================================================
   BUTTONS
========================================================= */
.btn-daftar{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:12px; font-weight:700; font-size:14px; letter-spacing:.3px;
  color:#fff; text-decoration:none; position:relative; overflow:hidden; margin:0; line-height:1;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              inset 0 -2px 6px rgba(0,0,0,.7),
              0 6px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.btn-daftar::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
}
.btn-daftar::before{
  content:""; position:absolute; top:0; left:-70%; width:40%; height:100%;
  transform:skewX(-25deg);
  background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
  opacity:0;
}
.btn-daftar:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -2px 8px rgba(0,0,0,.75),
              0 10px 28px rgba(0,0,0,.45);
}
.btn-daftar:hover::before{ animation: shine .85s ease-out forwards; opacity:1; }
.btn-daftar:active{ transform: translateY(0) scale(.99); }
.btn-daftar:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

/* Login/Register grid */
.button-login-daftar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.button-login-daftar a{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700; color:#fff;
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,#1b1b1b 0%, #000 60%, #1a1a1a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 6px rgba(0,0,0,.7), 0 6px 14px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative; overflow:hidden;
}
.button-login-daftar a::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
}
.button-login-daftar a:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 8px rgba(0,0,0,.75), 0 10px 22px rgba(0,0,0,.45);
}
.button-login-daftar a:active{ transform:translateY(0); }
.button-login-daftar a.register{ background:linear-gradient(180deg,#1b1b1b 0%, #000 60%, #1a1a1a 100%); }

/* =========================================================
   CART
========================================================= */
.lzd-nav-cart a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; text-decoration:none;
  background:linear-gradient(180deg,#1b1b1b 0%, #000 60%, #1a1a1a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 6px rgba(0,0,0,.7), 0 6px 14px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lzd-nav-cart a:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 8px rgba(0,0,0,.75), 0 10px 22px rgba(0,0,0,.45);
}
.lzd-nav-cart a:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.lzd-nav-cart .cart-icon{
  width:22px; height:22px; display:block;
  background: no-repeat center / contain url('/assets/icons/cart.svg');
  filter: brightness(0) invert(1);
}
#topActionCartNumber.cart-num{
  position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#0b1f17; background: var(--accent); border-radius:999px;
  font-size:12px; font-weight:800; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

/* =========================================================
   GALLERY PREVIEW
========================================================= */
.gallery-preview-panel__content{
  display:flex; justify-content:center; align-items:center;
  padding:12px; background:linear-gradient(to bottom,#111,#000);
  border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,.6);
  max-width:500px; margin:20px auto;
}
.gallery-preview-panel__image{
  width:100%; height:auto; object-fit:cover; border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  transition: transform .4s ease, box-shadow .4s ease;
  will-change: transform;
}
.gallery-preview-panel__image:hover{
  transform:scale(1.05);
  box-shadow:0 12px 28px rgba(255, 0, 80, .5);
}

/* =========================================================
   FOOTERS
========================================================= */
.fixed-footer{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  color: var(--text);
  display:flex; justify-content:space-around; align-items:center;
  padding: max(10px, env(safe-area-inset-bottom)) 0 calc(env(safe-area-inset-bottom));
  font-family:Arial, sans-serif;
  box-shadow:0 -2px 8px rgba(0,0,0,.6);
}
.fixed-footer a{ color:var(--text); text-decoration:none; text-align:center; font-size:14px; transition:color .2s ease; }
.fixed-footer a:hover{ color:var(--text-muted); }
.fixed-footer a i{ display:block; font-size:18px; margin-bottom:5px; }

.desktop-footer{
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  color:#fff; padding:40px 20px 20px; font-family:Arial, sans-serif;
}
.desktop-footer h3,
.desktop-footer .footer-title,
.desktop-footer .lzd-footer-h3,
.desktop-footer .lzd-footer-title{
  color:#fff; font-weight:700; font-size:16px; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:6px;
}
.desktop-footer a{ color:#d6d6d6; text-decoration:none; transition:color .2s ease; }
.desktop-footer a:hover{ color:#fff; }
.desktop-footer ul.footer-list li{ margin:6px 0; }
.lzd-footer-app-downloads .title, .lzd-footer-app-downloads .text{ color:#fff; }
.desktop-footer .lzd-follow-us-icon img{ filter:brightness(0) invert(1); transition: filter .2s ease; }
.desktop-footer .lzd-follow-us-icon:hover img{ filter:brightness(1.5) invert(0); }
.desktop-footer .lzd-follow-us-icon svg{
  width:32px; height:32px; display:block; fill:#fa0303; opacity:.9; transition:opacity .2s ease;
}
.desktop-footer .lzd-follow-us-icon:hover svg{ opacity:1; }
.lzd-footer-country{ filter:grayscale(100%) brightness(1.8); opacity:.8; transition:all .3s ease; }
.lzd-footer-country:hover{ filter:none; opacity:1; }
.lzd-footer-copyright{
  color:#aaa; font-size:13px; text-align:right; margin-top:10px;
  border-top:1px solid rgba(255,255,255,.1); padding-top:8px;
}
.desktop-footer .img-verify{ background:#fff; border-radius:4px; padding:4px; }

/* =========================================================
   DMCA CARD
========================================================= */
.dmca-card{
  display:inline-flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px;
  background: linear-gradient(180deg, var(--glossy-top) 0%, var(--glossy-mid) 60%, var(--glossy-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              inset 0 -2px 6px rgba(0,0,0,.7),
              0 6px 18px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.dmca-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
}
.dmca-link{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; transition: transform .2s ease, filter .2s ease; }
.dmca-link img{ width:36px; height:auto; display:block; border-radius:8px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.5); }
.dmca-text{ font-weight:700; font-size:14px; letter-spacing:.2px; color:var(--text-muted); }
.dmca-card:hover .dmca-link{ transform: translateY(-1px) scale(1.02); }
.dmca-card:focus-within{ outline:none; box-shadow:0 0 0 3px var(--ring); }
.dmca-card:hover .dmca-text{ color:var(--text); }

/* =========================================================
   TITLES
========================================================= */
.pdp-mod-product-badge-title{
  margin:0; color:#fa0101; font-weight:800; font-size:24px; line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* =========================================================
   STATES / INTERACTIONS
========================================================= */
.seller-badge:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
              inset 0 -2px 8px rgba(0,0,0,0.75),
              0 10px 20px rgba(0,0,0,0.45);
}
.seller-badge:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 600px){
  .lzd-header .lzd-logo-bar .logo-bar-content .lzd-logo-content img,
  .logo-modern{ max-height:32px; }
  .breadcrumb_list{ height:auto; min-height:44px; }
}
@media (max-width: 480px){
  .pdp-price--main{ font-size:24px; }
  .pdp-product-price__discount{ font-size:11px; padding:3px 8px; }
  .button-login-daftar{ grid-template-columns:1fr; }
  .pdp-mod-product-badge-title{ font-size:20px; }
  .qty__input{ width:56px; }
  .qty__btn{ width:34px; height:34px; }
}

/* =========================================================
   REDUCE MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
  .btn-daftar, .btn-daftar:hover { transition:none; transform:none; }
  .btn-daftar:hover::before { animation:none; opacity:0; }
  .gallery-preview-panel__image{ transition:none; }
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes shine { from { left:-70%; } to { left:130%; } }
</style>