/* RESET */ *
{ 
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
} 
/* HILANGKAN SCROLL */ 
html, body{ 
    height:100%;
    overflow:hidden; 
}
 /* BODY */
body{
    background: linear-gradient(135deg, #b30000, #ff1a1a);
    color:white; }
/* WRAPPER FULL LAYAR */ 
.wrapper{ 
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:space-between; 
}
 /* HEADER */ 
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 10px;
}
 /* KIRI */ 
.kiri{
    display:flex;
    align-items:center;
    gap:1px; 
}
 /* LOGO */ 
.logo-img{
    width:70px;
    height:auto; 
}
 /* TEXT */ 
.logo-text{
    color: black;
    font-size:14px;
    font-weight:bold;
    margin-left: -5px; /* geser ke kiri */
}
 /* DAERAH */ 
.daerah{ 
    font-weight:bold;
} 
/* TITLE */ 
.title{
    text-align:center;
} 
.title h1{
    font-size:26px;
} 
.title p{ 
    font-size:12px;
} 
/* TOTAL */ 
.stats{
    display:flex;
    justify-content:center;
}
.stat-box{
    background: rgba(0,0,0,0.3);
    padding:10px 20px;
    border-radius:10px;
    text-align:center;
}
.stat-box p{
    font-size:22px;
    font-weight:bold;
}
/* CONTAINER */ 
.container{
    display:flex;
    justify-content:center;
    gap:60px;
}
/* BOX */ 
.box{ 
    width:200px;
    height:200px;
    border:3px solid white;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background: rgba(0,0,0,0.2);
}
/* ANGKA */ 
.angka{
    font-size:60px;
    font-weight:bold;
} 
/* PERSEN */ 
.persen{ 
    text-align:center; 
    margin-top:5px; 
    color:#ffd700; 
} 
/* BUTTON */ 
.btn{ 
    margin-top:10px; 
    padding:8px; 
    background:#800000; 
    border-radius:8px; 
    text-align:center; 
} 
/* PROGRESS */ 
.progress{ 
    width:60%; 
    height:10px; 
    background: rgba(255,255,255,0.3); 
    margin:10px auto; 
    border-radius:20px; 
    overflow:hidden; 
} 
.progress-bar{ 
    height:100%; 
    background:#ffd700; 
    width:0%; 
} 
/* INFO */ 
.info{ 
    text-align:center; 
    font-size:12px; 
} 
/* UPDATE */ 
.update{ 
    text-align:center; 
    font-size:11px; 
    opacity:0.8; 
    margin-top:-10px;
}

/* HP / ANDROID (VERTIKAL) */
@media (max-width: 768px){

    .wrapper{
        height:100dvh;
        display:flex;
        flex-direction:column;
        justify-content:space-evenly; 
    }

    .container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:15px;
        width:100%;
    }

    .box{
        width:140px;  
        height:140px;
        margin:auto;
    }
     .logo-img{
        height:30px;   /* kecilkan logo */
        width:auto;
    }

    .logo-text{
        font-size:12px;  /* kecilkan tulisan */
        line-height:1.2;
    }

    .kiri{
        gap:5px; /* rapatkan sedikit */
    }


    .angka{
        font-size:40px;
        text-align:center;
    }

    .persen{
        text-align:center;
        font-size:14px;
    }

    .btn{
        width:70%;
        margin:5px auto;
        text-align:center;
        font-size:13px;
        padding:6px;
    }

    .progress{
        width:80%;
        height:8px;
    }

    .title h1{
        font-size:18px;
    }

    .title p{
        font-size:11px;
    }
}