/* =====================================================
   HERO SECTION
===================================================== */

.hero-section{
    position:relative;
    overflow:hidden;
}


.hero-image{

    width:100%;
    height:520px;
    object-fit:cover;

}


.hero-overlay{

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:linear-gradient(
        rgba(0,0,0,.20),
        rgba(0,0,0,.55)
    );

}





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


.dashboard-container{

    width:98%;

    max-width:1700px;

    margin:auto;

    margin-top:-90px;

    position:relative;

    z-index:10;

}





/* =====================================================
   MAIN BORDER DASHBOARD
===================================================== */


.dashboard-wrapper{

    width:100%;

    background:#fff;

    border-radius:25px;

    border:1px solid #e5e7eb;

    padding:30px 40px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.12);

}





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


.stat-dashboard{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:15px;

}



.stat-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    background:#fff;

    border:1px solid #eeeeee;

    border-radius:14px;

    transition:.3s;

}



.stat-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}



.stat-item label{

    font-size:11px;

    font-weight:700;

    color:#777;

}



.stat-item h3{

    margin:3px 0;

    font-size:22px;

    font-weight:800;

    color:#222;

}



.stat-item small{

    font-size:11px;

    color:#888;

}




/* ICON STATISTIK */


.stat-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

}



.stat-icon.blue{
    background:#0d6efd;
}


.stat-icon.green{
    background:#198754;
}


.stat-icon.orange{
    background:#fd7e14;
}


.stat-icon.purple{
    background:#6f42c1;
}


.stat-icon.red{
    background:#dc3545;
}






/* =====================================================
   CONTENT AREA
===================================================== */


.dashboard-content{

    margin-top:25px;

}





/* =====================================================
   CARD BERITA & LAYANAN
===================================================== */


.dashboard-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    padding:12px;

    height:100%;

}





.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}



.dashboard-header h4{

    display:flex;

    align-items:center;

    gap:7px;

    margin:0;

    font-size:15px;

    font-weight:700;

}



.dashboard-header h4 span{

    width:5px;

    height:18px;

    background:#0d6efd;

    border-radius:10px;

}



.dashboard-header a{

    font-size:11px;

    color:#0d6efd;

    text-decoration:none;

}







/* =====================================================
   BERITA
===================================================== */


.news-card{

    overflow:hidden;

    border-radius:10px;

    border:1px solid #eee;

    background:#fff;

    transition:.3s;

}



.news-card:hover{

    transform:translateY(-3px);

    box-shadow:0 7px 15px rgba(0,0,0,.1);

}

/* =====================================================
   BERITA - FONT DIPERBESAR
===================================================== */


.news-card img{

    width:100%;

    height:140px;

    object-fit:cover;

}



.news-body{

    padding:12px;

    display:flex;

    gap:12px;

}



.news-date{

    width:48px;

    height:62px;

    background:#f1f5f9;

    border-radius:8px;

    text-align:center;

    padding:5px;

}



.news-date strong{

    display:block;

    font-size:20px;

    color:#0d6efd;

    font-weight:700;

}



.news-date span,

.news-date small{

    display:block;

    font-size:11px;

}





.news-text h6{

    font-size:15px;

    line-height:1.4;

    font-weight:700;

    margin:0 0 7px;

}



.news-text h6 a{

    color:#333;

    text-decoration:none;

}





.news-text p{

    font-size:13px;

    line-height:1.5;

    color:#777;

    margin:0;

}






/* =====================================================
   LAYANAN DESA MINI
===================================================== */


.service-box{

    height:48px;

    border-radius:7px;

    border:1px solid #eeeeee;

    background:#fafafa;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}



.service-box:hover{

    background:#fff;

    transform:translateY(-2px);

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}



.service-box i{

    font-size:13px;

    margin-bottom:1px;

}



.service-box span{

    font-size:8px;

    font-weight:600;

    color:#333;

}





/* =====================================================
   WARNA ICON LAYANAN
===================================================== */


.s-green i{
    color:#198754;
}


.s-blue i{
    color:#0d6efd;
}


.s-orange i{
    color:#fd7e14;
}


.s-purple i{
    color:#6f42c1;
}


.s-cyan i{
    color:#0dcaf0;
}


.s-pink i{
    color:#d63384;
}


.s-yellow i{
    color:#ffc107;
}


.s-dark i{
    color:#212529;
}





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


@media(max-width:1400px){


.dashboard-container{

    width:96%;

}



.stat-dashboard{

    grid-template-columns:repeat(3,1fr);

}


}





@media(max-width:992px){


.dashboard-wrapper{

    padding:20px;

}



.stat-dashboard{

    grid-template-columns:repeat(2,1fr);

}


}





@media(max-width:576px){


.hero-image{

    height:350px;

}



.dashboard-container{

    width:94%;

    margin-top:20px;

}



.dashboard-wrapper{

    padding:12px;

}



.stat-dashboard{

    grid-template-columns:1fr;

}



.dashboard-header{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}



/* =====================================================
   LAYANAN DESA - TULISAN BESAR
===================================================== */


.service-box{

    height:70px;

    border-radius:10px;

    border:1px solid #eeeeee;

    background:#fafafa;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}



.service-box:hover{

    background:#fff;

    transform:translateY(-3px);

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}


/* =================================
   FONT LAYANAN DESA
================================= */

.service-box span{
    font-size:22px;
    font-weight:800;
    line-height:1.3;
    display:block;
    text-align:center;
}
/* ===============================
   APBDES TRANSPARANSI
================================ */

.apbd-box{

border:1px solid #ddd;
border-radius:10px;
padding:20px;
height:100%;
background:#fff;

}


.apbd-box h5{

font-size:18px;
font-weight:700;
margin-bottom:15px;
color:#333;

}



.apbd-info{

display:flex;
justify-content:space-between;
font-size:14px;
color:#777;

}



.apbd-number{

display:flex;
justify-content:space-between;
font-size:14px;
margin-top:8px;

}



.progress-area{

display:flex;
align-items:center;
gap:10px;
margin-top:15px;

}



.progress{

height:12px;
flex:1;
background:#ddd;
border-radius:20px;
overflow:hidden;

}



.progress-bar{

height:100%;
background:#8bd35b;

}



.persen{

font-size:13px;
font-weight:bold;

}