/* =============================
SECTION MERAH + DOT + FADE
============================= */
.stats-red{
    position:relative;
    padding:30px 20px 70px;
    overflow:hidden;

    background:linear-gradient(
        to bottom,
        #e11d2e 0%,
        #e11d2e 45%,
        rgba(225,29,46,0.35) 70%,
        rgba(225,29,46,0) 100%
    );
}
/* =============================
DOT KANAN BAWAH (LEBIH LUAS)
============================= */
.stats-red::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    opacity: .7;
    background-image: radial-gradient(rgba(255,255,255,0.28) 2px, transparent 2px);
    background-size:18px 18px;

    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);

    pointer-events:none;
}
.stats-red::after{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:640px;
    height:640px;
    opacity: .7;
    background-image: radial-gradient(rgba(255,255,255,0.32) 2px, transparent 2px);
    background-size:20px 20px;

    /* fade lebih luas biar halus */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);

    pointer-events:none;
}

/* =============================
CONTENT
============================= */
.stats-inner{
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:25px;
}

/* =============================
ITEM
============================= */
.stat-item{
    flex:1;
    min-width:120px;
    text-align:center;
    color:#fff;
}

/* NUMBER */
.stat-num{
    font-size:44px;
    font-weight:800;
    letter-spacing:1px;
}

/* LABEL */
.stat-text{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-top:6px;
    opacity:.9;
}

/* SUBTEXT */
.stat-sub{
    font-size:11px;
    margin-top:3px;
    opacity:.7;
}

/* HOVER HALUS */
.stat-item:hover .stat-num{
    transform:translateY(-2px);
    transition:.2s;
}

/* =============================
RESPONSIVE
============================= */
@media(max-width:768px){

    .stat-num{
        font-size:28px;
    }

    .stat-text{
        font-size:10px;
    }

    .stat-sub{
        font-size:9px;
    }
}
@media(max-width:768px){

    .stats-inner{
        gap:15px;
    }

    .stat-item{
        width:45%;
    }
    stats-red::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    opacity: .7;
    background-image: radial-gradient(rgba(255,255,255,0.28) 2px, transparent 2px);
    background-size:18px 18px;

    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);

    pointer-events:none;
    }
    .stats-red{padding:20px 20px 20px;}
    .stats-red::after{
        content:'';
        position:absolute;
        bottom:0;
        right:0;
        width:300px;
        height:300px;
        opacity: .7;
        background-image: radial-gradient(rgba(255,255,255,0.32) 2px, transparent 2px);
        background-size:20px 20px;
    
        /* fade lebih luas biar halus */
        -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
        mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    
        pointer-events:none;
    }
}
/* =============================
RIGHT DARK (HALUS, TIDAK KOTAK)
============================= */
.stats-red .right-dark{
    position:absolute;
    top:0;
    right:0;
    width:520px;
    height:100%;

    /* 🔥 hanya gradient horizontal */
    background:linear-gradient(
        to left,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.3) 30%,
        rgba(0,0,0,0.15) 60%,
        rgba(0,0,0,0) 100%
    );

    /* 🔥 fade ke bawah (ini kunci biar nggak kotak) */
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.6) 50%,
        rgba(0,0,0,0.2) 80%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.6) 50%,
        rgba(0,0,0,0.2) 80%,
        rgba(0,0,0,0) 100%
    );

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