/* Arama kutusu */
#searchInput {
    width: 100%; /* Genişlik tam yap */
    padding: 10px; /* İç boşluk */
    font-size: 16px; /* Yazı boyutu */
    border: 1px solid #ccc; /* Kenarlık */
    border-radius: 5px; /* Köşeleri yuvarla */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    outline: none; /* Odaklanıldığında etrafındaki çizgiyi kaldır */
}

/* Arama sonuçları kapsayıcısı */
#searchResults {
    list-style-type: none; /* Noktaları veya numaraları kaldır */
    margin: 0;
    padding: 0;
    width: 100%; /* Sonuçların genişliğini arama kutusunun genişliğine sabitle */
    max-height: 200px; /* Maksimum yükseklik */
    overflow-y: auto; /* İçerik taşarsa kaydırma ekle */
    border: 1px solid #ccc; /* Hafif kenarlık */
    background-color: #fff; /* Arka plan beyaz */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif bir gölge */
    position: absolute; /* Arama kutusunun hemen altına yerleştir */
    top: 100%; /* Arama kutusunun hemen altında başlasın */
    left: 0; /* Sağdan taşmayı engelle */
    z-index: 1000; /* Diğer öğelerin üstünde görünmesi için z-index */
    border-radius: 5px; /* Köşeleri yuvarla */
}

/* Arama sonuçlarındaki her bir öğe */
#searchResults li {
    padding: 10px; /* İç boşluk */
    border-bottom: 1px solid #ddd; /* Alt çizgiyle sonuçları ayır */
    cursor: pointer; /* İmleç simgesini el olarak değiştir */
}

/* Sonuçlar üzerinde gezinirken */
#searchResults li:hover {
    background-color: #f0f0f0; /* Üzerine gelindiğinde arka planı değiştir */
}

/* Sonuçlar sonuncu öğe için alt çizgiyi kaldır */
#searchResults li:last-child {
    border-bottom: none;
}