[x-cloak] {
    display: none !important;
}

body {
    font-family: "Inter", sans-serif;
    /* Kamu bisa mengatur ketebalan dari 100 sampai 900 */
    font-weight: 400;
}

h1,
h2,
h3 {
    font-family: "Oswald", sans-serif;
}

/* ==========================================
   FIXED CUSTOM MENU LINK & FONTAWESOME ROTATION
   ========================================== */

.menu-link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    background: transparent;
    color: #171717; /* Neutral 900 */
    z-index: 10;
}

/* Lapisan gradasi di bawah */
.menu-link::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(45deg, #fe9a00, #ca3500);
    transition: width 0.4s ease-in-out;
    z-index: -1; /* Ubah ke -1 agar tidak menimpa text default */
}

/* Efek Hover & State Aktif */
.menu-link:hover,
.menu-link.is-active {
    color: #ffffff !important;
}

.menu-link:hover::before,
.menu-link.is-active::before {
    width: 100%;
}

/* Penyelarasan element anak agar tetap di atas backdrop gradient */
.menu-link span,
.menu-link i,
.menu-link svg {
    position: relative;
    z-index: 2;
    color: inherit !important;
}

/* Koreksi behavior transisi khusus SVG FontAwesome */
.menu-link svg {
    display: inline-block !important;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease !important;
    transform-origin: center center !important;
}

/* FORCE ROTATION: Target langsung ke SVG FontAwesome jika parent memicu state aktif/buka */
.menu-link.fa-open svg.fa-chevron-down {
    transform: rotate(180deg) !important;
}

/* Mencegah tabrakan warna teks amber saat menu aktif dalam kondisi hover background */
.menu-link.is-active {
    color: #ffffff !important;
}

.myVideoSwiper {
    width: 100%;
    /* Gunakan h-screen kalau mau full layar, atau h-[500px] sesuai kebutuhan */
    height: 100%;
}

.myVideoSwiper .swiper-slide {
    display: flex;
    align-items: center; /* Memastikan isi slide secara vertikal di tengah */
    justify-content: center;
    height: 100%;
}

/* --- INDICATOR / PAGINATION --- */
/* Warna dasar saat tidak aktif */
.myVideoSwiper .swiper-pagination-bullet {
    background: white !important;
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* Warna saat aktif dengan Gradient 45 Derajat */
.myVideoSwiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    width: 24px; /* Membuat bentuk pill yang modern */
    border-radius: 5px;
    /* Menggunakan gradient 45 derajat sesuai permintaanmu */
    background: #fe9a00 !important;
    /* background: linear-gradient(45deg, #fe9a00, #ca3500) !important; */
}

/* --- NAVIGATION ARROWS --- */
/* Base style panah */
.swiper-button-next,
.swiper-button-prev {
    width: 45px !important;
    height: 45px !important;
    transition: all 0.3s ease !important;
}

/* Efek Hover Opacity pada Panah */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 0.7 !important; /* Memberikan efek transparansi saat ditekan/dihover */
    transform: scale(1.1); /* Sedikit membesar agar interaktif */
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 10s linear infinite;
}