/* KUNCI overflow agar tidak meluber ke kanan */
   .preview,
   .m-product-preview__glider,
   .glide,
   .glide__track {
    overflow: hidden !important;
    max-width: 100% !important;
   }

   /* Biarkan Glide bekerja normal */
   .glide__slides {
    display: flex !important;
    /* jaga-jaga */
    margin: 0 !important;
    /* rollback kalau sebelumnya sempat dipasang: */
    contain: none !important;
   }

   /* Pastikan gambar terlihat dan tidak “ngecil 0” */
   .glide__slide img,
   .m-product-preview__glider-img img,
   .preview .jsProductMainImage {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
   }

   /* Anti scroll horizontal */
   html,
   body {
    overflow-x: hidden !important;
   }

/* =========================================
   NERAKA33 BUTTON FINAL
   HITAM • MERAH • EMAS • PUTIH
   ICON KIRI/KANAN
   GETAR VERTIKAL HALUS
========================================= */

:root{
    --n-black:#050505;
    --n-black-2:#101010;
    --n-black-3:#1a0505;

    --n-red:#e60012;
    --n-red-2:#ff1a1a;
    --n-red-dark:#760008;

    --n-gold:#ffc400;
    --n-gold-2:#ffe36b;
    --n-gold-dark:#9b6500;

    --n-white:#ffffff;
}


/* =========================================
   HEADER
========================================= */

.vc-header-logo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}


/* =========================================
   GRID
========================================= */

.n-columns-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;

    width:100%;
    margin:0 auto;
}

.n-columns-2 a{
    color:inherit;
    text-decoration:none;
}


/* =========================================
   BUTTON BASE
========================================= */

.login,
.register,
.login-button,
.register-button{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;
    min-height:58px;

    /*
       Ruang untuk favicon kiri & kanan
    */
    padding:14px 48px;

    font-family:'Poppins',Arial,sans-serif;
    font-size:16px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:1px;

    text-align:center;
    text-transform:uppercase;
    text-decoration:none;

    border-radius:8px;

    cursor:pointer;

    animation:
        nerakaVerticalShake 1.5s ease-in-out infinite;

    will-change:transform;
}


/* =========================================
   TEKS
========================================= */

.login span,
.register span,
.login-button span,
.register-button span,
.login strong,
.register strong,
.login-button strong,
.register-button strong{
    position:relative;
    z-index:5;

    display:inline-block;

    max-width:100%;

    color:inherit;

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================
   LOGIN
========================================= */

.login,
.login-button{
    color:#ffffff !important;

    background:
        linear-gradient(
            180deg,
            #240404 0%,
            #100202 46%,
            #050505 100%
        );

    border:2px solid var(--n-gold);

    box-shadow:
        0 0 0 1px rgba(230,0,18,.42),
        0 0 10px rgba(255,196,0,.28),
        0 0 18px rgba(230,0,18,.25),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -3px 0 rgba(0,0,0,.55);

    text-shadow:
        0 2px 2px #000,
        0 0 5px #000,
        0 0 7px rgba(255,196,0,.35);
}


/* =========================================
   REGISTER
========================================= */

.register,
.register-button{
    color:#210000;

    background:
        linear-gradient(
            180deg,
            #fff4b8 0%,
            #ffd84d 15%,
            #ffc400 32%,
            #ff4a22 62%,
            #d60010 82%,
            #8d0008 100%
        );

    border:2px solid var(--n-gold-2);

    box-shadow:
        0 0 8px rgba(255,196,0,.65),
        0 0 18px rgba(230,0,18,.35),
        inset 0 2px 0 rgba(255,255,255,.72),
        inset 0 -4px 0 rgba(92,0,5,.62);

    text-shadow:
        0 1px 0 rgba(255,255,255,.48);
}


/* =========================================
   ICON KIRI
   LANGSUNG TERHADAP BUTTON
========================================= */

.login::before,
.register::before,
.login-button::before,
.register-button::before{
    content:"";

    position:absolute;

    left:12px;
    top:50%;

    width:30px;
    height:30px;

    transform:translateY(-50%);

    z-index:4;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    filter:
        drop-shadow(0 0 4px rgba(255,196,0,.45));

    pointer-events:none;
}


/* =========================================
   ICON KANAN
========================================= */

.login::after,
.register::after,
.login-button::after,
.register-button::after{
    content:"";

    position:absolute;

    right:12px;
    top:50%;

    width:30px;
    height:30px;

    transform:translateY(-50%);

    z-index:4;

    background:
        url("https://www.neraka33x1.com/image/neraka33x1-favicon.webp")
        center / contain
        no-repeat;

    filter:
        drop-shadow(0 0 4px rgba(255,196,0,.45));

    pointer-events:none;
}


/* =========================================
   LOGIN TEXT FIX
========================================= */

.login,
.login-button,
.login span,
.login-button span,
.login strong,
.login-button strong{
    color:#ffffff !important;

    -webkit-text-fill-color:#ffffff !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================
   HOVER
   TIDAK MENGUBAH WARNA
========================================= */

.login:hover,
.login-button:hover{
    border-color:var(--n-gold);

    box-shadow:
        0 0 0 1px rgba(230,0,18,.50),
        0 0 14px rgba(255,196,0,.40),
        0 0 22px rgba(230,0,18,.35),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -3px 0 rgba(0,0,0,.55);
}


.register:hover,
.register-button:hover{
    border-color:var(--n-gold-2);

    box-shadow:
        0 0 11px rgba(255,196,0,.72),
        0 0 22px rgba(230,0,18,.42),
        inset 0 2px 0 rgba(255,255,255,.72),
        inset 0 -4px 0 rgba(92,0,5,.62);
}


/* =========================================
   GETAR VERTIKAL
   TIDAK KE KIRI / KANAN
========================================= */

@keyframes nerakaVerticalShake{

    0%,
    100%{
        transform:translateY(0);
    }

    15%{
        transform:translateY(-2px);
    }

    30%{
        transform:translateY(2px);
    }

    45%{
        transform:translateY(-2px);
    }

    60%{
        transform:translateY(2px);
    }

    75%{
        transform:translateY(-1px);
    }

    90%{
        transform:translateY(1px);
    }
}


/* =========================================
   ACTIVE
========================================= */

.login:active,
.register:active,
.login-button:active,
.register-button:active{
    animation:none;

    transform:translateY(1px);

    box-shadow:
        0 0 7px rgba(255,196,0,.50),
        inset 0 4px 10px rgba(0,0,0,.50);
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

    .n-columns-2{
        gap:8px;
    }

    .login,
    .register,
    .login-button,
    .register-button{
        min-height:52px;

        padding:
            12px
            39px;

        font-size:13px;
        letter-spacing:.6px;
    }


    .login::before,
    .register::before,
    .login-button::before,
    .register-button::before{
        left:9px;

        width:25px;
        height:25px;
    }


    .login::after,
    .register::after,
    .login-button::after,
    .register-button::after{
        right:9px;

        width:25px;
        height:25px;
    }
}


/* =========================================
   HP KECIL
========================================= */

@media(max-width:360px){

    .n-columns-2{
        gap:6px;
    }

    .login,
    .register,
    .login-button,
    .register-button{
        min-height:48px;

        padding:
            10px
            32px;

        font-size:11px;
        letter-spacing:.3px;
    }


    .login::before,
    .register::before,
    .login-button::before,
    .register-button::before{
        left:7px;

        width:21px;
        height:21px;
    }


    .login::after,
    .register::after,
    .login-button::after,
    .register-button::after{
        right:7px;

        width:21px;
        height:21px;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

    .login,
    .register,
    .login-button,
    .register-button{
        animation:none;
    }
}