/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

/*** Button Start ***/
.btn { font-weight: 600; transition: .5s; }
.btn-square { width: 32px; height: 32px; }
.btn-sm-square { width: 34px; height: 34px; }
.btn-md-square { width: 40px; height: 40px; }
.btn-lg-square { width: 46px; height: 46px; }
.btn-xl-square { width: 56px; height: 56px; }
.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square, .btn-xl-square {
    padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;
}
.btn.btn-primary { color: var(--bs-white); border: none; }
.btn.btn-primary:hover { background: var(--bs-dark); color: var(--bs-white); }
.btn.btn-light { color: var(--bs-primary); border: none; }
.btn.btn-light:hover { color: var(--bs-white); background: var(--bs-primary); }
/*** Button End ***/

/*** Dropdown & General Navbar Start ***/
/* Perbaikan Dropdown Hover - Teks Hitam & Latar Abu-abu */
.navbar .dropdown-item:hover, 
.navbar .dropdown-item.active,
.dropdown .dropdown-menu .dropdown-item:hover,
.dropdown .dropdown-menu .dropdown-item.active { 
    background-color: #f1f3f5 !important; 
    color: #1a1a1a !important; 
    font-weight: bold !important; 
}

@media (max-width: 991px) {
    .navbar { padding: 20px 0; justify-content: space-between; }
    .navbar .navbar-nav .nav-link { padding: 0; }
    .navbar .navbar-nav .nav-item { display: flex; padding: 12px; flex-direction: column; justify-content: start; align-items: start; }
    .navbar .navbar-nav { width: 100%; display: flex; margin-top: 20px; padding-bottom: 20px; background: var(--bs-light); }
    .navbar.navbar-expand-lg .navbar-toggler { padding: 8px 15px; border: 1px solid var(--bs-primary); color: var(--bs-primary); }
}
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block; visibility: hidden; top: 100%; transform: rotateX(-75deg);
        transform-origin: 0% 0%; border: 0; transition: .5s; opacity: 0;
    }
    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg); visibility: visible; margin-top: 19px;
        background: var(--bs-white); transition: .5s; opacity: 1;
    }
}
/*** Dropdown & General Navbar End ***/

/*** Carousel Navigations Start ***/
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute; width: 60px; height: 60px; background: var(--bs-white); color: var(--bs-primary);
    font-size: 26px; display: flex; align-items: center; justify-content: center; transition: 0.5s;
}
.header-carousel .owl-nav .owl-prev { bottom: 30px; left: 0; }
.header-carousel .owl-nav .owl-next { bottom: 30px; right: 0; }
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover { box-shadow: inset 0 0 65px 0 var(--bs-primary); color: var(--bs-dark); }
/*** Carousel Navigations End ***/



/* --- 1. WARNA UTAMA --- */
.bg-dark-blue { background-color: #0b2239 !important; }
.text-dark-blue { color: #0b2239 !important; }
.bg-red { background-color: #d90429 !important; }
.text-red { color: #d90429 !important; }
.border-red { border-color: #d90429 !important; }
.bg-footer { background-color: #051322 !important; }
.bg-copyright { background-color: #030b14 !important; }

/* --- 2. TIPOGRAFI & SPASI --- */
.fs-9 { font-size: 9px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fw-300 { font-weight: 300 !important; }
.ls-1 { letter-spacing: 1px; }
.ls-1-5 { letter-spacing: 1.5px; }
.ls-2 { letter-spacing: 2px; }
.lh-1-8 { line-height: 1.8; }
.lh-2-2 { line-height: 2.2; }

/* --- 3. ELEMEN DEKORASI --- */
.divider-red-center { width: 60px; height: 3px; background-color: #d90429; margin: 0 auto; }
.divider-red-left { width: 40px; height: 2px; background-color: #d90429; margin: 0 auto; }

/* --- 4. NAVBAR MELAYANG KUSTOM --- */
.floating-nav-container { z-index: 1000; margin-top: 35px; max-width: 1350px; }
.logo-img { max-height: 40px; width: auto; }
.navbar .dropdown-menu { margin-top: 0; border-radius: 8px; border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }

/* --- 5. HERO SECTION (VIDEO DRONE) --- */
.hero-video-wrapper { height: 100vh; min-height: 600px; overflow: hidden; margin-top: 0; }
.hero-video-bg { object-fit: cover; z-index: -1; }
.hero-overlay { background: rgba(11, 34, 57, 0.55); z-index: 1; }

/* --- 6. GAMBAR, IKON & MODAL --- */
.img-pillar { width: 160px; height: 160px; object-fit: cover; }
.client-logo-box { height: 80px; }
.logo-footer { max-height: 45px; background-color: #fff; padding: 4px; border-radius: 4px; }
#modalImg { max-height: 350px; object-fit: contain; }

/* --- 7. TOMBOL KEMBALI KE ATAS --- */
.back-to-top {
    position: fixed; right: 30px; bottom: 30px; z-index: 99; background-color: #d90429;
    border: none; color: white; border-radius: 50%; width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.3s;
}
.back-to-top:hover { background-color: #0b2239; color: white; }
/* Efek Foto Bergeser & Membesar Perlahan (Ken Burns Effect) */
@keyframes kenBurnsZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1) translate(-1%, -1%);
    }
    100% {
        transform: scale(1);
    }
}

.animated-bg-image {
    animation: kenBurnsZoom 15s ease-in-out infinite;
    transition: transform 0.5s ease;
}
/* Efek Logo Klien (Abu-abu ke Berwarna) */
.client-logo-img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
    max-height: 110px !important; 
    width: auto !important; 
    margin: 0 auto; 
}

/* Saat Kursor Diarahkan (Hover) */
.client-logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
/* --- 6. GAMBAR, IKON & MODAL --- */
.logo-footer { 
    max-height: 55px; /* Ukuran sedikit diperbesar agar lebih tegas */
    width: auto; 
    object-fit: contain;
    /* Background putih, padding, dan border-radius telah dihapus */
}
/* Sembunyikan Bar Atas dan Efek Sorotan Kuning Google */
.skiptranslate iframe, .goog-te-banner-frame { display: none !important; }
body { top: 0px !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }