/* ══════════════════════════════════════════════════════════════════════ TEMA — tek renk kaynağı (koyu + açık) ───────────────────────────────────────────────────────────────────── NEDEN AYRI DOSYA: renk değişkenleri index.html ve grafik.html'de AYRI AYRI kopyalanmıştı. İki yerde bakım = er geç birbirinden sapar (bu oturumda TV ayar bloğunun stilinde tam olarak bu yaşandı). Artık iki sayfa da bu dosyayı bağlar. AÇIK TEMADA RENKLER KOYULAŞTIRILIR: #22c55e beyaz zeminde ~1.8:1 kontrast verir — okunmaz. Açık temada yeşil/kırmızı/mavi tonları WCAG AA'yı (4.5:1) geçecek şekilde koyulaştırılmıştır. Grafik TUVALİ de bu değişkenleri kullanır (grafik.js palet olarak okur), böylece açık temada "beyaz sayfa + kapkara grafik" olmaz. ══════════════════════════════════════════════════════════════════════ */ :root{ /* ── KOYU (varsayılan) ── */ --bg:#0f172a; --kart:#1e293b; --kart2:#243247; --cizgi:#334155; --met:#e2e8f0; --sol:#94a3b8; --yesil:#22c55e; --kirmizi:#ef4444; --mavi:#3b82f6; --turuncu:#f59e0b; --mor:#8b5cf6; /* ── DOLGU ve YAZI tonları (WCAG) ──────────────────────────────── NEDEN AYRILDI: yukarıdaki --yesil/--kirmizi/--mavi/--mor İKİ İŞ yapıyordu: (a) koyu zemin üstünde YAZI rengi, (b) beyaz yazı taşıyan DOLGU (düğme, rozet) rengi. Bu ikisi birbirinin TERSİNİ ister: yazı parlak olmalı, dolgu koyu. Koyu tema yazıya göre ayarlanmıştı, dolgular ölçüldüğünde eşiğin çok altında kaldı (canlı ölçüm): .btn.yesil 2,28 · .btn.mavi 3,68 · .btn.kirmizi 3,76 · .btn.mor 4,23 .skb.aktif 3,52 · .eks 3,44 · .r-KARAL 2,93 · .rz 3,68 (WCAG AA normal metin eşiği 4,5:1.) Çözüm: aynı RENK TONU (hue) korunarak iki ayrı değişken. Dolgular en az sapmayla koyulaştırıldı, yazılar en az sapmayla açıldı — yeşil=başlat, kırmızı=durdur, mavi=birincil, mor=yönetim kimliği aynı kalsın. Rozet zeminleri rgba tint olduğu için metin eşiği kart zemininden DAHA ZOR: ölçüler o en kötü zemine göre seçildi. Düz renkler (--yesil…) ÇUBUK/ÇİZGİ gibi metin OLMAYAN yerlerde durur: orada canlılık okunurluğu bozmuyor. */ --yesil-dolu:#17843f; /* beyaz yazı 4,76:1 · sayfa zemini 3,75:1 */ --kirmizi-dolu:#d23c3c; /* beyaz yazı 4,72:1 */ --mavi-dolu:#3370d4; /* beyaz yazı 4,76:1 */ --mor-dolu:#8356e7; /* beyaz yazı 4,72:1 */ --yesil-yazi:#23cd62; /* r-AL tint üstünde 4,75:1 */ --kirmizi-yazi:#fb8383; /* r-SAT tint üstünde 4,74:1 */ --mavi-yazi:#79acff; /* r-KARAL tint üstünde 4,70:1 */ --mor-yazi:#a78bfa; /* kart2 üstünde 4,76:1 */ --turuncu-yazi:#f59e0b; /* r-STOP tint üstünde 4,67:1 — geçiyor */ --gri:#475569; /* nötr buton / anahtar zemini */ --oyuk:#0b1220; /* iç çubuk, etiket, ilerleme rayı */ --vurgu:rgba(255,255,255,.04); /* çok hafif satır/hücre zemini */ --vurgu2:rgba(255,255,255,.07); /* aynısının hover hali */ --perde:rgba(0,0,0,.65); /* modal arka perdesi */ --link:#60a5fa; /* tıklanabilir yazı (.tikla) */ --link2:#93c5fd; /* aynısının hover hali */ --link-zemin:rgba(96,165,250,.10); /* tıklanabilir satır hover */ /* ── Grafik tuvali (canvas — grafik.js okur) ── */ --tuval:#0e1420; /* tuval zemini */ --gr-met:#e5e7eb; /* tuval ana yazı */ --gr-met2:#c9d3e5; /* tuval ikincil yazı */ --gr-eksen:#8a93a6; /* eksen etiketleri */ --gr-izgara:#64748b; /* ızgara / ince çizgi */ --gr-kontur:#0b1020; /* işaret konturu (tuval zeminiyle zıt) */ --gr-mum-al:#22c55e; --gr-mum-sat:#ef4444; /* Tuval üstü kutular ve ince çizgiler. Bunlar SABİT KOYU/BEYAZ tint'ti; açık temada kutu okunmuyor, çizgiler kayboluyordu. */ --gr-kutu:rgba(20,26,40,.90); /* imleç bilgi kutusu zemini */ --gr-kutu2:rgba(15,23,42,.94); /* cetvel etiket kutusu zemini */ --gr-imlec:rgba(255,255,255,.28); /* imleç artı çizgileri */ --gr-hat1:rgba(255,255,255,.10); /* panel kenarı */ --gr-hat2:rgba(255,255,255,.06); /* ızgara (yatay) */ --gr-hat3:rgba(255,255,255,.04); /* ızgara (dikey) */ --gr-hat4:rgba(255,255,255,.12); /* sıfır çizgisi */ --gr-hacim-al:#26a69a; --gr-hacim-sat:#ef5350; --gr-nw:#a78bfa; --gr-nw2:#c4b5fd; } html[data-tema="acik"]{ /* ── AÇIK ── */ --bg:#eef2f7; --kart:#ffffff; --kart2:#f5f8fc; --cizgi:#cbd5e1; --met:#0f172a; --sol:#475569; --yesil:#15803d; --kirmizi:#dc2626; --mavi:#1d4ed8; --turuncu:#b45309; --mor:#6d28d9; /* AÇIK TEMADA DOLGU zaten koyulaştırılmış tondur (beyaz yazı 4,8-7,1:1 ölçüldü) — kendi değişkenine bağlanır, ikinci bir sayı tutulmaz. YAZI ise burada TERS yönde sorun çıkarıyor: rozet/pill tint'i açık zemini KOYULAŞTIRIYOR ve ölçümde 5 çift eşiğin altında kaldı (● Çalışıyor 3,98 · ● Durdu 3,56 · r-SAT 3,74 · r-AL 4,17 · r-STOP 4,23). Bu yüzden açık temada yazı tonları bir adım daha koyulaştırılmıştır. */ --yesil-dolu:var(--yesil); --kirmizi-dolu:var(--kirmizi); --mavi-dolu:var(--mavi); --mor-dolu:var(--mor); --yesil-yazi:#127336; /* pill.on tint üstünde 4,70:1 */ --kirmizi-yazi:#b92020; /* pill.off tint üstünde 4,71:1 */ --mavi-yazi:var(--mavi); /* r-KARAL tint üstünde 5,32:1 — geçiyor */ --mor-yazi:var(--mor); --turuncu-yazi:#a74d08; /* r-STOP tint üstünde 4,76:1 */ --gri:#64748b; --oyuk:#e2e8f0; --vurgu:rgba(15,23,42,.035); --vurgu2:rgba(15,23,42,.07); --perde:rgba(15,23,42,.45); /* Açık zeminde #60a5fa ~2.5:1 kontrast verir — okunmaz. Koyulaştırıldı. */ --link:#1d4ed8; --link2:#1e3a8a; --link-zemin:rgba(29,78,216,.09); --tuval:#ffffff; --gr-met:#0f172a; --gr-met2:#334155; --gr-eksen:#475569; --gr-izgara:#94a3b8; --gr-kontur:#ffffff; --gr-mum-al:#15803d; --gr-mum-sat:#dc2626; /* Açık temada kutu AÇIK zemin + koyu yazı; çizgiler koyu tint olmalı. */ --gr-kutu:rgba(255,255,255,.94); --gr-kutu2:rgba(255,255,255,.96); --gr-imlec:rgba(15,23,42,.38); --gr-hat1:rgba(15,23,42,.14); --gr-hat2:rgba(15,23,42,.09); --gr-hat3:rgba(15,23,42,.06); --gr-hat4:rgba(15,23,42,.16); --gr-hacim-al:#0f766e; --gr-hacim-sat:#e11d48; --gr-nw:#6d28d9; --gr-nw2:#7c3aed; } /* ── OKUNABİLİRLİK (her iki temada) ───────────────────────────────── .kck 12px ikincil yazıdır ve panelin her yerinde kullanılıyor; açıklama metinlerinin çoğu bu sınıfta. Satır aralığı verilmemişti, uzun açıklamalar sıkışık görünüyordu. */ .kck{line-height:1.5} /* Klavye erişilebilirliği: sekme ile gezerken odak GÖRÜNÜR olmalı. :focus-visible kullanıldığı için fare tıklamasında halka çıkmaz. */ :focus-visible{outline:2px solid var(--mavi);outline-offset:2px;border-radius:4px} /* Tema geçişi ani renk sıçraması gibi durmasın (canvas hariç) */ body{transition:background-color .15s linear,color .15s linear}