/* ================================================================
   TASARIM TOKEN'LARI — TEK KAYNAK
   ================================================================
   Site temasi, yonetim paneli, kurulum sihirbazi, lisans kapisi,
   bakim ve giris ekranlari paleti BURADAN alir (bkz.
   design_tokens_css()). Baska hicbir dosya kendi renk/font/olcu
   degeri tanimlamaz; yalnizca var(--...) ile bu token'lari kullanir.

   Katmanlar:
     1. Fontlar
     2. Ham palet      — hex degerler YALNIZCA burada
     3. Olcek          — spacing, radius, kabuk
     4. Anlamsal       — --bg, --ink, --accent ... (bilesenler bunlari kullanir)
     5. Fotograf ustu  — --media-* (hero gorseli uzerindeki ogeler)
     6. Mod secimi     — light-dark() hangi tarafi kullanacak
   ================================================================ */

/* 1. Fontlar ---------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Jura';
  src: url('/assets/fonts/Jura-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Jura', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 2. Ham palet ------------------------------------------------
     Saydam tonlar bu ucluler uzerinden turetilir:
     rgb(var(--navy-950-rgb) / .55) */
  --navy-950-rgb: 12 22 40;
  --navy-900-rgb: 20 33 61;
  --navy-800-rgb: 31 58 99;
  --white-rgb: 255 255 255;
  --slate-50-rgb: 247 248 250;
  --gold-300-rgb: 217 190 134;

  --navy-950: #0C1628;
  --navy-900: #14213D;
  --navy-850: #162B4A;
  --navy-800: #1F3A63;
  --navy-700: #152238;
  --navy-600: #1B2B45;
  --slate-600: #5A6478;
  --slate-300: #9AA8BC;
  --slate-100: #EEF1F5;
  --slate-50: #F7F8FA;
  --white: #FFFFFF;
  --gold-700: #8C6D32;   /* acik zeminde okunur altin (kontrast ~4.9) */
  --gold-300: #D9BE86;   /* koyu zeminde / fotograf ustunde altin */
  --green-700: #2F7A4D;
  --amber-700: #B27A1A;
  --red-700: #B23A34;
  --red-900: #7A2723;
  --blue-700: #3E6FA8;
  --serp-blue: #1A4FB4;  /* SEO onizlemesi: arama sonucu gorunumu */
  --serp-green: #3A7A3A;

  /* 3. Olcek ---------------------------------------------------- */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 18px;
  --s-4: 28px;
  --s-5: 44px;
  --s-6: 64px;
  --s-7: 96px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shell-max: 1200px;
  /* Tam ekran duzende kenar boslugu viewport ile oranlidir:
     sabit 28px genis ekranlarda icerigi kenara yapistiriyordu.
     clamp tabani korur, ust siniri asiri buyumeyi engeller. */
  --shell-gutter: clamp(20px, 4.5vw, 72px);
  --header-h: 72px;
  /* Sabit ust cubugun kapladigi toplam yukseklik (cubuk + dikey dolgusu).
     Hero'suz sayfalarda icerik bu kadar asagidan baslar. */
  --page-offset: calc(var(--header-h) + 2 * var(--s-2));
  --blur-glass: blur(12px);

  /* 4. Anlamsal ------------------------------------------------
     Her token iki modu TEK satirda tasir: light-dark(acik, koyu).
     Hangi modun gecerli oldugunu yalnizca color-scheme belirler
     (bkz. en alttaki mod secimi); ayri koyu blok yoktur. */
  --bg: light-dark(var(--slate-50), var(--navy-950));
  --surface-1: light-dark(var(--white), var(--navy-700));
  --surface-2: light-dark(var(--slate-100), var(--navy-600));
  --line: light-dark(rgb(var(--navy-900-rgb) / .10), rgb(var(--slate-50-rgb) / .12));
  --line-strong: light-dark(rgb(var(--navy-900-rgb) / .18), rgb(var(--slate-50-rgb) / .20));
  --ink: light-dark(var(--navy-900), var(--slate-50));
  --ink-muted: light-dark(var(--slate-600), var(--slate-300));
  --accent: light-dark(var(--navy-800), var(--gold-300));          /* birincil buton zemini */
  --accent-strong: light-dark(var(--navy-850), var(--gold-300));   /* birincil buton hover */
  --accent-ink: light-dark(var(--white), var(--navy-900));         /* birincil buton yazisi */
  --accent-2: light-dark(var(--gold-700), var(--gold-300));        /* vurgu yazisi, ikon, gosterge */
  --tint: light-dark(rgb(var(--navy-900-rgb) / .05), rgb(var(--slate-50-rgb) / .06));
  --ok: var(--green-700);
  --ok-bg: rgb(47 122 77 / .12);
  --warn: var(--amber-700);
  --warn-bg: rgb(178 122 26 / .12);
  --danger: var(--red-700);
  --danger-bg: rgb(178 58 52 / .12);
  --danger-ink: light-dark(var(--red-900), var(--slate-50));
  --info: var(--blue-700);
  --info-bg: rgb(62 111 168 / .12);
  --shadow-1: 0 2px 8px light-dark(rgb(var(--navy-900-rgb) / .06), rgb(0 0 0 / .30));
  --shadow-pop: 0 12px 32px light-dark(rgb(var(--navy-900-rgb) / .16), rgb(0 0 0 / .45));
  --shadow-float: 0 16px 44px light-dark(rgb(var(--navy-900-rgb) / .20), rgb(0 0 0 / .50));

  /* 5. Fotograf ustu (hero ve uzerinde yuzen ust cubuk) ---------
     Gorsel her zaman koyu karartmayla gelir; bu yuzden sayfa
     temasindan bagimsiz, acik yazi + acik altin kullanilir. */
  --media-bg: var(--navy-950);       /* gorsel yuklenene kadar zemin */
  --media-ink: var(--slate-50);
  --media-ink-soft: rgb(var(--slate-50-rgb) / .88);
  --media-ink-muted: rgb(var(--slate-50-rgb) / .70);
  --media-accent: var(--gold-300);
  --media-accent-ink: var(--navy-900);
  /* Cam: ust cubuk kaydirmada acik icerik uzerinde de yuzer; %55'te
     acik zeminde gri-bulanik kaliyordu. */
  --media-glass: rgb(var(--navy-950-rgb) / .72);
  --media-glass-hover: rgb(var(--navy-800-rgb) / .92);
  --media-glass-strong: rgb(var(--navy-950-rgb) / .80);
  --glass-bg: rgb(var(--white-rgb) / .12);
  --glass-bg-subtle: rgb(var(--white-rgb) / .08);
  --glass-bg-hover: rgb(var(--white-rgb) / .20);
  --glass-line: rgb(var(--white-rgb) / .25);
  --glass-line-hover: rgb(var(--white-rgb) / .45);
  --media-text-shadow: 0 1px 12px rgb(var(--navy-950-rgb) / .70);
  --media-scrim:
    linear-gradient(to top, rgb(var(--navy-950-rgb) / .92) 0%, rgb(var(--navy-950-rgb) / .55) 45%, rgb(var(--navy-950-rgb) / .15) 100%),
    linear-gradient(to right, rgb(var(--navy-950-rgb) / .85) 0%, rgb(var(--navy-950-rgb) / .35) 55%, transparent 100%);
  --media-scrim-rtl:
    linear-gradient(to top, rgb(var(--navy-950-rgb) / .92) 0%, rgb(var(--navy-950-rgb) / .55) 45%, rgb(var(--navy-950-rgb) / .15) 100%),
    linear-gradient(to left, rgb(var(--navy-950-rgb) / .85) 0%, rgb(var(--navy-950-rgb) / .35) 55%, transparent 100%);
  --shadow-cta: 0 8px 28px rgb(var(--gold-300-rgb) / .35);
  --shadow-cta-hover: 0 12px 34px rgb(var(--gold-300-rgb) / .45);
}
@media (max-width: 768px) {
  :root { --shell-gutter: var(--s-3); }
}

/* 6. Mod secimi -------------------------------------------------
   Varsayilan: isletim sistemi tercihi (kurulum, lisans kapisi,
   bakim, giris). Site layout'u data-theme="light" ile acik temaya
   sabittir; panelin tema dugmesi light/dark arasinda gecis yapar. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }