:root{--navy:#0B1220;--deep:#111C33;--blue:#2563EB;--cyan:#22D3EE;--white:#FFFFFF;--light:#F5F7FB;--text:#172033;--text2:#64748B;--success:#16A34A;--warning:#F59E0B;--danger:#DC2626;--radius:16px;--shadow:0 10px 30px -12px rgba(11,18,32,.18);--grad:linear-gradient(135deg,var(--blue),var(--cyan))}
body{font-family:'Manrope',sans-serif;color:var(--text);background:var(--light)}
h1,h2,h3,h4,h5,h6,.kp-h1,.kp-h2,.kp-stat{font-family:'Sora',sans-serif}
a{color:var(--blue)}
.kp-nav{background:rgba(11,18,32,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(34,211,238,.15)}
.kp-logo{height:42px;width:auto}
.kp-link{color:#cbd5e1;text-decoration:none;font-weight:600;font-size:.95rem;transition:color .2s}
.kp-link:hover{color:var(--cyan)}
.kp-icon{width:30px;height:30px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#e2e8f0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .2s;position:relative}
.kp-icon:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-2px)}
.kp-icon svg{width:18px;height:18px}
.kp-badge{position:absolute;top:-6px;right:-6px;background:var(--grad);color:#fff;font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.kp-agenbar{background:var(--deep);color:#cbd5e1}.kp-agenbar a{color:var(--cyan)}
.kp-hero{background:radial-gradient(ellipse at 80% 20%,rgba(37,99,235,.35),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(34,211,238,.18),transparent 50%),var(--navy);color:#fff;position:relative;overflow:hidden}
.kp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.kp-h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.kp-h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.01em}
.kp-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kp-lead{color:#94a3b8;font-size:1.08rem;max-width:540px}
.kp-hero-sm .kp-lead{margin:0 auto}
.kp-pill{display:inline-flex;gap:6px;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:var(--cyan);font-size:.85rem;font-weight:600}
.kp-pill svg{width:16px;height:16px}
.kp-stat{font-size:1.6rem;font-weight:700;color:var(--cyan)}
.kp-hero small{color:#94a3b8}
.kp-hero-card{border-radius:28px;padding:22px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px rgba(37,99,235,.6)}
.kp-hero-card img{width:100%;border-radius:20px;margin-bottom:16px}
.kp-hero-icons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kp-glass{display:flex;align-items:center;gap:10px;padding:16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-weight:600}
.kp-glass svg{color:var(--cyan)}
.kp-float{animation:kpFloat 6s ease-in-out infinite}
@keyframes kpFloat{50%{transform:translateY(-10px)}}
.kp-fade{animation:kpFade .8s ease both}@keyframes kpFade{from{opacity:0;transform:translateY(16px)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;border-radius:12px}
.btn svg{width:18px;height:18px}
.kp-btn-primary{background:var(--grad);color:#fff;border:0;padding:.65rem 1.2rem;box-shadow:0 8px 20px -8px rgba(37,99,235,.7);transition:transform .2s,box-shadow .2s}
.kp-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(34,211,238,.7)}
.kp-btn-primary:disabled{background:#94a3b8;box-shadow:none}
.kp-btn-glass{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.2);padding:.65rem 1.2rem}
.kp-btn-glass:hover{color:var(--cyan);border-color:var(--cyan)}
.kp-btn-outline{border:1px solid #dbe3ef;color:var(--blue);background:#fff}
.kp-btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.kp-btn-danger{color:var(--danger);border:1px solid #fecaca;background:#fff}
.kp-light{background:var(--light)}
.kp-dark{background:var(--deep);color:#fff}
.kp-eyebrow{color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.kp-dark .kp-eyebrow{color:var(--cyan)}
.text-light-kp{color:#fff}
.kp-filter .form-control,.kp-filter .form-select{border-radius:12px;min-width:160px}
.kp-card{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;border:1px solid #e7ecf4;transition:transform .25s,box-shadow .25s}
.kp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kp-card-img{display:block;aspect-ratio:1/1;background:linear-gradient(180deg,#f8fafc,#eef2f9);position:relative}
.kp-card-img img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s}
.kp-card:hover .kp-card-img img{transform:scale(1.05)}
.kp-stock{position:absolute;top:10px;left:10px;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.kp-stock.ok,.kp-stock-inline.ok{background:rgba(22,163,74,.12);color:var(--success)}
.kp-stock.out,.kp-stock-inline.out{background:rgba(220,38,38,.12);color:var(--danger)}
.kp-stock-inline{font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:999px;display:inline-block}
.kp-cat{color:var(--text2);font-size:.78rem}
.kp-title{color:var(--text);font-weight:700;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kp-title:hover{color:var(--blue)}
.kp-price{font-family:'Sora';font-weight:700;color:var(--blue);font-size:1.1rem}
.kp-price-lg{font-family:'Sora';font-weight:800;color:var(--blue);font-size:1.8rem}
.kp-i-sm{width:14px;height:14px;vertical-align:-2px}
.kp-glass-card{padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:border-color .2s}
.kp-glass-card:hover{border-color:rgba(34,211,238,.4)}
.kp-muted-dark{color:#94a3b8}
.kp-status{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08)}
.kp-status.menunggu{color:var(--warning)}.kp-status.proses{color:var(--cyan)}.kp-status.selesai,.kp-status.diambil{color:#4ade80}
.kp-detail-img{background:#fff;border-radius:24px;border:1px solid #e7ecf4;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kp-detail-img img{max-width:90%;max-height:90%;object-fit:contain}
.kp-box{background:#fff;border:1px solid #e7ecf4;border-radius:12px;padding:14px;color:var(--text2)}
.kp-qty{width:80px;border-radius:12px}
.kp-panel{background:#fff;border-radius:20px;padding:24px;border:1px solid #e7ecf4;box-shadow:var(--shadow)}
.kp-panel h4 svg,.kp-panel h5 svg{color:var(--blue)}
.kp-panel .form-control,.kp-panel .form-select{border-radius:12px;padding:.65rem .9rem}
.kp-panel .form-control:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(37,99,235,.15)}
.kp-cart-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f7}
.kp-cart-row img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:var(--light)}
.kp-sub{min-width:110px;text-align:right}
.kp-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kp-pay input{display:none}
.kp-pay span{display:flex;align-items:center;gap:8px;padding:12px;border:1.5px solid #e2e8f0;border-radius:12px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s}
.kp-pay input:checked+span{border-color:var(--blue);background:rgba(37,99,235,.06);color:var(--blue)}
.kp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px;border:2px dashed #cbd5e1;border-radius:16px;cursor:pointer;color:var(--text2);transition:border-color .2s}
.kp-drop:hover{border-color:var(--blue);color:var(--blue)}
.kp-drop img{max-height:180px;border-radius:12px;display:none}
.kp-dark-panel{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff;border:0}
.kp-list{list-style:none;padding:0;margin:16px 0 0}
.kp-list li{display:flex;gap:10px;align-items:center;padding:8px 0;color:#cbd5e1}
.kp-list svg{color:var(--cyan)}
.kp-footer{background:var(--navy);color:#e2e8f0}
.kp-footer a{color:#cbd5e1;text-decoration:none;line-height:2}.kp-footer a:hover{color:var(--cyan)}
.text-secondary-kp{color:#94a3b8}
.kp-copy{border-top:1px solid rgba(255,255,255,.08);color:#64748B}
@media (max-width:576px){.kp-cart-row{flex-wrap:wrap}.kp-sub{min-width:auto}.kp-filter{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}