/* 1. Temanın overflow:hidden kuralını ezer (Görünmezlik sorununu çözer) */
#search {
    overflow: visible !important;
}

/* 2. Ana Açılır Kutu (Dropdown) */
.hl-ajax-search-dropdown {
    position: absolute;
    top: calc(100% + 8px); /* Arama kutusundan 8px aşağıda estetik bir boşlukla başlar */
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--hl-border, #E6E6E6);
    border-radius: var(--hl-radius, 10px);
    box-shadow: var(--hl-shadow-lg, 0 12px 40px rgba(15,20,25,.12));
    z-index: 999999 !important;
    max-height: 60vh;
    overflow-y: auto;
    
    /* Modern Giriş Animasyonu (Yukarıdan yavaşça düşerek belirir) */
    opacity: 0;
    transform: translateY(-10px);
    animation: hlSearchFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animasyon Keyframe'i */
@keyframes hlSearchFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Özel Şık Scrollbar (Varsayılan çirkin kaydırma çubuğunu gizler) */
.hl-ajax-search-dropdown::-webkit-scrollbar {
    width: 6px;
}
.hl-ajax-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0; /* Köşelerden biraz uzak tutar */
}
.hl-ajax-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--hl-border, #ddd);
    border-radius: 10px;
}
.hl-ajax-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--hl-muted, #aaa);
}

/* 4. Liste Yapısı ve Boşluklar */
.hl-ajax-search-list {
    list-style: none;
    padding: 8px; /* Kutunun içine genel bir nefes payı (Apple stili) */
    margin: 0;
}

.hl-ajax-search-list li {
    margin-bottom: 2px;
}
.hl-ajax-search-list li:last-child {
    margin-bottom: 0;
}

/* 5. Tekil Ürün Satırı Tasarımı */
.hl-ajax-search-list li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px; /* Satırlara da temanızdaki gibi ovallik veriyoruz */
    text-decoration: none;
    color: var(--hl-text, #1F2328);
    background: transparent;
    transition: all 0.2s ease-in-out;
}

/* Hover (Üzerine gelince) Efekti */
.hl-ajax-search-list li a:hover {
    background-color: var(--hl-bg-soft, #F5F7FA);
    transform: translateX(4px); /* Hafifçe sağa kayarak kullanıcıya tepki verir */
}

/* 6. Ürün Resmi Alanı */
.hl-ajax-search-image {
    flex: 0 0 46px; /* Resim alanını sabitle */
    height: 46px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; 
    border-radius: 6px;
    border: 1px solid var(--hl-border, #eee);
    overflow: hidden;
}

.hl-ajax-search-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* 7. Ürün Bilgileri Alanı */
.hl-ajax-search-info {
    flex: 1;
    min-width: 0; /* Uzun metinlerin flex yapısını bozmasını engeller */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ürün Adı */
.hl-ajax-search-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hl-text, #1F2328);
    margin-bottom: 4px;
    
    /* Tek satıra sığmayan uzun ürün isimlerini ... ile şıkça keser */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ürün Fiyatı */
.hl-ajax-search-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--hl-accent, #E53935); /* Temanızın vurgu rengini kullanır */
}

/* 8. Sonuç Bulunamadı Ekranı */
.hl-ajax-search-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--hl-muted, #6B7280);
    font-size: 14px;
    font-weight: 500;
}