/* ==========================================================================
   TAKTİK PANO — Tasarım Sistemi (Design Tokens)
   Konsept: Soyunma odası taktik tahtası. Koyu saha yeşili zemin, tebeşir
   çizgileri, oyun kurma turuncusu vurgu ve skorbord tipografisi.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* --- Renk Paleti --- */
  --pitch-deep:   #0F3A2C;  /* Ana zemin: derin saha yeşili */
  --pitch-mid:    #1C5C42;  /* İkincil yüzey / panel */
  --pitch-line:   #F2EFE6;  /* Tebeşir beyazı: birincil metin */
  --ink:          #081712;  /* Neredeyse siyah: koyu panel / kart */
  --card-surface: #123B2C;  /* Kart zemini, mid'den biraz farklı katman */
  --accent-cone:  #E8672C;  /* Antrenman konisi turuncusu: CTA / vurgu */
  --accent-assist:#2E9E8B;  /* Asist teali: pozitif / artı yönler */
  --accent-card:  #C0392B;  /* Kırmızı kart: uyarı / eksi yönler */
  --chalk-dim:    #8FB39F;  /* Soluk tebeşir: ikincil metin, çizgiler */
  --line-hair:    rgba(242,239,230,0.14);

  /* --- Tipografi --- */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- Bootstrap değişken eşlemesi --- */
  --bs-body-bg: var(--pitch-deep);
  --bs-body-color: var(--pitch-line);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--line-hair);
  --bs-primary: var(--accent-cone);
  --bs-primary-rgb: 232,103,44;
  --bs-success: var(--accent-assist);
  --bs-danger: var(--accent-card);
  --bs-link-color: var(--accent-cone);
  --bs-link-hover-color: #ff7f42;
}

html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(circle at 50% -10%, rgba(242,239,230,0.05), transparent 55%),
    repeating-linear-gradient(90deg, rgba(242,239,230,0.025) 0 1px, transparent 1px 120px),
    var(--pitch-deep);
  min-height:100vh;
}

::selection{ background:var(--accent-cone); color:var(--ink); }

/* Kaydırma çubuğu */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--pitch-deep); }
::-webkit-scrollbar-thumb{ background:var(--pitch-mid); border-radius:6px; }

/* --- Odak görünürlüğü (erişilebilirlik) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-cone);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ==========================================================================
   TİPOGRAFİ
   ========================================================================== */

h1,h2,h3,h4,h5,h6, .display-face{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing:0.02em;
  color: var(--pitch-line);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--accent-cone);
}

.stat-num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-chalk-dim{ color: var(--chalk-dim) !important; }
.text-assist{ color: var(--accent-assist) !important; }
.text-card{ color: var(--accent-card) !important; }

/* ==========================================================================
   ÜST SKORBORD BARI (Navbar)
   ========================================================================== */

.scoreboard-nav{
  background: var(--ink);
  border-bottom: 1px solid var(--line-hair);
}

.scoreboard-nav .brand-mark{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:0.04em;
  color: var(--pitch-line);
  font-size:1.25rem;
}
.scoreboard-nav .brand-mark span{ color: var(--accent-cone); }

.scoreboard-nav .nav-link{
  font-family: var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color: var(--chalk-dim);
  padding:0.5rem 0.9rem;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.scoreboard-nav .nav-link:hover,
.scoreboard-nav .nav-link.active{
  color: var(--pitch-line);
  border-bottom-color: var(--accent-cone);
}

.lang-switch .btn{
  font-family: var(--font-mono);
  font-size:0.75rem;
  padding:0.25rem 0.55rem;
  border:1px solid var(--line-hair);
  color: var(--chalk-dim);
  background:transparent;
}
.lang-switch .btn.active,
.lang-switch .btn:hover{
  color: var(--ink);
  background: var(--accent-cone);
  border-color: var(--accent-cone);
}

/* ==========================================================================
   KARTLAR / PANELLER
   ========================================================================== */

.panel{
  background: var(--card-surface);
  border:1px solid var(--line-hair);
  border-radius:4px;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.9rem 1.1rem;
  border-bottom:1px solid var(--line-hair);
}

.panel-head .panel-title{
  font-family: var(--font-display);
  font-size:1rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  margin:0;
}

.panel-body{ padding:1.1rem; }

.btn-cone{
  background: var(--accent-cone);
  border-color: var(--accent-cone);
  color: var(--ink);
  font-family: var(--font-mono);
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.04em;
  font-weight:600;
}
.btn-cone:hover{ background:#ff7f42; border-color:#ff7f42; color:var(--ink); }

.btn-outline-chalk{
  border:1px solid var(--line-hair);
  color: var(--pitch-line);
  font-family: var(--font-mono);
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.btn-outline-chalk:hover{ background:var(--pitch-mid); color:var(--pitch-line); border-color:var(--chalk-dim); }

/* ==========================================================================
   ANA SAYFA — İMZA ELEMENTİ: FORMASYON HARİTASI NAVİGASYONU
   ========================================================================== */

.formation-hero{
  position:relative;
  padding:2.5rem 1rem;
}

.formation-pitch{ width:100%; height:auto; }

.formation-node{ cursor:pointer; }
.formation-node .node-circle{
  fill: var(--card-surface);
  stroke: var(--chalk-dim);
  stroke-width:1.5;
  transition: fill .18s ease, stroke .18s ease, transform .18s ease;
  transform-origin:center;
}
.formation-node:hover .node-circle,
.formation-node:focus .node-circle{
  fill: var(--accent-cone);
  stroke: var(--accent-cone);
  transform:scale(1.08);
}
.formation-node .node-label{
  font-family: var(--font-mono);
  font-size:11px;
  fill: var(--pitch-line);
  text-transform:uppercase;
  letter-spacing:0.04em;
  pointer-events:none;
}
.formation-node .node-num{
  font-family: var(--font-display);
  font-size:15px;
  fill: var(--ink);
  font-weight:700;
  pointer-events:none;
}
.formation-node:hover .node-num{ fill: var(--ink); }

/* ==========================================================================
   MİNİ SAHA / KADRO DİZİLİMİ (Maç Öncesi sayfası)
   ========================================================================== */

.lineup-pitch-wrap{
  background: var(--pitch-mid);
  border:1px solid var(--line-hair);
  border-radius:4px;
  padding:0.75rem;
}
.lineup-pitch{ width:100%; height:auto; }

.player-token{ cursor:grab; }
.player-token .token-circle{
  fill: var(--ink);
  stroke: var(--pitch-line);
  stroke-width:1.5;
}
.player-token.is-key .token-circle{ stroke: var(--accent-cone); stroke-width:2; }
.player-token .token-num{
  font-family: var(--font-mono);
  font-size:11px;
  fill: var(--pitch-line);
  text-anchor:middle;
}
.player-token .token-name{
  font-family: var(--font-mono);
  font-size:8.5px;
  fill: var(--chalk-dim);
  text-anchor:middle;
  text-transform:uppercase;
}

/* ==========================================================================
   SEKME (TAB) SİSTEMİ — vanilya JS ile kontrol edilir
   ========================================================================== */

.tab-strip{
  display:flex;
  gap:0.25rem;
  border-bottom:1px solid var(--line-hair);
  overflow-x:auto;
}
.tab-strip button{
  background:none;
  border:none;
  padding:0.7rem 1rem;
  font-family: var(--font-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color: var(--chalk-dim);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.tab-strip button.active{
  color: var(--pitch-line);
  border-bottom-color: var(--accent-cone);
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ==========================================================================
   ARTI / EKSİ LİSTELERİ (Rakip analizine göre)
   ========================================================================== */

.trait-list{ list-style:none; padding:0; margin:0; }
.trait-list li{
  display:flex;
  gap:0.6rem;
  padding:0.5rem 0;
  border-bottom:1px dashed var(--line-hair);
  font-size:0.92rem;
}
.trait-list li:last-child{ border-bottom:none; }
.trait-marker{
  font-family: var(--font-mono);
  font-weight:700;
  flex:0 0 auto;
}

/* ==========================================================================
   ZAMAN ÇİZELGESİ — Kilit anlar
   ========================================================================== */

.key-moment{
  display:flex;
  gap:1rem;
  padding:0.85rem 0;
  border-bottom:1px solid var(--line-hair);
}
.key-moment:last-child{ border-bottom:none; }
.key-moment .minute{
  font-family: var(--font-mono);
  font-weight:700;
  color: var(--accent-cone);
  flex:0 0 3rem;
}

/* ==========================================================================
   BEKLEME DURUMU / BOŞ EKRAN
   ========================================================================== */

.empty-state{
  text-align:center;
  padding:3rem 1rem;
  color: var(--chalk-dim);
}
.empty-state .empty-icon{ font-size:2.2rem; margin-bottom:0.75rem; opacity:0.6; }

/* ==========================================================================
   YARDIMCI
   ========================================================================== */

.divider-hair{ border-top:1px solid var(--line-hair); margin:1.5rem 0; }
.badge-pos{
  font-family: var(--font-mono);
  font-size:0.68rem;
  padding:0.15rem 0.4rem;
  border:1px solid var(--line-hair);
  border-radius:3px;
  color: var(--chalk-dim);
}