/* ==========================================================================
   Ana sayfa (Site\HomeController + resources/views/site/home.blade.php)
   sayfa özel CSS. Ortak bileşenler public/asset/site/site.css içinde —
   burada YALNIZCA bu sayfaya özgü kurallar var (HARD RULE: site.css'e
   dokunulmaz). design-tokens.md §9.13 ölçüleriyle birebir.
   ========================================================================== */

/* ---- 1. Maç şeridi ------------------------------------------------------
   match_hero'nun mh-teams ızgarası 84px + 1fr + 84px sabittir (site.css) —
   kart bundan daha dar olursa kahraman değer (32px "2-1" / "BELİRLENMEDİ")
   rakip armasının üstüne taşar. Bu yüzden şerit kartları TEK genişlikte:
   masaüstünde 380px sabit, dar ekranda görüntü genişliğine göre küçülür
   (komşu kartın kenarı görünsün diye %8-10 taşırma bırakılır). Sıradaki maç
   kartı `has-offset` kırmızı ofset gölgesi + alt bölümüyle (footer: "Maç
   merkezi" + tahmin) görsel olarak birincil; çevresindekiler hafif soluk. */
.hero-scroller { align-items: stretch; padding-bottom: 14px; }
.hero-mini, .hero-primary { width: min(380px, 88vw); flex-shrink: 0; }
.hero-mini .match-hero { height: 100%; }
.hero-mini { opacity: 0.82; transition: opacity var(--t-std) var(--ease); }
.hero-mini:hover, .hero-mini:focus-within { opacity: 1; }

.hero-dots { display: flex; justify-content: flex-end; padding: 0 var(--gutter); margin-top: -8px; }
.hero-dots .dots i { background: rgba(7, 24, 16, 0.18); }
.hero-dots .dots i.is-active { width: 12px; background: var(--forest); }

@media (max-width: 480px) {
  .hero-mini, .hero-primary { width: min(340px, 90vw); }
}

/* ---- 3. Puan durumu özeti ------------------------------------------------ */
.home-standing-body { margin-top: 10px; gap: var(--sp-md); }
.home-standing-rank {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: var(--r-badge);
  background: var(--green-soft); color: var(--forest);
  font-size: 17px; font-weight: 800;
}
.home-standing-points { margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--ink); }
.home-standing-points small { margin-left: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.3px; }
.home-standing-form { gap: 4px; flex: 0 0 auto; }

/* ---- 4. Hızlı kapılar ---------------------------------------------------- */
.home-shortcut {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 6px; text-align: center;
}
.home-shortcut svg { color: var(--forest); }
.home-shortcut span { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---- 5. Video kartı (220×168) ------------------------------------------- */
.video-card { display: block; flex: 0 0 auto; width: 220px; color: inherit; }
.video-card-media {
  position: relative; display: block; height: 116px; border-radius: var(--r-media);
  overflow: hidden; background: linear-gradient(135deg, var(--forest-app), var(--red-app));
}
.video-card-media img { width: 100%; height: 100%; object-fit: cover; }
.video-card-play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-card-play svg { width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--forest); }
.video-card-title { display: block; margin: 8px 2px 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); }

/* ---- 6. Anket kartı ------------------------------------------------------ */
.poll-card { padding: 16px 18px 18px; }
.poll-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--forest); }
.poll-eyebrow svg { flex: 0 0 auto; }
.poll-question { margin: 8px 0 12px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-option {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 14px; border-radius: var(--r-badge); overflow: hidden;
  background: var(--bg-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.poll-option::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  width: var(--poll-pct, 0%); background: #E6E9E4;
  transition: width var(--t-std) var(--ease);
}
.poll-option.is-lead::before { background: var(--green-soft); }
.poll-option.is-lead { color: var(--ink); font-weight: 700; }
.poll-option-label, .poll-option-pct { position: relative; z-index: 1; }
.poll-option-pct { font-weight: 700; color: var(--ink-3); }
.poll-option.is-lead .poll-option-pct { color: var(--forest); }

/* ---- 7. Etkinlik kartı ---------------------------------------------------- */
.event-card { padding: var(--sp-lg); }
.event-date-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 52px; height: 56px; border-radius: var(--r-control);
  background: var(--forest); color: #fff;
}
.event-day { font-size: 20px; font-weight: 800; line-height: 1; }
.event-month { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.event-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.event-meta { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.event-meta svg { flex: 0 0 auto; color: var(--ink-4); }
.event-attendee-badge { flex: 0 0 auto; }

/* ---- 8. Haber kartı (244×236) --------------------------------------------- */
.news-card {
  display: block; flex: 0 0 auto; width: 244px; border-radius: var(--r-card); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-card); color: inherit;
  transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.news-card-media { position: relative; display: block; height: 128px; background: linear-gradient(135deg, var(--forest-app), #0E7D44, var(--red-app)); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-pill { position: absolute; left: 10px; bottom: 10px; }
.news-card-body { display: block; padding: 12px 14px 14px; }
.news-card-title { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); }

@media (max-width: 480px) {
  .video-card { width: 190px; }
  .news-card { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .poll-option::before, .news-card { transition: none; }
}