/* ========================================================= ZENKA DİJİTAL — TASARIM SİSTEMİ (CSS DEĞİŞKENLERİ) --------------------------------------------------------- Bu dosya sitenin "renk ve ölçü kutusu"dur. Rengi, yazı tipini ya da boşlukları değiştirmek istersen SADECE bu dosyayı düzenlemen yeterli; bütün site güncellenir. Kullanımı: color: var(--renk-metin); ========================================================= */ /* --------------------------------------------------------- 1) AÇIK TEMA (varsayılan) :root = sayfanın en üst öğesi (html). Burada tanımlanan değişkenler sitenin her yerinde kullanılabilir. --------------------------------------------------------- */ :root { /* --- Ana renkler --- */ --renk-arkaplan: #F6F7FB; /* Sayfanın zemini (çok açık gri) */ --renk-yuzey: #FFFFFF; /* Kartlar, menü gibi yüzeyler */ --renk-yuzey-2: #EEF0F7; /* İkinci seviye yüzey (kod kutusu, giriş alanı) */ --renk-metin: #0F1B3D; /* Ana metin rengi (lacivert) */ --renk-metin-soluk: #4A5578; /* Tarih, özet gibi ikincil metinler */ --renk-kenarlik: #E3E6F0; /* İnce çizgiler ve çerçeveler */ /* --- Vurgu rengi (logodaki mavi): düğmeler, bağlantılar --- */ --renk-vurgu: #156CB8; --renk-vurgu-koyu: #0F5A9E; /* Üzerine gelince (hover) kullanılır */ --renk-vurgu-uzerinde: #FFFFFF; /* Mavi zemin üzerindeki yazı rengi */ --renk-vurgu-yumusak: #E6F2FC; /* Mavinin çok açık tonu (arka plan vurgusu) */ --renk-altin: #C29A3E; /* Logodaki altın çizgi: küçük süs vurguları */ --renk-logo-ust: #1E8FD0; /* (eski) lavanta vurgu */ --renk-logo-yazi: #123A78; /* Logo yazısı "ZENKA" (logodaki lacivert) */ --renk-logo-alt-yazi: #123A78; /* Logo yazısı "DİJİTAL" */ /* --- Marka gradyanı (hero alanında kullanılacak) --- */ --renk-lacivert: #0F1B3D; --gradyan-marka: linear-gradient(135deg, #0A1A3F 0%, #123A78 50%, #1E8FD0 100%); /* --- Durum renkleri (form uyarıları için) --- */ --renk-basari: #137A4B; --renk-hata: #C0262D; /* --- Kategori renkleri: her kategorinin kendi etiket rengi --- */ --kat-web-metin: #0C6FA8; --kat-web-zemin: #E2F3FB; /* Web Tasarımı */ --kat-yz-metin: #0B7285; --kat-yz-zemin: #E3F6F8; /* Yapay Zekâ */ --kat-yazilim-metin: #1D4ED8; --kat-yazilim-zemin: #E6EEFE;/* Yazılım */ --kat-ipucu-metin: #9A5B00; --kat-ipucu-zemin: #FDF1DC; /* Dijital İpuçları */ /* --- Footer (alt bilgi) renkleri: her iki temada da lacivert zemin --- */ --renk-alt-zemin: #0F1B3D; --renk-alt-metin: #C9CDE3; --renk-alt-baslik: #FFFFFF; --renk-alt-kenarlik: #24305A; /* --- Gölgeler --- */ --golge-kucuk: 0 1px 2px rgba(15, 27, 61, 0.06), 0 1px 3px rgba(15, 27, 61, 0.08); --golge-orta: 0 4px 12px rgba(15, 27, 61, 0.08), 0 2px 4px rgba(15, 27, 61, 0.05); --golge-buyuk: 0 16px 40px rgba(15, 27, 61, 0.12); /* Tarayıcıya bu sayfanın açık renkli olduğunu söyler (kaydırma çubuğu, form öğeleri buna göre çizilir) */ color-scheme: light; /* ===== Bu kısımdan sonrası temaya göre DEĞİŞMEZ ===== */ /* --- Yazı tipleri --- */ --font-baslik: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-metin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-kod: "JetBrains Mono", ui-monospace, Consolas, monospace; /* --- Yazı boyutları --- clamp(en küçük, ideal, en büyük): ekran büyüdükçe yazı da yumuşakça büyür, ama belirlediğimiz sınırları aşmaz. */ --boyut-xs: 0.8125rem; /* 13px */ --boyut-sm: 0.9375rem; /* 15px */ --boyut-md: 1.0625rem; /* 17px — normal metin */ --boyut-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); --boyut-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem); /* H3 */ --boyut-2xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.25rem); /* H2 */ --boyut-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.5rem); /* H1 */ --satir-dar: 1.2; /* Başlıklar için satır yüksekliği */ --satir-normal: 1.7; /* Metinler için (rahat okuma) */ /* --- Boşluk ölçeği (her şey 4px'in katları) --- */ --bosluk-1: 0.25rem; /* 4px */ --bosluk-2: 0.5rem; /* 8px */ --bosluk-3: 0.75rem; /* 12px */ --bosluk-4: 1rem; /* 16px */ --bosluk-5: 1.5rem; /* 24px */ --bosluk-6: 2rem; /* 32px */ --bosluk-7: 3rem; /* 48px */ --bosluk-8: 4rem; /* 64px */ --bosluk-9: 6rem; /* 96px — bölümler arası */ /* --- Köşe yuvarlaklıkları --- */ --kose-kucuk: 8px; /* Düğmeler, giriş alanları */ --kose-orta: 16px; /* Kartlar */ --kose-buyuk: 24px; /* Büyük bölümler */ --kose-tam: 999px; /* Hap şeklinde etiketler */ /* --- Sayfa genişliği --- */ --genislik-icerik: 1200px; /* Genel sayfa genişliği */ --genislik-okuma: 720px; /* Yazı metni (çok geniş satır okumayı zorlaştırır) */ --kenar-boslugu: 1rem; /* Telefonda sağ/sol boşluk */ --menu-yukseklik: 4.5rem; /* Üst menünün yüksekliği (72px) */ /* --- Animasyon süreleri --- */ --gecis-hizli: 150ms ease; --gecis-normal: 250ms ease; /* --- Katman sırası (hangi öğe hangisinin üstünde dursun) --- */ --katman-menu: 100; --katman-mobil-menu: 200; /* NOT: Ekran kırılma noktaları (768px, 1024px, 1280px) CSS değişkeni olarak @media içinde KULLANILAMAZ. Bu yüzden onları doğrudan sayı olarak yazacağız. */ } /* Tablet ve üstünde sağ/sol boşluğu biraz artır */ @media (min-width: 768px) { :root { --kenar-boslugu: 2rem; } } /* --------------------------------------------------------- 2) KOYU TEMA Sadece "renk" değişkenlerini yeniden tanımlıyoruz. Ölçüler ve yazı tipleri aynı kalıyor. --------------------------------------------------------- */ [data-theme="dark"] { --renk-arkaplan: #0B1020; --renk-yuzey: #151B33; --renk-yuzey-2: #1C2342; --renk-metin: #E8EAF6; --renk-metin-soluk: #A3AACB; --renk-kenarlik: #262E4F; --renk-vurgu: #4CB8EE; --renk-vurgu-koyu: #7ACDF4; --renk-vurgu-uzerinde: #0B1020; --renk-vurgu-yumusak: #10284A; --renk-logo-ust: #5CC4F0; --renk-logo-yazi: #F2F6FF; --renk-logo-alt-yazi: #5CC4F0; --renk-altin: #D4B062; --gradyan-marka: linear-gradient(135deg, #0B1020 0%, #0F2A5A 55%, #1A7FC0 100%); --renk-basari: #4ADE9B; --renk-hata: #FF7A80; --kat-web-metin: #7ACDF4; --kat-web-zemin: #10304A; --kat-yz-metin: #5FD3E4; --kat-yz-zemin: #10303A; --kat-yazilim-metin: #8DB0FF; --kat-yazilim-zemin: #152447; --kat-ipucu-metin: #F5C26B; --kat-ipucu-zemin: #33270F; --renk-alt-zemin: #070B17; --renk-alt-metin: #A3AACB; --renk-alt-baslik: #E8EAF6; --renk-alt-kenarlik: #1C2342; /* Koyu zeminde gölgeler daha koyu olmalı ki görünsün */ --golge-kucuk: 0 1px 2px rgba(0, 0, 0, 0.4); --golge-orta: 0 4px 12px rgba(0, 0, 0, 0.35); --golge-buyuk: 0 16px 40px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* --------------------------------------------------------- 3) SİSTEM TERCİHİ Ziyaretçi henüz bir tema SEÇMEDİYSE ve bilgisayarı koyu moddaysa, site otomatik olarak koyu açılır. (Bu bölüm, değerleri yukarıdaki koyu temayla aynı tutar. Koyu temada bir rengi değiştirirsen burada da değiştir.) --------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --renk-arkaplan: #0B1020; --renk-yuzey: #151B33; --renk-yuzey-2: #1C2342; --renk-metin: #E8EAF6; --renk-metin-soluk: #A3AACB; --renk-kenarlik: #262E4F; --renk-vurgu: #4CB8EE; --renk-vurgu-koyu: #7ACDF4; --renk-vurgu-uzerinde: #0B1020; --renk-vurgu-yumusak: #10284A; --renk-logo-ust: #5CC4F0; --renk-logo-yazi: #F2F6FF; --renk-logo-alt-yazi: #5CC4F0; --renk-altin: #D4B062; --renk-altin: #D4B062; --gradyan-marka: linear-gradient(135deg, #0B1020 0%, #0F2A5A 55%, #1A7FC0 100%); --renk-basari: #4ADE9B; --renk-hata: #FF7A80; --kat-web-metin: #7ACDF4; --kat-web-zemin: #10304A; --kat-yz-metin: #5FD3E4; --kat-yz-zemin: #10303A; --kat-yazilim-metin: #8DB0FF; --kat-yazilim-zemin: #152447; --kat-ipucu-metin: #F5C26B; --kat-ipucu-zemin: #33270F; --renk-alt-zemin: #070B17; --renk-alt-metin: #A3AACB; --renk-alt-baslik: #E8EAF6; --renk-alt-kenarlik: #1C2342; --golge-kucuk: 0 1px 2px rgba(0, 0, 0, 0.4); --golge-orta: 0 4px 12px rgba(0, 0, 0, 0.35); --golge-buyuk: 0 16px 40px rgba(0, 0, 0, 0.5); color-scheme: dark; } }