<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a1a;color:#d4d4d4;font-family:system-ui,-apple-system,sans-serif}
.garasi-wrapper{max-width:100%;overflow-x:hidden;background:#1a1a1a}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
.topbar{display:none;border-bottom:1px solid rgba(212,175,55,0.15);background:#000;padding:0.5rem 0;font-size:11px;text-transform:uppercase;letter-spacing:0.18em;color:#737373}
@media(min-width:768px){.topbar{display:block}}
.topbar-inner{display:flex;justify-content:space-between;align-items:center}
.topbar-trust{color:#c9a961}
.header{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(212,175,55,0.2);background:rgba(0,0,0,0.95);backdrop-filter:blur(4px)}
.header-inner{display:flex;align-items:center;gap:0.75rem;height:4.5rem}
@media(min-width:640px){.header-inner{height:5rem;gap:1.25rem}}
.logo{display:flex;align-items:center;gap:0.625rem;flex-shrink:0;text-decoration:none;color:inherit}
.logo-img{width:2.75rem;height:2.75rem;object-fit:contain}
@media(min-width:640px){.logo-img{width:3.5rem;height:3.5rem}}
.logo-text{display:none;line-height:1.2}
@media(min-width:400px){.logo-text{display:block}}
.logo-main{display:block;font-size:1.125rem;font-weight:700;letter-spacing:0.2em;color:#d4af37}
@media(min-width:640px){.logo-main{font-size:1.25rem}}
.logo-sub{display:block;font-size:9px;text-transform:uppercase;letter-spacing:0.22em;color:#a3a3a3}
@media(min-width:640px){.logo-sub{font-size:10px}}
.search-desktop{display:none;flex:1;max-width:28rem;margin-left:auto}
@media(min-width:768px){.search-desktop{display:flex}}
.search-wrap{display:flex;width:100%;align-items:center;overflow:hidden;border-radius:2px;border:1px solid rgba(212,175,55,0.3);background:#141414}
.search-wrap:focus-within{border-color:#d4af37}
.search-input{width:100%;background:transparent;padding:0.625rem 1rem;font-size:0.875rem;outline:none;color:#d4d4d4;border:none}
.search-input::placeholder{color:#525252}
.search-btn{margin:0.25rem;border-radius:2px;background:#d4af37;padding:0.5rem;color:#000;border:none;cursor:pointer;transition:transform 0.1s;display:flex;align-items:center;justify-content:center}
.search-btn:active{transform:scale(0.95)}
.nav-desktop{display:none;align-items:center;gap:1.5rem}
@media(min-width:1280px){.nav-desktop{display:flex}}
.nav-link{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.15em;color:#d4af37;text-decoration:none;transition:color 0.2s}
.nav-link:hover{color:#e6c352}
.cart-btn{position:relative;display:grid;height:2.75rem;width:2.75rem;place-items:center;border-radius:2px;border:1px solid rgba(212,175,55,0.3);color:#d4af37;background:transparent;cursor:pointer;transition:background 0.2s,color 0.2s;margin-left:auto}
@media(min-width:768px){.cart-btn{margin-left:0}}
.cart-btn:hover{background:#d4af37;color:#000}
.cart-badge{position:absolute;right:-0.5rem;top:-0.5rem;display:grid;height:1.25rem;min-width:1.25rem;place-items:center;border-radius:9999px;background:#d4af37;padding:0 0.25rem;font-size:11px;font-weight:700;color:#000}
.menu-toggle{display:grid;height:2.75rem;width:2.75rem;place-items:center;border-radius:2px;border:1px solid rgba(212,175,55,0.3);color:#d4af37;background:transparent;cursor:pointer}
@media(min-width:1280px){.menu-toggle{display:none}}
.search-mobile{padding-bottom:0.75rem}
@media(min-width:768px){.search-mobile{display:none}}
.search-mobile .search-wrap{border-color:rgba(212,175,55,0.3)}
.mobile-menu{display:flex;flex-direction:column;gap:1rem;border-top:1px solid rgba(212,175,55,0.15);padding:1.25rem 0}
@media(min-width:1280px){.mobile-menu{display:none}}
.mobile-menu a{font-size:0.875rem;text-transform:uppercase;letter-spacing:0.15em;color:#d4af37;text-decoration:none}
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(212,175,55,0.15)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.4}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,#000,rgba(0,0,0,0.85),rgba(0,0,0,0.4))}
.hero-content{position:relative;display:flex;align-items:center;min-height:min(70vh,640px);padding:4rem 0}
.hero-banner{position:absolute;left:0;right:0;top:1rem;text-align:center}
.hero-banner p{font-size:1.4rem;font-weight:800;text-transform:uppercase;color:#c9a961;margin:0;animation:blinkGold 1.2s infinite}
@keyframes blinkGold{0%{opacity:1;color:#c9a961}50%{opacity:0.3;color:#d4af37}100%{opacity:1;color:#c9a961}}
@media(min-width:640px){.hero-banner p{font-size:1.8rem}}
@media(min-width:1024px){.hero-banner p{font-size:2.2rem}}
.hero-row{display:flex;flex-wrap:nowrap;gap:2rem;align-items:center;width:100%;margin-top:3rem}
.hero-left{flex:0 0 55%;max-width:55%;min-width:0}
.hero-right{flex:0 0 45%;max-width:45%;min-width:0;background:rgba(0,0,0,0.5);border-radius:12px;padding:1rem;border:1px solid rgba(212,175,55,0.1);backdrop-filter:blur(4px)}
.hero-text{max-width:100%}
.hero-title{font-size:1.6rem;font-weight:700;line-height:1.2;letter-spacing:-0.025em;color:#ffffff;margin:0 0 1rem 0;text-align:left}
.hero-title span{color:#d4af37;display:inline-block}
@media(min-width:640px){.hero-title{font-size:2.5rem}}
@media(min-width:768px){.hero-title{font-size:3rem}}
@media(min-width:1024px){.hero-title{font-size:3.5rem}}
.hero-desc{margin-top:1.25rem;max-width:28rem;font-size:0.875rem;line-height:1.7;color:#a3a3a3}
@media(min-width:640px){.hero-desc{font-size:1rem}}
.hero-buttons{margin-top:2rem;display:flex;flex-wrap:wrap;gap:0.75rem}
.btn-primary{display:inline-block;border-radius:2px;background:#d4af37;padding:0.4rem 1rem;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#000;text-decoration:none;transition:background 0.2s}
.btn-primary:hover{background:#e6c352;color:#000}
.btn-secondary{display:inline-block;border-radius:2px;border:1px solid rgba(212,175,55,0.4);padding:0.4rem 1rem;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#d4af37;text-decoration:none;transition:all 0.2s}
.btn-secondary:hover{background:rgba(212,175,55,0.1);color:#d4af37}
.hero-new-product-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.hero-new-title{font-size:0.9rem;font-weight:700;color:#ffffff;margin:0}
.product-list-shopee{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.product-item-shopee{background:#1a1a1a;border:1px solid rgba(212,175,55,0.08);border-radius:8px;overflow:hidden;padding:6px;text-align:center}
.product-item-shopee .p-img-wrap{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:4px;background:#0a0a0a}
.product-item-shopee .p-img-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.product-item-shopee .p-badge{position:absolute;top:4px;left:4px;background:#d4af37;color:#000;font-size:7px;font-weight:700;padding:1px 6px;border-radius:3px;text-transform:uppercase;z-index:5}
.product-item-shopee .p-name{font-size:10px;font-weight:500;color:#e0e0e0;margin:4px 0 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-item-shopee .p-price{font-size:11px;font-weight:700;color:#d4af37;margin:0}
.product-item-shopee .p-old{font-size:8px;color:#666;text-decoration:line-through;margin-left:4px}
.product-item-shopee .p-meta{font-size:8px;color:#888;margin:2px 0 0 0;display:flex;justify-content:space-between}
.product-item-shopee .p-meta .rating{color:#d4af37}
@media(max-width:1024px){.product-list-shopee{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.product-list-shopee{grid-template-columns:repeat(3,1fr);gap:6px}.product-item-shopee .p-name{font-size:9px}.product-item-shopee .p-price{font-size:10px}}
@media(max-width:480px){.product-list-shopee{grid-template-columns:repeat(2,1fr);gap:4px}.product-item-shopee .p-name{font-size:8px}.product-item-shopee .p-price{font-size:9px}}
.features{border-bottom:1px solid rgba(212,175,55,0.15);background:#111}
.features-grid{display:grid;grid-template-columns:1fr}
.features-grid>div{padding:1.25rem 0.5rem;border-bottom:1px solid rgba(212,175,55,0.1);display:flex;align-items:center;gap:1rem}
@media(min-width:640px){.features-grid{grid-template-columns:repeat(3,1fr)}
.features-grid>div{padding:1.5rem 2rem;border-bottom:none;border-right:1px solid rgba(212,175,55,0.1)}
.features-grid>div:last-child{border-right:none}}
.features-icon{width:1.5rem;height:1.5rem;flex-shrink:0;color:#d4af37}
.features-title{font-size:0.875rem;font-weight:500;color:#fff}
.features-desc{font-size:0.75rem;color:#737373}
.section-category{padding:3rem 0;border-bottom:1px solid rgba(212,175,55,0.05);background:#0a0a0a;margin-bottom:2rem}
.section-product{padding:3rem 0;margin-top:2rem;background:#0a0a0a}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.section-header-left{display:flex;flex-direction:column}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:0.35em;color:#c9a961;margin:0}
.section-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0.25rem 0 0 0}
.see-all{color:#d4af37;text-decoration:none;font-size:14px;font-weight:600;transition:all 0.2s;white-space:nowrap}
.see-all:hover{color:#e6c352;text-decoration:underline}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1024px){.cat-grid{grid-template-columns:repeat(4,1fr);gap:0.75rem}.product-grid{grid-template-columns:repeat(3,1fr);gap:0.75rem}}
@media(max-width:768px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}.product-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}}
@media(max-width:480px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:0.5rem}.product-grid{grid-template-columns:repeat(2,1fr);gap:0.5rem}}
.cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 0.75rem;background:#1a1a1a;border:1px solid rgba(212,175,55,0.1);border-radius:12px;text-decoration:none;transition:all 0.3s ease;text-align:center;min-height:120px;cursor:pointer}
.cat-card:hover{transform:translateY(-4px);border-color:#d4af37;box-shadow:0 8px 30px rgba(212,175,55,0.12);background:#222}
.cat-icon{font-size:2rem;margin-bottom:0.5rem;transition:transform 0.3s;line-height:1}
.cat-card:hover .cat-icon{transform:scale(1.15)}
.cat-name{font-size:0.9rem;font-weight:600;color:#e0e0e0;margin:0 0 0.25rem 0;transition:color 0.3s}
.cat-card:hover .cat-name{color:#d4af37}
.cat-count{font-size:0.75rem;color:#666;margin:0;transition:color 0.3s}
.cat-card:hover .cat-count{color:#888}
.product-card{display:flex;flex-direction:column;overflow:hidden;border-radius:12px;border:1px solid rgba(212,175,55,0.1);background:#1a1a1a;transition:all 0.3s ease}
.product-card:hover{transform:translateY(-4px);border-color:#d4af37;box-shadow:0 8px 30px rgba(212,175,55,0.12)}
.product-img-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0a0a0a}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.product-card:hover .product-img-wrap img{transform:scale(1.05)}
.product-discount{position:absolute;top:0.5rem;left:0.5rem;background:#d4af37;color:#000;padding:0.1rem 0.6rem;border-radius:4px;font-size:11px;font-weight:700}
.product-body{display:flex;flex:1;flex-direction:column;padding:0.75rem}
.product-cat-label{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:#888}
.product-rating{display:flex;align-items:center;gap:0.25rem;font-size:12px;color:#888;margin:0.25rem 0}
.product-rating .star{width:14px;height:14px;fill:#d4af37;color:#d4af37}
.product-add-btn{width:100%;background:transparent;border:1px solid rgba(212,175,55,0.3);border-radius:8px;padding:0.5rem;color:#d4af37;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s;font-family:inherit;margin-top:0.5rem}
.product-add-btn:hover{background:#d4af37;color:#000}
.product-empty{border:1px dashed rgba(212,175,55,0.25);padding:6rem 0;text-align:center;color:#737373;grid-column:1/-1}
.footer{border-top:1px solid rgba(212,175,55,0.2);background:#000}
.footer-grid{display:grid;gap:2.5rem;padding:3rem 0}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-brand{display:flex;align-items:center;gap:0.75rem}
.footer-brand img{width:3.5rem;height:3.5rem;object-fit:contain}
.footer-brand-main{display:block;font-size:1.125rem;font-weight:700;letter-spacing:0.2em;color:#d4af37}
.footer-brand-sub{display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.2em;color:#737373}
.footer-desc{margin-top:1rem;max-width:20rem;font-size:0.875rem;line-height:1.7;color:#737373}
.footer-col-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.25em;color:#fff}
.footer-col-list{margin-top:1rem;list-style:none;padding:0}
.footer-col-list li{margin-bottom:0.75rem}
.footer-col-list a{font-size:0.875rem;color:#737373;text-decoration:none;transition:color 0.2s}
.footer-col-list a:hover{color:#d4af37}
.footer-bottom{border-top:1px solid rgba(212,175,55,0.1);padding:1.5rem 0;display:flex;flex-direction:column;align-items:center;gap:0.75rem;font-size:0.75rem;color:#525252}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between}}
.footer-bottom a{color:#525252;text-decoration:none;transition:color 0.2s}
.footer-bottom a:hover{color:#d4af37}
.cart-overlay{display:none;position:fixed;inset:0;z-index:50;justify-content:flex-end}
.cart-overlay.open{display:flex}
.cart-backdrop{flex:1;background:rgba(0,0,0,0.7);cursor:pointer}
.cart-sidebar{display:flex;height:100%;width:100%;max-width:28rem;flex-direction:column;border-left:1px solid rgba(212,175,55,0.3);background:#1a1a1a}
.cart-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(212,175,55,0.2);padding:1.25rem 1.5rem}
.cart-header h2{font-size:0.875rem;text-transform:uppercase;letter-spacing:0.25em;color:#d4af37}
.cart-close{background:none;border:none;color:#a3a3a3;cursor:pointer;font-size:1.5rem}
.cart-list{flex:1;overflow-y:auto;padding:1.5rem}
.cart-empty{padding:5rem 0;text-align:center;font-size:0.875rem;color:#737373}
.cart-item{display:flex;gap:1rem;border-radius:2px;border:1px solid rgba(212,175,55,0.15);padding:0.75rem;margin-bottom:1rem}
.cart-item img{width:5rem;height:5rem;object-fit:cover}
.cart-item-info{flex:1}
.cart-item-name{font-size:0.875rem;color:#fff}
.cart-item-price{margin-top:0.25rem;font-size:0.875rem;font-weight:600;color:#d4af37}
.cart-item-actions{margin-top:0.5rem;display:flex;align-items:center;gap:0.75rem}
.cart-qty-btn{border:1px solid rgba(212,175,55,0.3);padding:0.25rem;color:#d4af37;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem}
.cart-qty-btn svg{width:0.75rem;height:0.75rem}
.cart-qty-num{font-size:0.875rem}
.cart-remove{margin-left:auto;background:none;border:none;color:#737373;cursor:pointer;transition:color 0.2s}
.cart-remove:hover{color:#d4af37}
.cart-footer{border-top:1px solid rgba(212,175,55,0.2);padding:1.5rem}
.cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;font-size:0.875rem}
.cart-total-label{color:#a3a3a3}
.cart-total-price{font-size:1.125rem;font-weight:600;color:#d4af37}
.cart-checkout{width:100%;border-radius:2px;background:#d4af37;padding:0.875rem 0;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.2em;color:#000;border:none;cursor:pointer;transition:background 0.2s}
.cart-checkout:hover{background:#e6c352}
.cart-checkout:disabled{opacity:0.4;cursor:not-allowed}
.hidden{display:none}
</style>
<div class="garasi-wrapper" id="garasi-app">
<div class="topbar">
<div class="container topbar-inner">
<span>Gratis ongkir min. belanja Rp 500.000</span>
<span class="topbar-trust">Quality · Performance · Trust</span>
</div>
</div>
<header class="header">
<div class="container">
<div class="header-inner">
<a href="#" class="logo">
<img src="https://horizons-cdn.hostinger.com/b8cea54c-b4a4-4bc3-8e86-0414f1ad046f/8239c35c6334cab08c6845a25adda154.png" alt="GARASI" class="logo-img">
<div class="logo-text">
<span class="logo-main">GARASI</span>
<span class="logo-sub">Sparepart Premium</span>
</div>
</a>
<div class="search-desktop">
<div class="search-wrap">
<input type="text" class="search-input" id="searchInput" placeholder="Cari sparepart motor..." oninput="filterProducts()">
<button class="search-btn" aria-label="Cari" onclick="filterProducts()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</button>
</div>
</div>
<nav class="nav-desktop">
<a href="#beranda" class="nav-link">Beranda</a>
<a href="#kategori" class="nav-link">Kategori</a>
<a href="#produk" class="nav-link">Produk</a>
<a href="#produk" class="nav-link">Promo</a>
<a href="#footer" class="nav-link">Kontak</a>
</nav>
<button class="cart-btn" onclick="toggleCart()" aria-label="Keranjang">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span class="cart-badge" id="cartCount">0</span>
</button>
<button class="menu-toggle" onclick="toggleMenu()" aria-label="Menu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</div>
<div class="search-mobile">
<div class="search-wrap">
<input type="text" class="search-input" id="searchInputMobile" placeholder="Cari sparepart motor..." oninput="filterProducts()">
<svg width="16" height="16" style="margin-right:0.75rem;flex-shrink:0;color:#d4af37;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</div>
</div>
<div class="mobile-menu" id="mobileMenu" style="display:none;">
<a href="#beranda" onclick="closeMenu()">Beranda</a>
<a href="#kategori" onclick="closeMenu()">Kategori</a>
<a href="#produk" onclick="closeMenu()">Produk</a>
<a href="#produk" onclick="closeMenu()">Promo</a>
<a href="#footer" onclick="closeMenu()">Kontak</a>
</div>
</div>
</header>
<section class="hero" id="beranda">
<img src="https://images.hostinger.com/4463626d-c34e-443c-811e-c41b4184a397.png" alt="Bengkel sparepart motor" class="hero-bg">
<div class="hero-overlay"></div>
<div class="container hero-content">
<div class="hero-row">
<div class="hero-left">
<div class="hero-banner"><p>“Diskon 15% untuk semua produk Tanpa minimal belanja”</p></div>
<div class="hero-text">
<h1 class="hero-title">Performa Maksimal, <span>Suku Cadang</span> Terpercaya</h1>
<p class="hero-desc">Kurasi sparepart mesin, rem, suspensi, dan kelistrikan. Kualitas teruji untuk harian maupun racing — harga jujur, pengiriman cepat.</p>
<div class="hero-buttons">
<a href="#produk" class="btn-primary">Belanja Sekarang</a>
<a href="#kategori" class="btn-secondary">Lihat Kategori</a>
</div>
</div>
</div>
<div class="hero-right">
<div class="hero-new-product-header">
<h3 class="hero-new-title">🔥 New Product</h3>
</div>
<div class="product-list-shopee" id="shopeeProductGrid">
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://images.hostinger.com/cde5f92a-2505-4519-8507-c967b3cf532d.png" alt="Piston">
<span class="p-badge">🔥 NEW</span>
</div>
<p class="p-name">Kit Piston Forged</p>
<p class="p-price">Rp485.000 <span class="p-old">Rp650.000</span></p>
<div class="p-meta"><span class="rating">⭐ 4.9</span><span class="sold">2,1rb</span></div>
</div>
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://images.hostinger.com/26053791-718e-4bac-8935-316f6bf7a80c.png" alt="Cakram">
<span class="p-badge">⚡ 22%</span>
</div>
<p class="p-name">Cakram Rem Depan</p>
<p class="p-price">Rp329.000 <span class="p-old">Rp420.000</span></p>
<div class="p-meta"><span class="rating">⭐ 4.8</span><span class="sold">1,8rb</span></div>
</div>
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://horizons-cdn.hostinger.com/b8cea54c-b4a4-4bc3-8e86-0414f1ad046f/7764063f0721ed3539c83719a2f5e0db.webp" alt="Shock">
<span class="p-badge">🔥 NEW</span>
</div>
<p class="p-name">Shock Absorber Yamaha</p>
<p class="p-price">Rp890.000 <span class="p-old">Rp1.150.000</span></p>
<div class="p-meta"><span class="rating">⭐ 5.0</span><span class="sold">940</span></div>
</div>
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://images.hostinger.com/0567df91-0a81-41d1-bd82-648fe9108616.png" alt="Rantai">
<span class="p-badge">⚡ 21%</span>
</div>
<p class="p-name">Rantai & Gear Set</p>
<p class="p-price">Rp275.000 <span class="p-old">Rp350.000</span></p>
<div class="p-meta"><span class="rating">⭐ 4.7</span><span class="sold">3,4rb</span></div>
</div>
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://images.hostinger.com/e702f94e-7ab4-4ff9-a14a-bf43763de402.png" alt="Filter">
<span class="p-badge">⚡ 24%</span>
</div>
<p class="p-name">Filter Oli + Oli Mesin</p>
<p class="p-price">Rp125.000 <span class="p-old">Rp165.000</span></p>
<div class="p-meta"><span class="rating">⭐ 4.9</span><span class="sold">5,2rb</span></div>
</div>
<div class="product-item-shopee">
<div class="p-img-wrap">
<img src="https://images.hostinger.com/6aece3ba-333b-4a38-8033-a7ff1e1dd3a3.png" alt="Kabel">
<span class="p-badge">⚡ 28%</span>
</div>
<p class="p-name">Kabel Body Set Premium</p>
<p class="p-price">Rp198.000 <span class="p-old">Rp275.000</span></p>
<div class="p-meta"><span class="rating">⭐ 4.6</span><span class="sold">4,1rb</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="features">
<div class="container features-grid">
<div>
<svg class="features-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18" r="2.5"></circle><circle cx="18.5" cy="18" r="2.5"></circle></svg>
<div><p class="features-title">Pengiriman Cepat</p><p class="features-desc">Seluruh Indonesia</p></div>
</div>
<div>
<svg class="features-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
<div><p class="features-title">Garansi Produk</p><p class="features-desc">Original & aftermarket</p></div>
</div>
<div>
<svg class="features-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 6L9 17l-5-5"></path></svg>
<div><p class="features-title">Harga Kompetitif</p><p class="features-desc">Promo tiap minggu</p></div>
</div>
</div>
</div>
<section class="section-category" id="kategori">
<div class="container">
<div class="section-header">
<div class="section-header-left">
<p class="section-label">Jelajahi</p>
<h2 class="section-title">Kategori Sparepart</h2>
</div>
<a href="javascript:void(0)" class="see-all" onclick="showAllProducts()">Lihat Semua →</a>
</div>
<div class="cat-grid" id="categoryGrid"></div>
</div>
</section>
<section class="section-product" id="produk">
<div class="container">
<div class="section-header">
<div class="section-header-left">
<p class="section-label">Katalog</p>
<h2 class="section-title">Produk Terlaris</h2>
</div>
<div class="product-header-right">
<div class="product-cat-filter" id="filterContainer"></div>
<a href="javascript:void(0)" class="see-all" onclick="refreshProducts()">Lihat Semua →</a>
</div>
</div>
<div class="product-grid" id="productGrid"></div>
</div>
</section>
<footer class="footer" id="footer">
<div class="container footer-grid">
<div>
<div class="footer-brand">
<img src="https://horizons-cdn.hostinger.com/b8cea54c-b4a4-4bc3-8e86-0414f1ad046f/8239c35c6334cab08c6845a25adda154.png" alt="GARASI">
<div><span class="footer-brand-main">GARASI</span><span class="footer-brand-sub">Sparepart Premium</span></div>
</div>
<p class="footer-desc">Toko sparepart sepeda motor premium. Quality · Performance · Trust — dikirim ke seluruh Indonesia.</p>
</div>
<div><h3 class="footer-col-title">Belanja</h3><ul class="footer-col-list"><li><a href="#produk">Produk Terlaris</a></li><li><a href="#kategori">Kategori</a></li><li><a href="#produk">Promo Mingguan</a></li></ul></div>
<div><h3 class="footer-col-title">Bantuan</h3><ul class="footer-col-list"><li><a href="#footer">Pengiriman</a></li><li><a href="#footer">Garansi</a></li><li><a href="#footer">FAQ</a></li></ul></div>
<div><h3 class="footer-col-title">Perusahaan</h3><ul class="footer-col-list"><li><a href="#beranda">Tentang Kami</a></li><li><a href="#">Kebijakan Privasi</a></li></ul></div>
</div>
<div class="footer-bottom container"><span>© 2026 GARASI Sparepart Premium. Seluruh hak cipta dilindungi.</span><a href="#">Kebijakan Privasi</a></div>
</footer>
<div class="cart-overlay" id="cartOverlay">
<div class="cart-backdrop" onclick="toggleCart()"></div>
<aside class="cart-sidebar">
<div class="cart-header"><h2>Keranjang (<span id="cartCountSide">0</span>)</h2><button class="cart-close" onclick="toggleCart()">✕</button></div>
<div class="cart-list" id="cartList"><div class="cart-empty">Keranjang masih kosong.</div></div>
<div class="cart-footer"><div class="cart-total"><span class="cart-total-label">Total</span><span class="cart-total-price" id="cartTotal">Rp 0</span></div><button class="cart-checkout" id="checkoutBtn" disabled="">Checkout</button></div>
</aside>
</div>
</div>
Copyright © 2026 garasipartpremium.com. All rights reserved. Tema: eStore oleh ThemeGrill. Powered by WordPress.