/* ============================================================
   1. GLOBAL STYLES & RESET
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100vw;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}

/* Menghilangkan visual scrollbar */
::-webkit-scrollbar {
    display: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ============================================================
   2. ANIMATIONS DEFINITION
   ============================================================ */
@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shine_auto {
    0% { left: -100%; }
    40%, 100% { left: 100%; }
}

@keyframes pulse-res {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.animate-shine { animation: shine 1s ease; }
.animate-bounce-custom { animation: bounce 2s infinite; }

/* ============================================================
   3. COMPONENTS (Navbar, Gallery, Slider)
   ============================================================ */
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e2e8f0;
}

.slider-item img,
.carousel-item img {
    width: 100% !important;
    height: 500px !important;
    object-fit: cover !important;
}

/* Gallery Section */
.gallery-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.gallery-cont,
.relative-cont {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 10px; /* Tambahkan ini untuk mengecilkan gambar ke dalam */
    background: #fff; /* Pastikan background putih agar padding terlihat seperti bingkai */
}

.gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}


/* Buttons & Overlays */
.overlay-btn {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.gallery-item:hover .overlay-btn {
    opacity: 1;
}

.btn-inside {
    padding: 10px 25px;
    background:#10b981;
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.3s;
    pointer-events: none !important;
    position: relative;
    z-index: 10;
    animation: pulse-res 2s infinite !important;
}

/* ============================================================
   4. UTILITY & FLOATING ELEMENTS
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #25D366;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 100;
}

a[data-fancybox] {
    text-decoration: none !important;
    outline: none !important;
}

.gallery-section > img,
body > img:not(.gallery-img) {
    display: none !important;
}

.gallery-cont {
    display: grid !important;
    overflow: hidden !important;
    clear: both !important;
}

.gallery-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#kontak {
    margin-top: -2px !important;
    position: relative;
    z-index: 50;
}

.container,
.gallery-section,
.gallery-cont,
.relative-cont {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gallery-item {
    width: 100% !important;
}

/* Slider Animation Logic */
// Deklarasikan variabel di luar agar tidak ter-reset
let slideIndex = 0;
let autoSlideInterval;

/* GUNAKAN window. AGAR HTML BISA MEMANGGILNYA*/

window.moveSlide = function(step) {
    const slider = document.getElementById("slider");
    if (!slider) return;

    const totalSlides = slider.children.length;
    slideIndex += step;

    /* Logika Loop */
    if (slideIndex >= totalSlides) slideIndex = 0;
    if (slideIndex < 0) slideIndex = totalSlides - 1;

     /* Geser slider */
    slider.style.transform = `translateX(-${slideIndex * 100}%)`;
    
 /* Reset timer agar tidak tabrakan saat diklik manual */
    startAutoSlide();
};

function startAutoSlide() {
    if (autoSlideInterval) clearInterval(autoSlideInterval);
    autoSlideInterval = setInterval(() => { 
        window.moveSlide(1); 
    }, 5000); 
}
/* Jalankan otomatis */
startAutoSlide();

/* ============================================================
    5. RESPONSIVE (MEDIA QUERIES)
   ============================================================ */

/* Tablet (992px) */
@media (max-width: 992px) {
    .gallery-cont {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile / HP (768px ke bawah) */
@media (max-width: 768px) {
    .gallery-cont,
    .relative-cont {
        grid-template-columns: 1fr !important;
    }

    .gallery-item {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        box-shadow: none !important;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .gallery-item img {
        height: auto !important;
        border-radius: 12px;
        order: 1;
    }

    .overlay-btn {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        background: transparent !important;
        padding: 10px 0 !important;
        inset: auto !important;
        order: 2;
    }

    .btn-inside {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .slider-item img,
    .carousel-item img {
        height: 300px !important;
    }

    .gallery-section h2 {
        font-size: 28px;
        margin-top: 40px !important;
    }

    /* Force Display & Kilau Otomatis */
    .relative.group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .relative.group img {
        position: relative !important;
        order: 1 !important;
    }

    .relative.group button {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        margin: 15px 0 25px 0 !important;
        order: 2 !important;
        width: 80% !important;
        justify-content: center !important;
    }

    .relative.group button span span {
        animation: shine_auto 2s infinite !important;
        left: -100%;
    }

    .f-button.is-close-btn {
        top: 10px;
        right: 10px;
        scale: 1.2;
    }
}

/* Menjamin slider berderet ke samping dan transisinya aktif */
#slider {
    display: flex !important;
    transition: transform 0.4s ease-in-out !important;
    will-change: transform;
}

#slider > div {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}
 <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        
        /* Animasi Shine untuk Button dan Logo */
        @keyframes shine {
            100% { left: 125%; }
        }
        .animate-shine { animation: shine 0.8s font-medium; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #10b981; border-radius: 5px; }

        /* Glassmorphism Effect */
        .glass-effect {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
    </style>