:root {
    --primary-color: #4a2c2a;
    --bg-color: #fffaf0;
    --card-bg: #ffffff;
    --accent-pink: #f9a4b4;
    --star-color: #ffc107;
    --font-heading: 'Fredoka One', cursive;
    --font-body: 'Poppins', sans-serif;
}
body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--primary-color);
    line-height: 1.6;
}
header {
    padding: 0;
    line-height: 0;
}
.header-image {
    width: 100%;
    height: auto;
    display: block;
}
h2 {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
}
main, section {
    padding: 20px 15px;
}
#promo-section {
    padding: 5px 5px;
    background-color: #fdf2e3;
    margin: 0;
    text-align: center;
}
#promo-section h2 { font-size: 1rem; margin: 0; }
#promo-section p { font-size: 0.8rem; margin-top: 2px; }

/* -- START GAYA UNTUK FILTER KATEGORI -- */
#category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}
.filter-btn {
    padding: 8px 18px;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.filter-btn:hover {
    background-color: #fdeee4;
}
.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
}
/* -- END GAYA UNTUK FILTER KATEGORI -- */

#product-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}
.product-card {
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.product-card .info { padding: 10px; flex-grow: 1; }
.product-card h3 {
    margin-top: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.3;
}
.product-card .price {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.product-card button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px;
    width: 100%;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.8rem;
    cursor: pointer;
}
.product-card img { width: 100%; height: 120px; object-fit: cover; }
#info-section {
    padding-top: 0;
}
#info-section h2 {
    font-size: 2rem;
}
#info-section .channels { display: flex; justify-content: center; align-items: center; gap: 30px; }
#info-section .channel-item img { height: 40px; transition: transform 0.2s ease; }
#info-section .channel-item img:hover { transform: scale(1.1); }
#review-section { background-color: #fff; }
#review-section h2 { font-size: 1.8rem; }
.review-card {
    background-color: #fdf2e3;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%; /* MEMBUAT TINGGI SETIAP KOTAK SAMA */
}
.review-card p { margin: 0; font-style: italic; flex-grow: 1;}
.review-card .author { margin-top: 10px; font-weight: bold; text-align: right; color: var(--accent-pink); }
.review-stars {
    color: var(--star-color);
    margin-bottom: 10px;
    font-size: 1rem;
}
#review-form-container {
    max-width: 600px; margin: 40px auto 0 auto; padding: 20px;
    background-color: #fdf2e3; border-radius: 15px; text-align: center;
}
#review-form-container h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-top: 0; }
.star-rating { margin-bottom: 15px; font-size: 2rem; cursor: pointer; color: #ccc; }
.star-rating i:hover { transform: scale(1.2); transition: transform 0.1s; }
.star-rating .filled { color: var(--star-color); }
#review-form-container textarea, #review-form-container input {
    width: 95%; padding: 10px; margin-bottom: 10px;
    border: 1px solid #ddd; border-radius: 8px; font-family: var(--font-body);
}
#review-form-container button {
    background-color: var(--accent-pink); color: var(--primary-color); border: none;
    padding: 12px 25px; font-weight: bold; font-size: 1rem; cursor: pointer; border-radius: 8px;
}
#cart-icon{position:fixed;bottom:20px;right:20px;background-color:var(--primary-color);color:white;width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,0.2);z-index:999}
#cart-count{position:absolute;top:0;right:0;background-color:var(--accent-pink);color:var(--primary-color);border-radius:50%;width:22px;height:22px;font-size:.8rem;font-weight:700;display:flex;justify-content:center;align-items:center}
#cart-panel{position:fixed;top:0;right:0;width:100%;max-width:380px;height:100%;background-color:#fff;box-shadow:-5px 0 20px rgba(0,0,0,0.15);z-index:1000;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease-in-out}
#cart-panel:not(.hidden){transform:translateX(0)}
#cart-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee}
#cart-header h3{margin:0;font-family:var(--font-heading)}
#close-cart-btn{background:0 0;border:none;font-size:2rem;cursor:pointer}
#cart-items{flex-grow:1;overflow-y:auto;padding:15px}
.empty-cart-msg{color:#999;text-align:center;margin-top:20px}
.cart-item{display:flex;align-items:center;margin-bottom:15px;font-size:.9rem}
.cart-item-img{width:60px;height:60px;object-fit:cover;border-radius:8px;margin-right:10px}
.cart-item-details{flex-grow:1}
.cart-item-details strong{display:block;color:var(--primary-color)}
.cart-item-details span{color:#777;font-size:.8rem;display:block;line-height:1.4}
.cart-item-price{font-weight:700;margin-right:10px}
.cart-item-remove-btn{background:0 0;border:none;color:#ff4d4d;font-size:1.2rem;cursor:pointer}
#cart-footer{padding:15px;border-top:1px solid #eee}
#cart-footer .total{display:flex;justify-content:space-between;font-weight:700;font-size:1.2rem;margin-bottom:15px}
#checkout-btn{width:100%;padding:15px;background-color:#25d366;color:#fff;border:none;font-weight:700;font-size:1.1rem;cursor:pointer;border-radius:8px}
#checkout-btn:disabled{background-color:#ccc;cursor:not-allowed}
#modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1001;display:flex;justify-content:center;align-items:center;padding:15px}
#modal-content{background-color:#fff;padding:0;border-radius:15px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee}
.modal-header h3{margin:0;font-family:var(--font-heading)}
.close-modal-btn{background:0 0;border:none;font-size:1.5rem;cursor:pointer}
.modal-body{padding:15px;overflow-y:auto}
.modal-body h4{font-family:var(--font-heading);margin:0 0 15px 0}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.option-item{border:2px solid #eee;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700}
.option-item.selected{border-color:var(--primary-color);background-color:#fdf2e3;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.modal-footer{padding:15px;border-top:1px solid #eee;display:flex;gap:10px}
.modal-button{flex:1;padding:12px;border:none;border-radius:8px;font-weight:700;font-size:1rem;cursor:pointer}
.modal-button.primary{background-color:var(--primary-color);color:#fff}
.modal-button.secondary{background-color:#ddd}
.checkbox-option{display:flex;align-items:center;margin-top:15px;gap:10px;font-weight:700}
.package-topping-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:5px;border-radius:5px;background-color:#f9f9f9}
.package-topping-selector label{font-weight:700}
.package-topping-selector select{padding:5px;border-radius:5px;border:1px solid #ccc}
.hidden{display:none!important}
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 30px 15px;
}
.footer-content { max-width: 1000px; margin: 0 auto; }
.footer-content h3 { font-family: var(--font-heading); font-size: 1.8rem; margin: 0 0 20px 0; text-align: center; }
.footer-details { display: grid; gap: 20px; }
.footer-item {
    display: flex;
    align-items: flex-start;
    text-align: left;
}
.footer-item i {
    font-size: 1.2rem;
    margin-right: 12px;
    margin-top: 5px;
    width: 20px;
    text-align: center;
}
.footer-item p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #eee; }
.footer-item strong { color: white; }
footer a { color: var(--accent-pink); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.custom-modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:2000;display:flex;justify-content:center;align-items:center;padding:15px}
.custom-modal-content{background-color:#fff;padding:25px;border-radius:15px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,0.2);max-width:350px}
.custom-modal-content p{margin:0 0 20px 0;font-size:1.1rem;line-height:1.5}
.custom-modal-content button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 25px;border-radius:8px;font-weight:700;cursor:pointer}

.review-swiper {
    width: 100%;
    padding-bottom: 40px;
}
.review-swiper .swiper-slide {
    height: auto; /* MEMASTIKAN SLIDE FLEKSIBEL */
    align-self: stretch; /* MEMASTIKAN SLIDE MENGISI RUANG VERTIKAL */
}
.review-swiper .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}
.review-swiper .swiper-button-next,
.review-swiper .swiper-button-prev {
    color: var(--primary-color);
    transform: scale(0.3);
}

/* Media Queries */
@media (min-width: 600px) {
    #product-list { grid-template-columns: repeat(3, 1fr); }
    .footer-details { grid-template-columns: repeat(3, 1fr); gap: 25px;}
}
@media (min-width: 900px) {
    #product-list { grid-template-columns: repeat(4, 1fr); }
}