/* Fiyat Bot — token seti. Kontrast: 60 çift, iki mod, tamamı WCAG 2.1'i * geçiyor (ölçüm 12 Ağustos 2026). * ========================================================================== * Her renk, font, boşluk ve eğri burada isimlendirilir; style.css hiçbir ham * değer yazmaz. * * Bu dosya static/ altında duruyor çünkü uygulama yalnızca burayı servis * ediyor. Kök dizine ikinci bir kopya konmadı — iki kopya kaçınılmaz olarak * birbirinden ayrışır ve hangisinin doğru olduğu belirsizleşir. * * TEMA ÜÇ DURUMLU: * data-theme yok → sistemi izle (varsayılan) * data-theme="light" → her zaman açık * data-theme="dark" → her zaman koyu * Koyu blok kasten iki kez yazılı: biri sistem tercihi için, biri açık seçim * için. CSS'te bir bildirim listesini iki seçiciye paylaştırmanın yolu yok ve * tekrarı gizlemeye çalışmak (ikinci bir dolaylama katmanı) okunurluğu * tekrarın maliyetinden fazla bozuyor. * ========================================================================= */ :root { /* Tarayıcıya hangi bantta olduğumuzu SÖYLE. Bu satır olmadan kaydırma çubukları, sayı girdisinin artır/azalt okları ve varsayılan onay kutuları koyu temada bile AÇIK çiziliyor — bunlar CSS'in boyamadığı, yalnızca tarayıcının bildiği yüzeyler. */ color-scheme: light; /* -- Kağıt ve mürekkep — serin pastel bant (Tally birebir) -------------- */ --color-paper-0: oklch(98.4% 0.005 258); /* sayfa zemini */ --color-paper-1: oklch(96.2% 0.010 258); /* kart / panel */ --color-paper-2: oklch(93.0% 0.015 258); /* yükseltilmiş, hover */ --color-paper-3: oklch(89.0% 0.020 258); /* ikinci hover basamağı */ --color-ink-0: oklch(18.0% 0.030 258); /* ana metin · 17.97:1 */ --color-ink-1: oklch(35.0% 0.025 258); /* gövde · 10.80:1 */ /* ink-2 bir basamak koyulaştı (52 → 50). Sebep ölçüm: paper-0 üstünde zaten geçiyordu ama PAPER-2 üstünde 4.48:1'de kalıyordu — tablo başlığı ve .pill oraya oturuyor ve ikisi de 10px. Yeni değer paper-0'da 5.73, paper-1'de 5.37, paper-2'de 4.88. */ --color-ink-2: oklch(50.0% 0.018 258); /* ikincil, placeholder */ /* ink-3 METİN TAŞIMAZ: ölçüldü, 3.70:1 — büyük metin eşiğini geçer, gövde eşiğini geçmez. Yalnızca devre dışı öğe ve dekoratif çizgi. */ --color-ink-3: oklch(62.0% 0.014 258); /* -- Aksan: indigo — etkileşim ----------------------------------------- Aksan Tally'nin 54'ünden 52'ye indi. Sebep yine ölçüm: aksan yalnızca dolgu değil, KENDİ tint'inin üstünde METİN olarak da kullanılıyor (seçili rail öğesi, .stat--answer değeri) ve orada 4.48:1'de kalıyordu. 52'de 4.89:1. Diğer bütün kullanım yerleri bu değişimden kazançlı çıkıyor: beyaz-üstü-dolgu 5.14 → 5.61, paper-0 üstünde bağlantı 5.14 → 5.61. --chart-line BU DEĞİŞİMİ İZLEMEZ (aşağıdaki nota bak). */ --color-accent: oklch(52.0% 0.220 268); --color-accent-soft: oklch(72.0% 0.140 268); --color-accent-tint: oklch(94.0% 0.040 268); --color-on-accent: oklch(98.4% 0.005 258); --color-focus: oklch(46.0% 0.220 268); /* -- Durum tonları ----------------------------------------------------- Tally'nin token setinde kırmızı YOK (yalnız amber + yeşil) — bu uygulamanın "stokta yok / hata" durumu var, o yüzden --color-bad yeni bir token olarak eklendi ve ayrıca ölçüldü. good ve bad birer basamak koyulaştı. İkisi de KENDİ %10-12'lik tint'lerinin üstünde metin oluyor (.badge.good/.bad, .chip.ok/.fail) ve orada sırasıyla 4.31 ve 4.01'de kalıyorlardı — token tek başına ölçünce geçtiği için ilk turda görünmemişti. warn'a dokunulmadı: onun tint'i yok (yalnız kenarlık + metin), paper-1 üstünde 5.21:1. */ --color-good: oklch(48.0% 0.140 145); --color-warn: oklch(52.0% 0.140 50); --color-bad: oklch(50.0% 0.200 25); /* -- Grafik işaretleri ------------------------------------------------- Arayüz aksanından AYRI basamaklanır: metin için seçilen renk, bir zemin üstündeki 2px'lik çizgi için doğru olmak zorunda değil. Bu değerler dataviz doğrulayıcısından geçirildi — göz kararı DEĞİL. Açık mod 5/5 PASS, deutan ΔE 31.1. --chart-ref kasten kromasız: o bir veri serisi değil, bir referans. Kimliğini kesikli deseni taşıyor. DİKKAT — --chart-line ARTIK --color-accent İLE AYNI DEĞİL. Aksan metin kontrastı için 54 → 52'ye indi; çizgi 54'te KALDI, çünkü onu bağlayan kısıt kontrast değil, dataviz doğrulayıcısının bandı. İkisi bir dönem aynı sayıyı taşıdı diye aynı token değiller. Birini değiştirirken diğerini "tutarlılık olsun" diye peşinden sürükleme; grafik paleti iki mod için AYRI AYRI doğrulayıcıdan geçmeden değişmez. */ --chart-line: oklch(54.0% 0.220 268); --chart-min: oklch(62.0% 0.160 145); --chart-ref: oklch(52.0% 0.018 258); --chart-fill: oklch(54.0% 0.220 268 / 0.10); /* -- Arka plan ızgarası (background.js) -------------------------------- Dekoratif; METİN TAŞIMAZ ve kontrast ölçümüne girmez — girmemesinin sebebi ihmal değil, kabuğun donuk olması: ızgara yalnızca .shell'in DIŞINDA görünüyor, hiçbir yazı onun üstünde durmuyor. Kabuğu yarı saydam yapmak bu varsayımı bozar ve 60 çiftin tamamını yeniden ölçmeyi gerektirir. Alfa değerleri token'ın İÇİNDE: background.js renkleri sayısal kanal olarak okuyup pasiften aktife lerp'liyor, ayrı bir "opacity" değişkeni verilse iki yerden yönetilen tek bir değer olurdu. Pasif çizgi --rule-hair ile aynı bantta (%8-10): ızgara bir desen değil, bir kağıt dokusu. Aktif renk aksanı izler — "arayüz seninle konuşuyor" kuralı burada da geçerli. */ --bg-grid-dot: oklch(18.0% 0.030 258 / 0.07); --bg-grid-line: oklch(18.0% 0.030 258 / 0.15); --bg-grid-line-active: oklch(52.0% 0.220 268 / 0.75); --bg-grid-node: oklch(18.0% 0.030 258 / 0.20); --bg-grid-node-active: oklch(52.0% 0.220 268 / 0.95); --bg-grid-ripple: oklch(52.0% 0.220 268 / 0.30); /* -- Cam yüzeyler ------------------------------------------------------ Kabuk artık donuk değil: ızgara içinden geçiyor. Kontrast burada iki kararla korunuyor, iyi niyetle değil: 1. Kabuğun tabanı PAPER-1 DEĞİL PAPER-0. Canvas'ın kendi zemini de paper-0; yani camın arkasındaki şey zaten ana sütunun eski rengi. Ana sütundaki her metin çifti bu yüzden OLDUĞU GİBİ kalıyor. Rail eskiden paper-1'di, şimdi paper-0'a doğru kayıyor — ölçüm bunun kontrastı iki modda da ARTIRDIĞINI söylüyor: açık modda zemin aydınlanıyor (koyu mürekkep kazanıyor), koyu modda koyulaşıyor (açık mürekkep kazanıyor). Yanlış yöne kayan bir çift yok. 2. BACKDROP-FILTER YOK. Önce blur(16px) ile denendi ve ÖLÇÜLDÜ: 0.8px genişliğindeki ızgara çizgisi 16px'lik bir bulanıklıkta tepe genliğinin ~%3'üne iniyor, yani camın arkasında görülecek hiçbir şey kalmıyor — büküm de, halka da, ızgaranın ritmi de. Buzlu cam görüntüsü, arkasında bir şey OLMADIĞINDA işe yarar; burada arkadaki şeyin görünmesi asıl amaç. Blur ayrıca kabuğu mutlak konumlu torunlar için kapsayıcı bloğa çeviriyor ve her karede tüm kabuk alanını yeniden bulandırıyordu. Üçü de gereksiz maliyetti. Metin taşıyan İÇ yüzeyler (.panel, .stat, .chart-card, girdiler, düğmeler) DONUK kaldı — bu bilerek: 40 satırlık tablonun ve stat kartlarının arkasında ızgara YOK. Camın üstünde kalan metin bir avuç (.topbar__sub, .foot, rail etiketleri) ve onlar ayrıca ölçüldü. CAMIN OPAKLIĞI ÖLÇÜMLE BULUNDU, beğeniyle değil. Sınırlayıcı durum: imlecin altındaki aksan yığını (çakışan iki aktif çizgi + parıltı + düğüm) camın arkasında pratikte %100 aksana doyuyor — katman katman alfa kısmak işe yaramıyor, çünkü yığın doyuyor. Tek gerçek düğme cam. Tam-aksan zeminin üstünde ink-2 için ölçülen eğri: cam 0.70 → 3.67 0.80 → 4.29 0.86 → 4.70 cam 0.76 → 4.03 0.84 → 4.56 0.90 → 4.99 (açık mod) Açık modda 0.86, koyu modda 0.78 seçildi (koyu bant daha gevşek: orada aksan zeminden AÇIK, mürekkep de açık). Bu değerleri düşürmek ızgarayı camın arkasında biraz daha görünür yapar ve .topbar__sub ile alt bilgiyi gövde eşiğinin altına düşürür. Düşürmeden önce yeniden ölç. */ --surface-shell: color-mix(in oklch, var(--color-paper-0) 86%, transparent); --surface-rail: color-mix(in oklch, var(--color-paper-1) 45%, transparent); /* -- Tipografi --------------------------------------------------------- latin-ext şart: ğ Ğ ş Ş İ orada. ı ise latin altsetinde. */ --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.125rem; /* -- Boşluk — 4pt ------------------------------------------------------ */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 5rem; /* -- Yarıçap — Tally'nin dili, veri yoğunluğuna uyarlanmış ------------- Tablo satırı listede YOK: kasten yuvarlatılmıyor. 40 satırlık bir listede her satırın yuvarlatılması dikey taramayı bozar. */ --radius-shell: 20px; --radius-card: 12px; --radius-item: 10px; --radius-input: 8px; --radius-pill: 999px; /* -- Çizgiler ---------------------------------------------------------- */ --rule-hair: 1px solid color-mix(in oklch, var(--color-ink-0) 8%, transparent); --rule-soft: 1px solid color-mix(in oklch, var(--color-ink-0) 14%, transparent); /* -- Gölge — yalnızca iki yerde ---------------------------------------- */ --shadow-shell: 0 24px 60px -40px oklch(18% 0.030 258 / 0.35); --shadow-pop: 0 2px 6px oklch(18% 0.030 258 / 0.10); /* -- Hareket ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Hafif aşımlı yay. Referans bileşenin "spring"inin CSS karşılığı; tepe 1.56, yani 10px'lik yer değiştirmede ~1px geri tepme. Fark ediliyor ama sıçramıyor. YALNIZCA belirip kaybolan küçük parçalarda kullanılır (arama etiketleri) — kalıcı yüzeylerde aşım, arayüzü oyuncak yapar. */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-mid: 240ms; --dur-slow: 420ms; /* Etiket beliriş/kayboluş bulanıklığı. Referans 10px; 8px'te aynı "odaklanma" hissi var ama düşük yoğunluklu ekranda daha az kirli. */ --blur-tag: 8px; } /* ========================================================================== KOYU — çevrilmiş değil, türetilmiş. custom-theme.md § B.2: koyu kağıt L 12-18 %, çapa hue'suna tonlanmış. § B.3: kağıt L < 50 ise mürekkep L 88-96 %. 258 / 268 çapaları korunur. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-paper-0: oklch(14.0% 0.018 258); --color-paper-1: oklch(17.5% 0.020 258); --color-paper-2: oklch(22.0% 0.024 258); --color-paper-3: oklch(27.0% 0.026 258); --color-ink-0: oklch(95.0% 0.010 258); --color-ink-1: oklch(82.0% 0.014 258); --color-ink-2: oklch(66.0% 0.016 258); --color-ink-3: oklch(54.0% 0.014 258); /* Koyu zeminde ilişki tersine döner: aksan parlar, üstündeki yazı koyulur. */ --color-accent: oklch(70.0% 0.160 268); --color-accent-soft: oklch(58.0% 0.180 268); --color-accent-tint: oklch(30.0% 0.060 268); --color-on-accent: oklch(14.0% 0.018 258); --color-focus: oklch(76.0% 0.140 268); --color-good: oklch(76.0% 0.140 145); --color-warn: oklch(78.0% 0.150 50); --color-bad: oklch(72.0% 0.150 25); /* Doğrulayıcının koyu bandı DAHA DAR (L 0.48-0.67). Arayüzün koyu aksanı (L 0.70) grafik işareti olarak bandın dışında — bu yüzden çizgi ayrıca basamaklandı. Koyu mod 5/5 PASS, deutan ΔE 28.6. */ --chart-line: oklch(64.0% 0.190 268); --chart-min: oklch(66.0% 0.160 145); --chart-ref: oklch(62.0% 0.016 258); --chart-fill: oklch(64.0% 0.190 268 / 0.10); /* Izgara koyu zeminde bir basamak daha sönük: aynı alfa, açık zeminde koyu mürekkep olarak okunurken koyu zeminde IŞIK olarak okunuyor ve ışık daha çok göze çarpıyor. */ --bg-grid-dot: oklch(95.0% 0.010 258 / 0.055); --bg-grid-line: oklch(95.0% 0.010 258 / 0.13); --bg-grid-line-active: oklch(70.0% 0.160 268 / 0.75); --bg-grid-node: oklch(95.0% 0.010 258 / 0.18); --bg-grid-node-active: oklch(70.0% 0.160 268 / 0.95); --bg-grid-ripple: oklch(70.0% 0.160 268 / 0.30); /* Koyu modda cam bir basamak daha kapalı: aynı alfada ızgara ışık olarak geçiyor ve açık modda olduğundan çok daha fazla göze çarpıyor. */ --surface-shell: color-mix(in oklch, var(--color-paper-0) 80%, transparent); --surface-rail: color-mix(in oklch, var(--color-paper-1) 50%, transparent); --shadow-shell: 0 24px 60px -40px oklch(0% 0 0 / 0.6); --shadow-pop: 0 2px 6px oklch(0% 0 0 / 0.4); } } /* Kullanıcı açıkça "Koyu" seçtiyse sistem tercihi ne olursa olsun bu kazanır. */ :root[data-theme="dark"] { color-scheme: dark; --color-paper-0: oklch(14.0% 0.018 258); --color-paper-1: oklch(17.5% 0.020 258); --color-paper-2: oklch(22.0% 0.024 258); --color-paper-3: oklch(27.0% 0.026 258); --color-ink-0: oklch(95.0% 0.010 258); --color-ink-1: oklch(82.0% 0.014 258); --color-ink-2: oklch(66.0% 0.016 258); --color-ink-3: oklch(54.0% 0.014 258); --color-accent: oklch(70.0% 0.160 268); --color-accent-soft: oklch(58.0% 0.180 268); --color-accent-tint: oklch(30.0% 0.060 268); --color-on-accent: oklch(14.0% 0.018 258); --color-focus: oklch(76.0% 0.140 268); --color-good: oklch(76.0% 0.140 145); --color-warn: oklch(78.0% 0.150 50); --color-bad: oklch(72.0% 0.150 25); --chart-line: oklch(64.0% 0.190 268); --chart-min: oklch(66.0% 0.160 145); --chart-ref: oklch(62.0% 0.016 258); --chart-fill: oklch(64.0% 0.190 268 / 0.10); --bg-grid-dot: oklch(95.0% 0.010 258 / 0.055); --bg-grid-line: oklch(95.0% 0.010 258 / 0.13); --bg-grid-line-active: oklch(70.0% 0.160 268 / 0.75); --bg-grid-node: oklch(95.0% 0.010 258 / 0.18); --bg-grid-node-active: oklch(70.0% 0.160 268 / 0.95); --bg-grid-ripple: oklch(70.0% 0.160 268 / 0.30); --surface-shell: color-mix(in oklch, var(--color-paper-0) 80%, transparent); --surface-rail: color-mix(in oklch, var(--color-paper-1) 50%, transparent); --shadow-shell: 0 24px 60px -40px oklch(0% 0 0 / 0.6); --shadow-pop: 0 2px 6px oklch(0% 0 0 / 0.4); }