/* ========================================================================== 
   NX MARQUEE CARDS GLOBAL ENGINE - VERSI 1.5 ULTRA-SAFE
   ========================================================================== */

:root {
    --nx-card-w: 290px;  /* Lebar pasti setiap kartu di HP */
    --nx-card-gap: 20px; /* Jarak antar kartu */
}

/* 1. Outer Frame Viewport (Parent) */
.nx-marquee-stage {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Memotong kartu yang meluber ke kanan */
    overflow-y: visible !important; /* Menjaga drop-shadow kartu tetap utuh */
    position: relative;
    display: flex;
}

/* 2. Running Track Wrapper */
.nx-marquee-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Paksa seluruh 8 kartu berbaris lurus ke kanan */
    width: max-content !important; /* Membiarkan trek memanjang horizontal tanpa batas */
    will-change: transform;
    padding: 15px 0 !important;
    animation: nxMarqueeStrictV5 28s linear infinite; /* Naikkan detik jika ingin lebih lambat */
}

/* 3. Aturan Dimensi Kartu (Anti-Gepeng & Anti-Responsif Distorsi) */
.nx-marquee-card {
    flex: none !important; /* Mencegah flexbox meremas ukuran kartu di layar HP */
    width: var(--nx-card-w) !important; /* Kunci lebar piksel kartu */
    margin-right: var(--nx-card-gap) !important; /* Jarak antar kartu */
    box-sizing: border-box !important;
}

/* 4. Matematika Loop Sempurna Tanpa Interupsi */
@keyframes nxMarqueeStrictV5 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Geser tepat -50% dari total panjang track (4 kartu pertama bergeser penuh). 
        Saat titik ini tercapai, Kartu 1 Kopian berada persis di posisi awal Kartu 1 Asli,
        membuat transisi loop menjadi tidak kasat mata.
        */
        transform: translate3d(-50%, 0, 0); 
    }
}

/* ========================================================================== 
   ADMIN OVERRIDE: Membantu Proses Desain di Builder Elementor v4 Free
   ========================================================================== */
body.elementor-editor-active .nx-marquee-stage {
    overflow: visible !important;
}
body.elementor-editor-active .nx-marquee-track {
    animation: none !important;
    width: 100% !important;
    flex-direction: column !important; /* Kartu disusun vertikal di editor agar mudah di-edit */
    gap: 15px !important;
}