/* Vuvito Marquee — sonsuz kayan şerit
 *
 * Şerit tam olarak BİR kopya genişliği kadar ötelenir (--vt-marquee-shift).
 * O anda ikinci kopya birincinin başladığı yerdedir, animasyon başa sarınca
 * hiçbir şey yerinden oynamaz — dikiş görünmez.
 *
 * Süre JS'te içerik genişliği / hız (px/sn) olarak hesaplanır, böylece görsel
 * hız öge sayısından ve ekran boyutundan bağımsızdır.
 */

/* Kök yalnızca dış boşluğu taşır — miktarı `vt-sp-t-*` / `vt-sp-b-*`
   yardımcı sınıflarından gelir (bkz. global.css). */
.cc_lqof57t2_W4u4dnkjo0 .vt-marquee {
  width: 100%;
  background: var(--color-bg);
  overflow: hidden;
}

/* Şeridin kendisi: kenarlık + iç dolgu. Dış boşluk bunun dışındadır. */
.cc_lqof57t2_W4u4dnkjo0 .vt-marquee__band {
  padding-block: 12px;
}

@media (min-width: 768px) {
  .cc_lqof57t2_W4u4dnkjo0 .vt-marquee__band {
    padding-block: 18px;
  }
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee--bordered .vt-marquee__band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee__viewport {
  width: 100%;
  overflow: hidden;
  /* Kenarlarda yumuşak geçiş — şerit ekrana girip çıkarken kesilmiş
     görünmez, sonsuzluk hissi güçlenir. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee__track {
  display: flex;
  width: max-content;
  /* GPU katmanına al — metin akarken bulanıklaşmasın. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Animasyon yalnızca ölçüm tamamlandıktan sonra başlar; aksi halde
   şerit sıfır genişlikle titrer. */
.cc_lqof57t2_W4u4dnkjo0 .vt-marquee--running .vt-marquee__track {
  animation-name: cc_lqof57t2_W4u4dnkjo0_vt-marquee-scroll;
  animation-duration: var(--vt-marquee-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee--reverse .vt-marquee__track {
  animation-direction: reverse;
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee--pausable .vt-marquee__viewport:hover .vt-marquee__track {
  animation-play-state: paused;
}

.cc_lqof57t2_W4u4dnkjo0 .vt-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--vt-marquee-gap, 48px);
  /* Sondaki boşluk kopya genişliğine dahildir; dikiş yerindeki aralık
     kopya içindeki aralıkla birebir aynı olur. */
  padding-right: var(--vt-marquee-gap, 48px);
}

/* NOT: IkasComponentRenderer sarmalayıcısına satır içi `display: contents`
   basar, yani kutu ağacından çıkar ve ögeler doğrudan `.vt-marquee__group`in
   flex çocuğu olur. Bu yüzden burada sarmalayıcıyı ayrıca biçimlendirmeye
   gerek yok — flex ve gap yukarıdaki gruptan geliyor.
   (Grid gibi sarmalayıcının kendisinin kutu olması gereken yerlerde
   `display`i `style` prop'uyla ezmek gerekir; bkz. Grid32.) */

@keyframes cc_lqof57t2_W4u4dnkjo0_vt-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--vt-marquee-shift) * -1), 0, 0);
  }
}

/* Hareket hassasiyeti: animasyon durur, şerit okunur bir satır olarak kalır. */
@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_W4u4dnkjo0 .vt-marquee--running .vt-marquee__track {
    animation: none;
  }

  .cc_lqof57t2_W4u4dnkjo0 .vt-marquee__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}