/* ============================================================
   TRAVEL — ÜST ŞERİT KATEGORİ HAPLARI (commerce/transfer category-strip.css'ten taşındı)
   Tek sıcak aksan (--primary-color) · tema-agnostik: yalnız CSS değişkeni okur.
   Travel uyarlaması: etkin hap yazı rengi --on-primary (sabit beyaz değil).
   ============================================================ */

.header-ia-strip {
    width: 100%;
    background: var(--bg-light, #f8fafc);
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.header-ia-strip__inner {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 32px);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Yatay ray — mobilde dokunmatik kaydırma, scrollbar gizli */
.header-pill-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE/Edge */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
    /* Kaydırma göstergesi (scroll-shadow): kenar solması + gölge YALNIZ kaydırılabilirken ve o uçta gizli
       içerik varken görünür (local kapak + scroll gölge; uca gelince kendini gizler). JS gerekmez, RTL simetrik. */
    background:
        linear-gradient(to right, var(--bg-light, #f8fafc) 30%, rgba(248, 250, 252, 0)) 0 0 / 40px 100% no-repeat local,
        linear-gradient(to left, var(--bg-light, #f8fafc) 30%, rgba(248, 250, 252, 0)) 100% 0 / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0)) 0 0 / 18px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0)) 100% 0 / 18px 100% no-repeat scroll;
}
.header-pill-rail::-webkit-scrollbar { display: none; }   /* WebKit */

/* Ortalama: sığıyorsa hap grubu ortada; taşarsa otomatik kenar boşlukları 0'a iner ⇒ ilk hap KESİLMEZ,
   yatay kaydırma baştan başlar. (justify-content: center taşmada sol ucu keser; 'safe center' desteği
   eski Safari/Chromium'da yok — otomatik kenar boşluğu her tarayıcıda aynı davranır.) */
.header-pill-rail > :first-child { margin-inline-start: auto; }
.header-pill-rail > :last-child { margin-inline-end: auto; }

/* Mobil menü AÇIKKEN kategori pill-rail'i gizle — aksi halde açılan menü panelinin üst nav
   linklerini (Ana Sayfa/Ürünler) örtüyordu (P1-3). Menü kapanınca geri gelir. */
body.wt-mobile-menu-open .header-pill-rail { display: none; }

/* Tek pill — nötr zemin, ölçülü hover, aksan yalnız etkileşimde */
.header-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 7px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-full, 9999px);
    background: var(--background-color, #ffffff);
    color: var(--text-color, #2c3e50);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    /* Yumuşak gölge: hap, arkasındaki zemin (hero ya da beyaz içerik) ne olursa olsun ayrışır. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease;
}

.header-pill-link:hover,
.header-pill-link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--primary-color, #C28E0E);
    color: var(--primary-dark, #8F680A);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.12);
    outline: none;
}

.header-pill-link:focus-visible {
    box-shadow: 0 0 0 2px var(--primary-light, #FFF7E6),
                0 0 0 3px var(--primary-color, #C28E0E);
}

/* Aktif kategori (mevcut filtre) — dolu aksan */
.header-pill-link.is-active {
    background: var(--primary-color, #C28E0E);
    border-color: var(--primary-color, #C28E0E);
    color: var(--on-primary, #fff);
}

.header-pill-link__icon {
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
    color: var(--primary-color, #C28E0E);
}
.header-pill-link.is-active .header-pill-link__icon { color: inherit; }

.header-pill-link__label { display: inline-block; }

/* "Tümü" başlangıç pill'i biraz vurgulu */
.header-pill-link--all {
    font-weight: 700;
}

/* Yükleniyor iskeleti (veri gelene dek CLS önler) */
.header-pill-rail.is-loading .header-pill-skeleton {
    flex: 0 0 auto;
    width: 96px;
    height: 32px;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(90deg,
        var(--bg-muted, #f1f5f9) 25%,
        var(--bg-light, #f8fafc) 50%,
        var(--bg-muted, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: ia-strip-shimmer 1.2s ease-in-out infinite;
}
@keyframes ia-strip-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Boşsa şeridi tamamen gizle (admin kategori silerse) */
.header-ia-strip[hidden],
.header-ia-strip.is-empty { display: none; }

/* Mobil: header altında kalır, dokunmatik kaydırma */
@media (max-width: 768px) {
    .header-ia-strip__inner { padding: 0 12px; }
    .header-pill-link { padding: 6px 12px; font-size: 0.82rem; }
    .header-pill-rail { gap: 6px; padding-block: 8.5px; }   /* 27px hapın 44px dokunma alanı (mobile-header.css dokunma bloğu) ray dolgusuna sığsın: 27+2×8.5 ≥ 44 */
}

/* Hareket-azalt tercihi */
@media (prefers-reduced-motion: reduce) {
    .header-pill-link { transition: none; }
    .header-pill-link:hover { transform: none; }
    .header-pill-rail.is-loading .header-pill-skeleton { animation: none; }
}

/* Hero üzerindeyken (header kaydırılmamış) şerit ŞEFFAF = yüzen pill'ler; cream tam-genişlik bant YOK.
   Header kaydırılınca (.scrolled) taban cream bant geri gelir (yukarıdaki .header-ia-strip kuralı). */
.premium-header:not(.scrolled) .header-ia-strip:not(.is-kaydirildi) {
    background: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
/* Kaydırılınca (category-strip.js .is-kaydirildi): şerit içerik üstünde akarken taban bant + alt gölge —
   haplar beyaz içerikte kaybolmaz. Header'ın .scrolled sınıfı bu sayfalarda hiç verilmiyor (ölçüldü). */
.header-ia-strip.is-kaydirildi {
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.18);
}
/* Şeffaf durumda (ray HERO'nun üstünde) ray HİÇ boyamaz.
   Burada eskiden uçta koyu bir solma vardı (rgba(0,0,0,0.38), 46px) — kaydırma göstergesi olarak.
   Tarayıcıda ölçüldü: rayın hemen arkasındaki öge doğrudan hero VİDEOSU; yani o solma, göstergeden
   önce videonun üstünde gri bir leke olarak görünüyordu.
   🔑 Taban kuralın krem kenar-maskesi de (yukarıdaki .header-pill-rail) buraya çözüm değil: krem de
      videonun üstünde leke bırakır — zaten bu kural tam olarak onu engellemek için yazılmıştı.
      İki boyama da aynı sınıftan; bu durumda doğru olan HİÇ boyamamak.
   ⚠️ Kayıp: hero üzerindeyken kaydırma ipucu yok. İşlev kaybı değil — ray hâlâ kaydırılabilir ve
      taşan pill kırpılmış hâliyle kendisi bir ipucudur. Header kaydırılınca (.scrolled) taban
      kuraldaki krem + gölge ipucu geri gelir; orada zemin krem olduğu için leke yapmaz.
   📏 Mobilde bu kural HİÇ uygulanmıyor: ölçüldü, 390px'te hero header'ın arkasında değil
      (hero top 124 > header 60) ⇒ header solid doğuyor ve taban kural geçerli. */
.premium-header:not(.scrolled) .header-ia-strip:not(.is-kaydirildi) .header-pill-rail {
    background: transparent;
}