/* =================================================================
   HERO ARAMA — TAB'LI YAPI EKLENTİSİ
   style.css içine eklenecek. Mevcut --orange, --r-lg vb.
   değişkenlerini kullanır; eski stilleri ezmez.
   ================================================================= */

/* --- TAB BAŞLIKLARI --- */
.hs-tabs{
    position: relative;
    display: flex;
    gap: 4px;
    padding: 5px;
    margin: 0 6px 14px;
    background: var(--bg-mute);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
}
.hs-tab{
    position: relative;
    z-index: 2;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border: 0;
    background: transparent;
    border-radius: calc(var(--r-lg) - 4px);
    font-family: inherit;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    color: var(--ink-mute);
    transition: color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}
.hs-tab [data-lucide]{
    width: 18px; height: 18px;
    color: currentColor;
    transition: color var(--t-fast);
}
.hs-tab:hover{ color: var(--ink-2); }
.hs-tab.is-active{ color: var(--orange); }
.hs-tab.is-active [data-lucide]{ color: var(--orange); }

/* Kayan beyaz "pill" göstergesi */
.hs-tab-indicator{
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    width: calc(50% - 7px);
    background: #fff;
    border-radius: calc(var(--r-lg) - 4px);
    box-shadow: 0 4px 14px rgba(16,24,40,0.10);
    transition: transform var(--t-base);
    z-index: 1;
    will-change: transform;
}
/* 2. tab aktifken göstergeyi sağa kaydır */
.hs-tabs[data-active="cruise"] .hs-tab-indicator{
    transform: translateX(calc(100% + 4px));
}

/* --- PANELLER (sekme içerikleri) --- */
.hs-panel{ display: none; }
.hs-panel.is-active{
    display: block;
    animation: hsPanelIn var(--t-base) both;
}
@keyframes hsPanelIn{
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* --- TARİH SELECT'İ ('.hsf-input' içindeki <select>) ---
   Mevcut input görünümüyle birebir aynı dilde. */
.hsf-input select.gt-search-date{
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    padding: 0;
    margin: 0;
    font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* özel ok */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 22px;
}
.hsf-input select.gt-search-date option{ color: var(--ink); }
/* Boş (placeholder) seçiliyken soluk görünsün */
.hsf-input select.gt-search-date:invalid,
.hsf-input select.gt-search-date option[value=""]{ color: var(--ink-soft); }

/* --- AUTOCOMPLETE ÖNERİ KUTUSU (#suggestions, body'ye ekleniyor) ---
   searchengine.js bunu body'ye basıp inline pozisyonluyor; biz
   sadece görünümü mevcut tasarıma uyumlu hale getiriyoruz. */
#suggestions.suggestions{
    position: absolute;
    z-index: 240;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(16,24,40,0.22);
    padding: 6px;
    margin-top: 6px;
    display: none;
}
#suggestions .category-header{
    padding: 10px 12px 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
#suggestions .suggestion-item,
#suggestions .list-group-item{
    display: block;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--r-md);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
#suggestions .suggestion-item:hover,
#suggestions .suggestion-item.highlight{
    background: var(--orange-soft);
    color: var(--orange-dark);
}
#suggestions .match-highlight{
    color: var(--orange);
    font-weight: 900;
}

/* --- RESPONSIVE --- */
@media (max-width: 767px){
    .hs-tab span{ font-size: 13.5px; }
    .hs-tab{ padding: 11px 10px; gap: 7px; }
}
@media (max-width: 575px){
    /* mevcut .hero-search zaten column'a geçiyor; tab'lar yan yana kalsın */
    .hs-tab [data-lucide]{ width: 16px; height: 16px; }
    .hs-tab span{ font-size: 12.5px; }
}