:root { 
    --primary: #0F172A;       
    --primary-hover: #1E293B;
    --secondary: #334155;     
    --bg-main: #FFFFFF;       
    --bg-alt: #F8FAFC;        
    --text-main: #0F172A; 
    --text-muted: #64748B; 
    --border: #E2E8F0;
}

html, body { -ms-overflow-style: none !important; scrollbar-width: none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }

body { background-color: var(--bg-main); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text-main); overflow-x: hidden; }

/* NAVBAR */
.commercial-nav { background: rgba(255, 255, 255, 0.98) !important; z-index: 1030; position: sticky; top: 0; }
.nav-link { font-size: 13px; font-weight: 600; color: var(--text-muted) !important; padding: 8px 12px !important; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-link:hover, .nav-link.active { color: var(--primary) !important; }
.nav-link.active { border-bottom: 2px solid var(--primary); }

.btn-brand-primary { background-color: var(--primary); color: #FFFFFF !important; font-weight: 600; border: none; transition: none;}
.btn-brand-primary:hover { background-color: var(--primary); box-shadow: none !important;}

.fab-wa { position: fixed; bottom: 30px; right: 30px; background: #25D366; color: #fff; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; z-index: 1000; text-decoration: none; transition: 0.3s; }
.fab-wa:hover { transform: scale(1.1); color: #fff; }

/* HERO */
.hero-section { position: relative; height: 400px; display: flex; align-items: center; background-position: center !important; background-size: cover !important; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4)); } 
.hero-content { position: relative; z-index: 2; color: #fff; padding: 0 50px; }

/* CARDS & UTILITIES (Hover Disederhanakan) */
.katalog-card, .review-card { background: #fff; border-radius: 12px; border: 1px solid var(--border); transition: all 0.2s ease; cursor: pointer; }
.katalog-card:hover, .review-card:hover { border-color: var(--primary); }

/* HORIZONTAL SCROLL */
.scroll-horizontal-wrapper {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; gap: 1rem; user-select: none; padding-top: 5px; padding-bottom: 10px;
}
.scroll-horizontal-wrapper::-webkit-scrollbar { display: none; }
.scroll-item { flex: 0 0 auto; width: 220px; } 
.review-item { width: 300px; } 

/* SEARCH */
.search-wrapper { display: flex; background: #fff; border-radius: 50px; padding: 5px 5px 5px 15px; border: 1px solid var(--border); transition: 0.3s; }
.search-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1); }
.search-box { flex-grow: 1; border: none; background: transparent; font-size: 14px; outline: none; }
.search-btn { background: var(--primary); color: #fff; border: none; border-radius: 50px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: 0.2s; }

/* MODAL UI & TOMBOL X HITAM */
.modal.fade .modal-dialog { transition: transform 0.12s ease-out !important; }
.fade { transition: opacity 0.12s linear !important; }
.modal-img-container { min-height: 250px; }
.btn-close-custom { position: absolute; top: -12px; right: -12px; background: #fff; border: 1px solid var(--border); color: #000; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 1060; cursor: pointer; transition: all 0.2s; font-size: 16px; outline: none; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn-close-custom:hover { background-color: #000; color: #fff; border-color: #000; } 

.review-text-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
    .hero-section { height: 320px; }
    .hero-content { padding: 0 20px; text-align: center; }
    
    .scroll-item { width: 160px; }
    .review-item { width: 260px; }
    
    .modal-dialog { margin: 1rem; }
    .modal-content, .modal-body { border-radius: 12px !important; }
    /* Gambar di modal disusutkan untuk mobile */
    .modal-img-container { min-height: 140px; height: 140px; flex: none !important; } 
    .btn-close-custom { top: 10px; right: 10px; }
    
    .product-item { padding-left: 4px; padding-right: 4px; }
}

/* =========================================
   PUBLIC PREMIUM INTERACTIVES & ACCESSIBILITY
   ========================================= */
.btn:active, 
.katalog-card:active, 
.search-btn:active, 
.btn-close-custom:active {
    transform: scale(0.97) !important;
}

.btn, 
.katalog-card, 
.search-btn, 
.btn-close-custom {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    touch-action: manipulation;
    will-change: transform;
    transform: translate3d(0,0,0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.15) !important;
}

@keyframes fadeInPage {
    from { 
        opacity: 0; 
        transform: translateY(8px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
body > .container, 
body > .container-fluid {
    animation: fadeInPage 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.katalog-img-wrap {
    aspect-ratio: 1 / 1 !important;
    display: block;
    overflow: hidden;
}