/* ==========================================================
                    PROFIL KELURAHAN
==========================================================*/
#profil .card{
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border:none;
}

#profil .card-body{
    padding:45px;
}

/* Logo */
#profil img{
    max-height:165px !important;
    width:auto;
    object-fit:contain;
    transition:.3s;
}

#profil img:hover{
    transform:scale(1.05);
}

/* Judul */

#profil h3{
    font-size:32px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:20px;
}

/* Informasi */

#profil p{
    font-size:16px;
    color:#555;
    line-height:1.8;
    margin-bottom:12px;
}

#profil p i{
    width:24px;
    color:#0d6efd;
}

/* Card visi misi */

#profil .card.bg-light{
    background:#f8fbff !important;
    border-radius:18px;
    transition:.3s;
}

#profil .card.bg-light:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(13,110,253,.12);
}

#profil .card.bg-light h5{
    font-weight:700;
    margin-bottom:18px;
}

#profil .card.bg-light ul{
    padding-left:20px;
    margin-bottom:0;
}

#profil .card.bg-light li{
    margin-bottom:8px;
    line-height:1.7;
    color:#555;
}
/* ==========================================================
                    STATISTIK
==========================================================*/
.statistik-card{
    border:0;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    background:#fff;
    height:100%;
}

.statistik-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 28px rgba(13,110,253,.15);
}

.statistik-card .card-body{
    padding:10px 10px;      /* sebelumnya 24px */
    text-align:center;
}

.statistik-card i{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#eef5ff;
    color:#0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
    font-size:18px;
    transition:.3s;
}

.statistik-card:hover i{
    background:#0d6efd;
    color:#fff;
    transform:scale(1.08);
}

.statistik-card h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:4px;
    color:#212529;
}

.statistik-card p{
    margin:0;
    font-size:13px;
    color:#6c757d;
    line-height:1.4;
}
/* ==========================================================
                    LOKASI
==========================================================*/

.lokasi-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.lokasi-map iframe{
    width:100%;
    height:320px;
    border:0;
}

.lokasi-content{
    padding:30px;
}

.lokasi-content h4{
    font-weight:700;
    margin-bottom:18px;
}

.lokasi-content p{
    color:#666;
    margin-bottom:12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.lokasi-content i{
    color:#0d6efd;
    width:20px;
    margin-top:3px;
}

.btn-maps{
    margin-top:18px;
    border-radius:50px;
    padding:12px 28px;
    font-weight:600;
}

/* ==========================================================
                    MODAL
==========================================================*/

.modal-dialog{
    display:flex;
    align-items:center;
    min-height:calc(100vh - 2rem);
}

.modal-content{
    border:none;
    border-radius:18px;
    overflow:hidden;
}

.modal-header{
    background:#0d6efd;
    color:#fff;
}

.modal-header .btn-close{
    filter:brightness(0) invert(1);
}

.modal-body{
    max-height:65vh;
    overflow-y:auto;
}

.modal-body table{
    margin-bottom:0;
}

.modal-body .table tbody tr{
    transition:.25s;
}

.modal-body .table tbody tr:hover{
    background:#f5f9ff;
}

/* ==========================================================
            RESPONSIVE PROFIL + STATISTIK + LOKASI + MODAL
==========================================================*/

/* ==========================
            Laptop
==========================*/
@media(max-width:1200px){

#profil .card-body{
    padding:40px;
}

#profil h3{
    font-size:30px;
}

/* Statistik */

.statistik-card .card-body{
    padding:12px;
}

.statistik-card h3{
    font-size:20px;
}

.statistik-card p{
    font-size:13px;
}

/* Lokasi */

.lokasi-card iframe{
    height:320px;
}

.lokasi-card h4{
    font-size:28px;
}

}


/* ==========================
            Tablet
==========================*/
@media(max-width:992px){

#profil .card-body{
    padding:35px;
}

#profil img{
    max-height:120px !important;
}

#profil h3{
    font-size:28px;
}

#profil p{
    font-size:15px;
}

/* Statistik */

.statistik-card .card-body{
    padding:16px 12px;
}

.statistik-card i{
    width:44px;
    height:44px;
    font-size:18px;
}

.statistik-card h3{
    font-size:20px;
}

.statistik-card p{
    font-size:13px;
}

/* Lokasi */

.lokasi-card iframe{
    height:300px;
}

.lokasi-card .col-lg-4{
    margin-top:30px;
    text-align:center;
}

.lokasi-card h4{
    margin-bottom:20px;
}

.lokasi-card p{
    justify-content:center;
}

.lokasi-card .btn{
    width:auto;
}

/* Modal */

.modal-dialog{
    min-height:calc(100vh - 1rem);
    margin:.75rem auto;
}

.modal-body{
    padding:20px;
}

.modal-body table{
    font-size:14px;
}

}


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

#profil .card-body{
    padding:28px;
}

#profil .row.align-items-center{
    text-align:center;
}

#profil img{
    max-height:100px !important;
    margin-bottom:18px;
}

#profil h3{
    font-size:26px;
}

#profil p{
    font-size:15px;
}

/* Statistik */

.statistik-card{
    border-radius:14px;
}

.statistik-card .card-body{
    padding:14px 10px;
}

.statistik-card i{
    width:42px;
    height:42px;
    font-size:17px;
    margin-bottom:8px;
}

.statistik-card h3{
    font-size:18px;
}

.statistik-card p{
    font-size:12px;
}

/* Lokasi */

.lokasi-card .card-body{
    padding:20px;
}

.lokasi-card iframe{
    height:260px;
    border-radius:14px !important;
}

.lokasi-card h4{
    font-size:22px;
    text-align:center;
    margin-top:22px;
}

.lokasi-card p{
    font-size:14px;
}

.lokasi-card .btn{
    width:100%;
    margin-top:18px;
}

/* Modal */

.modal-dialog{
    min-height:auto;
    margin:1rem;
}

.modal-content{
    border-radius:16px;
}

.modal-header{
    padding:14px 18px;
}

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

.modal-body{
    padding:18px;
}

.modal-body table{
    font-size:13px;
}

}


/* ==========================
            HP Kecil
==========================*/
@media(max-width:480px){

#profil .card-body{
    padding:22px;
}

#profil img{
    max-height:80px !important;
}

#profil h3{
    font-size:22px;
}

#profil p{
    font-size:14px;
}

/* Statistik */

.statistik-card .card-body{
    padding:12px 8px;
}

.statistik-card i{
    width:38px;
    height:38px;
    font-size:15px;
}

.statistik-card h3{
    font-size:16px;
}

.statistik-card p{
    font-size:11px;
}

/* Lokasi */

.lokasi-card .card-body{
    padding:16px;
}

.lokasi-card iframe{
    height:220px;
}

.lokasi-card h4{
    font-size:20px;
}

.lokasi-card p{
    font-size:13px;
}

.lokasi-card .btn{
    width:100%;
    font-size:14px;
    padding:10px;
}

/* Modal */

.modal-dialog{
    margin:.5rem;
}

.modal-header{
    padding:12px 15px;
}

.modal-title{
    font-size:16px;
}

.modal-body{
    padding:15px;
}

.modal-body table{
    font-size:12px;
}

.modal-body .table td,
.modal-body .table th{
    padding:.55rem;
}

}