/**
 * File: /assets/css/profil.css
 * CSS terpusat untuk semua halaman profil (Visi-Misi, Struktur, Galeri, dll.)
 */

/* ==========================================================================
   # Gaya Umum (Untuk Semua Halaman Profil)
   ========================================================================== */
body { 
    background-color: #f4f7f6; 
}

.header-section { 
    /* [FIX] Path ke gambar diubah menjadi path relatif dari file CSS */
    background-image: linear-gradient(rgba(13, 110, 253, 0.7), rgba(10, 88, 202, 0.7)), url('../images/bg.png'); 
    background-size: cover;
    background-position: center;
    color: white; 
    padding: 4rem 1rem; 
    text-align: center; 
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    margin-bottom: -2rem;
    position: relative;
    z-index: 1;
}

.main-container {
    position: relative;
    z-index: 2;
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-top: -3rem;
}

/* ==========================================================================
   # Halaman Visi & Misi
   ========================================================================== */
.page-visi-misi .profile-header { text-align: center; margin-top: -80px; margin-bottom: 2rem; }
.page-visi-misi .profile-image { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 5px solid #ffffff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); background-color: #e9ecef; }
.page-visi-misi .profile-name { font-size: 1.75rem; font-weight: 700; color: #111827; margin-top: 1rem; }
.page-visi-misi .profile-title { font-size: 1rem; font-weight: 400; color: #6b7280; }
.page-visi-misi .content-section { margin-bottom: 3rem; }
.page-visi-misi .content-section:last-child { margin-bottom: 0; }
.page-visi-misi .section-heading { font-size: 1.5rem; font-weight: 600; color: #1f2937; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e5e7eb; display: inline-block; }
.page-visi-misi .section-text { font-size: 1.05rem; line-height: 1.8; color: #4b5563; text-align: justify; }
.page-visi-misi .blockquote-custom { padding: 1.5rem; background-color: #f8f9fa; border-left: 5px solid #6f42c1; margin: 0; }
.page-visi-misi .blockquote-custom p { font-size: 1.1rem; font-style: italic; color: #374151; margin: 0; }
.page-visi-misi .point-list { list-style: none; padding-left: 0; }
.page-visi-misi .point-list li { display: flex; align-items: flex-start; margin-bottom: 1rem; font-size: 1rem; color: #4b5563; line-height: 1.7; }
.page-visi-misi .point-list .point-icon { font-size: 1.2rem; color: #6f42c1; margin-right: 0.75rem; margin-top: 0.25rem; }

/* ==========================================================================
   # Halaman Struktur Organisasi
   ========================================================================== */
.page-struktur .main-container { text-align: center; }
.page-struktur .org-container { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.page-struktur .sub-units-container { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; width: 100%; margin-top: 1rem; padding-top: 2rem; border-top: 2px dashed #e5e7eb; }
.page-struktur .unit-column { flex: 1; min-width: 280px; max-width: 320px; background-color: #f9fafb; border-radius: 12px; box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.07); border: 1px solid #e5e7eb; padding-top: 1.5rem; }
.page-struktur .staf-list { padding: 1rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; }
.page-struktur .person-card { padding: 0.75rem 1rem; border-radius: 8px; margin: 0.5rem auto; max-width: 90%; }
.page-struktur .person-card strong { font-size: 1rem; font-weight: 600; color: #1f2937; display: block; }
.page-struktur .person-card small { font-size: 0.85rem; color: #6b7280; }
.page-struktur .type-kepala { background-color: #1e3a8a; color: white; padding: 1.25rem; display: inline-block; box-shadow: 0 5px 15px rgba(30, 58, 138, 0.4); }
.page-struktur .type-kepala strong, .page-struktur .type-kepala small { color: white; }
.page-struktur .type-kasubag { background-color: #dbeafe; border: 1px solid #93c5fd; }
.page-struktur .type-kasubag strong { color: #1e40af; }
.page-struktur .type-kasubag small { color: #1d4ed8; }
.page-struktur .type-staf { background-color: #f5f5f5; border: 1px solid #e5e5e5; text-align: left; }
.page-struktur .placeholder { background-color: #f3f4f6; color: #9ca3af; border-style: dashed; }

/* ==========================================================================
   # Halaman Galeri
   ========================================================================== */
.page-galeri .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.page-galeri .card { border: none; border-radius: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; cursor: pointer; }
.page-galeri .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.page-galeri .card-img-container { position: relative; }
.page-galeri .card-img-top { width: 100%; height: 220px; object-fit: cover; background-color: #e9ecef; }
.page-galeri .card-img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(25, 135, 84, 0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; opacity: 0; transition: opacity 0.3s ease; }
.page-galeri .card:hover .card-img-overlay { opacity: 1; }
.page-galeri .card-title { font-weight: 600; color: #343a40; padding: 1rem; margin-bottom: 0; }
.modal-content { border-radius: 1rem; }
#modal-image-content { max-height: 85vh; }

/* ==========================================================================
   # Halaman Kontak
   ========================================================================== */
.page-kontak .main-container { padding: 0; overflow: hidden; }
.page-kontak .contact-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
@media (max-width: 991px) { .page-kontak .contact-body { grid-template-columns: 1fr; } }
.page-kontak .contact-info { padding: 2.5rem; }
.page-kontak .contact-info h3 { font-size: 1.75rem; font-weight: 600; color: #1f2937; margin-bottom: 2rem; }
.page-kontak .info-item { display: flex; align-items: flex-start; margin-bottom: 1.75rem; }
.page-kontak .info-item .info-icon { font-size: 1.25rem; color: #0d6efd; margin-right: 1.5rem; width: 30px; text-align: center; padding-top: 5px; }
.page-kontak .info-item .info-text { font-size: 1rem; color: #4b5563; line-height: 1.6; }
.page-kontak .info-item .info-text strong { display: block; color: #1f2937; font-weight: 500; margin-bottom: 0.25rem; }
.page-kontak .map-container { width: 100%; height: 100%; min-height: 400px; background-color: #e5e7eb; }

/* ==========================================================================
   # Halaman Bantuan (FAQ)
   ========================================================================== */
.page-bantuan .help-header { text-align: center; margin-bottom: 3rem; }
.page-bantuan .help-header .icon { font-size: 3rem; color: #4f46e5; margin-bottom: 1rem; }
.page-bantuan .help-header h2 { font-size: 2.25rem; font-weight: 700; color: #111827; }
.page-bantuan .help-header p { font-size: 1.1rem; color: #6b7280; max-width: 600px; margin: 0.5rem auto 0; }
.page-bantuan .accordion-item { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px !important; margin-bottom: 1rem; overflow: hidden; transition: box-shadow 0.3s ease; }
.page-bantuan .accordion-item:last-child { margin-bottom: 0; }
.page-bantuan .accordion-item:hover { box-shadow: 0 4px 15px -5px rgba(79, 70, 229, 0.1); }
.page-bantuan .accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; font-size: 1.1rem; font-weight: 500; color: #1f2937; }
.page-bantuan .accordion-header .accordion-icon { font-size: 1rem; transition: transform 0.3s ease; color: #4f46e5; }
.page-bantuan .accordion-item.active .accordion-header { color: #4f46e5; }
.page-bantuan .accordion-item.active .accordion-header .accordion-icon { transform: rotate(180deg); }
.page-bantuan .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
.page-bantuan .accordion-content p { padding: 0 1.5rem 1.25rem; margin: 0; font-size: 1rem; line-height: 1.7; color: #4b5563; border-top: 1px solid #e5e7eb; padding-top: 1.25rem; }

/* [FIX] Membuat halaman Bantuan lebih responsif di mobile */
@media (max-width: 576px) {
    .page-bantuan .help-header h2 { font-size: 1.75rem; }
    .page-bantuan .accordion-header { font-size: 1rem; padding: 1rem; }
    .page-bantuan .accordion-content p { padding: 1rem; font-size: 0.95rem; }
}