/* ============================================================================ DGN — Tasarım token'ları ---------------------------------------------------------------------------- Yön: "mühendislik kâğıdı". Aydınlık, ölçülü, teknik bir föy dili. Yüzeyler kâğıt; çizgiler kılcal; ölçü ve durum değerleri mono. Marka yeşili yalnız eylem (CTA) ve canlı durum işaretlerinde görünür — dekorasyonda değil. İkinci renk (petrol mavisi) bağlantı, ağ çizgisi ve teknik aksan taşır; sayfayı "tek renkli yeşil" olmaktan çıkaran şey odur. Tek kaynak. Bileşenler HAM DEĞER kullanmaz, yalnızca buradaki token'ları kullanır. Koyu tema bu sayede tek bir blokta değer değiştirerek çalışır — bileşen başına override yazılmaz. Kaskad katman sırası burada tanımlanır; sonraki dosyalar bu katmanlara yazar. Katman sırası specificity'yi ezdiği için `!important` gerekmez. ========================================================================== */ @layer tokens, base, layout, components, utilities; @layer tokens { :root { /* Tema seçiliyse tarayıcıya da bildirilir: kaydırma çubuğu, form kontrolleri ve otomatik doldurma renkleri buna göre çizilir. */ color-scheme: light dark; /* --- Marka ------------------------------------------------------------- --brand : dolgu/zemin olarak marka yeşili (logo yeşili, sabit) --brand-deep : METİN için yeşil. --brand beyaz üzerinde 2.3:1 verir ve WCAG AA'yı geçmez; metinde asla --brand kullanma. --on-brand : yeşil dolgu ÜZERİNDEKİ metin rengi */ --brand: #77bc1f; --brand-hover: #6aaa19; --brand-deep: #457a0e; /* 5.19:1 beyaz, 4.75:1 kâğıt üzerinde */ --on-brand: #10160f; /* --- Veri rengi -------------------------------------------------------- Petrol mavisi. Bağlantı, ağ rotası, teknik aksan. Yeşille aynı değerde değil (koyu + doygunluğu düşük), bu yüzden yan yana çamurlaşmaz. */ --data: #17494f; /* 7.9:1 beyaz üzerinde */ --data-soft: #e3edee; /* --- Yüzeyler ---------------------------------------------------------- --paper : gövde zemini, kâğıt --surface : kart/tablo/başlık zemini --surface-2 : gömük hücre, tablo başlığı --surface-deep: ters bant (altbilgi, koyu şerit) — HER İKİ TEMADA koyu */ --paper: #f4f5f2; --surface: #ffffff; --surface-2: #eceee9; --surface-sunken: #e7e9e3; /* Tablo şeridi: --surface ile arasındaki fark göz satırı takip etsin diye yeter, ama hücreyi ayrı bir kutu gibi göstermeyecek kadar küçük. Vurgu (hover) --surface-2 olduğundan üç kademe ayrışır: zemin < şerit < vurgu. */ --table-stripe: #f7f8f5; --surface-deep: #131a18; --on-deep: #eef1ee; --on-deep-2: #a9b3af; /* --- Çizgiler ---------------------------------------------------------- --rule : kılcal ayırıcı (kontrast eşiği aranmaz) --rule-strong: form/kontrol kenarı — WCAG 1.4.11 gereği 3:1 sağlar */ --rule: #dde1da; --rule-strong: #828b86; /* 3.21:1 kâğıt üzerinde (WCAG 1.4.11) */ /* --- Metin ------------------------------------------------------------ */ --ink: #131a18; --ink-2: #48534f; /* 8.2:1 kâğıt üzerinde */ --ink-3: #666f6b; /* 4.85:1 kâğıt üzerinde */ /* --- Sinyaller -------------------------------------------------------- Saha göstergelerinden: yeşil = hazır/stokta, amber = sorunuz */ --ok: var(--brand-deep); --signal: #9c6205; /* amber metin, 4.6:1 beyaz üzerinde */ --signal-fill: #efa92e; /* amber, dolgu/nokta olarak */ /* --- Altın ------------------------------------------------------------ Kıdem rozetinin rengi. Sinyal amberinden ayrı bir token: amber "dikkat" demek, altın ise kazanılmış bir niteliği işaretler. İkisi karışırsa rozet bir uyarı gibi okunur. */ --gold: #d9a520; /* DOLGU olarak; beyaz üzerinde metin rengi olarak kullanma (2.25:1) */ --on-gold: #1a1408; /* altın dolgu üzerinde metin, 8.15:1 */ /* --- Altbilgi ---------------------------------------------------------- Açık tema → kurumsal yeşil zemin + KOYU metin (7.87:1) Koyu tema → koyu zemin + açık metin (15.9:1) Yeşil üzerinde beyaz 2,3:1 veriyor ve küçük puntoda okunmuyordu. */ --footer-bg: #77bc1f; --on-footer: #10160f; --footer-rule: rgb(16 22 15 / 0.24); --danger: #b3261e; /* --- Tipografi --------------------------------------------------------- Archivo : ilan/tabela grotesk'i. Başlıklarda hafif genişletilmiş (font-stretch) kullanılır — teknik levha hissi buradan gelir. Plex Sans: gövde. Türkçe diakritikleri sağlam, hümanist detayları Archivo'nun sertliğini dengeler. JetBrains Mono: makine değeri. Etiket, kod, fiyat, peer adı. */ --font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Etiket/veri yüzü. Eskiden JetBrains Mono idi: terminal dokusu kurumsal dille çelişiyordu. Rolü Archivo devraldı — başlık ailesinin kendisi, yani yeni bir yazı tipi indirilmiyor. Ayrımı büyük harf, harf aralığı ve küçük punto veriyor; sayı hizası tabular rakamlarla korunuyor. */ --font-label: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; /* Gerçek monospace yalnız /
 için; sistem yüzü kullanılır. */
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* 1.25 modüler ölçek; üst basamaklar akışkan */
    --step--2: 0.694rem;
    --step--1: 0.833rem;
    --step-0:  1rem;
    --step-1:  1.125rem;
    --step-2:  clamp(1.383rem, 1.28rem + 0.51vw, 1.563rem);
    --step-3:  clamp(1.66rem, 1.47rem + 0.95vw, 1.953rem);
    --step-4:  clamp(1.99rem, 1.62rem + 1.85vw, 2.6rem);
    --step-5:  clamp(2.39rem, 1.79rem + 3vw, 3.4rem);
    /* Yalnız hero başlığı. Eğim bilerek dik: 1024-1440 arasında kolon
       daralırken punto da inmezse "Çeyrek asırlık tecrübe." üç satıra
       kırılıyor. Üst sınır 5rem, alt sınır 2.5rem. */
    --step-6:  clamp(2.5rem, 1.55rem + 3.8vw, 5rem);

    --leading-tight: 1.04;
    --leading-snug:  1.3;
    --leading-body:  1.62;

    --tracking-label: 0.1em;    /* mono etiket/eyebrow */
    --tracking-display: -0.02em;
    --width-display: 105%;      /* başlıklarda hafif genişletme */

    /* --- Boşluk (0.25rem tabanı) ------------------------------------------ */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* --- Ölçüler ----------------------------------------------------------
       Breakpoint'ler yalnız 3 nokta: 40em / 64em / 80em.
       (Custom property'ler media query'de çalışmaz; değerler orada elle
       tekrarlanır — değiştirirsen 03-layout.css ve 04-components.css'e bak.) */
    --container:      76rem;
    --container-wide: 84rem;
    --container-text: 40rem;   /* okuma genişliği */
    --header-h:       6.5rem;  /* açılıştaki yükseklik; kaydırınca daralır */
    /* Alt sayfa fotoğraf bandı. Yükseklik ve erimenin başladığı oran tek
       yerde: maske de, başlığın oturduğu nokta da bu ikisinden türer. */
    --band-h:         clamp(9rem, 17vw, 14rem);
    --band-fade:      0.58;    /* bu orandan sonra fotoğraf kâğıda erir */

    /* Köşeler mühendislik çizimi gibi keskin tutulur; yuvarlaklık bilgi
       taşımaz. 2/4/6 px'in ötesine çıkma. */
    --radius-s:  2px;
    --radius-m:  4px;
    --radius-l:  6px;

    /* Gölge kâğıt kaldırmak içindir, parlaklık için değil */
    --shadow-s: 0 1px 2px rgb(19 26 24 / 0.05);
    --shadow-m: 0 1px 2px rgb(19 26 24 / 0.05), 0 6px 16px rgb(19 26 24 / 0.07);
    --shadow-l: 0 2px 6px rgb(19 26 24 / 0.07), 0 20px 44px rgb(19 26 24 / 0.12);

    --z-sticky: 100;
    --z-nav:    200;
    --z-banner: 300;
    --z-dialog: 400;

    --focus-ring: 2px solid var(--data);
    --focus-offset: 2px;

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  /* --- Dile göre başlık ölçeği -------------------------------------------
     İngilizce slogan Türkçesinden belirgin uzun ("A quarter century of
     experience." vs "Çeyrek asırlık tecrübe."). Aynı puntoda üç satıra
     kırılıyordu; ölçüm 1440px kolonda eşiğin 74px olduğunu gösterdi, bu
     yüzden İngilizce bir kademe iner. Rusça Türkçeyle aynı uzunlukta,
     dokunulmadı.                                                            */
  :root:lang(en) {
    --step-6: clamp(2.15rem, 1.32rem + 3.23vw, 4.25rem);
  }

  /* --- Koyu tema ---------------------------------------------------------
     Yalnız token değerleri değişir. Bir bileşeni koyu temada düzeltmek için
     buraya değer eklenir; `[data-theme="dark"] .bilesen {}` yazılmaz.       */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --brand-hover:    #8bd12c;
    --brand-deep:     #9bd93e;  /* koyu zeminde okunur yeşil */
    --on-brand:       #10160f;

    --data:           #8cbcc4;  /* koyu zeminde okunur petrol */
    --data-soft:      #16262a;

    --paper:          #0f1513;
    --surface:        #161d1a;
    --surface-2:      #1e2724;
    --surface-sunken: #0a100e;
    /* Karanlık temada şerit AÇILMAZ, koyulaşır: açık yöne gidince küçük
       puntolu hücre etiketi (--ink-3) 4.43:1'e düşüp AA eşiğini kaybediyordu.
       Koyu yönde 4.95:1'e çıkıyor ve zeminden ayrım açık temayla aynı adımda
       kalıyor (1.06 / 1.07). İki temada da şerit zeminden UZAKLAŞIR. */
    --table-stripe:   #111715;
    --surface-deep:   #0a100e;
    --on-deep:        #eef1ee;
    --on-deep-2:      #a9b3af;

    --rule:           #28322e;
    --rule-strong:    #5f6c66;  /* 3.36:1 koyu kâğıt üzerinde (WCAG 1.4.11) */

    --ink:            #e9eeeb;
    --ink-2:          #a7b2ad;
    --ink-3:          #7d8884;

    --signal:         #efa92e;
    --gold:           #e8b73c;  /* koyu zeminde okunur altın */

    /* İletişim bandındaki üçgen koyu temada beyaz. Açık temada bu token
       tanımlı DEĞİL; bileşen o zaman üstündeki bölümün zeminine düşer
       (bkz. 04-components.css, --mark). */
    --ctaband-mark:   #ffffff;

    --footer-bg:      #0a100e;  /* koyu zemin */
    --on-footer:      #eef1ee;  /* 15.9:1 */
    --footer-rule:    rgb(255 255 255 / 0.16);
    --danger:         #ef6a5f;

    --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-m: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.35);
    --shadow-l: 0 2px 6px rgb(0 0 0 / 0.5), 0 20px 44px rgb(0 0 0 / 0.45);

    --focus-ring: 2px solid var(--brand-deep);
  }
}