/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Image Hover Effect */
.hover-scale { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.hover-scale:hover { transform: scale(1.05); }


@keyframes fade-in-down {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
}

/* Transisi untuk garis hamburger */
#menuBtn span {
    transform-origin: center;
}


@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}
/* Menyesuaikan kecepatan transisi teks */
.heroSwiper .swiper-slide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.heroSwiper .swiper-slide-active {
    opacity: 1;
}

.hero-title {
        line-height: 1.1;
        letter-spacing: -0.05em;
        /* Tambahan baru di bawah ini */
        word-break: break-word;
        max-width: 100%;
    }

    /* Jika di layar HP judul masih terasa terlalu mepet ke bawah */
    @media (max-width: 768px) {
        .heroSwiper .swiper-slide {
            padding-top: 20px;
            padding-bottom: 40px;
        }
    }
    
    
    
/* Efek Penghalus Gambar Hero */
    .hero-img-custom {
        /* Drop shadow besar dan halus untuk menyamarkan pinggiran */
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
        
        /* Memberikan sedikit refleksi di bawah gambar (opsional) */
        -webkit-box-reflect: below 5px linear-gradient(transparent, transparent, rgba(255,255,255,0.1));
        
        /* Memperhalus renderan pixel terutama untuk GIF */
        image-rendering: -webkit-optimize-contrast;
        
        /* Transisi halus saat gambar muncul */
        transition: all 0.5s ease-in-out;
    }

    /* Efek Masking/Frame Halus (Membuat pinggiran bawah agak blur/menyatu) */
    .hero-img-mask {
        mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    }

    /* Animasi Mengapung yang lebih halus */
    @keyframes float-custom {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(1deg); }
        100% { transform: translateY(0px) rotate(0deg); }
    }
    .animate-float-soft {
        animation: float-custom 6s ease-in-out infinite;
    }