@charset "UTF-8";
/* =============================================================================
   GMG KASTAMONUSPOR CRM — Tasarım sistemi
   -----------------------------------------------------------------------------
   Görsel yön: "Kadro Dosyası". Kulübün kendi malzemesinden türetildi —
   armanın sert siyah konturu, kırmızı-siyah forma çizgisi, maç kağıdı
   tipografisi ve lisans kartı düzeni.

   Bilinçli kararlar:
   · Köşe yarıçapı yok (en fazla 2px) ve gölge yok. Derinlik siyah şerit ve
     saç teli çizgilerle kurulur. Yuvarlak köşeli/gölgeli kart yığını her
     yönetim panelinde var; arma dik açılı, arayüz de öyle.
   · Kırmızı yalnızca DOLU blok olarak kullanılır (şerit, aktif sekme altı,
     birincil düğme). Yumuşak kırmızı tonlamalar yok — baskı gibi.
   · İki ses: başlıklar ve isimler ağır büyük harf; sayılar, mevki kodları,
     tarih ve tutarlar tek aralıklı (mono). Maç kağıdı ve skorboard dili.
   · Dış kaynak yok. CSP harici istek engeller ve derleme adımı yok; bu yüzden
     yazı tipi indirilmez, karakter ağırlık/aralık işçiliğinden gelir.
   ========================================================================== */

/* ---------------------------------------------------------------- jetonlar */
:root {
  /* Renk — armadan örneklendi (kastamonu-logo.jpg) */
  --murekkep:      #0B0B0C;   /* armanın siyah konturu */
  --murekkep-70:   #4A4A4E;
  --murekkep-45:   #77777C;
  --kagit:         #FFFFFF;
  --saha:          #F1F1EF;   /* sayfa zemini */
  --saha-koyu:     #E4E4E1;
  --hat:           #DCDCD8;   /* saç teli çizgi */
  --hat-koyu:      #C2C2BD;

  --kirmizi:       #ED1B24;   /* armanın kırmızısı — tam örnek */
  --kirmizi-bas:   #C1141B;   /* basılı/üzerinde */
  --kirmizi-yazi:  #B3111A;   /* küçük metin için (beyaz üzerinde 6:1) */
  --kirmizi-zemin: #FDECEC;

  --uyari:         #9A5B00;
  --uyari-zemin:   #FFF4E0;
  --iyi:           #0F6B38;
  --iyi-zemin:     #E7F5EC;
  --bilgi:         #1F4E8C;
  --bilgi-zemin:   #EAF0F8;

  --sari-kart:     #F2C200;
  --kirmizi-kart:  #ED1B24;

  /* Tipografi — iki rol: ağır grotesk + tek aralıklı veri sesi */
  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  --olcek-xs: 0.6875rem;  /* 11px — etiket */
  --olcek-sm: 0.8125rem;  /* 13px — yardımcı */
  --olcek-md: 0.9375rem;  /* 15px — gövde */
  --olcek-lg: 1.125rem;   /* 18px */
  --olcek-xl: 1.5rem;     /* 24px */
  --olcek-2xl: 2rem;      /* 32px */
  --olcek-3xl: 2.75rem;   /* 44px — oyuncu adı */

  /* Aralık — 4px tabanlı */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-5: 1.5rem;
  --bosluk-6: 2rem;
  --bosluk-7: 3rem;

  /* Sayfa kabı. Geniş ekranda veri tabloları nefes alsın diye yüksek; alanlar
     ve serbest metin bununla birlikte uzamasın diye kendi ölçü sınırlarına
     sahip (bkz. .girdi/.metin ve .yorum__metin). */
  --genislik: 1800px;
  --rail-h: 56px;
}

/* ------------------------------------------------------------------ temel */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--saha);
  color: var(--murekkep);
  font: 400 var(--olcek-md)/1.55 var(--yazi);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--kirmizi-yazi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--kirmizi);
  outline-offset: 2px;
}

::selection { background: var(--kirmizi); color: #fff; }

/* Klavye kullanıcıları için içeriğe atlama */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--murekkep); color: #fff; padding: var(--bosluk-3) var(--bosluk-4);
  font-weight: 700;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- tipografi rolü */
/* Maç kağıdı sesi: ağır, sıkı, büyük harf */
.baslik {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.etiket {
  font-size: var(--olcek-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--murekkep-45);
}
.veri { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sessiz { color: var(--murekkep-45); }
.sag { text-align: right; }

/* ================================================================== ÜST RAY */
.rail {
  background: var(--murekkep);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.rail__in {
  max-width: var(--genislik);
  margin: 0 auto;
  height: var(--rail-h);
  padding: 0 var(--bosluk-4);
  display: flex;
  align-items: center;
  gap: var(--bosluk-5);
}
.rail__marka {
  display: flex; align-items: center; gap: var(--bosluk-3);
  color: #fff; text-decoration: none; flex: none;
}
.rail__marka:hover { text-decoration: none; }
.rail__arma {
  width: 34px; height: 34px; object-fit: contain;
  background: #fff; padding: 2px;
}
.rail__ad {
  font-size: var(--olcek-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
}
.rail__ad span { display: block; font-weight: 500; letter-spacing: 0.14em; color: #9A9A9E; font-size: 10px; }

.rail__nav { display: flex; gap: var(--bosluk-1); margin-left: auto; }
.rail__link {
  color: #C9C9CC;
  padding: var(--bosluk-2) var(--bosluk-3);
  font-size: var(--olcek-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.rail__link:hover { color: #fff; text-decoration: none; }
.rail__link.is-active { color: #fff; border-bottom-color: var(--kirmizi); }

.rail__user {
  display: flex; align-items: center; gap: var(--bosluk-3);
  padding-left: var(--bosluk-4);
  border-left: 1px solid #2A2A2E;
  flex: none;
}
.rail__kim { line-height: 1.2; text-align: right; color: inherit; }
.rail__kim:hover { text-decoration: none; color: #fff; }
.rail__cikis {
  border-color: #3A3A3E;
  background: transparent;
  color: #C9C9CC;
  padding: 0 var(--bosluk-2);
  min-width: 34px;
}
.rail__cikis:hover { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.rail__kim b { display: block; font-size: var(--olcek-sm); font-weight: 700; }
.rail__kim span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8A8E; }

/* Forma çizgisi — kırmızı/siyah. Sayfadaki tek "süs" ve kulübün kendi işareti.
   Üstteki beyaz ince şerit formadaki biye gibi çalışır; onsuz siyah bloklar
   siyah rayın içinde kaybolur ve çizgi kesikli bir alt çizgi gibi görünür. */
.serit {
  height: 6px;
  border-top: 2px solid var(--kagit);
  background: repeating-linear-gradient(
    90deg,
    var(--kirmizi) 0, var(--kirmizi) 20px,
    var(--murekkep) 20px, var(--murekkep) 40px
  );
}

/* ================================================================== DÜZEN */
.wrap {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: var(--bosluk-6) var(--bosluk-4) var(--bosluk-7);
}

.sayfa-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
  margin-bottom: var(--bosluk-5);
}
.sayfa-bas__yazi h1 {
  font-size: var(--olcek-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.05;
}
.sayfa-bas__yazi p { color: var(--murekkep-45); font-size: var(--olcek-sm); margin-top: var(--bosluk-1); }
.sayfa-bas__islem { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; }

.izgara { display: grid; gap: var(--bosluk-4); }
.izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.yigin { display: grid; gap: var(--bosluk-4); }
.yigin--sik { gap: var(--bosluk-2); }

/* =================================================================== KART */
.kart {
  background: var(--kagit);
  border: 1px solid var(--hat);
}
.kart__bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border-bottom: 1px solid var(--hat);
  background: #FAFAF9;
}
.kart__bas h2, .kart__bas h3 {
  font-size: var(--olcek-xs);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.kart__govde { padding: var(--bosluk-4); }
.kart__govde--dar { padding: var(--bosluk-3); }
.kart__alt {
  padding: var(--bosluk-3) var(--bosluk-4);
  border-top: 1px solid var(--hat);
  background: #FAFAF9;
  display: flex; gap: var(--bosluk-2); align-items: center; flex-wrap: wrap;
}

/* Katlanabilir kart — <details>/<summary>, JavaScript gerektirmez.
   Başlığın sağındaki + / − işareti ::after ile üretilir; CSP satır içi stile
   izin vermiyor. */
/* .kart__bas space-between kullanıyor; üçüncü öğe (işaret) eklenince başlık ve
   etiket ortaya savruluyordu. Başlık grubu solda kalsın, işaret sağa yaslansın. */
.kart--katlanir > summary { cursor: pointer; list-style: none; justify-content: flex-start; }
.kart--katlanir > summary::-webkit-details-marker { display: none; }
.kart--katlanir > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--olcek-lg);
  line-height: 1;
  color: var(--murekkep-45);
}
.kart--katlanir[open] > summary::after { content: "\2212"; }
.kart--katlanir > summary:hover { background: var(--saha-koyu); }
.kart--katlanir > summary:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: -2px; }

/* ================================================================= DÜĞMELER */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  padding: 0 var(--bosluk-4);
  height: 38px;
  border: 1px solid var(--murekkep);
  background: var(--kagit);
  color: var(--murekkep);
  font-size: var(--olcek-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.dugme:hover { background: var(--murekkep); color: #fff; text-decoration: none; }

.dugme--birincil { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme--birincil:hover { background: var(--kirmizi-bas); border-color: var(--kirmizi-bas); color: #fff; }

.dugme--sessiz { border-color: var(--hat-koyu); color: var(--murekkep-70); }
.dugme--sessiz:hover { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }

.dugme--tehlike { border-color: var(--kirmizi-yazi); color: var(--kirmizi-yazi); }
.dugme--tehlike:hover { background: var(--kirmizi-yazi); border-color: var(--kirmizi-yazi); color: #fff; }

.dugme--kucuk { height: 30px; padding: 0 var(--bosluk-3); font-size: 10px; }
.dugme--blok { width: 100%; }
.dugme[disabled], .dugme[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ================================================================== FORMLAR */
/* Resmi form dili: etiket üstte küçük büyük harf, alan alt kenarı kalın. */
.alan { display: block; margin-bottom: var(--bosluk-4); }
.alan__etiket {
  display: block;
  font-size: var(--olcek-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-70);
  margin-bottom: var(--bosluk-2);
}
.alan__etiket .zorunlu { color: var(--kirmizi-yazi); margin-left: 2px; }

.girdi, .secim, .metin {
  display: block;
  width: 100%;
  padding: 0 var(--bosluk-3);
  height: 40px;
  background: var(--kagit);
  border: 1px solid var(--hat-koyu);
  border-bottom-width: 2px;
  border-radius: 0;
  transition: border-color .12s linear;
}
.metin { height: auto; min-height: 96px; padding: var(--bosluk-3); resize: vertical; line-height: 1.6; }

/* Ölçü sınırı. Geniş ekranda kap 1800px'e çıkıyor; sınır olmasa 12 karakterlik
   bir ad 700px'lik kutuda, sözleşme şartları 1400px'lik metin alanında dururdu.
   Sınır ızgarada değil girdinin kendisinde: bazı alanlar .form-izgara dışında,
   doğrudan .kart__govde içine konuyor. */
.girdi, .secim { max-width: 30rem; }
.metin { max-width: 46rem; }
.girdi:hover, .secim:hover, .metin:hover { border-color: var(--murekkep-45); }
.girdi:focus, .secim:focus, .metin:focus {
  outline: 2px solid var(--kirmizi);
  outline-offset: 1px;
  border-color: var(--murekkep);
}
.girdi::placeholder, .metin::placeholder { color: #A8A8AC; }
.girdi[readonly], .metin[readonly] { background: var(--saha); color: var(--murekkep-70); }

.secim {
  appearance: none;
  padding-right: var(--bosluk-6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--murekkep) 50%),
    linear-gradient(135deg, var(--murekkep) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Tutar ve tarih alanları veri sesiyle yazılır */
.girdi--veri { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.alan__ipucu { display: block; font-size: var(--olcek-xs); color: var(--murekkep-45); margin-top: var(--bosluk-2); }
.alan__hata {
  display: block;
  font-size: var(--olcek-xs);
  font-weight: 600;
  color: var(--kirmizi-yazi);
  margin-top: var(--bosluk-2);
}
.alan.is-hatali .girdi,
.alan.is-hatali .secim,
.alan.is-hatali .metin { border-color: var(--kirmizi); }

/* Salt okunur gösterim (yetkisi olmayan roller için) */
.deger {
  min-height: 40px;
  display: flex; align-items: center;
  padding: var(--bosluk-2) 0;
  border-bottom: 1px solid var(--hat);
  font-weight: 500;
}
.deger--cok { display: block; white-space: pre-line; line-height: 1.7; }
.deger:empty::before { content: "—"; color: var(--murekkep-45); }

/* Onay/seçim kutuları — mevki çoklu seçimi için blok etiketler */
.secenekler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.secenek {
  position: relative;
  display: inline-flex;
}
.secenek input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.secenek span {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border: 1px solid var(--hat-koyu);
  background: var(--kagit);
  font-size: var(--olcek-sm);
  font-weight: 600;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.secenek input:hover + span { border-color: var(--murekkep-45); }
.secenek input:checked + span {
  background: var(--murekkep); border-color: var(--murekkep); color: #fff;
}
.secenek input:focus-visible + span { outline: 2px solid var(--kirmizi); outline-offset: 2px; }

/* Form ızgarası */
.form-izgara { display: grid; gap: 0 var(--bosluk-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tam-satir { grid-column: 1 / -1; }

/* Formun kaydet çubuğu — uzun formlarda alta yapışır */
.kaydet-cubugu {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--kagit);
  border-top: 2px solid var(--murekkep);
  margin-top: var(--bosluk-4);
}
.kaydet-cubugu__bilgi { margin-right: auto; font-size: var(--olcek-xs); color: var(--murekkep-45); }

/* ================================================================= ROZETLER */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--bosluk-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.rozet--notr    { border-color: var(--hat-koyu); color: var(--murekkep-70); background: var(--saha); }
.rozet--bilgi   { border-color: #B8CBE4; color: var(--bilgi); background: var(--bilgi-zemin); }
.rozet--uyari   { border-color: #E8C98C; color: var(--uyari); background: var(--uyari-zemin); }
.rozet--tehlike { border-color: #F3B4B7; color: var(--kirmizi-yazi); background: var(--kirmizi-zemin); }
.rozet--basari  { border-color: #A8D5BC; color: var(--iyi); background: var(--iyi-zemin); }
.rozet--dolu    { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }

/* Mevki bloğu — kadro kağıdındaki kısaltma. Dolu, dik açılı, tek aralıklı. */
.mevki {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px;
  padding: 0 6px;
  background: var(--murekkep);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mevki--alternatif { background: transparent; color: var(--murekkep-70); border: 1px solid var(--hat-koyu); }
.mevki--bos { background: var(--saha-koyu); color: var(--murekkep-45); }

/* Kart işaretleri — gerçek kart oranında dikdörtgen */
.kart-isaret {
  display: inline-block;
  width: 12px; height: 17px;
  vertical-align: -3px;
  border: 1px solid rgba(0,0,0,.35);
}
.kart-isaret--sari { background: var(--sari-kart); }
.kart-isaret--kirmizi { background: var(--kirmizi-kart); }

/* ================================================================== TABLO */
.tablo-sarma { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo th {
  text-align: left;
  padding: var(--bosluk-2) var(--bosluk-3);
  font-size: var(--olcek-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-45);
  border-bottom: 2px solid var(--murekkep);
  white-space: nowrap;
}
.tablo td {
  padding: var(--bosluk-3);
  border-bottom: 1px solid var(--hat);
  vertical-align: middle;
}
.tablo tbody tr { position: relative; }
.tablo tbody tr:hover { background: #FBFBFA; }
.tablo th.sag, .tablo td.sag { text-align: right; }
.tablo td.veri, .tablo th.veri { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Serbest metin sütunu geniş ekranda kalan boşluğu tek başına yutmasın. */
.tablo td.not { max-width: 22rem; }

/* Taksit satırları — borcun altında, ona bağlı olduğu belli olacak şekilde. */
.tablo tr.taksit td { border-bottom: 1px dotted var(--hat); padding-top: 2px; padding-bottom: 2px; }
.tablo tr.taksit { font-size: var(--olcek-sm); color: var(--murekkep-70); }
.tablo tr.taksit:hover { background: transparent; }
.taksit__ok { color: var(--murekkep-45); margin-right: var(--bosluk-2); }

/* Kadro listesi — satırın tamamı bağlantı, solda kırmızı işaret açılır */
.kadro tbody tr { cursor: pointer; }
.kadro tbody tr td:first-child { position: relative; padding-left: var(--bosluk-4); }
.kadro tbody tr td:first-child::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--kirmizi);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .14s ease-out;
}
.kadro tbody tr:hover td:first-child::before,
.kadro tbody tr:focus-within td:first-child::before { transform: scaleY(1); }

.oyuncu-hucre { display: flex; align-items: center; gap: var(--bosluk-3); }
.oyuncu-hucre__ad { font-weight: 700; letter-spacing: -0.01em; }
.oyuncu-hucre__ad a { color: var(--murekkep); }
.oyuncu-hucre__alt { font-size: var(--olcek-xs); color: var(--murekkep-45); }

/* ------------------------------------------------------- fotoğraf yükleme */
.foto-yukle { display: flex; align-items: flex-start; gap: var(--bosluk-4); }
.foto-yukle > div { flex: 1; min-width: 0; }
.foto-yukle__onizleme {
  flex: none;
  width: 96px; height: 128px;
  border: 1px solid var(--hat-koyu);
  background: var(--saha-koyu) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.foto-yukle__onizleme img { width: 100%; height: 100%; object-fit: cover; }
.foto-yukle__onizleme .avatar--bos {
  width: 100%; height: 100%; border: 0; background: transparent;
  font-size: 1.5rem;
}
.foto-yukle__onizleme.is-onizleme img,
.foto-yukle__onizleme.is-onizleme .avatar--bos { display: none; }
.foto-yukle input[type="file"] { height: auto; padding: var(--bosluk-2); }
.foto-sil { margin-top: var(--bosluk-3); }

.alan--dugme { display: flex; align-items: flex-end; }
.alan--dugme .dugme { height: 40px; }

.tehlike-bolge { margin-top: var(--bosluk-6); border-color: #F3B4B7; }
.tehlike-bolge .kart__bas { background: var(--kirmizi-zemin); border-bottom-color: #F3B4B7; color: var(--kirmizi-yazi); }

/* =================================================================== AVATAR */
.avatar {
  width: 40px; height: 40px;
  flex: none;
  object-fit: cover;
  background: var(--saha-koyu);
  border: 1px solid var(--hat-koyu);
}
.avatar--bos {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--murekkep-45);
}
.avatar--buyuk { width: 100%; height: auto; aspect-ratio: 3 / 4; }

/* ================================================================= BİLDİRİM */
.bildirimler { display: grid; gap: var(--bosluk-2); margin-bottom: var(--bosluk-4); }
.bildirim {
  display: flex; align-items: flex-start; gap: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  border: 1px solid;
  border-left-width: 4px;
  font-size: var(--olcek-sm);
  font-weight: 500;
}
.bildirim--success { border-color: #A8D5BC; border-left-color: var(--iyi); background: var(--iyi-zemin); color: #0B4A27; }
.bildirim--error   { border-color: #F3B4B7; border-left-color: var(--kirmizi); background: var(--kirmizi-zemin); color: #7A0C13; }
.bildirim--warning { border-color: #E8C98C; border-left-color: var(--uyari); background: var(--uyari-zemin); color: #6B3F00; }
.bildirim--info    { border-color: #B8CBE4; border-left-color: var(--bilgi); background: var(--bilgi-zemin); color: #16375F; }

/* Dağıtım öz denetimi uyarısı — yalnızca sunucu yanlış yapılandırıldığında */
.guvenlik-uyari { align-items: flex-start; margin-bottom: var(--bosluk-4); }
.guvenlik-uyari__liste { margin: var(--bosluk-2) 0; display: grid; gap: 2px; }
.guvenlik-uyari__liste li { font-family: var(--mono); font-size: var(--olcek-xs); }

/* ================================================================ BOŞ DURUM */
.bos {
  padding: var(--bosluk-7) var(--bosluk-4);
  text-align: center;
  border: 1px dashed var(--hat-koyu);
  background: var(--kagit);
}
.bos h3 {
  font-size: var(--olcek-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--bosluk-2);
}
.bos p { color: var(--murekkep-45); font-size: var(--olcek-sm); max-width: 44ch; margin: 0 auto var(--bosluk-4); }
.bos p:last-child { margin-bottom: 0; }
.bos__ikon { color: var(--hat-koyu); margin: 0 auto var(--bosluk-4); }
.bos__not { font-size: var(--olcek-xs); }
.bos--aralikli { margin-top: var(--bosluk-4); }

/* Kart ve özet blokları arasındaki dikey ritim */
.kart--aralikli { margin-top: var(--bosluk-4); }
.ozet--sozlesme, .ozet--saglik { margin-bottom: var(--bosluk-4); }
.ozet--sozlesme .ozet__sayi { font-size: var(--olcek-lg); }
.ozet--saglik .ozet__sayi { display: flex; align-items: center; gap: var(--bosluk-2); }
.yorum-listesi { margin-top: var(--bosluk-4); }

/* Serbest metin okunabilirlik sınırı — geniş ekranda satır başına 170 karakter
   okunmuyor. Kart geniş kalır, metin makul ölçüde sarar. */
.gecmis__metin { white-space: pre-line; line-height: 1.65; max-width: 68ch; }
.gecmis__alt { margin-top: var(--bosluk-2); display: flex; gap: var(--bosluk-3); align-items: center; font-size: var(--olcek-xs); }

/* ============================================================ OYUNCU DOSYASI */
.dosya { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--bosluk-5); align-items: start; }

.kimlik { position: sticky; top: calc(var(--rail-h) + 4px + var(--bosluk-4)); }
.kimlik__foto { position: relative; background: var(--murekkep); }
.kimlik__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.kimlik__foto .avatar--bos {
  width: 100%; aspect-ratio: 3 / 4; height: auto;
  font-size: 3rem; color: #55555A; background: var(--murekkep); border: 0;
}
.kimlik__durum {
  position: absolute; left: 0; bottom: 0;
  background: var(--murekkep); color: #fff;
  padding: 4px var(--bosluk-2);
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.kimlik__durum--pasif { background: var(--murekkep-45); }

.kimlik__ad { padding: var(--bosluk-4); border-bottom: 1px solid var(--hat); }
.kimlik__ad .ilk {
  display: block;
  font-size: var(--olcek-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--murekkep-45);
}
.kimlik__ad .soy {
  display: block;
  font-size: var(--olcek-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 2px;
}
.kimlik__mevkiler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--bosluk-3); }

.kunye { display: grid; grid-template-columns: auto 1fr; gap: var(--bosluk-2) var(--bosluk-3); padding: var(--bosluk-4); }
.kunye dt {
  font-size: var(--olcek-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--murekkep-45); white-space: nowrap;
}
.kunye dd { font-family: var(--mono); font-size: var(--olcek-sm); font-weight: 500; text-align: right; }

/* ------------------------------------------------------- İMZA: KONTRAT ŞERİDİ
   Sözleşmenin başlangıcından bitişine uzanan tek satırlık zaman çizgisi.
   Bugünün konumu ve opsiyon tarihi üzerine iğnelenir. Kulübün ilk sorusu
   "elimizde ne kadar kaldı?" — cevabı tek bakışta burada.                     */
.kontrat-serit { padding: var(--bosluk-4); border-top: 1px solid var(--hat); }
.kontrat-serit__bas {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--bosluk-3);
}
.kontrat-serit__kalan {
  font-family: var(--mono);
  font-size: var(--olcek-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kontrat-serit__kalan small { font-size: var(--olcek-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--murekkep-45); }

.kontrat-serit__bos {
  margin-top: var(--bosluk-2);
  font-size: var(--olcek-sm);
  color: var(--murekkep-45);
}

.ray {
  position: relative;
  height: 10px;
  background: var(--saha-koyu);
  border: 1px solid var(--hat-koyu);
}
.ray__gecen { position: absolute; inset: 0 auto 0 0; background: var(--murekkep); }
.ray__gecen--bitti { background: var(--murekkep-45); }
.ray__bugun {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px; background: var(--kirmizi);
}
.ray__opsiyon {
  position: absolute; top: -7px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--uyari);
  transform: translateX(-5px);
}
.ray-uclar {
  display: flex; justify-content: space-between;
  margin-top: var(--bosluk-2);
  font-family: var(--mono);
  font-size: var(--olcek-xs);
  color: var(--murekkep-45);
}
.ray-aciklama {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-3);
  margin-top: var(--bosluk-3);
  font-size: var(--olcek-xs); color: var(--murekkep-45);
}
.ray-aciklama i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 5px; }
.ray-aciklama .i-bugun { background: var(--kirmizi); width: 3px; }
.ray-aciklama .i-opsiyon { background: var(--uyari); }

/* ================================================================== SEKMELER */
.sekmeler {
  display: flex;
  gap: var(--bosluk-1);
  border-bottom: 1px solid var(--hat);
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: var(--bosluk-5);
  background: var(--kagit);
}
.sekme {
  display: inline-flex; align-items: center; gap: var(--bosluk-2);
  /* Yedi sekme kaydırma olmadan sığsın diye yatay boşluk ve harf aralığı
     ölçülü tutulur. overflow-x bilerek duruyor: dar ekranda hâlâ gerekli. */
  padding: var(--bosluk-3);
  border-bottom: 4px solid transparent;
  margin-bottom: -1px;
  color: var(--murekkep-70);
  font-size: var(--olcek-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sekme:hover { color: var(--murekkep); background: #FAFAF9; text-decoration: none; }
.sekme.is-active { color: var(--murekkep); border-bottom-color: var(--kirmizi); }
.sekme__rozet {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 1px 5px;
  border: 1px solid var(--hat-koyu);
  color: var(--murekkep-45);
}
.sekme__rozet--uyari   { border-color: #E8C98C; background: var(--uyari-zemin); color: var(--uyari); }
.sekme__rozet--tehlike { border-color: #F3B4B7; background: var(--kirmizi-zemin); color: var(--kirmizi-yazi); }
.sekme__rozet--basari  { border-color: #A8D5BC; background: var(--iyi-zemin); color: var(--iyi); }
.sekme__rozet--bilgi   { border-color: #B8CBE4; background: var(--bilgi-zemin); color: var(--bilgi); }

/* ================================================================ İSTATİSTİK */
.ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hat); border: 1px solid var(--hat); }
.ozet__kutu { background: var(--kagit); padding: var(--bosluk-4); }
.ozet__sayi {
  font-family: var(--mono);
  font-size: var(--olcek-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ozet__ad {
  display: block;
  font-size: var(--olcek-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--murekkep-45);
  margin-top: var(--bosluk-2);
}
.ozet__kutu--vurgu .ozet__sayi { color: var(--kirmizi-yazi); }

/* =================================================================== SÜZGEÇ */
.suzgec { margin-bottom: var(--bosluk-4); }
.suzgec__arama { padding: var(--bosluk-4) var(--bosluk-4) 0; position: static; }
.suzgec__arama .arama { position: relative; }
.suzgec__alanlar {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2);
  padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-4);
}
.suzgec__alanlar .secim { width: auto; min-width: 9.5rem; flex: 0 1 auto; height: 38px; }
.suzgec__alanlar .secenek span { height: 38px; }

/* ===================================================================== PANO */
.pano-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-4);
  align-items: start;
}
a.ozet__kutu { color: inherit; }
a.ozet__kutu:hover { background: #FAFAF9; text-decoration: none; }
a.ozet__kutu:hover .ozet__sayi { color: var(--kirmizi-yazi); }

/* Mevki dağılımı — kadronun hangi bölgesi zayıf, tek bakışta */
.dagilim { display: grid; gap: var(--bosluk-2); }
.dagilim__satir { display: grid; grid-template-columns: 34px 1fr 70px 24px; align-items: center; gap: var(--bosluk-3); }
.dagilim__ad { font-size: var(--olcek-sm); }
.dagilim__cubuk { height: 8px; background: var(--saha-koyu); border: 1px solid var(--hat); }
.dagilim__cubuk i { display: block; height: 100%; background: var(--murekkep); }
.dagilim__sayi { text-align: right; font-size: var(--olcek-sm); font-weight: 700; }

.islem-satir { display: grid; gap: 2px; font-size: var(--olcek-sm); padding-bottom: var(--bosluk-2); border-bottom: 1px solid var(--hat); }
.islem-satir:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 1080px) {
  .pano-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================= İŞLEM KAYDI */
.suzgec__alanlar--tek { padding-top: var(--bosluk-4); }

.yetki-tablo td, .yetki-tablo th { padding: var(--bosluk-2) var(--bosluk-3); }
.yetki-var { color: var(--iyi); font-size: 1.1em; }
.yetki-yok { color: var(--hat-koyu); }

.fark { display: grid; gap: 2px; font-size: var(--olcek-xs); }
.fark li { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); align-items: baseline; }
.fark__alan { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--murekkep-45); }
.fark__eski { font-family: var(--mono); text-decoration: line-through; color: var(--murekkep-45); }
.fark__ok { color: var(--murekkep-45); }
.fark__yeni { font-family: var(--mono); font-weight: 600; }

/* ==================================================================== ARAMA */
.arama { position: relative; }
.arama input {
  height: 44px;
  padding-left: 40px;
  font-size: var(--olcek-md);
}
.arama__ikon {
  position: absolute; left: 13px; top: 13px;
  width: 18px; height: 18px;
  color: var(--murekkep-45);
  pointer-events: none;
}
.arama__sonuc {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--kagit);
  border: 1px solid var(--murekkep);
  max-height: 340px; overflow-y: auto;
}
.arama__sonuc:empty { display: none; }
.arama__satir {
  display: flex; align-items: center; gap: var(--bosluk-3);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-bottom: 1px solid var(--hat);
  color: var(--murekkep);
}
.arama__satir:last-child { border-bottom: 0; }
.arama__satir:hover, .arama__satir.is-secili { background: var(--murekkep); color: #fff; text-decoration: none; }
.arama__satir:hover .sessiz, .arama__satir.is-secili .sessiz { color: #B0B0B4; }

/* =================================================================== YORUMLAR */
.yorum {
  padding: var(--bosluk-4);
  border-left: 3px solid var(--murekkep);
  background: var(--kagit);
  border-top: 1px solid var(--hat);
  border-right: 1px solid var(--hat);
  border-bottom: 1px solid var(--hat);
}
.yorum__bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bosluk-3); margin-bottom: var(--bosluk-2); }
.yorum__hoca { font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; font-size: var(--olcek-sm); }
.yorum__tarih { font-family: var(--mono); font-size: var(--olcek-xs); color: var(--murekkep-45); }
.yorum__metin { white-space: pre-line; line-height: 1.65; max-width: 68ch; }
.yorum__alt { margin-top: var(--bosluk-3); display: flex; gap: var(--bosluk-3); align-items: center; font-size: var(--olcek-xs); color: var(--murekkep-45); }

/* ================================================================ ZAMAN DİZİN */
/* Sağlık ve kart geçmişi: dikey çizgi üzerinde olaylar */
.gecmis { position: relative; padding-left: var(--bosluk-5); }
.gecmis::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--hat-koyu);
}
.gecmis__olay { position: relative; padding-bottom: var(--bosluk-5); }
.gecmis__olay:last-child { padding-bottom: 0; }
.gecmis__nokta {
  position: absolute; left: calc(-1 * var(--bosluk-5) + 1px); top: 4px;
  width: 11px; height: 11px;
  background: var(--kagit);
  border: 2px solid var(--murekkep);
}
.gecmis__nokta--acik { border-color: var(--kirmizi); background: var(--kirmizi); }
.gecmis__tarih { font-family: var(--mono); font-size: var(--olcek-xs); color: var(--murekkep-45); }
.gecmis__bas { display: flex; align-items: center; gap: var(--bosluk-2); margin: 2px 0 var(--bosluk-2); }
.gecmis__baslik { font-weight: 700; }

/* ================================================================= SAYFALAMA */
.sayfalama { display: flex; align-items: center; gap: var(--bosluk-2); margin-top: var(--bosluk-4); flex-wrap: wrap; }
.sayfalama__bilgi { margin-right: auto; font-size: var(--olcek-xs); color: var(--murekkep-45); }
.sayfalama a, .sayfalama span:not(.sayfalama__bilgi) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--bosluk-2);
  border: 1px solid var(--hat-koyu);
  font-family: var(--mono);
  font-size: var(--olcek-sm);
  color: var(--murekkep);
}
.sayfalama a:hover { border-color: var(--murekkep); background: var(--murekkep); color: #fff; text-decoration: none; }
.sayfalama .is-active { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.sayfalama .is-pasif { color: var(--murekkep-45); border-style: dashed; }

/* =========================================================== GİRİŞ / ÇIPLAK */
.page-bare {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--bosluk-5);
  background: var(--murekkep);
  /* Arma silueti: siyah zemin üzerinde ince kırmızı diyagonal doku */
  background-image: repeating-linear-gradient(
    -60deg,
    rgba(237, 27, 36, .10) 0, rgba(237, 27, 36, .10) 1px,
    transparent 1px, transparent 13px
  );
}
.giris-kart, .bare-card {
  width: 100%;
  max-width: 380px;
  background: var(--kagit);
  border-top: 4px solid var(--kirmizi);
}
.bare-card { max-width: 560px; padding: var(--bosluk-6); text-align: center; }
.bare-logo { margin: 0 auto var(--bosluk-4); }
.bare-card h1 { font-size: var(--olcek-xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--bosluk-3); }
.bare-card p { margin-bottom: var(--bosluk-3); color: var(--murekkep-70); }
.bare-card pre {
  text-align: left; background: var(--saha); border: 1px solid var(--hat);
  padding: var(--bosluk-3); overflow-x: auto; font-family: var(--mono); font-size: var(--olcek-sm);
}
.bare-note { font-size: var(--olcek-sm); color: var(--murekkep-45); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--saha); padding: 1px 4px; }

/* Giriş ekranındaki bildirimler — kartın üstünde, aynı genişlikte */
.giris-bildirim {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-4);
}
.page-bare { flex-direction: column; display: flex; align-items: center; justify-content: center; }

.giris-bas { padding: var(--bosluk-6) var(--bosluk-6) var(--bosluk-4); text-align: center; }
.giris-bas img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto var(--bosluk-4); }
.giris-bas h1 { font-size: var(--olcek-lg); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.15; }
.giris-bas p { font-size: var(--olcek-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--murekkep-45); margin-top: var(--bosluk-2); }
.giris-govde { padding: 0 var(--bosluk-6) var(--bosluk-6); }
.giris-alt {
  padding: var(--bosluk-3) var(--bosluk-6);
  border-top: 1px solid var(--hat);
  background: #FAFAF9;
  font-size: var(--olcek-xs);
  color: var(--murekkep-45);
  text-align: center;
}

/* ================================================================= KURULUM */
.kurulum {
  width: 100%;
  max-width: 720px;
  background: var(--kagit);
  border-top: 4px solid var(--kirmizi);
}
.kurulum__bas {
  display: flex; align-items: center; gap: var(--bosluk-4);
  padding: var(--bosluk-5) var(--bosluk-6);
  border-bottom: 1px solid var(--hat);
}
.kurulum__bas img { object-fit: contain; }
.kurulum__bas h1 { font-size: var(--olcek-lg); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.kurulum__bas p { font-size: var(--olcek-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--murekkep-45); }
.kurulum__govde { padding: var(--bosluk-5) var(--bosluk-6) var(--bosluk-6); }
.kurulum__bolum { margin-bottom: var(--bosluk-5); }
.kurulum__bolum > h2 {
  font-size: var(--olcek-xs); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom: 2px solid var(--murekkep);
  padding-bottom: var(--bosluk-2); margin-bottom: var(--bosluk-3);
}
.kurulum__not { font-size: var(--olcek-sm); margin-bottom: var(--bosluk-4); }
.kurulum__govde > .bildirim { margin-bottom: var(--bosluk-4); }

.kontrol { display: grid; gap: var(--bosluk-2); margin-bottom: var(--bosluk-4); }
.kontrol__satir { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--bosluk-3); align-items: center; font-size: var(--olcek-sm); }
.kontrol__isaret { font-weight: 800; text-align: center; }
.kontrol__isaret.is-ok { color: var(--iyi); }
.kontrol__isaret.is-hata { color: var(--kirmizi-yazi); }

/* ==================================================================== HATA */
.hata { padding: var(--bosluk-6); }
.hata--orta { text-align: center; }
.hata-kod {
  font-family: var(--mono);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--kirmizi);
}
.hata-baslik {
  font-size: var(--olcek-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: var(--bosluk-2) 0 var(--bosluk-3);
}
.hata-islem { display: flex; gap: var(--bosluk-2); flex-wrap: wrap; margin-top: var(--bosluk-5); }
.hata--orta .hata-islem { justify-content: center; }

/* ================================================================ YAZDIRMA */
.yazdir-sayfa { background: var(--saha); }
.yazdir-cubugu {
  display: flex; gap: var(--bosluk-2); justify-content: flex-end;
  margin-bottom: var(--bosluk-4);
}
.yazdir-bas { display: none; }

.dosya-ozet { display: flex; gap: var(--bosluk-5); align-items: flex-start; }
.dosya-ozet__foto { width: 120px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--hat-koyu); }
.dosya-ozet__ad {
  font-size: var(--olcek-2xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--bosluk-3);
}
.dosya-ozet__ad strong { font-weight: 800; }

.kunye--yatay { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); padding: 0; gap: var(--bosluk-3); }
.kunye--yatay dt { margin-bottom: 2px; }
.kunye--yatay dd { text-align: left; }

.kunye--iki { grid-template-columns: 12rem minmax(0, 1fr); padding: 0; gap: var(--bosluk-2) var(--bosluk-4); }
.kunye--iki dd { text-align: left; font-family: var(--yazi); font-size: var(--olcek-md); }

.yazdir-alt {
  display: flex; justify-content: space-between; gap: var(--bosluk-4);
  border-top: 1px solid var(--hat);
  padding-top: var(--bosluk-3);
  margin-top: var(--bosluk-5);
  font-size: var(--olcek-xs);
  color: var(--murekkep-45);
}

.yazdir-bolum { margin-bottom: var(--bosluk-5); }
.yazdir-bolum > h2 {
  font-size: var(--olcek-xs); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; border-bottom: 2px solid var(--murekkep);
  padding-bottom: var(--bosluk-2); margin-bottom: var(--bosluk-3);
}
.yazdir-bolum .yorum { margin-bottom: var(--bosluk-2); }

/* ================================================================= YARDIMCI */
.gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.satir { display: flex; align-items: center; gap: var(--bosluk-3); flex-wrap: wrap; }
.satir--arasi { justify-content: space-between; }
.ayrac { height: 1px; background: var(--hat); margin: var(--bosluk-4) 0; }
.yalniz-yazdir { display: none; }

/* =================================================================== DUYARLI */

/* Geniş ekran. Sol sütun sabit olduğu için eklenen genişliğin tamamı sekme
   paneline gidiyor; kimlik kartı yanında ince kalmasın diye biraz büyür. */
@media (min-width: 1400px) {
  .dosya { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .dosya { grid-template-columns: 240px minmax(0, 1fr); }
  .ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .rail__in { gap: var(--bosluk-3); }
  .rail__nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--murekkep);
    border-top: 1px solid #2A2A2E;
    justify-content: space-around;
    padding: 0 var(--bosluk-2);
    margin-left: 0;
  }
  .rail__link { border-bottom: 0; border-top: 3px solid transparent; padding: var(--bosluk-3) var(--bosluk-2); }
  .rail__link.is-active { border-bottom-color: transparent; border-top-color: var(--kirmizi); }
  .rail__user { margin-left: auto; }
  .rail__kim b { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wrap { padding: var(--bosluk-4) var(--bosluk-3) 5rem; }

  .dosya { grid-template-columns: minmax(0, 1fr); }
  .kimlik { position: static; }
  .kimlik__foto img, .kimlik__foto .avatar--bos { aspect-ratio: 16 / 9; }

  .form-izgara, .form-izgara--3, .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: minmax(0, 1fr); }
  .sayfa-bas { align-items: flex-start; flex-direction: column; }
  .sayfa-bas__yazi h1 { font-size: var(--olcek-xl); }

  /* Tablolar kart yığınına dönüşür */
  .tablo--duyarli thead { display: none; }
  .tablo--duyarli tbody tr { display: block; border: 1px solid var(--hat); margin-bottom: var(--bosluk-2); padding: var(--bosluk-2); }
  .tablo--duyarli tbody td { display: flex; justify-content: space-between; gap: var(--bosluk-3); border: 0; padding: var(--bosluk-1) var(--bosluk-2); text-align: right; }
  .tablo--duyarli tbody td::before {
    content: attr(data-etiket);
    font-size: var(--olcek-xs); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--murekkep-45); text-align: left;
  }
  .tablo--duyarli tbody td:first-child { padding-left: var(--bosluk-2); }
  .tablo--duyarli tbody td:first-child::before { display: none; }
  .tablo--duyarli tbody td:first-child::after { display: none; }
  .kadro tbody tr td:first-child::before { display: none; }
  .oyuncu-hucre { width: 100%; }
}

@media (max-width: 520px) {
  .ozet { grid-template-columns: minmax(0, 1fr); }
  .rail__ad span { display: none; }
  .rail__kim { display: none; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}