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

/* Garis emas kecil */
.login span::after,
.login-button span::after,
.register span::after,
.register-button span::after{
    content:"";

    position:absolute;
    left:8%;
    right:8%;
    bottom:-10px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            var(--coin-gold),
            #ffffff,
            transparent
        );

    box-shadow:
        0 0 5px rgba(255,255,255,.60),
        0 0 10px rgba(255,215,0,.62);

    pointer-events:none;
}

/* =========================================================
   HOVER
========================================================= */

.n-columns-2 a:hover,
.login:hover,
.login-button:hover,
.register:hover,
.register-button:hover{
    transform:translateY(-4px) scale(1.02);
    filter:brightness(1.12);

    border-color:#ffffff;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.92),
        inset 0 -14px 23px rgba(102,55,0,.25),
        inset 0 0 22px rgba(255,255,255,.20),
        0 8px 0 #8b5700,
        0 14px 24px rgba(0,0,0,.56),
        0 0 9px #ffffff,
        0 0 25px rgba(255,240,100,.98),
        0 0 52px rgba(255,195,0,.52);
}

.n-columns-2 a:hover::after,
.login:hover::after,
.login-button:hover::after,
.register:hover::after,
.register-button:hover::after{
    transform:
        translateY(-50%)
        rotateY(360deg)
        scale(1.10);

    filter:brightness(1.18);
}

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

.n-columns-2 a:active,
.login:active,
.login-button:active,
.register:active,
.register-button:active{
    transform:translateY(2px) scale(.98);
    filter:brightness(.94);
}

.n-columns-2 a:focus-visible{
    outline:2px solid var(--coin-gold-bright);
    outline-offset:4px;
}

/* =========================================================
   ANIMASI
========================================================= */

@keyframes coinLightSweep{
    0%{
        left:-120px;
        opacity:0;
    }

    14%{
        opacity:.90;
    }

    58%{
        opacity:.62;
    }

    78%,
    100%{
        left:calc(100% + 120px);
        opacity:0;
    }
}

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

@media(max-width:480px){
    .vc-header-logo{
        gap:8px;
    }

    .n-columns-2{
        gap:9px;
        padding:9px;
        border-radius:14px;
    }

    .n-columns-2 a,
    .login,
    .login-button,
    .register,
    .register-button{
        min-height:54px;

        padding:
            10px
            10px
            10px
            60px;

        border-radius:11px;

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

    .n-columns-2 a::before,
    .login::before,
    .login-button::before,
    .register::before,
    .register-button::before{
        inset:3px;
        border-radius:8px;
    }

    .n-columns-2 a::after,
    .login::after,
    .login-button::after,
    .register::after,
    .register-button::after{
        left:11px;

        width:36px;
        height:36px;

        font-size:18px;
        border-width:2px;
    }

    .login span::after,
    .login-button span::after,
    .register span::after,
    .register-button span::after{
        bottom:-8px;
    }
}

@media(max-width:340px){
    .n-columns-2{
        grid-template-columns:1fr;
    }

    .n-columns-2 a{
        width:100%;
    }
}

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

@media(prefers-reduced-motion:reduce){
    .n-columns-2 a,
    .login,
    .login-button,
    .register,
    .register-button,
    .n-columns-2 a::after,
    .login::after,
    .login-button::after,
    .register::after,
    .register-button::after{
        transition:none!important;
    }

    .login span::before,
    .login-button span::before,
    .register span::before,
    .register-button span::before{
        animation:none!important;
    }
}

/* =========================================================
   NERAKA33 — TRANSPARENT BUTTON / BANNER THEME
   HITAM • PUTIH • MERAH • KUNING EMAS
========================================================= */
:root{
 --coin-gold:#ffc400;
 --coin-gold-light:#ffe36b;
 --coin-gold-bright:#ffffff;
 --coin-gold-mid:#ffb000;
 --coin-gold-dark:#7a0b00;
 --coin-bronze:#b83200;
 --coin-black:#000000;
 --coin-panel:#080202;
 --coin-white:#ffffff;
}

/* container mengikuti banner pertama */
.n-columns-2{
 border-color:rgba(255,196,0,.72);
 background:
  radial-gradient(circle at 50% -20%,rgba(255,25,0,.22),transparent 48%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 16px),
  linear-gradient(145deg,#240500 0%,#080202 50%,#000 100%);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.08),
  0 10px 24px rgba(0,0,0,.58),
  0 0 10px rgba(255,25,0,.40),
  0 0 24px rgba(255,196,0,.16);
}

/* background tombol dihilangkan */
.n-columns-2 a,
.login,.login-button,
.register,.register-button{
 background:transparent!important;
 border:1.5px solid #ffc400!important;
 box-shadow:
  inset 0 0 12px rgba(255,25,0,.055),
  0 4px 10px rgba(0,0,0,.38),
  0 0 5px rgba(255,25,0,.28),
  0 0 10px rgba(255,196,0,.14)!important;
}

/* LOGIN putih dengan aksen merah */
.login,.login-button{
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 border-color:#ff321d!important;
 text-shadow:0 1px 2px #000,0 0 5px rgba(255,25,0,.62)!important;
}

/* DAFTAR kuning/emas */
.register,.register-button{
 color:#ffd43b!important;
 -webkit-text-fill-color:#ffd43b!important;
 border-color:#ffc400!important;
 text-shadow:0 1px 2px #000,0 0 5px rgba(255,196,0,.48)!important;
}

/* bingkai dalam dibuat tipis */
.n-columns-2 a::before,
.login::before,.login-button::before,
.register::before,.register-button::before{
 border-color:rgba(255,196,0,.24)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* favicon tanpa background bulat/koin */
.n-columns-2 a::after,
.login::after,.login-button::after,
.register::after,.register-button::after{
 content:""!important;
 border:0!important;
 border-radius:0!important;
 background:
  url("https://www.neraka33x2.com/image/neraka33x2-favicon.webp")
  center/contain no-repeat!important;
 box-shadow:none!important;
 filter:
  drop-shadow(0 0 3px rgba(255,25,0,.55))
  drop-shadow(0 0 5px rgba(255,196,0,.34));
}

/* hapus kilauan menyapu supaya clean */
.login span::before,.login-button span::before,
.register span::before,.register-button span::before{
 content:none!important;
 display:none!important;
 animation:none!important;
}

/* garis kecil bawah: merah -> emas -> putih */
.login span::after,.login-button span::after,
.register span::after,.register-button span::after{
 background:linear-gradient(90deg,transparent,#ff1a00,#ffc400,#fff,#ffc400,#ff1a00,transparent)!important;
 box-shadow:0 0 4px rgba(255,25,0,.25),0 0 6px rgba(255,196,0,.24)!important;
}

/* hover tetap transparan */
.n-columns-2 a:hover,
.login:hover,.login-button:hover,
.register:hover,.register-button:hover{
 background:rgba(255,255,255,.025)!important;
 transform:translateY(-2px) scale(1.01);
 filter:brightness(1.06);
 border-color:#ffe36b!important;
 box-shadow:
  inset 0 0 14px rgba(255,25,0,.06),
  0 6px 14px rgba(0,0,0,.42),
  0 0 6px rgba(255,25,0,.34),
  0 0 12px rgba(255,196,0,.20)!important;
}

/* background dollar besar di tengah diganti favicon samar */
.n-columns-2::before{
 content:""!important;
 border:0!important;
 border-radius:0!important;
 width:145px!important;
 height:145px!important;
 background:url("https://www.neraka33x2.com/image/neraka33x2-favicon.webp") center/82% auto no-repeat!important;
 color:transparent!important;
 box-shadow:none!important;
 opacity:.07!important;
 filter:drop-shadow(0 0 10px rgba(255,25,0,.42));
}

/* =========================================================
   FIX — HAPUS HANYA BACKGROUND PANEL BELAKANG TOMBOL
   Layout, padding, grid, gap, ukuran tombol TETAP dipertahankan.
========================================================= */

/* Hanya hilangkan visual panel, JANGAN sentuh layout */
.n-columns-2{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;

    /* sengaja dipertahankan agar layout tidak hancur */
    padding:13px !important;
    gap:14px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

/* Hilangkan dekorasi besar di belakang tombol saja */
.n-columns-2::before,
.n-columns-2::after{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Tombol tetap seperti desain terakhir */
.n-columns-2 a,
.login,
.login-button,
.register,
.register-button{
    position:relative !important;
    z-index:2 !important;
}

/* Mobile tetap mengikuti ukuran sebelumnya */
@media(max-width:480px){
    .n-columns-2{
        padding:9px !important;
        gap:9px !important;
    }
}

@media(max-width:340px){
    .n-columns-2{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   FINAL COLOR FIX — URAHARA BANNER
   Paksa warna hitam • merah • kuning/emas, bukan putih
========================================================= */

/* Panel belakang tetap transparan */
.n-columns-2{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

/* LOGIN = MERAH GELAP / HITAM */
.n-columns-2 .login,
.n-columns-2 .login-button,
a.login,
a.login-button{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:
        linear-gradient(180deg,rgba(255,70,55,.18) 0%,rgba(255,20,10,.05) 35%,transparent 36%),
        linear-gradient(145deg,#4a0703 0%,#260301 32%,#100101 67%,#020000 100%) !important;

    border:2px solid #ff2118 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -10px 18px rgba(0,0,0,.58),
        0 4px 0 #680900,
        0 8px 15px rgba(0,0,0,.48),
        0 0 7px rgba(255,25,15,.60),
        0 0 15px rgba(255,25,15,.25) !important;

    text-shadow:
        0 2px 2px #000,
        0 0 6px rgba(255,30,20,.65) !important;
}