/* style.css — KadenStore v2 */
:root{--neon:#3b82f6;--gold:#f59e0b;--bg:#09090b;--bg2:#0f172a;--card:#0d1b2e;--green:#22c55e;--red:#ef4444}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background-color:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(59,130,246,0.07) 0%,transparent 60%);font-family:'DM Sans',sans-serif}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.4);border-radius:2px}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ── Header ── */
.header-blur{background:rgba(9,9,11,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.logo-glow{box-shadow:0 0 12px rgba(59,130,246,0.35);transition:box-shadow .3s}
.logo-glow:hover{box-shadow:0 0 22px rgba(59,130,246,0.6)}
.search-input:focus{box-shadow:0 0 0 1px rgba(59,130,246,0.4),0 0 15px rgba(59,130,246,0.1)}

/* ── Dropdown ── */
.dropdown-enter{animation:dropIn .2s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.neon-dot{box-shadow:0 0 6px var(--neon)}

/* ── Animations ── */
.anim-fade-up{opacity:0;animation:fadeUp .5s ease-out forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.flash-pulse{animation:flashPulse 1.5s ease-in-out infinite}
@keyframes flashPulse{0%,100%{opacity:1}50%{opacity:0.55}}
.live-dot{box-shadow:0 0 6px #4ade80;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.4}}
.mobile-search-slide{animation:slideDown .25s ease-out}
@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:80px}}

/* ── Flash banner ── */
.flash-banner-bg{background:linear-gradient(135deg,#0d1b35,#091224);box-shadow:inset 0 1px 0 rgba(59,130,246,0.1),0 4px 20px rgba(0,0,0,0.5)}

/* ── Neon text ── */
.neon-text{text-shadow:0 0 12px rgba(59,130,246,0.5),0 0 24px rgba(59,130,246,0.25)}

/* ── Category ── */
.cat-btn{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.875rem;letter-spacing:.04em;transition:all .25s ease;cursor:pointer;white-space:nowrap;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5)}
.cat-btn:hover{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.2)}
.cat-btn.active{color:#fff}
.cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── Product Card ── */
.product-card{background:linear-gradient(135deg,#0d1b2e 0%,#0f172a 100%);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:cardIn .35s ease-out backwards}
.product-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 8px 24px rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.2)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.product-img{aspect-ratio:1;background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden}
.product-img::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);pointer-events:none}
.product-img-glow{position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(59,130,246,0.12);filter:blur(20px)}
.flash-badge-pill{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;background:#3b82f6;padding:4px 8px;border-radius:8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;color:#fff;letter-spacing:.08em;box-shadow:0 0 12px rgba(59,130,246,0.6);animation:flashPulse 1.5s ease-in-out infinite;z-index:2}
.discount-badge{position:absolute;top:8px;right:8px;background:rgba(239,68,68,0.9);color:#fff;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;padding:4px 8px;border-radius:8px;z-index:2}

/* ── Stock bar ── */
.stock-bar-track{height:6px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden}
.stock-bar-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.stock-bar-fill.normal{background:linear-gradient(90deg,#3b82f6,#60a5fa);box-shadow:0 0 6px rgba(59,130,246,0.5)}
.stock-bar-fill.low{background:linear-gradient(90deg,#f59e0b,#fbbf24);box-shadow:0 0 6px rgba(245,158,11,0.5)}
.stock-bar-fill.vlow{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 6px rgba(239,68,68,0.5)}

/* ── Buttons ── */
.buy-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:12px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.05em;color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:1px solid rgba(59,130,246,0.3);cursor:pointer;transition:all .2s ease}
.buy-btn:hover{box-shadow:0 0 20px rgba(59,130,246,0.45);transform:scale(1.02)}
.buy-btn:active{transform:scale(0.98)}
.buy-btn.sold-out{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.2);cursor:not-allowed}
.buy-btn.sold-out:hover{box-shadow:none;transform:none}
.submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;cursor:pointer;transition:all .2s ease;margin-top:20px}
.submit-btn:hover{box-shadow:0 0 25px rgba(59,130,246,0.5)}
.submit-btn:active{transform:scale(0.98)}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.875rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .2s ease;width:100%}
.btn-outline:hover{border-color:rgba(255,255,255,.3);color:#fff}

/* ── Quantity selector ── */
.qty-btn{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}
.qty-btn:hover{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.4)}
.qty-input{width:44px;height:32px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:.875rem;font-weight:700;outline:none}

/* ── Countdown ── */
.time-block{display:flex;flex-direction:column;align-items:center}
.time-val{background:rgba(0,0,0,0.5);border:1px solid rgba(59,130,246,0.3);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.85rem;color:#fff;box-shadow:0 0 10px rgba(59,130,246,0.2)}
.time-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,0.3);margin-top:3px}
.time-colon{font-weight:700;font-size:1.1rem;color:var(--neon);margin-bottom:14px;margin-left:1px;margin-right:1px}

/* ── Hero dots ── */
.hero-dot{border-radius:99px;transition:all .3s ease;background:rgba(255,255,255,0.3);width:6px;height:6px;cursor:pointer}
.hero-dot.active{width:24px;background:#fff}

/* ── Skeleton ── */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ── Modal ── */
.modal-backdrop{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-slide-up{animation:modalUp .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalUp{from{opacity:0;transform:translateY(30px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-fade-in{animation:fadeInModal .25s ease-out}
@keyframes fadeInModal{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-box{background:linear-gradient(135deg,#0f172a,#09090b);border:1px solid rgba(255,255,255,0.1);border-radius:20px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.7)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}

/* ── Form ── */
.form-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px 16px;font-size:.875rem;color:#fff;outline:none;transition:border-color .2s ease,box-shadow .2s ease;font-family:'DM Sans',sans-serif}
.form-input::placeholder{color:rgba(255,255,255,0.25)}
.form-input:focus{border-color:rgba(59,130,246,0.5);box-shadow:0 0 0 3px rgba(59,130,246,0.08)}
.form-input.error{border-color:rgba(239,68,68,0.5)}
.form-label{display:flex;align-items:center;gap:6px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,0.5);margin-bottom:6px}
.error-msg{color:#f87171;font-size:11px;margin-top:4px;margin-left:2px}

/* ── Bottom Nav ── */
.bottom-nav-btn{color:rgba(255,255,255,0.35);border-radius:12px;transition:color .2s ease;cursor:pointer;background:none;border:none;position:relative}
.bottom-nav-btn.active{color:#3b82f6}
.bottom-nav-btn.active svg{stroke-width:2}
.bottom-nav-active-bg{position:absolute;inset:0;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);border-radius:12px}

/* ── Cart badge ── */
.cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:#3b82f6;border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(59,130,246,.6)}

/* ── Auth tabs ── */
.auth-tab{flex:1;padding:10px;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.06em;color:rgba(255,255,255,.4);background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;transition:all .2s ease}
.auth-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}
.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:12px;font-family:'DM Sans',sans-serif;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff}
.social-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.social-btn.google:hover{border-color:rgba(234,67,53,.4);background:rgba(234,67,53,.08)}
.social-btn.facebook:hover{border-color:rgba(24,119,242,.4);background:rgba(24,119,242,.08)}

/* ── Order history ── */
.order-card{background:linear-gradient(135deg,#0f1f38,#0d1630);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;margin-bottom:12px;transition:border-color .2s}
.order-card:hover{border-color:rgba(59,130,246,.2)}
.order-status-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:12px;font-weight:600;font-family:'Rajdhani',sans-serif;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.06)}
.status-badge{padding:3px 10px;border-radius:99px;font-size:10px;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.06em}
.status-pending{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.status-processing{background:rgba(59,130,246,.12);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}
.status-completed{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.status-cancelled{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.3)}

/* ── Stepper ── */
.stepper{display:flex;align-items:center;padding:12px 16px;gap:0}
.step-node{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid}
.step-circle.done{background:#f59e0b;border-color:#f59e0b;color:#000}
.step-circle.active-step{background:rgba(245,158,11,.15);border-color:#f59e0b;color:#f59e0b}
.step-circle.inactive{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.3)}
.step-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.step-label.done{color:#f59e0b}
.step-line{flex:1;height:2px;margin-bottom:16px}
.step-line.done{background:#f59e0b}
.step-line.inactive{background:rgba(255,255,255,.1)}

/* ── Stars ── */
.star-btn{font-size:1.6rem;cursor:pointer;transition:transform .15s ease;line-height:1;background:none;border:none;padding:0 2px}
.star-btn:hover{transform:scale(1.2)}
.star-btn.filled{filter:drop-shadow(0 0 4px rgba(245,158,11,.6))}

/* ── Rating display ── */
.rating-card{background:linear-gradient(135deg,#0d1b2e,#0f172a);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;transition:border-color .2s}
.rating-card:hover{border-color:rgba(245,158,11,.25)}

/* ── Admin panel ── */
.admin-tab{flex:1;padding:10px 6px;background:none;border:none;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.06em;color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:3px}
.admin-tab.active{color:#f59e0b;border-bottom-color:#f59e0b}
.admin-tab svg,.admin-tab span.tab-icon{font-size:1.2rem}
.admin-product-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:8px;transition:border-color .2s}
.admin-product-row:hover{border-color:rgba(255,255,255,.15)}
.admin-stat-card{background:linear-gradient(135deg,#0d1b2e,#091224);border:1px solid rgba(59,130,246,.15);border-radius:14px;padding:16px;text-align:center}

/* ── Cart sidebar ── */
.cart-item{display:flex;align-items:center;gap:10px;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:8px}

/* ── Success ── */
.success-icon{width:64px;height:64px;border-radius:50%;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes scaleIn{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}

/* ── Info modals (syarat, privasi, kontak) ── */
.info-modal-content{max-height:60vh;overflow-y:auto;padding:20px;line-height:1.7;color:rgba(255,255,255,.75);font-size:.875rem}
.info-modal-content h3{color:#3b82f6;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.06em;margin:16px 0 6px}
.info-modal-content h3:first-child{margin-top:0}
.info-modal-content p{margin-bottom:8px}

/* ── Divider ── */
.divider-or{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.25);font-size:.8rem;margin:16px 0}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}

/* ── Avatar ── */
.avatar-circle{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.875rem;color:#fff;flex-shrink:0;overflow:hidden}

/* ── Settings ── */
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.settings-item:last-child{border-bottom:none}
.settings-item:hover .settings-label{color:#fff}
.settings-label{color:rgba(255,255,255,.65);font-size:.875rem;transition:color .2s}

/* ── Notification toast ── */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(15,23,42,.95);border:1px solid rgba(59,130,246,.3);border-radius:12px;padding:12px 20px;color:#fff;font-size:.875rem;z-index:9999;pointer-events:none;opacity:0;transition:all .3s ease;white-space:nowrap;backdrop-filter:blur(12px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(34,197,94,.4)}
.toast.error{border-color:rgba(239,68,68,.4)}