:root{--accent:#3573ea;--accent2:#5b8ff5;--ink:#20242e;--muted:#7c8496;--line:#edeff3;--bg:#fcfcfd;--card:#fff;--shadow:0 18px 45px rgba(20,30,60,.07);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.container{width:min(1160px,92%);margin-inline:auto}

/* ===== Elemen animasi lembut di background ===== */
.bg-orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.10;pointer-events:none;z-index:-2;animation:orbit 22s ease-in-out infinite}
.orb-a{width:380px;height:380px;background:#7fb0ff;top:-120px;right:-90px;animation-delay:0s}
.orb-b{width:320px;height:320px;background:#ffb3d1;bottom:-120px;left:-80px;animation-delay:4s}
@keyframes orbit{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-20px) scale(1.08)}66%{transform:translate(-20px,18px) scale(.95)}}
.glass{background:rgba(255,255,255,.9);border:1px solid rgba(237,239,243,.9);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
#particles{position:fixed;inset:0;pointer-events:none;z-index:-1}
.particle{position:absolute;width:3px;height:3px;background:#b9c8ea;border-radius:50%;opacity:.35;animation:float 12s linear infinite}
@keyframes float{from{transform:translateY(100vh);opacity:0}20%{opacity:.35}to{transform:translateY(-20vh);opacity:0}}

/* ===== Header: soft putih, aksen tipis ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,252,253,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.topbar{background:#fff;color:var(--muted);font-size:12px;text-align:center;padding:7px 10px;letter-spacing:.3px;border-bottom:1px solid var(--line)}
.topbar b{color:var(--accent)}
.category-bar{background:#fff;border-bottom:1px solid var(--line)}
.category-bar .container{display:flex;align-items:center;gap:24px;overflow-x:auto;height:42px;font-size:13px;font-weight:600;color:var(--ink)}
.category-bar a{white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;transition:.2s}
.category-bar a:hover{color:var(--accent);border-color:var(--accent)}
.category-bar::-webkit-scrollbar{display:none}
.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800;color:var(--ink)}
.brand img{width:46px;height:46px;object-fit:contain}
.brand span{letter-spacing:.3px}
.brand b{display:block;font-size:10px;letter-spacing:3px;color:var(--accent)}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:650}
.nav a{transition:.25s}
.nav a:hover{color:var(--accent)}
.nav-muted{color:var(--muted)}
.cart-pill{display:flex;gap:7px;align-items:center;padding:9px 12px;border-radius:99px;background:#f1f5ff;color:var(--accent)}
.cart-pill i{font-style:normal;background:var(--accent);color:#fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.menu-btn{display:none;border:0;background:none;font-size:24px}
.flash{margin-top:14px;padding:12px 16px;border-radius:12px}
.flash.success,.alert.success{background:#e9fbf2;color:#0a7a43}
.flash.danger,.alert.danger{background:#fff0f1;color:#bd2637}
.flash.warning,.alert.warning{background:#fff7dc;color:#8a6400}

/* ===== Hero: banner soft putih dengan blob animasi ===== */
.hero-banner{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:linear-gradient(180deg,#fdfdfe,#f5f7fb)}
.hero-banner .bg-orb{position:absolute}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:orbit 18s ease-in-out infinite}
.hero-blob.b1{width:260px;height:260px;background:#a9c8ff;top:-60px;left:8%}
.hero-blob.b2{width:220px;height:220px;background:#ffd0e0;bottom:-70px;right:10%;animation-delay:3s}
.hero-blob.b3{width:180px;height:180px;background:#c9f0e0;top:20%;right:22%;animation-delay:6s}
.hero-banner-inner{position:relative;z-index:2;max-width:720px;padding:60px 20px;color:var(--ink)}
.hero-banner .eyebrow{color:var(--accent)}
.hero-banner h1{font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-1.5px;margin:12px 0 16px;color:var(--ink)}
.hero-banner h1 span{color:var(--accent)}
.hero-banner p{font-size:16px;line-height:1.7;color:var(--muted);max-width:560px;margin-inline:auto}
.hero-actions{display:flex;gap:12px;margin:26px 0 6px;justify-content:center;flex-wrap:wrap}
.hero-banner .hero-stats{display:flex;gap:30px;justify-content:center;margin-top:22px}
.hero-banner .hero-stats div{display:flex;flex-direction:column}
.hero-banner .hero-stats b{font-size:20px;color:var(--accent)}
.hero-banner .hero-stats small{color:var(--muted)}

.btn{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--line);border-radius:13px;padding:12px 18px;font-weight:750;transition:transform .2s,box-shadow .2s,background .2s;color:var(--ink);background:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(20,30,60,.1)}
.btn.primary{background:var(--accent);color:#fff;border:0;box-shadow:0 10px 22px rgba(53,115,234,.28)}
.btn.primary:hover{background:#2c62d1}
.btn.ghost{background:#fff}
.btn.ghost.on-dark{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.danger-outline{color:#bd2637;border-color:#ffc7ce;background:#fff}
.btn.small{padding:7px 10px;font-size:12px}
.btn.full{width:100%}

/* ===== Strip ikon kategori ===== */
.icon-strip{display:flex;gap:14px;overflow-x:auto;padding:22px 0 6px}
.icon-strip::-webkit-scrollbar{display:none}
.icon-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;text-align:center}
.icon-chip .ic{width:60px;height:60px;border-radius:18px;background:#f4f6fa;display:grid;place-items:center;font-size:24px;color:var(--accent);transition:.25s;border:1px solid var(--line)}
.icon-chip:hover .ic{background:var(--accent);color:#fff;transform:translateY(-4px);border-color:var(--accent)}
.icon-chip span{font-size:12px;font-weight:650;color:var(--ink)}

.eyebrow{font-size:11px;letter-spacing:3px;font-weight:850;color:var(--accent)}
.section{padding:60px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}
.section-head h2,.cta h2{font-size:32px;letter-spacing:-1px;margin:7px 0 0}
.section-head>a{color:var(--accent);font-weight:750}

/* ===== Stats band: kartu putih lembut ===== */
.stats-band{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 20px;box-shadow:var(--shadow)}
.stats-band div{text-align:center}
.stats-band b{display:block;font-size:30px;color:var(--accent)}
.stats-band small{color:var(--muted);letter-spacing:.5px}

.brand-strip{display:flex;gap:24px;overflow:auto;padding:10px 0}
.brand-strip .chip{flex:0 0 auto;padding:14px 22px;border-radius:14px;font-weight:800;color:var(--ink);white-space:nowrap;background:#f4f6fa}

.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.category-card{padding:22px;border-radius:var(--radius);transition:.25s}
.category-card:hover{transform:translateY(-6px);border-color:#d7e2f7}
.category-card span{font-size:26px;color:var(--accent)}
.category-card h3{margin:14px 0 4px;font-size:15px}
.category-card p,.product-body p{margin:0;color:var(--muted);font-size:13px}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{overflow:hidden;border-radius:18px;transition:.25s;position:relative}
.product-card:hover{transform:translateY(-5px)}
.product-img{display:block;height:200px;background:#f7f8fb;overflow:hidden;position:relative}
.product-img img{width:100%;height:100%;object-fit:contain;transition:.35s}
.product-card:hover .product-img img{transform:scale(1.05)}
.placeholder{height:100%;display:grid;place-items:center;color:#c3cee3;font-weight:900;font-size:36px;letter-spacing:8px}
.placeholder.big{font-size:80px}
.product-body{padding:15px}
.product-body small{color:var(--accent);font-weight:750}
.product-body h3{margin:8px 0 8px;font-size:16px;min-height:40px}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.price-row strong{font-size:17px;color:var(--ink)}
.old-price{font-size:12px;color:#a3aebc;text-decoration:line-through}
.badge-sale{position:absolute;top:10px;left:10px;background:#e5384f;color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;z-index:2}
.view-count{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12px}
.product-body .btn{margin-top:11px}

.cta{margin-bottom:70px;padding:32px 36px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);flex-wrap:wrap;gap:16px;box-shadow:var(--shadow)}
.cta p{color:var(--muted)}

/* ===== Footer: soft putih juga, bukan gelap ===== */
.footer{background:#fff;color:var(--muted);margin-top:60px;padding:45px 0 0;border-top:1px solid var(--line)}
.footer-columns{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:35px;border-bottom:1px solid var(--line)}
.footer-col h4{color:var(--ink);font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin:0 0 14px}
.footer-col a,.footer-col p{display:block;margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.6}
.footer-col a:hover{color:var(--accent)}
.footer-brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:18px;font-weight:800;margin-bottom:12px}
.footer-brand img{width:38px;height:38px;object-fit:contain}
.footer-hours b{color:var(--ink);display:block;font-size:12px;margin-top:8px}
.marketplace-icons{display:flex;gap:10px;margin-top:6px}
.marketplace-icons a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;transition:.2s;box-shadow:0 4px 14px rgba(20,30,60,.12)}
.marketplace-icons a:hover{transform:translateY(-3px)}
.marketplace-icons svg{width:19px;height:19px}
.copyright{text-align:center;padding:18px;font-size:12px}

.page-banner{padding:65px 0 40px}
.page-banner.compact{padding-bottom:25px}
.page-banner h1{font-size:42px;letter-spacing:-1.5px;margin:10px 0}
.page-banner p{color:var(--muted);font-size:16px}

.catalog-layout{display:grid;grid-template-columns:210px 1fr;gap:25px;padding-bottom:70px}
.filter{border-radius:18px;padding:20px;height:max-content;position:sticky;top:100px}
.filter h3{margin-top:0}
.filter a{display:block;padding:11px 12px;border-radius:10px;color:var(--muted);margin:4px 0}
.filter a.active,.filter a:hover{background:#f1f5ff;color:var(--accent);font-weight:750}
.searchbar{display:flex;gap:10px;padding:9px;border-radius:15px;margin-bottom:20px}
.searchbar input{flex:1;border:0;background:transparent;padding:9px;outline:none}
.auth-page{min-height:600px;display:grid;place-items:center;padding:50px 0}
.auth-card{width:min(460px,100%);padding:35px;border-radius:24px}
.auth-card h1{font-size:34px;margin:8px 0 15px}
.auth-card>p{color:var(--muted)}
.auth-logo{width:90px;height:90px;object-fit:contain;margin-bottom:15px}
.form-card label,.auth-card label{display:block;font-size:13px;font-weight:700;margin:14px 0;color:#3d4b63}
.form-card input,.form-card textarea,.form-card select,.auth-card input,.inline-form select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 12px;outline:none}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus,.auth-card input:focus{border-color:#a7c2f5;box-shadow:0 0 0 3px #eef4ff}
.alert{padding:12px 14px;border-radius:11px;margin:14px 0;font-size:13px}
.cart-layout,.checkout-grid,.order-detail-grid{display:grid;grid-template-columns:1.5fr .7fr;gap:22px;padding-bottom:70px}
.cart-items,.summary,.form-card,.order-box{border-radius:20px;padding:24px}
.cart-row{display:grid;grid-template-columns:70px 1fr 75px 120px 25px;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-row:last-of-type{border-bottom:0}
.cart-thumb{width:70px;height:70px;border-radius:12px;background:#f4f6fa;display:grid;place-items:center;overflow:hidden;color:var(--accent);font-weight:900}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-info{display:flex;flex-direction:column;gap:4px}
.cart-info small,.cart-info strong{font-size:12px}
.cart-info strong{color:var(--accent)}
.qty{width:70px;padding:8px;border:1px solid var(--line);border-radius:9px}
.row-subtotal{font-weight:800}
.remove{font-size:25px;color:#a2adbc}
.summary{height:max-content}
.summary h2{font-size:33px;margin:7px 0 20px}
.total-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px;margin-top:17px}
.summary p,.summary small{color:var(--muted);line-height:1.6}
.mini-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:13px}
.empty{text-align:center;padding:65px 30px;border-radius:22px;grid-column:1/-1}
.empty-icon{font-size:50px}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:65px 0}
.detail-media{border-radius:24px;overflow:hidden;background:#f7f8fb}
.detail-media-main{height:440px;display:grid;place-items:center}
.detail-media-main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;padding:14px;overflow:auto}
.thumbs img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;border:2px solid transparent;cursor:pointer}
.thumbs img.active{border-color:var(--accent)}
.detail-copy{padding:25px 0}
.detail-copy h1{font-size:44px;line-height:1.08;letter-spacing:-1.5px;margin:10px 0}
.price-xl{font-size:30px;color:var(--ink);font-weight:900;margin:20px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-xl .old-price{font-size:17px}
.muted{color:var(--muted)}
.description{line-height:1.8;margin:22px 0;color:#52627b}
.buy-form{display:flex;gap:10px}
.buy-form input{width:90px;border:1px solid var(--line);border-radius:12px;padding:12px}

.payment-page{min-height:600px;display:grid;place-items:center;padding:50px 0}
.payment-card{width:min(520px,100%);padding:40px;border-radius:26px;text-align:center}
.payment-card h1{font-size:38px;margin:8px 0}
.order-code{font-weight:800;color:#52627b}
.pay-total{font-size:30px;font-weight:900;color:var(--ink);margin:22px 0}
.success-icon{width:70px;height:70px;border-radius:50%;background:#e7fbef;color:#0b8a4a;display:grid;place-items:center;font-size:40px;margin:0 auto 20px}
.text-link{display:inline-block;margin-top:20px;color:var(--accent);font-weight:700}
.status{display:inline-flex;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:800}
.status.warning{background:#fff1c9;color:#8a6300}
.status.danger{background:#ffe4e8;color:#b3263c}
.status.info{background:#e4f2ff;color:#0768c8}
.status.success{background:#e5faef;color:#087d45}
.order-list{display:grid;gap:13px;padding-bottom:70px}
.order-card{padding:20px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;transition:.2s}
.order-card:hover{transform:translateX(4px)}
.order-card h3{margin:8px 0 3px}
.order-card small,.order-card>div:last-child span{display:block;color:var(--muted);font-size:12px}
.order-card>div:last-child{text-align:right}
.order-card>div:last-child b{display:block;font-size:17px;margin-bottom:8px}
.order-item{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.order-item small{display:block;color:var(--muted);margin-top:4px}
.order-box h2{margin-top:0}
.order-box hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.order-box form{margin-top:10px}

.admin-head{padding:50px 0 25px;display:flex;justify-content:space-between;align-items:center}
.admin-head h1{font-size:40px;margin:8px 0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.stat{padding:22px;border-radius:18px}
.stat small{display:block;color:var(--muted);margin-bottom:10px}
.stat b{font-size:32px;color:var(--accent)}
.admin-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:22px auto}
.admin-actions-5{grid-template-columns:repeat(5,1fr)}
.admin-link{padding:20px;border-radius:18px;display:grid;gap:7px}
.admin-link b{font-size:16px}
.admin-link small{color:var(--muted)}
.admin-table{padding:24px;border-radius:20px;margin-bottom:70px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.table-product{display:flex;align-items:center;gap:10px}
.table-product img{width:38px;height:38px;object-fit:contain;border-radius:8px;background:#f4f6fa}
.actions{display:flex;gap:8px;align-items:center}
.actions a{color:var(--accent);font-weight:750}
.actions button{border:0;background:none;color:#c52a3e;font-weight:700}
.admin-form-grid{display:grid;grid-template-columns:370px 1fr;gap:20px;align-items:start}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex!important;align-items:center;gap:8px}
.check input{width:auto!important;margin:0!important}
.filter-tabs{display:flex;gap:8px;margin-bottom:20px;overflow:auto}
.filter-tabs a{padding:9px 13px;border-radius:99px;background:#fff;border:1px solid var(--line);white-space:nowrap;font-size:12px;font-weight:700}
.filter-tabs a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.inline-form{display:flex;gap:7px;align-items:center}
.inline-form select{width:auto;margin:0;padding:8px}
.reveal{animation:reveal .8s both}
@keyframes reveal{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.existing-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.existing-thumbs .thumb-wrap{position:relative;width:60px;height:60px}
.existing-thumbs img{width:60px;height:60px;object-fit:contain;background:#f4f6fa;border-radius:8px}
.existing-thumbs button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#e5384f;color:#fff;border:0;font-size:11px;line-height:1;cursor:pointer}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{padding:20px;border-radius:18px}
.review-card .stars{color:#f5a900;letter-spacing:2px}
.review-card h4{margin:10px 0 4px}
.review-card p{color:var(--muted);font-size:14px;line-height:1.6}
.review-card small{color:var(--accent);font-weight:700}
.import-box{padding:24px;border-radius:20px}
.import-box ol{padding-left:20px;color:var(--muted);line-height:1.9}

@media(max-width:900px){.nav{gap:12px}.nav span{display:none}.category-grid{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.catalog-layout,.cart-layout,.checkout-grid,.order-detail-grid,.admin-form-grid{grid-template-columns:1fr}.filter{position:static}.stat-grid{grid-template-columns:repeat(2,1fr)}.admin-actions,.admin-actions-5{grid-template-columns:1fr 1fr}.product-detail{grid-template-columns:1fr}.detail-media-main{height:340px}.footer-columns{grid-template-columns:1fr 1fr}.filter-tabs{margin-top:0}.stats-band{grid-template-columns:1fr}.review-grid{grid-template-columns:1fr 1fr}.hero-banner .hero-stats{gap:18px;flex-wrap:wrap}}
@media(max-width:650px){.menu-btn{display:block}.nav{display:none;position:absolute;left:4%;right:4%;top:70px;background:#fff;padding:18px;border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-open .nav{display:flex}.nav a{padding:8px}.brand span{font-size:16px}.hero-banner h1{font-size:32px}.hero-banner{min-height:300px}.icon-chip{width:78px}.icon-chip .ic{width:50px;height:50px;font-size:20px}.category-grid{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr}.page-banner h1,.detail-copy h1{font-size:34px}.cart-row{grid-template-columns:55px 1fr 65px 90px 20px;gap:7px}.cart-thumb{width:55px;height:55px}.row-subtotal{font-size:12px}.cart-info h3{font-size:13px}.cta{flex-direction:column;align-items:flex-start;gap:20px}.footer-columns{grid-template-columns:1fr}.admin-head{align-items:flex-start;gap:10px}.stat b{font-size:28px}.review-grid{grid-template-columns:1fr}.admin-actions-5{grid-template-columns:1fr}}