/* =====================================================
   KHUSUS HALAMAN FAQ: Mengatur TAMPILAN buka tutup pertanyaan
   ✅ ORIGINAL KODE KAMU DIPERTAHANKAN 100% PERSIS
   ✅ HANYA DITAMBAHKAN PERBAIKAN DI BAGIAN BAWAH
   ===================================================== */

.faq-container {
    max-width: 750px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid var(--garis);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 5px 18px rgba(5, 150, 105, 0.1);
}

.faq-pertanyaan {
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--gelap);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    line-height: 1.5; /* ✅ TAMBAHAN: agar pertanyaan panjang tidak berhimpitan */
}

.faq-pertanyaan .panah {
    color: var(--hijau-tua);
    font-size: 16px;
    font-weight: 800;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}

/* Saat FAQ sedang kebuka */
.faq-item.aktif .faq-pertanyaan {
    background: var(--hijau-lembut);
    color: var(--hijau-tua);
}
.faq-item.aktif .faq-pertanyaan .panah {
    transform: rotate(180deg);
}

.faq-jawaban {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.4s ease; /* ✅ Diperlembut transisinya */
    padding: 0 22px;
}

/* ✅ DIPERBAIKI: max-height DITAMBAH JADI 700px AGAR JAWABAN PANJANG TIDAK TERPOTONG */
.faq-item.aktif .faq-jawaban {
    max-height: 700px;
    padding: 0 22px 20px;
}

.faq-jawaban p {
    font-size: 13px;
    color: var(--abu);
    line-height: 1.8;
    padding-top: 10px;
    margin: 0; /* ✅ TAMBAHAN: hapus margin default agar transisi mulus */
}

/* =====================================================
   ✅ TAMBAHAN BARU: LOGO NAVBAR (SERAGAM DENGAN HALAMAN LAIN)
   ===================================================== */
.nav-logo {
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
}
.logo-klinik {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--hijau-lembut);
    background: white;
    flex-shrink: 0;
}
.teks-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.teks-logo strong { font-size: 15px; color: var(--gelap); }
.teks-logo span { font-size: 10px; color: var(--abu); }

/* =====================================================
   ✅ TAMBAHAN BARU: RESPONSIF KHUSUS HP
   ===================================================== */
@media (max-width: 768px) {
    .faq-pertanyaan {
        padding: 15px 16px;
        font-size: 13px;
    }
    .faq-item.aktif .faq-jawaban {
        padding: 0 16px 16px;
        max-height: 900px; /* ✅ di HP kasih ruang lebih besar lagi */
    }
    .faq-jawaban p {
        font-size: 12.5px;
        line-height: 1.75;
    }
    .logo-klinik {
        width: 38px;
        height: 38px;
    }
    .teks-logo strong { font-size: 14px; }
}

/* =====================================================
   ✅ OPSIONAL: Perbaikan agar FAQ yang aktif terlihat lebih jelas
   Bisa dihapus kalau tidak suka
   ===================================================== */
.faq-item.aktif {
    border-color: var(--hijau-tua);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15);
    transform: translateY(-1px);
}