/*
 * Duyuru şeridi: site üst şeridi ve paneldeki canlı önizleme aynı dosyayı kullanır.
 * Mobil düzen ekran genişliğine değil şeridin kendi genişliğine bağlıdır (container query): panelde
 * “Telefon” önizlemesi sitedekiyle birebir aynı görünür.
 * Değişkenler: --ann-tx geçiş süresi (hız seçeneği), --ann-factor kayan yazı hız çarpanı.
 */
.announcement { container: announcement / inline-size; position: relative; overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; --ann-fg: var(--white); --ann-link-bg: rgba(255, 255, 255, 0.14); --ann-link-bd: rgba(255, 255, 255, 0.28); --ann-tx: 450ms; --ann-factor: 1; color: var(--ann-fg); transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.3s ease; }
.announcement--speed-yavas { --ann-tx: 800ms; --ann-factor: 1.5; }
.announcement--speed-hizli { --ann-tx: 260ms; --ann-factor: 0.65; }
.announcement--koyu { background: linear-gradient(100deg, var(--navy-950) 0%, var(--navy-900) 45%, #0c3a5e 100%); }
.announcement--koyu::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(92, 225, 213, 0.55), transparent); }
.announcement--marka { background: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-700) 55%, #0c4f6e 100%); }
.announcement--acik { --ann-fg: var(--navy-900); --ann-link-bg: var(--white); --ann-link-bd: rgba(8, 120, 122, 0.35); background: linear-gradient(100deg, var(--water-50) 0%, var(--brand-100) 100%); border-bottom: 1px solid rgba(8, 120, 122, 0.18); }
.announcement--vurgu { --ann-fg: #3d2200; --ann-link-bg: rgba(255, 255, 255, 0.6); --ann-link-bd: rgba(61, 34, 0, 0.25); background: linear-gradient(100deg, #ffe7b3 0%, #ffd38a 55%, #ffc27a 100%); }
.announcement__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 44px; padding-top: 6px; padding-bottom: 6px; padding-inline: var(--gutter); max-width: calc(var(--container, 72rem) + 2 * var(--gutter)); margin-inline: auto; }
.announcement__text { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.25rem var(--space-3); margin: 0; text-align: center; }
.announcement__msg { overflow-wrap: anywhere; }
.announcement__link { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--ann-link-bg); border: 1px solid var(--ann-link-bd); color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; }
.announcement__link:hover { color: inherit; background: var(--ann-link-bd); }
.announcement__btn { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: 0.8; cursor: pointer; }
.announcement__btn:hover { opacity: 1; background: var(--ann-link-bg); }
.announcement__btn:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
.announcement__btn .icon, .announcement__btn svg { width: 1rem; height: 1rem; }

/* Tek duyuru: metin ortada, kapatma sağda */
.announcement--static .announcement__inner { padding-left: calc(var(--gutter) + 32px); padding-right: calc(var(--gutter) + 32px); }
.announcement--static .announcement__btn { position: absolute; right: var(--gutter); }

/* Dönen duyurular: metin ortada, denetimler sağda. Gelen ve giden duyuru aynı hücrede üst üste çizilir
   (yükseklik zıplamaz); efekt sınıfı geçişin biçimini, --ann-tx süresini belirler. */
.announcement--rotate .announcement__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); gap: var(--space-3); }
.announcement__slides { grid-column: 2; min-width: 0; display: grid; overflow: hidden; padding: 2px; }
.announcement__slide { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; }
.announcement__slide[hidden] { display: none; }
.announcement__slide.is-leaving { pointer-events: none; }
.announcement__slide.is-current, .announcement__slide.is-leaving { animation-duration: var(--ann-tx); animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); animation-fill-mode: both; }
.announcement--fx-fade .is-current { animation-name: ann-fade-in; }
.announcement--fx-fade .is-leaving { animation-name: ann-fade-out; }
.announcement--fx-up .is-current { animation-name: ann-up-in; }
.announcement--fx-up .is-leaving { animation-name: ann-up-out; }
.announcement--fx-up.is-back .is-current { animation-name: ann-down-in; }
.announcement--fx-up.is-back .is-leaving { animation-name: ann-down-out; }
.announcement--fx-left .is-current, .announcement--fx-right.is-back .is-current { animation-name: ann-left-in; }
.announcement--fx-left .is-leaving, .announcement--fx-right.is-back .is-leaving { animation-name: ann-left-out; }
.announcement--fx-right .is-current, .announcement--fx-left.is-back .is-current { animation-name: ann-right-in; }
.announcement--fx-right .is-leaving, .announcement--fx-left.is-back .is-leaving { animation-name: ann-right-out; }
.announcement--fx-none .is-current, .announcement--fx-none .is-leaving, .announcement.is-first .is-current { animation: none; }
/* Giden duyuru yolun yarısında tamamen kaybolur, gelen ondan sonra belirir: ikisi üst üste okunmaz */
@keyframes ann-fade-in { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ann-fade-out { 0% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes ann-up-in { 0% { opacity: 0; transform: translateY(100%); } 40% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes ann-up-out { 0% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } 100% { transform: translateY(-100%); } }
@keyframes ann-down-in { 0% { opacity: 0; transform: translateY(-100%); } 40% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes ann-down-out { 0% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } 100% { transform: translateY(100%); } }
@keyframes ann-left-in { 0% { opacity: 0; transform: translateX(100%); } 40% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes ann-left-out { 0% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } 100% { transform: translateX(-100%); } }
@keyframes ann-right-in { 0% { opacity: 0; transform: translateX(-100%); } 40% { opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes ann-right-out { 0% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } 100% { transform: translateX(100%); } }
.announcement__controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }
.announcement__count { min-width: 2.4em; text-align: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: 0.8; }
.announcement__chev { display: block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-1px) rotate(45deg); }
.announcement__chev--prev { transform: translateX(1px) rotate(-135deg); }
/* İlerleme çizgisi: sıradaki duyuruya kalan süre (durunca durur) */
.announcement__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.35; transform-origin: left; transform: scaleX(0); }
.announcement__progress.is-running { animation: ann-progress var(--ann-wait, 6s) linear forwards; }
.announcement.is-paused .announcement__progress, .announcement.is-hover .announcement__progress { animation-play-state: paused; }
@keyframes ann-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Kayan yazı: tüm duyurular tek satırda, ayraçla. Süre metin uzunluğuna göre, hız seçeneğiyle çarpılır */
.announcement--marquee .announcement__viewport + .announcement__btn { margin-left: auto; }
.announcement__viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.announcement__track { --ann-base: 28s; display: flex; width: max-content; animation: ann-scroll calc(var(--ann-base) * var(--ann-factor)) linear infinite; }
.announcement__track--s { --ann-base: 18s; }
.announcement__track--l { --ann-base: 45s; }
.announcement--dir-right .announcement__track { animation-direction: reverse; }
.announcement__track .announcement__text { flex: none; flex-wrap: nowrap; white-space: nowrap; padding-right: 4rem; } /* boşluk her kopyanın içinde: 3 kopyanın 1/3'ü tam bir tur */
.announcement__sep { margin: 0 var(--space-4); opacity: 0.55; }
.announcement--marquee:hover .announcement__track, .announcement--marquee:focus-within .announcement__track, .announcement.is-paused .announcement__track { animation-play-state: paused; }
@keyframes ann-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
.announcement__pause { display: block; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.announcement.is-paused .announcement__pause { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.announcement.is-closing { opacity: 0; transform: translateY(-6px); }
.announcement-hidden .announcement:not([data-preview]) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .announcement__track { animation: none; width: auto; }
  .announcement__track .announcement__text[aria-hidden="true"] { display: none; }
  .announcement__track .announcement__text { white-space: normal; flex-wrap: wrap; }
  .announcement__viewport { mask-image: none; }
  .announcement--marquee [data-announcement-pause], .announcement--rotate [data-announcement-pause], .announcement__progress { display: none; }
  .announcement__slide.is-current, .announcement__slide.is-leaving { animation: none; }
}

/* Dar şerit (telefon): kompakt, sola hizalı; bağlantı satır içinde. Düğmeler ≥ 44 px genişlik */
@container announcement (max-width: 599px) {
  .announcement__text { font-size: 0.8125rem; }
  .announcement__btn { width: 44px; height: 40px; border-radius: 10px; }
  .announcement__controls { gap: 0; margin-right: -8px; }
  .announcement--static .announcement__inner { justify-content: flex-start; padding-left: var(--gutter); padding-right: calc(var(--gutter) + 40px); }
  .announcement--static .announcement__btn { right: calc(var(--gutter) - 8px); }
  .announcement--rotate .announcement__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); min-height: 48px; } /* tek/iki satırlık duyurular arasında şerit zıplamasın */
  .announcement--rotate .announcement__slides { grid-column: 1; }
  .announcement--rotate .announcement__slide { justify-content: flex-start; }
  .announcement--rotate .announcement__controls { grid-column: 2; }
  .announcement--rotate .announcement__count, .announcement--rotate [data-announcement-prev] { display: none; }
  .announcement--static .announcement__text, .announcement--rotate .announcement__text { display: block; text-align: left; }
  .announcement--static .announcement__link, .announcement--rotate .announcement__link { display: inline; padding: 0; margin-left: 0.35em; background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; }
}