/* ==================== WRAPPER ==================== */
.container{
    max-width:1100px;
    margin:40px auto;
    background:#ffffff;
    padding:30px;
    border-radius:22px;
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

/* ==================== JUDUL ==================== */
h2{
    font-size:38px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:10px;
}

hr{
    border:none;
    height:1px;
    background:#e5e7eb;
    margin:15px 0 30px;
}

/* ==================== ROW PROFIL ==================== */
.row{
    align-items:flex-start;
}

/* ==================== FOTO PROFIL FINAL ==================== */
.col-md-4{
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.img-fluid{
    width:220px !important;
    height:260px !important;
    object-fit:cover;
    border-radius:24px;
    display:block;
    margin:auto;
    box-shadow:0 12px 25px rgba(0,0,0,0.12);
    border:4px solid #ffffff;
    transition:all 0.3s ease;
}

.img-fluid:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 18px 30px rgba(0,0,0,0.16);
}

/* ==================== DESKRIPSI ==================== */
.col-md-8{
    background:#f8fafc;
    padding:28px;
    border-radius:20px;
}

h4{
    font-size:28px;
    font-weight:700;
    color:#111827;
    margin-bottom:15px;
}

p{
    font-size:16px;
    line-height:1.8;
    color:#4b5563;
    margin-bottom:0;
}

/* ==================== JUDUL GALERI ==================== */
.mt-4{
    margin-top:45px !important;
    font-size:28px;
    font-weight:700;
    color:#111827;
}

/* ==================== CARD GALERI ==================== */
.card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition:all 0.3s ease;
    background:#ffffff;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 28px rgba(0,0,0,0.14);
}

.img-thumbnail{
    width:100%;
    height:190px;
    object-fit:cover;
    border:none;
    padding:0;
}

/* ==================== TEXT KOSONG ==================== */
.text-muted{
    color:#9ca3af !important;
    font-style:italic;
}

/* ==================== RESPONSIVE (OPTIMAL FOR MOBILE & ANDROID) ==================== */
@media (max-width:768px){

    .container{
        width: 92%; /* 🔥 Mencegah layout pecah/menempel di browser Android */
        margin: 20px auto; /* Membuat posisi container otomatis di tengah layar HP */
        padding: 20px;
        border-radius: 18px;
    }

    h2{
        font-size: 26px;
        text-align: center; /* Judul bergeser ke tengah agar lebih simetris di HP */
    }

    h4{
        font-size: 20px;
        text-align: center; /* Sub-judul deskripsi dan galeri menjadi rata tengah */
    }

    .img-fluid{
        width: 100% !important;
        max-width: 230px; /* 🔥 Menjaga ukuran foto profil tetap proporsional (tidak kekecilan/kebesaran) */
        height: 240px !important; 
        margin: 0 auto 15px; /* Memberi jarak bawah otomatis setelah foto */
    }

    .col-md-8{
        margin-top: 10px;
        padding: 20px;
        border-radius: 16px;
    }
    
    p{
        font-size: 15px; /* Ukuran teks sedikit lebih kecil agar nyaman dibaca di layar smartphone */
        line-height: 1.7;
    }

    .mt-4{
        margin-top: 35px !important;
        font-size: 22px;
    }

    .img-thumbnail{
        height: 130px; /* 🔥 Ukuran grid galeri diturunkan agar pas saat tampil 2 kolom menyamping di HP */
    }
}