/* Basic Reset & Font */
body,input,select,button{font-family:'Poppins',sans-serif;transition:0.3s;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#f5f5f7;color:#333;line-height:1.5;}
body.dark-mode{background:#121212;color:#f5f5f7;}
body.dark-mode .product-card{background:#1c1c1c;color:white;box-shadow:0 10px 25px rgba(0,0,0,0.5);}
body.dark-mode .controls input,.dark-mode .controls select{background:#222;color:white;border:1px solid #555;}
body.dark-mode .cart-modal{background:rgba(0,0,0,0.4);}
body.dark-mode .btn-order{background:linear-gradient(90deg,#25d366,#1ebe5d);}

/* Dark Mode Toggle */
.dark-mode-toggle{position:fixed;top:10px;left:10px;background:#fff;color:#333;padding:0.3rem 0.6rem;border-radius:50px;box-shadow:0 4px 10px rgba(0,0,0,0.2);z-index:9999;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;}
.dark-mode-toggle input{margin-right:0.3rem;transform:scale(0.8);}
.dark-mode-toggle i{margin-right:0.3rem;}

/* Hero Section */
.hero{background:linear-gradient(135deg,#4caf50,#2ecc71);color:white;text-align:center;padding:3rem 1rem;border-radius:1rem;margin:1rem;}
.hero h1{font-size:2.2rem;font-weight:700;margin-bottom:0.5rem;}
.hero p{font-size:1rem;line-height:1.5;}

/* Controls */
.controls{display:flex;justify-content:center;gap:0.5rem;margin:1rem;flex-wrap:wrap;position:relative;max-width:500px;margin-left:auto;margin-right:auto;}
.controls input,.controls select{padding:0.45rem 1rem;font-size:0.95rem;border-radius:50px;border:1px solid #ccc;box-shadow:0 4px 10px rgba(0,0,0,0.05);}
.suggestions{position:absolute;top:38px;left:0;width:100%;background:white;max-height:150px;overflow-y:auto;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.15);z-index:10;}
.suggestions div{padding:0.4rem 0.8rem;cursor:pointer;}
.suggestions div:hover{background:#f0f0f0;}

/* Product Grid */
.produk-grid{display:grid;gap:1rem;padding:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:1200px;margin:0 auto;}
.product-card{background:white;border-radius:1.5rem;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,0.1);transform:translateY(20px);opacity:0;transition:all 0.5s ease, transform 0.3s;position:relative;}
.product-card.show{transform:translateY(0);opacity:1;}
.product-card img{width:100%;height:150px;object-fit:cover;border-radius:1.5rem 1.5rem 0 0;}
.product-card h3{padding:0.4rem 0.8rem;font-size:1.1rem;font-weight:600;}
.product-card p{padding:0 0.8rem 0.4rem 0.8rem;font-size:0.9rem;}
.product-card .price{font-weight:700;padding:0 0.8rem 0.4rem 0.8rem;color:#4caf50;}
.btn-order{display:block;width:calc(100% - 1.6rem);margin:0.4rem 0.8rem 0.8rem 0.8rem;padding:0.45rem;text-align:center;background:linear-gradient(90deg,#25d366,#1ebe5d);color:white;border:none;border-radius:50px;font-weight:600;font-size:0.95rem;cursor:pointer;transition:0.3s;}
.btn-order i{margin-right:0.4rem;}
.btn-order:hover{transform:scale(1.03);box-shadow:0 6px 15px rgba(0,0,0,0.2);}

/* Sticky Cart Button */
.sticky-cart{position:fixed;bottom:15px;right:15px;background:#ff7e5f;color:white;padding:0.45rem 0.9rem;border-radius:50px;font-weight:600;box-shadow:0 4px 15px rgba(0,0,0,0.2);z-index:1000;cursor:pointer;font-size:0.9rem;}
.sticky-cart i{margin-right:0.3rem;}
.sticky-cart:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,0.3);}

/* Cart Modal */
.cart-modal{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:2000;justify-content:flex-start;align-items:flex-start;padding:1rem;animation:fadeIn 0.3s;}
.cart-content{background:white;width:300px;border-radius:1rem;padding:1rem;position:absolute;top:50px;left:50px;cursor:grab;transform:translateY(-30px);opacity:0;animation:slideDown 0.4s forwards;transition:transform 0.2s,left 0.2s,top 0.2s; touch-action: none;}
.cart-content:active{cursor:grabbing;}
.cart-item{display:flex;align-items:center;margin-bottom:0.5rem;font-size:0.9rem;}
.cart-item img{width:40px;height:40px;object-fit:cover;border-radius:10px;margin-right:0.5rem;}
.cart-item-info{flex:1;}
.cart-item-info span{display:block;}
.cart-item input{width:45px;text-align:center;border-radius:5px;border:1px solid #ccc;margin-left:0.3rem;}
.cart-total{margin-top:0.6rem;font-size:0.95rem;font-weight:600;}
.cart-form input{width:100%;padding:0.45rem;margin:0.3rem 0;border-radius:8px;border:1px solid #ccc;font-size:0.9rem;}
.cart-form .btn-order{width:100%;margin-top:0.5rem;padding:0.5rem;background:linear-gradient(90deg,#25d366,#1ebe5d);color:white;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:0.3s;font-size:0.9rem;}
.cart-form .btn-order i{margin-right:0.4rem;}
.cart-form .btn-order:hover{transform:scale(1.03);}
.close-cart{position:absolute;top:8px;right:12px;font-size:1.4rem;cursor:pointer;}

@keyframes slideDown{to{transform:translateY(0);opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

footer{text-align:center;padding:1rem;background:#eee;margin-top:2rem;font-size:0.85rem;}
footer a{color:#4caf50;text-decoration:none;font-weight:600;}

@media(max-width:600px){.hero h1{font-size:1.7rem;}.controls input,.controls select{font-size:0.85rem;}}