/* ====== Marquee (üst bant) – sabit, body padding’inden etkilenmez, sorunsuz sonsuz akış ====== */

/* JS (syncMarqueeSpacer) bu değişkeni güncelleyebilir */
:root {
  --marquee-h: 25px; /* bant yüksekliği (spacer ile senkron) */
}

.marquee {
  --gap: 32px; /* mesajlar arası boşluk */
  --speed-pps: 80; /* piksel/sn kayma hızı (JS bunu baz alır) */

  position: fixed; /* viewport’a sabitlenir, body padding’i etkilemez */
  top: 0;
  left: 0;
  right: 0; /* 100vw yerine left/right 0: scrollbar taşıması olmaz */
  z-index: 9999;

  height: var(--marquee-h);
  overflow: hidden;
  color: #fff;
  background: #0f2f2f;
  border-bottom: 1px solid rgba(207, 1, 1, 0.12);
  font: 500 16px / var(--marquee-h) system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans";
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;

  /* iOS çentik güvenli alanı */
  padding-top: env(safe-area-inset-top);
}

.marquee__inner {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: marquee var(--duration, 30s) linear infinite;
  transform: translate3d(0, 0, 0); /* GPU hint */
}

/* Bir “set” içindeki öğeleri düzenler (mesajlar burada) */
.marquee__set {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: var(--gap);
}

.marquee__set > * {
  white-space: nowrap;
  margin: 0; /* dışarıdan margin dikiş yaratmasın */
}

/* Hover’da durdur (opsiyonel) */
.marquee:hover .marquee__inner {
  animation-play-state: paused;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .marquee__inner {
    animation: none;
  }
}

/* Anahtar: mesafe px olarak --cycle ile hesaplanır (JS hesaplar) */
@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--cycle) * -1px), 0, 0);
  }
}

/* ==== İçeriği bant yüksekliği kadar aşağı iten boşluk ==== */
/* .marquee hemen ardından .marquee-spacer yer almalı */
.marquee-spacer {
  height: calc(var(--marquee-h) + env(safe-area-inset-top));
}