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

/* ==================================================
   VALUE
================================================== */

.info-value-neraka33{
    width:65%;

    padding-right:8px;
    box-sizing:border-box;

    color:#ffffff;

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

    font-size:12px;
    font-weight:600;
    line-height:1.5;

    text-align:right;

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

/* BADGE */

.info-value-neraka33 strong,
.rating-neraka33 strong{
    display:inline-block;

    margin-left:5px;
    padding:6px 11px;

    color:#ffffff !important;

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

    border-radius:7px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 3px 0 #5d4400,
        0 0 8px rgba(255,215,0,.45);

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

    font-size:11px;
    line-height:1.2;

    text-transform:uppercase;

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

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

/* ==================================================
   RATING
================================================== */

.rating-neraka33{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;

    gap:6px;

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

    font-weight:800;
}

.rating-neraka33::before{
    content:"★★★★★";

    margin-right:6px;

    color:var(--info-gold);

    font-family:
        Arial,
        sans-serif;

    font-size:16px;
    letter-spacing:2px;

    text-shadow:
        0 1px 1px #000000,
        0 0 7px rgba(255,215,0,.80),
        0 0 13px rgba(255,215,0,.38);

    animation:infoRatingPulse 1.6s ease-in-out infinite alternate;
}

.rating-neraka33 span,
.rating-neraka33 .stars{
    color:var(--info-gold-soft);
}

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

.info-value-neraka33 strong:hover,
.rating-neraka33 strong:hover{
    transform:
        translateY(-2px)
        scale(1.03);

    filter:brightness(1.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 5px 0 #5d4400,
        0 0 13px rgba(255,215,0,.72),
        0 0 22px rgba(255,215,0,.30);
}

.info-value-neraka33 strong:active,
.rating-neraka33 strong:active{
    transform:
        translateY(1px)
        scale(.98);

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.74),
        0 1px 0 #5d4400;
}

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

@keyframes infoGoldBorderRotate{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes infoGoldSweep{
    from{
        left:-40%;
    }

    to{
        left:140%;
    }
}

@keyframes infoCrownPulse{
    from{
        filter:brightness(1);
        transform:
            translateY(-50%)
            scale(1);
    }

    to{
        filter:brightness(1.35);
        transform:
            translateY(-50%)
            scale(1.10);
    }
}

@keyframes infoRatingPulse{
    from{
        filter:brightness(1);
    }

    to{
        filter:brightness(1.42);
    }
}

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

@media(max-width:768px){
    .info-box-neraka33{
        margin:12px auto;
    }

    .info-header-neraka33{
        padding:
            15px
            48px
            15px
            16px;

        font-size:16px;
    }

    .info-row-neraka33{
        padding:
            10px
            15px
            10px
            21px;
    }

    .info-label-neraka33,
    .info-value-neraka33{
        font-size:11px;
    }
}

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

@media(max-width:600px){
    .info-box-neraka33{
        width:auto;

        margin:
            12px
            8px;

        border-radius:12px;
    }

    .info-box-neraka33::before{
        inset:-2px;

        border-radius:14px;
        padding:2px;
    }

    .info-header-neraka33{
        padding:
            14px
            42px
            14px
            10px;

        font-size:14px;
    }

    .info-header-neraka33::after{
        right:11px;
        font-size:20px;
    }

    .info-row-neraka33{
        flex-direction:column;
        align-items:flex-start;

        gap:8px;

        padding:
            13px
            14px
            13px
            22px;
    }

    .info-row-neraka33:hover{
        transform:none;
    }

    .info-label-neraka33,
    .info-value-neraka33{
        width:100%;
    }

    .info-label-neraka33{
        padding-left:21px;
        font-size:11px;
    }

    .info-value-neraka33{
        padding:
            9px
            10px;

        text-align:left;

        border:
            1px solid rgba(255,215,0,.30);

        border-radius:7px;

        background:
            rgba(0,0,0,.48);

        box-shadow:
            inset 0 0 10px rgba(0,0,0,.62);
    }

    .rating-neraka33{
        justify-content:flex-start;
    }
}

@media(max-width:420px){
    .info-header-neraka33{
        font-size:12px;
        letter-spacing:.5px;
    }

    .info-label-neraka33,
    .info-value-neraka33{
        font-size:10px;
    }

    .rating-neraka33::before{
        font-size:13px;
        letter-spacing:1px;
    }

    .rating-neraka33 strong{
        padding:
            5px
            8px;

        font-size:10px;
    }
}

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

@media(prefers-reduced-motion:reduce){
    .info-box-neraka33::before,
    .info-box-neraka33::after,
    .info-header-neraka33::after,
    .rating-neraka33::before{
        animation:none !important;
    }

    .info-row-neraka33,
    .info-row-neraka33::after,
    .info-value-neraka33 strong,
    .rating-neraka33 strong{
        transition:none !important;
    }
}

/* ==================================================
   GOLD COIN PREMIUM OVERRIDE
   KOIN EMAS • METALLIC GOLD • LUXURY
================================================== */
.info-box-neraka33{border-color:#ffd700!important;background:radial-gradient(circle at 50% -12%,rgba(255,215,0,.20),transparent 40%),radial-gradient(circle at 100% 100%,rgba(255,165,0,.08),transparent 34%),repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px),linear-gradient(145deg,#211800 0%,#0d0a02 50%,#030302 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 28px rgba(0,0,0,.82),0 10px 24px rgba(0,0,0,.62),0 0 12px rgba(255,255,255,.20),0 0 22px rgba(255,215,0,.64),0 0 42px rgba(255,170,0,.18)!important}

.info-box-neraka33::after{content:"$"!important;left:auto!important;top:auto!important;right:-42px!important;bottom:-52px!important;width:190px!important;height:190px!important;z-index:1!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:rotate(-14deg)!important;border:10px double rgba(255,215,0,.12)!important;border-radius:50%!important;color:rgba(255,215,0,.08)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:96px!important;font-weight:900!important;background:radial-gradient(circle,rgba(255,215,0,.08),transparent 68%)!important;box-shadow:inset 0 0 24px rgba(255,215,0,.07),0 0 30px rgba(255,215,0,.06)!important;animation:none!important;pointer-events:none!important}

.info-header-neraka33{color:#251500!important;background:linear-gradient(180deg,rgba(255,255,255,.84),transparent 27%),linear-gradient(145deg,#fff9c9 0%,#ffd700 48%,#e6a900 72%,#9b6200 100%)!important;border-bottom-color:#fff6a8!important;text-shadow:0 1px 0 rgba(255,255,255,.86),0 2px 2px rgba(83,44,0,.28)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.90),inset 0 -8px 16px rgba(112,61,0,.26),0 5px 14px rgba(0,0,0,.42),0 0 18px rgba(255,215,0,.46)!important}

.info-header-neraka33::after{content:"$"!important;width:36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;right:14px!important;border:3px double #fff8c2!important;border-radius:50%!important;color:#5d3600!important;font-family:Georgia,"Times New Roman",serif!important;font-size:20px!important;font-weight:900!important;background:radial-gradient(circle at 35% 25%,#ffffff 0%,#fff5a8 15%,#ffd700 42%,#d69500 70%,#8b5500 100%)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.72),inset 0 -4px 7px rgba(94,48,0,.34),0 0 7px rgba(255,255,255,.50),0 0 15px rgba(255,215,0,.82)!important;text-shadow:0 1px 0 rgba(255,255,255,.72),0 2px 2px rgba(76,40,0,.32)!important;animation:coinHeaderSpin 5s linear infinite!important}

.info-row-neraka33,.info-row-neraka33:nth-child(even){background:radial-gradient(circle at 0 50%,rgba(255,215,0,.08),transparent 32%),linear-gradient(180deg,rgba(35,27,0,.98),rgba(5,5,5,.99))!important}

.info-row-neraka33:hover{background:radial-gradient(circle at 0 50%,rgba(255,215,0,.18),transparent 40%),linear-gradient(180deg,#3b2d00 0%,#151100 55%,#050505 100%)!important}

.info-label-neraka33::before{content:"$"!important;width:18px!important;height:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:translateY(-50%)!important;border:2px solid #fff4a6!important;border-radius:50%!important;color:#5d3600!important;font-family:Georgia,"Times New Roman",serif!important;font-size:11px!important;font-weight:900!important;background:radial-gradient(circle at 35% 25%,#ffffff 0%,#fff5a8 18%,#ffd700 48%,#b87400 100%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 0 6px rgba(255,215,0,.82),0 0 12px rgba(255,170,0,.28)!important}