/* ============================================================
   Kaşüstüspor — Ortak (header/footer/hero) stilleri
   Sayfaya özel stiller her HTML'in kendi <style> bloğunda kalır.
   ============================================================ */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #04140c;
  color: #eaf5ee;
  -webkit-font-smoothing: antialiased;
}

/* Web component'leri layout-shadow yapar; sticky/grid çocukları
   doğrudan body'nin çocuğuymuş gibi davransın */
site-header, site-footer { display: contents; }

/* Saha çizgisi pattern'i */
.pitch-stripes {
  background-image: linear-gradient(90deg, rgba(255,255,255,.025) 0 50%, transparent 50% 100%);
  background-size: 80px 100%;
}

/* Sarı tehlike şeridi */
.stripe-divider { background: repeating-linear-gradient(45deg, #f5c518 0 14px, #04140c 14px 28px); }

/* Üst menüde hover'da sarı çizgi */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 2px; background: #f5c518;
  transition: .25s ease; transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 70%; }

/* Tabular numerals (skor/tablolar için) */
.tnum { font-variant-numeric: tabular-nums; }

/* Hero arka planı */
.hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(15,138,63,.35), transparent 60%),
    linear-gradient(180deg, #04140c 0%, #061b10 60%, #04140c 100%);
}

/* Anasayfa hero için daha güçlü versiyon */
.hero-bg-home {
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(15,138,63,.45), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(13,110,52,.55), transparent 70%),
    linear-gradient(180deg, #04140c 0%, #061b10 50%, #04140c 100%);
}

/* Hafif noise grain efekti */
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Sarı pulse (canlı veri rozeti, sonraki maç vs.) */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(245,197,24,0); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }