/* =============================================================
   ÖzgürTavla — Design Tokens
   Bu dosya ana sayfada main.css'ten ÖNCE yüklenir.
   Renk/spacing/typography tek noktadan yönetilir.

   PALET: "Sportif" — elektrik mavi + altın + magenta.
   Değişken İSİMLERİ eskisiyle birebir aynıdır; sadece DEĞERLER
   doygunlaştırıldı. Bu sayede hiçbir sayfanın markup'ına
   dokunmadan tüm site yeni palete geçer.
   ============================================================= */

:root {
  /* ----- Color Palette (50 → 900) ----- */

  /* Primary — Elektrik mavi */
  --c-primary-50:  #eef2ff;
  --c-primary-100: #dde5ff;
  --c-primary-200: #c2d0ff;
  --c-primary-300: #9db2ff;
  --c-primary-400: #6e8dff;
  --c-primary-500: #4b7bff;
  --c-primary-600: #2b5bff;
  --c-primary-700: #1e43cc;
  --c-primary-800: #17349e;
  --c-primary-900: #122878;
  --c-primary-rgb: 43, 91, 255;

  /* Success — Canlı emerald */
  --c-success-50:  #e6fbf3;
  --c-success-100: #c6f5e4;
  --c-success-300: #5eeab4;
  --c-success-500: #00c884;
  --c-success-600: #009663;
  --c-success-700: #007a51;
  --c-success-rgb: 0, 200, 132;

  /* Warning — Amber */
  --c-warning-50:  #fff8e8;
  --c-warning-100: #ffefc7;
  --c-warning-300: #ffd26b;
  --c-warning-500: #ffb020;
  --c-warning-600: #e38a00;
  --c-warning-700: #b96c00;
  --c-warning-rgb: 255, 176, 32;

  /* Danger — Rose */
  --c-danger-50:  #fff1f4;
  --c-danger-100: #ffe0e6;
  --c-danger-300: #fda4b4;
  --c-danger-500: #f43f5e;
  --c-danger-600: #e11d48;
  --c-danger-700: #be123c;
  --c-danger-rgb: 244, 63, 94;

  /* Hot — Magenta (üçüncü vurgu rengi; grafik/rozet/aksan için) */
  --c-hot-50:  #fff0f7;
  --c-hot-100: #ffdcec;
  --c-hot-500: #f0187c;
  --c-hot-600: #c41064;
  --c-hot-700: #9c0c50;
  --c-hot-rgb: 240, 24, 124;

  /* Neutral — Hafif mavi tonlu slate (zemin çamurlaşmasın diye) */
  --c-neutral-0:   #ffffff;
  --c-neutral-50:  #f5f7ff;
  --c-neutral-100: #eef2fe;
  --c-neutral-200: #dde3f7;
  --c-neutral-300: #c3cce8;
  --c-neutral-400: #97a0c0;
  --c-neutral-500: #6e779b;
  --c-neutral-600: #576087;
  --c-neutral-700: #3b4468;
  --c-neutral-800: #212944;
  --c-neutral-900: #0a1024;

  /* Champion — Altın (şampiyonluk/madalya) */
  --c-champion-50:  #fff8e8;
  --c-champion-100: #ffefc7;
  --c-champion-200: #ffe29b;
  --c-champion-300: #ffd26b;
  --c-champion-400: #ffc960;
  --c-champion-500: #ffb020;
  --c-champion-600: #e38a00;
  --c-champion-700: #b96c00;
  --c-champion-800: #8f5200;
  --c-champion-900: #6b3d00;
  --c-champion-rgb: 255, 176, 32;

  /* Wood — Tavla teması, accent kullanım */
  --c-wood-50:  #fdf6e9;
  --c-wood-200: #efd6a7;
  --c-wood-500: #a47148;
  --c-wood-700: #6b4423;
  --c-wood-900: #3e2811;

  /* Athletic Dark — sportif hero zemini */
  --c-athletic-900: #060b1e;
  --c-athletic-800: #10205c;
  --c-athletic-700: #1e3aa8;

  /* ----- Semantic aliases ----- */
  --c-bg:           var(--c-neutral-50);
  --c-surface:      var(--c-neutral-0);
  --c-surface-2:    var(--c-neutral-100);
  --c-text:         var(--c-neutral-900);
  --c-text-muted:   var(--c-neutral-600);
  --c-text-subtle:  var(--c-neutral-400);
  --c-border:       var(--c-neutral-200);
  --c-border-soft:  var(--c-neutral-100);

  --c-link:         var(--c-primary-600);
  --c-link-hover:   var(--c-primary-700);

  /* Altın/mavi zemin üstünde okunacak metin renkleri */
  --c-on-primary:   #ffffff;
  --c-on-champion:  #38260a;

  /* Sport semantic intents */
  --c-hero-bg:        var(--c-athletic-900);
  --c-hero-text:      #ffffff;
  --c-hero-muted:     rgba(255, 255, 255, .74);
  --c-hero-glass:     rgba(255, 255, 255, .10);
  --c-hero-glass-bd:  rgba(255, 255, 255, .20);

  --c-champion-bg:    var(--c-champion-100);
  --c-champion-fg:    var(--c-champion-800);
  --c-champion-bd:    var(--c-champion-500);
  --c-champion-strong: var(--c-champion-600);

  /* Sport gradients (kullanım yerlerinde tekrar yazılmasın) */
  --g-champion: linear-gradient(135deg, #ffce6b 0%, #e38a00 100%);
  /* Üstünde hep BEYAZ metin duruyor (.btn-primary-pro, aktif sekmeler).
     500'den başlayınca açık uçta kontrast 3.77:1'e düşüyordu; 600→800
     ile her iki uçta da 5.2:1 üzerinde. */
  --g-primary:  linear-gradient(135deg, var(--c-primary-600) 0%, var(--c-primary-800) 100%);
  --g-hero:     linear-gradient(150deg, var(--c-athletic-900) 0%, var(--c-athletic-800) 52%, var(--c-athletic-700) 100%);

  /* ----- Spacing scale (4px base) ----- */
  --sp-0:  0;
  --sp-1:  .25rem;   /*  4px */
  --sp-2:  .5rem;    /*  8px */
  --sp-3:  .75rem;   /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-7:  1.75rem;  /* 28px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  /* ----- Border radius ----- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   11px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ----- Shadow scale -----
     Gri değil, MARKA TONUNDA gölge. Arayüzün "canlı" görünmesinin
     tek en büyük sebebi budur; nötr gri gölge her şeyi soluklaştırır. */
  --sh-xs: 0 1px 2px rgba(16, 28, 84, .05);
  --sh-sm: 0 2px 6px rgba(16, 28, 84, .07);
  --sh-md: 0 1px 2px rgba(16, 28, 84, .05),
           0 14px 30px -20px rgba(16, 28, 84, .38);
  --sh-lg: 0 2px 4px rgba(16, 28, 84, .05),
           0 20px 44px -24px rgba(16, 28, 84, .42);
  --sh-xl: 0 28px 64px -28px rgba(16, 28, 84, .5);

  /* Renkli aksiyon gölgeleri — buton/rozet için */
  --sh-primary:  0 8px 22px -8px rgba(var(--c-primary-rgb), .65);
  --sh-primary-h: 0 12px 28px -8px rgba(var(--c-primary-rgb), .8);
  --sh-champion: 0 6px 18px -6px rgba(var(--c-champion-rgb), .7);

  /* ----- Typography ----- */
  --font-ui:      'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
  --font-numeric: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   .75rem;    /* 12px */
  --fs-sm:   .875rem;   /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  clamp(1.5rem, 2vw + .8rem, 1.875rem);
  --fs-4xl:  clamp(1.75rem, 3vw + .9rem, 2.25rem);
  --fs-5xl:  clamp(2rem, 4vw + 1rem, 3rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Türkçe İ / Ğ / Ş üst işaretleri kırpılmasın diye tight = 1.18.
     (Eskiden 1.2 idi ama başlıklarda 1.05'e kadar inen override'lar vardı.) */
  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relax:  1.7;

  /* ----- Layout ----- */
  --nav-h:        65px;
  --nav-h-mobile: 58px;
  --container-max: 1200px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);

  /* ----- Motion ----- */
  --t-fast:   .12s ease;
  --t-base:   .2s ease;
  --t-slow:   .32s ease;

  /* ============================================================
     Backward-compat: eski değişken isimleri token'lara bağlandı.
     main.css ve sayfa-içi style'lar bozulmadan çalışır.
     ============================================================ */
  --primary-color:   var(--c-primary-600);
  /* neutral-500 idi → beyaz zeminde 4.40:1 (AA sınırı 4.5). Tek tüketicisi
     main.css'teki `.nav-link{ color: … !important }`; 600 ile 6.13:1 oluyor. */
  --secondary-color: var(--c-neutral-600);
  --accent-color:    var(--c-warning-500);
  --success-color:   var(--c-success-500);
  --light-color:     var(--c-neutral-50);
  --light-bg:        var(--c-neutral-50);
  --dark-color:      var(--c-neutral-900);
  --card-shadow:     var(--sh-md);
  --card-radius:     16px;

  /* ============================================================
     Bootstrap CSS variable bindings — Bootstrap 5.3 token sistemi
     ============================================================ */
  --bs-primary:        var(--c-primary-600);
  --bs-primary-rgb:    43, 91, 255;
  /* Bu ikisinin üstünde BEYAZ metin duruyor (.text-bg-secondary,
     .text-bg-success, .badge). 500/600 tonlarında 4.40:1 ve 3.79:1
     kalıyordu; 600/700 ile 6.13:1 ve 5.38:1. */
  --bs-secondary:      var(--c-neutral-600);
  --bs-secondary-rgb:  87, 96, 135;
  --bs-success:        var(--c-success-700);
  --bs-success-rgb:    0, 122, 81;
  --bs-warning:        var(--c-warning-500);
  --bs-warning-rgb:    255, 176, 32;
  /* danger-600 saf beyazda 4.70:1 ile sınırı geçiyor ama tonlu
     zeminlerde (kart/tablo) 4.39–4.46'ya düşüyordu. 700 tonu saf
     beyazda 6.29:1 vererek bu paya sahip oluyor. */
  --bs-danger:         var(--c-danger-700);
  --bs-danger-rgb:     190, 18, 60;
  --bs-info:           var(--c-primary-500);
  --bs-info-rgb:       75, 123, 255;
  --bs-light:          var(--c-neutral-50);
  --bs-dark:           var(--c-neutral-900);

  --bs-body-color:     var(--c-text);
  --bs-body-bg:        var(--c-bg);

  /* Bootstrap'in .shadow-sm / .shadow / .shadow-lg yardımcıları nötr
     siyah gölge kullanıyor ve !important ile bizim token gölgemizi
     eziyordu (ör. ayarlar.php'deki .card.shadow-sm). Marka tonuna
     bağlandı — utility'ler artık sistemle aynı dili konuşuyor. */
  --bs-box-shadow-sm:  var(--sh-xs);
  --bs-box-shadow:     var(--sh-md);
  --bs-box-shadow-lg:  var(--sh-lg);

  /* .btn-secondary de hex'i sabit yazar (bkz. .btn-primary notu) */
  --bs-secondary-bg:   var(--c-surface-2);
  --bs-border-color:   var(--c-border);
  --bs-border-radius:  var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-link-color:     var(--c-link);
  --bs-link-hover-color: var(--c-link-hover);
  /* Bootstrap 5.3'te <a> rengi --bs-link-color'i DEGIL --bs-link-color-rgb'yi
     okur; bu tanimlanmazsa linkler eski #0d6efd olarak kalir. */
  --bs-link-color-rgb:       var(--c-primary-rgb);
  --bs-link-hover-color-rgb: 30, 67, 204;

  --bs-font-sans-serif: var(--font-ui);
  --bs-body-font-family: var(--font-ui);
}

/* ============================================================
   Tipografi tabanı — başlıklar tek bir aileye bağlandı.
   (Önceden main.css içinde 3 ayrı yerde çıplak "Poppins" vardı.)
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
}

/* Skor sitesiyiz: rakamlar sütun sütun hizalansın */
body {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Buton görünümü — renkli gölge + dokunma geri bildirimi
   ============================================================ */
.btn-primary {
  --bs-btn-bg: var(--c-primary-600);
  --bs-btn-border-color: var(--c-primary-600);
  --bs-btn-hover-bg: var(--c-primary-700);
  --bs-btn-hover-border-color: var(--c-primary-700);
  --bs-btn-active-bg: var(--c-primary-800);
  --bs-btn-active-border-color: var(--c-primary-800);
  box-shadow: var(--sh-primary);
}

.btn-primary:hover { box-shadow: var(--sh-primary-h); }

/* Dolu buton varyantları — hepsi beyaz metin taşıdığı için
   kontrastı 4.5:1 üzerinde tutan tonlar seçildi. */
.btn-success {
  --bs-btn-bg: var(--c-success-700);
  --bs-btn-border-color: var(--c-success-700);
  --bs-btn-hover-bg: var(--c-success-600);
  --bs-btn-hover-border-color: var(--c-success-600);
}

.btn-danger {
  --bs-btn-bg: var(--c-danger-600);
  --bs-btn-border-color: var(--c-danger-600);
  --bs-btn-hover-bg: var(--c-danger-700);
  --bs-btn-hover-border-color: var(--c-danger-700);
}

/* =============================================================
   Yüzey bileşenlerinin zemini

   Bootstrap 5.3 kart/modal/dropdown/liste zeminlerini --bs-body-bg'den
   türetir. Body zemini tonlu olduğu için (#f5f7ff) bu bileşenler de
   tonlu çıkıyor, kartlar sayfa zeminine karışıyordu.

   ÖNEMLİ: bu değişkenler :root'a yazılırsa işe yaramaz — Bootstrap
   onları bileşenin KENDİ seçicisinde tanımlar ve yerel tanım kazanır.
   Bu yüzden aynı seçicilere yazılmaları gerekir.
   ============================================================= */
.card       { --bs-card-bg:       var(--c-surface); }
.modal      { --bs-modal-bg:      var(--c-surface); }
.dropdown-menu { --bs-dropdown-bg: var(--c-surface); }
.list-group {
  --bs-list-group-bg: var(--c-surface);
  /* Aktif öğe Bootstrap'in sabit #0d6efd mavisini kullanıyordu */
  --bs-list-group-active-bg: var(--c-primary-600);
  --bs-list-group-active-border-color: var(--c-primary-600);
  --bs-list-group-action-hover-bg: var(--c-surface-2);
}
.accordion  { --bs-accordion-bg:  var(--c-surface); }
.offcanvas, .offcanvas-start, .offcanvas-end,
.offcanvas-top, .offcanvas-bottom { --bs-offcanvas-bg: var(--c-surface); }
.popover    { --bs-popover-bg:    var(--c-surface); }
.table      { --bs-table-bg:      var(--c-surface); }

.btn-secondary {
  --bs-btn-bg: var(--c-neutral-600);
  --bs-btn-border-color: var(--c-neutral-600);
  --bs-btn-hover-bg: var(--c-neutral-700);
  --bs-btn-hover-border-color: var(--c-neutral-700);
  --bs-btn-active-bg: var(--c-neutral-800);
}

/* Amber koyu metin ister — beyaz üstünde okunmaz */
.btn-warning {
  --bs-btn-bg: var(--c-champion-500);
  --bs-btn-border-color: var(--c-champion-500);
  --bs-btn-color: var(--c-on-champion);
  --bs-btn-hover-bg: var(--c-champion-600);
  --bs-btn-hover-border-color: var(--c-champion-600);
  --bs-btn-hover-color: var(--c-on-champion);
}

/* Bootstrap'in .btn-outline-* / .link-* sınıfları hex'i SABİT yazar
   (--bs-primary'yi okumazlar). Bu yüzden tek tek bağlanmaları gerekir. */
.btn-outline-primary {
  --bs-btn-color: var(--c-primary-600);
  --bs-btn-border-color: var(--c-primary-600);
  --bs-btn-hover-bg: var(--c-primary-600);
  --bs-btn-hover-border-color: var(--c-primary-600);
  --bs-btn-active-bg: var(--c-primary-700);
  --bs-btn-active-border-color: var(--c-primary-700);
  --bs-btn-disabled-color: var(--c-primary-600);
  --bs-btn-disabled-border-color: var(--c-primary-600);
  --bs-btn-focus-shadow-rgb: var(--c-primary-rgb);
}

.btn-outline-success {
  --bs-btn-color: var(--c-success-600);
  --bs-btn-border-color: var(--c-success-600);
  --bs-btn-hover-bg: var(--c-success-600);
  --bs-btn-hover-border-color: var(--c-success-600);
  --bs-btn-active-bg: var(--c-success-700);
  --bs-btn-active-border-color: var(--c-success-700);
  --bs-btn-focus-shadow-rgb: var(--c-success-rgb);
}

.btn-outline-danger {
  /* metin rengi 600 idi; tonlu zeminde 4.39:1'e düşüyordu */
  --bs-btn-color: var(--c-danger-700);
  --bs-btn-border-color: var(--c-danger-600);
  --bs-btn-hover-bg: var(--c-danger-700);
  --bs-btn-hover-border-color: var(--c-danger-700);
  --bs-btn-active-bg: var(--c-danger-700);
  --bs-btn-active-border-color: var(--c-danger-700);
  --bs-btn-focus-shadow-rgb: var(--c-danger-rgb);
}

.btn-outline-warning {
  --bs-btn-color: var(--c-warning-700);
  --bs-btn-border-color: var(--c-warning-500);
  --bs-btn-hover-bg: var(--c-warning-500);
  --bs-btn-hover-color: var(--c-on-champion);
  --bs-btn-hover-border-color: var(--c-warning-500);
  --bs-btn-focus-shadow-rgb: var(--c-warning-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--c-neutral-600);
  --bs-btn-border-color: var(--c-border);
  --bs-btn-hover-bg: var(--c-neutral-100);
  --bs-btn-hover-color: var(--c-text);
  --bs-btn-hover-border-color: var(--c-neutral-300);
  --bs-btn-active-bg: var(--c-neutral-200);
  --bs-btn-active-color: var(--c-text);
}

.btn-link,
.link-primary { color: var(--c-primary-600) !important; }

.btn-link:hover,
.link-primary:hover { color: var(--c-primary-700) !important; }

/* Nav pills / tabs varsayılan aktif rengi */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--c-primary-600);
}

.form-check-input:checked {
  background-color: var(--c-primary-600);
  border-color: var(--c-primary-600);
}

.page-link { color: var(--c-primary-600); }

.pagination {
  --bs-pagination-active-bg: var(--c-primary-600);
  --bs-pagination-active-border-color: var(--c-primary-600);
  --bs-pagination-color: var(--c-primary-600);
  --bs-pagination-hover-color: var(--c-primary-700);
  --bs-pagination-focus-box-shadow: var(--focus-ring);
}

.progress { --bs-progress-bar-bg: var(--c-primary-600); }

/* .text-success beyaz zeminde 3.79:1 kaliyordu (AA sinir 4.5) */
.text-success{ color: var(--c-success-700) !important; }

.btn { transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base); }
.btn:active { transform: translateY(1px); }

/* ============================================================
   Form/input ve buton focus ring'leri için tutarlı görünüm
   ============================================================ */
:root {
  --focus-ring: 0 0 0 .2rem rgba(var(--c-primary-rgb), .28);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: var(--focus-ring);
  border-color: var(--c-primary-500);
}

/* Tap target minimum (mobil ergonomi)

   SIRA ONEMLI. Iki secici de tek sinif, yani AYNI OZGULLUKTE; sonra
   yazilan kazaniyor. Onceden .btn-sm once, .btn sonra yaziliydi ve
   sonuc olarak .btn-sm kurali hic islemiyordu: sitedeki BUTUN kucuk
   dugmeler mobilde 44px oluyor, icerigi kadar yer tutan bir dugme
   cevresinde fazladan bosluk varmis gibi gorunuyordu.

   .btn-sm sonda: 38px hala WCAG 2.5.8'in (24px) rahatca ustunde,
   kucuk dugme de kucuk kaliyor. */
@media (max-width: 575.98px) {
  .btn    { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}