@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',system-ui,sans-serif}
:root{--p:#2563eb;--pd:#1d4ed8;--ps:#dbeafe;--tx:#0f172a;--mut:#64748b;--line:#e2e8f0;--bg:#f8fafc;--ok:#059669;--err:#dc2626;--sh:0 1px 2px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.06);--shl:0 12px 32px rgba(15,23,42,.12)}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{background:var(--bg);color:var(--tx);font-size:14.5px;line-height:1.6;display:flex;flex-direction:column;min-height:100vh}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}
img,svg,video,canvas{max-width:100%;display:block}
svg{vertical-align:middle;flex-shrink:0}
::selection{background:var(--p);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9px}
input,select,textarea{font:inherit;font-size:14px;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;width:100%;background:#fff;outline:none;margin-bottom:12px;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
label{font-size:12.5px;font-weight:600;color:#334155;display:block;margin-bottom:6px}
.container{max-width:1140px;margin:auto;padding:0 18px}
.konten-publik{flex:1;padding-bottom:36px}



.navbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}
.navbar-in{display:flex;align-items:center;gap:12px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:40px;height:40px;border-radius:11px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.brand-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand-txt{font-weight:700;font-size:15.5px;line-height:1.15}
.brand-txt small{display:block;font-size:10px;color:var(--mut);font-weight:500}
.search{flex:1;max-width:480px;display:flex;position:relative}
.search input{margin:0;padding:10px 44px 10px 16px;border-radius:999px;background:var(--bg)}
.search button{position:absolute;right:4px;top:4px;bottom:4px;width:36px;border:none;border-radius:999px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--tx)}
.icon-btn:hover{border-color:var(--p);color:var(--p)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.btn-menu{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
.menu{display:none;background:#fff;border-top:1px solid var(--line);padding:10px 18px 14px;flex-direction:column;gap:4px}
.menu.buka{display:flex}
.menu a{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 12px;border-radius:10px;font-weight:600;font-size:14px}
.menu a:hover{background:var(--ps);color:var(--pd)}
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:800;font-size:12px;color:var(--p)}
.lang-toggle:hover{border-color:var(--p);background:var(--ps)}



.hero{margin:22px 0 8px;background:linear-gradient(135deg,#eff6ff 0%,#fff 55%,#eef2ff 100%);border:1px solid var(--line);border-radius:22px;padding:44px 42px;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;max-width:100%;overflow:hidden}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--ps);color:var(--pd);font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:16px}
.hero h1{font-size:32px;line-height:1.2;margin-bottom:12px}
.hero h1 .accent{color:var(--p)}
.hero .lead{color:var(--mut);font-size:15px;max-width:100%;margin-bottom:20px;word-wrap:break-word}
.hero-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap}
.hero-stats span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#334155}
.hero-stats svg{color:var(--p)}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh);max-width:100%}
.hero-card h3{font-size:15px;margin-bottom:10px}
.f-list{list-style:none}
.f-list li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;font-weight:500;color:#334155;border-bottom:1px dashed var(--line)}
.f-list li:last-child{border:none}
.f-list svg{color:var(--ok)}
.hero-addr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 2px 0;font-size:12.5px;color:var(--mut)}



.banner-wrap{margin:22px 0 4px}
.banner-slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;max-width:100%}
.banner-slider::-webkit-scrollbar{display:none}
.banner-slide{flex:0 0 100%;scroll-snap-align:center;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.banner-slide img{width:100%;max-height:340px;object-fit:cover}
@media(min-width:768px){.banner-slide{flex:0 0 calc(50% - 6px)}}



.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 2px;scrollbar-width:none;max-width:100%}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:13px;color:#334155}
.chip:hover{border-color:var(--p);color:var(--p)}
.chip.aktif{background:var(--p);border-color:var(--p);color:#fff}
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 14px}
.sec-title h2{font-size:17.5px;font-weight:700;display:flex;align-items:center;gap:10px}
.sec-ic{width:34px;height:34px;border-radius:9px;background:var(--ps);display:inline-flex;align-items:center;justify-content:center;color:var(--pd)}
.more{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--p)}
.more:hover{text-decoration:underline}



.grid-produk{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px;max-width:100%}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s;display:block}
.card:hover{transform:translateY(-3px);box-shadow:var(--shl);border-color:#cbd5e1}
.p-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.p-ph{display:flex;align-items:center;justify-content:center;background:#f1f5f9;font-size:44px}
.p-disc{position:absolute;top:10px;left:10px;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.p-tipe{position:absolute;top:10px;right:10px;background:#0f172a;color:#fff;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.p-flash{position:absolute;bottom:10px;left:10px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
.card-body{padding:12px 14px 15px}
.p-nama{font-size:13.5px;font-weight:600;line-height:1.45;height:39px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.p-old{font-size:12px;color:#94a3b8;text-decoration:line-through;display:block;margin-top:5px}
.p-harga{font-weight:800;font-size:15px;margin-top:2px}
.kosong{background:#fff;border:1.5px dashed var(--line);border-radius:14px;padding:26px;text-align:center;color:var(--mut)}



.countdown{display:inline-flex;gap:6px;background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;color:#b91c1c;margin-bottom:12px}
.stok-info{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;margin-bottom:14px}
.stok-ada{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.stok-habis{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.stok-sedikit{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.rate-avg{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-size:13.5px;font-weight:700;color:#b45309}
.stars-big{color:#f59e0b;font-size:16px;letter-spacing:2px}
.ulasan-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ulasan-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.ulasan-item .u-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.ulasan-item .u-nama{font-weight:700;font-size:13.5px}
.ulasan-item .u-tgl{font-size:11.5px;color:var(--mut)}
.ulasan-item .u-stars{color:#f59e0b;font-size:13px;letter-spacing:2px}
.ulasan-item .u-isi{font-size:13.5px;color:#475569;margin-top:6px;line-height:1.7}
.star-input{display:flex;gap:4px;flex-direction:row-reverse;justify-content:flex-end;margin-bottom:12px}
.star-input input{display:none}
.star-input label{font-size:28px;color:#cbd5e1;cursor:pointer;margin:0;padding:0 2px}
.star-input label:hover,.star-input label:hover~label{color:#f59e0b}
.star-input input:checked~label{color:#f59e0b}



.berita-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.b-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;transition:.18s}
.b-card:hover{transform:translateY(-3px);box-shadow:var(--shl)}
.b-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.b-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#f1f5f9;font-size:40px}
.b-body{padding:14px 16px 16px}
.b-date{font-size:11.5px;color:var(--mut);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.b-title{font-size:14.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-excerpt{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artikel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;max-width:100%;margin:0 auto;box-shadow:var(--sh)}
.artikel h1{font-size:24px;margin:8px 0 6px;line-height:1.3}
.artikel .meta{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.artikel-img{width:100%;border-radius:12px;margin:12px 0 18px}
.artikel-isi{font-size:14.5px;line-height:1.9;color:#334155}



.crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);margin:18px 2px 12px;flex-wrap:wrap}
.crumb a{color:var(--p);font-weight:600}
.crumb a:hover{text-decoration:underline}
.detail-produk{display:grid;grid-template-columns:400px 1fr;gap:30px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--sh);max-width:100%}
.detail-media{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.detail-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.detail-emoji{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:#f1f5f9;font-size:96px}
.pill{display:inline-block;background:var(--ps);color:var(--pd);font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.detail-info h1{font-size:22px;line-height:1.35;margin:10px 0 6px}
.rate{display:flex;align-items:center;gap:8px;font-size:13px;color:#f59e0b;font-weight:700;margin-bottom:14px}
.rate small{color:var(--mut);font-weight:500}
.price-wrap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:14px 18px;margin:4px 0 14px}
.detail-harga{font-size:26px;font-weight:800}
.disc{background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.detail-desc{color:#475569;font-size:14px;margin-bottom:14px}
.feat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.feat{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:600;color:#334155}
.feat svg{color:var(--p)}
.form-beli{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stepper{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.stepper input{width:54px;text-align:center;margin:0;border:none;border-radius:0;font-weight:700}
.stepper button{width:38px;border:none;background:var(--bg);font-size:16px;font-weight:700;color:var(--pd)}



.judul-halaman{margin:22px 0 16px;font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
.tabel{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tabel th{background:var(--bg);text-align:left;padding:11px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);font-weight:600}
.tabel td{padding:11px 14px;border-top:1px solid var(--line)}
.tabel tr:hover td{background:#fafcff}
.input-qty{width:68px;text-align:center;margin:0}
.cart-aksi{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap;justify-content:flex-end}
.checkout-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:start;max-width:100%}
.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--sh);margin-bottom:18px;max-width:100%}
.box h3{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.baris-total{display:flex;justify-content:space-between;margin:8px 0;font-size:13.5px;gap:12px}
.baris-total.total{font-weight:700;font-size:16px;border-top:2px dashed var(--line);padding-top:12px;margin-top:12px}
.sukses-box{max-width:540px;margin:34px auto;text-align:center}
.sukses-ikon{width:76px;height:76px;margin:auto;border-radius:50%;background:#d1fae5;color:var(--ok);display:flex;align-items:center;justify-content:center}
.sukses-box h1{margin:14px 0 6px;font-size:21px}
.hint{font-size:12.5px;color:var(--mut);margin:14px 0;background:var(--bg);border-radius:10px;padding:10px 14px}
.center-box{max-width:480px;margin:0 auto}
.steps{list-style:none;margin:14px 0}
.steps li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px;font-weight:500}
.steps .dot{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--mut);flex-shrink:0}
.steps li.done .dot{background:#d1fae5;border-color:#a7f3d0;color:#047857}
.steps li.now .dot{background:var(--p);border-color:var(--p);color:#fff}
.steps li.now{font-weight:700}
.chan-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:12px}
.chan{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:600;cursor:pointer;background:#fff}
.chan input{width:auto;margin:0;accent-color:var(--p)}
.chan small{display:block;color:var(--mut);font-weight:500}
.dl-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.dl-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:#fff;font-size:13.5px;font-weight:600}
.dl-item small{display:block;color:var(--mut);font-weight:500}
.note-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:10px;padding:10px 14px;font-size:12.5px;margin:12px 0;line-height:1.6}
.kupon-row{display:flex;gap:8px;align-items:flex-start}
.kupon-row input{margin:0;flex:1;text-transform:uppercase}



.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;transition:.15s;cursor:pointer}
.btn.biru{background:var(--p);color:#fff}.btn.biru:hover{background:var(--pd)}
.btn.hijau{background:var(--ok);color:#fff}.btn.hijau:hover{background:#047857}
.btn.abu{background:#fff;color:#334155;border:1.5px solid var(--line)}.btn.abu:hover{border-color:#94a3b8}
.btn.merah{background:#fee2e2;color:#b91c1c}.btn.merah:hover{background:#fecaca}
.btn.batal{background:#fff;border:1.5px solid var(--line);color:#64748b;padding:10px 18px;font-weight:600;font-size:13.5px}
.btn.batal:hover{border-color:#94a3b8;color:var(--tx);background:var(--bg)}
.btn.love{background:#fff;color:#64748b;border:1.5px solid var(--line)}
.btn.love:hover{border-color:#f43f5e;color:#f43f5e}
.btn.love.ada{background:#fff1f2;color:#e11d48;border-color:#fda4af}
.btn.kecil{padding:7px 13px;font-size:12.5px;border-radius:9px}
.alert{padding:12px 16px;border-radius:10px;font-size:13.5px;margin:14px 0;font-weight:600}
.alert-sukses{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}



.wl-item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.wl-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0}
.wl-emoji{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:10px;background:#f1f5f9;font-size:28px;flex-shrink:0}
.wl-info{flex:1;min-width:0}
.wl-info b{font-size:13.5px;display:block;line-height:1.4}
.wl-info small{color:var(--mut);font-weight:700}
.wl-aksi{display:flex;gap:6px;flex-wrap:wrap}



.paginasi{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pg-btn{display:inline-flex;align-items:center;padding:8px 14px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:#334155}
.pg-btn:hover{border-color:var(--p);color:var(--p)}
.pg-off{opacity:.4;cursor:default}
.pg-num{min-width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:#fff;color:#334155}
.pg-num:hover{border-color:var(--p);color:var(--p)}
.pg-num.aktif{background:var(--p);border-color:var(--p);color:#fff}
.pg-dots{color:var(--mut);padding:0 2px}
.vrow{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px;font-weight:600}
.vrow .vlabel{width:170px;flex-shrink:0}
.vrow .vtrack{flex:1;height:9px;border-radius:6px;background:var(--bg);overflow:hidden}
.vrow .vbar{height:100%;border-radius:6px;background:var(--p)}
.vrow .vjml{width:60px;text-align:right;color:var(--mut);font-weight:700}
.ranking-num{display:inline-flex;width:24px;height:24px;border-radius:7px;background:var(--ps);color:var(--pd);font-size:12px;font-weight:700;align-items:center;justify-content:center;margin-right:6px}



.footer{background:var(--tx);color:#94a3b8;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;padding:42px 18px 32px}
.footer h3{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px}
.footer p{display:flex;align-items:flex-start;gap:9px;margin:8px 0;font-size:13.5px}
.footer p svg{margin-top:3px;color:#60a5fa}
.pay{display:inline-block;border:1px solid #334155;border-radius:8px;padding:5px 12px;font-size:11.5px;font-weight:600;color:#cbd5e1;margin:4px 4px 0 0}
.footer-bottom{border-top:1px solid #1e293b;text-align:center;padding:16px;font-size:12.5px}
.wa-float{position:fixed;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;background:var(--ok);color:#fff;font-weight:600;border-radius:999px;padding:12px 20px;font-size:13.5px;box-shadow:0 8px 24px rgba(5,150,105,.4);z-index:70}



.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--bg)}
.login-box{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shl);padding:34px 30px;width:100%;max-width:390px}
.login-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.login-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.login-box h2{text-align:center;font-size:19px}
.login-sub{text-align:center;font-size:13px;color:var(--mut);margin:4px 0 20px}
.login-back{text-align:center;margin-top:14px;font-size:12.5px}
.login-back a{color:var(--p);font-weight:600}



.layout{display:flex;min-height:100vh;background:var(--bg);width:100%;max-width:100%}
.sidebar{align-self:flex-start;width:242px;background:#0f172a;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.side-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;border-bottom:1px solid #1e293b;margin-bottom:14px}
.side-logo{width:38px;height:38px;border-radius:10px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.side-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.side-txt{color:#fff;font-weight:700;font-size:14px;line-height:1.2}
.side-txt small{display:block;font-size:10.5px;color:#64748b;font-weight:500}
.side-toggle{display:none}
.side-label{font-size:10px;letter-spacing:1.2px;color:#475569;font-weight:700;padding:12px 12px 6px;text-transform:uppercase}
.side-nav{flex:1;display:flex;flex-direction:column;gap:3px}
.sidebar a{display:flex;align-items:center;gap:11px;color:#94a3b8;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;transition:.15s}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.aktif{background:var(--p);color:#fff;font-weight:600}
a.side-out{margin-top:auto;border-top:1px solid #1e293b;padding-top:14px;color:#f87171!important}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;max-width:100%}
.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px}
.topbar h1{font-size:17px;font-weight:700}
.top-user{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);padding:6px 14px 6px 6px;border-radius:999px;font-size:13px;font-weight:600}
.ava{width:30px;height:30px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.konten{flex:1;padding:22px 24px;max-width:100%}
.adm-footer{border-top:1px solid var(--line);background:#fff;padding:14px 24px;text-align:center;font-size:12.5px;color:var(--mut)}
.adm-footer b{color:#334155}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh)}
.stat-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.i-blue{background:#dbeafe;color:#1d4ed8}.i-amber{background:#fef3c7;color:#b45309}
.i-sky{background:#e0f2fe;color:#0369a1}.i-green{background:#d1fae5;color:#047857}
.stat b{font-size:20px;display:block;line-height:1.2}
.stat-lbl{font-size:12px;color:var(--mut);font-weight:500}
.biru-t{color:var(--p)}.hijau-t{color:var(--ok)}.merah-t{color:var(--err)}
.chart-wrap{height:280px;position:relative}
.chart-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chart-head h3{margin:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar span{font-size:13px;color:var(--mut);font-weight:500}
.filter-status{display:flex;gap:7px;flex-wrap:wrap}
.thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.thumb-emoji{display:flex;align-items:center;justify-content:center;background:#f1f5f9;font-size:20px}
.aksi{display:flex;gap:6px;align-items:center}
.aksi form{display:inline}
.status{padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.4px}
.status-baru{background:#dbeafe;color:#1d4ed8}
.status-diproses{background:#fef3c7;color:#b45309}
.status-selesai{background:#d1fae5;color:#047857}
.status-dibatalkan{background:#fee2e2;color:#b91c1c}
.form-lebar{max-width:1100px;margin:0 auto}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-2col .penuh{grid-column:1/-1}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.settings-grid .box{margin-bottom:0}
.cek{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;cursor:pointer;padding:6px 0}
.cek input{width:auto;margin:0;accent-color:var(--p)}
.redup{color:#94a3b8;font-size:12px}
hr{border:none;border-top:1.5px dashed var(--line);margin:14px 0}
.upload-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.upload-label{margin-top:14px}
#gambar-preview{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
#logo-preview{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
#favicon-preview{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.upload-box{position:relative;flex:1;border:1.5px dashed var(--line);border-radius:12px;padding:20px 16px;text-align:center;color:var(--mut);font-size:13px}
.upload-box:hover{border-color:var(--p);color:var(--p)}
.upload-box svg{display:block;margin:0 auto 6px}
.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}



@media(max-width:920px){
  .hero{grid-template-columns:1fr;padding:30px 24px}
  .hero h1{font-size:24px}
  .search{display:none}
  .layout{flex-direction:column!important}
  .sidebar{width:100%!important;height:auto!important;min-height:0!important;position:sticky!important;top:0!important;z-index:60;flex-direction:column!important;overflow:visible!important;padding:10px 14px 6px!important;box-shadow:0 2px 12px rgba(15,23,42,.25)}
  .side-brand{width:100%!important;border:none!important;margin:0!important;padding:2px 4px 10px!important;border-bottom:1px solid #1e293b}
  .side-txt{font-size:12.5px}
  .side-txt small{display:none!important}
  .side-toggle{display:inline-flex!important;align-items:center;justify-content:center;margin-left:auto;width:40px;height:40px;border-radius:10px;border:1px solid #334155;background:rgba(255,255,255,.07);color:#fff;font-size:18px}
  .side-nav{display:none!important;flex-direction:column!important;width:100%;padding:8px 0}
  a.side-out{display:none!important;width:100%;margin:0!important;border-top:1px solid #1e293b;padding:12px!important}
  .sidebar.buka .side-nav{display:flex!important}
  .sidebar.buka a.side-out{display:flex!important}
  .sidebar.buka{padding-bottom:14px}
  .side-nav a{justify-content:center!important;font-size:14px;padding:12px 14px!important}
  .side-label{text-align:center}
  a.side-out{justify-content:center!important;text-align:center}
  .detail-produk{grid-template-columns:1fr!important}
  .checkout-grid,.form-2col,.settings-grid{grid-template-columns:1fr!important}
  .konten{padding:16px!important}
  .topbar{padding:12px 16px!important}
  .tabel{display:block;overflow-x:auto}
  .form-lebar{max-width:100%!important}
}
@media(max-width:520px){
  .hero{padding:24px 18px}
  .hero h1{font-size:20px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .topbar h1{font-size:14.5px}
  .grid-produk{grid-template-columns:repeat(2,1fr)}
  .detail-produk{padding:16px}
  .detail-harga{font-size:21px}
  .btn{width:100%}
  .btn.batal{width:auto}
  .form-beli .stepper{width:100%}
  .form-beli .stepper input{flex:1}
  .cart-aksi{flex-direction:column}
  .chan-list{grid-template-columns:1fr}
}



.akun-isi{font-family:'Consolas',monospace;word-break:break-all;font-size:13px;font-weight:600;background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px 12px;display:inline-block}

/* ==== MOBILE-FIX-25: override paling akhir ==== */
@media screen and (max-width:920px){
  html,body{overflow-x:clip;max-width:100%}
  .container{max-width:100%;width:100%;padding:0 14px}
  .navbar-in{padding:10px 12px;gap:8px}
  .brand-logo{width:36px;height:36px}
  .brand-txt{font-size:13.5px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-txt small{display:none}
  .nav-actions{gap:7px;margin-left:auto}
  .lang-toggle,.icon-btn,.btn-menu{width:37px;height:37px;border-radius:10px;background:#fff;border:1.5px solid #e2e8f0;display:flex;align-items:center;justify-content:center}
  .nav-actions a[href*="wishlist"],.nav-actions a[href*="riwayat"]{display:none}
  .hero{display:block;padding:26px 20px}
  .hero h1{font-size:23px}
  .hero-card{margin-top:18px}
  .grid-produk{grid-template-columns:repeat(2,1fr)}
  .detail-produk{display:block}
  .detail-media{margin-bottom:16px}
  .checkout-grid,.settings-grid,.form-2col{display:block}
  .stat-grid{grid-template-columns:1fr 1fr}
  .layout{display:block}
  .sidebar{width:100%!important;height:auto!important;min-height:0!important}
  .side-toggle{display:inline-flex!important}
  .side-nav{display:none}
  .sidebar.buka .side-nav{display:flex}
  a.side-out{display:none}
  .sidebar.buka a.side-out{display:flex}
  .tabel{display:block;overflow-x:auto}
  .footer-grid{grid-template-columns:1fr}
  .artikel{padding:18px}
}
@media screen and (max-width:520px){
  .hero h1{font-size:20px}
  .grid-produk{grid-template-columns:repeat(2,1fr)}
}

/* ===== POLESAN MOBILE ===== */
@media(max-width:920px){
  .konten-publik{padding-bottom:30px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .sec-title{margin:24px 0 12px}
  .grid-produk{margin-bottom:26px}
  .footer{margin-top:16px}
}
@media(max-width:520px){
  .hero-stats{grid-template-columns:1fr}
}

/* ===== POLESAN MOBILE ===== */
@media(max-width:920px){
  .konten-publik{padding-bottom:30px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .sec-title{margin:24px 0 12px}
  .grid-produk{margin-bottom:26px}
  .footer{margin-top:16px}
}
@media(max-width:520px){
  .hero-stats{grid-template-columns:1fr}
}

/* ===== POLESAN MOBILE ===== */
@media(max-width:920px){
  .konten-publik{padding-bottom:30px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .sec-title{margin:24px 0 12px}
  .grid-produk{margin-bottom:26px}
  .footer{margin-top:16px}
}
@media(max-width:520px){
  .hero-stats{grid-template-columns:1fr}
}

/* ===== Jarak bawah konten sebelum footer (mobile) ===== */
@media(max-width:920px){
  .konten-publik{padding-bottom:36px}
  .sec-title:last-of-type{margin-bottom:14px}
  .grid-produk:last-of-type{margin-bottom:0}
  .footer{margin-top:8px}
}

/* ===== JARAK ATAS FOOTER (mobile = seperti PC) ===== */
@media(max-width:920px){
  .footer{margin-top:40px}
  .footer-grid{padding-top:38px}
  .konten-publik{padding-bottom:20px}
}

/* ===== Jarak bawah footer (mobile) ===== */
@media(max-width:920px){
  .footer-grid{padding-bottom:44px}
  .footer-bottom{padding-top:18px;padding-bottom:20px}
}

/* ===== Hapus spinner panah naik-turun bawaan browser ===== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ===== Stepper input muat 4 digit (1000) ===== */
.stepper input{width:74px!important;min-width:74px!important;max-width:none!important;padding:10px 6px!important;font-size:15px!important;text-align:center}
.stepper button{width:42px!important}

/* ==== STEPPER FIX FINAL: lebar tetap, tak bisa membesar ==== */
.stepper input{width:74px!important;min-width:74px!important;max-width:74px!important}
.stepper{max-width:none!important}