/** * Proje: Hızlı Davetiye * Dosya: varliklar/css/renkler.css * Açıklama: Kurumsal kırmızı ve siyah renkleri baz alan, CSS Variables (Değişkenler) * ile Light ve Dark mod altyapısını kuran stil dosyası. */ /* ========================================================= GENEL (GÜNDÜZ / LIGHT MOD) RENK DEĞİŞKENLERİ Müşteri arayüzü varsayılan olarak Light modda açılır. ========================================================= */ :root { /* Kurumsal Renklerimiz */ --kurumsal-kirmizi: #e63946; /* Canlı, dikkat çekici e-ticaret kırmızısı */ --koyu-kirmizi: #b71c1c; /* Hover durumları (buton üzerine gelme) için koyu kırmızı */ --kurumsal-siyah: #1a1a1a; /* Metinler ve sert zeminler için derin siyah */ /* Zemin ve Yüzey Renkleri */ --arkaplan-rengi: #f8f9fa; /* Göz yormayan çok açık gri genel arkaplan */ --yuzey-rengi: #ffffff; /* Kartlar, kutular ve paneller için tam beyaz */ --cerceve-rengi: #e0e0e0; /* Hafif sınır ve ayırıcı çizgi rengi */ /* Metin Renkleri */ --ana-metin-rengi: #212121; /* Okunabilir koyu siyah renkli metin */ --ikincil-metin-rengi: #757575; /* Daha az önemli, soluk gri metin */ /* Bildirim/Durum Renkleri */ --basari-rengi: #2e7d32; /* Başarılı işlemler için yeşil */ --uyari-rengi: #fbc02d; /* Uyarılar için sarı */ --hata-rengi: #c62828; /* Hatalar için kırmızı */ /* Derinlik (Gölgeler) ve Geçişler */ --kutu-golgesi: 0 4px 6px rgba(0, 0, 0, 0.1); --gecis-suresi: 0.3s; } /* ========================================================= GECE / DARK MOD RENK DEĞİŞKENLERİ Kullanıcı [data-tema="gece"] olarak ayarladığında bu palet devreye girer. Kurumsal kırmızı vurgular (buton vs) aynı kalır, zeminler kararır. ========================================================= */ [data-tema="gece"] { /* Gece Modu Zemin ve Yüzey Renkleri */ --arkaplan-rengi: #121212; /* Saf siyah yerine göze hoş gelen koyu füme/gri arkaplan */ --yuzey-rengi: #1e1e1e; /* Kartlar için biraz daha açık koyu gri yüzey */ --cerceve-rengi: #333333; /* Gece moduna uygun karartılmış çerçeve */ /* Gece Modu Metin Renkleri */ --ana-metin-rengi: #f5f5f5; /* Koyu zeminde okunabilir açık gri/beyaz ana metin */ --ikincil-metin-rengi: #b0bec5; /* Daha soluk, maviye çalan açık gri açıklama metni */ /* Gece Modunda Gölgeler daha koyu olabilir */ --kutu-golgesi: 0 4px 6px rgba(0, 0, 0, 0.4); } /* ========================================================= YÖNETİCİ PANELİ (ADMIN) İÇİN ZORUNLU DARK MOD Yönetici panelinde sadece Dark mod geçerli olacaktır. Yönetici arayüzünde etiketine class="yonetici-paneli" eklenecektir. ========================================================= */ .yonetici-paneli { --arkaplan-rengi: #121212 !important; --yuzey-rengi: #1e1e1e !important; --cerceve-rengi: #333333 !important; --ana-metin-rengi: #f5f5f5 !important; --ikincil-metin-rengi: #b0bec5 !important; --kutu-golgesi: 0 4px 6px rgba(0, 0, 0, 0.4) !important; } /* ========================================================= GENEL HTML/BODY STİLLERİNİN DEĞİŞKENLERE BAĞLANMASI ========================================================= */ body { background-color: var(--arkaplan-rengi); color: var(--ana-metin-rengi); transition: background-color var(--gecis-suresi) ease, color var(--gecis-suresi) ease; font-family: 'Inter', system-ui, sans-serif; /* Müşteri tarafı fontu, Fabric dahil edilecek */ margin: 0; padding: 0; } /* Linkler ve Kurumsal Renk Vurguları */ a { color: var(--kurumsal-kirmizi); text-decoration: none; transition: color var(--gecis-suresi); } a:hover { color: var(--koyu-kirmizi); } /* Evrensel Kutu/Kart Yapısı */ .kutu { background-color: var(--yuzey-rengi); border: 1px solid var(--cerceve-rengi); box-shadow: var(--kutu-golgesi); border-radius: 8px; /* Modern yuvarlak köşeler */ padding: 20px; }