/* ========================================================================== Eras VCRM — tokens.css Tasarım konsepti "Tezgâh" · 31.07.2026 Düz CSS · dış kaynak yok · mevcut değişken isimleri korunmuştur. Yükleme sırası: tokens.css → bilesenler.css → (varsa) mevcut style.css artıkları ========================================================================== */ :root { /* ---- Marka ---------------------------------------------------------- */ --brand: #2b5457; /* aksan: birincil buton, aktif sekme, bağlantı */ --brand-dark: #284b63; /* hover / koyu yüzey */ --chrome: #1f3239; /* YENİ · kabuk: sol menü, pencere başlığı */ --chrome-2: #2a4148; /* YENİ · kabuk hover satırı */ --chrome-ink: #c7d0d2; /* YENİ · kabuk üstü metin */ --chrome-muted: #7d959b; /* YENİ · kabuk üstü ikincil metin */ /* ---- Yüzeyler ------------------------------------------------------- */ --bg: #ececec; /* sayfa zemini */ --panel: #ffffff; /* kart / panel */ --panel-2: #f6f7f7; /* YENİ · tablo başlığı, toplam satırı, form ayağı */ --hover: #eef1f1; /* YENİ · satır hover (bugün doğrudan yazılıydı) */ --brand-soft: #eef3f3; /* YENİ · aksanın açık zemini: bilgi şeridi, KAT rozeti */ --brand-line: #9cbfc0; /* YENİ · aksanın açık zemin kenarı */ /* ---- Metin ---------------------------------------------------------- */ --ink: #353535; /* ana metin */ --muted: #474b4d; /* ikincil metin */ --faint: #4f5354; /* YENİ · üçüncül: sayaç, ipucu, birim */ /* ---- Çizgiler ------------------------------------------------------- */ --line: #d9d9d9; /* hairline */ --line-strong: #bdbdbd; /* belirgin kenarlık (girdi, buton) */ /* ---- Durum ---------------------------------------------------------- */ --green: #14532d; --amber: #7a3b07; --red: #991b1b; --green-bg: #ecfdf5; /* token'lanan sabitler */ --green-line: #6ee7b7; --amber-bg: #fff7ed; --amber-line: #fdba74; --green-hover: #dff3e4; /* yeşil zeminli kartın üzerine gelince (müşteri notu) */ --amber-hover: #fdf0e0; /* turuncu zeminli kartın üzerine gelince */ --red-bg: #fef2f2; --red-line: #fca5a5; --amber-ink: #713f12; /* AAA: sarı/turuncu zemin üstü koyu metin */ --amber-row: #fffdf8; /* YENİ · eksik tanım satırı zemini */ --red-row: #fffafa; /* YENİ · gecikme / eksi bakiye satırı zemini */ /* ====================================================================== RENK KÜMELERİ — üç tane var, ÜÇÜ AYRI İŞ YAPIYOR. Karıştırmak, ekranın yalan söylemesi demek: ① MARKA (--brand, --brand-dark, --chrome, --ink, --line) Kabuk ve eylem. "Burası Zoprey, şu tıklanır" der. ② DURUM (--green, --amber, --red, --durum-*) "Ne hâlde" der: bekliyor / sürüyor / bitti / sorunlu. Anlamı sabittir, moda değişse de değişmez. Kırmızı her yerde kırmızıdır — bu yüzden ③'ten renk almaz. ③ SERİ (--seri-1 … --seri-10) "Hangi kalem" der. Anlamı yok, yalnız AYIRT EDER. Bir dilimin kırmızı olması o kalemin sorunlu olduğu anlamına GELMEZ. Bir grafik dilimi ②'den renk alırsa sorun sanılır; bir uyarı ③'ten renk alırsa fark edilmez. Yeni bir renge ihtiyaç duyduğunda önce hangi kümeye ait olduğunu sor. ====================================================================== */ /* ---- ③ Grafik serisi · TEK KAYNAK ------------------------------------- Pasta/halka dilimleri buradan renk alır. Önceden app.js içinde on tane hazır Tailwind rengi (mor, pembe, camgöbeği) gömülüydü; marka paletiyle ilgisi yoktu ve ekranın geri kalanının yanında yabancı duruyordu. Renkler kullanıcının verdiği paletten — coolors, palet adı OCEAN SUNSET (kullanıcı 2026-09-29): teal → kum → turuncu → kızıl uzanan on basamaklı bir rampa. Markanın Stormy Teal'i bu rampanın soğuk ucuyla akraba, o yüzden ekranın geri kalanıyla kavga etmiyor. Palet adı BURADA yazılı çünkü tek tek renk adları (Dark Cyan, Burnt Caramel…) paleti bulmaya yetmiyordu; "hangi paletti" sorusu bir kez soruldu, bir daha sorulmasın. SIRA RAMPANIN SIRASI DEĞİL. Rampada komşu basamaklar birbirine benzer (Dark Teal / Dark Cyan; Burnt Caramel / Rusty Spice / Oxidized Iron) — pastada yan yana düşen iki dilim ayırt edilemezdi. Sıra soğuk/sıcak ve açık/koyu alternatiflenerek kuruldu: birinci ile ikinci dilim her zaman birbirinden uzak. Dilimler büyükten küçüğe çizildiği için en çok bakılan iki dilim en çok ayrışan iki renk oluyor. */ --seri-1: #0a9396; /* Dark Cyan — markanın teal'ine en yakın */ --seri-2: #ca6702; /* Burnt Caramel */ --seri-3: #005f73; /* Dark Teal */ --seri-4: #ee9b00; /* Golden Orange */ --seri-5: #94d2bd; /* Pearl Aqua */ --seri-6: #9b2226; /* Brown Red */ --seri-7: #e9d8a6; /* Wheat */ --seri-8: #001219; /* Ink Black */ --seri-9: #bb3e03; /* Rusty Spice */ --seri-10: #ae2012; /* Oxidized Iron */ /* Durum renkleri — seriden AYRI. Seri "hangi kalem" der, bunlar "ne hâlde" der. Karıştırılırsa bir dilimin kırmızı olması sorun sanılır. */ --durum-notr: #8a8f91; /* bekleyen, atanmamış */ --durum-is: #b45309; /* üretimde / süren */ --durum-iyi: #15803d; /* biten, sevk edilen */ --durum-bilgi: #284b63; /* bilgilendirme */ --bos-dilim: #ececec; /* veri yokken halkanın zemini */ /* ---- 3B görüntüleyici (KDE-0036, 2026-10-10) ------------------------- * * Zoprey.View aktarım paketi G10: viewer 31 token okuyor ve ÜÇÜ ERP'de * tanımsızdı. Eksikliğin iki ayrı sonucu var ve ikincisi sinsi: * · WebGL'e giden renkler (seçim, ölçüm) çözülemezse viewer HATA ATAR. * · Yalnız CSS'te kullanılanlar eksikse SESSİZCE bozulur. * Kullanıcı 2026-10-10: "ölçülendirmedeki renk veri gelmemiş" — ölçüm * çizgileri renksiz çiziliyordu, sebebi buydu. * * Değerler Zoprey.View'un kendi referansından (KDA-0065, KDA-0236, * KDA-0316): ikinci ölçüm kümesi önce mavi (#005F73) idi, okunmadığı için * zeytin yeşiline çevrilmiş. */ --secim: #6a00ff; /* 3B seçim rengi */ --olcum: #94d2bd; /* ölçü çizgisi, nokta işaretleri (küme 1) */ --olcum-2: #606c38; /* ikinci ölçüm kümesi */ /* Seçili ARAÇ (Seç sekmesinin altındaki Montaj/Parça/Yüzey/Kenar/Nokta) bu renkle doluyor — KDA-0478 (kullanıcı 2026-10-10). Açık SEKME marka yeşilinde kalıyor; ikisi aynı renkteyken hangisinin sekme hangisinin araç olduğu ayırt edilmiyordu. DEĞER ÜÇ ADIMDA OTURDU, ikisi ölçümle elendi: #1d4ed8 parlak mavi — paletin dışında, ekranda yabancı durdu #284b63 ürün ağacı şeridinin mavisi — marka yeşiline kontrastı 1,10; yan yana ayrışmıyordu (kullanıcı: "yeşille pek ayrışmadı") #ca6702 Ocean Sunset turuncusu — yeşile kontrast 2,17, iki kat iyi Palet tutarlı: ölçüm renkleri (`--olcum` #94d2bd) de aynı paletten. YAZI DA BEYAZ (kullanıcı kararı 2026-10-10: "yazıları da beyaz yapar mısın"). ÖLÇÜLEN BEDEL: bu turuncunun üstünde beyaz 3,85:1 — ikon için yeterli (grafik ögesi eşiği 3,0) ama 11px etiket için AA'nın 4,5 eşiğinin altında. Koyu mürekkep 4,95:1 veriyordu; kullanıcı bütünlüğü seçti, bilerek. ALTERNATİF ÖLÇÜLDÜ, SEÇİLMEDİ: turuncuyu bir tık koyultmak beyazı eşiğin üstüne çıkarıyor (#b85a02 → 4,67) ama yeşilden ayrışmayı 2,17'den 1,79'a düşürüyor — yani asıl sorunu geri getiriyor. Eşiğe dönmek istenirse yol bu, bedeli de bu. Ad anlam taşıyor: host hangi mürekkebi kullanacağını söylüyor. */ --arac-secili: #ca6702; /* seçili araç/filtre dolgusu (KDA-0478) */ --arac-secili-yazi: #ffffff; /* o dolgunun üstündeki ikon ve etiket */ /* ---- Biçim ---------------------------------------------------------- */ --radius: 3px; --shadow: none; --odak: 0 0 0 2px #ffffff, 0 0 0 4px var(--brand); /* odak halkası */ /* ---- Boşluk ölçeği (4px tabanlı) ------------------------------------ */ --bosluk-1: 4px; --bosluk-2: 8px; --bosluk-3: 12px; --bosluk-4: 16px; --bosluk-5: 24px; --bosluk-6: 32px; /* ---- Yoğunluk · TEK KAYNAK ------------------------------------------ Satır, girdi ve buton yüksekliği buna bağlıdır. Varsayılan 34px (kabul kriteri: ≤34px). Kullanıcı üst çubuktan değiştirir. */ --row-h: 34px; --row-pad-x: var(--bosluk-4); --tik-h: 28px; /* satır içi eylem butonu */ /* ---- Tipografi ------------------------------------------------------ */ /* LATO (kullanıcı seçimi 2026-09-09). Dosyalar `public/fonts` altında, KENDİ SUNUCUMUZDAN servis ediliyor — Google'ın `@import`/`` yolu fontu kullanıcının tarayıcısına Google'dan çektirir; fabrika ağı yavaş ya da kapalıysa ekran önce yedek fontla çizilir, sonra zıplar. LATO'DA 500/600/800 AĞIRLIKLARI YOK — yalnız 100/300/400/700/900 var. Bizim CSS'te 600 ağırlığı 117, 500 ağırlığı 13, 800 ağırlığı 2 yerde geçiyordu; tarayıcı bunları kendiliğinden yuvarlar. Yuvarlamayı tarayıcıya bırakmak yerine açıkça yazdık: 500→400, 600→700, 800→900. Sonuç bir karar, kaza değil. */ --font: 'Lato', "Helvetica Neue", Helvetica, "Segoe UI", system-ui, Arial, sans-serif; --yazi-xs: 11px; /* kolon başlığı, rozet */ --yazi-sm: 12.5px; /* ikincil metin */ --yazi-md: 13.5px; /* taban · tablo gövdesi */ --yazi-lg: 15px; /* sayfa başlığı, panel başlığı */ --yazi-baslik: 19px; /* kayıt başlığı */ --yazi-sayi: 26px; /* KPI rakamı */ --harf-etiket: .07em; /* uppercase etiket harf aralığı */ } /* Dokunmatik: tablet/telefon ya da kaba işaretçi → hedefler 44px. Otomatik; kullanıcı ayarı [data-yogunluk] ile ezer. */ @media (pointer: coarse) { :root { --row-h: 44px; --tik-h: 44px; } } :root[data-yogunluk="siki"] { --row-h: 30px; --tik-h: 26px; } :root[data-yogunluk="normal"] { --row-h: 34px; --tik-h: 28px; } :root[data-yogunluk="rahat"] { --row-h: 40px; --tik-h: 32px; } :root[data-yogunluk="dokunmatik"] { --row-h: 48px; --tik-h: 44px; } /* İki kapı: QDMS aynı token setini kullanır, yalnız aksanı değişir. */ :root[data-kapi="qdms"] { --brand: #2b5457; --brand-dark: #1f3239; --brand-soft: #eaf0f5; --brand-line: #a9c1d3; } /* ========================================================================== ③ zp-* KÖPRÜSÜ — tasarım tarafının paket değişkenleri (KDE-0072) Tasarım tarafı paketlerini kendi `--zp-*` adlarıyla yazıyor. Adlar burada tanımlanıyor ki paketler olduğu gibi çalışsın ve bileşen dosyalarında sabit hex kalmasın. DEĞERLER TASARIMIN KENDİSİNDEN. Efkan 2026-10-10: gelen tasarımları görsel olarak gördü ve onayladı; arayüz değerlerinin şartnameyle kıyaslanıp ezilmesi istenmiyor — çalışma mantığını ve sistemi bozmadığı sürece tasarımın ölçüsü geçerli. Bu, paketin ilk uygulanışındaki "şartname kazanır" maddesini ARAYÜZ DEĞERLERİ için geri alır; davranış (söz dönen çağrılar, kuyruk, odak yönetimi) hâlâ projenin işi. Tek istisna `--zp-primary`: `#3C6E71`'in bilinçli karar olmadığı, eski paletten geldiği tespiti Efkan'ın kendisinden geldi ve geri alınmadı — ana renk `--brand` olarak kalıyor. Köprü `:root`ta: ZpDialog bağlamaları `.zp-dlg-backdrop`a kapatılmıştı, gelecek tablo paketi onları göremezdi. ========================================================================== */ :root { /* --- Temel (Monochrome Beach) --- */ --zp-text: #353535; --zp-text-muted: #5C6266; --zp-text-faint: #9A9FA3; --zp-primary: var(--brand); /* istisna — yukarıdaki gerekçe */ --zp-primary-hov: var(--brand-dark); --zp-navy: #284B63; --zp-surface: #FFFFFF; --zp-page: #EFEFEF; --zp-footer: #F5F5F5; --zp-subtle: #F1F1F1; --zp-border: #D9D9D9; --zp-divider: #ECECEC; --zp-btn-border: #C4C4C4; /* --- Ocean Sunset ham renkleri --- Paketler bu adlarla gelebiliyor, o yüzden tanımlı. GRAFİK SERİSİ DEĞİL: grafikler `--seri-1…10` kullanmaya devam eder (§2), bu set onların yerine geçmez. */ --os-1: #001219; --os-2: #005F73; --os-3: #0A9396; --os-4: #94D2BD; --os-5: #E9D8A6; --os-6: #EE9B00; --os-7: #CA6702; --os-8: #BB3E03; --os-9: #AE2012; --os-10: #9B2226; /* --- Durum renkleri: accent / yazı (ink) / zemin (tint) --- Ölçüm: -ink/-tint çiftleri kendi zemininde AA geçiyor (warn 4.94 · info 7.60 · ok 4.43 · err 5.58 · del 6.34 · save 4.63). */ --zp-warn: #EE9B00; --zp-warn-ink: #A35200; --zp-warn-tint: #FDF0D5; --zp-info: #284B63; --zp-info-ink: #284B63; --zp-info-tint: #E3EAF0; --zp-ok: #0A9396; --zp-ok-ink: #08797B; --zp-ok-tint: #DDF1EA; --zp-err: #AE2012; --zp-err-ink: #AE2012; --zp-err-tint: #F8E1DE; --zp-del: #9B2226; --zp-del-hov: #7E1B1F; --zp-del-ink: #9B2226; --zp-del-tint: #F8E1DE; --zp-save: #CA6702; --zp-save-ink: #BB3E03; --zp-save-tint: #FBE8D4; --zp-chip-bg: #F8F2E1; --zp-chip-border: #E9D8A6; /* --- Tablo --- */ --zp-row-hover: #F4F7F7; --zp-row-selected: #EAF1F1; --zp-thumb-bg: #EEF4F4; --zp-thumb-border: #CFE0E0; /* --- Genel --- */ --zp-font: Lato, "Segoe UI", system-ui, sans-serif; --zp-radius: 14px; --zp-radius-s: 10px; --zp-shadow: 0 1px 2px rgba(53,53,53,.06), 0 8px 24px rgba(53,53,53,.06); --zp-focus: 0 0 0 3px rgba(60,110,113,.45); --zp-backdrop: rgba(30, 40, 48, 0.55); }