/* ==========================================================================
   1. SAMBILAN VISUAL CUSTOM ANIMATION - ADVANTAGES CARD
   ========================================================================== */

/* Keadaan awal kartu dan transisi kurva halus */
.custom-hover-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Transisi untuk kotak ikon di dalam kartu */
.custom-hover-card .icon-box {
    transition: all 0.3s ease !important;
}

/* Kustomisasi teks paragraf agar rapi */
.custom-hover-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Efek Interaktif ketika kartu dilewati kursor (Hover) */
.custom-hover-card:hover {
    transform: translateY(-10px); /* Kartu terangkat ke atas */
    box-shadow: 0 20px 35px rgba(99, 102, 241, 0.12) !important; /* Pendaran warna premium */
    background: #ffffff !important;
}

/* Efek mikro-interaksi pada ikon saat kartu di-hover */
.custom-hover-card:hover .icon-box {
    transform: scale(1.1) rotate(4deg); /* Ikon membesar & sedikit miring */
    background-color: #6366f1 !important; /* Warna latar belakang ikon berubah solid */
    color: #ffffff !important; /* Ikon di dalam berubah jadi putih */
}


/* ==========================================================================
   2. SAMBILAN VISUAL DESKTOP MEGA MENU & DROPDOWN HOVER SYSTEM (LAPTOP/PC)
   ========================================================================== */
@media (min-width: 992px) {
    /* Memaksa kotak menu dropdown & mega menu muncul saat tombol atau areanya di-hover */
    #navbar .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
    #navbar .navbar-nav .nav-item.dropdown:hover > .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Setelan dasar kotak menu sebelum di-hover (Efek Transisi Turun Halus) */
    #navbar .navbar-nav .dropdown-menu {
        display: block !important; /* Diubah ke block agar transisi opacity bekerja */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    /* Menghilangkan jeda klik kosong yang mengganggu di desktop */
    #navbar .navbar-nav .nav-item.dropdown > .dropdown-toggle::after {
        pointer-events: none !important;
    }
}

/* Desain item menu di dalam dropdown agar serasi */
.dropdown-item {
    padding: 10px 20px;
    font-size: 0.92rem;
    color: #4b5563;
    transition: all 0.2s ease;
}

/* Efek warna premium saat menu disorot kursor */
.dropdown-item:hover {
    background-color: #6366f1 !important; /* Indigo Khas Sambilan Visual */
    color: #ffffff !important;
    padding-left: 25px; /* Efek bergeser sedikit ke kanan */
}


/* ==========================================================================
   3. SAMBILAN VISUAL MOBILE RESPONSIVE SCROLL FIX (KHUSUS HP / SELULER)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* 1. Paksa kontainer navbar utama bisa di-scroll dan batasi tingginya */
    #navbarCollapse {
        max-height: 70vh !important; /* Batasi tinggi menu maksimal 70% dari tinggi layar HP */
        overflow-y: auto !important;  /* Aktifkan scrollbar vertikal mandiri */
        display: none;                /* Biarkan kendali open/close diatur Bootstrap */
        -webkit-overflow-scrolling: touch !important; /* Scroll super lembut di iOS/Android */
    }

    /* Ketika menu mobile sedang terbuka (.show), pastikan tampilannya block */
    #navbarCollapse.show {
        display: block !important;
    }

    /* 2. Paksa elemen pembungkus terluar navbar melepas kuncian tinggi kaku template */
    #navbar, 
    .navbar-custom, 
    .sticky {
        overflow: visible !important; /* Jangan potong elemen yang meluber ke bawah */
    }

    /* 3. Menyesuaikan tampilan kotak Mega Menu agar mengalir alami mengikuti scroll HP */
    #navbar .dropdown-menu {
        position: relative !important; /* Ubah dari absolute ke relative agar memanjang alami ke bawah */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        box-shadow: none !important; /* Hapus bayangan agar tidak kotor di layar HP */
        padding: 15px !important;
        background-color: #f9fafb !important; /* Latar sub-menu sedikit abu-abu sebagai pembeda */
    }

    /* Pastikan menu dropdown yang aktif dipaksa muncul di mobile */
    #navbar .dropdown-menu.show {
        display: block !important;
    }

    /* 4. Menghilangkan garis pembatas kanan kolom desktop saat berubah jadi susunan vertikal di HP */
    #navbar .dropdown-menu .border-end {
        border-end: none !important;
        border-right: none !important;
        margin-bottom: 15px !important;
    }
}

/* Mengunci halaman belakang agar tidak bergerak saat menu mobile aktif */
body.menu-mobile-open {
    overflow: hidden !important;
    height: 100vh !important;
}