/* =========================================================
   Lalapaşaspor – Global Styles (clean)
   Son güncelleme: 2025-10-25
   ========================================================= */

/* ----------------- 1) Tema & Taban --------------------- */
:root{
  --red:#d71920;           /* ana kırmızı */
  --panel-red:#b90f17;     /* kart alt panel kırmızısı */
  --bg:#ffffff;
  --text:#111827;          /* slate-900 */
  --muted:#6b7280;         /* gray-500 */
  --card:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.22);
  --radius:12px;

  --band-gray:#f6f7fb;     /* section gri bant */
  --band-border:#e9edf2;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--red);   /* üst arka plan kırmızı */
  overflow-x:hidden;
}

/* Tipografi kompakt */
html{ font-size:14px; }
@media (max-width:700px){ html{ font-size:14.5px; } }

/* Konteyner & yardımcılar */
.container{ width:min(1100px,92%); margin:0 auto }
.muted{ color:var(--muted) }

/* ----------------- 2) Header / Nav --------------------- */
.site-header{ background:var(--red); color:#fff; position:sticky; top:0; z-index:50 }
.nav-wrapper{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{ display:inline-block; font-weight:800; letter-spacing:.3px; color:#fff; text-decoration:none; font-size:18px }
.logo-link{ display:inline-flex; align-items:center; text-decoration:none; color:#fff }
.logo-img{ height:72px; width:auto; display:block }
@media (max-width:700px){ .logo-img{ height:28px } }

.main-nav ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.main-nav a{ color:#fff; text-decoration:none; font-weight:600; opacity:.95; font-size:.95rem }
.main-nav a:hover,.main-nav a:focus{ opacity:1; text-decoration:underline }
.nav-toggle{ display:none; background:transparent; border:0; color:#fff; font-size:24px }

@media (max-width:700px){
  .main-nav{ position:absolute; inset:60px 0 auto 0; background:var(--red); display:none }
  .main-nav.open{ display:block }
  .main-nav ul{ flex-direction:column; padding:14px }
  .nav-toggle{ display:inline-block }
}

/* ----------------- 3) Home Feature (tek blok) ---------- */
.home-feature{ margin-block:2rem; }
.feature-card{
  display:grid; gap:1.25rem; align-items:stretch;
  grid-template-columns:1fr;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.feature-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9 }
.feature-content{ padding:1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; justify-content:center }
.feature-kicker{ display:inline-block; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; opacity:.7; margin-bottom:.25rem }
.feature-title{ font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.25; margin:0 0 .5rem 0; font-weight:800 }
.feature-summary{ color:#444; line-height:1.55; margin:0 0 1rem 0 }
.feature-actions{ display:flex; gap:.6rem; flex-wrap:wrap }

@media (min-width:900px){
  .feature-card{ grid-template-columns:1.2fr 1fr }
  .feature-content{ padding:1.75rem 1.75rem 1.75rem 1.1rem }
  .feature-media img{ aspect-ratio:auto }
}

/* ----------------- 4) Bölüm Bant Teması ---------------- */
.section{ background:transparent; color:var(--text); padding:36px 0 }
.section h2{ margin:0 0 10px; font-size:1.25rem }
.section.bg-white{ background:#fff; border-top:1px solid #eee }
.section.bg-gray{ background:var(--band-gray); border-top:1px solid var(--band-border) }

/* Full-bleed: #about ve sonrası */
#about, #about ~ .section, #about ~ .site-footer{
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
  padding-left:0; padding-right:0;
}
#about > .container, #about ~ .section > .container, #about ~ .site-footer > .container{
  width:min(1100px,92%); margin:0 auto;
}

/* Gri bantta kart gölgesi */
.section.bg-gray .block,
.section.bg-gray .table-wrap,
.section.bg-gray .about-card,
.section.bg-gray .player-card,
.section.bg-gray .news-card,
.section.bg-gray .fans-card{ box-shadow:0 8px 24px rgba(0,0,0,.07) }

/* ----------------- 5) Ortak Bileşenler ----------------- */
.btn{ display:inline-block; background:#111827; color:#fff; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:700; font-size:.95rem; border:0; cursor:pointer }
.btn.ghost{ background:#fff; color:#111827; border:1px solid #111827 }

.chip-group{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827; padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer }
.chip:hover{ border-color:#cfd3da }
.chip.active{ background:#111827; color:#fff; border-color:#111827 }

label{ display:grid; gap:6px; font-weight:700; font-size:.95rem }
input[type="text"], input[type="email"], input[type="tel"], textarea, .select select, .search input{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; outline:0; background:#fff;
}
input:focus, textarea:focus, .search input:focus, .select select:focus{ border-color:#111827 }
.search input{ min-width:240px }

.media-wrap{ position:relative; aspect-ratio:16/9; background:#111; overflow:hidden }
.media-wrap img, .media-wrap video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .35s ease }
.card-link{ display:block; color:inherit; text-decoration:none; height:100% }
.news-card:hover .media-wrap img{ transform:scale(1.06) }

.table-wrap{ background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden }

.badge{ background:#111827; color:#fff; border-radius:999px; padding:5px 8px; font-weight:800; font-size:.8rem }
.badge-ha{ display:inline-block; border-radius:999px; padding:2px 8px; font-size:.8rem; font-weight:800 }
.badge-home{ background:#16a34a1a; color:#166534; border:1px solid #16a34a4d }
.badge-away{ background:#1d4ed81a; color:#1e40af; border:1px solid #1d4ed84d }

/* ----------------- 6) Hakkımızda (3 kart, başlık bandı) */
.about-cards{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .about-cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){  .about-cards{ grid-template-columns:1fr } }

.about-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
}

/* Üst başlık bandı – kulüp renkleri varyantı (lacivert-hissetimli) */
.about-card .card-head{
  /* İstersen kulüp kırmızı tonları: linear-gradient(180deg,#9d1319 0%, #b90f17 100%) */
  background: linear-gradient(180deg, #0e1c3d 0%, #132b63 100%);
  color:#fff; padding:18px;
  display:flex; align-items:center; justify-content:space-between; min-height:110px;
}
.about-card .head-title small{ display:block; font-size:.85rem; opacity:.85; margin-bottom:6px; font-weight:600 }
.about-card .head-title h3{ margin:0; font-size:1.15rem; font-weight:800; letter-spacing:.2px }
.about-card .head-logo{ height:40px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)) }

/* Alt gövde */
.about-card .card-body{ padding:18px }
.about-card .card-body .lead{ color:#374151; margin:6px 0 12px }

/* Küçük bilgi kutuları */
.kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; list-style:none; padding:0; margin:0 0 10px }
.kv li{
  background:#f6f7fb; border:1px solid #eef0f4; border-radius:10px;
  padding:10px; display:flex; flex-direction:column; gap:4px; text-align:center
}
.kv li span{ font-size:.85rem; color:#6b7280 }
.kv li strong{ font-size:1rem }

/* Düz liste & timeline */
.plain{ list-style:none; padding:0; margin:0 }
.plain li{ padding:6px 0; border-bottom:1px solid #eef0f4 }
.plain li:last-child{ border-bottom:0 }

.timeline{ margin-top:12px }
.tl{ list-style:none; padding:0; margin:0; border-left:3px solid #e5e7eb }
.tl li{ position:relative; padding:10px 0 10px 14px }
.tl li::before{
  content:""; position:absolute; left:-7px; top:18px; width:10px; height:10px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px #fff
}
.tl .t{ display:inline-block; font-weight:800; margin-right:6px; color:#111827 }

/* ----------------- 7) Kadro --------------------------- */
.squad .muted{ color:#6b7280 }
.squad-toolbar{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  margin:10px 0 16px; flex-wrap:wrap
}
/* === Kadro: 6 kolon === */
.squad-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(6,1fr);
}

/* Kademeli daralma */
@media (max-width:1200px){ .squad-grid{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:1100px){ .squad-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:900px){  .squad-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:680px){  .squad-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){  .squad-grid{ grid-template-columns:1fr } }

/* About card: başlığın altında görsel alanı */
.about-card .card-media{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
}
.about-card .card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .35s ease;
}
.about-card:hover .card-media img{
  transform:scale(1.06);
}
.about-card .card-media::after{
  /* küçük bir parlama/overlay hover efekti (isteğe bağlı) */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.12) 100%);
  pointer-events:none;
}


.player-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06); display:flex; flex-direction:column
}
.player-photo{ aspect-ratio:4/3; background:#111; position:relative; overflow:hidden }
.player-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .3s }
.player-card:hover .player-photo img{ transform:scale(1.06) }
.player-initials{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:900;
  font-size:42px; letter-spacing:1px; background:linear-gradient(135deg,#bd1118,#d71920)
}

.player-meta{ padding:12px 14px; display:grid; gap:6px }
.player-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.player-name{ margin:0; font-size:1rem }
.player-pos{ font-weight:700; color:#6b7280; font-size:.85rem }
.player-extra{ display:flex; gap:10px; color:#6b7280; font-size:.9rem }

/* ----------------- 8) Fikstür & Puan Durumu ----------- */
.fixtures .muted{ color:#6b7280 }
.fixture-toolbar{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  margin:10px 0 16px; flex-wrap:wrap
}
.fixture-table, .standings-table{ width:100%; border-collapse:collapse }
.fixture-table th, .fixture-table td,
.standings-table th, .standings-table td{
  padding:12px 14px; border-bottom:1px solid #eef0f4; text-align:left; font-size:.95rem
}
.fixture-table thead th, .standings-table thead th{ background:#f8fafc; font-weight:800 }
.fixture-table tbody tr:hover, .standings-table tbody tr:hover{ background:#fafafa }

.standings{ margin-top:20px }
.standings-table td:nth-child(1){ width:42px }

/* ----------------- 9) Haberler ------------------------ */
.news .muted{ color:#6b7280 }
.news-toolbar{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  margin:10px 0 16px; flex-wrap:wrap
}
.news-grid{ display:grid; gap:22px; grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .news-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr } }

.news-card{
  position:relative; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 8px 24px rgba(0,0,0,.12); transition:transform .2s ease
}
.news-card:hover{ transform:translateY(-2px) }
.live-badge{
  position:absolute; top:12px; left:12px; padding:8px 12px; border-radius:999px;
  background:#e40000; color:#fff; font-weight:800; font-size:.8rem; line-height:1; box-shadow:var(--shadow)
}
.card-panel{ background:var(--panel-red); color:#fff; padding:16px }
.card-kicker{ display:block; margin:0 0 6px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; font-size:.8rem; color:#fff }
.card-title{ margin:0 0 8px; color:#fff; font-size:1rem; line-height:1.25 }
.card-time{ font-size:.8rem; color:rgba(255,255,255,.85) }

.loadmore-wrap{ display:flex; justify-content:center; margin-top:16px }

/* Haber Modal */
.news-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:200 }
.news-modal[aria-hidden="false"]{ display:flex }
.news-modal_backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }
.news-modal_card{
  position:relative; z-index:1; background:#fff; color:#111827; max-width:960px; width:92%;
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden
}
.news-modal_close{
  position:absolute; top:10px; right:12px; border:0; background:#111827; color:#fff;
  width:34px; height:34px; border-radius:999px; font-size:20px; cursor:pointer
}
.news-modal_header{ padding:18px 18px 0 }
.news-modal_header h3{ margin:0 0 6px }
.news-meta{ margin:0 0 12px; color:#6b7280; font-size:.9rem }
.news-modal_media img{ width:100%; display:block; object-fit:cover; max-height:460px }
.news-modal_body{ padding:18px; line-height:1.6 }
.news-modal_body p{ margin:0 0 12px }
.news-modal_body h4{ margin:16px 0 8px }
.news-modal_body ul{ padding-left:20px }

/* ----------------- 10) Taraftar ----------------------- */
.fans .muted{ color:#6b7280 }
.fans-grid{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr) }
@media (max-width:920px){ .fans-grid{ grid-template-columns:1fr } }
.fans-card h3{ margin:0 0 10px }

.chants{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.chant{
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border:1px solid #eef0f4; border-radius:12px; padding:10px
}
.chant .title{ font-weight:800 }
.chant .play{
  appearance:none; border:0; cursor:pointer; border-radius:999px;
  width:36px; height:36px; display:grid; place-items:center;
  background:#111827; color:#fff; font-weight:900; font-size:14px
}
.chant .meta{ color:#6b7280; font-size:.85rem }

.poll{ display:grid; gap:10px }
.poll .opt{
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border:1px solid #eef0f4; border-radius:12px; padding:10px
}
.poll .opt input{ accent-color:#111827 }
.poll .actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.poll .btn{ background:#111827; color:#fff; border:0; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer }
.bar{ height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden }
.bar > span{ display:block; height:100%; background:#b90f17 }
.poll small{ color:#6b7280; font-size:.85rem }

.rules{ margin:0; padding-left:18px; line-height:1.6 }
.faq .item{ border:1px solid #eef0f4; border-radius:12px; background:#fff; margin-bottom:10px; overflow:hidden }
.faq .q{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; font-weight:800; cursor:pointer }
.faq .a{ padding:0 14px 12px 14px; color:#374151; display:none }
.faq .item.open .a{ display:block }

/* ----------------- 11) İletişim ----------------------- */
.contact-grid{ display:grid; gap:18px; grid-template-columns:1.2fr 2fr }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }

.contact-card h3{ margin:0 0 10px }
.contact-list{ list-style:none; margin:0 0 12px; padding:0 }
.contact-list li{ padding:6px 0; border-bottom:1px solid #eef0f4 }
.contact-list li:last-child{ border-bottom:0 }
.sep{ border:0; border-top:1px solid #eef0f4; margin:12px 0 }

.contact-form-wrap h3{ margin:0 0 10px }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:12px }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr } }
.actions{ display:flex; gap:12px; align-items:center; margin-top:8px }
.form-msg{ margin-top:12px; padding:10px 12px; border-radius:10px; font-weight:700 }
.form-msg.ok{ background:#ecfdf5; color:#065f46; border:1px solid #10b981 }
.form-msg.err{ background:#fef2f2; color:#991b1b; border:1px solid #ef4444 }

/* ----------------- 12) Footer ------------------------- */
.site-footer{ background:#fff; margin-top:40px }
.site-footer.gray{ background:var(--band-gray); border-top:1px solid var(--band-border) }
.site-footer .container{ padding:18px 0 }

/* ----------------- 13) Responsive Genel --------------- */
@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr) }
}