/* ============================================================
   TSF Galeri — Tasarım Token'ları  (galeri.tsf.org.tr)
   Yön: 2B "Lacivert Saha" · renkler TSF logosundan
   Saf HTML/CSS/Vanilla JS için hazır. tokens.css olarak kullan.
   ============================================================ */

:root {
  /* ---- Renk: zemin & yüzey ---- */
  --c-bg:            #F4F6FA;  /* sayfa zemini */
  --c-surface:       #FFFFFF;  /* kart, panel */
  --c-surface-2:     #EAEFF6;  /* hafif vurgulu yüzey */
  --c-surface-3:     #F8FAFC;  /* tablo başlığı vb. */

  /* ---- Renk: lacivert / marka ---- */
  --c-navy:          #0E2742;  /* header, sidebar, başlık metni */
  --c-navy-900:      #0A1C30;  /* en koyu (üst şerit) */
  --c-blue:          #1E63B0;  /* ANA RENK (logo mavi kale) */
  --c-blue-600:      #1A5599;  /* hover/koyu */
  --c-blue-tint:     #E7EFF8;  /* mavi açık dolgu */
  --c-blue-soft:     #9CC0E6;  /* grafik/ikincil mavi */

  /* ---- Renk: metin ---- */
  --c-ink:           #12233A;  /* ana metin */
  --c-muted:         #5B6675;  /* ikincil metin */
  --c-faint:         #94A0B0;  /* placeholder, ipucu */
  --c-on-navy:       #FFFFFF;  /* lacivert üstü metin */
  --c-on-navy-dim:   #AFBFD2;  /* lacivert üstü ikincil */
  --c-on-navy-faint: #7E93AC;  /* lacivert üstü soluk */

  /* ---- Renk: çizgi ---- */
  --c-border:        #E2E8F1;
  --c-border-2:      #D8E0EC;  /* form/input kenarı */

  /* ---- Renk: vurgu & durum (kırmızı yalnız küçük vurguda) ---- */
  --c-red:           #CF0B2C;  /* logo kırmızı — video oynat, reddet, CANLI */
  --c-red-tint:      #FBE3E7;
  --c-red-ink:       #B00B26;
  --c-red-border:    #F2C9D1;
  --c-green:         #1B7A4F;  /* onayla / başarılı */
  --c-green-tint:    #E1F2EA;
  --c-amber:         #92651A;  /* beklemede */
  --c-amber-tint:    #FBF1DD;

  /* ---- Placeholder (gerçek görsel gelene kadar; WebP/lazy-load) ---- */
  --c-ph-a:          #D4DEEC;
  --c-ph-b:          #E4EAF2;
  --c-skeleton-1:    #E2E8F1;
  --c-skeleton-2:    #EDF1F7;

  /* ---- Tipografi ---- */
  --font-display: "Saira Condensed", system-ui, sans-serif; /* başlık/turnuva adı, UPPERCASE */
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;   /* gövde, UI */

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

  /* tip ölçeği */
  --fs-hero:    52px;  /* detay sayfa turnuva adı */
  --fs-h1:      42px;  /* sayfa başlığı */
  --fs-h2:      24px;  /* bölüm/panel başlığı */
  --fs-card:    19px;  /* kart turnuva adı */
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;
  --lh-tight:   1.05;
  --lh-base:    1.5;
  --tracking-display: 0.01em;
  --tracking-label:   0.05em; /* küçük UPPERCASE etiketler */

  /* ---- Köşe yarıçapı ---- */
  --r-xs:   5px;   /* badge, küçük etiket */
  --r-sm:   6px;   /* kart, sidebar öğesi */
  --r-md:   8px;   /* buton, input, medya tile */
  --r-lg:   10px;  /* dropdown menü, kuyruk satırı */
  --r-xl:   12px;  /* dashboard kart */
  --r-pill: 999px; /* chip, sayı rozeti, filtre tab */

  /* ---- Boşluk ölçeği (4 tabanlı) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- Gölge ---- */
  --shadow-card:  0 1px 2px rgba(14,39,66,.06);
  --shadow-hover: 0 16px 32px -18px rgba(14,39,66,.40);
  --shadow-pop:   0 18px 36px -18px rgba(14,39,66,.40); /* dropdown/menü */
  --shadow-lb:    0 30px 60px -20px rgba(0,0,0,.70);    /* lightbox medya */

  /* ---- Hareket (sade CSS geçişleri; ağır kütüphane yok) ---- */
  --ease:      cubic-bezier(.4,0,.2,1);
  --dur-fast:  .16s;
  --dur-base:  .22s;

  /* ---- Layout ---- */
  --container:  1280px; /* genel maks. içerik genişliği */
  --sidebar-w:  240px;  /* admin kenar çubuğu */
  --header-h:   62px;
}

/* ---- Responsive grid (media query GEREKTİRMEZ) ----
   auto-fill + minmax masaüstünde 4, tablette 2-3, mobilde 1-2 sütun verir.
   Anasayfa kart grid'i: */
/*  .grid { display:grid; gap:18px;
            grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); } */
/*  Detay mozaik: grid-auto-rows:168px; grid-auto-flow:dense; minmax(200px,1fr);
    tile'lar grid-column/grid-row span 1-2 ile mozaik oluşturur. */

/* ---- Skeleton shimmer (yükleme durumu) ---- */
@keyframes shimmer { 0% { background-position:-180% 0 } 100% { background-position:180% 0 } }
.skeleton {
  background: linear-gradient(90deg, var(--c-skeleton-1) 25%, var(--c-skeleton-2) 37%, var(--c-skeleton-1) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ---- Görsel placeholder (gerçek WebP gelene kadar) ---- */
.media-placeholder {
  background: repeating-linear-gradient(135deg, var(--c-ph-a) 0 11px, var(--c-ph-b) 11px 22px);
}