/* =================================================================
   EKOFUTBOL — Responsive Stiller
   Mobil öncelikli breakpoint'ler
   ================================================================= */

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    --s-9: 5rem;
    --s-10: 6rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .hero-panel { max-width: 520px; }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }

  .contact-card {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .nav-links { gap: 1.4rem; }
}

/* ---------- MOBİL (≤ 720px) ---------- */
@media (max-width: 720px) {
  :root {
    --s-9: 3.5rem;
    --s-10: 4.5rem;
  }

  body { font-size: 15px; }

  .container { padding: 0 var(--s-4); }

  /* Navigasyon — hamburger devreye giriyor */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-night);
    border-bottom: 1px solid var(--c-line-strong);
    flex-direction: column;
    padding: var(--s-5) var(--s-5);
    gap: var(--s-4);
    align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    width: 100%;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-line);
    font-size: 1rem;
  }

  .menu-btn { display: flex; }
  .nav-cta .btn { display: none; }

  .brand { font-size: 1.2rem; }
  .brand-sub { display: none; }

  /* Hero */
  .hero { padding: var(--s-7) 0; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; justify-content: center; min-width: 0; padding: 0.85rem 1rem; font-size: 0.88rem; }

  .hero-panel { padding: 1.3rem; }
  .slot-row {
    grid-template-columns: auto 1fr;
    gap: var(--s-2);
  }
  .slot-tag { grid-column: 2; font-size: 0.6rem; }

  /* Section heads */
  section { padding: var(--s-7) 0; }
  .section-head {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .section-link { align-self: flex-start; }

  /* Fikstür kartları */
  .fixture-card { padding: 1.1rem; }
  .fixture-teams {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .team { font-size: 0.95rem; }
  .team-2 { justify-content: flex-start; flex-direction: row; }
  .vs { display: none; }
  .fixture-time .tr-saat { font-size: 1.5rem; }

  /* WC Stats */
  .wc-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .wc-stat { padding: 1rem 0.5rem; }
  .wc-stat-num { font-size: 1.7rem; }

  /* Program & video kartlar */
  .program-card { padding: 1.4rem; }
  .program-card h3 { font-size: 1.3rem; }

  /* Sponsor */
  .sponsor-pack { padding: 1.2rem; }

  /* Contact */
  .contact-card { padding: 1.6rem; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }

  /* Hero panel ile mobile uyumlu satır */
  .hero-decoration {
    width: 400px;
    height: 400px;
    right: -150px;
    bottom: -250px;
  }
}

/* ---------- KÜÇÜK MOBİL (≤ 420px) ---------- */
@media (max-width: 420px) {
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2rem); }

  .hero-actions .btn { font-size: 0.82rem; padding: 0.78rem 0.9rem; }

  .wc-stats {
    grid-template-columns: 1fr 1fr;
  }

  .cities { gap: 6px; }
  .city-chip { font-size: 0.76rem; padding: 0.45rem 0.85rem; }
}

/* ---------- HAREKETLİ TERCİH ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- BÜYÜK MASA EKRANLAR (≥ 1440px) ---------- */
@media (min-width: 1440px) {
  :root {
    --w-max: 1320px;
  }
}

/* ---------- YAZDIRMA ---------- */
@media print {
  .nav, .footer, .hero-actions, .menu-btn { display: none !important; }
  body { background: white; color: black; }
}