/* KampüsBot tasarım belirteçleri — TEK KAYNAK. Daha önce bu palet iki yerde ayrı ayrı yazılıydı (index.html ve main.py içindeki sunucu sayfaları). İkisini birlikte güncellemek gerekiyordu, biri unutulunca site iki farklı renge bölünüyordu. Artık ikisi de bu dosyayı çekiyor. Buraya yalnızca BELİRTEÇ girer (renk, ölçek, gölge). Bileşen kuralları kendi dosyasında kalır — böylece bu dosya küçük ve çakışmasız kalıyor. */ :root { /* ---- Ton merdiveni ---- */ --gri-50: #F8FAFC; --gri-100: #F1F5F9; --gri-200: #E2E8F0; --gri-300: #CBD5E1; --gri-400: #94A3B8; --gri-500: #64748B; --gri-600: #475569; --gri-700: #334155; --gri-800: #1E293B; --gri-900: #0F172A; /* ---- Yüzeyler ve metin ---- */ --bg-color: #F8FAFC; --card-bg: #FFFFFF; --card-bg-ust: #FFFFFF; --izgara-basi: var(--gri-100); --kabuk: #FFFFFF; --kabuk-cizgi: var(--gri-200); --text-main: var(--gri-900); --text-soft: var(--gri-600); --text-muted: var(--gri-500); --border-color: var(--gri-200); --border-parlak: var(--gri-300); /* main.py sayfalarının kullandığı kısa adlar — aynı değerlere bağlı ki iki taraf tek yerden değişsin. */ --ink: var(--gri-900); --soft: var(--gri-600); --faint: var(--gri-500); --cizgi: var(--gri-200); --zemin: #F8FAFC; --kart: #FFFFFF; --kart-ust: #FFFFFF; /* ---- Eylem ve vurgu ---- */ --ana: #2563EB; --ana-koyu: #1D4ED8; --ana-soft: #DBEAFE; --vurgu: #7C3AED; --vurgu-koyu: #6D28D9; --vurgu-soft: #EDE9FE; /* --ana ZEMINI uzerindeki yazi. Aydinlikta --ana koyu mavi (beyaz yazi okunur), karanlikta acik mavi oluyor - beyaz yazi orada 2.5:1'e dusuyor. Bu yuzden "ana uzerindeki yazi" ayri bir belirtec. */ --ana-ustu: #FFFFFF; /* Bootstrap'in KENDI link rengi (#0D6EFD) temamizi tanimiyor ve karanlik zeminde 3.7:1'de kaliyor. Link degiskenlerini kendi eylem rengimize bagliyoruz; --ana-rgb karanlik blokta degistigi icin tema ile birlikte kendiliginden donuyor. Bootstrap rgb UCLUSU istiyor, hex kabul etmiyor. */ --ana-rgb: 37, 99, 235; --ana-koyu-rgb: 29, 78, 216; --bs-link-color-rgb: var(--ana-rgb); --bs-link-hover-color-rgb: var(--ana-koyu-rgb); --primary-color: var(--ana); --primary-hover: var(--ana-koyu); --accent-color: var(--vurgu); /* ---- Olumlu / olumsuz ---- Yazı tonları soft zeminde AA'yı geçecek kadar koyu seçildi. Önceki #16A34A/#DCFCE7 çifti 3.0:1'de kalıyordu; küçük punto için 4.5 gerekiyor. */ --olumlu: #15803D; --olumlu-soft: #DCFCE7; --olumlu-koyu: #166534; --olumsuz: #B91C1C; --olumsuz-soft: #FEE2E2; --olumsuz-koyu: #991B1B; /* dolu düğme hover */ --olumsuz-cizgi: #FCA5A5; /* soft zeminli kutuların kenarı */ --success-color: var(--olumlu); --danger-color: var(--olumsuz); /* Uyarı / bekliyor durumu. Önceden #8A6119 + #FBF1DC ikilisiydi; mat sarı mevcut paletin dışında kalıyordu. */ --uyari: #92400E; --uyari-soft: #FEF3C7; /* Çakışma bloğu gibi yumuşak kırmızı zeminler için. */ --grad-olumsuz: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%); /* Soft zemin üstündeki etiket yazısı için koyu ton */ --ana-yazi: #1D4ED8; --notr-soft: var(--gri-200); --notr-yazi: var(--gri-700); /* ---- Gradyanlar ---- grad-ana'nın açık ucu #3B82F6'ydı; beyaz yazıyla 3.68:1 veriyordu. Başlangıç durağı koyulaştırıldı, buton boyunca AA sağlanıyor. */ --grad-zemin: radial-gradient(1100px 620px at 50% -200px, #FFFFFF 0%, #F8FAFC 60%, #F1F5F9 100%); --grad-kart: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%); --grad-kabuk: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%); --grad-ana: linear-gradient(160deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%); /* Ana düğmenin hover'ı GRİ bir gradyandı (#5A6472→#2B333C, eski paletten kalma): maviye basınca düğme griye dönüyordu. Artık koyulaşan mavi. */ --grad-ana-hover: linear-gradient(160deg, #1D4ED8 0%, #1E40AF 55%, #1E3A8A 100%); --grad-vurgu: linear-gradient(160deg, #7C3AED 0%, #6D28D9 55%, #5B21B6 100%); --grad-izgara: linear-gradient(180deg, #FBFCFE 0%, #F4F7FA 100%); --grad-blok: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); /* ---- Gölge ---- */ --golge-sm: 0 1px 2px rgba(31, 37, 44, 0.06); --golge-md: 0 6px 18px rgba(31, 37, 44, 0.09); --golge-lg: 0 16px 36px rgba(31, 37, 44, 0.15); /* ---- Yazı ölçeği ---- Sitede 34 ayrı boyut vardı; 0.72/0.74/0.75/0.76 gibi komşular gözle ayırt edilemiyor (0.02rem = 0.3px) ama tasarımı dağınık gösteriyor. Ölçek 12 basamağa indirildi; hiçbir metin 1px'den fazla kaymıyor. */ --fs-1: 0.70rem; --fs-2: 0.75rem; --fs-3: 0.80rem; --fs-4: 0.86rem; --fs-5: 0.92rem; --fs-6: 1rem; --fs-7: 1.15rem; --fs-8: 1.35rem; --fs-9: 1.6rem; --fs-10: 2rem; --fs-11: 2.3rem; --fs-12: 3.2rem; /* ---- Köşe yarıçapı ---- 12 ayrı değer vardı (5,6,7,8,10,12,14,16,18,20px). 5 basamağa indirildi. */ --r-0: 4px; --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-tam: 999px; /* ---- Boşluk ölçeği ---- padding/margin/gap'te 37 ayrı değer vardı (479 kullanım): 9/10/11px, 12/13px, 14/15px gibi 1px'lik komşular gözle seçilmiyor ama her yeni kural bir öncekine bakmadan yazıldığı için ölçek dağılmıştı. Basamaklar mevcut kullanımın YOĞUN olduğu yerlerden seçildi; böylece 10px (62 kullanım) veya 14px (38) gibi fiilî kararlar korunuyor ve hiçbir öğe 2px'den fazla kaymıyor. Yeni kural yazarken bu listeden seç, araya değer uydurma. */ --b-1: 2px; --b-2: 4px; --b-3: 6px; --b-4: 8px; --b-5: 10px; --b-6: 12px; --b-7: 14px; --b-8: 16px; --b-9: 20px; --b-10: 24px; --b-11: 32px; --b-12: 40px; --b-13: 48px; --b-14: 60px; --b-15: 80px; /* ---- Dokunma hedefi ---- Mobilde butonlar 37px yüksekliğindeydi; parmakla güvenli asgari 44px. */ --dokunma: 44px; } /* ============================================================================ KARANLIK MOD ---------------------------------------------------------------------------- Tek blok: sistem tercihi 'deki küçük betikle data-tema'ya çevriliyor, böylece hem @media hem [data-tema] için aynı değerleri İKİ KEZ yazmak gerekmiyor (iki kopya zamanla birbirinden ayrılır). Ton merdiveni TERSTEN tanımlı: --gri-50 en koyu, --gri-900 en açık. Merdiven anlamsal kullanıldığı için (--text-main: var(--gri-900)) bütün türev belirteçler kendiliğinden doğru tarafa düşüyor. Renkler körlemesine ters çevrilmedi: mavi #2563EB koyu zeminde okunmuyor, açık tonlara (#60A5FA) taşındı; "soft" zeminler açık pastel yerine koyu tonlara çevrildi. Hepsinin kontrastı ölçüldü. ========================================================================= */ :root[data-tema="karanlik"] { color-scheme: dark; --gri-50: #0F172A; --gri-100: #1E293B; --gri-200: #334155; --gri-300: #475569; --gri-400: #64748B; --gri-500: #94A3B8; --gri-600: #CBD5E1; --gri-700: #E2E8F0; --gri-800: #F1F5F9; --gri-900: #F8FAFC; /* Yüzeyler: zemin en koyu, kart bir kademe açık (derinlik hissi). Saf siyah bilerek yok - uzun okumada göz yoruyor. */ --bg-color: #0B1220; --zemin: #0B1220; --card-bg: #151E30; --card-bg-ust: #151E30; --kart: #151E30; --kart-ust: #151E30; --kabuk: #131B2B; --izgara-basi: #1E293B; --kabuk-cizgi: #29354A; --border-color: #29354A; --border-parlak: #3A4860; --cizgi: #29354A; /* Eylem rengi koyu zeminde açılıyor; "koyu" varyant artık DAHA AÇIK demek (hover'da öne çıkması gerekiyor). */ --ana: #60A5FA; --ana-koyu: #93C5FD; --ana-soft: #1E3A5F; --ana-yazi: #93C5FD; --ana-rgb: 96, 165, 250; /* #60A5FA */ --ana-koyu-rgb: 147, 197, 253; /* #93C5FD */ --ana-ustu: #0B1220; /* acik mavi zeminde koyu yazi */ --vurgu: #A78BFA; --vurgu-koyu: #C4B5FD; --vurgu-soft: #2E2555; --olumlu: #4ADE80; --olumlu-koyu: #86EFAC; --olumlu-soft: #14371F; --olumsuz: #F87171; --olumsuz-koyu: #FCA5A5; --olumsuz-soft: #3B1518; --olumsuz-cizgi: #7F1D1D; --uyari: #FCD34D; --uyari-soft: #3A2A08; --notr-soft: #29354A; --notr-yazi: #E2E8F0; --grad-zemin: radial-gradient(1100px 620px at 50% -200px, #16203450 0%, #0B1220 60%, #0B1220 100%); --grad-kart: linear-gradient(180deg, #151E30 0%, #151E30 100%); --grad-kabuk: linear-gradient(180deg, #131B2B 0%, #131B2B 100%); --grad-izgara: linear-gradient(180deg, #1A2436 0%, #151E30 100%); --grad-blok: linear-gradient(180deg, #151E30 0%, #111A2A 100%); --grad-olumsuz: linear-gradient(180deg, #2E1114 0%, #3B1518 100%); /* Dolu mavi düğme: beyaz yazı taşıdığı için koyu zeminde de doygun kalıyor. */ --grad-ana: linear-gradient(160deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%); --grad-ana-hover: linear-gradient(160deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%); --grad-vurgu: linear-gradient(160deg, #7C3AED 0%, #6D28D9 55%, #5B21B6 100%); /* Koyu zeminde yumuşak gölge görünmüyor; saf siyah ve daha belirgin. */ --golge-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --golge-md: 0 6px 18px rgba(0, 0, 0, 0.45); --golge-lg: 0 16px 36px rgba(0, 0, 0, 0.55); } /* Tema düğmesi */ .tema-dugme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--cizgi); border-radius: var(--r-2); cursor: pointer; color: var(--ink); font-size: var(--fs-5); line-height: 1; /* color BILEREK gecise dahil degil: degeri var(--ink)'ten geliyor ve degisken tema ile degisince gecis baslangic renginde TAKILI KALIYOR (3 sn sonra bile eski renk). Olcumle dogrulandi. */ transition: border-color .15s; } .tema-dugme:hover { border-color: var(--ana); color: var(--ana); } /* Aktif temaya göre yalnızca bir simge görünür. */ .tema-dugme .ay { display: none; } :root[data-tema="karanlik"] .tema-dugme .ay { display: inline; } :root[data-tema="karanlik"] .tema-dugme .gunes { display: none; } /* Tema degisimi aninda uygulanir; JS 60 ms sonra kaldirir. */ .tema-degisiyor, .tema-degisiyor *, .tema-degisiyor *::before, .tema-degisiyor *::after { transition: none !important; animation: none !important; } /* ---- Rol rozetleri (sohbet + yorumlar) ---- Admin adi mor ve simli: gradyan metin uzerinde kayan parilti. Hareket azaltma tercihi olanlarda animasyon kapali. */ .rumuz-admin { background: linear-gradient(90deg, #7C3AED 0%, #C084FC 25%, #F5D0FE 50%, #C084FC 75%, #7C3AED 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: rumuz-sim 3s linear infinite; font-weight: 700; text-shadow: 0 0 12px rgba(168, 85, 247, .35); } @keyframes rumuz-sim { to { background-position: 200% center; } } @media (prefers-reduced-motion: reduce) { .rumuz-admin { animation: none; } } .rumuz-moderator { color: #059669 !important; font-weight: 700; } .rol-rozet { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: .65rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; -webkit-text-fill-color: initial; } .rol-admin { background: linear-gradient(90deg, #7C3AED, #C026D3); color: #fff; box-shadow: 0 0 8px rgba(192, 38, 211, .5); } .rol-moderator { background: #059669; color: #fff; }