/* ==========================================
   RTP REKOMENDASI – TEMA QRIS RP5.000
========================================== */

.rtp-rekomendasi{
    --rtp-green:#43ff9f;
    --rtp-green-soft:#adffd2;
    --rtp-dark:#021b11;
    --rtp-card:#064a2d;
    --rtp-gold:#f4d66d;
    --rtp-text:#f2fff7;
    --rtp-muted:#b7dec8;

    position:relative;
    isolation:isolate;
    overflow:hidden;

    width:100%;
    max-width:1100px;

    margin:35px auto;
    padding:28px;

    color:var(--rtp-text);

    border:1px solid rgba(91,255,167,.42);
    border-radius:24px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(67,255,159,.21),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(2,35,22,.98),
            rgba(5,82,49,.96),
            rgba(2,30,19,.99)
        );

    box-shadow:
        0 20px 48px rgba(0,0,0,.4),
        0 0 24px rgba(67,255,159,.18),
        0 0 60px rgba(67,255,159,.07),
        inset 0 0 0 1px rgba(255,255,255,.03);

    font-family:Arial,Helvetica,sans-serif;
}

/* POLA QRIS CONTAINER */
.rtp-rekomendasi::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    pointer-events:none;
    opacity:.33;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(210,255,231,.11) 47%,
            rgba(210,255,231,.11) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(210,255,231,.11) 47%,
            rgba(210,255,231,.11) 53%,
            transparent 54%
        );

    background-size:
        34px 34px,
        34px 34px;
}

/* CAHAYA LEWAT */
.rtp-rekomendasi::after{
    content:"";
    position:absolute;

    top:-80%;
    left:-50%;

    width:30%;
    height:260%;

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform:rotate(20deg);
    filter:blur(10px);

    animation:rtpContainerLight 9s linear infinite;
}

/* HEADER */
.rtp-heading{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    margin-bottom:24px;
}

.rtp-heading h2{
    margin:8px 0 5px;

    color:#fff;
    font-size:27px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:.6px;

    text-shadow:
        0 0 10px rgba(67,255,159,.42),
        0 0 22px rgba(67,255,159,.14);
}

.rtp-heading p{
    margin:0;

    color:var(--rtp-muted);
    font-size:14px;
}

.rtp-badge{
    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    border:1px solid rgba(244,214,109,.4);
    border-radius:999px;

    color:#09281b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.8px;

    background:
        linear-gradient(
            135deg,
            var(--rtp-gold),
            #d7ff91,
            var(--rtp-green)
        );

    box-shadow:
        0 0 14px rgba(67,255,159,.2);
}

.rtp-status{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 13px;

    border:1px solid rgba(91,255,167,.25);
    border-radius:999px;

    color:#d8ffea;
    font-size:12px;
    font-weight:700;

    background:rgba(4,57,35,.76);
}

.rtp-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;

    background:var(--rtp-green);

    box-shadow:
        0 0 7px var(--rtp-green),
        0 0 14px rgba(67,255,159,.65);

    animation:rtpDot 1.2s ease-in-out infinite;
}

/* GRID */
.rtp-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
}

/* CARD */
.rtp-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    min-width:0;
    padding:20px;

    border:1px solid rgba(98,255,171,.32);
    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(8,105,62,.92),
            rgba(2,42,26,.98)
        );

    box-shadow:
        0 12px 27px rgba(0,0,0,.3),
        0 0 17px rgba(67,255,159,.13),
        inset 0 0 0 1px rgba(255,255,255,.025);

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

.rtp-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    pointer-events:none;
    opacity:.32;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(211,255,232,.13) 47%,
            rgba(211,255,232,.13) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(211,255,232,.13) 47%,
            rgba(211,255,232,.13) 53%,
            transparent 54%
        );

    background-size:
        27px 27px,
        27px 27px;
}

.rtp-card:hover{
    transform:translateY(-5px);

    border-color:rgba(128,255,189,.65);

    box-shadow:
        0 17px 34px rgba(0,0,0,.36),
        0 0 25px rgba(67,255,159,.26),
        0 0 50px rgba(67,255,159,.08);
}

/* GLOW CARD */
.rtp-card-glow{
    position:absolute;

    top:-75px;
    right:-75px;

    width:160px;
    height:160px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(89,255,170,.24),
            transparent 68%
        );

    animation:rtpGlow 3.5s ease-in-out infinite;
}

/* BAGIAN ATAS CARD */
.rtp-top{
    display:flex;
    align-items:center;
    gap:11px;
}

.rtp-game-icon{
    flex:0 0 46px;

    width:46px;
    height:46px;

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

    border:1px solid rgba(255,231,142,.4);
    border-radius:14px;

    color:#07261a;
    font-size:15px;
    font-weight:900;

    background:
        linear-gradient(
            135deg,
            var(--rtp-gold),
            #d5ff89,
            var(--rtp-green)
        );

    box-shadow:
        0 7px 15px rgba(0,0,0,.25),
        0 0 15px rgba(67,255,159,.2);
}

.rtp-game-info{
    min-width:0;
    flex:1;
}

.rtp-game-info h3{
    margin:0 0 3px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:#fff;
    font-size:17px;
    line-height:1.25;
    font-weight:900;
}

.rtp-provider{
    display:block;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    color:var(--rtp-muted);
    font-size:11px;
}

.rtp-level{
    flex:0 0 auto;

    padding:5px 7px;

    border:1px solid rgba(76,255,162,.3);
    border-radius:8px;

    color:#baffd5;
    font-size:9px;
    font-weight:900;
    letter-spacing:.5px;

    background:rgba(34,196,112,.14);
}

/* ANGKA RTP */
.rtp-value-wrap{
    display:flex;
    align-items:flex-start;
    justify-content:center;

    margin:25px 0 15px;
}

.rtp-value{
    color:#fff;
    font-size:48px;
    line-height:1;
    font-weight:900;
    letter-spacing:-2px;

    text-shadow:
        0 0 11px rgba(67,255,159,.4),
        0 0 25px rgba(67,255,159,.14);

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.rtp-value.is-changing{
    opacity:.25;
    transform:scale(.88);
}

.rtp-percent{
    margin:5px 0 0 4px;

    color:var(--rtp-gold);
    font-size:18px;
    font-weight:900;

    text-shadow:
        0 0 8px rgba(244,214,109,.4);
}

/* PROGRESS */
.rtp-progress{
    position:relative;
    overflow:hidden;

    width:100%;
    height:11px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;

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

    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.3);
}

.rtp-progress-bar{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #20ce76,
            var(--rtp-green),
            #d7ff8c,
            var(--rtp-gold)
        );

    box-shadow:
        0 0 10px rgba(67,255,159,.5);

    transition:width .8s cubic-bezier(.2,.8,.2,1);
}

/* FOOTER CARD */
.rtp-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-top:12px;

    font-size:11px;
}

.rtp-note{
    color:var(--rtp-muted);
}

.rtp-change{
    color:#baffd5;
    font-weight:800;
}

/* BAGIAN BAWAH */
.rtp-bottom{
    position:relative;
    z-index:2;

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

    margin-top:20px;
    padding-top:17px;

    border-top:1px solid rgba(111,255,180,.17);

    color:#c4e7d3;
    font-size:12px;
}

.rtp-bottom strong{
    color:var(--rtp-gold);
    font-size:15px;
}

.rtp-disclaimer{
    color:#91bda5;
    text-align:right;
}

/* ANIMASI */
@keyframes rtpContainerLight{
    0%{
        left:-50%;
    }

    55%,
    100%{
        left:145%;
    }
}

@keyframes rtpDot{
    0%,
    100%{
        opacity:.45;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}

@keyframes rtpGlow{
    0%,
    100%{
        opacity:.45;
        transform:scale(.9);
    }

    50%{
        opacity:1;
        transform:scale(1.12);
    }
}

/* RESPONSIVE */
@media(max-width:900px){
    .rtp-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rtp-card:last-child{
        grid-column:1 / -1;
    }
}

@media(max-width:620px){
    .rtp-rekomendasi{
        width:calc(100% - 18px);
        padding:19px 12px;
        border-radius:19px;
    }

    .rtp-heading{
        flex-direction:column;
        gap:12px;
    }

    .rtp-heading h2{
        font-size:22px;
    }

    .rtp-grid{
        grid-template-columns:1fr;
    }

    .rtp-card:last-child{
        grid-column:auto;
    }

    .rtp-value{
        font-size:43px;
    }

    .rtp-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .rtp-disclaimer{
        text-align:left;
    }
}

@media(prefers-reduced-motion:reduce){
    .rtp-rekomendasi *,
    .rtp-rekomendasi::before,
    .rtp-rekomendasi::after{
        animation:none !important;
        transition:none !important;
    }
}