/* GölgePanel tasarım tokenları ============================================================================ Bu dosya panelin tek renk ve ölçü kaynağıdır. CSS'te doğrudan renk kodu yazılmaz — üç tema (açık / ortası / koyu) ancak buradaki değerler değiştirilerek çalışabilir. Yeni bir renk gerekirse önce buraya token olarak eklenir, sonra kullanılır. */ /* --- Yazı tipi: Noto Sans --------------------------------------------------- Seçim gerekçesi: Türkçenin bütün işaretleri (ı İ ğ Ğ ş Ş ç ö ü) tasarımın parçası, tarayıcı tarafından türetilmiyor; küçük puntoda okunaklı, x-yüksekliği yüksek. Dosyalar **kendi sunucumuzda** (static/fonts) — Google Fonts ya da herhangi bir CDN'e bağlanılmıyor (CSP zaten dışarıyı kapatıyor). Alt küme: Latin + Latin Ext-A + noktalama + para birimleri; üç ağırlık 84 KB. */ @font-face { font-family: "Noto Sans"; src: url("../fonts/notosans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/notosans-medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/notosans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================= 1. Temadan bağımsız ölçüler ========================================================================= */ :root { --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Genel arayüz ölçeği — **tek düğme**. 2026-08-02: panel köşelere yapışıyor, punto sık duruyordu. Bütün arayüz buradan %10 büyütüldü. Her ölçüyü tek tek değiştirmek yerine `body`ye `zoom` verildi: oran değişince yazı, dolgu, ikon, kenarlık hepsi birlikte büyür — orantılar bozulmaz. Sıkı/geniş denemek için yalnız bu satır değişir (1 = eski hâl, 1.15 = daha ferah). */ --olcek: 1.1; /* Panelin ekran kenarından boşluğu — arayüz köşelere yapışmasın diye sol menü ve içerik iki ayrı yuvarlak kart gibi duruyor. */ --cerceve: 12px; --kenar-genislik: 256px; --radius: 10px; --radius-buyuk: 16px; /* dış kartlar: sol menü, içerik çerçevesi */ /* Branş paleti — accent moruyla uyumlu, doygunluğu düşük tutuldu. Sanat dallarını görsel olarak ayırır; kurumsal kimliği bastırmaz. Yeni branş eklendiğinde sıradaki numaradan devam eder (8'de başa döner). */ --brans-1: #6c63ff; /* mor — Piyano */ --brans-2: #c98526; /* kehribar— Keman */ --brans-3: #2f9183; /* çam — Gitar */ --brans-4: #cc5c88; /* gül — Bale */ --brans-5: #3a82c4; /* mavi — Resim */ --brans-6: #9b57bd; /* leylak — Şan */ --brans-7: #4f9159; /* yeşil — Solfej */ --brans-8: #b85c40; /* kiremit— Bateri */ } /* ========================================================================= 2. ORTASI tema (varsayılan) — koyu sol menü + açık içerik Panelin bugüne kadarki görünümü budur; iki uç (açık/koyu) buna eklendi. `` sunucuda basılır (core/context_processors.gorunum), böylece sayfa açılırken renk sıçraması olmaz ve JS gerekmez. ========================================================================= */ :root, [data-tema="ortasi"] { --accent: #6c63ff; --accent-soft: #edecff; --accent-metin: #ffffff; /* accent zemin üzerindeki yazı */ --sayfa-zemin: #dedbef; /* çerçeve: kartların dışında kalan alan */ --bg: #f0eff9; /* içerik zemini */ --surface: #ffffff; /* kart zemini */ --yuzey-soluk: rgba(255, 255, 255, 0.55); --text: #24222e; --text-muted: #6f6c85; --border: #d9d7e8; --sidebar-bg: #1c1b2e; --sidebar-fg: #b9b6d2; --sidebar-baslik: #efeefa; /* ana başlık — koyu zeminde okunaklı olmalı */ --sidebar-fg-active: #ffffff; --sidebar-ikon: #8b88ab; /* sembollerin dinlenme rengi */ --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-ayrac: rgba(255, 255, 255, 0.07); --sidebar-aktif: rgba(108, 99, 255, 0.20); --giris-zemin: #1c1b2e; --danger: #d9534f; --success: #4caf7d; --warning: #e9a13b; --satir-hover: rgba(108, 99, 255, 0.045); /* Takvim ızgarasının saat çizgileri. `--border` kart kenarlığı için doğru ama ızgarada zayıf kalıyor; saat başı çizgisi bir tık koyu, yarım saat noktası onunla aynı tonda ama ince. (`egitim.css`, .gun-sutun) */ --cizgi-saat: #c6c3dc; --cizgi-yarim: #b9b6d2; --shadow: 0 1px 3px rgba(28, 27, 46, 0.08); --shadow-orta: 0 3px 10px rgba(28, 27, 46, 0.13); --shadow-yuksek: 0 10px 28px rgba(28, 27, 46, 0.16); /* Durum tonları — rozet, şerit ve satır vurguları bu sekiz çiftten çıkar. Ekranlarda doğrudan renk kodu yazılmaz ki koyu temada da doğru dursun. */ --ton-yesil-zemin: #e6f6ee; --ton-yesil-metin: #2f8659; --ton-mavi-zemin: #e8f3fb; --ton-mavi-metin: #2f7fb5; --ton-amber-zemin: #fdf3e3; --ton-amber-metin: #b57a1e; --ton-mor-zemin: #efedfd; --ton-mor-metin: #5d4dc7; --ton-kirmizi-zemin: #fdf1f0; --ton-kirmizi-metin: #a33c39; --ton-gri-zemin: #f2f1f5; --ton-gri-metin: #6b6880; --ton-pembe-zemin: #fdeef5; --ton-pembe-metin: #b5417f; --ton-camgobegi-zemin: #e6f4f2; --ton-camgobegi-metin: #2b7f74; } /* ========================================================================= 3. AÇIK tema — sol menü de aydınlık Gündüz, aydınlık odada çalışma için. Hiyerarşi renk koyuluğuyla değil kenarlık ve accent vurgusuyla kuruluyor. ========================================================================= */ [data-tema="acik"] { --accent: #5b52f0; --accent-soft: #ecebff; --accent-metin: #ffffff; --sayfa-zemin: #e4e2f0; --bg: #f5f4fb; --surface: #ffffff; --yuzey-soluk: rgba(255, 255, 255, 0.7); --text: #22202c; --text-muted: #6b6882; --border: #dedcec; --sidebar-bg: #ffffff; --sidebar-fg: #56536b; --sidebar-baslik: #24222e; --sidebar-fg-active: #4a41d8; --sidebar-ikon: #9895ae; --sidebar-hover: #f2f1fa; --sidebar-ayrac: #e9e7f3; --sidebar-aktif: #ecebff; --giris-zemin: #dedbef; --danger: #cf4a46; --success: #3d9b6c; --warning: #d68f27; --satir-hover: rgba(91, 82, 240, 0.045); --cizgi-saat: #cbc9dd; --cizgi-yarim: #bcb9d2; --shadow: 0 1px 3px rgba(34, 32, 44, 0.07); --shadow-orta: 0 3px 10px rgba(34, 32, 44, 0.11); --shadow-yuksek: 0 10px 28px rgba(34, 32, 44, 0.14); --ton-yesil-zemin: #e6f6ee; --ton-yesil-metin: #2f8659; --ton-mavi-zemin: #e8f3fb; --ton-mavi-metin: #2f7fb5; --ton-amber-zemin: #fdf3e3; --ton-amber-metin: #b57a1e; --ton-mor-zemin: #efedfd; --ton-mor-metin: #5d4dc7; --ton-kirmizi-zemin: #fdf1f0; --ton-kirmizi-metin: #a33c39; --ton-gri-zemin: #f2f1f5; --ton-gri-metin: #6b6880; --ton-pembe-zemin: #fdeef5; --ton-pembe-metin: #b5417f; --ton-camgobegi-zemin: #e6f4f2; --ton-camgobegi-metin: #2b7f74; } /* ========================================================================= 4. KOYU tema — akşam dersleri ve uzun oturumlar için Saf siyah kullanılmadı: kontrast fazla sert olur, metin titrer. Zeminler mor-lacivert ailesinden, accent bir tık açıldı (koyu üstünde #6c63ff yeterince okunmuyor). ========================================================================= */ [data-tema="koyu"] { --accent: #8f88ff; --accent-soft: rgba(143, 136, 255, 0.16); --accent-metin: #17162a; /* açık mor zemin üzerinde koyu yazı okunur */ --sayfa-zemin: #0f0e1a; --bg: #191826; --surface: #21202f; --yuzey-soluk: rgba(255, 255, 255, 0.035); --text: #e9e8f2; --text-muted: #9b98b2; --border: #33314a; --sidebar-bg: #16151f; --sidebar-fg: #a5a2bd; --sidebar-baslik: #f0eff7; --sidebar-fg-active: #ffffff; --sidebar-ikon: #7d7a99; --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-ayrac: rgba(255, 255, 255, 0.06); --sidebar-aktif: rgba(143, 136, 255, 0.18); --giris-zemin: #0f0e1a; --danger: #ef7a76; --success: #5cc491; --warning: #eab553; --satir-hover: rgba(255, 255, 255, 0.035); --cizgi-saat: #423f5e; --cizgi-yarim: #514d70; --shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-orta: 0 3px 12px rgba(0, 0, 0, 0.45); --shadow-yuksek: 0 12px 32px rgba(0, 0, 0, 0.55); --ton-yesil-zemin: rgba(92, 196, 145, 0.16); --ton-yesil-metin: #74d6a6; --ton-mavi-zemin: rgba(90, 168, 224, 0.16); --ton-mavi-metin: #7cbdea; --ton-amber-zemin: rgba(234, 181, 83, 0.16); --ton-amber-metin: #eec276; --ton-mor-zemin: rgba(143, 136, 255, 0.18); --ton-mor-metin: #a79fff; --ton-kirmizi-zemin: rgba(239, 122, 118, 0.16); --ton-kirmizi-metin: #f39490; --ton-gri-zemin: rgba(255, 255, 255, 0.07); --ton-gri-metin: #a5a2bd; --ton-pembe-zemin: rgba(224, 120, 175, 0.16); --ton-pembe-metin: #ec9cc4; --ton-camgobegi-zemin: rgba(74, 186, 172, 0.16); --ton-camgobegi-metin: #6fd0c2; /* Branş renkleri koyu zeminde bir tık açılır — aynı hue, daha okunur. */ --brans-1: #8f88ff; --brans-2: #dda44f; --brans-3: #4fb3a4; --brans-4: #e08bab; --brans-5: #66a8dd; --brans-6: #bd85d6; --brans-7: #74b47e; --brans-8: #d4836a; }