/* NERAKA33 CSS PART 01/10
   Jangan ubah urutan load. Load 01 -> 10.
*/

/* 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;
   }

/* =========================================================
   GOLD COIN EDITION
   KOIN EMAS • METALLIC GOLD • PREMIUM
========================================================= */

:root{
    --coin-gold:#ffd700;
    --coin-gold-light:#fff7a8;
    --coin-gold-bright:#ffffff;
    --coin-gold-mid:#e7ad00;
    --coin-gold-dark:#7a4d00;
    --coin-bronze:#a86600;
    --coin-black:#050402;
    --coin-panel:#161000;
    --coin-white:#ffffff;
}

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

/* =========================================================
   CONTAINER
========================================================= */

.n-columns-2{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    width:100%;
    margin:0 auto;
    padding:13px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;

    box-sizing:border-box;

    border:1px solid rgba(255,215,0,.72);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(255,215,0,.24),
            transparent 48%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.015) 0 2px,
            transparent 2px 16px
        ),
        linear-gradient(
            145deg,
            #211800 0%,
            #0d0a02 50%,
            #030302 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -20px 34px rgba(0,0,0,.64),
        inset 0 0 22px rgba(255,215,0,.07),
        0 10px 24px rgba(0,0,0,.58),
        0 0 14px rgba(255,215,0,.50),
        0 0 34px rgba(255,170,0,.18);
}

/* Koin dekoratif di background */
.n-columns-2::before{
    content:"$";

    position:absolute;
    left:50%;
    top:50%;
    z-index:0;

    width:170px;
    height:170px;

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

    transform:translate(-50%,-50%) rotate(-12deg);

    border:8px double rgba(255,215,0,.14);
    border-radius:50%;

    color:rgba(255,215,0,.08);

    font-family:Georgia,"Times New Roman",serif;
    font-size:88px;
    font-weight:900;

    background:
        radial-gradient(
            circle,
            rgba(255,215,0,.08),
            transparent 66%
        );

    box-shadow:
        inset 0 0 22px rgba(255,215,0,.08),
        0 0 30px rgba(255,215,0,.06);

    pointer-events:none;
}

/* Cahaya bawah */
.n-columns-2::after{
    content:"";

    position:absolute;
    left:12%;
    right:12%;
    bottom:-17px;
    z-index:0;

    height:30px;

    border-radius:50%;

    background:rgba(255,215,0,.38);
    filter:blur(20px);
    opacity:.68;

    pointer-events:none;
}

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

.n-columns-2 a,
.login,
.login-button,
.register,
.register-button{
    position:relative;
    z-index:2;
    isolation:isolate;
    overflow:hidden;

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

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

    padding:13px 44px 13px 78px;

    box-sizing:border-box;

    border:2px solid var(--coin-gold-light);
    border-radius:15px;

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

    font-family:"Arial Black",Arial,Tahoma,sans-serif;
    font-size:16px;
    font-weight:950;
    line-height:1.2;
    letter-spacing:.8px;
    text-align:center;
    text-decoration:none!important;
    text-transform:uppercase;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.70),
            transparent 29%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.10) 0 2px,
            transparent 2px 13px
        ),
        linear-gradient(
            145deg,
            #fff7a8 0%,
            #ffd700 35%,
            #e7ad00 65%,
            #a86600 100%
        );

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.88),
        inset 0 -13px 22px rgba(115,65,0,.28),
        inset 0 0 17px rgba(255,255,255,.18),
        0 5px 0 #704500,
        0 9px 18px rgba(0,0,0,.50),
        0 0 10px rgba(255,255,255,.35),
        0 0 18px rgba(255,215,0,.82),
        0 0 34px rgba(255,170,0,.30);

    text-shadow:
        0 1px 0 rgba(255,255,255,.80),
        0 2px 2px rgba(92,50,0,.30);

    transition:
        transform .24s ease,
        filter .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

/* =========================================================
   BINGKAI KOIN DALAM
========================================================= */

.n-columns-2 a::before,
.login::before,
.login-button::before,
.register::before,
.register-button::before{
    content:"";

    position:absolute;
    inset:5px;
    z-index:1;

    border:1px solid rgba(99,57,0,.42);
    border-radius:10px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(102,57,0,.28);

    pointer-events:none;
}

/* =========================================================
   IKON KOIN
========================================================= */

.n-columns-2 a::after,
.login::after,
.login-button::after,
.register::after,
.register-button::after{
    content:"";

    position:absolute;
    left:17px;
    top:50%;
    z-index:5;

    width:43px;
    height:43px;

    display:block;

    transform:translateY(-50%);

    border:2px solid #fff7b8;
    border-radius:50%;

    background:
        url("https://www.neraka33x2.com/image/neraka33x2-favicon.webp")
        center / 90% 90% no-repeat;

    box-shadow:
        0 0 5px rgba(255,255,255,.45),
        0 0 13px rgba(255,215,0,.75),
        0 0 22px rgba(255,170,0,.28);

    transition:
        transform .48s ease,
        filter .24s ease;
}

/* =========================================================
   LOGIN — EMAS GELAP
========================================================= */

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            transparent 31%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,215,0,.035) 0 2px,
            transparent 2px 13px
        ),
        linear-gradient(
            145deg,
            #4f3800 0%,
            #211800 44%,
            #0b0903 72%,
            #020202 100%
        );

    border-color:#ffd700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -14px 23px rgba(0,0,0,.66),
        inset 0 0 18px rgba(255,215,0,.09),
        0 5px 0 #4d3100,
        0 9px 18px rgba(0,0,0,.56),
        0 0 11px rgba(255,215,0,.62),
        0 0 26px rgba(255,170,0,.22);

    text-shadow:
        0 2px 2px #000000,
        0 0 7px rgba(255,255,255,.30),
        0 0 14px rgba(255,215,0,.72);
}

.login::before,
.login-button::before{
    border-color:rgba(255,215,0,.44);
}

/* =========================================================
   DAFTAR — EMAS TERANG
========================================================= */

.register,
.register-button{
    color:#251500!important;
    -webkit-text-fill-color:#251500;

    border-color:#ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.88),
            transparent 28%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.13) 0 2px,
            transparent 2px 13px
        ),
        linear-gradient(
            145deg,
            #fffbd2 0%,
            #fff07a 24%,
            #ffd700 52%,
            #f0b300 72%,
            #b27000 100%
        );

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.95),
        inset 0 -13px 22px rgba(120,68,0,.24),
        inset 0 0 20px rgba(255,255,255,.22),
        0 5px 0 #a86700,
        0 9px 18px rgba(0,0,0,.48),
        0 0 8px #ffffff,
        0 0 20px rgba(255,235,95,.92),
        0 0 38px rgba(255,190,0,.38);

    text-shadow:
        0 1px 0 rgba(255,255,255,.90),
        0 2px 2px rgba(82,43,0,.28);
}

/* =========================================================
   TEXT
========================================================= */

.login span,
.login-button span,
.register span,
.register-button span,
.n-columns-2 a > *{
    position:relative;
    z-index:6;

    color:inherit!important;
    text-decoration:none!important;
}

/* =========================================================
   CAHAYA MENYAPU
========================================================= */

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

    position:absolute;
    top:-30px;
    left:-120px;
    z-index:3;

    width:40px;
    height:120px;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.86),
            rgba(255,248,180,.42),
            transparent
        );

    filter:blur(.5px);

    animation:coinLightSweep 3.1s ease-in-out infinite;

    pointer-events:none;
}