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

/* DAFTAR = KUNING EMAS / ORANYE */
.n-columns-2 .register,
.n-columns-2 .register-button,
a.register,
a.register-button{
    color:#1b0800 !important;
    -webkit-text-fill-color:#1b0800 !important;

    background:
        linear-gradient(180deg,rgba(255,255,255,.35) 0%,transparent 31%),
        linear-gradient(145deg,#ffe45c 0%,#ffc400 34%,#ff9d00 68%,#b92d00 100%) !important;

    border:2px solid #ffe45c !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -10px 18px rgba(130,35,0,.25),
        0 4px 0 #8d2100,
        0 8px 15px rgba(0,0,0,.45),
        0 0 7px rgba(255,196,0,.65),
        0 0 16px rgba(255,120,0,.28) !important;

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

/* Frame dalam */
.n-columns-2 .login::before,
.n-columns-2 .login-button::before{
    border-color:rgba(255,70,55,.50) !important;
}

.n-columns-2 .register::before,
.n-columns-2 .register-button::before{
    border-color:rgba(110,30,0,.34) !important;
}

/* Favicon tetap gambar asli tanpa background putih */
.n-columns-2 a::after,
.n-columns-2 .login::after,
.n-columns-2 .login-button::after,
.n-columns-2 .register::after,
.n-columns-2 .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;
}

/* Hover jangan berubah putih */
.n-columns-2 .login:hover,
.n-columns-2 .login-button:hover{
    background:linear-gradient(145deg,#600a04,#2e0301 42%,#080000 100%) !important;
    border-color:#ff4a3d !important;
}

.n-columns-2 .register:hover,
.n-columns-2 .register-button:hover{
    color:#170600 !important;
    -webkit-text-fill-color:#170600 !important;
    background:linear-gradient(145deg,#fff078,#ffd000 36%,#ff9d00 70%,#c93600 100%) !important;
    border-color:#fff0a0 !important;
}

/* Hilangkan dekorasi panel belakang */
.n-columns-2::before,
.n-columns-2::after{
    opacity:0 !important;
    visibility:hidden !important;
}

/* ==================================================
   INFO BOX NERAKA33 — HITAM NEON EMAS
   CAHAYA EMAS MELINGKARI • TANPA MERAH
================================================== */

:root{
    --info-gold:#ffd700;
    --info-gold-soft:#fff1a0;
    --info-gold-bright:#fff9d6;
    --info-gold-dark:#8a6500;
    --info-black:#030303;
    --info-black-soft:#111111;
    --info-panel:#171717;
    --info-white:#ffffff;
}

/* ==================================================
   KOTAK UTAMA
================================================== */

.info-box-neraka33{
    width:100%;
    max-width:900px;

    margin:15px auto;

    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-sizing:border-box;

    color:var(--info-white);

    font-family:
        Arial,
        Tahoma,
        Verdana,
        sans-serif;

    border:2px solid rgba(255,215,0,.88);
    border-radius:16px;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,215,0,.10),
            transparent 38%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.018) 0 2px,
            transparent 2px 14px
        ),
        linear-gradient(
            145deg,
            #161616 0%,
            #060606 50%,
            #020202 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 28px rgba(0,0,0,.82),
        0 8px 22px rgba(0,0,0,.62),
        0 0 10px rgba(255,215,0,.35),
        0 0 24px rgba(255,215,0,.18);
}

/* NEON EMAS BERPUTAR MENGELILINGI KOTAK */

.info-box-neraka33::before{
    content:"";

    position:absolute;
    inset:-3px;
    z-index:10;

    border-radius:18px;
    padding:3px;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 45deg,
            var(--info-gold-dark) 75deg,
            var(--info-gold) 102deg,
            var(--info-gold-bright) 122deg,
            var(--info-gold) 142deg,
            var(--info-gold-dark) 170deg,
            transparent 205deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    filter:
        drop-shadow(0 0 5px rgba(255,215,0,.90))
        drop-shadow(0 0 12px rgba(255,215,0,.55));

    animation:infoGoldBorderRotate 4.5s linear infinite;

    pointer-events:none;
}

/* KILAU HALUS MELINTAS */

.info-box-neraka33::after{
    content:"";

    position:absolute;
    top:0;
    left:-40%;

    width:24%;
    height:100%;

    z-index:9;
    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,244,181,.12),
            rgba(255,255,255,.28),
            rgba(255,215,0,.18),
            transparent
        );

    transform:skewX(-22deg);

    animation:infoGoldSweep 6s linear infinite;
}

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

.info-header-neraka33{
    position:relative;
    z-index:2;

    padding:18px 54px 18px 20px;

    overflow:hidden;

    color:#ffffff;

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

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:18px;
    font-weight:900;
    letter-spacing:1px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,215,0,.18),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #242424 0%,
            #0e0e0e 55%,
            #030303 100%
        );

    border-bottom:2px solid var(--info-gold);

    text-shadow:
        0 2px 2px #000000,
        0 0 9px rgba(255,215,0,.72);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -4px 0 rgba(0,0,0,.45),
        0 4px 11px rgba(0,0,0,.48);
}

/* GARIS EMAS DI HEADER */

.info-header-neraka33::before{
    content:"";

    position:absolute;

    top:4px;
    left:8%;
    right:8%;

    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--info-gold),
            var(--info-gold-bright),
            var(--info-gold),
            transparent
        );

    box-shadow:
        0 0 6px rgba(255,215,0,.82),
        0 0 12px rgba(255,215,0,.42);
}

/* IKON MAHKOTA EMAS */

.info-header-neraka33::after{
    content:"♛";

    position:absolute;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    color:var(--info-gold);

    font-size:25px;
    line-height:1;

    text-shadow:
        0 2px 1px #000000,
        0 0 8px rgba(255,215,0,.80),
        0 0 16px rgba(255,215,0,.48);

    animation:infoCrownPulse 1.8s ease-in-out infinite alternate;
}

/* ==================================================
   BARIS INFORMASI
================================================== */

.info-row-neraka33{
    position:relative;
    z-index:2;

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

    gap:16px;

    min-height:46px;

    padding:
        10px
        17px
        10px
        22px;

    box-sizing:border-box;
    overflow:hidden;

    border-bottom:
        1px solid rgba(255,215,0,.22);

    background:
        linear-gradient(
            180deg,
            rgba(24,24,24,.97),
            rgba(5,5,5,.99)
        );

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.info-row-neraka33:nth-child(even){
    background:
        linear-gradient(
            180deg,
            rgba(30,30,30,.98),
            rgba(8,8,8,.99)
        );
}

/* GARIS NEON EMAS DI KIRI */

.info-row-neraka33::before{
    content:"";

    position:absolute;

    top:7px;
    bottom:7px;
    left:7px;

    width:5px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            var(--info-gold-bright),
            var(--info-gold),
            var(--info-gold-dark)
        );

    box-shadow:
        0 0 6px rgba(255,215,0,.80),
        0 0 12px rgba(255,215,0,.35);
}

/* KILAU BARIS */

.info-row-neraka33::after{
    content:"";

    position:absolute;

    top:0;
    left:-55%;

    width:25%;
    height:100%;

    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,244,180,.18),
            transparent
        );

    transform:skewX(-22deg);

    transition:left .55s ease;
}

.info-row-neraka33:hover{
    transform:translateX(4px);

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(255,215,0,.13),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #282100 0%,
            #111111 55%,
            #050505 100%
        );

    box-shadow:
        inset 0 0 16px rgba(255,215,0,.06),
        0 0 12px rgba(255,215,0,.18);
}

.info-row-neraka33:hover::after{
    left:135%;
}

.info-row-neraka33:last-child{
    border-bottom:none;
}

/* ==================================================
   LABEL
================================================== */

.info-label-neraka33{
    width:35%;

    position:relative;

    padding-left:24px;
    box-sizing:border-box;

    color:var(--info-gold-soft);

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size:12px;
    font-weight:900;
    letter-spacing:.4px;

    text-transform:uppercase;

    text-shadow:
        0 1px 1px #000000,
        0 0 6px rgba(255,215,0,.40);
}

/* DIAMOND EMAS */

.info-label-neraka33::before{
    content:"";

    position:absolute;

    top:50%;
    left:2px;

    width:11px;
    height:11px;

    transform:
        translateY(-50%)
        rotate(45deg);

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

    background:
        linear-gradient(
            135deg,
            #fff5b8,
            var(--info-gold) 48%,
            var(--info-gold-dark)
        );

    box-shadow:
        0 0 6px rgba(255,215,0,.80),
        0 0 11px rgba(255,215,0,.38);
}