/* 1. RESET & SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif; /* Pastikan lo panggil font Inter di HTML */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. CUSTOM SCROLLBAR (Biar Modal Nggak Kaku) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
    transition: all 0.3s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #f97316; /* orange-500 */
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
    -webkit-overflow-scrolling: touch;
}

/* 3. ANIMASI GLASSMORPHISM & SHADOW PREMIUM */
.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shadow-premium {
    box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.1); /* Soft Orange Shadow */
}

/* 4. MODAL ANIMATION OVERRIDE */
#modal-jadwal.flex, #modal-detail.flex {
    display: flex !important;
    animation: fadeIn 0.3s ease-out;
}

#modal-content {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- CSS SLIDER ANTI-MELER (HP & DESKTOP) --- */
.slider-container {
    display: flex !important; /* WAJIB: Biar gambar baris ke samping, bukan ke bawah */
    flex-direction: row !important; /* Maksa horizontal */
    overflow-x: hidden; /* Sembunyiin gambar yang antre di kanan */
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
}

.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-item {
    flex: 0 0 100% !important; /* WAJIB: Biar 1 gambar makan 100% lebar kotak */
    width: 100%;
    min-width: 100%; /* Kunci biar nggak ciut */
}

.slider-item img {
    width: 100%;
    height: 320px; /* Tinggi di HP: sesuain aja (misal h-80) */
    object-fit: cover;
    display: block;
}

/* Biar di Desktop tetep tinggi sesuai kodingan lo tadi */
@media (min-width: 768px) {
    .slider-item img {
        height: 550px; 
    }
}


/* 5. MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    /* Mencegah zoom otomatis pada input date di iPhone */
    input[type="date"] {
        font-size: 16px !important;
    }
    
    /* Biar modal full screen di HP tapi tetep ada padding */
    .max-h-\[90vh\] {
        max-height: 92vh !important;
    }
}