/* Proje geneli kimlik token'ları — TEK KAYNAK. custom-theme.css projenin paletidir (yüzey, kenarlık, metin, pastel çiftler, gölge; açık + koyu tema, her sayfada yüklü). Sayfa CSS'leri renkleri DOĞRUDAN oradan çeker: var(--bg-surface), var(--border-color), var(--text-primary) gibi. Bu dosya yalnızca global palette'te KARŞILIĞI OLMAYAN, ama birden çok ekranın paylaştığı değerleri tutar: dönüşüm/mülk/danışman ekranlarının yeşil kimliği, dolu yıkıcı aksiyon ve global token'lardan türetilen ara tonlar. Daha önce yalnız properties/property_tokens.css içinde --prop-* adıyla duruyordu; danışman ekranları da aynı kimliği kullandığı için buraya alındı. property_tokens.css artık bu dosyayı import edip --prop-* adlarını buraya bağlar, yani yeşilin tek bir tanımı vardır. Yeni bir değer eklemeden önce sorulacak soru: bunun global karşılığı gerçekten yok mu? Varsa global kullanılır, buraya eklenmez. Yüklenme sırası: custom-theme.css'ten SONRA, sayfa CSS'lerinden ÖNCE. */ :root { /* ---------- Sayfa kabuğu ölçüsü (TEK KAYNAK) ---------- Navbar, footer, today şeridi ve tüm sayfa içerikleri bu iki değeri kullanır. Daha önce her yerde "max-width:1800px + padding:10%" elle tekrarlanıyordu; %10 kapsayıcıdan (ekran genişliğinden) hesaplandığı için ekran büyüdükçe içerik daralıyordu (1920'de 1416px, 3440'ta 1112px). Sabit ölçüye geçildi: içerik her ekranda aynı genişlikte. Ölçüyü değiştirmek için yalnız bu iki satır düzenlenir. */ --app-shell-max: 1464px; --app-shell-pad: 24px; /* Tek kolon form ve sihirbazların dar ölçüsü (page-wrapper-slim). */ --app-shell-max-slim: 800px; /* Kimlik ekranlarının (giriş, kayıt, magic link, şifre sıfırlama, 2FA) ortak kart genişliği. Bootstrap kolon merdiveni yüzde verdiği için her ekranda farklı bir kart doğuyordu (451px ile 652px arası, altı farklı değer); .identity-card bunu sabitler. */ --app-card-max: 600px; /* ---------- Yeşil kimlik ---------- Global palette birincil renk mavi (--primary), vurgu mor (--accent); yeşil dönüşüm/mülk/danışman ekranlarına ait bir karardır. */ /* Metin, kenarlık ve ikon rengi (beyaz zeminde 6.4:1). */ --app-accent: #1d6b4a; /* Dolu buton zemini — üzerine --app-on-accent yazılır. */ --app-accent-fill: #1d6b4a; --app-accent-fill-hover: #17573c; --app-on-accent: #ffffff; --app-focus-ring: rgba(29, 107, 74, 0.15); /* Her temada KOYU kalan yüzeyler (kimlik akışı navbarı) için yeşil. --app-accent açık zemine göre koyudur; lacivert navbarda okunmaz. Değer, --app-accent'in koyu tema karşılığıyla aynıdır — ama burada değişen tema değil zemin olduğu için tema geçişinde sabit kalır. */ --app-accent-on-dark: #7fc9a6; /* Yeşilin çok açık zemin hâli (ikon kutusu, rozet arkası). Global --pastel-green'den türer, koyu temada kendiliğinden doğru yöne kayar. */ --app-accent-soft: #eaf4ef; --app-accent-soft: color-mix(in srgb, var(--app-accent) 10%, var(--bg-surface)); --app-accent-border: #cde3d8; --app-accent-border: color-mix(in srgb, var(--app-accent) 24%, transparent); /* ---------- Marka laciverti (kurumsal kimlik) ---------- Pazarlama yüzeylerinin (anasayfa, pro_roles) --e-primary değeri. Uygulama içi ekranlar da aynı laciverti kullanabilsin ve renk tek yerden değişsin diye buraya alındı; anasayfa2.html/pro_roles.html kendi --e-primary'sini artık bu token'a bağlar. Koyu temada da aynı kalır: bu bir tema rengi değil, marka rengidir. */ --app-navy: #1F2B47; --app-navy-strong: #141D33; --on-app-navy: #ffffff; /* ---------- Yıkıcı aksiyonun dolu hâli ---------- Global --pastel-pink-text bir METİN rengidir; dolu zemin olarak beyaz yazıyla yeterli kontrast vermez. custom-theme.css'in --accent / --accent-fill ayrımıyla aynı gerekçe. */ --app-danger-fill: #9b3540; --app-danger-fill-hover: #7f2530; --app-on-danger: #ffffff; /* ---------- Türetilen ara değerler ---------- Global'de tanımlı token'lardan hesaplanır, dolayısıyla koyu temada da kendiliğinden doğru yöne kayar. Her birinde ilk satır color-mix desteklemeyen tarayıcılar için sabit yedektir. */ /* Yüzeyle sayfa zemini arasındaki kademe (pasif satır, tablo başlığı). */ --app-surface-muted: #f4f8f6; --app-surface-muted: color-mix(in srgb, var(--bg-surface) 88%, var(--border-color)); /* Uyarı/hata/bilgi kutularının kenarlığı: global'de yalnız zemin ve metin rengi var, kenarlık yok — metnin saydamlaştırılmış hâli kullanılıyor. */ --app-warning-border: #f0dcae; --app-warning-border: color-mix(in srgb, var(--pastel-yellow-text) 32%, transparent); --app-danger-border: #f5c2c0; --app-danger-border: color-mix(in srgb, var(--pastel-pink-text) 32%, transparent); --app-info-border: #d8e7f4; --app-info-border: color-mix(in srgb, var(--pastel-blue-text) 32%, transparent); --app-success-border: #bfe4d1; --app-success-border: color-mix(in srgb, var(--pastel-green-text) 32%, transparent); /* ---------- Buton kenarlığı ---------- Ana hatlı ve nötr butonlar giriş alanlarıyla aynı kenarlık tonunu kullandığı için "tıklanabilir" okunmuyordu. Bu iki değer YALNIZ buton kenarlıkları içindir; kutu/kart kenarlığı global --border-color'da kalır. Kalınlık tek yerden yönetilsin diye ayrı token: 1px yeterli gelmezse yalnız --app-btn-border-width değiştirilir. */ --app-accent-border-strong: #9cc7b2; --app-accent-border-strong: color-mix(in srgb, var(--app-accent) 48%, transparent); --app-border-strong: #c4ccd2; --app-border-strong: color-mix(in srgb, var(--text-muted) 42%, var(--border-color)); --app-btn-border-width: 1px; } html[data-theme='dark'] { /* Koyu zeminde okunur açık yeşil; dolgu ise beyaz metni taşıyacak kadar koyu kalır. */ --app-accent: #7fc9a6; --app-accent-fill: #245f49; --app-accent-fill-hover: #2f7a5c; --app-on-accent: #ffffff; --app-focus-ring: rgba(127, 201, 166, 0.25); --app-danger-fill: #a2545c; --app-danger-fill-hover: #8c454d; --app-on-danger: #ffffff; }