*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif;}
body{background:#f5f7fa;color:#222;}
header{background:white;padding:15px 20px;box-shadow:0 2px 5px rgba(0,0,0,0.08);position:sticky;top:0;z-index:10;}
.logo{font-weight:bold;font-size:1.3em;color:#1E88E5;margin-bottom:10px;}
header input{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:8px;outline:none;}
.kategori{display:flex;gap:10px;padding:15px 20px;overflow-x:auto;}
.kategori button{padding:8px 16px;border:none;border-radius:20px;background:#e3e3e3;cursor:pointer;white-space:nowrap;}
.kategori button.active{background:#1E88E5;color:white;}
.produk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:15px;padding:20px;}
.produk-card{background:white;border-radius:12px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;flex-direction:column;}
.produk-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px;}
.produk-card h3{font-size:1em;margin-bottom:5px;}
.harga{color:#1E88E5;font-weight:bold;font-size:1.1em;margin-bottom:5px;}
.desc{font-size:0.85em;color:#666;margin-bottom:8px;flex-grow:1;}
.stok{font-size:0.8em;margin-bottom:10px;}
.stok.ready{color:#2E7D32;}
.stok.habis{color:#D32F2F;}
.btn-beli{display:block;text-align:center;background:#25D366;color:white;padding:10px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:0.9em;}
.loading,.empty{text-align:center;grid-column:1/-1;padding:40px;color:#777;}
.kontak{background:white;margin:30px 20px;padding:25px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.kontak h2{text-align:center;margin-bottom:20px;color:#1E88E5;}
.kontak-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.kontak-box .item{text-align:center;padding:15px;background:#f5f7fa;border-radius:10px;}
.kontak-box .item strong{display:block;margin-bottom:8px;font-size:1.1em;}
.kontak-box .item a{color:#1E88E5;text-decoration:none;}
.btn-wa{display:inline-block;background:#25D366;color:white !important;padding:8px 15px;border-radius:8px;margin-top:10px;font-weight:bold;}
footer{text-align:center;padding:20px;color:#777;font-size:0.85em;}
@media(max-width:500px){.produk-grid{grid-template-columns:repeat(2,1fr);}}