/* Ukuran slider penuh (desktop) */
.video-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Elemen video/iframe di dalam slider */
.video-slider video,
.video-slider iframe,
.video-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    /* fokus bagian atas */
}

/* Wrapper konten slide */
.video-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Video content full */
.video-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 100vh;
}

/* === Responsif untuk Mobile (HP ≤768px) === */
@media (max-width: 768px) {
    .video-slider {
        height: 75vh;
        /* Kurangi agar tidak melebihi viewport */
    }

    .video-content {
        height: 100%;
        max-height: 75vh;
    }

    .video-slider video,
    .video-slider iframe,
    .video-slider img {
        object-position: center center;
        width: 100vw;
        object-fit: cover;
        display: block;
    }
}

/* === Responsif HP Ekstra Kecil (≤480px) === */
@media (max-width: 480px) {
    .video-slider {
        height: 65vh;
    }

    .video-content {
        max-height: 65vh;
    }
}

/* Tombol Next/Prev jadi kecil */
.swiper-button-next,
.swiper-button-prev {
    width: 30px;
    /* ukuran tombol */
    height: 30px;
    /* ukuran tombol */
    color: #ffffff;
    /* warna icon panah */
    background-color: rgba(186, 186, 186, 0.4);
    /* background semi transparan */
    border-radius: 50%;
    /* bulat */
    backdrop-filter: blur(4px);
    /* efek blur */
}

/* Hover effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
    /* sedikit membesar saat hover */
    transition: all 0.3s ease;
}

/* Icon panah di dalam tombol lebih kecil */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px;
    /* defaultnya 20px, kita perkecil */
}

/* Pagination bullet */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.7);
    opacity: 1;
}


/* ANIMASI */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%) translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(7px);
    }
}

@keyframes floatUpDown {
    0% {
        transform: translateY(7px);
    }

    50% {
        transform: translateY(-7px);
    }

    100% {
        transform: translateY(7px);
    }
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(7px);
    }

    100% {
        opacity: 0;
        transform: translateX(-100%) translateY(7px);
    }
}

/* Styling dasar tombol (desktop) */
.youtube-button {
    opacity: 0;
    position: absolute;
    top: 60% !important;
    left: 23%;
    background-color: #ffffff;
    color: #123458;
    padding: 3px 5px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.5s ease;
    z-index: 9999;
    font-size: 16px;
    pointer-events: none;
}

/* Tampilkan tombol + animasi */
.youtube-button.show {
    pointer-events: auto;
    animation:
        slideInLeft 1.2s ease forwards,
        floatUpDown 2s ease-in-out infinite;
    animation-delay: 0s, 1.2s;
    animation-fill-mode: forwards, forwards;
}

/* Sembunyikan tombol */
.youtube-button.hide {
    pointer-events: none;
    animation: slideOutLeft 1.2s ease forwards;
}

/* Tablet & mobile (≤768px) */
@media (max-width: 768px) {
    .youtube-button {
        top: 58% !important;
        left: 14% !important;
        transform: translateX(-50%) !important;
        font-size: 6px !important;
        /*Ukurantekslebihkecil*/
        padding: 1px 5px !important;
        /*Paddingkecil*/
    }
}

/* Smartphone kecil (≤480px) */
@media (max-width: 480px) {
    .youtube-button {
        top: 58% !important;
        font-size: 6px !important;
        padding: 1px 5px !important;
    }
}

/* Smartphone sangat kecil (≤360px) */
@media (max-width: 360px) {
    .youtube-button {
        top: 85% !important;
        font-size: 8px !important;
        padding: 1px 3px !important;
    }
}



.video-content-mobile {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Tampilkan hanya di mobile */
.video-slider-mobile {
    display: none;
}

@media (max-width: 768px) {
    .video-slider {
        display: none;
        /* sembunyikan versi desktop */
    }

    .video-slider-mobile {
        display: block;
    }
}






.btn[data-bs-target="#mobileMenu"] {
  background: linear-gradient(to top, #204289, #4a9cd5) !important;
  /* Biru Bootstrap */
  border: none !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
}

.btn[data-bs-target="#mobileMenu"]:hover {
  background: linear-gradient(to top, #204289, #4a9cd5) !important;
  /* Biru lebih gelap saat hover */
}

/* Ubah warna ikon navbar-toggler */
.btn[data-bs-target="#mobileMenu"] .navbar-toggler-icon {
  filter: invert(1) brightness(2);
  /* Bikin ikon putih */
}