/* General Styles */
body { font-family: sans-serif; background: #f4f4f4; color: #333; margin: 0; }
.container { max-width: 900px; margin: auto; padding: 20px; }
a { text-decoration: none; color: inherit; }

/* Navbar */
.navbar { background: #ee4d2d; color: white; display: flex; justify-content: space-between; padding: 15px 5%; }
.nav-links { display: flex; list-style: none; gap: 20px; }

/* Hero Section */
.hero { background: #2c3e50; color: white; text-align: center; padding: 60px 20px; }
.btn-main { background: #ee4d2d; padding: 12px 25px; border-radius: 5px; display: inline-block; margin-top: 15px; }

/* Grid Produk */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.card { background: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.price { color: #ee4d2d; font-weight: bold; margin: 10px 0; }
.btn-detail { background: #f4f4f4; padding: 5px 10px; font-size: 12px; border: 1px solid #ddd; border-radius: 3px; }

/* Detail Page */
.detail-flex { display: flex; gap: 30px; flex-wrap: wrap; background: white; padding: 20px; border-radius: 8px; }
.price-large { font-size: 24px; color: #ee4d2d; font-weight: bold; }
.btn-buy { background: #25d366; color: white; padding: 15px 30px; border-radius: 5px; display: inline-block; font-weight: bold; }

/* Form Style */
form { background: white; padding: 20px; border-radius: 8px; display: flex; flex-direction: column; gap: 15px; }
input, textarea, select { padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.btn-submit { background: #ee4d2d; color: white; border: none; padding: 15px; cursor: pointer; font-weight: bold; border-radius: 4px; }