/* ==========================================================================
   1. GLOBAL RESET & BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==========================================================================
   2. KOMPONEN UTAMA (TAMPILAN DASAR / DESKTOP FIRST)
   ========================================================================== */

/* --- Tombol --- */
.nextbutton {
    border: none;
    display: block;
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    background-color: #ffedcb;
    color: #000 !important;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    padding: 12px 24px;
    border-radius: 5px;
    transition: background-color 0.3s;
    user-select: none;
    -webkit-user-select: none;
}
.nextbutton:hover { background-color: #ffc107; }

.w3-button {
    background-color: #feecb4;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}
.w3-button:hover {
    background-color: rgba(255, 193, 7, 0.8);
    border-radius: 5px;
}
.w3-button img { margin-right: 8px; }

/* ==========================================================================
   PENGATURAN GRID PRODUK (JARAK KONSISTEN & RAPI 100%)
   ========================================================================== */
#productContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -8px !important; /* Menarik container agar sejajar dengan tepi layar */
}

.product-item {
    padding: 8px !important; /* Celah presisi 16px (8px + 8px) di SEMUA SISI (Atas, Bawah, Kiri, Kanan) */
    margin-bottom: 0 !important; /* Menghapus margin usang */
    float: none !important; /* Mematikan sifat mengambang (float) bawaan w3.css */
    display: flex;
    flex-direction: column;
}

.w3-row-padding .img-container {
    position: relative;
    width: 100%;
    height: 100%; /* Memastikan semua card memiliki tinggi yang sama rata */
    padding: 0 !important; /* Menghapus padding 5px lama agar gambar penuh ke tepi kotak */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.w3-row-padding img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.w3-row-padding .img-container:hover img {
    transform: scale(1.02);
}

.jarak { margin-bottom: 16px !important; margin-top: 10px !important; }
.w3-row-padding h3 { margin-left: 15px; margin-right: 15px; color: #795548; }
.w3-row-padding p { margin-left: 15px; margin-right: 15px; font-size: 1rem; }
.w3-row-padding p img {
    display: block;
    margin: 10px auto;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    opacity: 1;
}

/* --- Animasi Produk Muncul Halus --- */
.product-item { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.product-item.show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   LABEL KATEGORI PRODUK (FULL WIDTH & PRESISI DALAM GAMBAR)
   ========================================================================== */
.img-kategori-top, .img-kategori-bottom {
    position: absolute;
    left: 0;
    width: 100%; /* Lebar sempurna mengikuti gambar */
    color: #795548;
    text-align: center;
    z-index: 3;
    background-color: rgba(250, 230, 194, 0.95);
    backdrop-filter: blur(2px);
    opacity: 1 !important;
    transform: none !important; /* Menghapus translateX bawaan lama yang bikin bergeser */
    box-sizing: border-box;
}

.img-kategori-top { 
    top: 0 !important; /* Menempel erat di atas gambar */
    font-size: 0.9rem; 
    font-weight: 700; 
    padding: 6px 0; 
    border-radius: 8px 8px 0 0;
}

.img-kategori-bottom { 
    bottom: 0 !important; /* Menempel erat di bawah gambar */
    font-size: 0.8rem; 
    font-weight: 500; 
    padding: 5px 6px; 
    border-radius: 0 0 8px 8px;
}


/* --- CSS Dasar Modal --- */
.w3-modal {
    background-color: rgba(253, 245, 230, 0.8); display: none; justify-content: center; align-items: center;
    position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden !important; z-index: 999999 !important;
}
.w3-modal.show { animation: modalFadeIn 0.35s ease forwards; }
.w3-modal.hide { animation: modalFadeOut 0.35s ease forwards; }

@keyframes modalFadeIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes modalFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

body.modal-open { overflow: hidden !important; position: fixed; width: 100%; }

/* ==========================================================================
   SLIDER UTAMA (CAROUSEL INFINITE) - DESKTOP & MOBILE
   ========================================================================== */
.slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; height: 100vh; background-color: #f4f6f9; }
.slides { display: flex; will-change: transform; height: 100%; }

/* Default disembunyikan agar JS merender tanpa cacat (FOUC) */
.slide { min-width: 100%; box-sizing: border-box; height: 100%; display: none; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.prev, .next {
    cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); padding: 16px;
    color: #ffc107; font-weight: bold; font-size: 24px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: rgba(255, 255, 255, 0.4); border: none; border-radius: 4px; z-index: 5;
}
.prev { left: 20px; }
.next { right: 20px; }
.prev:hover, .next:hover { 
    color: #ffc107; transform: translateY(-50%) scale(1.15); 
    background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

/* Indikator Garis Horizontal dengan Loading Efek */
.indicators { display: flex; justify-content: center; gap: 8px; position: absolute; bottom: 30px; width: 100%; z-index: 10; }
.indicator { width: 35px; height: 4px; background-color: rgba(255, 255, 255, 0.4); border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: width 0.3s ease, background-color 0.3s ease; }
.indicator-progress { height: 100%; width: 0%; background: #ff9800; border-radius: 4px; }
.indicator.active { width: 50px; background-color: rgba(255, 255, 255, 0.6); }

/* CSS Mobile Overrides Spesifik Slider */
@media (max-width: 768px) {
    .slider { 
        height: calc(100svh - 60px); /* Kunci tinggi mengikuti layar hp asli */
        background-color: #fff;
    }
    .slides {
        /* Potong 65px dari bagian bawah agar gambar putus pas sebelum Bottom Nav! */
        height: calc(100% - 65px); 
    }
    .slide img { 
        border-radius: 0; 
    }
    .indicators { 
        /* Angkat indikator 15px di atas menu bottom (65+15=80) agar terlihat jelas */
        bottom: 80px; 
    }
    .indicator { width: 25px; height: 3.5px; }
    .indicator.active { width: 35px; }
    .prev, .next { padding: 10px 14px; font-size: 18px; }
    .prev { left: 8px; }
    .next { right: 8px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .slider { height: 75vh; }
    .indicators { bottom: 20px; }
}

/* --- Ikon Sosial Media --- */
.social-icons { display: flex; justify-content: center; align-items: center; margin-top: 20px; }
.social-icons i { font-size: 24px; margin: 0 6px; }
.social-icon { font-size: 2rem; color: #000; margin: 0 10px; transition: color 0.3s ease, transform 0.3s ease; }
.social-icon:hover { color: #ffc107; transform: scale(1.2); }
.social-icon:active { transform: scale(1.1); }


/* ==========================================================================
   CONTAINER KATEGORI (TIRAI PUTIH ELEGAN & MOBILE OPTIMIZED)
   ========================================================================== */

/* --- Dasar --- */
.w3-display-container {
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    border-radius: 12px; 
    background-color: #ffffff; /* Base putih */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 0 !important; 
    margin: 0 !important;
    display: block; 
}

.w3-display-container a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
}

.w3-display-container img { 
    width: 100%; 
    aspect-ratio: 16 / 9;
    object-fit: cover; 
    object-position: center; 
    display: block; 
    margin: 0 !important; 
    padding: 0 !important;
    vertical-align: top;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.8s ease; 
}

/* --- Tampilan Desktop (Tirai Putih Membuka) --- */
@media (min-width: 993px) {
    .w3-display-container::before,
    .w3-display-container::after {
        content: ""; position: absolute; top: 0; width: 55%; height: 100%;
        z-index: 1; pointer-events: none; transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .w3-display-container::before {
        left: 0; transform-origin: left;
        background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0) 100%);
    }
    .w3-display-container::after {
        right: 0; transform-origin: right;
        background: linear-gradient(to left, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0) 100%);
    }
    .w3-display-container:hover::before, .w3-display-container:hover::after { transform: scaleX(0); }
    .w3-display-container:hover img { transform: scale(1.08); }

    .w3-display-middle { 
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
        width: 90%; text-align: center; z-index: 5; transition: transform 0.5s ease; 
    }

    .team-title { 
        font-size: clamp(1.2rem, 3vw, 1.6rem) !important; font-weight: 750; color: #5d4037 !important; 
        text-transform: uppercase; letter-spacing: 0.5px; margin: 0; 
        text-shadow: -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px 1px 0px #ffffff, 2px 2px 4px rgba(255, 255, 255, 1); 
    }
    
    .team-desc { 
        font-size: clamp(0.9rem, 2vw, 1.05rem); color: #333333; font-weight: 500; margin-top: 10px; line-height: 1.4; 
        text-shadow: -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px 1px 0px #ffffff, 2px 2px 3px rgba(255, 255, 255, 1); 
    }
    .w3-display-container:hover .w3-display-middle { transform: translate(-50%, -50%) scale(1.05); }
}

/* --- Tampilan Mobile (Bersih, Gambar di Atas, Text di Bawah) --- */
@media (max-width: 992px) {
    .w3-display-container { background-color: #ffffff; border: 1px solid #eee; }
    .w3-display-container a { display: flex; flex-direction: column; }
    .w3-display-container img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px 12px 0 0; }
    .w3-display-middle {
        position: relative !important; top: auto !important; left: auto !important; transform: none !important;
        width: 100%; padding: 15px; background-color: #ffffff; text-align: center; border-radius: 0 0 12px 12px; margin: 0 !important;
    }
    .team-title { font-size: 1.15rem !important; font-weight: 700; color: #795548 !important; margin: 0 0 5px 0; letter-spacing: 0.5px; text-shadow: none !important; }
    .team-desc { font-size: 0.9rem; color: #666666; margin: 0; line-height: 1.4; text-shadow: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


/* --- Testimonial Carousel --- */
.testimonial-carousel { display: block; overflow-x: visible; white-space: normal; }
.testimonial-carousel .testimonial-item img { width: 60% !important; display: block; margin: 0 auto; }
.testimonial-carousel .w3-container h3, .testimonial-carousel .w3-container p { text-align: center; }
.testimonial-item { display: inline-block; vertical-align: top; min-width: 10%; margin-right: 0; white-space: normal; width: 32%; padding-left: 20px; }

/* --- Top Menu & Footer --- */
#topMenu { transition: transform 0.3s ease; transform: translateY(0); z-index: 6; }
.footer { background-color: #f1f1f1; text-align: center; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); margin-top: 75px; }

/* --- Bottom Nav --- */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-around; align-items: center; padding: 10px 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); z-index: 9999; box-sizing: border-box; }
.bottom-nav .nav-item { text-decoration: none; color: #7a7a7a; font-size: 12px; text-align: center; flex: 1; max-width: 25%; display: flex; flex-direction: column; align-items: center; transition: color 0.3s ease, font-weight 0.3s ease; }
.bottom-nav .nav-item i { font-size: 20px; margin-bottom: 3px; }
.bottom-nav .nav-item.active { color: #e6b520; font-weight: bold; }
.bottom-nav .nav-item:hover { color: #e6b520; }

/* --- Sidebar Menu Menu & Bullet --- */
[data-list="bullet"] { list-style-type: disc; }
.custom-menu { margin-top: 20px; padding: 0 10px; }
.custom-menu-item { display: block; padding: 12px 20px; margin-bottom: 2px; color: #795548; text-decoration: none; background-color: transparent; border-radius: 4px; position: relative; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; }
.custom-menu-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 193, 7, 0.5); z-index: 0; transition: left 0.4s ease-in-out; }
.custom-menu-item:hover::before { left: 0; }
.custom-menu-item:hover { color: #000; }
.custom-menu-item.active::before { left: 0; }
.custom-menu-item.active { color: #000; font-weight: bold; background-color: rgba(255, 193, 7, 0.3); transition: background-color 0.3s ease; }

/* --- Form Hubungi & Cari Produk --- */
.error-message { color: red; font-size: 0.9em; margin-top: 5px; display: none; }
input::placeholder, textarea::placeholder { color: #999; font-style: italic; }
.tooltip-icon { display: inline-block; font-size: 12px; color: #666; cursor: pointer; position: relative; }
.tooltip-text { visibility: hidden; background-color: #333; color: #fff; text-align: center; padding: 8px; border-radius: 5px; font-size: 0.9em; position: absolute; z-index: 1; bottom: 120%; left: 50%; transform: translateX(-50%); width: 250px; opacity: 0; transition: opacity 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
.tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent; }
.tooltip-icon:hover .tooltip-text, .tooltip-icon:focus .tooltip-text { visibility: visible; opacity: 1; }

/* ==========================================================================
   FORM PENCARIAN (DESKTOP & MOBILE)
   ========================================================================== */
.search-wrapper {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
    position: relative;
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cariproduk .search-wrapper { max-width: 250px; }
.search-area .search-wrapper { max-width: 500px; }
.search-wrapper:focus-within { border-color: #ffc107; box-shadow: 0 0 8px rgba(255, 193, 7, 0.3); }

.search-wrapper input[type="text"] {
    flex: 1; padding: 10px 45px 10px 15px; border: none !important; outline: none; font-size: 14px; background: transparent; width: 100%; min-width: 0;
}

.search-wrapper button.nextbutton {
    border: none; border-radius: 0; padding: 0 20px; margin: 0; background-color: #ffc107; color: #000 !important;
    font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; width: auto;
}
.search-wrapper button.nextbutton:hover { background-color: #e0a800; }

.clear-icon {
    position: absolute; right: 58px; top: 50%; transform: translateY(-50%); font-size: 14px; cursor: pointer;
    visibility: hidden; color: #999; padding: 6px; z-index: 2; transition: color 0.3s ease; display: flex; align-items: center; justify-content: center;
}
.clear-icon:hover { color: #d32f2f; }
input:focus + .clear-icon, input:not(:placeholder-shown) + .clear-icon { visibility: visible; }

.search-area {
    position: fixed; bottom: -100%; left: 0; width: 100%; background: #fff; z-index: 9998; padding: 15px 20px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 15px 15px 0 0;
}
.search-area.visible { bottom: 60px; } 
.search-area.hidden { bottom: -100%; }


/* ==========================================================================
   3. RESPONSIVE BREAKPOINTS (SUPER CLEAN)
   ========================================================================== */

/* --- 1. ATURAN GLOBAL UNTUK SEMUA MOBILE & TABLET (≤ 1024px) --- */
@media (max-width: 1024px) {
    .custom-sidebar { width: 100%; left: -100%; transition: transform 0.3s ease; }
    .custom-sidebar.open { transform: translateX(100%); }

    .carousel { 
        display: flex !important; flex-wrap: nowrap !important; width: 100% !important; 
        overflow-x: auto !important; scroll-behavior: auto !important; 
        -webkit-overflow-scrolling: touch !important; padding: 10px 0 !important; cursor: grab !important; 
    }
    .carousel:active { cursor: grabbing !important; }
    
    .w3-row-padding .w3-quarter, .w3-row-padding .w3-half { width: 25% !important; }

    #topMenu { padding: 4px 0 !important; }
    #topMenu .w3-bar-item, #topMenu .w3-button, #topMenu a { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 14px !important; }
    #topMenu i { font-size: 16px !important; } 
}

/* --- 2. TABLET POTRET & SELURUH LAYAR ≤ 768px --- */
@media (max-width: 768px) {
    .slide.desktop { display: none; }
    .slider { height: calc(100vh - 60px); }
    .slides { flex-direction: row; height: 100%; }
    .indicator { width: 8px; height: 8px; }
    .prev { left: 0px; }
    .next { right: 0px; }
    
    .cariproduk { display: none; }
    
    .social-icons { margin-top: 15px; }
    .social-icons i { font-size: 20px; margin: 0 4px; }
    
    .testimonial-carousel { display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-left: 10px; -ms-overflow-style: none; scrollbar-width: none; }
    .testimonial-carousel::-webkit-scrollbar { display: none; }
    .testimonial-carousel .w3-container h3 { font-size: 16px; }
    .testimonial-carousel .w3-container p { font-size: 12px; }
    .testimonial-item { flex: 0 0 auto; min-width: 5%; margin-right: 10px; width: 67%; padding-left: 0px; }
    
    .sosmed { display: block; }
    .sosmed .w3-xxlarge.w3-text-brown { color: #ffc107; }
    .sosmed hr { width: 50px; border: 5px solid brown; border-radius: 5px; }
    .sosmed p { margin-top: 10px; font-size: 16px; color: #2c2a2a; }
    .sosmed .social-icons { margin-top: 20px; display: flex; justify-content: space-around; }
    .sosmed .social-icon { font-size: 24px; color: #2c2a2a; transition: color 0.3s ease; }
    .sosmed .social-icon:hover { color: #ffc107; }
    
    .bottom-nav { display: flex; }
    .bottom-nav .nav-item { font-size: 10px; }
    .bottom-nav .nav-item i { font-size: 18px; }
    .w3-container p.w3-right { margin-bottom: 80px; }
    
    .w3-row-padding h3 { margin-left: 20px; margin-right: 20px; }
    .w3-row-padding p { margin-left: 20px; margin-right: 20px; }
    .w3-row-padding p img { margin: 20px auto; max-width: 95%; }
}

/* --- 3. MOBILE SEDANG (≤ 576px) -> 3 KOLOM --- */
@media (max-width: 576px) {
    .w3-row-padding .w3-quarter, .w3-row-padding .w3-half { width: 33.3333% !important; }
    
    .img-kategori-top { font-size: 0.75rem !important; }
    .img-kategori-bottom { font-size: 0.65rem !important; }
    
    .team-title { font-size: 1.25rem !important; }
    .team-desc { font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    
    .carousel-item { flex: 0 0 80vw !important; margin-right: 15px !important; }

    #topMenu { padding: 2px 0 !important; }
    #topMenu .w3-bar-item, #topMenu .w3-button, #topMenu a { padding-top: 6px !important; padding-bottom: 6px !important; font-size: 13px !important; }
}

/* --- 4. MOBILE KECIL (≤ 480px) -> 2 KOLOM --- */
@media (max-width: 480px) {
    .w3-row-padding .w3-quarter, .w3-row-padding .w3-half { width: 50% !important; }
    
    .img-kategori-top { font-size: 0.7rem !important; padding: 4px 0 !important; }
    .img-kategori-bottom { font-size: 0.6rem !important; padding: 4px 2px !important; }
    
    .social-icons i { font-size: 18px; margin: 0 6px; }

    #topMenu { padding: 0 !important; }
    #topMenu .w3-bar-item, #topMenu .w3-button, #topMenu a { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 12px !important; }
}

/* --- 5. KHUSUS LAYAR MENDATAR / LANDSCAPE --- */
@media (max-height: 500px) and (orientation: landscape) {
    #topMenu { padding: 0 !important; min-height: 35px !important; }
    #topMenu .w3-bar-item, #topMenu .w3-button, #topMenu a { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 12px !important; }
    #topMenu img { max-height: 25px !important; width: auto !important; } 
}

/* --- 6. TABLET LANSKAP & UKURAN SPESIFIK (601px - 1024px) --- */
@media (min-width: 601px) and (max-width: 1024px) {
    .carousel-item { flex: 0 0 45vw !important; margin-right: 15px !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .slide.mobile { display: none; }
    .slider { height: 75vh; }
    .slides { flex-direction: row; height: 100%; }
    .indicator { width: 10px; height: 10px; }
    .prev { left: 10px; }
    .next { right: 10px; }
}
@media (min-width: 769px) {
    .sosmed { display: none; }
}

/* --- 7. DESKTOP KECIL & BESAR (≥ 1025px) --- */
@media (min-width: 1025px) {
    .w3-row-padding .w3-quarter { width: 25%; }
    .slide.mobile { display: none; }
    .slider { height: 100vh; max-width: 100%; overflow: hidden; position: relative; }
    .slides { display: flex; flex-direction: row; height: 100%; width: 100%; transition: transform 0.5s ease-in-out; }
    .slide { min-width: 100%; height: 100%; box-sizing: border-box; }
    .slide img { width: 100%; height: 100%; object-fit: cover; }
}

@media (min-width: 1200px) {
    .bottom-nav { display: none; }
}


/* =========================================================
   TAMPILAN DETAIL E-COMMERCE (GAMBAR & VARIASI)
   ========================================================= */
.ecommerce-title {
    font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 700; line-height: 1.3; margin-top: 0; margin-bottom: 5px; color: #333;
}
.ecommerce-price {
    font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; color: #ff5722; margin-top: 0; margin-bottom: 20px;
}

.main-image-wrapper {
    width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); background-color: #fff;
}
.ecommerce-main-img {
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease; 
    cursor: zoom-in !important; /* Menampilkan ikon kaca pembesar dengan tanda plus saat belum di-hover sepenuhnya */
    touch-action: pan-y; 
    filter: none !important; 
    opacity: 1 !important; 
    margin: 0 !important;
}

.ecommerce-main-img.zooming { 
    cursor: crosshair !important; /* Berubah menjadi tanda plus ( + ) presisi saat mouse masuk dan efek zoom aktif */
}

.gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; justify-content: flex-start; }
.thumb-item {
    display: flex; align-items: center; justify-content: center; padding: 5px; border: 1.5px solid #ddd; border-radius: 6px;
    background-color: #fff; cursor: pointer; transition: all 0.2s ease-in-out; width: 55px; height: 55px; user-select: none;
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; filter: none !important; opacity: 1 !important; margin: 0 !important; }
.thumb-item:hover { border-color: #ff9800; background-color: #fff8f0; }
.thumb-item.active { border-color: #ff5722; background-color: #fff3e0; box-shadow: 0 0 0 1px #ff5722; }

/* =========================================================
   TAMPILAN DETAIL E-COMMERCE (MOBILE REORDER & ZOOM ICON)
   ========================================================= */
.eye-icon-zoom {
    position: absolute; top: 15px; right: 15px;
    background: rgba(255, 255, 255, 0.75); color: #333;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 15; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px); transition: transform 0.2s;
}
.eye-icon-zoom:active { transform: scale(0.9); }

.img-counter-badge {
    position: absolute; bottom: 15px; right: 15px;
    background: rgba(0, 0, 0, 0.65); color: #fff;
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.85rem; font-weight: bold; z-index: 15;
    backdrop-filter: blur(4px); letter-spacing: 1px;
}

/* Sembunyikan Ikon dan Counter di Layar Desktop/Tablet */
@media (min-width: 768px) {
    .eye-icon-zoom, .img-counter-badge { display: none !important; }
}

/* Logika Flexbox untuk menyusun ulang urutan (Order) hanya di Layar HP */
@media (max-width: 767.98px) {
    .detail-info-column { display: flex; flex-direction: column; }
    .gallery-thumbnails { display: none !important; } /* Sembunyikan gambar kecil */
    
    /* Mengatur Urutan Tampilan Kebawah */
    .order-price { order: 1; margin-top: 15px; }
    .order-variasi { order: 2; margin-top: 10px; }
    .order-action { order: 3; margin-top: 15px; margin-bottom: 25px; }
    .order-title { order: 4; font-size: 1.4rem; border-top: 1px dashed #ddd; padding-top: 20px; }
    .order-desc { order: 5; margin-top: 20px; }

    /* Kecilkan Font & Potong Text Variasi Horizontal */
    .variation-label { font-size: 0.85rem !important; }
    .variation-item span {
        font-size: 0.72rem !important; 
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100%;
        display: block; 
        text-align: center;
    }
}

/* Indikator Bar Auto Slide untuk Modal Mobile (Posisi Bawah) */
.gallery-progress-bar {
    position: absolute;
    bottom: 100px; /* Berada tepat di atas tombol aksi */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
    z-index: 15;
    display: none;
}

/* Wajib ada: Ini adalah baris warna orange yang berjalan */
.gallery-progress-fill {
    height: 100%;
    width: 0%;
    background: #ff9800; 
    border-radius: 2px;
}

/* =========================================================
   BAGIAN PEMILIHAN VARIASI
   ========================================================= */
.ecommerce-variations {
    background-color: #fafafa;
    padding: 10px 10px 15px 10px; 
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.variation-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 0 !important; 
}

.variation-label span#selectedVariationName {
    color: #d32f2f; 
    font-weight: bold;
}

.scroll-hint-mobile {
    font-size: 0.75rem; 
    color: #888; 
    font-style: italic; 
    margin-bottom: 10px; 
    margin-left: 2px;
    display: none; 
}

.variation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Tambahan jarak aman agar pop-up ceklist tidak terpotong tepi */
    padding-top: 6px; 
    padding-right: 6px;
}

.variation-item {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center; 
    gap: 6px; 
    padding: 8px; 
    border: 1.5px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    min-width: 65px; 
    position: relative; /* SANGAT PENTING: Untuk mengunci posisi ikon ceklist */
}
.variation-item img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 4px;
}
.variation-item span {
    font-size: 0.85rem; 
    font-weight: 500;
    color: #444;
    text-align: center; 
}

.variation-item:hover {
    border-color: #ff9800;
    background-color: #fff8f0;
}
.variation-item.active {
    border-color: #ff5722;
    background-color: #fff3e0;
    box-shadow: 0 0 0 1px #ff5722; 
}
.variation-item.active span {
    color: #e65100;
    font-weight: 700;
}

/* --- EFEK CEKLIST (CHECKMARK) VARIASI TERPILIH --- */
.variation-item::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-color: #ff5722; /* Warna Oren khas Algonas */
    /* Menggunakan Vektor SVG murni agar anti pecah/blur & tanpa lag HTTP request */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 2px solid #fff; /* Memotong efek garis putih */
    opacity: 0;
    transform: scale(0) rotate(-15deg); /* Muncul dari kecil ke besar memutar */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(255, 87, 34, 0.3);
}

/* Memunculkan Ceklist dengan Animasi Memantul (Bounce) */
.variation-item.active::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* --- Teks Summernote --- */
.judul-detail { margin-left: 15px; margin-right: 15px; }
.spek-container { margin-left: 15px; margin-right: 15px; font-size: 1rem; line-height: 1.6; color: #333; overflow-x: hidden; }
.spek-container p, .spek-container div, .spek-container h1, .spek-container h2, .spek-container h3, .spek-container h4, .spek-container h5, .spek-container h6 { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0.5em; margin-bottom: 0.8em; }
.spek-container b, .spek-container strong, .spek-container i, .spek-container em, .spek-container u, .spek-container span { margin: 0 !important; padding: 0 !important; display: inline !important; }
.spek-container ul, .spek-container ol { padding-left: 35px !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0.5em; margin-bottom: 0.8em; }
.spek-container li { margin-bottom: 5px; }
.spek-container img { max-width: 100% !important; height: auto !important; border-radius: 5px; filter: none !important; opacity: 1 !important; margin: 0 !important; }

/* --- Tombol Bawah --- */
.button-container { display: flex !important; justify-content: center !important; align-items: center !important; gap: 15px !important; margin-top: 15px !important; flex-wrap: nowrap !important; }
.button-container .w3-button { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #ffefc4 !important; color: #5c4033 !important; border-radius: 6px !important; padding: 10px 24px !important; font-size: 1.05rem !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.3s ease !important; min-width: 140px !important; border: none !important; cursor: pointer; }
.button-container .w3-button img { width: 24px !important; height: 24px !important; margin-right: 8px !important; object-fit: contain !important; filter: none !important; opacity: 1 !important; margin: 0 8px 0 0 !important; vertical-align: middle !important; }
.button-container .w3-button:hover { background-color: #ffe082 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* RESPONSIF KHUSUS MOBILE (MAX 600PX) */
@media (max-width: 600px) {
    .judul-detail, .spek-container { margin-left: 20px !important; margin-right: 20px !important; }
    .ecommerce-title { margin-top: 15px; }
    .scroll-hint-mobile { animation: pulseHint 2s infinite; }
    @keyframes pulseHint { 0% { opacity: 0.7; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } 100% { opacity: 0.7; transform: translateX(0); } }
    .variation-grid {
        display: flex !important; 
        flex-wrap: nowrap !important; /* Larang elemen turun ke bawah */
        overflow-x: auto !important;  /* Aktifkan scroll horizontal */
        -webkit-overflow-scrolling: touch !important; 
        gap: 12px !important; 
        
        /* Tambahan ruang aman (padding) di semua sisi agar ikon ceklist atas/kanan tidak terpotong */
        padding-top: 10px !important;
        padding-right: 12px !important; 
        padding-bottom: 10px !important; 
        
        scrollbar-width: thin;
        scrollbar-color: #ffc107 transparent;
    }
    .variation-grid::-webkit-scrollbar { height: 4px; }
    .variation-grid::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
    .variation-item { flex: 0 0 85px !important; width: 85px !important; padding: 8px !important; }
    .variation-item img { width: 45px !important; height: 45px !important; }
    .gallery-thumbnails { justify-content: center; }
    .thumb-item { width: 65px; height: 65px; }
    .button-container { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
    .button-container .w3-button { min-width: 100% !important; padding: 10px 12px !important; font-size: 0.95rem !important; }
}

/* =========================================================
   MODAL GALLERY MOBILE
   ========================================================= */
.mobile-gallery-modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    width: 100vw; 
    height: 100vh; height: 100dvh; /* 100dvh sangat ampuh untuk mencegah layar HP bolong */
    background-color: rgba(0, 0, 0, 0.85); /* Sedikit digelapkan agar lebih elegan */
    z-index: 9999999; 
    flex-direction: column; 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); 
    overflow: hidden !important; 
    overscroll-behavior: none; /* Mencegah pantulan (bounce) scroll dari browser */
}
.gallery-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; color: #fff; position: absolute; top: 0; width: 100%; z-index: 10; }
.gallery-counter { background: rgba(255, 255, 255, 0.2); padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 1rem; letter-spacing: 1px; }
.close-gallery { font-size: 2.5rem; cursor: pointer; line-height: 1; color: #fff; padding-left: 20px; }
.gallery-slider-container { flex: 1; overflow: hidden; position: relative; width: 100%; height: 100%; display: flex; align-items: center; }
.gallery-slides { display: flex; width: 100%; height: 100%; transition: transform 0.3s ease-out; will-change: transform; }
.gallery-actions { position: absolute; bottom: 30px; left: 0; width: 100%; display: flex; justify-content: center; gap: 15px; z-index: 10; padding: 0 15px; }
.gallery-actions .action-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1rem; flex: 1; justify-content: center; }
.gallery-actions .wa-btn { background-color: #25D366; color: #fff; box-shadow: 0 4px 10px rgba(37,211,102,0.3); }
.gallery-actions .cart-btn { background-color: #ff9800; color: #fff; box-shadow: 0 4px 10px rgba(255,152,0,0.3); }
.gallery-slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.slide-content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-height: 75vh; gap: 15px; }
.slide-content-wrapper img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; user-select: none; box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
.gallery-var-badge { position: relative; background-color: #ffefc4; color: #5c4033; border: 1px solid #ffc107; padding: 8px 24px; border-radius: 30px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; box-shadow: 0 4px 10px rgba(0,0,0,0.4); pointer-events: none; z-index: 5; }

/* =========================================================
   GAYA BARU: KOTAK TOMBOL TRANSAKSI (ACTION BUY)
   ========================================================= */
.action-buy { display: flex !important; gap: 12px !important; margin-top: 15px; margin-bottom: 25px; width: 100%; }
.action-buy .btn-buy-wa, .action-buy .btn-buy-cart { display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; padding: 10px 20px !important; font-size: 1rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease-in-out !important; flex: 1; border: none !important; cursor: pointer; }
.action-buy .btn-buy-wa { background-color: #25D366 !important; color: #ffffff !important; }
.action-buy .btn-buy-cart { background-color: #ff9800 !important; color: #ffffff !important; }
.action-buy .btn-buy-wa img { margin: 0 8px 0 0 !important; width: 22px !important; height: 22px !important; filter: none !important; opacity: 1 !important; vertical-align: middle !important; }
.action-buy .btn-buy-cart i { margin-right: 8px !important; font-size: 1.1rem; vertical-align: middle !important; }
.action-buy .btn-buy-wa:hover { background-color: #20ba5a !important; transform: translateY(-1px); }
.action-buy .btn-buy-cart:hover { background-color: #e65100 !important; transform: translateY(-1px); }

@media (max-width: 600px) {
    .action-buy { gap: 8px !important; margin-bottom: 20px; }
    .action-buy .btn-buy-wa, .action-buy .btn-buy-cart { padding: 10px 12px !important; font-size: 0.95rem !important; }
}

.custom-menu-item.active, .bottom-nav .nav-item.active { cursor: default !important; }

/* =======================================================
   STYLING ECOMMERCE CARD & BADGE
   ======================================================= */
.ecommerce-card-link { display: block; text-decoration: none !important; color: inherit !important; height: 100%; }
.ecommerce-card-link .w3-light-grey { height: 100%; border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
@media (min-width: 993px) { .ecommerce-card-link:hover .w3-light-grey { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); } }

.cart-badge-desktop { float: right; background-color: #ff5722; color: #ffffff !important; border-radius: 12px; padding: 2px 9px; font-size: 0.85rem; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); margin-top: 1px; position: relative; z-index: 2; }
.cart-badge-mobile { position: absolute; top: -8px; right: -12px; background-color: #ff5722; color: #ffffff; border-radius: 50%; padding: 2px 4px; font-size: 0.65rem; font-weight: bold; min-width: 18px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.3); line-height: 1.1; border: 1.5px solid #fff; }

/* =======================================================
   STYLING HALAMAN KERANJANG BELANJA (CART GRID)
   ======================================================= */
.input-qty-custom::-webkit-inner-spin-button, .input-qty-custom::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
button[onclick^="ubahQty"]:hover { background: #e0e0e0 !important; }
.cart-grid-card { display: grid; padding: 15px; align-items: center; gap: 2px 15px; grid-template-columns: 85px 1fr auto; grid-template-areas: "img title tools" "img price tools"; }
.cart-grid-img { grid-area: img; width: 85px; height: 85px; display: flex; align-items: center; }
.cart-grid-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; border: 1px solid #eee !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.cart-grid-title { grid-area: title; align-self: end; display: flex; flex-direction: column; gap: 4px; }
.cart-grid-title h4 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #333; line-height: 1.3; }
.cart-grid-title a { text-decoration: none; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-badge-sku { font-size: 0.8rem; color: #888; }
.cart-badge-var { font-size: 0.85rem; color: #795548; font-weight: 600; }
.cart-badge-var span { background: #ffefc4; padding: 2px 8px; border-radius: 4px; }
.cart-grid-price { grid-area: price; align-self: start; font-weight: bold; color: #ff5722; font-size: 1.1rem; margin-top: 3px; }
.cart-grid-tools { grid-area: tools; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-grid-del { color: #d32f2f; text-decoration: none; font-size: 1.2rem; transition: color 0.3s; }
.cart-grid-del:hover { color: #b71c1c; }
.cart-grid-qtybox { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; background: #fff; }
.cart-qty-btn { border: none; background: #f9f9f9; padding: 6px 12px; cursor: pointer; color: #555; outline: none; transition: background 0.2s; }
.cart-qty-btn:hover { background: #e0e0e0; }
.cart-qty-btn.minus { border-right: 1px solid #ccc; }
.cart-qty-btn.plus { border-left: 1px solid #ccc; }
.cart-qty-input { width: 45px; text-align: center; border: none; outline: none; padding: 6px 0; font-weight: bold; -moz-appearance: textfield; }

@media (max-width: 600px) {
    .cart-grid-card { grid-template-columns: 85px 1fr; grid-template-areas: "title title" "img price" "img tools"; gap: 10px 15px; }
    .cart-grid-title { align-self: start; gap: 6px; }
    .cart-grid-price { align-self: center; margin-top: 0; font-size: 1.2rem; }
    .cart-grid-tools { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
    .cart-grid-del { color: #999; }
}

/* =========================================================
   PAGE LOADER 0-100%
   ========================================================= */
#produk { position: relative; min-height: 65vh; }
.page-loader-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fffdf8; z-index: 99; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; transition: opacity 0.5s ease, visibility 0.5s ease; border-radius: 8px; }
.loader-content { text-align: center; width: 80%; max-width: 280px; }
.loader-progress-bar { width: 100%; height: 8px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.loader-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ffc107, #ff5722); border-radius: 10px; transition: width 0.2s ease-out; }
.loader-text { font-size: 1.2rem; font-weight: 800; color: #795548; font-family: 'Poppins', sans-serif; }
.loader-title { color: #795548; margin-bottom: 15px; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; }



/* =======================================================
   STYLING ECOMMERCE CARD & HARGA (Pindahan dari listproduct.php)
   ======================================================= */
.card-inner-wrapper {
    border: 1.5px solid #fae6c2; 
    border-radius: 8px; 
    background: #fffdf8; 
    overflow: hidden; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.06); 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-container:hover .card-inner-wrapper {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.card-image-box {
    position: relative; 
    padding-top: 100%; 
    overflow: hidden; 
    border-radius: 8px 8px 0 0;
    background: #f9f9f9;
    display: block;
}
.card-image-box img {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; object-fit: cover; 
    margin: 0 !important; filter: none !important; opacity: 1 !important;
}

/* PENGATURAN LABEL KATEGORI (Tengah-Atas & Tengah-Bawah) */
.card-image-box .img-kategori-top {
    position: absolute !important;
    top: 0 !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3;
    border-radius: 8px 8px 0 0 !important;
    background: rgba(250, 230, 194, 0.95);
    text-align: center;
    padding: 6px 0;
    color: #795548;
    font-weight: bold;
    font-size: 0.85rem;
}
.card-image-box .img-kategori-top::before { display: none !important; } /* Matikan before bawaan lama */

.card-image-box .img-kategori-bottom {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 3;
    border-radius: 0 !important; /* REVISI: Sudut tegak lurus (tidak melengkung) */
    background: rgba(250, 230, 194, 0.95);
    text-align: center;
    padding: 4px 6px;
    color: #795548;
    font-size: 0.8rem;
}
.card-image-box .img-kategori-bottom::before { display: none !important; } /* Matikan before bawaan lama */


/* =======================================================
   EFEK HOVER LABEL (KHUSUS DESKTOP DENGAN MOUSE)
   ======================================================= */
@media (hover: hover) and (pointer: fine) {
    .card-image-box .img-kategori-top {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(-10px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }
    .card-image-box .img-kategori-bottom {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(10px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }

    .card-image-box:hover .img-kategori-top,
    .card-image-box:hover .img-kategori-bottom {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}


/* PENGATURAN INFO PRODUK & TOMBOL */
.card-product-info {
    padding: 8px 8px 10px 8px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    justify-content: flex-end;
    overflow: hidden;
}

.btn-grid-action {
    flex: 1; padding: 6px 0; font-size: 0.85rem; font-weight: 700;
    border-radius: 6px; text-align: center; text-decoration: none;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-grid-action:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-lihat { background: #fae6c2; color: #5c4033 !important; }
.btn-beli { background: #ff9800; color: #fff !important; }
.btn-wa { background: #25D366; color: #fff !important; }

.price-horizontal-box {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 18px; overflow: hidden; white-space: nowrap;
}
.price-final-box {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 22px; overflow: hidden; white-space: nowrap; margin-bottom: 10px;
}
.price-text-content { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.anim-marquee { animation: smooth-pan 4.5s ease-in-out infinite alternate; }
@keyframes smooth-pan {
    0%, 20% { transform: translateX(12px); }
    80%, 100% { transform: translateX(-12px); }
}

@media (max-width: 600px) {
    .btn-grid-action { font-size: 0.7rem; padding: 6px 2px; gap: 3px; }
    .btn-grid-action i { font-size: 0.75rem; }
    .price-final-text { font-size: 0.95rem !important; }
}



/* =========================================================
   TAMPILAN BOTTOM NAV KHUSUS DETAIL PRODUK (MOBILE)
   ========================================================= */
@media (max-width: 767.98px) {
    /* Sembunyikan tombol beli asli di isi.php pada mobile */
    .order-action { display: none !important; }
    
    /* Sembunyikan bottom nav standar jika sedang buka Detail Produk */
    .bottom-nav-standard { display: none !important; }
}

.bottom-nav-detail {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: stretch;
    padding: 8px 10px;
    z-index: 1000;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.bottom-nav-detail .nav-icons-container {
    display: flex;
    gap: 14px;
    align-items: center;
}

.bottom-nav-detail .nav-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #777;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 40px;
    position: relative;
    transition: color 0.2s;
}

.bottom-nav-detail .nav-icon-item i {
    font-size: 1.25rem;
    margin-bottom: 3px;
    color: #6c757d;
    transition: transform 0.2s, color 0.2s;
}

.bottom-nav-detail .nav-icon-item:hover i,
.bottom-nav-detail .nav-icon-item:active i {
    color: #ff9800;
    transform: scale(1.15);
}

.bottom-nav-detail .nav-action-container {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Desain Tombol Beli 3D Pastel & Eye-Catching */
.bottom-nav-detail .nav-btn-buy {
    width: 100%;
    background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
    color: #fff;
    border: 1px solid #e64a19;
    border-radius: 25px;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(255, 87, 34, 0.4);
    position: relative;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.bottom-nav-detail .nav-btn-buy:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(255, 87, 34, 0.3);
}

/* Desain Tombol WhatsApp */
.bottom-nav-detail .nav-btn-wa {
    width: 100%;
    background: linear-gradient(135deg, #4ade80 0%, #128c7e 100%);
    color: #fff;
    border: 1px solid #075e54;
    border-radius: 25px;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(18, 140, 126, 0.4);
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bottom-nav-detail .nav-btn-wa:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(18, 140, 126, 0.3);
}

/* Label Hemat Lucu & Animasi Melayang */
.bottom-nav-detail .label-hemat {
    position: absolute;
    top: -18px;
    right: 10px;
    background: #fff3cd;
    color: #d32f2f;
    font-size: 0.65rem;
    padding: 3px 10px;
    border-radius: 12px 12px 12px 2px;
    font-weight: 800;
    border: 1px solid #ffeeba;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    animation: floatHemat 2s infinite ease-in-out;
    white-space: nowrap;
    z-index: 10;
    letter-spacing: 0.3px;
}

.bottom-nav-detail .label-hemat::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 8px;
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: #fff3cd transparent transparent transparent;
}

@keyframes floatHemat {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-4px) rotate(-2deg); }
}


/* =========================================================
   FITUR BACA SELENGKAPNYA (READ MORE) DESKRIPSI PRODUK - MOBILE
   ========================================================= */
@media (max-width: 767.98px) {
    .desc-wrapper-mobile {
        position: relative;
        max-height: 180px; /* Tinggi awal deskripsi yang ditampilkan */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }
    .desc-wrapper-mobile.expanded {
        max-height: 5000px; /* Angka besar agar seluruh teks muat */
    }
    
    /* 1. Efek Gradasi Putih (Dibuat lebih pendek agar tidak terlalu menutupi atas) */
    .desc-wrapper-mobile .desc-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px; /* Dibuat lebih pendek dari sebelumnya */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 1) 100%);
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 1;
    }
    .desc-wrapper-mobile.expanded .desc-gradient {
        opacity: 0;
        visibility: hidden;
    }
    
    /* 2. Tombol Selengkapnya (Saat posisi tertutup / Default) */
    .btn-read-more-mobile {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 12px 0;
        color: #0288d1;
        background-color: #fff;
        border: none;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        gap: 6px;
        position: relative;
        z-index: 5;
        margin-top: -15px; 
        box-shadow: 0 -15px 20px rgba(255, 255, 255, 1), 0 -5px 10px rgba(255, 255, 255, 1);
    }
    .btn-read-more-mobile i {
        transition: transform 0.3s ease;
    }

    /* 3. Tombol Sembunyikan (Saat deskripsi terbuka penuh) */
    .desc-wrapper-mobile.expanded + .btn-read-more-mobile {
        margin-top: 10px; /* Tombol kembali turun ke posisi normal */
        box-shadow: none; /* Kabut putih dihilangkan */
        border-top: 1px solid #f0f0f0; /* Munculkan garis batas */
    }
}

/* =========================================================
   SEMBUNYIKAN FITUR MOBILE SAAT DIAKSES LEWAT DESKTOP/LAPTOP
   ========================================================= */
@media (min-width: 768px) {
    .btn-read-more-mobile, .desc-gradient {
        display: none !important;
    }
    .desc-wrapper-mobile {
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* PERBAIKAN BUG (BIANG KEROK): Kekuatan Selector ID untuk menimpa CSS Bawaan secara mutlak */
    #mobileBottomNavDetail,
    #standardBottomNav.bottom-nav-standard,
    .bottom-nav-detail {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Pastikan tombol Beli / WA asli di halaman Desktop kembali muncul normal */
    .order-action {
        display: flex !important; 
    }
}

/* =========================================================
   PASTIKAN NAV STANDAR MENGHILANG SAAT DI DETAIL (KHUSUS HP)
   ========================================================= */
@media (max-width: 767.98px) {
    #standardBottomNav.bottom-nav-standard {
        display: none !important;
    }
}


/* =========================================================
   TRUE LOADER EXPERIENCE (FULLSCREEN & SECTION)
   ========================================================= */
/* 1. Loader Layar Penuh (Untuk Detail Produk & Keranjang) */
.global-fullscreen-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fdfdfd;
    z-index: 9999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* 2. Loader Area (Untuk List Produk & Kategori di Beranda) */
.section-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; min-height: 350px;
    background-color: rgba(253,253,253,0.95); /* Menutupi HANYA area produk */
    z-index: 50;
    display: block; 
    transition: opacity 0.6s ease, visibility 0.6s ease;
    border-radius: 8px;
}
.section-loader .loader-box-center {
    position: sticky !important;
    top: 150px !important; /* Kotak putih akan berhenti 150px dari atas layar saat di-scroll */
    z-index: 99 !important;
    margin: 60px auto 0 auto !important; /* Posisi awal agak turun sedikit, dan di tengah horizontal */
    transform: none !important;
    left: auto !important;
}

/* 3. Kotak Putih di Tengah Loader */
.loader-box-center {
    background: #fff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    text-align: center;
    width: 85%;
    max-width: 350px;
    border: 1px solid #f0f0f0;
    border-top: 5px solid #ff9800;
}

.loader-box-center .progress-container {
    width: 100%; background: #eee; height: 8px; border-radius: 4px; overflow: hidden; margin: 15px 0 8px 0;
}
.loader-box-center .progress-fill {
    height: 100%; width: 0%; background: linear-gradient(90deg, #ff9800, #ff5722); transition: width 0.3s ease-out;
}

/* 4. Efek Konten Memudar (Fade-In) setelah Loading Selesai */
.content-hidden-initial {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.content-visible-loaded {
    opacity: 1;
    transform: none !important; 
}


/* =========================================================
   MODE FOKUS: SEMBUNYIKAN SEMUA NAVBAR SAAT GALLERY DIBUKA
   ========================================================= */
/* Sembunyikan Navbar Atas & Bawah ketika "Saklar Sakti" aktif */
body.gallery-fullscreen-active #topMenu,
body.gallery-fullscreen-active .main-header,
body.gallery-fullscreen-active #mobileBottomNavDetail,
body.gallery-fullscreen-active #standardBottomNav,
body.gallery-fullscreen-active .bottom-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Pastikan Modal Gallery menduduki kasta paling tinggi dan presisi di atas */
body.gallery-fullscreen-active .mobile-gallery-modal {
    top: 0 !important;
    bottom: 0 !important;
    z-index: 999999999 !important;
}

/* PERBAIKAN BUG SCROLL: Menghancurkan 'Penjara CSS' (Stacking Context) dari Parent */
/* Memastikan Modal tidak ikut bergeser meski sebelumnya pengunjung sudah men-scroll jauh ke bawah */
body.gallery-fullscreen-active #detailContentArea,
body.gallery-fullscreen-active .w3-main {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    will-change: auto !important;
}