#recommendation-container .recommended-widget { 
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }
    #recommendation-container.fading .recommended-widget {
        opacity: 0;
        transform: translateY(10px);
    }
/* =================================
   Product Page V3 (Search & Filter)
   ================================= */
/* Kontrol Bar (Search & Sort) */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.search-box {
    position: relative;
    flex-grow: 1;
    color: white;
}

.search-box .form-control {
    padding-left: 2.5rem;
    border-radius: 50px;
}

.search-box .fa-search {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #adb5bd;
}

.controls-bar .form-select {
    width: 200px;
    border-radius: 50px;
}

/* Sidebar Filters */
.sidebar-filters .filter-block {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eef0f3;
}
.sidebar-filters .filter-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.sidebar-filters .filter-title {
    font-weight: 600;
    margin-bottom: 1rem;
}
.filter-list .form-check {
    margin-bottom: 0.75rem;
}
.filter-list .form-check-label {
    cursor: pointer;
}
.form-check-input:checked {
    background-color: #11ACDA;
    border-color: #11ACDA;
}
.filter-list-v2 li a {
            padding: 8px 15px;
            display: block;
            color: #555;
            text-decoration: none;
            border-radius: 5px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .filter-list-v2 li a:hover {
            background-color: #e9ecef;
            color: #000;
        }

        .filter-list-v2 li a.active {
            background-color: #0d6efd;
            color: #fff;
            font-weight: 600;
        }

        .filter-list-v2 ul {
            margin-top: 5px;
            padding-left: 10px;
            border-left: 2px solid #e0e0e0;
        }
        
        .filter-list-v2 ul li a {
            font-size: 0.9em;
            color: #6c757d;
            padding: 6px 15px;
            font-weight: 400;
            position: relative;
        }

        .filter-list-v2 ul li a:hover {
            color: #000;
        }

        .filter-list-v2 ul li a::before {
            content: '→';
            margin-right: 8px;
            color: #0d6efd;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            display: inline-block;
        }
        
        .filter-list-v2 ul li a:hover::before,
        .filter-list-v2 ul li a.active::before {
            opacity: 1;
            transform: translateX(3px);
        }
        
        .filter-list-v2 ul li a.active {
            background-color: #e6f0ff;
            color: #0d6efd;
            font-weight: 500;
        }
        


        

/* =================================
   Innovations Section Styling
   ================================= */
#innovations-section {
}

.info-card {
    display: flex;
    align-items: flex-start;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #eef0f3;
    height: 100%;
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #11ACDA;
}

.info-card-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #11ACDA;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1.5rem;
}

.info-card-body h5 {
    color: #212529;
}

.info-card-body p {
    margin-bottom: 0;
}






/* Product Card */
a.product-card-modern {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
a.product-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(17, 172, 218, 0.15);
}
.product-image-container {
    height: 220px;
}
.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-details {
    padding: 20px;
}
.product-category-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: #11ACDA;
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.product-name {
    font-weight: 600;
    margin-bottom: 8px;
    color: #212529;
}
.product-description {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}
#loadMoreBtn {
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 500;
    background-color: #11ACDA;
    border-color: #11ACDA;
}
#loadMoreBtn:hover {
    background-color: #0f9bc4;
    border-color: #0f9bc4;
}
/* =================================
   Redesigned Sidebar Styling
   ================================= */

/* Desain Ulang Filter Kategori */
.sidebar-filters .filter-list-v2 a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #343a40;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.sidebar-filters .filter-list-v2 a:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.sidebar-filters .filter-list-v2 a.active {
    background-color: #11ACDA;
    color: #fff;
    border-color: #11ACDA;
    box-shadow: 0 5px 15px rgba(17, 172, 218, 0.3);
}

/* Poster Promosi di Sidebar */
.sidebar-promo {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.sidebar-promo img {
    width: 100%;
    transition: transform 0.3s ease;
}
.sidebar-promo a:hover img {
    transform: scale(1.05);
}

/* Widget Produk Rekomendasi */
.recommended-widget {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    color: #fff;
}
.recommended-widget a {
    text-decoration: none;
    color: #fff;
}
.recommended-widget img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.recommended-widget .best-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffc107;
    color: #212529;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 5px;
    z-index: 2;
}
.recommended-widget .recommended-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.recommended-widget h6 {
    font-weight: 600;
}





  /* CSS yang diperbaiki untuk banner slider */
    #banner-slider-section {
        margin-top: -30px;
        margin-bottom: -20px;
        padding: 15px 0; /* Memberi sedikit ruang vertikal */
    }
    .banner-slider-container {
        max-width: 1300px; /* Menggunakan max-width agar lebih responsif */
        margin: auto;
        padding: 0 15px;
        box-sizing: border-box;
    }
    /* DITAMBAHKAN: Memberi ruang antar slide agar border tidak menyatu */
    .swiper-slide {
        padding: 0 5px; /* Menambah jarak 5px di kiri dan kanan setiap slide */
        box-sizing: border-box; /* Memastikan padding tidak menambah lebar slide */
    }
    .swiper-slide img {
        width: 100%; /* DIUBAH: Membuat gambar mengisi kontainer slide-nya */
        height: 330px;
        border-radius: 15px;
        object-fit: cover;
        border: 3px solid #11ACDA; 
        box-sizing: border-box; 
    }
    .swiper-pagination-bullet-active {
        background-color: #5a9bfd !important;
    }
    .bannerSwiper {
        --swiper-navigation-color: #fff;
        --swiper-pagination-color: #fff;
    }

/* --- PENYESUAIAN RESPONSIP --- */
/* Aturan ini akan diterapkan pada layar dengan lebar 992px atau kurang (Tablet & HP) */
@media (max-width: 992px) {
    .swiper-slide img {
        height: 280px; /* Mengurangi tinggi gambar untuk layar yang lebih kecil */
    }
}

/* Aturan ini akan diterapkan pada layar dengan lebar 768px atau kurang (Tablet mode potret & HP) */
@media (max-width: 768px) {
    #banner-slider-section {
        margin-top: -20px; /* Mengurangi margin negatif agar tidak terlalu tumpang tindih */
        margin-bottom: -15px;
    }
    .swiper-slide img {
        height: 220px; /* Mengurangi tinggi gambar lebih lanjut */
        border-radius: 12px; /* Opsional: mengurangi lengkungan sudut */
    }
}

/* Aturan ini akan diterapkan pada layar dengan lebar 576px atau kurang (HP) */
@media (max-width: 576px) {
    #banner-slider-section {
        margin-top: -15px;
        padding: 10px 0;
    }
    .banner-slider-container {
        padding: 0 10px; /* Mengurangi padding samping di layar sangat kecil */
    }
    .swiper-slide img {
        height: 180px; /* Tinggi ideal untuk kebanyakan HP */
        border-radius: 10px;
        border-width: 2px; /* Menipiskan border agar tidak terlalu tebal */
    }
    .swiper-slide {
        padding: 0 4px; /* Sedikit mengurangi jarak antar slide */
    }
}