/* ═══════════════════════════════════════════════════════════════════════════════ PERPLUS TASARIM SİSTEMİ — TİPOGRAFİ VE YOĞUNLUK ÖLÇEĞİ ⚠️ BU DOSYA RADZEN'DEN SONRA YÜKLENİR (bkz. App.razor). Sebep: app.css Radzen'den ÖNCE yükleniyordu, bu yüzden oradaki .rz-* ezmeleri hiç çalışmıyordu. Tema düzeltmeleri buraya yazılır ki !important ormanına gerek kalmasın. NEDEN VAR: Panel genelinde her şey büyüktü — taban font tarayıcı varsayılanında (16px) kalmış, başlıklar Material'in devasa ölçeğinde (h4 = 34px), gövde metinlerinin neredeyse tamamı 700-900 ağırlıkta ve tablo satırları seyrekti. Sonuç: 1080p ekranda bir log sayfasında 6-7 satır görünüyordu ve göz yoruluyordu. ÖLÇEK: Veri yoğun yönetim panelleri için standart taban 14px'tir (Stripe, Linear, Vercel, Radzen'in kendi dashboard örnekleri). Aşağıdaki değişkenler tek ayar noktasıdır; ileride tümünü buradan büyütüp küçültebilirsin. ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografi ölçeği ────────────────────────────────────────────────── */ --pp-fs-xs: 0.786rem; /* 11.0px — rozet, mikro etiket */ --pp-fs-sm: 0.857rem; /* 12.0px — tablo başlığı, yardımcı metin */ --pp-fs-base: 0.929rem; /* 13.0px — tablo gövdesi, form alanı */ --pp-fs-md: 1rem; /* 14.0px — gövde metni (taban) */ --pp-fs-lg: 1.143rem; /* 16.0px — kart başlığı */ --pp-fs-xl: 1.429rem; /* 20.0px — sayfa başlığı */ --pp-fs-2xl: 1.714rem; /* 24.0px — KPI rakamı */ /* ── Ağırlık ─────────────────────────────────────────────────────────── */ --pp-fw-normal: 400; --pp-fw-medium: 500; --pp-fw-semibold: 600; --pp-fw-bold: 700; /* ── Yoğunluk ────────────────────────────────────────────────────────── */ --pp-satir-y: 7px; /* tablo satırı dikey iç boşluk */ --pp-satir-x: 12px; /* tablo satırı yatay iç boşluk */ --pp-kart-pad: 16px; /* kart iç boşluğu */ --pp-radius: 8px; /* köşe yarıçapı (12px "balonumsu" duruyordu) */ /* ── Renk (mevcut paletle uyumlu) ────────────────────────────────────── */ --pp-metin: #1E293B; --pp-metin-soluk: #64748B; --pp-metin-silik: #94A3B8; --pp-cizgi: #E2E8F0; } /* ═══════════════════════════════════════════════════════════════════════════ 1. TABAN ÖLÇEK Taban 16px → 14px. rem ile yazılmış HER ŞEY (mevcut satır içi stiller dahil) otomatik olarak %12.5 küçülür. Tek satırla uygulama geneli rahatlar. ═══════════════════════════════════════════════════════════════════════════ */ html { font-size: 14px; } body { font-size: var(--pp-fs-md); color: var(--pp-metin); -webkit-font-smoothing: antialiased; /* kalın yazıları inceltir, göz yormaz */ -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════════════════════════════ 2. BAŞLIK ÖLÇEĞİ Material varsayılanı yönetim paneli için fazla iri: h4 = 34px geliyordu ve sayfa başlıkları da KPI rakamları da onu kullanıyordu. ═══════════════════════════════════════════════════════════════════════════ */ .rz-text-h1 { font-size: 1.857rem; font-weight: var(--pp-fw-bold); line-height: 1.25; } /* 26px */ .rz-text-h2 { font-size: 1.714rem; font-weight: var(--pp-fw-bold); line-height: 1.25; } /* 24px */ .rz-text-h3 { font-size: 1.571rem; font-weight: var(--pp-fw-bold); line-height: 1.3; } /* 22px */ .rz-text-h4 { font-size: var(--pp-fs-xl); font-weight: var(--pp-fw-bold); line-height: 1.3; } /* 20px */ .rz-text-h5 { font-size: var(--pp-fs-lg); font-weight: var(--pp-fw-semibold); line-height: 1.35; } /* 16px */ .rz-text-h6 { font-size: 1.071rem; font-weight: var(--pp-fw-semibold); line-height: 1.4; } /* 15px */ .rz-text-subtitle1 { font-size: var(--pp-fs-md); font-weight: var(--pp-fw-medium); } .rz-text-subtitle2 { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-medium); } .rz-text-body1 { font-size: var(--pp-fs-md); } .rz-text-body2 { font-size: var(--pp-fs-base); } .rz-text-caption { font-size: var(--pp-fs-xs); color: var(--pp-metin-soluk); } /* ═══════════════════════════════════════════════════════════════════════════ 3. TABLO YOĞUNLUĞU En çok bakılan yüzey burası; bir ekranda kaç satır göründüğünü bu blok belirler. ═══════════════════════════════════════════════════════════════════════════ */ .rz-datatable .rz-datatable-thead > tr > th, .rz-datatable-thead > tr > th { padding: 8px var(--pp-satir-x); font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-semibold); line-height: 1.3; } .rz-datatable .rz-data-row > td, .rz-datatable tbody > tr > td { padding: var(--pp-satir-y) var(--pp-satir-x); font-size: var(--pp-fs-base); line-height: 1.45; } /* Başlıkta BÜYÜK HARF kalıyor — kısa kolon adlarında standart ve okunaklı. Sorun büyük harfin kendisi değil, 0.5px harf aralığıyla birlikte iri puntoda kullanılmasıydı. Punto düştüğü için aralık da kısıldı. */ .perplus-premium-grid .rz-datatable-thead th { font-size: var(--pp-fs-xs) !important; font-weight: var(--pp-fw-semibold) !important; letter-spacing: 0.3px; } /* ⚠️ SATIR ÜZERİNE GELİNCE BÜYÜTME KALDIRILDI. app.css'te `transform: scale(1.002)` vardı: fare satırlar arasında gezerken metin mikro-kayma yapıyor, uzun listelerde gözü en çok yoran şey buydu. Renk vurgusu ve sol şerit korundu — geri bildirim kaybolmadı. */ .perplus-premium-grid .rz-data-row:hover, .perplus-premium-grid .rz-alt-data-row:hover { transform: none !important; } /* Grid animasyonu 0.9s → 0.25s. Her sorguda neredeyse bir saniye bekleniyordu. */ .perplus-premium-grid { animation-duration: 0.25s !important; } /* 🔥 DÜZELTME: ".rz-paginator" diye bir sınıf yok, gerçek adı ".rz-pager" (material-base.css'te doğrulandı). Bu kural şimdiye kadar hiç tutmuyordu. */ .rz-pager { font-size: var(--pp-fs-base); padding: 6px 10px; } /* ═══════════════════════════════════════════════════════════════════════════ 4. FORM ELEMANLARI ═══════════════════════════════════════════════════════════════════════════ */ .rz-textbox, .rz-dropdown, .rz-textarea, .rz-numeric, .rz-datepicker { font-size: var(--pp-fs-base); } .rz-dropdown-item, .rz-multiselect-item { font-size: var(--pp-fs-base); padding: 6px 10px; } /* Buton puntosu 1px küçültüldü (13px→12px). Küçük buton varyantı da aynı miktarda kaydırıldı (12px→11px) ki iki boyut arasındaki fark kaybolmasın. */ .rz-button { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-semibold); } .rz-button.rz-button-md { padding: 7px 14px; } .rz-button.rz-button-sm { padding: 5px 10px; font-size: var(--pp-fs-xs); } label, .rz-label { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-semibold); } /* ═══════════════════════════════════════════════════════════════════════════ 5. SEKME VE ROZETLER ═══════════════════════════════════════════════════════════════════════════ */ .rz-tabview-nav > li > a { font-size: var(--pp-fs-base); font-weight: var(--pp-fw-semibold); padding: 9px 16px; } .rz-badge { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-semibold); padding: 3px 8px; } /* ═══════════════════════════════════════════════════════════════════════════ 6. DİYALOG / POP-UP Diyaloglar da sayfa başlıklarıyla aynı ölçekte olmalı; başlık çubuğu iriydi. ═══════════════════════════════════════════════════════════════════════════ */ .rz-dialog-title { font-size: var(--pp-fs-lg); font-weight: var(--pp-fw-bold); } .rz-dialog-content { font-size: var(--pp-fs-base); padding: var(--pp-kart-pad); } .rz-dialog { border-radius: var(--pp-radius); } /* 🔥 DÜZELTME: ".rz-notification-item-content" diye bir sınıf yok, bildirim metnini ".rz-notification-message" sarıyor (material-base.css'te doğrulandı). */ .rz-notification-message { font-size: var(--pp-fs-base); } .rz-tooltip-content { font-size: var(--pp-fs-sm); } /* ═══════════════════════════════════════════════════════════════════════════ 7. YENİDEN KULLANILABİLİR BİLEŞEN SINIFLARI Sayfalar bugün her şeyi satır içi `Style="..."` ile yazıyor; aynı KPI kartı onlarca yerde kopyalanmış durumda. Aşağıdaki sınıflar sayfa sayfa ilerledikçe o satır içi stillerin yerine geçecek — böylece ileride tek dosyadan ayarlanır. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Sayfa başlığı (bkz. Components/Ortak/PpSayfaBasligi.razor) ── Eski hali her sayfada kopyaydı: 50px ikon kutusu, 1.8rem ikon, H4 (34px) + 900 ağırlıkta başlık, kimi sayfada rz-mb-5 kimi sayfada rz-mb-6 alt boşluk. */ .pp-sayfa-basligi { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .pp-sayfa-basligi .pp-ikon-kutu { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .pp-sayfa-basligi .pp-ikon-kutu .rzi { font-size: 1.286rem; /* 18px — 25px'ten indi */ } .pp-sayfa-basligi .pp-baslik-metin { min-width: 0; flex: 1 1 auto; } .pp-sayfa-basligi .pp-baslik { font-size: var(--pp-fs-xl); /* 20px — H4'ün 34px'inden indi */ font-weight: var(--pp-fw-bold); /* 900 → 700 */ color: var(--pp-metin); line-height: 1.25; } .pp-sayfa-basligi .pp-alt-baslik { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-normal); color: var(--pp-metin-soluk); margin-top: 2px; line-height: 1.35; } /* Butonlar asla alt satıra düşmesin — eski sayfalarda flex-shrink:0 elle yazılıyordu. */ .pp-sayfa-basligi .pp-baslik-aksiyon { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* ── KPI / bilgi kartı (bkz. Components/Ortak/PpKpiKart.razor) ── Kullanıcının "acayip büyük" dediği yer burası. Eski hali her sayfaya kopyalanmıştı: etiket 700 ağırlıkta BÜYÜK HARF, rakam H4 (34px), ikon 2.2rem (35px), kart 15px iç boşluk + 3 katmanlı gölge. ⚠️ TEK AYAR NOKTASI. Kart ölçüsünü buradan değiştir; 21 sayfa birden değişir. */ .pp-kpi-satir { display: grid; gap: 12px; margin-bottom: 16px; } /* Sık kullanılan kolon sayıları — sayfalar grid'i elle kurmasın. */ .pp-kpi-satir--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-kpi-satir--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-kpi-satir--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp-kpi-satir--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1300px) { .pp-kpi-satir--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .pp-kpi-satir--3, .pp-kpi-satir--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pp-kpi-satir--2, .pp-kpi-satir--3, .pp-kpi-satir--4, .pp-kpi-satir--5 { grid-template-columns: minmax(0, 1fr); } } .pp-kpi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--pp-radius); border: 1px solid var(--pp-cizgi); border-left: 3px solid var(--pp-kpi-renk, var(--pp-metin-soluk)); background: var(--pp-kpi-zemin, #fff); } /* Tıklanabilir varyant (ör. hızlı filtre kısayolu). Eskiden bu efekt Attendance sayfasına özel ".summary-card-hover" sınıfıyla ayrı ayrı tanımlıydı; artık bileşenin kendisi destekliyor. */ .pp-kpi--tiklanabilir { cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .pp-kpi--tiklanabilir:hover { border-color: var(--pp-kpi-renk, var(--pp-cizgi)); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .pp-kpi-govde { min-width: 0; /* uzun sayılar taşmasın */ } .pp-kpi .pp-kpi-etiket { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-semibold); color: var(--pp-metin-soluk); text-transform: none; /* 🔥 BÜYÜK HARF kaldırıldı — kelime siluetini yok ediyordu */ letter-spacing: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-kpi .pp-kpi-deger { font-size: var(--pp-fs-2xl); /* 24px — H4'ün 34px'inden indi */ font-weight: var(--pp-fw-bold); line-height: 1.15; margin-top: 2px; color: var(--pp-kpi-renk, var(--pp-metin)); } .pp-kpi .pp-kpi-alt { font-size: var(--pp-fs-xs); color: var(--pp-metin-soluk); margin-top: 3px; line-height: 1.3; } /* 🔥 DÜZELTME: Bu kural ".rz-icon" seçiciyle yazılmıştı ama Radzen'in gerçek ikon sınıfı ".rzi" (material-base.css'te doğrulandı — ".rz-icon" çıplak seçici olarak hiç yok). Kural hiç tutmuyordu; ikonlar Radzen varsayılanına düşüp tam opak ve varsayılan boyutta görünüyordu — kart renginin soluk versiyonu değil. */ .pp-kpi > .rzi { font-size: 1.571rem; /* 22px — 35px'ten indi */ color: var(--pp-kpi-renk, var(--pp-metin-soluk)); opacity: 0.3; flex-shrink: 0; } /* Renk temaları — sol çizgi, zemin ve rakam rengi TEK değişkenden türer. Eskiden üçü de her kartta ayrı ayrı satır içi yazılıyor ve tutmuyordu. */ .pp-kpi--mavi { --pp-kpi-renk: #0EA5E9; --pp-kpi-zemin: #F0F9FF; } .pp-kpi--yesil { --pp-kpi-renk: #10B981; --pp-kpi-zemin: #ECFDF5; } .pp-kpi--turuncu { --pp-kpi-renk: #F59E0B; --pp-kpi-zemin: #FFFBEB; } .pp-kpi--kirmizi { --pp-kpi-renk: #EF4444; --pp-kpi-zemin: #FEF2F2; } .pp-kpi--mor { --pp-kpi-renk: #8B5CF6; --pp-kpi-zemin: #F5F3FF; } .pp-kpi--teal { --pp-kpi-renk: #0D9488; --pp-kpi-zemin: #F0FDFA; } .pp-kpi--gri { --pp-kpi-renk: #64748B; --pp-kpi-zemin: #F8FAFC; } /* ── Filtre / araç çubuğu kartı ── */ .pp-filtre-kart { background: #fff; border: 1px solid var(--pp-cizgi); border-radius: var(--pp-radius); padding: 14px 16px; margin-bottom: 14px; } /* ── Tabloyu saran kart ── */ .pp-tablo-kart { border: 1px solid var(--pp-cizgi); border-radius: var(--pp-radius); overflow: hidden; background: #fff; } /* ── Başlıklı panel (Dashboard'daki kartların ortak deseni) ── Her panelde şu beşli tekrar ediyordu: border-radius: 12px; box-shadow: 0 4px 12px ...; padding: 0; overflow: hidden; border: 1px solid #E2E8F0; Üstelik başlık şeridi de her seferinde ayrı bir div + satır içi stil ile çiziliyordu. İkisi de sınıflaştırıldı. */ .pp-panel { border: 1px solid var(--pp-cizgi); border-radius: var(--pp-radius); overflow: hidden; background: #fff; padding: 0; } .pp-panel-baslik { display: flex; align-items: center; gap: 7px; background-color: #F8FAFC; padding: 10px 14px; border-bottom: 1px solid var(--pp-cizgi); font-size: var(--pp-fs-md); font-weight: var(--pp-fw-semibold); color: var(--pp-metin); line-height: 1.3; } .pp-panel-baslik .rzi { font-size: 1.143rem; /* 16px */ } .pp-panel-govde { padding: 14px; } /* Koyu temalı panel (canlı geçiş akışı gibi) */ .pp-panel--koyu { border-color: #1E293B; background-color: #0F172A; } .pp-panel--koyu .pp-panel-baslik { background-color: #1E293B; border-bottom-color: #334155; color: #38BDF8; } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT: ÜST BAR (HEADER) VE 3 TIRNAK BUTONU ⚠️ NEDEN GLOBAL (AdminLayout.razor.css / MainLayout.razor.css'ten TAŞINDI): ve birer BİLEŞEN — layout dosyalarında doğrudan yazılan düz HTML değil. Blazor'un CSS izolasyon scope attribute'u (b-xxxxxxxx) SADECE o .razor dosyasında doğrudan authored edilen düz HTML elemanlarına basılıyor; RadzenHeader'ın kendi ürettiği `
` bu attribute'u hiçbir zaman taşımıyor. Sonuç: eski `::deep .rz-header` kuralı derleniyor, CSS paketine giriyor ama DOM'da hiçbir zaman eşleşmiyordu — header sessizce Radzen Material temasının varsayılan indigo/mavi rengiyle render oluyordu ("SAF BEYAZ" yorumu yanıltıcıydı). Global (scope'suz) CSS'te bu sorun yok — burada gerçekten uygulanıyor. (2026-08-15, header'ı beyaz tona çekme talebiyle bulundu ve düzeltildi.) ═══════════════════════════════════════════════════════════════════════════ */ .rz-header { background-color: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important; } .rz-sidebar-toggle { color: #475569 !important; background: transparent !important; transition: all 0.2s ease !important; } .rz-sidebar-toggle:hover { color: #1E3A8A !important; background: #F1F5F9 !important; border-radius: 8px !important; } /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT: SOL MENÜ (SIDEBAR) VE SAYFA GEÇİŞ ANİMASYONU ⚠️ AYNI KÖK NEDEN: / / da birer BİLEŞEN. AdminLayout.razor.css'teki (admin menüsü) ve NavMenu.razor.css'teki (müşteri menüsü — NavMenu kendi başına bir bileşen, kökü doğrudan ) ::deep kuralları hiç eşleşmiyordu; aktif/hover menü öğesi Radzen'in varsayılan indigo rengindeydi (rgb(67,64,210), canlıda doğrulandı), sayfa geçiş fade'i (aşağıdaki fadeInBody) hiç çalışmıyordu (animation-name: none, canlıda doğrulandı). İki dosyanın değerleri de birbirinden hafif kaymıştı (örn. metin font-weight 600 vs 500) — "ADMİN MENÜSÜ %100 MÜŞTERİ İLE EŞİTLENDİ" yorumu iyi niyetliydi ama hiçbiri uygulanmadığı için asla doğrulanamamıştı. Buradaki tek küme artık HER İKİ paneli de gerçekten aynı yapıyor. (2026-08-15) ═══════════════════════════════════════════════════════════════════════════ */ .rz-sidebar { background-color: #FFFFFF !important; border-right: 1px solid #E2E8F0 !important; } .rz-panel-menu:focus, .rz-navigation-item-link:focus, .rz-navigation-item-wrapper:focus { outline: none !important; box-shadow: none !important; } .rz-panel-menu { background-color: transparent !important; } .rz-navigation-item-link, .rz-panel-menu .rz-navigation-item-text { color: #475569 !important; font-weight: 500 !important; font-size: 0.929rem !important; transition: color 0.15s ease !important; } .rz-navigation-item-toggle { color: #94A3B8 !important; } .rz-navigation-item-icon { font-size: 1.143rem !important; margin-right: 10px !important; } .rz-navigation-item-wrapper { background: transparent !important; border-left: 3px solid transparent !important; margin: 1px 8px !important; border-radius: 6px !important; transition: background-color 0.15s ease !important; } /* Ana başlıklar (kategori) ile alt başlıklar (sayfa) aynı beyaz üzerinde aynı görünüyor, hiyerarşi göz için ayırt edilmiyordu. İlk denemedeki #F8FAFC neredeyse beyazla aynıydı, fark görünmüyordu — belirgin bir ton kullanılıyor. ">" ile SADECE panel menünün doğrudan çocuğu olan öğeleri hedefler, .rz-navigation-menu içindeki (bir seviye içeri açılmış) alt öğelere dokunmaz; alt öğeler dinlenme halinde şeffaf (beyaz) kalmaya devam eder. */ .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper { background-color: #F1F5F9 !important; } /* Ana başlığın kendi hover'ı bir ton daha koyu olmalı, yoksa dinlenme haliyle aynı renk kalır ve hover geri bildirimi kaybolur. Seçici daha spesifik olduğu için (4 sınıf > 2 sınıf) genel hover kuralını doğru şekilde ezer. */ .rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper:hover { background-color: #E2E8F0 !important; } .rz-navigation-item-wrapper:hover { background-color: #F1F5F9 !important; } .rz-navigation-item-wrapper:hover .rz-navigation-item-link, .rz-navigation-item-wrapper:hover .rz-navigation-item-text { color: #1E293B !important; } .rz-navigation-item-active > .rz-navigation-item-wrapper, .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active { background-color: #EFF6FF !important; border-left: 3px solid #3B82F6 !important; } .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-link, .rz-navigation-item-active > .rz-navigation-item-wrapper .rz-navigation-item-text, .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active .rz-navigation-item-text { color: #1E3A8A !important; font-weight: 700 !important; } .rz-navigation-menu { background-color: transparent !important; } .rz-navigation-menu .rz-navigation-item-wrapper { margin-left: 15px !important; } /* Sayfa geçişi 0.5s → 0.22s: her menü tıklamasında içerik yarım saniye boyunca aşağıdan yukarı kaymıyor, sık gezinirken göz yormuyor. */ .rz-body { animation: fadeInBody 0.22s ease-out; } @keyframes fadeInBody { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════ 8. LAYOUT: PROFİL MENÜSÜ VE SOL MENÜ ALT BİLGİSİ ⚠️ NEDEN GLOBAL: Bu sınıflar önce MainLayout.razor.css içindeydi. CSS izolasyonu o dosyayı YALNIZCA MainLayout'a uyguluyor; AdminLayout aynı görünümü kullandığı halde stilsiz kalıyordu. İki panelin ayrışmaması için ortak katmana taşındı. Ayrıca eski hallerinde bu sınıflar HİÇ KULLANILMIYORDU (0 referans) — markup satır içi stil yazıyordu. Sınıflar satır içi stillerden daha iyiydi (hover durumu, gradient); silmek yerine markup onlara bağlandı. ═══════════════════════════════════════════════════════════════════════════ */ .profile-trigger { display: flex; align-items: center; gap: 10px; padding: 3px 12px 3px 5px; border-radius: 50px; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .profile-trigger:hover { background-color: #F8FAFC; border-color: var(--pp-cizgi); } .profile-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #EFF6FF; color: #1E3A8A; display: flex; align-items: center; justify-content: center; font-weight: var(--pp-fw-bold); font-size: var(--pp-fs-sm); letter-spacing: 0.3px; } .profile-info { text-align: left; line-height: 1.2; } .profile-name { font-size: var(--pp-fs-sm); font-weight: var(--pp-fw-semibold); color: var(--pp-metin); } .profile-role { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-medium); color: var(--pp-metin-soluk); } /* RadzenProfileMenu içindeki öğe de RadzenHeader gibi bir bileşen — aynı sebepten MainLayout.razor.css'teki ::deep hiç eşleşmiyordu, buraya taşındı. */ .rz-profile-menu .rz-navigation-item-link { padding: 0 !important; } /* ⚠️ BULUNDU (2026-08-17): Kişiye tıklayınca açılan panel "saydam" görünüyordu ve sağındaki ok ikonu beyaz kalıyordu — header'ı beyaza çekerken bu ikisi gözden kaçmış. Kök neden: RadzenProfileMenu popup DEĞİL, header'ın içinde DÜZ AKAN bir
    — position:absolute'ü YOK, kendi arka planı YOK, metin rengini header'dan MİRAS alıyor. Eskiden header koyu indigo olduğu için beyaz miras çalışıyordu (okunuyordu); header beyaza dönünce aynı miras beyaz-üstüne-beyaz oldu = görünmez. .rz-header'a konum bağlamı (position:relative) verip paneli gerçek bir kart gibi üstüne bindiriyoruz — bildirim ziline uyguladığımız yüzen panel diliyle aynı (bkz. NotificationBell.razor.css). ⚠️ DÜZELTME (ilk deneme yanlıştı): `.rz-menu.rz-profile-menu` sandığım gibi SADECE açılır liste değilmiş — TÜM bileşenin kökü (tetikleyici + liste TEK
  • içinde, DOM: UL.rz-menu.rz-profile-menu > LI.rz-navigation-item > [DIV.rz-navigation-item-wrapper (=tetikleyici, .profile-trigger içeriyor), UL.rz-navigation-menu (=asıl açılır liste)]). Ona position:absolute vermek TETİKLEYİCİYİ de sayfanın üstüne bindirdi (kullanıcı ekran görüntüsüyle yakaladı). Doğru hedef: sadece iç `.rz-navigation-menu` — o, tetikleyiciyle KARDEŞ, kapalıyken zaten `display:none` (Radzen'in .rz-close sınıfıyla), pozisyonlamak tetikleyicinin yerini hiç etkilemiyor. */ .rz-header { position: relative; } .rz-profile-menu .rz-navigation-menu { position: absolute !important; top: 100%; right: 16px; margin-top: 10px; background-color: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important; border: 1px solid #E2E8F0 !important; padding: 6px !important; min-width: 220px; z-index: 1000; } /* Radzen'in kendi ".rz-profile-menu .rz-navigation-item-link" kuralı (koyu header varsayımıyla beyaz metin basıyor) bizimkiyle AYNI özgüllükte + !important — kazanan sıra: burası perplus-design.css'te daha sonra yükleniyor. */ .rz-profile-menu .rz-navigation-item-link, .rz-profile-menu .rz-navigation-item-text, .rz-profile-menu .rz-navigation-item-icon-children { color: #475569 !important; } .rz-profile-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link, .rz-profile-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text { color: #1E293B !important; } /* Sol menü alt bilgisi — hover'ı eskiden markup içindeki satır içi JavaScript yapıyordu (`onmouseover="this.style..."`). CSS'e alındı. */ .sidebar-footer { padding: 12px; text-align: center; border-top: 1px solid #F1F5F9; cursor: pointer; transition: background-color 0.15s ease; } .sidebar-footer:hover { background-color: #F8FAFC; } .sidebar-footer-baslik { font-size: var(--pp-fs-xs); font-weight: var(--pp-fw-bold); color: var(--pp-metin-silik); line-height: 1.3; pointer-events: none; } .sidebar-footer-alt { font-size: 0.714rem; /* 10px */ color: var(--pp-metin-silik); line-height: 1.3; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ 9. GÖLGE SAKİNLEŞTİRME Her kartta ayrı gölge vardı; üst üste gelince sayfa "kabarık" görünüyor ve kenarlar bulanıklaşıyordu. Yönetim panelinde ince çizgi, gölgeden okunaklıdır. ═══════════════════════════════════════════════════════════════════════════ */ .rz-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); border-radius: var(--pp-radius); } /* ═══════════════════════════════════════════════════════════════════════════ 10. ERİŞİLEBİLİRLİK Hareketi azaltılmış tercihine saygı: animasyonlar kapanır. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }