/* =====================================================================
   TURKODRA — Design Tokens  ·  v1.0
   Kurumsal tasarım sistemi · TURKODRA Teknoloji ve Yazılım A.Ş.
   ---------------------------------------------------------------------
   Tek doğruluk kaynağı (single source of truth). Light varsayılan;
   [data-theme="dark"] override eder. Tüm bileşenler ham hex yerine
   yalnızca bu değişkenleri kullanır — böylece marka tek yerden döner.
   Palet logodan türetildi: navy #011233 + teal #09A19A.
   ===================================================================== */

/* Yazı tipleri kendi sunucumuzdan (fonts/). Önceden Google Fonts @import'u
   vardı; ziyaretçi IP'si Google'a gidiyordu ve sitedeki tek üçüncü taraf oydu.
   Yalnız latin + latin-ext alt kümeleri (Türkçe ğ/ş/ı/İ latin-ext'te).
   Inter ve Space Grotesk değişken font: tek dosya tüm ağırlıkları taşır. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Tarayıcıya hangi şemada olduğumuzu söyler: kaydırma çubuğu, form
     denetimleri ve mobil aşırı-kaydırma şeridi buna göre boyanır. Bildirmezsek
     koyu temada tarayıcı sayfayı hâlâ "açık" sanıp beyaz çubuk çiziyor.
     (Not: bu bildirim tokens.css ayrıştırıldığında etkinleşir, yani CSS
     öncesi ilk tuval boyamasını değiştirmez — o ayrı bir iş.) */
  color-scheme: light;

  /* ---- Brand scale · NAVY (kurumsal derinlik) --------------------- */
  --navy-950: #010A1E;
  --navy-900: #011233;   /* MARKA lacivert — wordmark */
  --navy-800: #04204A;
  --navy-700: #0A2F63;
  --navy-600: #13407D;
  --navy-500: #1D5296;
  --navy-400: #356CAF;
  --navy-300: #5E8AC5;
  --navy-200: #93AFDB;
  --navy-100: #C7D6EE;
  --navy-50:  #EAF1FA;

  /* ---- Brand scale · TEAL (kıvılcım / aksan) --------------------- */
  --teal-900: #04413D;
  --teal-800: #065F59;
  --teal-700: #077A73;
  --teal-600: #08928A;
  --teal-500: #09A19A;   /* MARKA teal — birincil aksan */
  --teal-400: #2FB8B0;
  --teal-300: #5FCEC7;
  --teal-200: #98E0DB;
  --teal-100: #CEF1EF;
  --teal-50:  #E9FAF8;

  --white: #ffffff;

  /* ---- Fonksiyonel (marka-bağımsız; CB-safe) --------------------- */
  /* Rozet mürekkepleri ÖLÇÜLDÜ ve koyulaştırıldı. Eski değerlerle kendi soft
     zeminlerinin üstünde: CANLI 3,36:1 · HEDEF 2,67:1 — ikisi de 4,5:1'in
     altında. Üstelik eksen dışı nötr rozet (--text-3 üzeri --surface-2) 6,60:1
     veriyordu, yani durum rozetleri sistemin en okunmaz parçasıydı. */
  --success: #0F6E50;  --success-soft: #E1F3EC;   /* 5,42:1 */
  --warning: #8A5A00;  --warning-soft: #FAEFD6;   /* 5,19:1 — amber kimliği korunuyor */
  /* Pilot: kanıtlanmışlık ekseninde hedef(amber) ile canlı(yeşil) ARASI.
     Lacivert ailesinden, çünkü teal marka birincil rengi — durum rozetinde
     kullanılırsa "marka mı durum mu" ayrımı bulanıklaşır. 6,84:1. */
  --pilot:   #1D5296;  --pilot-soft:   #EAF1FA;
  --danger:  #D23A4E;  --danger-soft:  #FBE3E6;
  --info:    var(--teal-500); --info-soft: var(--teal-50);

  /* ---- Semantik · LIGHT THEME ------------------------------------ */
  --bg:            #F4F7FA;
  --surface:       #FFFFFF;
  --surface-2:     #EDF1F7;
  --surface-3:     #E2E9F2;
  --border:        #DBE3ED;
  --border-strong: #C2CDDB;
  --text:          #0B1B33;
  --text-2:        #44566F;
  /* --text-3 12px rollerinde kullanılıyor (ürün sektör satırı, iletişim ve
     künye etiketleri, pasif dil düğmesi). #6C7D95 beyazda 4,20:1 — küçük metin
     eşiği 4,5:1'in altında. #5A6B82: beyaz 5,44 · --bg 5,06 · --surface-2 4,80
     · --primary-soft 5,05 — dördü de geçiyor.
     NOT: site.css'teki `body.has-wave-field .eyebrow → --text-2` override'ı
     YERİNDE KALMALI; canlı alanın üstünde bu değer de yetmiyor (ölçülen 2,53:1). */
  --text-3:        #5A6B82;
  --text-on-accent:#FFFFFF;
  --text-on-brand: #EAF6F5;

  /* --primary MÜREKKEP rolü: hem beyaz üstünde metin (ürün kartı bağlantıları,
     kültür etiketleri) hem de beyaz metnin altındaki dolgu (CTA). İkisinde de
     eşik 4,5:1 — teal-500 ölçüldü, beyazla 3,19:1 veriyordu, yani %29 altında.
     teal-700 (#077A73) her iki yönde 5,20:1. Koyu tema zaten 6,61:1'le geçiyordu,
     ona dokunulmadı.
     --accent DEKORATİF rol: büyük metin ve süs (hero vurgusu, kıvılcım, madde
     imi, hero alıntısının rayı). Orada eşik 3:1, ama teal-500 dalga alanının
     üstündeki gerçek zeminde (#F0F5F8) 2,91:1 — onun da altında. teal-600
     (#08928A) o zeminde 3,49:1, beyazda 3,83:1; marka canlılığı korunuyor. */
  --primary:        var(--teal-700);   /* birincil CTA + bağlantı mürekkebi */
  --primary-hover:  var(--teal-800);
  --primary-active: var(--teal-900);
  --primary-soft:   var(--teal-50);
  --brand:          var(--navy-900);   /* koyu marka dolgusu */
  --brand-hover:    var(--navy-800);
  --accent:         var(--teal-600);   /* dekoratif — bkz. yukarıdaki not */
  /* Odak halkası 3:1 ister (WCAG 1.4.11). teal-400 beyazda 2,44 idi. teal-600:
     beyaz 3,83 · --bg 3,56 · --surface-2 3,38 · lacivert panel 4,83. teal-700
     açık zeminde daha güçlü ama lacivertte 3,56'ya düşüyor; 600 her yerde geçiyor. */
  --focus:          var(--teal-600);

  /* ---- Gradyan kütüphanesi (marka-içi) --------------------------- */
  --grad-brand:       linear-gradient(135deg, var(--navy-900) 0%, var(--teal-600) 100%);
  --grad-brand-vivid: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 42%, var(--teal-500) 100%);
  --grad-navy:        linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
  --grad-teal:        linear-gradient(135deg, var(--teal-600) 0%, var(--teal-400) 100%);
  --grad-teal-soft:   linear-gradient(135deg, var(--teal-100) 0%, var(--teal-50) 100%);
  --grad-aurora:      linear-gradient(120deg, var(--navy-900) 0%, var(--teal-700) 55%, var(--teal-300) 100%);
  --grad-deep-sea:    linear-gradient(135deg, #011233 0%, #077A73 100%);
  --grad-signal:      linear-gradient(90deg, var(--teal-500) 0%, var(--teal-300) 100%);
  --grad-spark:       radial-gradient(circle at 30% 22%, var(--teal-400) 0%, var(--navy-800) 46%, var(--navy-950) 100%);
  --grad-orbit:       conic-gradient(from 210deg at 50% 50%, var(--teal-500), var(--navy-800), var(--teal-400), var(--teal-500));
  --grad-mesh:
      radial-gradient(at 12% 18%, rgba(9,161,154,.55) 0, transparent 45%),
      radial-gradient(at 88% 12%, rgba(29,82,150,.48) 0, transparent 42%),
      radial-gradient(at 72% 92%, rgba(9,161,154,.32) 0, transparent 48%),
      var(--navy-950);
  --grad-text:        linear-gradient(100deg, var(--navy-800) 0%, var(--teal-500) 100%);
  --grad-fade-navy:   linear-gradient(180deg, transparent 0%, var(--navy-950) 100%);
  --grad-glass:       linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));

  /* ---- Tipografi ------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --fs-display: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1: clamp(2rem, 3.5vw, 3rem);
  --fs-h2: 1.75rem;
  --fs-h3: 1.3125rem;
  --fs-h4: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-wide: 0.14em;

  /* ---- Spacing (4px taban) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ---- Radius ---------------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* ---- Elevation (soğuk navy-tint gölge) ------------------------- */
  --sh-xs: 0 1px 2px rgba(1,18,51,.06);
  --sh-sm: 0 1px 3px rgba(1,18,51,.08), 0 1px 2px rgba(1,18,51,.06);
  --sh-md: 0 4px 12px rgba(1,18,51,.10), 0 2px 4px rgba(1,18,51,.06);
  --sh-lg: 0 12px 28px rgba(1,18,51,.14), 0 4px 8px rgba(1,18,51,.06);
  --sh-xl: 0 24px 56px rgba(1,18,51,.18);
  --sh-glow: 0 0 0 1px rgba(9,161,154,.55), 0 6px 18px rgba(9,161,154,.42), 0 14px 40px rgba(9,161,154,.32);

  /* ---- Motion ---------------------------------------------------- */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- Layout ---------------------------------------------------- */
  --maxw: 1200px;
  /* px SABİT bırakılırsa kırılgan: başlığın kutusu px, içeriği (.btn) rem.
     Kök yazı boyutu büyüdüğünde (Firefox "yalnız metni yakınlaştır", tarayıcı
     yazı boyutu ayarı, sistem metin ölçeği) içerik 68px'i aşar; .site-header__inner
     `align-items:center` olduğu ve başlıkta `overflow` bulunmadığı için fazlalık
     ALTA VE ÜSTE EŞİT dağılır — başlık y=0'a yapışık olduğundan üst yarısı
     doğrudan ekranın dışına taşar. Eşik: .btn yüksekliği 1.4R+26 = 68 → R = 30px.
     max() ile taban 16px'te birebir 68px kalır (regresyon yok), büyüdüğünde
     başlık da içerikle birlikte büyür. Tek yerden düzeltmek şart: aynı değişken
     .mobile-nav inset'inde, scroll-padding-top'ta ve hero min-height'ında da var. */
  /* BASLIK OLCEGI — tek dugme.
     Bar bir SISTEM, bagimsiz degerler yigini degil: marka logosu, dil hapi,
     iki ikon dugmesi ve CTA'nin HEPSI ayni yukseklikte (taban 38px) ve bar o
     yuksekligin ustune 15+15px hava koyuyor (68px). Tek bir ogeyi buyutmek bu
     hizayi sessizce bozar — bu yuzden buyutme TEK KATSAYIDAN geciyor ve
     asagidaki tum baslik olculeri ondan turetiliyor. 1 = eski hal.
     Geri bildirim (Emre, 2026-08-25): "buyuk markalarin sitelerinde bu alan bir
     tik daha buyuk gozukuyor, metinler ve logo %40 buyutup deneyelim." */
  --header-scale: 1.4;
  /* Bardaki her denetimin ortak yuksekligi (marka logosu dahil). Taban 38px. */
  --header-ctl: calc(38px * var(--header-scale));
  --header-h: calc(max(68px, 4.25rem) * var(--header-scale));
  --z-header: 100; --z-modal: 1000; --z-toast: 1100;
}

/* ===================================================================
   DARK THEME — deep-tech / gece; yüksek kontrast
   =================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #010A1E;
  --surface:       #061A38;
  --surface-2:     #0B2551;
  --surface-3:     #123163;
  --border:        #183566;
  --border-strong: #274A7D;
  --text:          #E9EFF8;
  --text-2:        #A9BAD2;
  --text-3:        #8296B2;   /* --surface-2'de 4,98 · kartta 5,74 · --bg'de 6,54 */
  --text-on-accent:#03252A;
  --text-on-brand: #EAF6F5;

  --primary:        var(--teal-400);
  --primary-hover:  var(--teal-300);
  --primary-active: var(--teal-200);
  --primary-soft:   rgba(9,161,154,.16);
  --brand:          var(--teal-500);
  --brand-hover:    var(--teal-400);
  --accent:         var(--teal-400);
  --focus:          var(--teal-300);

  /* Koyu temada mürekkep de dönmeli, yoksa açık tema için koyulaştırılan
     değerler burada okunmaz olur. Ölçüldü: 7,90:1 ve 7,31:1.
     KASITLI: aşağıdaki -soft rgba'lar ESKİ taban hex'lerden türetilmiş ve
     öyle bırakılıyor — hap zemininin koyu kalması bu kontrastların şartı.
     "Tutarlı olsun" diye yeni hex'lerle güncellenirse zemin açılır ve
     hesaplanan değerler düşer. */
  --success: #4ADE9E;
  --warning: #E8B94A;
  --pilot:   #93AFDB;   /* 6,72:1 */
  --pilot-soft: rgba(29,82,150,.22);
  --success-soft: rgba(23,147,107,.20);
  --warning-soft: rgba(192,138,22,.20);
  --danger-soft:  rgba(210,58,78,.22);
  --info-soft:    rgba(9,161,154,.18);

  --sh-xs: 0 1px 2px rgba(0,0,0,.5);
  --sh-sm: 0 1px 3px rgba(0,0,0,.55);
  --sh-md: 0 4px 12px rgba(0,0,0,.55);
  --sh-lg: 0 12px 28px rgba(0,0,0,.6);
  --sh-xl: 0 24px 56px rgba(0,0,0,.65);
  --sh-glow: 0 0 0 1px rgba(47,184,176,.4), 0 10px 30px rgba(9,161,154,.4);
}

/* ===================================================================
   Base reset + shared primitives
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top: iç bağlantılar ve snap noktaları sabit başlığın ALTINA otursun.
   Bölümlerdeki scroll-margin-top ile birlikte kullanılmaz — ikisi toplanıp çift kayma yapar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
::selection { background: var(--teal-300); color: var(--navy-900); }
/* Lucide-tarzı satır-içi ikonlar yuvarlak uç/köşe ister — yoksa 'i/!' noktaları (h.01) kaybolur, üçgen tepesi kırpılır */
svg { stroke-linecap: round; stroke-linejoin: round; }

.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

/* 4-köşeli marka kıvılcımı (logodan) — bileşen atomu */
.spark {
  display: inline-block; width: 12px; height: 12px; flex: none;
  background: var(--accent);   /* dekoratif rol — bkz. --primary/--accent ayrımı */
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Odak halkası — erişilebilirlik */
:where(button,[role="button"],a,input,select,textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  /* transition-delay de sıfırlanmalı: süre sıfırlanıp gecikme kalırsa kademeli giriş
     "yavaş" değil "geç" olur — hero alıntısı 450ms görünmez kalıp aniden belirir. */
  * {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-snap-type: none !important; }
}