body {
    background-color: #FDFCF8;
    color: #4A4A4A;
    -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F1F1; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

.hero-pattern {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Animations */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Modal & UI Elements */
.modal { opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal.active { opacity: 1; visibility: visible; }
.modal-content { transform: scale(0.95); transition: transform 0.3s ease; }
.modal.active .modal-content { transform: scale(1); }

.var-btn.selected { border-color: #10B981; background-color: #ECFDF5; }
.var-btn.selected .check-circle { background-color: #10B981; border-color: #10B981; color: white; }

/* Floating Bar Hover Effect Logic */
.floating-bar { transform: translateY(150%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.floating-bar.active { transform: translateY(0); }

/* PERBAIKAN: Tombol Lanjut Selalu Muncul (Tidak disembunyikan lagi) */
.btn-lanjut-wrapper {
    max-width: 200px;
    opacity: 1;
    margin-left: 12px;
    transition: all 0.4s ease;
}

/* Custom Dropdown for Catalog Filter */
.custom-select-wrapper { position: relative; }
.custom-select-trigger { cursor: pointer; }
.custom-options {
    opacity: 0; visibility: hidden; pointer-events: none;
    position: absolute; top: 110%; left: 0; right: 0;
    background: white; border: 1px solid #E5E7EB; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 60; max-height: 200px; overflow-y: auto;
    transform: translateY(-10px); transition: all 0.2s;
}
.custom-select-wrapper.open .custom-options { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Accordion Animation - SPEEDED UP to 0.15s */
.accordion-content {
    transition: max-height 0.15s ease-out, opacity 0.15s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.accordion-content.open {
    opacity: 1;
}

/* Navigation Active State */
.nav-link { color: #475569; position: relative; }
.nav-link.active { color: #2563eb; font-weight: 600; }
.nav-link.active::after {
    content: ''; position: absolute; bottom: -24px; left: 0; width: 100%; height: 3px;
    background-color: #2563eb; border-radius: 2px 2px 0 0;
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}

/* Mobile Nav Link Active State */
.mobile-nav-link { color: #475569; border-left: 3px solid transparent; }
.mobile-nav-link.active { 
    color: #2563eb; 
    font-weight: 600; 
    background-color: #eff6ff;
    border-left: 3px solid #2563eb;
}

/* --- POP UP WILAYAH --- */
.region-option { 
    position: relative; 
    z-index: 1; 
    transition: z-index 0s linear 0.1s; 
    flex-wrap: wrap; 
}
.region-option:hover { z-index: 50; transition-delay: 0s; }

.region-tooltip {
    display: none;      
    width: 100%;         
    flex-basis: 100%;    
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: #FAFAF9; 
    color: #57534E;            
    font-size: 0.75rem;
    line-height: 1.5;
    border: 1px solid #E7E5E4; 
    border-radius: 0.5rem;
    position: static; 
    opacity: 1; 
    visibility: visible;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
}

.region-tooltip::after { display: none; }
.tooltip-trigger:hover .region-tooltip { display: block; animation: fadeIn 0.3s ease; }

@media (max-width: 640px) { 
    .region-tooltip { margin-left: 0; }
}