/*!
 * h-scroll.css v2.4.3
 * v2.4.3 — fallback mobile default 1.1 (peek), matching h-scroll.js v2.2.4.
 * v2.4.2 — fallback mobile default 1 card, matching h-scroll.js v2.2.2.
 * v2.4.1 — card inner layout is the Designer's again (no forced flex column);
 *          the slide width is written inline by h-scroll.js v2.2.1.
 * v2.4.0 — styles for the arrows + dots h-scroll.js v2.2.0 injects.
 * v2.3.1 — Swiper-mode viewport is content-height (height:auto): a Designer
 *          h-screen on it made the carousel a screen-tall box with the cards
 *          centred inside and every vertical padding/margin invisible.
 * v2.3.0 — Swiper mode owns the card completely: width from --hscroll-slide-w
 *          (computed by h-scroll.js v2.1.0), Designer min/max-width, flex-basis
 *          and margins neutralised, desktop min-height dropped, so a touch
 *          device wider than 991px (iPad landscape) renders correctly too.
 *          Fallback tablet bleed default 2.2 → 1.4.
 * Pinned horizontal-scroll card section — critical/behavioural styles only.
 * Colours, fonts and exact card design come from the Webflow Designer + RC tokens.
 *
 * 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)           (~1.4 cards on tablet, ~1.1 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 */
}

/* 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;
  }
}

/* ── 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, 96rem)) / 2)));
  will-change: transform;
}

/* ── Card ────────────────────────────────────────────────────── */
.hscroll__card {
  flex: 0 0 auto;
  /* Override per instance: .hscroll { --hscroll-card-w: 32rem; } */
  width: var(--hscroll-card-w, clamp(18rem, 38vw, 30rem));
  border-radius: var(--radius--lg);
}

/* ── 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, 96rem)) / 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 bleed widths — mirror Swiper's slidesPerView so the pre-hydration
 * frame and the no-Swiper fallback look identical: N kart/görünüm →
 * kart = (içerik − görünür gap'ler) / N. h-scroll.js JS config'ini
 * --hscroll-spv-t / --hscroll-spv-m olarak buraya yansıtır.
 */
@media (max-width: 991px) {
  [data-hscroll]:not(.is-swiper) .hscroll__card {
    /* tablet: 1 tam kart + 1 gap + 0.4 bleed */
    width: calc((100% - var(--hscroll-gap, var(--spacing--6)))
                / var(--hscroll-spv-t, 1.4));
  }
}

@media (max-width: 767px) {
  [data-hscroll]:not(.is-swiper) .hscroll__card {
    /* mobil: 1 kart + 0.1 peek (default) — data-hscroll-spv-m */
    width: calc((100% - var(--hscroll-gap, var(--spacing--6)))
                / var(--hscroll-spv-m, 1.1));
  }
}

/* ── 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;
  /*
   * CONTENT-HEIGHT, not screen-height. The pin needs a viewport-tall box
   * (100svh at ≥992px, or a Designer h-screen utility) so there is a screen
   * to hold while the track scrolls; the carousel does not. Keeping 100vh
   * here left the cards floating in the middle of a screen-tall box and
   * swallowed every vertical padding/margin the Designer gave the section,
   * the track or the cards ("my paddings do nothing on tablet"). Height
   * comes from the content now; spacing is the section's padding.
   */
  height: auto;
  min-height: 0;
  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 {
  /*
   * SWIPER OWNS THE CARD. Width comes from --hscroll-slide-w, which
   * h-scroll.js computes from the real viewport, gutter, gap and
   * slidesPerView (slidesPerView:"auto" reads it back). Everything the
   * Designer may have set for the desktop card that could fight it —
   * min/max-width, flex-basis, margins — is neutralised here.
   */
  flex: 0 0 auto;
  width: var(--hscroll-slide-w, var(--hscroll-card-w, clamp(18rem, 38vw, 30rem)));
  min-width: 0;
  max-width: none;
  margin: 0;
  position: relative;
  height: auto;                   /* equal-height cards via flex stretch */
  transition-property: transform;
  /* Inner layout (flex/grid, direction) stays the Designer's. h-scroll.js
     writes the slide width inline on the card, so it always wins; the
     children only get a min-width:0 so long words/images can't push the
     card wider than that slide. */
}

[data-hscroll].is-swiper .hscroll__card > * {
  min-width: 0;
  max-width: 100%;
}

/* ── Controls (arrows + dots) — built by h-scroll.js in Swiper mode ──
 * Override on the root in Webflow:
 *   --hscroll-nav-color : arrow/dot colour   (default currentColor)
 *   --hscroll-nav-size  : arrow button size  (default 2.75rem)
 */
.hscroll__nav { display: none; }

[data-hscroll].is-swiper .hscroll__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--4, 1rem);
  margin-top: var(--spacing--6, 1.5rem);
  padding-inline: var(--hscroll-gutter,
    max(var(--view--px, var(--spacing--6)),
        calc((100% - var(--container--2xl, 96rem)) / 2)));
  color: var(--hscroll-nav-color, currentColor);
}

.hscroll__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hscroll__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.hscroll__dot.is-active {
  opacity: 1;
  width: 1.25rem;
}

.hscroll__arrows {
  display: flex;
  gap: 0.5rem;
}

.hscroll__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hscroll-nav-size, 2.75rem);
  height: var(--hscroll-nav-size, 2.75rem);
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.hscroll__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.hscroll__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
}

.hscroll__dots.is-locked,
.hscroll__arrow.is-locked { display: none; }