/* ==========================================================================
 * HIZIRBEY DESIGN SYSTEM — CAROUSEL · AKIŞ MODU
 * Dosya     : themes/default/assets/css/hds/components/carousel/flow.css
 * Oluşturuldu: 2026-11-02
 * Sürüm     : 1.0.0
 * Ownership : Canonical HDS Carousel akış modu (sabit kutuda kesintisiz akan öğeler, kenar okları).
 *             base.css ile birlikte yüklenir. JS yoksa CSS animasyonu akıtır (varsayılan süre); JS gelince
 *             (data-hds-carousel-flow-enhanced) konumu JS sürer, hız px/sn sabit kalır.
 * Yükseklik : `height: fill` (.hds-carousel--flow-fill) kapsayıcının yüksekliğini doldurur.
 * Kancalar  : --hds-carousel-flow-item-size (yatay öğe genişliği), --hds-carousel-flow-height (dikey kutu yüksekliği),
 *             --hds-carousel-flow-duration (JS'siz tur süresi), --hds-carousel-gap, --hds-carousel-control-size
 * ========================================================================== */

/* ---> Carousel · Akış */

.hds-carousel--flow {
  --hds-carousel-flow-item-size: 16rem;
  --hds-carousel-flow-height: 20rem;
  --hds-carousel-flow-duration: 40s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hds-carousel--flow-vertical {
  flex-direction: column;
  align-items: stretch;
}

.hds-carousel__flow-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 8px;
}

.hds-carousel__flow-viewport:focus-visible {
  outline: 2px solid var(--hds-carousel-accent);
  outline-offset: 2px;
}

.hds-carousel--flow-vertical .hds-carousel__flow-viewport {
  height: var(--hds-carousel-flow-height);
}

.hds-carousel__flow-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.hds-carousel--flow-vertical .hds-carousel__flow-track {
  flex-direction: column;
  width: auto;
}

/* Liste sonundaki boşluk iki listeyi eşit uzunlukta tutar (tur sonu atlaması görünmez). */
.hds-carousel__flow-list {
  position: relative;
  display: flex;
  flex: none;
  gap: var(--hds-carousel-gap);
  padding-inline-end: var(--hds-carousel-gap);
}

.hds-carousel--flow-vertical .hds-carousel__flow-list {
  flex-direction: column;
  padding-inline-end: 0;
  padding-block-end: var(--hds-carousel-gap);
}

.hds-carousel__flow-item {
  flex: none;
  box-sizing: border-box;
  width: var(--hds-carousel-flow-item-size);
  min-width: 0;
}

.hds-carousel--flow-vertical .hds-carousel__flow-item {
  width: auto;
}

/* Yükseklik `fill`: kutu kapsayıcının verdiği yüksekliği doldurur, içerik yüksekliği kapsayıcıyı büyütmez. */
.hds-carousel--flow-fill {
  min-height: 0;
  height: 100%;
}

.hds-carousel--flow-fill .hds-carousel__flow-viewport {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
}

/* Okların JS'siz hâli gizli; yatayda kenarda, dikeyde üstte / altta durur. */
.hds-carousel--flow:not([data-hds-carousel-enhanced]) .hds-carousel__arrow {
  display: none;
}

.hds-carousel--flow-vertical .hds-carousel__arrow {
  align-self: center;
}

/* Sığıyorsa (yalnız-taşınca seçeneği) akış durur: kopya gizlenir, oklar kalkar. */
.hds-carousel--flow[data-hds-carousel-flow-idle] .hds-carousel__flow-list[data-hds-carousel-flow-clone],
.hds-carousel--flow[data-hds-carousel-flow-idle] .hds-carousel__arrow {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* JS'siz akış (JS gelince konumu JS sürer). */
  .hds-carousel--flow:not([data-hds-carousel-flow-enhanced]) .hds-carousel__flow-track {
    animation: hds-carousel-flow-x var(--hds-carousel-flow-duration) linear infinite;
  }

  .hds-carousel--flow-vertical:not([data-hds-carousel-flow-enhanced]) .hds-carousel__flow-track {
    animation-name: hds-carousel-flow-y;
  }

  .hds-carousel--flow[data-direction="ltr"]:not([data-hds-carousel-flow-enhanced]) .hds-carousel__flow-track,
  .hds-carousel--flow[data-direction="ttb"]:not([data-hds-carousel-flow-enhanced]) .hds-carousel__flow-track {
    animation-direction: reverse;
  }
}

/* Hareket azaltma: akış yok; kopya gizli, kutu kaydırılabilir, oklar bir öğe kaydırır. */
@media (prefers-reduced-motion: reduce) {
  .hds-carousel__flow-viewport {
    overflow: auto;
    scrollbar-width: thin;
  }

  .hds-carousel__flow-list[data-hds-carousel-flow-clone] {
    display: none;
  }
}

@keyframes hds-carousel-flow-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes hds-carousel-flow-y {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* <--- Carousel · Akış */