/* Sayfa bazlı CSS'e geçişte (#663) buraya taşınan kurallar: homepage-styles.css ve vehicle-detail.css içinde duran, ancak anasayfaya/araç detayına özgü OLMAYAN — her müşteri sayfasında geçerli — kurallar. Bunlar sayfa bazlı dosyalara konulamaz: Tailwind utility'lerinin karanlık mod override'ları tüm sayfalarda kullanılıyor. */ /* --- homepage-styles.css'ten --- */ .dark .py-12.bg-white { background-color: var(--bg-primary); } .dark .text-gray-900 { color: var(--text-primary); } .dark .text-gray-600 { color: var(--text-secondary); } .dark .bg-white.dark\:bg-gray-800 { background-color: var(--bg-secondary); } .dark .border-gray-100.dark\:border-gray-700 { border-color: var(--border-primary); } .dark .shadow-elegant { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } .dark .hover\:shadow-xl:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); } .dark .bg-white\/90.dark\:bg-gray-800\/90 { background-color: rgba(30, 41, 59, 0.9); } .dark .text-gray-600.dark\:text-gray-300 { color: var(--text-secondary); } .dark .border-gray-200.dark\:border-gray-700 { border-color: var(--border-primary); } .dark .text-primary-600.dark\:text-primary-400 { color: var(--orange-600); } .dark .hover\:bg-gray-50.dark\:hover\:bg-gray-700:hover { background-color: var(--bg-tertiary); } .dark .py-12.bg-gray-50 { background-color: var(--bg-secondary); } .dark .border-gray-200 { border-color: var(--border-primary); } .dark .hover\:border-blue-600:hover { border-color: #3b82f6; } /* --- vehicle-detail.css'ten (dosyanın tamamı; içindeki tek sayfaya özgü kural olan #book:disabled de kimlik seçicisi olduğu için başka sayfayı etkilemiyor) --- SIRA ÖNEMLİ: `.dark .shadow-elegant` yukarıda homepage-styles bloğunda da tanımlı. İkisi de aynı özgüllükte olduğu için layout'taki sırası kazanıyordu (homepage-styles önce, vehicle-detail sonra). Aynı sırayı burada koruyoruz. Not: iki dosya `rel=preload ... onload=stylesheet` ile yükleniyordu, yani gerçek kazanan indirme sırasına bağlıydı — bu birleşmeyle davranış belirli hale geldi. */ input[type="radio"]:checked + span { display: block; } .animate-fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .shadow-elegant { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); } .dark .shadow-elegant { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); } #book:disabled { opacity: 0.7; cursor: not-allowed; } /* =================================================================== SİTE GENELİ TEMA DEĞİŞKENLERİ (#663) Aşağıdaki bloklar modern-auth-design.css ve modern-profile-design.css'ten BİREBİR taşındı. O dosyalar `.modern-*` / `.profile-*` sınıflarını kullanan sayfalara indirildi; ancak bu dört blok sayfaya özgü DEĞİL: - `[data-theme="light"]` ve `[data-theme="dark"]` seçicileri layout'un özniteliğiyle eşleşiyor, yani HER müşteri sayfasında etkindi ve layout'un :root paletini eziyordu (özel değişkenler gövdeden aşağı miras alınır; gövde düzeyindeki bildirim html düzeyindekini yener). - İki dosya kaldırıldığında sitenin açık mod paleti layout'un krem/kahve :root değerlerine düştü: arama kutusu inputları krem, etiketler kahve göründü (tarayıcıda yakalandı). SIRA: layout'ta modern-auth-design.css modern-profile-design.css'ten ÖNCE yükleniyordu; ortak değişken adlarında profile kazanıyordu. Aynı sıra burada da korunuyor. Bu dosya layout'un kendi CSS'inden ÖNCE yüklendiği için layout'un `.dark` bloğu koyu modda yine kazanmaya devam ediyor — eskiden de öyleydi. =================================================================== */ /* --- modern-auth-design.css — nötr renk skalası --- */ :root { /* Neutral Base Colors */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* Orange Accent Colors */ --orange-50: #FFF0F2; --orange-100: #FFD6DC; --orange-400: #F21A36; --orange-500: #D50025; --orange-600: #A80020; --orange-700: #7A0017; /* Gradients - Subtle with Orange Accents */ --gradient-primary: linear-gradient(135deg, #64748b 0%, #475569 100%); --gradient-secondary: linear-gradient(135deg, #D50025 0%, #A80020 100%); --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-colored: 0 25px 50px -12px rgba(213, 0, 37, 0.35); } /* --- modern-auth-design.css — AÇIK MOD paleti (gövde düzeyi) --- */ :root.light-theme, [data-theme="light"] { /* Light Mode Neutral Colors */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --border-primary: #e2e8f0; --border-secondary: #cbd5e1; /* Light Mode Text Colors */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; /* Light Mode Card Colors */ --card-bg: rgba(255, 255, 255, 0.95); --card-border: rgba(213, 0, 37, 0.2); --card-shadow: 0 25px 50px -12px rgba(213, 0, 37, 0.15); /* Light Mode Input Colors */ --input-bg: rgba(248, 250, 252, 0.8); --input-bg-focus: rgba(255, 255, 255, 1); --input-border: rgba(226, 232, 240, 0.6); --input-border-focus: rgba(213, 0, 37, 0.4); --input-text: #1e293b; --input-placeholder: #64748b; /* Light Mode Shadows */ --shadow-light-mode: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-medium-mode: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-large-mode: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.06); --shadow-colored-mode: 0 25px 50px -12px rgba(213, 0, 37, 0.15); } /* --- modern-profile-design.css — profil/gölge/zamanlama değişkenleri --- */ :root { /* Enhanced Color Palette - Following established design criteria */ --profile-primary: var(--gradient-primary); --profile-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --profile-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); /* Neutral Colors */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* Modern Background Colors */ --bg-primary: rgba(255, 255, 255, 0.98); --bg-secondary: rgba(248, 250, 252, 0.95); --bg-tertiary: rgba(241, 245, 249, 0.9); --bg-glass: rgba(255, 255, 255, 0.1); --bg-glass-strong: rgba(255, 255, 255, 0.15); /* Enhanced Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-colored: 0 25px 50px -12px rgba(var(--primary-rgb), 0.25); --shadow-glow: 0 0 20px rgba(var(--primary-rgb), 0.3); /* Animation Timings */ --timing-fast: 0.15s; --timing-medium: 0.3s; --timing-slow: 0.5s; --timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --timing-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* --- modern-profile-design.css — KOYU MOD paleti (gövde düzeyi) --- */ [data-theme="dark"] { --bg-primary: rgba(31, 41, 55, 0.98); --bg-secondary: rgba(17, 24, 39, 0.95); --bg-tertiary: rgba(55, 65, 81, 0.9); --bg-glass: rgba(31, 41, 55, 0.2); --bg-glass-strong: rgba(31, 41, 55, 0.3); --neutral-50: #0f172a; --neutral-100: #1e293b; --neutral-200: #334155; --neutral-300: #475569; --neutral-400: #64748b; --neutral-500: #94a3b8; --neutral-600: #cbd5e1; --neutral-700: #e2e8f0; --neutral-800: #f1f5f9; --neutral-900: #f8fafc; }