/* ==========================================================================
   Samsun Yıldızlar FK — Özel stiller (Bootstrap 5.3 üzerine)
   Kulüp renkleri: kırmızı · beyaz · siyah
   ========================================================================== */

:root {
  --syf-red: #c8102e;        /* açık zeminde marka kırmızısı */
  --syf-red-light: #ff5964;  /* koyu zeminde okunur kırmızı */
  --syf-red-dark: #8f0b20;   /* hover / bastırılmış durum */
  --syf-black: #101114;
  --syf-black-soft: #1c1e23;
  --syf-gray: #f5f5f7;
  --syf-ink: #17181c;
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--syf-ink);
  padding-top: 72px; /* sabit navbar payı */
}

h1, h2, h3, h4, h5, .display-4, .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  text-decoration: none;
}

/* ---------- Yardımcı sınıflar ---------- */

.bg-ink       { background-color: var(--syf-black) !important; }
.bg-ink-soft  { background-color: var(--syf-black-soft) !important; }
.bg-gray      { background-color: var(--syf-gray) !important; }
.bg-red       { background-color: var(--syf-red) !important; }
.border-red   { border-color: var(--syf-red) !important; }
.text-red     { color: var(--syf-red) !important; }
.text-ink     { color: var(--syf-ink) !important; }

/* Koyu zeminlerde kırmızı metin kontrastı için daha açık ton */
.hero .text-red,
.page-hero .text-red,
.bg-ink .text-red,
.bg-ink-soft .text-red,
.navbar-syf .text-red,
.footer .text-red {
  color: var(--syf-red-light) !important;
}

.btn-red {
  background-color: var(--syf-red);
  border-color: var(--syf-red);
  color: #fff;
  font-weight: 600;
}
.btn-red:hover,
.btn-red:focus {
  background-color: var(--syf-red-dark);
  border-color: var(--syf-red-dark);
  color: #fff;
}

.btn-outline-red {
  border-color: var(--syf-red-light);
  color: var(--syf-red-light);
  font-weight: 600;
}
.btn-outline-red:hover {
  background-color: var(--syf-red-light);
  color: var(--syf-black);
}

.section {
  padding: 4.5rem 0;
}

.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
  padding-bottom: 0.6rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--syf-red);
}
.bg-ink .section-title::after,
.bg-ink-soft .section-title::after {
  background: var(--syf-red-light);
}
.section-title.text-center-line::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Navbar ---------- */

.navbar-syf {
  background-color: rgba(16, 17, 20, 0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid var(--syf-red);
}
.navbar-syf .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
}
.navbar-syf .nav-link:hover,
.navbar-syf .nav-link:focus {
  color: #fff;
}
.navbar-syf .nav-link.active {
  color: var(--syf-red-light);
}

.brand-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--syf-red);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(16, 17, 20, 0.97) 0%, rgba(16, 17, 20, 0.86) 52%, rgba(143, 11, 32, 0.7) 100%),
    repeating-linear-gradient(135deg, #1c1e23 0 42px, #14151a 42px 84px);
}
.hero::after {
  /* kırmızı ışık hüzmesi */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(200, 16, 46, 0.4), transparent 62%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero .lead {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.85);
}

.page-hero {
  background: linear-gradient(115deg, var(--syf-black) 0%, var(--syf-black-soft) 60%, #3a0c15 100%);
  color: #fff;
  padding: 3.5rem 0;
  border-bottom: 3px solid var(--syf-red);
}

/* ---------- Maç kartları ---------- */

.match-card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(16, 17, 20, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.match-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(16, 17, 20, 0.16);
}
.match-card .team {
  font-weight: 600;
  font-size: 0.98rem;
}
.match-score {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--syf-red);
  line-height: 1;
}
.match-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--syf-gray);
  color: var(--syf-ink);
  border: 2px solid rgba(16, 17, 20, 0.12);
}

/* ---------- Oyuncu kartları ---------- */

.player-card {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(16, 17, 20, 0.1);
  transition: transform 0.2s ease;
}
.player-card:hover {
  transform: translateY(-6px);
}
.player-photo {
  position: relative;
  height: 210px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--syf-black) 0%, var(--syf-black-soft) 55%, #4a0d19 100%);
  color: rgba(255, 255, 255, 0.9);
}
.player-initials {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.player-number {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--syf-red-light);
  line-height: 1;
}
.player-card .card-body {
  padding: 1rem 1.1rem 1.2rem;
}
.player-pos {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syf-red);
}

/* ---------- İstatistik şeridi ---------- */

.stat-strip {
  background: var(--syf-black);
  color: #fff;
  border-top: 3px solid var(--syf-red);
  border-bottom: 3px solid var(--syf-red);
}
.stat-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--syf-red-light);
  line-height: 1;
}
.stat-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Haber kartları ---------- */

.news-card {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 18px rgba(16, 17, 20, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 17, 20, 0.16);
}
.news-thumb {
  height: 180px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.4rem;
}
/* Kulüp paletinde tonal varyasyonlar: siyahtan kırmızıya */
.news-thumb.t1 { background: linear-gradient(135deg, #101114, #8f0b20); }
.news-thumb.t2 { background: linear-gradient(135deg, #8f0b20, #d81e2a); }
.news-thumb.t3 { background: linear-gradient(135deg, #2b2d33, #101114); }
.news-thumb.t4 { background: linear-gradient(135deg, #c8102e, #ff5964); }
.news-thumb.t5 { background: linear-gradient(135deg, #3a3d44, #8f0b20); }
.news-thumb.t6 { background: linear-gradient(135deg, #101114, #c8102e); }

.news-date {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ---------- Puan durumu ---------- */

.table-standings thead th {
  background: var(--syf-black);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 0;
  white-space: nowrap;
}
.table-standings tbody tr.highlight {
  background: rgba(200, 16, 46, 0.12);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--syf-red);
}
.form-dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-right: 2px;
}
/* Galibiyet/beraberlik/mağlubiyet renkleri anlamsal — palete dahil değil */
.form-dot.w { background: #16a34a; }
.form-dot.d { background: #9ca3af; }
.form-dot.l { background: #dc2626; }

/* ---------- Footer ---------- */

.footer {
  background: var(--syf-black);
  color: rgba(255, 255, 255, 0.72);
  padding: 3.5rem 0 1.5rem;
  border-top: 3px solid var(--syf-red);
}
.footer h6 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.footer a {
  color: rgba(255, 255, 255, 0.72);
}
.footer a:hover {
  color: var(--syf-red-light);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.875rem;
}
.social-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  transition: background 0.2s ease;
}
.social-btn:hover {
  background: var(--syf-red);
  color: #fff !important;
}

/* ---------- Küçük ekranlar ---------- */

@media (max-width: 991.98px) {
  .navbar-syf .navbar-collapse {
    background: var(--syf-black-soft);
    margin-top: 0.75rem;
    padding: 0.5rem;
    border-radius: 10px;
  }
  .hero {
    min-height: 62vh;
    text-align: center;
  }
  .hero .lead {
    margin-inline: auto;
  }
  .section {
    padding: 3rem 0;
  }
}