/* ==========================================================================
   BREAKING-NEWS.CSS
   Adım 2/4 — "Son Dakika" Teleks Bandı
   --------------------------------------------------------------------------
   Konsept: Eski basın ajansı teleks bantlarından ilham alan, sürekli akan
   ve duraksamayan bir haber şeridi. "SON DAKİKA" etiketi sabit dururken,
   haber metinleri sonsuz döngüde sağdan sola kayar.
   ========================================================================== */

.breaking-bar {
  position: relative;
  z-index: var(--z-breaking-bar);
  display: flex;
  align-items: stretch;
  height: 44px;
  background-color: var(--color-accent-press);
  overflow: hidden;
  /* Bandın kendisi sabit dursun; sayfa kaydığında üstte kalmasın istenirse
     position: sticky; top: 0; eklenebilir — şimdilik sayfa akışında. */
}

/* ---- Sol Sabit Etiket: "SON DAKİKA" ----
   Hafif nabız (pulse) animasyonu ile canlılık hissi verir, ama göz
   yormayacak kadar yavaş ve yumuşak. */
.breaking-bar__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  background-color: var(--color-accent-press-hover);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  white-space: nowrap;
  position: relative;
  /* Sağ kenarda bandın gövdesine geçişi yumuşatan diagonal kesim */
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding-right: calc(var(--space-5) + 10px);
}

/* Nabız noktası — canlı yayın hissi */
.breaking-bar__pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #FFFFFF;
  animation: pulse-glow 1.8s var(--ease-fluid) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

/* ---- Kayan Haber Şeridi ----
   Teknik: iki kopya art arda eklenir (.breaking-bar__track içinde 2x ul),
   toplam genişliğin %50'si kadar translateX ile sonsuz döngü sağlanır.
   Bu yöntem "atlama" (jump-cut) olmadan kusursuz bir loop verir. */
.breaking-bar__track {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Sağ kenarda yumuşak bir "fade-out" maskesi — metin kenarda aniden
   kesilmesin, zarifçe bandın rengine erisin. */
.breaking-bar__track::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 92%,
    var(--color-accent-press) 100%
  );
}

.breaking-bar__marquee {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: marquee-scroll 32s linear infinite;
  /* will-change ile GPU katmanına alınır → akıcılık garanti */
  will-change: transform;
}

/* Fare bandın üzerine geldiğinde akış yumuşakça duraklar —
   kullanıcı haberi okumak istediğinde metni "yakalayabilsin". */
.breaking-bar:hover .breaking-bar__marquee {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.breaking-bar__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #FFFFFF;
}

/* Haber öğeleri arasındaki ayraç — teleks bandındaki "perforasyon" hissi */
.breaking-bar__item::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-left: var(--space-6);
}

.breaking-bar__item-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
  margin-right: var(--space-3);
}

/* ---- Kapatma Butonu ----
   Premium siteler kullanıcıya kontrol verir; bandı kapatabilme opsiyonu. */
.breaking-bar__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--duration-fast) var(--ease-fluid),
              background-color var(--duration-fast) var(--ease-fluid);
}

.breaking-bar__close:hover {
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.12);
}

.breaking-bar__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Bandın kapanış animasyonu — JS tarafından .is-closing class'ı eklenir */
.breaking-bar.is-closing {
  animation: collapse-bar var(--duration-base) var(--ease-fluid) forwards;
}

@keyframes collapse-bar {
  from {
    height: 44px;
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .breaking-bar__label span:not(.breaking-bar__pulse-dot) {
    /* Mobilde "SON DAKİKA" metnini kısaltıyoruz, dot kalır */
    font-size: 0.65rem;
  }
  .breaking-bar__label {
    padding-inline: var(--space-3);
    padding-right: calc(var(--space-3) + 10px);
  }
  .breaking-bar__item {
    font-size: var(--text-xs);
    padding-inline: var(--space-4);
  }
  .breaking-bar__close {
    width: 36px;
  }
}