/* css/style.css - Disesuaikan untuk Bootstrap dan Super Responsif */

:root {
    --warna-utama: #27ae60;
    --warna-utama-hover: #229954;
    --warna-sekunder: #007bff; /* Bootstrap Primary Blue - bisa Anda ganti jika mau */
    --warna-teks-utama: #3a4047;
    --warna-teks-sekunder: #7f8c8d;
    --warna-latar: #f8f9fa; /* Bootstrap default light gray */
    --warna-putih: #ffffff;
    --warna-border: #dee2e6; /* Bootstrap default border color */
    --font-utama: 'Nunito Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Variabel Bootstrap yang di-override dengan warna tema Anda */
    --bs-primary: var(--warna-utama);
    --bs-primary-rgb: 39,174,96; /* RGB dari --warna-utama untuk Bootstrap */
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color-rgb: 34,153,84; /* RGB dari --warna-utama-hover */
    --bs-body-font-family: var(--font-utama);
    --bs-body-color: var(--warna-teks-utama);
    --bs-body-bg: var(--warna-latar);
    --bs-success-rgb: 39,174,96; /* Menyamakan tombol success dengan warna utama */
    --bs-success: var(--warna-utama);
    --bs-btn-hover-bg-success: var(--warna-utama-hover);
    --bs-btn-hover-border-color-success: var(--warna-utama-hover);

    /* Additional color similar to admin's medium-gray for hover */
    --warna-medium-gray-hover: #e9ecef; /* Similar to admin's --medium-gray-color */
    --transition-speed: 0.2s; /* Matching admin's transition speed */
}

html {
    height: 100%;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* MODIFIKASI BAGIAN BODY DAN PENAMBAHAN .page-wrapper */
body {
    margin: 0; 
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

main.container { /* Pastikan main content bisa mengisi ruang */
    max-width: 100% !important;
    flex-grow: 1;
    padding-top: 1.5rem; 
    padding-bottom: 2rem; 
}
/* AKHIR MODIFIKASI BODY DAN PENAMBAHAN .page-wrapper */

a {
    font-weight: 500;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Navbar Bootstrap Customization --- */
.navbar { 
    flex-shrink: 0;
}
.navbar-brand {
    padding-top: .25rem; 
    padding-bottom: .25rem; 
}
.navbar-logo-img {
    height: 60px; 
    width: 60px;  
    border-radius: 50%; 
    object-fit: cover;   
    vertical-align: middle;
    background-color: var(--warna-putih); 
}
.navbar .nav-link {
    font-weight: 600;
    color: var(--warna-teks-utama) !important;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative; 
    transition: color var(--transition-speed) ease; 
}

/* Desktop nav-link active/hover effect - Admin Style */
.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus { 
    color: var(--warna-utama) !important;
}
.navbar-expand-lg .navbar-nav .nav-link.active::after { 
    content: '';
    position: absolute;
    bottom: 0px; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 3px; 
    background-color: var(--warna-utama);
    border-radius: 1.5px; 
}
.navbar-expand-lg .navbar-nav .nav-link:hover::after,
.navbar-expand-lg .navbar-nav .nav-link:focus::after {
    display: none; 
}
.navbar .form-control { font-size: 0.9rem; }
.navbar .btn-outline-success { 
    border-color: var(--warna-utama);
    color: var(--warna-utama);
}
.navbar .btn-outline-success:hover {
    background-color: var(--warna-utama);
    color: var(--warna-putih);
}

/* style.css */

/* ... (CSS Anda yang lain di atas ini tetap sama) ... */

.custom-hamburger {
    border: 1px solid var(--warna-border); /* Border default abu-abu */
    border-radius: 0.25rem; /* Radius standar sm */
    background: transparent;
    padding: 0.25rem 0.5rem; /* Padding sama dengan btn-sm */
    
    /* --- PERUBAHAN FONT-SIZE --- */
    font-size: 1.3rem; /* Menyamakan dengan font-size konteks btn-sm untuk ikon */
    
    color: var(--warna-teks-utama); /* Warna ikon default */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle; /* Untuk alignment yang lebih baik dengan tombol sebelahnya */

    /* --- PENAMBAHAN BOX-SHADOW DEFAULT HALUS --- */
    /* Memberikan sedikit 'ketebalan' visual seperti yang terlihat pada state focus, tapi netral */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); /* Shadow sangat tipis, hampir seperti border kedua yang halus */
    
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.custom-hamburger:hover {
    color: var(--warna-utama);
    background-color: rgba(var(--bs-primary-rgb), 0.075); /* Latar tipis warna utama */
    border-color: var(--warna-utama); /* Border warna utama */
    /* Shadow sedikit lebih jelas saat hover */
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15); 
}

.custom-hamburger:focus,
.custom-hamburger.focus { /* .focus untuk konsistensi Bootstrap */
    outline: 0;
    color: var(--warna-utama);
    border-color: var(--warna-utama); /* Border warna utama saat fokus */
    /* Shadow yang lebih menonjol saat fokus (ini yang Anda sebut 'serasi ukurannya') */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ... (CSS Anda yang lain di bawah ini tetap sama) ... */
.navbar-toggler-icon {
    display: none;
}

/* --- Offcanvas Styling to match Admin --- */
.offcanvas-body .navbar-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem; 
    text-decoration: none;
    font-weight: 500; 
    color: var(--warna-teks-sekunder); 
    border-radius: 0; 
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}
.offcanvas-body .navbar-nav .nav-item .nav-link i {
    margin-right: 12px; 
    width: 20px; 
    text-align: center; 
    color: inherit; 
    transition: color var(--transition-speed) ease;
}
.offcanvas-body .navbar-nav .nav-item .nav-link:hover,
.offcanvas-body .navbar-nav .nav-item .nav-link:focus {
    background-color: var(--warna-medium-gray-hover); 
    color: var(--warna-utama); 
}
.offcanvas-body .navbar-nav .nav-item .nav-link.active::after,
.offcanvas-body .navbar-nav .nav-item .nav-link:hover::after,
.offcanvas-body .navbar-nav .nav-item .nav-link:focus::after {
    display: none;
}
.offcanvas-body .navbar-nav .nav-item .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.1); 
    color: var(--warna-utama) !important; 
    border-left: 4px solid var(--warna-utama); 
    font-weight: 600; 
    padding-left: calc(1rem - 4px + 0.5rem); 
}

/* --- Hero Section --- */
.hero-mizan-inspired {
    background: linear-gradient(to right, rgba(var(--bs-primary-rgb), 0.88), rgba(195, 0, 255, 0.9)), url('../images/placeholder-hero.jpg') no-repeat center center/cover;
    background-color: var(--warna-utama); 
    color: var(--warna-putih);
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 2.5rem;
}
.hero-mizan-inspired h2 { font-size: 2.5em; margin-bottom: 1rem; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
.hero-mizan-inspired p { font-size: 1.15em; margin-bottom: 1.5rem; max-width: 600px; margin-left: auto; margin-right: auto; color: #e0f2f1; line-height: 1.6; }
.hero-mizan-inspired .btn-hero-mizan {
    display: inline-block;
    background-color: var(--warna-putih);
    color: var(--bs-primary) !important;
    padding: 0.7rem 1.8rem;
    font-size: 1.05em;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid var(--warna-putih);
}
.hero-mizan-inspired .btn-hero-mizan:hover { background-color: transparent; color: var(--warna-putih) !important; transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }

/* --- Area Kontrol (Filter & Sort) --- */
.controls-area .form-label { font-size: 0.9rem; font-weight: 600; color: var(--warna-teks-sekunder); }

/* --- Info Display --- */
.info-display { margin-bottom: 1rem; font-style: italic; font-size: 0.95em; }
.info-display p { margin-bottom: 0.3rem; }
.info-display strong { color: var(--warna-teks-utama); }

/* --- Section Title --- */
.section-title, .section-title-custom { 
    font-size: 1.8rem;
    color: var(--warna-teks-utama);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
    padding-bottom: 0.75rem;
    position: relative;
}
.section-title::after, .section-title-custom::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--warna-utama);
    margin: 0.6rem auto 0 auto;
    border-radius: 2px;
}
.promo-page-hero h1.display-5,
.page-content-wrapper .page-title-container h2.section-title,
.ulasan-produk-section .section-title-custom,
.rating-summary-section .section-title-custom,
.daftar-ulasan-section .section-title-custom {
    margin-top: 0; 
}
.ulasan-produk-section .section-title-custom,
.rating-summary-section .section-title-custom,
.daftar-ulasan-section .section-title-custom {
    font-size: 1.5rem; 
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}
.ulasan-produk-section .section-title-custom::after,
.rating-summary-section .section-title-custom::after,
.daftar-ulasan-section .section-title-custom::after {
    display: none; 
}
.rating-summary-section .section-title-custom.text-center::after { 
    display: block;
}

/* --- Kartu Produk Bootstrap Kustomisasi --- */
.produk-item-bs.card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border-color: var(--warna-border); }
.produk-item-bs.card:hover { transform: translateY(-5px); box-shadow: 0 .4rem .9rem rgba(0,0,0,.1)!important; }
.product-image-container-bs {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%; /* Membuat rasio aspek 1:1 (persegi) */
}

.product-image-container-bs .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mengisi area, menjaga rasio aspek, mungkin memotong */
}
.produk-item-bs:hover .product-image-container-bs .card-img-top {
    transform: scale(1.05) translateX(2px);
    transition: transform 0.2s ease-out;
}
.badge-promo-bs {
    position: absolute;
    bottom: 10px; 
    left: 10px;   
    z-index: 1;   
    font-size: 0.75em; 
    padding: .3em .6em;
    font-weight: bold;
    background-color: #e74c3c; 
    color: white;
    border-radius: .10rem; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
}
.badge-promo-bs::after {
    content: "";
    position: absolute;
    top: 100%; 
    left: 2px; 
    z-index: -1; 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0; 
    border-color: transparent #a73c2e transparent transparent; 
}
.produk-item-bs:hover .badge-promo-bs {
    transform: translateX(3px) translateY(-1px) scale(1.03);
    box-shadow: 3px 4px 7px rgba(0,0,0,0.3);
}
.status-badge-habis { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 0.7rem; padding: .3em .6em; font-weight: bold; background-color: #6c757d; color: white; border-radius: .25rem; }
.produk-item-bs .card-body { padding: 1rem; flex-grow: 1; }
.produk-nama-bs.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; min-height: 2.8em; line-height: 1.4; color: var(--warna-teks-utama); }
.produk-nama-bs a.stretched-link { color: inherit; text-decoration: none; }
.produk-nama-bs a.stretched-link:hover { color: var(--warna-utama); }
.harga-bs.card-text { 
    font-size: 1rem; 
    font-weight: 700; 
    color: var(--warna-utama);
    line-height: 1.3;
    margin-bottom: 0.3rem !important; 
    display: flex;
    flex-wrap: wrap; 
    align-items: baseline; 
}
.harga-bs .harga-asli-bs {
    font-size: 0.8em; 
    color: var(--warna-teks-sekunder); 
    text-decoration: line-through;
    margin-right: 0.5rem; 
    line-height: 1; 
}
.harga-bs .harga-promo-bs {
    font-size: 1.1em; 
    color: #e74c3c; 
    font-weight: 700; 
    line-height: 1;
}
.kategori-bs.card-text small { font-size: 0.75rem; }
.status-stok-bs.habis-bs { font-size: 0.8rem; margin-top: 0.5rem; padding: .2rem .4rem !important; }
.product-card-buttons-bs.card-footer { padding: 0.75rem 1rem 1rem 1rem; margin-top: auto; position: relative; z-index: 2; }
.product-card-buttons-bs .btn { font-size: 0.85rem; }
.product-card-buttons-bs .btn-whatsapp-card-custom { background-color: #25D366; border-color: #25D366; color: white; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 0.5rem; }
.product-card-buttons-bs .btn-whatsapp-card-custom:hover { background-color: #1DAE51; border-color: #1DAE51; }
.product-card-buttons-bs .btn-whatsapp-card-custom svg { width: 0.9em; height: 0.9em; }

/* Rating Bintang */
.rating-bintang-wrapper { display: flex; align-items: center; margin-bottom: 0.5rem; font-size: 0.9em; }
.rating-bintang-wrapper .icon-bintang { color: #FFD700; margin-right: 1px; font-size: 1em; } 
.rating-bintang-wrapper .icon-bintang.kosong { color: #e0e0e0; }
.rating-bintang-wrapper .jumlah-ulasan-display, .rating-bintang-wrapper .rating-angka-display { margin-left: 5px; font-size: 0.9em; color: var(--warna-teks-sekunder); }
.rating-belum-ada { font-size: 0.8em; color: var(--warna-teks-sekunder); font-style: italic; display: inline-block; line-height:1.5; margin-bottom: 0.5rem;}
.produk-item-bs .card-body .rating-bintang-wrapper { font-size: 0.75rem; margin-bottom: 0.4rem; } 
.produk-item-bs .card-body .rating-belum-ada { font-size: 0.7rem; margin-bottom: 0.4rem; }

/* --- Halaman Detail Produk --- */
.product-detail-info .rating-bintang-wrapper { font-size: 1em; margin-bottom: 1rem; } 
.product-detail-info .rating-bintang-wrapper .icon-bintang { font-size: 1.1em; }
.product-detail-info .rating-belum-ada { font-size: 0.9em; margin-bottom: 1rem; }
.product-detail-image-lightbox .main-image-for-lightbox { aspect-ratio: 1 / 1; max-width: 450px; margin-left:auto; margin-right:auto;}
.main-image-for-lightbox img { object-fit: contain; }
.thumbnails-for-lightbox { 
    display: flex;
    flex-wrap: wrap; 
    gap: .5rem; 
    justify-content: center; 
    margin-top: .75rem; 
    width: 100%;
    max-width: 450px; 
    margin-left: auto;
    margin-right: auto;
}
.thumbnails-for-lightbox a.thumbnail-link {
    display: block;
    width: 65px; 
    height: 65px; 
    border: 2px solid var(--warna-border); 
    border-radius: .25rem; 
    overflow: hidden; 
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7; 
    cursor: pointer;
}
.thumbnails-for-lightbox a.thumbnail-link:hover {
    border-color: var(--warna-utama);
    opacity: 1;
    transform: scale(1.05); 
}
.thumbnails-for-lightbox a.thumbnail-link.active-thumb-display { 
    border-color: var(--warna-utama) !important; 
    opacity: 1;
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb, 39, 174, 96), 0.6); 
}
.thumbnails-for-lightbox img.thumb-img-gallery { 
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.product-detail-info h1 { font-size: 2rem; }
.product-detail-info .harga-bs { font-size: 1.75rem; }
.product-detail-info .btn-whatsapp-custom { font-size: 0.95rem; padding: .6rem 1.2rem; margin-bottom: 1.5rem !important; }

/* Ringkasan Rating Pelanggan */
.rating-summary-section { background-color: var(--warna-putih); padding: 1.5rem; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.rating-average-display .average-score { color: var(--warna-teks-utama); line-height: 1; }
.rating-average-display .rating-bintang-wrapper { font-size: 1.1em; justify-content: center; }
@media (min-width: 768px) { .rating-average-display .rating-bintang-wrapper { justify-content: flex-start; } }
.rating-distribution .rating-label { font-size: 0.85em; color: var(--warna-teks-sekunder); white-space: nowrap; min-width:65px; }
.rating-distribution .progress { height: 12px; background-color: #e9ecef; border-radius: .25rem; }
.rating-distribution .progress-bar.bg-warning { background-color: #ffc107 !important; }
.rating-distribution .rating-count { font-size: 0.85em; color: var(--warna-teks-sekunder); font-weight: 500; min-width:25px; }

/* Ulasan Produk Section & Form & Daftar Ulasan */
.ulasan-produk-section, .daftar-ulasan-section { background-color: var(--warna-putih); padding: 1.5rem; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); margin-top:2rem; }
.ulasan-produk-section .section-title-custom, .daftar-ulasan-section .section-title-custom { font-size: 1.5rem; text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: 1.5rem !important; }
.ulasan-produk-section .section-title-custom::after, .daftar-ulasan-section .section-title-custom::after { display: none; }
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.rating-stars input[type="radio"] { display: none; }
.rating-stars label { font-size: 1.8em; color: #ddd; cursor: pointer; padding: 0 0.05em; transition: color 0.2s ease-out; }
.rating-stars:not(:hover) input[type="radio"]:checked ~ label,
.rating-stars:hover input[type="radio"]:hover ~ label,
.rating-stars input[type="radio"]:checked ~ label,
.rating-stars input[type="radio"]:hover ~ label { color: #ffc107; }
.rating-stars label:hover { color: #ffc107 !important; }
#formUlasanProduk .form-label { font-weight: 500; }
#formUlasanProduk .form-control:focus { border-color: var(--warna-utama); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),.25); }
#formUlasanProduk .btn-primary { font-weight: 600; padding: .5rem 1.5rem; }
.ulasan-item.card { border-color: var(--warna-border); }
.ulasan-item .card-body { padding: 1rem; }
.ulasan-pengulas { font-weight: 600; color: var(--warna-teks-utama); font-size: 1.05em; }
.ulasan-tanggal { font-size: 0.8em; }
.ulasan-rating-bintang .icon-bintang { font-size: 0.9em; }
.ulasan-judul_ulasan { font-weight: 600; margin-top: 0.3rem; margin-bottom: 0.3rem; font-size: 1em; color: var(--warna-teks-utama); }
.ulasan-isi { font-size: 0.9em; line-height: 1.6; color: #555; }

/* --- Halaman Statis (FAQ, Tentang Kami) --- */
.page-content-wrapper { margin-top: 2rem; margin-bottom: 2rem; background-color: var(--warna-putih); padding: 2rem; border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
.page-title-container { text-align: center; margin-bottom: 2rem; }
.page-content-wrapper .page-title-container h2 { font-size: 2rem; }
.page-content-wrapper h3 { font-size: 1.5em; color: var(--warna-teks-utama); margin-top: 2rem; margin-bottom: 1rem; font-weight: 600; border-bottom: 1px solid var(--warna-border); padding-bottom: 0.5rem; }
.page-content-wrapper p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; color: #495057; }
.list-group-flush .list-group-item { padding-left: 0; padding-right: 0; border-color: var(--warna-border); font-size: 1rem; color: #495057; }

/* Accordion FAQ */
.faq-card-list .card-header { cursor: pointer; } 
.faq-card-item .faq-question-header h5 { font-size: 1.1rem; font-weight: 600; color: var(--warna-teks-utama); transition: color 0.3s ease; }
.faq-card-item .faq-question-header:hover h5 { color: var(--warna-utama); }
.faq-arrow { font-size: 0.9em; transition: transform 0.35s ease; color: var(--warna-teks-sekunder); }
.faq-question-header[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); color: var(--warna-utama); }
.faq-question-header[aria-expanded="true"] h5 { color: var(--warna-utama); }
.faq-answer-body { padding: 1.25rem 1.5rem; font-size: 0.95em; line-height: 1.7; color: #495057; background-color: var(--warna-putih); }

/* --- Footer --- */
footer.bg-dark { 
    padding: 2rem 0; 
    color: rgba(255,255,255,.65); 
    flex-shrink: 0; /* Penting untuk sticky footer dengan flexbox wrapper */
    /* mt-auto tidak lagi diperlukan di footer jika .page-wrapper yang menangani tinggi */
}
footer p { margin-bottom: 0; }

/* --- Styling untuk Alert Modal Publik (Modal Sukses Ulasan) --- */
.admin-alert-modal {
    display: none; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 10050; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
    overflow: auto;
}
.admin-alert-modal.show { 
    display: flex !important; 
}
.admin-alert-modal-content {
    background-color: var(--warna-putih); 
    border-radius: 8px; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    width: auto; 
    min-width: 340px; 
    max-width: 500px;
    position: relative; 
    animation: adminModalAnimation 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    padding: 30px 35px; 
    text-align: center; 
}
@keyframes adminModalAnimation {
    from { transform: translateY(-60px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.admin-alert-modal-icon-container { 
    margin-bottom: 18px; 
}
#publicReviewSuccessModalIcon { 
    font-size: 3.5em; 
    line-height: 1; 
}
#publicReviewSuccessModalIcon.icon-success { 
    color: var(--warna-utama); 
}
#publicReviewSuccessModalHeader { 
    font-size: 1.5em; 
    font-weight: 600; 
    margin-bottom: 12px; 
    color: var(--warna-teks-utama); 
}
#publicReviewSuccessModalMessage { 
    font-size: 1.05em; 
    color: #495057; 
    margin-bottom: 25px; 
    line-height: 1.55; 
}
.admin-alert-modal-close-btn { 
    position: absolute; 
    top: 10px; 
    right: 15px; 
    font-size: 28px; 
    font-weight: bold;
    color: #aaa; 
    background: none; 
    border: none; 
    cursor: pointer;
    padding: 5px; 
    line-height: 1; 
    transition: color var(--transition-speed) ease;
}
.admin-alert-modal-close-btn:hover { 
    color: var(--warna-teks-utama); 
}
.admin-alert-modal-actions { 
    margin-top: 20px; 
}
#publicReviewSuccessModalOkButton { 
    min-width: 120px; 
    font-weight: 500; 
    padding: 0.7rem 1.5rem;
    /* Class .btn .btn-success dari Bootstrap akan mengatur warna */
}
/* Tidak perlu styling hover khusus jika menggunakan class .btn-success Bootstrap */

/* --- Offcanvas Close Button Styling & Width Adjustments --- */
.offcanvas-header .btn-close {
    padding: 0.75rem; 
    margin: -0.5rem -0.5rem -0.5rem auto; 
    opacity: 0.6; 
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: 50%; 
}
.offcanvas-header .btn-close:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.075); 
}
.offcanvas-header .btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25); 
}
.offcanvas-header .btn-close {
    filter: invert(48%) sepia(62%) saturate(606%) hue-rotate(95deg) brightness(95%) contrast(91%);
}

/* Offcanvas Width Adjustments (Admin Style) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #offcanvasNavbar.offcanvas-end,
    #offcanvasNavbar.offcanvas-start {
        width: 50% !important;
        max-width: none !important;
    }
}
@media (max-width: 767.98px) {
    #offcanvasNavbar.offcanvas-end,
    #offcanvasNavbar.offcanvas-start {
        width: 60% !important;
        max-width: none !important;
    }
}
@media (max-width: 575.98px) {
    #offcanvasNavbar.offcanvas-end,
    #offcanvasNavbar.offcanvas-start {
        width: 75% !important;
        max-width: none !important;
    }
}

/* --- Penyesuaian Responsif Umum --- */
/* --- Penyesuaian Responsif Umum --- */
@media (min-width: 992px) {
    .navbar > .container {
        position: relative;
    }

    #mainNavbarContentForDesktop form.d-flex {
        position: absolute;
        right: var(--bs-gutter-x, 0.75rem);
        top: 50%;
        transform: translateY(-50%);
        /* z-index: 2; */ /* Anda bisa tambahkan ini jika perlu untuk layering, sesuaikan nilainya */
    }

    /* Tambahan untuk menggeser blok menu navigasi */
    .navbar-expand-lg .navbar-nav.mx-auto {
        position: relative; /* Memungkinkan pergeseran */

        /* --- PILIH DAN SESUAIKAN SALAH SATU BARIS DI BAWAH UNTUK MENGGESER --- */

        /* Untuk menggeser blok menu sedikit ke KANAN:
           Gunakan 'left' dengan nilai positif. Contoh:
        */
        left: 100px; 

        /* Untuk menggeser blok menu sedikit ke KIRI:
           Gunakan 'left' dengan nilai negatif atau 'right' dengan nilai positif. Contoh:
        */
        /* left: -15px; */
        /* atau */
        /* right: 15px; */

        /*
        CATATAN PENTING:
        - Hapus tanda komentar (/* dan */ /*) dari baris 'left' atau 'right' yang Anda pilih.
        - Ganti nilai pixel (misalnya 15px) dengan angka yang Anda inginkan
          untuk mendapatkan pergeseran yang pas secara visual.
        - Simpan perubahan dan lakukan hard refresh (Ctrl+Shift+R atau Cmd+Shift+R) di browser.
        */
    }

    /* Anda mungkin memiliki aturan lain di sini untuk .navbar-brand (logo)
       atau #mainNavbarContentForDesktop jika Anda mengikuti saran sebelumnya
       untuk penengahan absolut. Jika tidak, dan Anda hanya ingin menggeser
       dari posisi tengah default (antara logo dan search), maka aturan di atas
       untuk .navbar-nav.mx-auto sudah cukup untuk pergeserannya.
    */
}

@media (max-width: 991.98px) {
    #mainNavbarContentForDesktop form.d-flex {
        display: none !important;
    }
    /* Aturan lain untuk tampilan mobile/tablet mungkin ada di sini */
}

@media (max-width: 768px) { /* Tablet dan ponsel besar */
    .hero-mizan-inspired h2, .promo-page-hero h1.display-5 { font-size: 1.6em; }
    .hero-mizan-inspired p, .promo-page-hero p.lead { font-size: 0.95em; }
    .hero-mizan-inspired .btn-hero-mizan { padding: 0.5rem 1.2rem; font-size: 0.9em; }
    .controls-area { flex-direction: column; padding: 0.8rem; } 
    .section-title, .page-content-wrapper .page-title-container h2 { font-size: 1.5em; } 
    .produk-item-bs .produk-nama-bs { font-size: 0.85rem; min-height: 2.6em; } 
    .produk-item-bs .harga-bs { font-size: 0.9rem; }
    .produk-item-bs .card-body .rating-bintang-wrapper { font-size: 0.65rem; }
    .product-detail-info h1 { font-size: 1.5em; }
    .product-detail-info .harga-bs { font-size: 1.2em; }
    .product-detail-grid { padding: 0.8rem; }
    .page-content-wrapper { padding: 1rem; }
    .faq-card-item .faq-question-header h5 { font-size: 0.95rem; }
    .main-image-for-lightbox { max-height: 300px; aspect-ratio: unset; height:300px; } 
    .main-image-for-lightbox img { max-height: 280px; }
    .thumbnails-for-lightbox a { width: 45px; height: 45px; }
    .product-detail-info .rating-bintang-wrapper .icon-bintang { font-size: 1em; }
    .rating-average-display .average-score {font-size: 2rem;} 
    .rating-average-display .rating-bintang-wrapper { font-size: 0.9em;}
    .rating-distribution .rating-label, .rating-distribution .rating-count { font-size: 0.75em; min-width:55px;}
    .rating-distribution .progress { height: 8px; }
    .ulasan-produk-section .section-title-custom, 
    .daftar-ulasan-section .section-title-custom {font-size: 1.2rem;}
    .admin-alert-modal-content { /* Modal content on smaller screens */
        min-width: 90%;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) { /* Ponsel (XS) */
    body { font-size: 13px; line-height: 1.55; }
    .navbar-brand { font-size: 1.1rem; } 
    .mobile-search-form-header { max-width: 100px !important; }
    .mobile-search-form-header .form-control-sm { font-size: 0.7rem; padding: .2rem .3rem; }
    .mobile-search-form-header .btn-sm { padding: .2rem .3rem; }
    .navbar-toggler.custom-hamburger { padding: .15rem .4rem; font-size: 1.5rem; } 
    .offcanvas-body .navbar-nav .nav-item .nav-link { 
        font-size: 0.95em; 
        padding-top: 0.8rem; 
        padding-bottom: 0.8rem; 
    }
    .offcanvas-body .d-flex.mt-3 { margin-top: 0.8rem !important; }
    .hero-mizan-inspired h2, .promo-page-hero h1.display-5 { font-size: 1.4em; padding: 0 5px;}
    .hero-mizan-inspired p, .promo-page-hero p.lead { font-size: 0.85em; padding: 0 5px; }
    .hero-mizan-inspired .btn-hero-mizan { padding: 0.4rem 1rem; font-size: 0.85em; }
    .controls-area .form-label, .controls-area .form-select-sm, .clear-filter-btn { font-size: 0.75rem; }
    .controls-area .form-select-sm { padding: .2rem 1.2rem .2rem .4rem;}
    .clear-filter-btn { padding: .2rem .4rem; }
    .section-title, .page-content-wrapper .page-title-container h2 { font-size: 1.3em; margin-bottom:1rem; }
    .section-title::after, .rating-summary-section .section-title-custom.text-center::after { width:100%; height:2px; margin-top:0.3rem;}

    /* AWAL BAGIAN YANG DIKOMENTARI/DIHAPUS UNTUK KARTU PRODUK */
    /*
    .row-cols-2 > .col .produk-item-bs .card-body,
    .row-cols-sm-2 > .col .produk-item-bs .card-body { 
        padding: 0.6rem; 
    }
    .row-cols-2 > .col .produk-nama-bs,
    .row-cols-sm-2 > .col .produk-nama-bs { 
        font-size: 0.85rem;
        min-height: 2.6em; 
        margin-bottom: 0.15rem;
    }
    .row-cols-2 > .col .rating-bintang-wrapper,
    .row-cols-sm-2 > .col .rating-bintang-wrapper {
        font-size: 0.6rem;
        margin-bottom: 0.15rem;
    }
    .row-cols-2 > .col .rating-bintang-wrapper .icon-bintang,
    .row-cols-sm-2 > .col .rating-bintang-wrapper .icon-bintang {
        font-size: 0.85em;
        margin-right:0px;
    }
    .row-cols-2 > .col .rating-bintang-wrapper .jumlah-ulasan-display,
    .row-cols-sm-2 > .col .rating-bintang-wrapper .jumlah-ulasan-display {
        font-size: 0.8em;
        margin-left: 2px;
    }
    .row-cols-2 > .col .harga-bs,
    .row-cols-sm-2 > .col .harga-bs {
        font-size: 0.8rem;
        min-height: auto; 
        margin-bottom: 0.15rem;
    }
    .row-cols-2 > .col .harga-bs .harga-promo-bs,
    .row-cols-sm-2 > .col .harga-bs .harga-promo-bs {
        font-size: 0.9em; 
    }
    .row-cols-2 > .col .product-card-buttons-bs .btn,
    .row-cols-sm-2 > .col .product-card-buttons-bs .btn {
        font-size: 0.7rem;
        padding: .25rem .4rem;
    }
    .row-cols-2 > .col .product-card-buttons-bs .btn-whatsapp-card-custom svg {
        width: 0.8em; height: 0.8em;
    }
    .row-cols-2 > .col .status-badge-habis,
    .row-cols-sm-2 > .col .status-badge-habis {
        font-size: 0.6em;
        padding: .2em .35em;
        top: 5px;
        left: auto; 
        right: 5px;
    }
    */
    /* AKHIR BAGIAN YANG DIKOMENTARI/DIHAPUS UNTUK KARTU PRODUK */

    .product-detail-info h1 { font-size: 1.3em; } 
    .product-detail-info .harga-bs { font-size: 1.1em; } 
    .product-detail-image-lightbox .main-image-for-lightbox { height: 220px; } 
    .main-image-for-lightbox img { max-height: 200px; }
    .thumbnails-for-lightbox a { width: 40px; height: 40px; }
    .rating-average-display .average-score {font-size: 1.8rem;}
    .rating-average-display .rating-bintang-wrapper { font-size: 0.75em;}
    .ulasan-produk-section .section-title-custom, 
    .daftar-ulasan-section .section-title-custom {font-size: 1.1rem;}
    .rating-stars label {font-size: 1.5em;}
    #formUlasanProduk .btn-primary {font-size: 0.85rem; padding: .35rem .8rem;}
}

@media (max-width: 359.98px) {} /* Layar sangat sempit */
    /* AWAL BAGIAN YANG DIKOMENTARI/DIHAPUS UNTUK KARTU PRODUK */
    /*
    .row-cols-2 > .col .produk-nama-bs { font-size: 0.7rem; min-height: 2.45em; }
    .row-cols-2 > .col .harga-bs { font-size: 0.75rem; }
    .row-cols-2 > .col .rating-bintang-wrapper { font-size: 0.55rem; }
    .row-cols-2 > .col .product-card-buttons-bs .btn { font-size: 0.65rem; padding: .2rem .3rem;}
    */
    /* AKHIR BAGIAN YANG DIKOMENTA