/* =========================================================
   NERAKA33 FLOATING FOOTER FINAL
   HITAM • MERAH • EMAS • PUTIH
   FAVICON • GETAR VERTIKAL • RESPONSIVE
========================================================= */

:root{
    --nf-black:#000000;
    --nf-black-2:#080202;
    --nf-black-3:#1b0505;

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

    --nf-gold:#ffc400;
    --nf-gold-2:#ffe36b;

    --nf-white:#ffffff;
}


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

.footer-floating-NERAKA33{
    position:fixed;

    left:50%;
    bottom:12px;

    transform:translateX(-50%);

    width:calc(100% - 24px);
    max-width:1500px;

    z-index:9999;

    display:grid;

    grid-template-columns:
        .8fr
        .8fr
        .9fr
        1.35fr
        1fr;

    gap:9px;

    padding:10px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,196,0,.08),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #1b0505 0%,
            #080202 55%,
            #000000 100%
        );

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

    border-radius:10px;

    box-shadow:
        0 0 12px rgba(255,196,0,.50),
        0 0 28px rgba(230,0,18,.30),
        inset 0 1px 0 rgba(255,255,255,.08);
}


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

.footer-btn-NERAKA33{
    position:relative;

    overflow:hidden;
    isolation:isolate;

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

    display:flex;

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

    gap:8px;

    padding:10px 16px;

    color:#ffffff !important;

    text-decoration:none !important;

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

    font-size:13px;
    font-weight:900;

    line-height:1.2;

    letter-spacing:.5px;

    text-align:center;

    white-space:nowrap;

    background:
        linear-gradient(
            180deg,
            #2b0707 0%,
            #100202 55%,
            #020202 100%
        );

    border:
        1px solid
        var(--nf-gold);

    border-radius:7px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -3px 0 rgba(0,0,0,.45),
        0 0 7px rgba(255,196,0,.30);

    text-shadow:
        0 1px 2px #000000;

    animation:
        nerakaFooterShakeY
        1.55s
        ease-in-out
        infinite;

    will-change:transform;

    transition:
        box-shadow .22s ease,
        border-color .22s ease;
}


/* =========================================================
   FAVICON
========================================================= */

.footer-btn-NERAKA33 img{
    position:relative;

    z-index:5;

    display:block !important;

    width:22px !important;
    height:22px !important;

    min-width:22px;

    flex:0 0 22px;

    object-fit:contain;

    visibility:visible !important;

    opacity:1 !important;

    filter:
        drop-shadow(
            0 0 3px
            rgba(255,196,0,.58)
        )
        drop-shadow(
            0 0 6px
            rgba(230,0,18,.35)
        ) !important;

    pointer-events:none;
}


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

.footer-btn-NERAKA33 span{
    position:relative;

    z-index:5;

    display:inline-block !important;

    color:#ffffff !important;

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

    visibility:visible !important;

    opacity:1 !important;

    text-shadow:
        0 1px 2px #000000,
        0 0 4px rgba(0,0,0,.85);
}


/* =========================================================
   DECORATIVE TOP LINE
========================================================= */

.footer-btn-NERAKA33::before{
    content:"";

    position:absolute;

    top:0;
    left:8px;
    right:8px;

    height:2px;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--nf-red),
            var(--nf-gold),
            var(--nf-red),
            transparent
        );

    opacity:.75;

    box-shadow:
        0 0 6px
        rgba(255,196,0,.35);

    pointer-events:none;
}


/* =========================================================
   DECORATIVE BOTTOM LINE
========================================================= */

.footer-btn-NERAKA33::after{
    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:4px;

    height:1px;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,196,0,.70),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   DAFTAR
========================================================= */

.footer-btn-NERAKA33.daftar{
    color:#210000 !important;

    background:
        linear-gradient(
            180deg,
            #fff0a0 0%,
            #ffc400 35%,
            #ff4a25 68%,
            #d90011 100%
        );

    border-color:#fff1a3;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.58),
        inset 0 -3px 0 rgba(100,0,0,.30),
        0 0 9px rgba(255,196,0,.46),
        0 0 16px rgba(230,0,18,.26);

    text-shadow:none;
}


.footer-btn-NERAKA33.daftar span{
    color:#210000 !important;

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

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


/* =========================================================
   DELAY ANIMASI
   Supaya semua tombol tidak bergerak persis bersamaan
========================================================= */

.footer-btn-NERAKA33:nth-child(1){
    animation-delay:0s;
}

.footer-btn-NERAKA33:nth-child(2){
    animation-delay:.12s;
}

.footer-btn-NERAKA33:nth-child(3){
    animation-delay:.24s;
}

.footer-btn-NERAKA33:nth-child(4){
    animation-delay:.36s;
}

.footer-btn-NERAKA33:nth-child(5){
    animation-delay:.48s;
}


/* =========================================================
   HOVER
   WARNA TIDAK BERUBAH
========================================================= */

.footer-btn-NERAKA33:hover{
    border-color:#ffffff;

    box-shadow:
        0 0 7px rgba(255,255,255,.42),
        0 0 16px rgba(255,196,0,.55),
        0 0 26px rgba(230,0,18,.38),
        inset 0 1px 0 rgba(255,255,255,.12);
}


/* REGISTER HOVER
   BACKGROUND TETAP
*/

.footer-btn-NERAKA33.daftar:hover{
    border-color:#ffffff;

    box-shadow:
        0 0 7px rgba(255,255,255,.48),
        0 0 18px rgba(255,196,0,.65),
        0 0 28px rgba(230,0,18,.40),
        inset 0 2px 0 rgba(255,255,255,.58);
}


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

.footer-btn-NERAKA33:active{
    animation-play-state:paused;

    transform:translateY(1px) scale(.99);

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


/* =========================================================
   ANIMASI GETAR VERTIKAL
========================================================= */

@keyframes nerakaFooterShakeY{

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

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

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

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

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

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

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


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .footer-floating-NERAKA33{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .footer-btn-NERAKA33:nth-child(4){
        grid-column:1 / 3;
    }
}


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

@media(max-width:600px){

    body{
        padding-bottom:180px !important;
    }

    .footer-floating-NERAKA33{
        width:calc(100% - 14px);

        bottom:7px;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:6px;

        padding:7px;

        border-radius:8px;
    }


    .footer-btn-NERAKA33{
        min-height:43px;

        gap:6px;

        padding:8px 7px;

        font-size:10px;

        letter-spacing:.3px;

        white-space:normal;
    }


    .footer-btn-NERAKA33 img{
        width:18px !important;
        height:18px !important;

        min-width:18px;

        flex-basis:18px;
    }


    .footer-btn-NERAKA33.chat{
        grid-column:1 / -1;
    }
}


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

@media(max-width:360px){

    .footer-floating-NERAKA33{
        width:calc(100% - 10px);

        gap:5px;

        padding:5px;
    }


    .footer-btn-NERAKA33{
        min-height:41px;

        padding:7px 5px;

        font-size:9px;

        gap:5px;
    }


    .footer-btn-NERAKA33 img{
        width:16px !important;
        height:16px !important;

        min-width:16px;

        flex-basis:16px;
    }
}


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

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

    .footer-btn-NERAKA33{
        animation:none;
    }
}