.spesialis-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    flex-direction: column;
    align-items: center;
}

.spesialis-title {
    font-size: 1.5em;
    font-weight: 500;
}

/* === KODE RESPONSIVE MENGGUNAKAN FLEXBOX === */

.card-spesialis-container {
    /* 1. Gunakan Flexbox */
    display: flex;
    
    /* 2. Izinkan card pindah ke baris baru */
    flex-wrap: wrap;
    
    /* 3. KUNCI: Pusatkan semua card (termasuk baris terakhir) */
    justify-content: center; 

    max-width: 1300px;
    width: 100%;
    
    /* 'gap' tidak ada, sesuai permintaan Anda agar card menempel */
}

.card-spesialis {
    display: flex;
    
    /* 5. Ini adalah lebar default untuk desktop */
    width: 300px; 

    color: #146A0E;
    text-align: center;
    
    /* Padding default untuk desktop */
    padding: 2.5rem 2rem; 
    
    border: 0.2px solid #efefef;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* TAMBAHAN PENTING: 
      Memastikan 'width' menyertakan 'padding' dan 'border'.
      Ini SANGAT PENTING agar 'width: 50%' berfungsi.
    */
    box-sizing: border-box; 
}

/* === AKHIR PERUBAHAN === */


.spesialis-icon {
    /* Ukuran ikon default untuk desktop */
    width: 85px;
    height: 85px;
    object-fit: contain;
    margin-bottom: 8px;
    transition: filter 0.3s ease;
    /* Warna dasar ikon (#146A0E) dalam bentuk filter */
    filter: brightness(0) saturate(100%) invert(29%) sepia(90%) saturate(300%) hue-rotate(80deg) brightness(92%) contrast(90%);
}

.card-spesialis:hover {
    background-color: #146A0E;
    color: #CAF8BF;
    border-color: #146A0E;
}

.card-spesialis:hover .spesialis-icon {
    /* Warna ikon saat hover (#CAF8BF) */
    filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(411%) hue-rotate(65deg) brightness(100%) contrast(90%);
}


/* ===============================================
  TAMBAHAN CSS RESPONSIVE UNTUK MOBILE
===============================================
*/
@media (max-width: 640px) { /* Target layar HP (640px ke bawah) */

    .card-spesialis {
        /* INI KUNCINYA:
          - Ubah 'width: 300px' menjadi 'width: 50%' 
          - Ini akan membuat 2 kolom (50% + 50% = 100%)
          - Ganti ke 33.33% jika ingin 3 kolom (tapi akan sangat sempit)
        */
        width: 50%;
        
        /* Kurangi padding agar muat di mobile */
        padding: 1.5rem 0.5rem; /* 24px atas/bawah, 8px kiri/kanan */

        /* Hapus border-radius agar 'nempel' sempurna (opsional) */
        /* border-radius: 0; */
    }

    .spesialis-icon {
        /* Kecilkan ikon di mobile */
        width: 60px;
        height: 60px;
    }

    .spesialis-title {
        /* Kecilkan font title di mobile */
        font-size: 1.1em; /* Turun dari 1.5em */
        line-height: 1.3; /* Beri jarak sedikit */
    }
}

/* Opsional: Jika ingin 3 kolom di layar HP yang sangat kecil */
@media (max-width: 420px) {
    .card-spesialis {
        /* Ganti ke 3 kolom jika diinginkan */
        /* width: 33.33%; */ 

        /* Atau tetap 2 kolom tapi padding lebih kecil */
        padding: 1.2rem 0.25rem;
    }
    .spesialis-title {
        font-size: 1em;
    }
    .spesialis-icon {
        width: 50px;
        height: 50px;
    }
}