/* Sunable AI — palet katmanı. * * Renkler Tailwind'in içine GÖMÜLMEZ; her token bir CSS değişkenine * bağlıdır (`--c-surface` gibi) ve palet o değişkenleri değiştirir. * Böylece palet denemek yeniden derleme gerektirmez ve tek bir * `data-palet` özniteliğiyle tüm arayüz değişir — grafikler dâhil, * çünkü canvas da bu değişkenleri okuyor. * * Paletler dekoratif seçilmedi, konudan türetildi: * modül laciverti AR kaplamalı monokristal silisyumun gerçek rengi * ışınım rampası sarı→turuncu→kırmızı sıralı ölçek; güneş kaynağı * haritalarının sektör standardı (Global Solar Atlas, * PVGIS). Gökkuşağı rampası yaygın ama yanlıştır: * algısal olarak düzgün değildir ve sahte sınır üretir. * yeşil SCADA'da "üretiyor" durumunun rengi */ /* ══ EGE — varsayılan ══ ÖNCEKİ SÜRÜMÜN HATASI: marka rengini NÖTRLERİN TAMAMINA uygulamıştım. Zemin, yüzey, panel başlığı, çizgi — hepsi yeşile boyanmıştı ve arayüz tek renge boğulmuştu. Doygunluğu artırmak bunu daha da kötüleştirdi. Doğrusu ayrımdır: NÖTRLER neredeyse beyaz, yalnızca bir fısıltı yeşil taşır. Sayfanın %90'ı bunlardır ve göze çarpmamaları gerekir. VURGULAR doygun kalır ama YALNIZCA anlam taşıyan yerlerde görünür: aktif menü, KPI'nın birincil sayısı, veri çubukları, not kutularının kenar şeridi, bağlantılar, seçili satır. Bir palette rengin miktarı, tonundan daha belirleyicidir. */ /* AÇIK TEMA ÜÇ ADIMDA BURAYA GELDİ ve son adım öncekileri iptal etti. * * 1. Nötrler gri-yeşildi (zemin #E7F0EC). Sayfanın %90'ı yeşile * boyalıydı ve bu renk hissi vermiyor, yalnızca havayı alıyordu. * 2. Aynı yeşil beyaza yaklaştırıldı (#F0F9F5). Ferahladı ama yeşil * hâlâ oradaydı — solgun bir fısıltı hâlinde. * 3. YEŞİL NÖTRLERDEN TAMAMEN ÇIKTI. Kullanıcı doğru tarif etti: * "açık renkte ege açık yeşil olanları" beyazdan griye dönsün. * * Karar şu: NÖTR GERÇEKTEN NÖTR OLSUN. Marka rengini zemine yaymak, * rengi her yere koyup hiçbir yerde göstermek demekti. Zemin gri * olunca renkli kartlar (her biri kendi tonunda) ilk kez gerçekten * renkli okunuyor — çünkü artık yeşil bir zeminle yarışmıyorlar. * apollo.eco'nun ölçülen düzeni de böyle: gövde nötr beyaz * (rgb 255,255,255 ve 252,249,246), renk yalnızca vurguda ve koyu * bölümde. * * Gri hafifçe SOĞUK (mavi tarafta, hue ~215, doygunluk %8-12): tam * nötr gri, yanındaki koyu yeşil bandın yanında sarıya kaçıyordu. */ :root { /* ── Nötrler: kırık beyazdan griye, renksiz ── SAF BEYAZ KULLANILMIYOR. Kullanıcı doğrudan söyledi: "beyaz göz yoruyor". Fiziksel olarak da böyle — #FFFFFF, ekran parlaklığının tamamını yansıtıyor ve uzun süre bakılan bir panoda kontrast yorgunluğu yapıyor. Yüzeyler bunun yerine bir tık kırık beyaz; fark tek başına bakınca zor görülüyor ama sayfanın tamamında hissediliyor. Saf beyaz yalnızca `surface-bright`ta duruyor ve orası da nadiren kullanılıyor. */ --c-background: #EDEFF2; --c-surface: #FBFBFD; --c-surface-bright: #FFFFFF; --c-surface-dim: #E1E4E8; --c-surface-container-lowest: #FDFDFE; --c-surface-container-low: #F7F8FA; --c-surface-container: #EBEDF1; --c-surface-container-high: #E3E6EB; --c-surface-container-highest: #D8DCE2; --c-surface-variant: #D8DCE2; --c-on-background: #16191D; --c-on-surface: #16191D; --c-on-surface-variant: #525960; /* Eksen başlıkları bu jetonu kullanıyor ve beyaz üstünde 3,1:1 veriyordu — küçük metin için yetersiz. #6B737B ile 4,6:1'e çıkıyor; hâlâ susturulmuş bir gri ama okunuyor. */ --c-outline: #6B737B; --c-outline-variant: #DBDFE4; /* saç teli */ --c-inverse-surface: #1B2E27; --c-inverse-on-surface: #EAF3EE; /* ── Vurgular: doygun, ama az yerde ── */ /* Metin kontrastı için bir tık koyu. #00806F beyazda 4,71, açık gri yüzeyde (#EDEFF2) 4,22 veriyordu — AA gövde eşiği 4,5. Aynı aile, yarım ton aşağı: beyazda 5,9, açık gride 5,3. Zemin olarak kullanıldığı yerde de (beyaz yazılı düğmeler) kontrastı artırıyor. */ --c-primary: #00705F; --c-primary-container: #00B396; --c-on-primary: #FFFFFF; /* AÇIK temada bu jeton koyu tema değerini taşıyordu (#B4EDE2) ve zemini de soluk naneydi (#CFF7EE): ölçüldü, kontrast 1,13 — yani nane üstüne nane, yazı görünmüyordu. Ayarlar'ın aktif bölüm düğmesi tam olarak bu çiftti. Açık zeminde üstüne yazılan renk KOYU olmalı; aynı aileden en koyu ton seçildi (kontrast 11,4). */ --c-on-primary-container: #00382E; --c-primary-fixed: #CFF7EE; /* aktif menü zemini */ --c-primary-fixed-dim: #A6E8DA; --c-on-primary-fixed: #00332B; --c-on-primary-fixed-variant: #00544A; --c-inverse-primary: #4FE0C6; --c-surface-tint: #00806F; --c-secondary: #CC7400; --c-secondary-container: #FFA412; --c-secondary-fixed: #FFEBD2; --c-secondary-fixed-dim: #FFC25C; --c-on-secondary: #FFFFFF; --c-on-secondary-container: #4A2A00; --c-on-secondary-fixed: #2C1800; --c-on-secondary-fixed-variant:#7A4700; --c-tertiary: #06592F; --c-tertiary-container: #0F9245; --c-tertiary-fixed: #D3F4DF; --c-tertiary-fixed-dim: #86D8A6; --c-on-tertiary: #FFFFFF; --c-on-tertiary-container: #A9EFC4; --c-on-tertiary-fixed: #00210F; --c-on-tertiary-fixed-variant: #075030; --c-error: #D02E1F; --c-error-container: #FFE4E0; --c-on-error: #FFFFFF; --c-on-error-container: #8C1008; /* ── Grafik ── */ --ges-cizgi-1: #F59014; /* güneş / ışınım serisi */ --ges-cizgi-2: #00A88E; /* güç / sonuç serisi */ --ges-izgara: #E9ECEF; --ges-eksen: #DCE0E5; --ges-eksen-yazi: #525960; --ges-isaret: #16191D; --ges-isi: 214, 88, 12; --ges-belirsiz: #878E96; --ges-modul: #1E3352; /* PV modülünün gerçek rengi */ } /* ══ KOYU TEMA ══════════════════════════════════════════════════════════ TEK KİMLİK. Önce üç palet seçilebiliyordu (Ege, Gökyüzü, Gece) ve bu bir KARAR ARACIYDI: renkleri ekranda denemek için. Karar verildi, araç kalktı. Seçenek bırakmak ürünün kendi rengi olmadığını söyler. Koyu tema ÖNCEDEN BOZUKTU ve ölçüldü: gövde #191713 (eski bir paletten kalma sıcak kahve-siyah), paneller yeşil, palet değişkenleri ise hâlâ AÇIK temanınki (--c-surface: #FFFFFF). Üç ayrı yerden renk alıyordu ve hiçbiri diğerini bilmiyordu. Yapı apollo.eco'dan ÖLÇÜLEREK alındı (demo-out/apollo_tasarim.json): ana sayfalarında en çok kullanılan zemin rgb(1,40,36) — 984 kez, yani sayfayı TEK bir derin yeşil taşıyor, kartlar aynı tonun bir tık açığı, susturulmuş metin rgb(143,168,152). Bizim kahraman bandımız zaten aynı aileden (#0A5F52 → #04100E); tema onun etrafında kuruldu. RENKLERİ alınmadı: apollo'nun asit yeşili #14DD73 onların markası. Bizim vurgumuz #4FD3B8 — kahraman bandındaki nokta deseninin rengi. "Soluk değil baskın" kuralı: zeminler doygun ve koyu, aralarındaki fark net. Yarı saydam katmanlarla incelik aramak yerine her yüzeyin kendi tok rengi var. */ .dark { color-scheme: dark; /* ── Zeminler: tek derin yeşil ailesi, aralarında net fark ── */ --c-background: #03120F; --c-surface: #072A24; --c-surface-bright: #10493E; --c-surface-dim: #020C0A; --c-surface-container-lowest: #020D0B; --c-surface-container-low: #05201B; --c-surface-container: #093029; --c-surface-container-high: #0C3B32; --c-surface-container-highest: #10473C; --c-surface-variant: #10473C; --c-on-background: #E3F3EE; --c-on-surface: #E3F3EE; --c-on-surface-variant: #93B8AB; --c-outline: #6E9488; --c-outline-variant: #17453B; --c-inverse-surface: #E3F3EE; --c-inverse-on-surface: #03120F; /* ── Vurgular ── */ --c-primary: #4FD3B8; --c-primary-container: #0E7A66; --c-on-primary: #00201B; --c-on-primary-container: #B4EDE2; --c-primary-fixed: #0E5B4C; /* aktif menü zemini */ --c-primary-fixed-dim: #14806B; --c-on-primary-fixed: #CFF3E8; --c-on-primary-fixed-variant: #8FDCC8; --c-inverse-primary: #00806F; --c-surface-tint: #4FD3B8; --c-secondary: #E8A33D; --c-secondary-container: #8A5A12; --c-secondary-fixed: #4A3110; --c-secondary-fixed-dim: #A87226; --c-on-secondary: #2E1A00; --c-on-secondary-container: #FFDFB5; --c-on-secondary-fixed: #FFE9C8; --c-on-secondary-fixed-variant:#FFCE85; --c-tertiary: #5FD4A8; --c-tertiary-container: #146E4E; --c-tertiary-fixed: #0F4E38; --c-tertiary-fixed-dim: #2A8A67; --c-on-tertiary: #00281B; --c-on-tertiary-container: #A8EDCB; --c-on-tertiary-fixed: #C8F2DD; --c-on-tertiary-fixed-variant: #8FDCB8; --c-error: #FF7A63; --c-error-container: #6E1D14; --c-on-error: #2C0605; --c-on-error-container: #FFDAD4; /* ── Grafik ── */ --ges-cizgi-1: #FFB347; --ges-cizgi-2: #34E3C4; --ges-izgara: #0F3B33; --ges-eksen: #17453B; --ges-eksen-yazi: #93B8AB; --ges-isaret: #E3F3EE; --ges-isi: 255, 179, 71; --ges-belirsiz: #6E9488; --ges-modul: #2E4772; } /* ══════════════════════════════════════════════════════════════════════ YÖNETİCİ KATMANI — gradyanlar, vurgu ve grafik kategorileri apollo.eco'nun tasarım dili ölçüldü ve YAPI alındı: büyük sayı + küçük birim + delta hapı, gradyanlı modül kutuları, koyu kahraman + açık gövde. RENKLERİ alınmadı — onların asit yeşili (#14DD73) ve moru (#895ECC) kendi markaları; bizim konumuz güneş, çatı ve Ege. Buradaki her renk konudan türetildi: kehribar ışınım haritalarının sektör standardı (Global Solar Atlas, PVGIS aynısını kullanır) turkuaz SCADA'da "üretiyor" durumunun rengi deniz Ege mercan kayıp/uyarı — kırmızıya kaçmadan, tabloyu alarma çevirmeden ══════════════════════════════════════════════════════════════════════ */ :root { /* Tek canlı vurgu. Boldluk TEK yerde harcanır; gerisi sakin kalır. */ --c-vurgu: #C97A16; --c-vurgu-soluk: #FBEBD4; --c-on-vurgu: #FFFFFF; /* Gradyanlar — modül kutuları ve kahraman bandı için. */ --g-gunes: linear-gradient(135deg, #FFD98A 0%, #E08A28 100%); --g-deniz: linear-gradient(135deg, #A9DCEF 0%, #2E6FA8 100%); --g-zeytin: linear-gradient(135deg, #CFE3A8 0%, #4E7A2E 100%); --g-gece: linear-gradient(160deg, #08211D 0%, #0E312A 100%); --g-marka: linear-gradient(135deg, #4FD3B8 0%, #00806F 100%); /* Grafik kategorileri — beşi bir arada ayırt edilebilir olacak biçimde seçildi; ardışık bir ölçek DEĞİL, kategorik dizi. DOYGUNLAŞTIRILDI. Önceki değerler nötrlerle aynı disiplinden geliyordu (az doygun, sakin) ve bu METİN için doğru, GRAFİK için yanlıştı: bir grafiğin işi zaten dikkat çekmek ve soluk bir seri arka planla karışıyor. Nötrler sakin kalmaya devam ediyor — doygunluk yalnızca veri taşıyan yüzeylerde. */ --k-isinim: #F59014; --k-uretim: #00A88E; --k-golge: #1F6FD0; --k-kayip: #E0472A; --k-kazanc: #7CB518; /* ── ENERJİ KAYNAKLARI ── Fabrikayı o an kimin taşıdığını gösteren çubuğun renkleri. Önceki atama keyfiydi (güneş turkuaz, gaz turuncu, şebeke mavi) ve kaynağı akla getirmiyordu. Yeni atama sezgisel: güneş sarı güneşin kendi rengi gaz mavi doğalgaz alevinin rengi şebeke kırmızı en pahalı ve en az güvenilen kaynak marj turkuaz KÂR. Tek "iyi" renk bu ve yalnızca burada kullanılıyor — göz kârı çubuğun neresinde olursa olsun bulabilsin diye. Açık tema tonları aynı aileden ama koyulaştırılmış: sarı beyaz zeminde kaybolur, mavi ve kırmızı yıkanır. */ --e-gunes: #C08A00; --e-gaz: #1565D8; --e-sebeke: #D0342B; --e-marj: #00937E; --e-acik: #C22E17; /* marj negatifken */ --yuk-cizgi: #12211B; --yuk-halo: rgba(255, 255, 255, .75); } /* Koyu temada vurgu ve kategoriler açılır: aynı hex koyu zeminde kararır ve okunmaz hâle gelir. */ .dark { --c-vurgu: #E8A33D; --c-vurgu-soluk: #3A2A12; --c-on-vurgu: #10231B; --g-gunes: linear-gradient(135deg, #E8A33D 0%, #A85E14 100%); --g-deniz: linear-gradient(135deg, #5FA8D8 0%, #1D4E7A 100%); --g-zeytin: linear-gradient(135deg, #9BC46E 0%, #35561F 100%); --k-isinim: #FFB347; --k-uretim: #34E3C4; --k-golge: #57A9FF; --k-kayip: #FF7A55; --k-kazanc: #B3E051; --e-gunes: #FFC53D; --e-gaz: #4DA3FF; --e-sebeke: #FF5E4D; --e-marj: #34E3C4; --e-acik: #FF6B57; --yuk-cizgi: #DCEDE6; --yuk-halo: rgba(4, 16, 14, .55); } /* ══ HER ZAMAN KOYU KALAN BÖLGELER ═══════════════════════════════════ İki blok temadan bağımsız olarak koyu: en üstteki kahraman bandı (kimlik) ve para kutusu (sayfanın tek vurgusu). Açık temadayken bu bloklar da açık temanın jetonlarını alıyordu ve içerideki renkler yanlış zemine düşüyordu — arz çubuğunun sarısı (#C08A00, beyaz için koyulaştırılmış ton) koyu bandın üstünde donuk hardala dönüyordu. Koyu zemin için hazırlanmış tonlar burada geri veriliyor. Kural TEMADAN SONRA geliyor ki açık temada da geçerli olsun. */ /* KENAR ÇUBUĞU DA BU LİSTEDE. Ölçüldü: açık temada menünün aktif satırı 1,68 ve sayfa adı 2,98 kontrast veriyordu — koyu zeminde açık temanın jetonları. Vurgu rengi (#00705F) koyu yüzeyde okunmuyor, üstelik metin kontrastı için koyulaştırıldığı için daha da kötüleşiyordu. Koyu bölge, koyu jetonları almalı. */ nav.ges-kenar, header.ges-ust, .bant-koyu, .kazanc-kahraman { --c-primary: #4FD3B8; --c-on-primary: #00201B; --c-primary-fixed: #0E5B4C; --c-on-primary-fixed: #CFF3E8; --c-on-primary-container: #B4EDE2; --e-gunes: #FFC53D; --e-gaz: #4DA3FF; --e-sebeke: #FF5E4D; --e-marj: #34E3C4; --e-acik: #FF6B57; --yuk-cizgi: #DCEDE6; --yuk-halo: rgba(4, 16, 14, .55); --c-on-surface: #E3F3EE; --c-on-surface-variant: #93B8AB; --c-outline-variant: rgba(120, 200, 180, .22); --c-surface-container-highest: rgba(255, 255, 255, .07); }