/*==================================================
SECTION BERITA - VIDEO - PERSYARATAN
==================================================*/

.dashboard-card{
    border:1px solid #E8EDF5;
    border-radius:14px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    overflow:hidden;
    transition:.25s;
    height:100%;
}

.dashboard-card:hover{
    box-shadow:0 8px 25px rgba(15,23,42,.08);
}

.dashboard-card .card-header{
    background:#fff;
    border-bottom:1px solid #EEF2F7;
    padding:18px 22px;
}

.dashboard-card .card-header h5{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#173EA5;
    line-height:1.2;
}

.lihat-link{
    font-size:13px;
    font-weight:600;
    color:#2F6BFF;
    text-decoration:none;
}

.lihat-link:hover{
    color:#155EEF;
}

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

.berita-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:15px 18px;
    border-bottom:1px solid #EEF2F7;
    text-decoration:none;
    transition:.25s;
}

.berita-item:last-child{
    border-bottom:none;
}

.berita-item:hover{
    background:#F8FAFC;
}

.berita-item img{
    width:100px;
    height:74px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
}

.berita-content{
    flex:1;
    min-width:0;
}

.berita-content h6{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#1F2937;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.berita-item:hover h6{
    color:#155EEF;
}

.berita-content small{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:#9CA3AF;
    font-weight:500;
}

/* tombol bawah */

.dashboard-card .btn-light{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:8px;
    color:#2F6BFF;
    font-size:13px;
    font-weight:600;
    padding:9px 22px;
}

.dashboard-card .btn-light:hover{
    background:#2F6BFF;
    border-color:#2F6BFF;
    color:#fff;
}

/*==================================================
VIDEO
==================================================*/

.video-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 18px;
    border-bottom:1px solid #EEF2F7;
    text-decoration:none;
    transition:.25s;
}

.video-item:last-child{
    border-bottom:none;
}

.video-item:hover{
    background:#F8FAFC;
}

.video-thumb{
    width:115px;
    height:72px;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    flex-shrink:0;
}

.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s;
}

.video-item:hover img{
    transform:scale(1.05);
}

.play-btn{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(47,107,255,.92);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:20px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.video-content{
    flex:1;
}

.video-content h6{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#1F2937;
    line-height:1.45;
}

.video-item:hover h6{
    color:#155EEF;
}

.video-content small{
    display:block;
    margin-top:6px;
    color:#9CA3AF;
    font-size:12px;
}

.video-duration{
    min-width:46px;
    text-align:right;
    color:#9CA3AF;
    font-size:12px;
    font-weight:500;
}

/*==================================================
PERSYARATAN
==================================================*/

.accordion-item{
    border:0;
    border-bottom:1px solid #EEF2F7;
}

.accordion-item:last-child{
    border-bottom:none;
}

.accordion-button{
    background:#fff;
    box-shadow:none;
    padding:16px 20px;
    font-size:15px;
    font-weight:600;
    color:#374151;
}

.accordion-button:not(.collapsed){
    background:#F8FAFC;
    color:#155EEF;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    padding:18px 20px;
    font-size:13px;
    color:#6B7280;
    line-height:1.8;
}

.accordion-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:15px;
    font-size:18px;
    flex-shrink:0;
}

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

.icon-blue{
    background:#EEF4FF;
    color:#2F6BFF;
}

.icon-green{
    background:#ECFDF3;
    color:#22C55E;
}

.icon-orange{
    background:#FFF7ED;
    color:#F59E0B;
}

.icon-pink{
    background:#FDF2F8;
    color:#EC4899;
}

.icon-cyan{
    background:#ECFEFF;
    color:#06B6D4;
}

.icon-purple{
    background:#F5F3FF;
    color:#7C3AED;
}

/*==================================================
CARD BODY
==================================================*/

.dashboard-card .card-body{
    padding:0;
}

.dashboard-card .text-center{
    padding:18px;
}

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

@media(max-width:992px){

.dashboard-card{
    margin-bottom:20px;
}

}

@media(max-width:768px){

.dashboard-card .card-header{
    padding:15px 16px;
}

.dashboard-card .card-header h5{
    font-size:16px;
}

.lihat-link{
    font-size:12px;
}

.berita-item,
.video-item{
    padding:14px;
}

.berita-item img{
    width:90px;
    height:68px;
}

.video-thumb{
    width:100px;
    height:64px;
}

.berita-content h6,
.video-content h6{
    font-size:14px;
}

.berita-content small,
.video-content small{
    font-size:11px;
}

.play-btn{
    width:34px;
    height:34px;
    font-size:18px;
}

.video-duration{
    display:none;
}

.accordion-button{
    padding:14px;
    font-size:14px;
}

.accordion-body{
    padding:15px;
    font-size:12px;
}

.accordion-icon{
    width:38px;
    height:38px;
    font-size:16px;
}

}
.video-thumb{
    width:120px;
    height:72px;
    overflow:hidden;
    border-radius:8px;
    position:relative;
    flex-shrink:0;
}

.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.3s;
}

.video-item:hover .video-thumb img{
    transform:scale(1.08);
}

.play-btn{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,0,0,.90);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.video-item:hover .play-btn{
    background:#ff0000;
}
/*==============================================
TRANSPARANSI KINERJA
==============================================*/

.kinerja-item{

    display:flex;
    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid #EEF2F7;

    transition:.25s;

}

.kinerja-item:hover{

    background:#F8FAFC;

}

.kinerja-icon{

    width:52px;
    height:52px;

    border-radius:12px;

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

    margin-right:16px;

    font-size:22px;

    flex-shrink:0;

}

.kinerja-content{

    flex:1;

}
.kinerja-content small{
    display:block;
    font-size:12px;
    color:#6B7280;
    margin-bottom:4px;
    font-family: Arial, sans-serif;
}

.kinerja-content h4{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#111827;
    font-family: Arial, sans-serif;
}

.bg-primary{

    background:#EAF2FF!important;
    color:#2F6BFF!important;

}

.bg-success{

    background:#ECFDF3!important;
    color:#16A34A!important;

}

.bg-warning{

    background:#FFF7ED!important;
    color:#F59E0B!important;

}

.bg-danger{

    background:#FDF2F8!important;
    color:#EC4899!important;

}