/* ====================================================== */
/* assets/css/style.css (NİHAİ HALİ)                      */
/* ====================================================== */

/* Genel Stiller ve Font Tanımlaması */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #1f2937; /* Tailwind gray-800 */
    background-color: #f9fafb; /* Tailwind gray-50 */
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1280px; /* Tailwind xl */
    margin: 0 auto;
    padding: 0 1.5rem; /* Tailwind px-6 */
}

/* Canlı Arama Sonuçları Kutusu Stilleri */
#search-results-container {
    position: absolute;
    width: 100%;
    margin-top: 0.5rem;
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Tailwind shadow-md */
    max-height: 320px;
    overflow-y: auto;
    z-index: 10;
}

#search-results-container.hidden {
    display: none;
}

#search-results-container a {
    display: block;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: #1f2937; /* Tailwind gray-800 */
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #f3f4f6; /* Tailwind gray-100 */
}

#search-results-container a:last-child {
    border-bottom: none;
}

#search-results-container a:hover {
    background-color: #f9fafb; /* Tailwind gray-50 */
    color: #3b82f6; /* Tailwind blue-500 */
}

#search-results-container p {
    padding: 0.75rem 1.25rem;
    color: #6b7280; /* Tailwind gray-500 */
}

/* Yükleme Ekranı Spinner Animasyonu */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Yükleme Ekranı İkonları için genel boyut */
.status-icon svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
}

/* Mobil Cihazlar için İyileştirmeler */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem; /* Tailwind px-4 */
    }
    
    #search-results-container a,
    #search-results-container p {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}