/* ─────────────────────────────────────────────────────────────────────────
   gts-select — paylaşılan custom dropdown (native <select> yerine).
   Native select gizli tutulur (değer + form + erişilebilirlik); görünen kısım
   markaya uygun tetikleyici + popup listedir. Tek kaynak; hero, otel/tur
   listeleme arama kutuları ve sıralama dropdown'ları bunu paylaşır.
   ───────────────────────────────────────────────────────────────────────── */

.gtsel { position: relative; display: inline-flex; align-items: center; width: 100%; }

/* Native select — erişilebilirlik/değer için DOM'da kalır ama görünmez */
.gtsel-native {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
    opacity: 0; pointer-events: none; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}

.gtsel-trigger {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; width: 100%;
    font: inherit; color: inherit; line-height: 1.35;
}
.gtsel-trigger:focus-visible { outline: 2px solid #BA1B21; outline-offset: 3px; border-radius: 6px; }
.gtsel-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtsel-chevron { flex: none; display: inline-flex; color: #9ca3af; transition: transform .18s ease; }
.gtsel.open .gtsel-chevron { transform: rotate(180deg); }

/* Menü BODY'ye taşınır → position:fixed (koordinat JS'ten). Böylece hero/arama
   kutusu overflow:hidden veya stacking-context menüyü asla kırpmaz. */
.gtsel-menu {
    position: fixed; z-index: 3000;
    max-height: 300px; overflow-y: auto;
    background: #fff; border: 1px solid #ececf1; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(17,24,39,.16), 0 2px 8px rgba(17,24,39,.08);
    padding: 6px; opacity: 0; transform: translateY(-6px);
    pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.gtsel-menu.gtsel-open { opacity: 1; transform: none; pointer-events: auto; }

.gtsel-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500;
    color: #374151; cursor: pointer; white-space: nowrap; transition: background .12s;
}
.gtsel-opt:hover, .gtsel-opt.gtsel-active { background: #f6f1f1; color: #111827; }
.gtsel-opt[aria-selected="true"] { color: #BA1B21; font-weight: 600; }
.gtsel-opt[aria-selected="true"]::after {
    content: ''; flex: none; width: 15px; height: 15px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BA1B21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ── Bağlam uyumları ──────────────────────────────────────────────────── */
/* Hero + otel/tur listeleme arama kutusu: tetikleyici, eski select yazısı gibi */
.hs3-wrap .gtsel-trigger { font-size: .96rem; font-weight: 600; color: #111827; }
.tours-search-bar .gtsel-trigger { font-size: .95rem; font-weight: 600; color: var(--fsb-ink, #111827); }

/* Sıralama dropdown'u: sınırlı pill görünümü */
.gtsel--pill { width: auto; }
.gtsel--pill .gtsel-trigger {
    border: 1px solid var(--fsb-line, #e7e2dc); border-radius: 11px;
    padding: 9px 14px; background: #fff;
    font-size: .82rem; font-weight: 500; color: var(--fsb-ink, #111827);
    transition: border-color .14s;
}
.gtsel--pill .gtsel-trigger:hover { border-color: #d6cfc6; }
.gtsel--pill .gtsel-chevron { color: #a8a29e; }