/*!
 * h-scroll.css v1.4.0  (adapted from Sestek h-scroll.css v2.2.1)
 * v1.4.0: TABLET/MOBİL kart genişliği — film şeridi (v1.3.0) genişliği
 *         görselin doğal oranına bırakmıştı: 50svh yüksekliğindeki yatay bir
 *         foto telefonda ekrandan taşıyordu. ≤991px'te genişlik artık
 *         --hscroll-spv'den türüyor (tablet 2.2, mobil 1.2 kart) ve görsel
 *         karta cover'lanıyor. Masaüstü film şeridi AYNEN duruyor.
 * v1.3.2: --hscroll-name-inset — isim overlay'ini kart kenarından içeri
 *         çeken tek değişken (absolute konum kartın padding'ini dikkate
 *         almaz; boşluk bu değişkenle ya da .hscroll__name'in KENDİ
 *         padding'iyle verilir, kart padding'iyle DEĞİL).
 * v1.3.1: Webflow Collection List Wrapper fix — CMS, viewport ile track
 *         arasına .w-dyn-list sarmalayıcısı sokar; flex item olarak
 *         İÇERİĞE göre boyutlanıp % gutter'ı ve mesafe ölçümünü bozuyordu
 *         (2000px hayalet sol boşluk + kısa pin). Tam genişliğe sabitlendi.
 * v1.3.0: FİLM ŞERİDİ boyutlandırma — kart genişliği GÖRSELİN DOĞAL
 *         ORANINDAN gelir (yatay/dikey/kare karışık olabilir); tek kısıt
 *         ortak yükseklik: --hscroll-card-h (desktop 70svh, tablet 58svh,
 *         mobil 50svh). Swiper modu slidesPerView:"auto" ile karışık
 *         genişlikleri destekler. Designer'a stil gerekmez.
 * v1.1.0: .hscroll__header — kartlarla AYNI gutter'a (container-2xl) hizalı
 *         section başlığı; başlık varken pin yüksekliği flex column ile
 *         doğru dağıtılır (başlık + track birlikte 100svh'ye sığar).
 * Cinematic pinned horizontal-scroll destination cards — critical/behavioural
 * styles only. Colours, fonts and exact card design come from the Webflow
 * Designer + RC tokens. Marveltour ekleri: kart clip + görsel cover (parallax
 * için) ve isim overlay'inin davranışsal konumu.
 *
 * Desktop (≥992px) : JS pins the section and translates .hscroll__track on x.
 * Tablet & mobile  : h-scroll.js turns the SAME DOM into a Swiper carousel
 * (≤991px)           (~2.2 cards on tablet, ~1.2 on mobile). The required
 *                    Swiper core styles ship below under .is-swiper — the
 *                    Swiper stylesheet is NOT loaded separately.
 * Fallback         : before JS runs, or if Swiper fails to load, or under
 *                    reduced motion on desktop → native scroll-snap scroller
 *                    with the same bleed widths (the :not(.is-swiper) block).
 * https://github.com/roicool/sestek
 */

/* ── Section ─────────────────────────────────────────────────── */
[data-hscroll] {
  position: relative;
  width: 100%;
  /*
   * PIN RULE (PROJECT.md Kural 3): no transform / filter / perspective /
   * will-change:transform on this element or ANY ancestor — the pin uses
   * position:fixed and would anchor to that ancestor instead of the viewport.
   */
}

/* Pin target fills the viewport; track sits vertically centred inside it. */
.hscroll__viewport {
  display: flex;
  align-items: center;
  overflow: hidden;               /* clips the off-screen part of the track */
}

/* Webflow Collection List Wrapper (viewport ile track arasındaki .w-dyn-list):
   flex item olarak içeriğe göre boyutlanmasın — track'in % gutter'ı ve
   h-scroll.js'in mesafe ölçümü BUNUN genişliğine göre çözülür. Tam genişlik ŞART. */
.hscroll__viewport > .w-dyn-list,
.hscroll__viewport > div:has(> .hscroll__track) {
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
}

/* Full-height only where the pin runs — mobile/tablet height is the
   Designer's call (h-screen vb. utility'ler swiper modunda aynen geçerli). */
@media (min-width: 992px) {
  .hscroll__viewport {
    min-height: 100svh;
  }

  /* Başlık varsa: section 100svh'lik flex column olur, viewport kalan alanı
     doldurur — başlık + kartlar birlikte pinli ekrana sığar, taşma olmaz. */
  [data-hscroll]:has(.hscroll__header) {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }
  [data-hscroll]:has(.hscroll__header) .hscroll__viewport {
    min-height: 0;
    flex: 1 1 auto;
  }
}

/* ── Section başlığı — kartlarla AYNI gutter'a hizalı ────────── */
.hscroll__header {
  padding-inline: var(--hscroll-gutter,
    max(var(--view--px, var(--spacing--6)),
        calc((100% - var(--container--2xl, 86rem)) / 2)));
}

/* ── Track — the row GSAP translates ─────────────────────────── */
.hscroll__track {
  display: flex;
  align-items: stretch;
  gap: var(--hscroll-gap, var(--spacing--6));
  width: max-content;             /* row never wraps — real overflow width */
  /*
   * Gutter: aligns the first/last card with the site container. The % in
   * the calc resolves against the viewport wrapper's width; on narrow
   * screens the token side wins. Site GLOBAL sayfa padding'i --view--px
   * olarak tanımlıysa ÖNCELİKLİDİR (tablet/mobilde gutter = view-px);
   * yoksa --spacing--6'ya düşer. Override per instance:
   *   .hscroll { --hscroll-gutter: max(1.5rem, calc((100% - var(--container--2xl)) / 2)); }
   * h-scroll.js measures this padding (on the track OR on the viewport):
   * desktop pin distance ends with the last card fully in view, and the
   * Swiper reads it as slidesOffsetBefore/After — one token, both modes.
   */
  padding-inline: var(--hscroll-gutter,
    max(var(--view--px, var(--spacing--6)),
        calc((100% - var(--container--2xl, 86rem)) / 2)));
  will-change: transform;
}

/* ── Card ────────────────────────────────────────────────────── */
.hscroll__card {
  flex: 0 0 auto;
  width: auto;                    /* genişlik görselden gelir — film şeridi */
  border-radius: var(--radius--lg, 1rem);
  position: relative;
  overflow: clip;                 /* parallax'lı görseli kırpar — davranışsal */
}

/* Kart görseli — ortak yükseklik, doğal oran: yatay foto geniş kart,
   dikey foto dar kart üretir. JS parallax'ta büyütüp süzdürür. */
.hscroll__card [data-hscroll-img],
.hscroll__card img {
  display: block;
  height: var(--hscroll-card-h, 70svh);
  width: auto;
  max-width: none;                /* Webflow'un img{max-width:100%}'ünü ezer — şart */
  object-fit: cover;
}

/* ── Tablet ve mobil kart ölçüsü ──────────────────────────────
   Film şeridi (genişlik = görselin doğal oranı) yalnız MASAÜSTÜNDE mantıklı:
   dar ekranda 50svh yüksekliğindeki yatay bir foto ekrandan taşıyor. Burada
   genişlik kaç kart görüneceğinden türer; görsel karta cover'lanır.

   --hscroll-spv: kaç kart görünsün. Varsayılanı bu media query'ler verir,
   h-scroll.js aktifken data-hscroll-spv-t / -spv-m attribute'larını root'a
   custom property olarak basıp bunları ezer. Swiper slidesPerView:"auto"
   olduğu için kart genişliğini buradan okur — tek kaynak. */
@media (max-width: 991px) {
  [data-hscroll] {
    --hscroll-card-h: 58svh;
    --hscroll-spv: 2.2;
  }

  /* Hem Swiper hem scroll-snap fallback aynı genişliği kullanır: Swiper
     yüklenmese de kartlar aynı ölçüde kalır, sıçrama olmaz. */
  [data-hscroll] .hscroll__card {
    width: calc(100% / var(--hscroll-spv, 1.2));
  }

  /* Kart artık genişliği dayatıyor → görsel doğal oranını değil kartı
     doldurur. max-width:none masaüstü kuralından geliyor, geri alınmalı. */
  [data-hscroll] .hscroll__card [data-hscroll-img],
  [data-hscroll] .hscroll__card img {
    width: 100%;
    max-width: 100%;
    height: var(--hscroll-card-h);
  }
}

@media (max-width: 767px) {
  [data-hscroll] {
    --hscroll-card-h: 50svh;
    --hscroll-spv: 1.2;
  }
}

/* Destination ismi — görselin üstünde; tipografi/renk Designer'ın.
   Kenardan boşluk: karta --hscroll-name-inset ver (custom property) YA DA
   .hscroll__name'in kendi padding'ini kullan — kartın padding'i absolute
   overlay'i ETKİLEMEZ. */
.hscroll__card .hscroll__name {
  position: absolute;
  inset-inline: var(--hscroll-name-inset, 0);
  bottom: var(--hscroll-name-inset, 0);
  z-index: 1;
  pointer-events: none;
}

/* ── Fallback — native scroll-snap scroller ──────────────────── */
/*
 * Applies whenever Swiper is NOT driving (.is-swiper absent): first paint
 * before JS, Swiper CDN failure, and reduced-motion desktop. Same block for
 * ≤991px AND reduced-motion at any width.
 */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  [data-hscroll]:not(.is-swiper) .hscroll__viewport {
    min-height: 0;                /* no pin → section is content-height */
    overflow: visible;
  }

  [data-hscroll]:not(.is-swiper) .hscroll__track {
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hscroll-gutter,
      max(var(--view--px, var(--spacing--6)),
          calc((100% - var(--container--2xl, 86rem)) / 2)));
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    will-change: auto;
  }

  [data-hscroll]:not(.is-swiper) .hscroll__track::-webkit-scrollbar {
    display: none;
  }

  [data-hscroll]:not(.is-swiper) .hscroll__card {
    scroll-snap-align: start;     /* bleed reads left→right, next card peeks */
  }
}

/* Fallback kart genişlikleri: film şeridi modunda genişlik görselden gelir —
   spv tabanlı zorlama YOK; scroll-snap karışık genişliklerle sorunsuz. */

/* ── Swiper mode (≤991px, JS aktif) ──────────────────────────── */
/*
 * h-scroll.js adds .is-swiper + the swiper/swiper-wrapper/swiper-slide
 * classes and instantiates Swiper on the viewport. These are the Swiper CORE
 * styles it needs (inlined here so swiper-bundle.css is never requested);
 * spacing moves to Swiper params (spaceBetween + slidesOffsetBefore/After),
 * so the token gap/padding are zeroed.
 */
[data-hscroll].is-swiper .hscroll__viewport {
  /*
   * Track, section İÇİNDE DİKEY ORTALANIR (flex + align-items). Yükseklik
   * ve padding yine Designer'ın: h-screen verdiysen 100vh içinde ortalar,
   * vermediysen bölüm içerik yüksekliğinde kalır. (Flex'te dikey ortalama
   * align-items iledir; justify-items grid'e özgüdür — kullanılmaz.)
   * Swiper flex container'da sorunsuz çalışır (wrapper width:100% item).
   */
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
  touch-action: pan-y;            /* vertical page scroll stays native */
}

[data-hscroll].is-swiper .hscroll__track {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;                   /* KARTLAR EKRANA UZAMAZ: yükseklik içerikten
                                     gelir — flex stretch ile hepsi en uzun
                                     kartın hizasında eşitlenir */
  gap: 0;                         /* Swiper spaceBetween owns spacing */
  padding-inline: 0;              /* Swiper slidesOffset owns the gutter */
  box-sizing: content-box;        /* Swiper translate math expects this */
  transition-property: transform; /* Swiper sets duration inline */
  will-change: transform;
}

[data-hscroll].is-swiper .hscroll__card {
  flex-shrink: 0;
  position: relative;
  height: auto;                   /* equal-height cards via flex stretch */
  transition-property: transform;
}