/*
 * spor-animasyon.css — canlı maç animasyonu kabı (2026-11-14, 1552dcdd). Modül: public/spor-animasyon.js.
 * Betjuve: masaüstünde kupon sütununda, "Bahis Kuponu"nun üstünde, ortalanmış saha rozeti + animasyon (318 sütunda 314×187).
 * Renkler yalnız tema tokenlarından (site yalnız koyu tema).
 */
.spor-anim { display: flex; flex-direction: column; min-width: 0; }
.spor-anim[hidden] { display: none; }
/* Betjuve birebir (2026-11-14, 1920/1440/1280 ölçüldü): sayfa zemininde, kart YOK; ortada 20×20 açık rozet düğme, 2 px boşluk,
   sonra sütunun 2'şer px içeriden animasyon (318 sütunda 314×187); "Bahis Kuponu"na 8 px. */
.spor-anim { margin-bottom: 8px; }

.spor-anim__bas { display: flex; align-items: center; justify-content: center; height: 20px; margin-bottom: 2px; }
.spor-anim__dugme {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--metin-80);
  color: var(--zemin);
  cursor: pointer;
  transition: opacity var(--gecis), background var(--gecis);
}
/* Görünen 20×20, dokunma alanı 44×44 (kural: dokunma alanı en az 44 px). */
.spor-anim__dugme::after { content: ""; position: absolute; inset: -12px; }
.spor-anim__dugme[aria-pressed="false"] { opacity: 0.56; }
.spor-anim__dugme:hover { background: var(--metin); }
.spor-anim__dugme:focus-visible { outline: 2px solid var(--altin-kutu); outline-offset: 2px; }
.spor-anim__ikon { width: 15px; height: 10px; }

.spor-anim__govde { position: relative; min-width: 0; margin: 0 2px; }
.spor-anim__govde:empty { display: none; }
.spor-anim__cerceve { display: block; width: 100%; border: 0; background: transparent; }
/* Yüklenirken iskelet iframe'in üstünde durur; widget hazır olunca kaldırılır. */
.spor-anim__iskelet { position: absolute; inset: 0; z-index: 1; aspect-ratio: auto; border-radius: 0; }
.spor-anim__bilgi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  color: var(--metin-70);
  font-size: 13px;
  text-align: center;
}
.spor-anim__bilgi p { margin: 0; }

/* Dar ekran: maç görünümünün üstünde; yalnız maç açıkken görünür (liste görünümünde kap gizli). */
.spor-anim--dar { grid-column: 1 / -1; }
.spor-duzen:not([data-gorunum="mac"]) > .spor-anim--dar { display: none; }
/* Kupon sütununda (≥768) kap; dar ekranda kupon çekmecesi içinde KALMAZ (modül taşır), yine de emniyet: */
@media (max-width: 767px) {
  .spor-kupon > .spor-anim { display: none; }
}
@media (min-width: 768px) {
  .spor-duzen > .spor-anim--dar { display: none; }
  /* Animasyon kupon sütunundayken kupon KARTI animasyonun altında başlar (betjuve: düğme + animasyon sayfa zemininde). */
  .spor-kupon:has(> .spor-anim:not([hidden])) { background: transparent; box-shadow: none; border-radius: 0; }
  .spor-kupon:has(> .spor-anim:not([hidden])) > .kupon__govde,
  .spor-kupon:has(> .spor-anim:not([hidden])) > .kupon__bahislerim {
    border-radius: 0 0 var(--r-10) var(--r-10);
    background: var(--yuzey-05);
    box-shadow: inset 1px 0 0 var(--cizgi-ince), inset -1px 0 0 var(--cizgi-ince), inset 0 -1px 0 var(--cizgi-ince);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spor-anim__dugme { transition: none; }
}