:root{--red:#c0281c;--red-dark:#9c1f15;--steel:#8d969d;--steel-light:#eef0f2;--ink:#22262a;}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:#fff}
a{color:inherit}
.btn-brand{background:var(--red);color:#fff;border:0;transition:.25s}
.btn-brand:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px rgba(192,40,28,.3)}
.text-red{color:var(--red)}
/* Loader */
#loader{position:fixed;inset:0;background:#fff;z-index:2000;display:flex;align-items:center;justify-content:center;transition:opacity .4s}
#loader.hide{opacity:0;pointer-events:none}
.spinner{width:48px;height:48px;border:5px solid var(--steel-light);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Navbar */
.main-nav{background:#fff;border-bottom:1px solid #e3e6e8;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.main-nav.scrolled{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.logo-nav{height:56px;width:56px;object-fit:contain}
.logo-footer{height:90px;width:90px;object-fit:contain;background:#fff;border-radius:50%}
.logo-login{height:110px;width:110px;object-fit:contain}
.main-nav .nav-link{font-weight:500}
.main-nav .nav-link:hover{color:var(--red)}
.cart-badge{position:absolute;top:-6px;right:-6px;font-size:.65rem}
/* Hero */
.hero{position:relative;padding:110px 0;border-bottom:4px solid var(--red);
 background:
  linear-gradient(115deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,0) 100%),
  linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,rgba(255,255,255,.12) 1px 2px,rgba(0,0,0,.03) 2px 4px),
  linear-gradient(135deg,#b7bec4 0%,#e9edef 30%,#a9b1b8 55%,#eef1f3 78%,#9aa3ab 100%)}
/* Jika ada foto assets/images/hero-bg.jpg, dipakai sebagai latar besi */
.hero.has-photo{background:var(--hero-img) center/cover no-repeat}
.hero.has-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,17,19,.72) 0%,rgba(15,17,19,.45) 38%,rgba(15,17,19,.08) 65%,transparent 85%)}
.hero.has-photo .container{position:relative;z-index:1}
.hero.has-photo h1{color:#fff}
.hero.has-photo h1 .text-red{color:#ff6a5c}
.hero.has-photo p{color:#e7e9eb}
.hero h1{font-weight:700;font-size:clamp(1.9rem,4vw,3rem)}
.hero p{max-width:560px;color:#555}
.variant-opt{position:relative;display:inline-block}
.variant-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.variant-opt span{display:inline-block;padding:.4rem 1rem;border:1.5px solid #d7dbde;border-radius:8px;font-size:.9rem;transition:.15s;color:var(--ink)}
.variant-opt input:checked+span{border-color:var(--red);background:#fdecea;color:var(--red);font-weight:600}
.variant-opt input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.hero-btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent;transition:.2s}
.hero-btn-ghost:hover{background:var(--ink);color:#fff}
.hero.has-photo .hero-btn-ghost{border-color:#fff;color:#fff;background:rgba(15,17,19,.35);backdrop-filter:blur(2px)}
.hero.has-photo .hero-btn-ghost:hover{background:#fff;color:var(--ink)}
/* Section */
.section{padding:70px 0}
.section-title{font-weight:700;margin-bottom:8px}
.section-title::after{content:"";display:block;width:60px;height:4px;background:var(--red);margin-top:8px;border-radius:2px}
.bg-steel{background:var(--steel-light)}
/* Kategori & keunggulan */
.cat-card,.adv-card{border:1px solid #e3e6e8;border-radius:14px;padding:24px 16px;text-align:center;transition:.3s;background:#fff;height:100%;display:block;text-decoration:none}
.cat-card:hover,.adv-card:hover{transform:translateY(-6px);box-shadow:0 12px 26px rgba(0,0,0,.1);border-color:var(--red)}
.cat-card i,.adv-card i{font-size:2.2rem;color:var(--red)}
.cat-card h6{margin-top:10px;font-weight:600}
/* Produk */
.product-card{border:1px solid #e3e6e8;border-radius:14px;overflow:hidden;transition:.3s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.img-wrap{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--steel-light)}
.img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s}
.product-card:hover .img-wrap img{transform:scale(1.07)}
.product-card .card-title{font-size:.95rem;font-weight:600;min-height:2.6em}
.product-card .card-title a{text-decoration:none}
.price{color:var(--red);font-weight:700}
.stars{color:#e5a400;font-size:.8rem}
/* CTA */
.cta{background:linear-gradient(120deg,#2b2f33,#4b5157);color:#fff}
/* Footer */
.site-footer{background:#23272b;color:#cfd4d8}
.site-footer h6{color:#fff}
.footer-links a{text-decoration:none;color:#cfd4d8;line-height:2}
.footer-links a:hover{color:#fff}
.footer-bottom{background:#1a1d20}
.wa-float{position:fixed;right:18px;bottom:18px;width:54px;height:54px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:1000;transition:.25s}
.wa-float:hover{transform:scale(1.1);color:#fff}
/* Auth & admin */
.auth-card{max-width:440px;margin:50px auto;border:1px solid #e3e6e8;border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.admin-side{background:#23272b;min-height:100vh}
.admin-side a{color:#cfd4d8;text-decoration:none;display:block;padding:11px 18px;border-radius:8px;margin-bottom:4px}
.admin-side a:hover,.admin-side a.active{background:var(--red);color:#fff}
.stat-card{border-left:5px solid var(--red);border-radius:12px}
.cart-img{width:70px;height:70px;object-fit:cover;border-radius:8px}
.detail-img{width:100%;border-radius:14px;border:1px solid #e3e6e8;aspect-ratio:4/3;object-fit:cover}
@media(max-width:768px){.hero{padding:70px 0}.section{padding:50px 0}}