/* ==========================================================================
   market-serit.css — Ana sayfa market şeridi: logo + son güncelleme, KAYAN ŞERİT (197 · 18.10.2026 Sunai)
   Eşi: includes/market_serit.php. Saf CSS, JS yok. Tokenlar css/anasayfa-v3.css :root'tan (yoksa yedek değer).
   - Dikişsiz döngü: .mserit-pist iki özdeş grup → translateX(0 → -50%). Süre --mserit-sure (PHP: öğe × 2,4 sn).
   - Hover/odak: durur. prefers-reduced-motion: kayma yok, tek kopya, yatay kaydırılır.
   - Kenar solması: mask-image (alfa) → zemin renginden bağımsız (light/dark).
   - CLS 0: pencere yüksekliği sabit (masaüstü 56 px, mobil 52 px); logo kutusu sabit 24 px.
   - Stil: çıplak şerit + üst/alt kıl çizgi + elmas ayraç (patron 18.10 seçimi "A").
   - Kontrast (zemin #fff/#f8fafc): saat --etiket #475569 7,2:1 · bayat --uyari #b45309 5,0:1 · ayraç dekoratif.
   ========================================================================== */
.mserit {
  --ms-h: 52px;
  --ms-solma: 40px;
  --ms-dugme: 44px;                                 /* 197‴: sağdaki durdur düğmesi (32) + boşluk (12) — içerik bu alana girmez */
  --ms-ara: 22px;                                   /* öğe ↔ ayraç */
  --ms-ayrac: var(--cizgi-guclu, #7c8ba1);
  --ms-metin: var(--etiket, #475569);
  --ms-uyari: var(--uyari, #b45309);
  --ms-cizgi: var(--cizgi, #e2e8f0);
  position: relative;
  grid-column: 1 / -1;
  margin-top: 28px;
  min-width: 0;
}

/* Statik liste: görünmez ama okunur (.sr deseni); klavye odağında görünür olur, pencerenin yerini alır */
.mserit-liste {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; list-style: none;
}
.mserit-liste:focus-within {
  position: static; width: auto; height: var(--ms-h); margin: 0; clip: auto; clip-path: none;
  display: flex; align-items: center; gap: 4px 20px; overflow-x: auto; padding: 0 4px;
  font-size: .875rem; color: var(--ms-metin);
}
.mserit-liste-a { color: var(--turuncu-koyu, #c2410c); font-weight: 600; text-underline-offset: 3px; }
.mserit-liste-a:focus-visible { outline: 3px solid var(--turuncu-orta, #ea580c); outline-offset: 2px; border-radius: 4px; }
.mserit:has(.mserit-liste:focus-within) .mserit-pencere { display: none; }

/* Pencere: tek satır, kenarlarda solma */
.mserit-pencere {
  height: var(--ms-h);
  overflow: hidden;
  /* 197‴: sağ solma düğmenin SOLUNDA biter → kayan logo/saat düğmenin altına ya da kenarına binmez (pencere genişliği aynı, CLS 0) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ms-solma), #000 calc(100% - var(--ms-dugme) - var(--ms-solma)), transparent calc(100% - var(--ms-dugme)));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--ms-solma), #000 calc(100% - var(--ms-dugme) - var(--ms-solma)), transparent calc(100% - var(--ms-dugme)));
}
.mserit-pist {
  display: flex; width: max-content; height: 100%;
  animation: mserit-kay var(--mserit-sure, 30s) linear infinite;
  will-change: transform;
}
/* Durdurma (197″, WCAG 2.2.2): düğme (:checked) her cihazda; hover YALNIZ fareli cihazda — dokunmatikte :hover dokunuştan sonra
   yapışık kalır, "oynat"a basınca şerit duruk kalırdı. :focus-within kuralı kaldırıldı: düğmeye tıklayınca odak düğmede kalır ve
   "oynat"tan sonra da durdururdu (klavye artık düğmeyle duraklatır; statik liste yolu aynen). */
.mserit-dur-girdi:checked ~ .mserit-pencere .mserit-pist { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .mserit-pencere:hover .mserit-pist { animation-play-state: paused; }
  .mserit:has(.mserit-dur:hover) .mserit-pist { animation-play-state: paused; }
}

/* Durdur/oynat düğmesi: sağ uçtaki solma bölgesinin üstünde (yerleşim değişmez, CLS 0); 32 px hedef (≥ 24) */
.mserit-dur-girdi { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.mserit-dur {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--yuzey, #fff); border: 1px solid var(--ms-cizgi); color: var(--ms-metin);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mserit-dur:hover { color: var(--murekkep, #0f172a); border-color: var(--cizgi-guclu, #7c8ba1); }
.mserit-dur-girdi:focus-visible ~ .mserit-dur { outline: 3px solid var(--turuncu-orta, #ea580c); outline-offset: 2px; }
.mserit-dur-ikon { width: 14px; height: 14px; }
.mserit-dur-ad {   /* görünmez ama erişilebilir ad (label metni) — iki metinden yalnız biri görüntülenir */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mserit-dur-ikon--oynat, .mserit-dur-ad--oynat { display: none; }
.mserit-dur-girdi:checked ~ .mserit-dur .mserit-dur-ikon--dur,
.mserit-dur-girdi:checked ~ .mserit-dur .mserit-dur-ad--dur { display: none; }
.mserit-dur-girdi:checked ~ .mserit-dur .mserit-dur-ikon--oynat { display: block; }
.mserit-dur-girdi:checked ~ .mserit-dur .mserit-dur-ad--oynat { display: inline; }
.mserit:has(.mserit-liste:focus-within) .mserit-dur { display: none; }
@keyframes mserit-kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.mserit-grup { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; flex: none; }
.mserit-oge { display: flex; align-items: center; height: 100%; flex: none; }
/* Ayraç her öğenin SONUNDA (grubun sonu dahil) → iki grup arası boşluk öğe arası boşlukla aynı = dikiş yok */
.mserit-oge::after {
  content: ""; flex: none; margin-inline: var(--ms-ara);
  width: 6px; height: 6px; background: var(--ms-ayrac); transform: rotate(45deg); border-radius: 1px; opacity: .55;
}
.mserit-a {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px;
  color: inherit; text-decoration: none; border-radius: 8px; white-space: nowrap;
}
.mserit-logo { display: inline-flex; align-items: center; height: 24px; flex: none; }
.mserit-logo .mlogo { display: block; max-height: 24px; width: auto; }
.mserit-logo .mlogo-ad { font-weight: 700; font-size: .9375rem; color: var(--murekkep, #0f172a); }
.mserit-saat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8125rem; font-weight: 500; line-height: 1; color: var(--ms-metin);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.mserit-ikon { width: 14px; height: 14px; flex: none; }
.mserit-saat--bayat { color: var(--ms-uyari); font-weight: 650; }
.mserit-a:hover .mserit-saat { color: var(--murekkep, #0f172a); }
.mserit-a:hover .mserit-saat--bayat { color: var(--ms-uyari); }

.mserit-pencere { border-block: 1px solid var(--ms-cizgi); }
.mserit-a:hover { background: var(--zemin-hover, #f1f5f9); }

/* Bilgi tek yerde: şerit saatleri taşıdığı için hero'daki düz saat satırı (.mt-satir) her genişlikte gizli;
   bayat market uyarısı (.mt-uyari) kalır. (Önce: <1024 .mt-satir'de, ≥1024 şeritte.) */
.kahraman-ic:has(.mserit) .mt-satir { display: none; }
.kahraman-ic:has(.mserit) .mt { margin-top: 0; }

@media (min-width: 1024px) {
  .mserit { --ms-h: 56px; --ms-solma: 64px; --ms-ara: 28px; margin-top: 44px; }
  .mserit-saat { font-size: .875rem; }
}

/* Hareket azaltma: kayma yok → tek kopya, tekrarlar gizli, yatay kaydırılabilir tek satır (snap) */
@media (prefers-reduced-motion: reduce) {
  .mserit-pist { animation: none; will-change: auto; }
  .mserit-dur, .mserit-dur-girdi { display: none; }   /* kayma yok → durdurulacak bir şey yok */
  .mserit-grup--kopya, .mserit-oge--tekrar { display: none; }
  .mserit-pencere {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--ms-solma)), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - var(--ms-solma)), transparent 100%);
  }
  .mserit-oge { scroll-snap-align: start; }
}