/* --- HERO CAROUSEL (BANNER UTAMA) --- */

/* 1. KUNCI UTAMA: Agar gambar Full Screen & Auto Fit */
.hero-slide {
    width: 100%;
    /* Tinggi viewport (layar) 100% */
    height: 100vh; 
    /* Jaga-jaga di HP biar gak terlalu pendek */
    min-height: 600px; 
    
    /* Membuat gambar selalu memenuhi kotak tanpa gepeng */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    position: relative;
}

/* 2. Overlay Hitam Transparan */
/* Wajib ada biar tulisan putih tetap terbaca di gambar terang */
.overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45); /* Hitam 45% */
    z-index: 1;
}

/* 3. Mengatur Posisi Teks */
.carousel-caption-custom {
    position: relative;
    z-index: 2; /* Harus lebih tinggi dari overlay */
    padding-top: 120px; /* Jarak dari atas (supaya gak ketutup navbar) */
}

/* 4. Tombol Navigasi (Next/Prev) */
/* Default: Transparan (hilang) */
.carousel-control-prev,
.carousel-control-next {
    width: 60px; /* Lebar area klik */
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 3;
}

/* Saat mouse masuk area carousel -> Tombol Muncul */
#mainCarousel:hover .carousel-control-prev,
#mainCarousel:hover .carousel-control-next {
    opacity: 1;
}

/* 5. Indikator (Titik-titik Bawah) */
.carousel-indicators {
    z-index: 3;
    bottom: 40px;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    margin: 0 6px !important;
    background-color: white !important;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: var(--color-accent, #fd0102) !important; /* Merah atau warna aksen */
    transform: scale(1.3); /* Sedikit membesar */
}

/* --- ANIMASI TEKS (Opsional biar kece) --- */
.animate__fadeInDown {
    animation: fadeInDown 1s ease-out;
}
.animate__fadeInUp {
    animation: fadeInUp 1s ease-out 0.5s both; /* Delay dikit */
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.bounce-animation {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* --- FITUR SCROLL SNAP (MODE PROXIMITY - AMAN) --- */

html {
    /* Gunakan 'proximity' agar tidak agresif dan tidak mental-mental */
    scroll-snap-type: y proximity; 
    scroll-behavior: smooth;
}

/* 1. Target BANNER (Start Point) */
#mainCarousel {
    scroll-snap-align: start;
    /* Memberi jarak sedikit supaya navbar tidak ketutup saat balik ke atas */
    scroll-margin-top: 0; 
}

/* 2. Target SEARCH BOX (Destination Point) */
.search-section {
    scroll-snap-align: start;
    
    /* PENTING: Angka ini harus > Tinggi Navbar kamu (sekitar 80-100px)
       Supaya pas lompat, search box posisinya pas di tengah, bukan ketutup navbar */
    scroll-margin-top: 110px; 
}

/* Reset snap untuk elemen lain di bawahnya supaya footer/list mobil aman */
body > section:not(.search-section):not(#mainCarousel) {
    scroll-snap-align: none;
}

/* --- CSS 3D CAROUSEL (SWIPER) --- */
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px; /* Lebar fix kartu agar efek 3D terlihat */
    height: auto;
}

/* Efek kartu mobil */
.car-card {
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Shadow lebih lembut */
    overflow: hidden;
    transition: transform 0.3s;
}

.swiper-slide-active .car-card {
    /* Highlight kartu yang sedang di tengah */
    border: 2px solid #135ef9; 
}