/* =========================================================================== D-MIND · Tema: "dark-default" (varsayılan koyu tema) --------------------------------------------------------------------------- Sitenin TÜM renk, gölge, gradyan ve tipografi değerleri bu dosyada tanımlıdır. `app.css` içinde hiçbir sabit renk bulunmaz; oradaki kurallar yalnızca buradaki değişkenleri tüketir. Yeni bir tema eklemek için: 1. Bu dosyayı `styles/themes/.css` olarak kopyalayın, 2. Seçiciyi `[data-theme=""]` olarak değiştirin, 3. Değerleri güncelleyin — `app.css`'e ve bileşenlere DOKUNMAYIN. Değişken isimleri amaç bazlıdır, renk bazlı değildir: `--color-gold` değil `--color-accent`. Böylece açık bir temada aynı değişken adı altın yerine koyu bir vurgu rengi taşıyabilir. Bu dosya `Components/App.razor` içinden `@Assets[...]` ile yüklenir ve `` özniteliğiyle etkinleşir. =========================================================================== */ /* El yazısı slogan fontu. Her tema kendi dosyasında ister; ziyaretçi yalnızca aktif temanın CSS'ini yüklediği için toplam istek sayısı artmaz. NOT: @import bu dosyadaki İLK kural olmak zorundadır. */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap'); [data-theme="dark-default"] { /* ---------- Zeminler ---------- */ /* Sayfa arka planı — `body`, genel site sarmalayıcısı. */ --color-bg: #0F1826; /* İkincil zemin — yönetim paneli gövdesi, footer, pasif anahtar zemini. */ --color-bg-alt: #0C1420; /* ---------- Yüzeyler (zeminin üstünde duran bloklar) ---------- */ /* Birincil yüzey — kartlar, form alanları, sepet çekmecesi, tablo başlığı. */ --color-surface: #131E2E; /* İkincil yüzey — yönetim paneli panelleri, modal, KPI kutuları, giriş kartı. Şu an `--color-bg` ile aynı değeri taşıyor; roller farklı olduğu için bilinçli olarak ayrı bir değişken tutuluyor (açık temada ayrışacak). */ --color-surface-alt: #0F1826; /* Yüzey üzerine gelme (hover) rengi — kart vurgusu. */ --color-surface-hover: #182437; /* ---------- Metin ---------- */ /* Ana metin rengi — `body` ve ondan miras alan her şey. */ --color-text: #F3F0E9; /* Başlık rengi — şu an ana metinle aynı; ileride ayrıştırılabilsin diye ayrı. UYARI: global `h1..h4` kuralına BAĞLANMADI. Ana sayfadaki altın zeminli CTA bölümü başlığını miras yoluyla koyu renk alıyor; global bir başlık rengi kuralı o başlığı bozardı. Yalnızca `.hero h1`, `.page-title`, `.h2` ve `.admin-header h1` üzerinde kullanılıyor. */ --color-heading: #F3F0E9; /* Uzun okuma metni — blog gövdesi, ürün özellikleri, iletişim bilgileri. `--color-text` ile `--color-text-muted` arasında dördüncü bir ton. */ --color-text-body: #D6DBE2; /* İkincil metin — spot paragraflar, menü bağlantıları, tablo hücreleri. */ --color-text-muted: #B9C1CC; /* Üçüncül metin — kart açıklamaları, sessiz butonlar. */ --color-text-muted-2: #9AA5B4; /* Etiket / ipucu metni — form etiketleri, tablo başlıkları, pasif rozetler. */ --color-text-subtle: #8E99A8; /* En soluk metin — telif satırı, anahtar topuzu. */ --color-text-faint: #5D6878; /* ---------- Birincil eylem (dolu buton / CTA) ---------- */ /* Dolu buton ve anahtar zemini. */ --color-primary: #D4BD7A; /* Dolu buton üzerine gelme zemini. */ --color-primary-hover: #E7D9AE; /* Birincil zemin ÜZERİNDEKİ yazı ve kenarlık rengi. Faz 1 raporunda 8 ayrı yerde sabit kodlanmış olarak bulundu; artık tek kaynaktan geliyor. Açık bir temada bu değer mutlaka değişecektir. */ --color-primary-text: #0F1826; /* ---------- Vurgu (metin, ikon, kenarlık) ---------- */ /* Vurgu rengi — bağlantılar, üst etiketler, istatistik sayıları, rozetler, odak halkası, aktif menü öğesi. Değeri şu an `--color-primary` ile aynı; roller farklı olduğu için ayrı tutuluyor. */ --color-accent: #D4BD7A; /* Vurgu üzerine gelme / açık vurgu tonu. */ --color-accent-hover: #E7D9AE; /* Vurgunun çok düşük opaklıklı zemin hâli — bilgilendirme kutuları. */ --color-accent-soft: rgba(212, 189, 122, 0.08); /* Aynı kutuların bir tık daha soluk varyantı (mevcut tasarımda 0.07). */ --color-accent-softer: rgba(212, 189, 122, 0.07); /* Metin seçimi (`::selection`) zemini. */ --color-accent-selection: rgba(212, 189, 122, 0.28); /* ---------- Kenarlıklar ---------- */ /* Ana kenarlık. Aynı zamanda ızgara aralıklarında "çizgi" zemini olarak kullanılır (`.tiles`, `.kpis` gap dolgusu) — projedeki en yaygın token. */ --color-border: #253044; /* İnce ayırıcı — tablo satır alt çizgisi. */ --color-border-soft: #1B2637; /* ---------- Durum renkleri ---------- */ /* Hata / yıkıcı işlem. */ --color-danger: #E0713F; /* Hata metni (zemine karşı okunur açık ton). */ --color-danger-text: #F0A98A; /* Hata kutusu zemini. */ --color-danger-soft: rgba(224, 113, 63, 0.1); /* Uyarı / dikkat (engellemeyen bilgilendirme). Altın vurgudan ayrışsın diye daha doygun bir kehribar seçildi. */ --color-warning: #D9A017; /* Uyarı metni (koyu zemine karşı okunur açık ton). En düşük 10,26:1. */ --color-warning-text: #F0C560; /* Uyarı kutusu zemini. */ --color-warning-soft: rgba(217, 160, 23, 0.12); /* ---------- Etkileşim dışı (disabled) ---------- */ /* Pasif buton zemini. */ --color-disabled-bg: #1B2637; /* ---------- Gölge ve karartma katmanları ---------- */ /* Kutu gölgesi rengi. */ --color-shadow: rgba(0, 0, 0, 0.4); /* Sepet çekmecesi karartması. */ --color-overlay: rgba(8, 13, 21, 0.7); /* Modal karartması. */ --color-overlay-strong: rgba(8, 13, 21, 0.72); /* Yönetim paneli mobil kenar çubuğu karartması. */ --color-overlay-soft: rgba(8, 13, 21, 0.6); /* ---------- Üst menü (navbar) ---------- */ /* Yapışkan header zemini — `backdrop-filter` ile birlikte çalıştığı için yarı saydamdır (`--color-bg` renginin %94'ü). */ --color-navbar-bg: rgba(15, 24, 38, 0.94); /* Menü bağlantı rengi. */ --color-navbar-text: #B9C1CC; /* Aktif / üzerine gelinen menü bağlantısı. */ --color-navbar-text-active: #D4BD7A; /* Marka adı yazısı. */ --color-navbar-brand: #F3F0E9; /* ---------- Alt bilgi (footer) ---------- */ /* Footer zemini. Şu an `--color-bg-alt` ile aynı değerde; footer'ın temadan bağımsız olarak koyu kalabilmesi için ayrı değişken tutuluyor. */ --color-footer-bg: #0C1420; /* ---------- Odak ---------- */ /* Klavye odak halkası (`:focus-visible`). Erişilebilirlik için her temada zemine karşı en az 3:1 kontrast taşımalıdır. */ --color-focus: #D4BD7A; /* ---------- Sabit marka renkleri ---------- */ /* WhatsApp kurumsal yeşili — marka gereği HER temada aynı kalır. Değişken olarak tutulması, gerekirse tek yerden kapatılabilmesi içindir. */ --color-whatsapp: #1FA855; --color-whatsapp-text: #ffffff; /* ---------- Gradyanlar ---------- */ /* Hero bölümü arka plan gradyanı. Mevcut koyu tasarımda gradyan YOKTUR; `none` bilinçli varsayılandır ve görsel çıktıyı değiştirmez. `.hero` kuralına `background-image: var(--gradient-hero)` olarak bağlandı, böylece ileriki temalar bu dosyadan gradyan verebilir. */ --gradient-hero: none; /* ---------- Tipografi ---------- */ /* Gövde metni yığını. Archivo, `app.css` başındaki Google Fonts `@import`'u ile yüklenir. */ --font-body: Archivo, system-ui, sans-serif; /* Başlıklar ve form/buton yazıları. BİLİNÇLİ OLARAK yedeksiz bırakıldı — mevcut davranış birebir korunuyor. BİLİNEN EKSİK: Archivo yüklenemezse başlıklar tarayıcı varsayılanına (genelde serif) düşerken gövde `system-ui`'ye düşüyor. Bu tutarsızlığın giderilmesi görsel çıktıyı değiştireceği için Faz 2 kapsamı dışında. */ --font-heading: Archivo; /* El yazısı yığını — hero sloganı. Caveat dosyanın başındaki @import ile yüklenir; Türkçe glifleri (ğ ş ı İ ç ö ü) font dosyasından doğrulandı. */ --font-script: Caveat, "Segoe Script", "Brush Script MT", cursive; } /* =========================================================================== HERO ve İSTATİSTİK KARTI — yalnızca RENKLER --------------------------------------------------------------------------- Düzen/geometri app.css'te tema-nötr olarak durur. =========================================================================== */ [data-theme="dark-default"] { /* Panel sayfa zemininden (#0F1826) belirgin biçimde DAHA KOYU: koyu tema içinde panel ancak böyle "oyulmuş" bir blok gibi okunur ve S-kavis seçilir. Görselin altın ışıması da bloğa derinlik verir. */ --hero-panel-bg: #070C14; /* Aynı usta dosyadan (img/brain.png), bu temanın panel rengine gömülerek üretildi. İki tema iki ayrı görsel kullanır ama arka plan görseli olduğu için ziyaretçi YALNIZCA aktif temanınkini indirir. PANEL RENGİ DEĞİŞİRSE GÖRSEL YENİDEN ÜRETİLMELİDİR. */ --hero-brain-image: url("../../img/brain-hero-dark.jpg"); /* Vurgu: bu temanın altını. */ --hero-accent: var(--color-accent); /* İstatistik kartı: koyu yüzey kart, sayfa zemini renginde çip, altın çizgi. */ --stat-chip-bg: var(--color-bg); --stat-chip-fg: var(--color-accent); --stat-underline-color: var(--color-accent); } /* Hero başlığı: ikinci satır altın (mevcut) + altına çizgi/nokta dekoru. Dekor hero token'ını izler ki başlık vurgusu panelden değiştirildiğinde onunla birlikte değişsin. */ [data-theme="dark-default"] .hero h1::after { content: ""; display: block; margin-top: 28px; width: 92px; height: 10px; background: linear-gradient(var(--hero-heading-accent), var(--hero-heading-accent)) 0 50% / 56px 3px no-repeat, radial-gradient(circle at 84px 50%, var(--hero-heading-dot) 0 5px, transparent 5px); } [data-theme="dark-default"] .hero { --hero-heading-dot: var(--color-accent-hover); } /* ---------- "Petek Süreç" varyantının renk token'ları ---------- Varyantın kimliği koyu YEŞİL panel + krem altıgenler + altındır; bu palet koyu temada da çalışır, bu yüzden değerler açık temayla AYNI tutuldu. Değerler HeroRegistry'deki slot varsayılanlarıyla birebir aynı olmalıdır. */ [data-theme="dark-default"] .hero[data-hero="honeycomb"] { --hero-panel-bg: #1E2A23; /* koyu yeşil panel */ --hero-hex-accent: #D9A441; /* altıgen çerçevesi ve ikon */ --hero-hex-fill: #FFFDF6; /* altıgen dolgusu */ --hero-badge-bg: #151C17; /* numara rozeti zemini */ --hero-ring: #C9A24B; /* halka çizgisi ve oklar */ --hero-accent: #D9A441; /* nokta ızgarası + el yazısı slogan */ /* Altıgenin İÇİ krem olduğu için metin KOYU kalmak zorunda; temanın açık renkli başlık/gövde token'ları burada okunmaz olurdu. */ --hero-hex-title: #1C2536; /* krem üzerinde 12,4:1 */ --hero-hex-text: #58616F; /* krem üzerinde 5,9:1 */ } /* Modern yumuşatma: köşeler ve yüzey gölgeleri. */ [data-theme="dark-default"] .btn-primary, [data-theme="dark-default"] .btn-outline { border-radius: var(--radius-lg); } [data-theme="dark-default"] .header-cta { border-radius: 999px; } [data-theme="dark-default"] .tiles, [data-theme="dark-default"] .tbl-wrap, [data-theme="dark-default"] .panel { box-shadow: 0 2px 10px var(--color-shadow); } /* --------------------------------------------------------------------------- Tema değiştirici — bu temanın kendi durumu. Her tema dosyası bu iki kuralı KENDİ kimliğiyle taşımalıdır: etkin çip ilk boyamada doğru görünsün (JS beklenmez) ve ipucunda yalnızca GEÇİLECEK temanın adı kalsın. --------------------------------------------------------------------------- */ [data-theme="dark-default"] .theme-chip[data-theme-id="dark-default"] { opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.45), 0 0 0 2px var(--color-accent); } [data-theme="dark-default"] .theme-switch-tip[data-theme-id="dark-default"] { display: none; }