/* ========================================================================= bulink SITE-CHROME DARK MODE — el-yazımı [data-theme="dark"] katmanı BUL-057 (Sunai, 16.06.2026) — public vitrin + auth + panel chrome. NEDEN EL-YAZIMI (Tailwind dark: variant DEĞİL): - Ana tailwind.config.js darkMode AYARSIZ (= 'media' default) → dark: class'ları prefers-color-scheme'e bağlanır, toggle ([data-theme]) ile UYUMSUZ olurdu. - Tailwind input CSS (_staging/bulink.css) repoda YOK → güvenli rebuild imkânsız. - [data-theme="dark"] selektörü PURGE-SAFE (Tailwind'e bağlı değil) + admin'in zaten kanıtladığı desen (bulink.css'te 48 örnek mevcut). İZOLASYON GARANTİSİ (KRİTİK KISIT): - Tüm kurallar `[data-theme="dark"]` ile kök altına SCOPE'lanır. Public profil sayfası (profil.php) KENDİ standalone (data-theme YOK) ile render olur → bu katman ona ASLA uygulanmaz. Profil teması (Temalar.php $tema) ziyaretçinin dark tercihinden tamamen bağımsız kalır. LIGHT DEFAULT bozulmaz: hiçbir kural [data-theme="dark"] dışında selektör içermez. ========================================================================= */ :root { /* Açık tema token referansı (mevcut bulink.css ile uyumlu — dokunmaz) */ color-scheme: light; } [data-theme="dark"] { color-scheme: dark; /* Dark palet token'ları (tek kaynak — tüm dark kurallar bunlardan beslenir) */ --bl-d-bg: #0b1220; /* sayfa zemini (derin lacivert, ucuz #000 değil) */ --bl-d-bg-2: #0f1830; /* hafif yükseltilmiş zemin */ --bl-d-yuzey: #131d36; /* kart yüzeyi (glass taban) */ --bl-d-yuzey-2: #1a2542; /* hover/aktif yüzey */ --bl-d-cizgi: rgba(148, 163, 184, 0.16); /* kenarlık */ --bl-d-cizgi-2: rgba(148, 163, 184, 0.26); /* belirgin kenarlık */ --bl-d-yazi: #e7ecf6; /* ana metin */ --bl-d-yazi-2: #aab6cd; /* ikincil metin */ --bl-d-yazi-3: #8b99b5; /* soluk/placeholder — BUL-225: #7c8aa6 elevated yuzey-2 (#1a2542) uzerinde 4.36 ( #8694b0 min 4.957:1 AA-normal tam kapatma */ [data-theme="dark"] .text-brand-600 { color: #7aa6f0 !important; } [data-theme="dark"] .text-brand-700 { color: #93b6f3 !important; } [data-theme="dark"] .text-violet-600 { color: #b58cf7 !important; } [data-theme="dark"] .text-violet-700 { color: #c4a3f9 !important; } /* Durum renkleri — dark'ta daha açık ton (okunurluk) */ [data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; } [data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; } [data-theme="dark"] .text-rose-700 { color: #fda4af !important; } [data-theme="dark"] .text-rose-600 { color: #fb91a1 !important; } [data-theme="dark"] .text-red-700 { color: #fca5a5 !important; } [data-theme="dark"] .text-red-600 { color: #f87171 !important; } [data-theme="dark"] .text-red-500 { color: #f87171 !important; } [data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } /* --- Zemin renkleri --- */ [data-theme="dark"] .bg-white { background-color: var(--bl-d-yuzey) !important; } [data-theme="dark"] .bg-white\/95 { background-color: rgba(19, 29, 54, 0.95) !important; } [data-theme="dark"] .bg-white\/90 { background-color: rgba(19, 29, 54, 0.90) !important; } [data-theme="dark"] .bg-white\/80 { background-color: rgba(19, 29, 54, 0.78) !important; } [data-theme="dark"] .bg-white\/70 { background-color: rgba(19, 29, 54, 0.62) !important; } [data-theme="dark"] .bg-white\/60 { background-color: rgba(19, 29, 54, 0.50) !important; } [data-theme="dark"] .bg-white\/40 { background-color: rgba(19, 29, 54, 0.34) !important; } [data-theme="dark"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .bg-white\/5 { background-color: rgba(255, 255, 255, 0.04) !important; } [data-theme="dark"] .bg-slate-50 { background-color: var(--bl-d-bg-2) !important; } [data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(15, 24, 48, 0.55) !important; } [data-theme="dark"] .bg-slate-50\/50 { background-color: rgba(15, 24, 48, 0.40) !important; } [data-theme="dark"] .bg-slate-100 { background-color: var(--bl-d-yuzey-2) !important; } [data-theme="dark"] .bg-slate-200 { background-color: #243150 !important; } /* Hafif renkli zeminler (uyarı/durum kutuları) — koyulaştır + şeffaflaştır */ [data-theme="dark"] .bg-brand-50 { background-color: rgba(155, 120, 255, 0.12) !important; } [data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; } [data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.16) !important; } [data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.13) !important; } [data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(217, 70, 239, 0.12) !important; } [data-theme="dark"] .bg-violet-50 { background-color: rgba(139, 92, 246, 0.12) !important; } [data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; } /* --- Kenarlıklar --- */ [data-theme="dark"] .border-slate-200 { border-color: var(--bl-d-cizgi) !important; } [data-theme="dark"] .border-slate-300 { border-color: var(--bl-d-cizgi-2) !important; } [data-theme="dark"] .border-slate-100 { border-color: rgba(148, 163, 184, 0.10) !important; } [data-theme="dark"] .border-slate-50 { border-color: rgba(148, 163, 184, 0.08) !important; } [data-theme="dark"] .border-slate-200\/70 { border-color: rgba(148, 163, 184, 0.14) !important; } [data-theme="dark"] .border-brand-200 { border-color: rgba(155, 120, 255, 0.30) !important; } [data-theme="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, 0.30) !important; } [data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.30) !important; } /* Hairline ayraçlar (footer/menü çizgileri) */ [data-theme="dark"] .bg-slate-200.h-px, [data-theme="dark"] .h-px.bg-slate-200 { background-color: var(--bl-d-cizgi) !important; } /* --- Hover yüzeyleri (nav linkleri vb. inline hover:bg-slate-100/80) --- */ [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .hover\:bg-slate-100\/80:hover { background-color: var(--bl-d-yuzey-2) !important; } [data-theme="dark"] .hover\:text-slate-900:hover { color: var(--bl-d-yazi) !important; } [data-theme="dark"] .hover\:text-slate-600:hover { color: var(--bl-d-yazi-2) !important; } [data-theme="dark"] .hover\:border-slate-300:hover { border-color: var(--bl-d-cizgi-2) !important; } /* ========================================================================= PANEL CHROME (bl-* component class'ları — _shell.php + sidebar/tabbar) ========================================================================= */ [data-theme="dark"] .bl-sidebar-baslik { color: var(--bl-d-yazi-3); } [data-theme="dark"] .bl-nav-link { color: var(--bl-d-yazi-2); } [data-theme="dark"] .bl-nav-link:hover { background: rgba(155, 120, 255, 0.12); color: var(--bl-d-yazi); } [data-theme="dark"] .bl-nav-link.aktif { background: rgba(155, 120, 255, 0.16); color: #cfe0fb; } [data-theme="dark"] .bl-nav-rozet { background: #6a40f5; } [data-theme="dark"] .bl-nav-mini-rozet.hizli { color: #c4a3f9; background: rgba(168, 85, 247, 0.18); } [data-theme="dark"] .bl-nav-mini-rozet.business { color: #fcd34d; background: rgba(245, 158, 11, 0.18); } /* Mobil tab-bar */ [data-theme="dark"] .bl-tabbar { background: rgba(11, 18, 32, 0.92); border-top-color: var(--bl-d-cizgi); box-shadow: 0 -4px 24px -12px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .bl-tab { color: var(--bl-d-yazi-3); } [data-theme="dark"] .bl-tab.aktif { color: #8ab4f8; } /* Mobil "Daha" bottom-sheet */ [data-theme="dark"] .bl-sheet { background: var(--bl-d-yuzey); } [data-theme="dark"] .bl-sheet-tutac { background: var(--bl-d-cizgi-2); } [data-theme="dark"] .bl-sheet-link { color: var(--bl-d-yazi-2); } [data-theme="dark"] .bl-sheet-link:active { background: rgba(155, 120, 255, 0.12); } /* Panel footer */ [data-theme="dark"] footer .text-slate-400 { color: var(--bl-d-yazi-3) !important; } /* ========================================================================= TEMA TOGGLE DÜĞMESİ (header chrome) — Phosphor ikon segment grubu ========================================================================= */ .bl-tema-grup { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.2rem; border-radius: 0.7rem; background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(15, 23, 42, 0.08); } [data-theme="dark"] .bl-tema-grup { background: rgba(255, 255, 255, 0.05); border-color: var(--bl-d-cizgi); } .bl-tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: #64748b; font-size: 1rem; line-height: 1; transition: background 0.16s, color 0.16s, transform 0.16s; } .bl-tema-btn:hover { color: #334155; background: rgba(15, 23, 42, 0.06); } [data-theme="dark"] .bl-tema-btn { color: var(--bl-d-yazi-3); } [data-theme="dark"] .bl-tema-btn:hover { color: var(--bl-d-yazi); background: rgba(255, 255, 255, 0.06); } .bl-tema-btn.aktif { color: #fff; background: linear-gradient(135deg, #7c5cff, #5b3fd6); box-shadow: 0 4px 14px -4px rgba(124, 92, 255, 0.5); } [data-theme="dark"] .bl-tema-btn.aktif { background: linear-gradient(135deg, #7c5cff, #a855f7); box-shadow: 0 4px 16px -4px rgba(155, 120, 255, 0.6); } .bl-tema-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.4); } /* Mobil: toggle ikon boyutu hafif küçült (header sıkışmasın) */ @media (max-width: 480px) { .bl-tema-btn { width: 1.85rem; height: 1.85rem; font-size: 0.95rem; } } /* Fiyatlandırma periyot toggle (BUL-061 — artık class-tabanlı .bl-periyot-btn.aktif). Konteyner gri zemin dark'ta belirginleştirilir; aktif "pill" koyu yüzey + neon metin. */ [data-theme="dark"] #bl-periyot-toggle { background: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .bl-periyot-btn { color: var(--bl-d-yazi-3); } [data-theme="dark"] .bl-periyot-btn:hover { color: var(--bl-d-yazi-2); } [data-theme="dark"] .bl-periyot-btn.aktif { background: var(--bl-d-yuzey-2); color: #8ab4f8; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* Yardım ipucu (BUL-061) — ikon + balon dark uyumu */ [data-theme="dark"] .bl-ipucu { color: var(--bl-d-yazi-3); } [data-theme="dark"] .bl-ipucu:hover, [data-theme="dark"] .bl-ipucu:focus-visible { color: var(--bl-d-neon); } [data-theme="dark"] .bl-ipucu-balon { background: #243150; color: var(--bl-d-yazi); border: 1px solid var(--bl-d-cizgi-2); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .bl-ipucu-balon::after { border-top-color: #243150; } /* Çerez banner dark uyumu */ [data-theme="dark"] #cerez-banner { background: rgba(11, 18, 32, 0.96) !important; border-top-color: var(--bl-d-cizgi); } /* prefers-reduced-motion — toggle geçişleri kapanır (CLAUDE.md zorunlu) */ @media (prefers-reduced-motion: reduce) { .bl-tema-btn { transition: none; } }