/* =========================================================
   APRI STATISTIK BAR
========================================================= */


.apri-info-section {

    width:100%;

    padding:12px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at top left,
            rgba(7,92,168,.12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #f5faff,
            #eaf4fc 55%,
            #fff7df
        );

}



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


.info-container {

    display:flex;

    align-items:center;

    width:min(
        calc(100% - 40px),
        1400px
    );

    margin:auto;

    overflow:hidden;

}



/* =========================================================
   BRAND APRI STATIS
========================================================= */


.info-fixed {

    height:42px;

    padding:8px 22px;

    display:flex;

    align-items:center;

    gap:8px;

    background:#075ca8;

    color:#ffffff;

    white-space:nowrap;

    border-radius:6px 0 0 6px;

    z-index:2;

    flex-shrink:0;

}



.info-fixed span {

    font-size:13px;

    font-weight:700;

}



.info-fixed strong {

    font-size:13px;

}





/* =========================================================
   AREA BERJALAN
========================================================= */


.info-wrapper {

    flex:1;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e5e7eb;

}





/*.info-scroll {*/

/*    display:flex;*/

/*    width:max-content;*/

/*    min-width:max-content;*/

/*    animation:*/
/*        apri-marquee 45s linear infinite;*/

/*}*/

.info-scroll {

    display:flex;

    width:max-content;

    min-width:max-content;

    animation:apri-marquee 60s linear infinite;

}


.info-track {

    display:flex;

    flex-shrink:0;

}



.info-scroll:hover {

    animation-play-state:paused;

}





/* =========================================================
   CARD STATISTIK
========================================================= */


.info-item {

    height:58px;

    min-width:190px;

    padding:8px 18px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:12px;

    margin-right:12px;

    white-space:nowrap;

    box-shadow:
        0 4px 12px rgba(0,0,0,.05);

    transition:.3s;

}



.info-item:hover {

    transform:translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);

}



/* =========================================================
   ICON
========================================================= */


.info-icon {

    width:38px;

    height:38px;

    border-radius:50%;

    background:#eaf4fc;

    color:#075ca8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    flex-shrink:0;

}





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


.info-content {

    display:flex;

    flex-direction:column;

    line-height:1.1;

}



.info-label {

    font-size:11px;

    color:#64748b;

    font-weight:600;

}



.info-item strong {

    font-size:18px;

    color:#075ca8;

    font-weight:700;

}



/* BRAND CARD */

.info-item-primary {

    background:#075ca8;

    color:#ffffff;

}



.info-item-primary strong {

    color:#ffffff;

}





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


@keyframes apri-marquee {


    from {

        transform:translateX(0);

    }


    to {

        transform:translateX(-50%);

    }


}





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


@media(max-width:700px){



    .info-container {

        width:calc(100% - 24px);

    }



    /* IDENTITAS DIPERKECIL */

    .info-fixed {

        height:42px;

        padding:8px 12px;

    }



    .info-fixed strong {

        display:none;

    }



    .info-fixed span {

        font-size:12px;

    }




    /* CARD */

    .info-item {

        height:52px;

        min-width:160px;

        padding:8px 12px;

        gap:8px;

    }



    .info-icon {

        width:32px;

        height:32px;

        font-size:14px;

    }



    .info-label {

        font-size:10px;

    }



    .info-item strong {

        font-size:15px;

    }


}



/* HP SANGAT KECIL */

@media(max-width:400px){


    .info-fixed {

        padding:8px 10px;

    }


    .info-item {

        min-width:145px;

    }


}