/* ============================================================ TEMA — Açık / Karanlık (Dark/Light) destek katmanı ------------------------------------------------------------ • style.css'teki AÇIK tasarım hiç değişmeden korunur. • Buraya yalnızca semantik token'lar + KARANLIK override'lar ve tema değiştirme düğmesinin stili eklenir. • Tema, ile yönetilir (Bootstrap 5.3 native dark mode ile uyumlu). Yön: sistem tercihi → localStorage. • Tasarım dili: neon değil; düz koyu-lacivert zemin, hairline kenarlar, yumuşak gölge, marka gradyanı #0d6efd→#0dcaf0. ============================================================ */ /* ---------- Semantik token'lar — AÇIK (varsayılan) ---------- */ :root { --surface: #ffffff; /* kart yüzeyi */ --surface-2: #f8f9fa; /* alternatif bölüm zemini */ --surface-border: rgba(15, 23, 42, 0.08); /* hairline kenar */ --navbar-bg: #ffffff; --nav-text: #0f172a; --shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.06); --dropdown-bg: #ffffff; /* TAM OPAK — 26.07.2026 (saydamlık kaldırıldı) */ --dropdown-item: #334155; color-scheme: light; } /* ---------- KARANLIK tema ---------- */ [data-bs-theme="dark"] { /* style.css :root token'larını karanlığa çevir → var() kullanan her şey otomatik döner (body, .services-section, .bg-darker …) */ --dark-bg: #0b1220; /* sayfa zemini (derin lacivert) */ --darker-bg: #0f1a2e; /* alternatif bölüm zemini */ --text-color: #e6edf6; --text-muted: #9aa7bd; --card-bg: rgba(255, 255, 255, 0.04); --border-color: rgba(255, 255, 255, 0.08); /* yeni semantik token'ların karanlık karşılığı */ --surface: #111c30; --surface-2: #0d1726; --surface-border: rgba(255, 255, 255, 0.09); --navbar-bg: #0c1424; --nav-text: #e6edf6; --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.5); --dropdown-bg: #111c30; /* TAM OPAK — 26.07.2026 (saydamlık kaldırıldı) */ --dropdown-item: #cbd5e1; color-scheme: dark; } /* ============================================================ TEMA DEĞİŞTİRME DÜĞMESİ (güneş/ay) — currentColor'a uyar, böylece beyaz navbar'da koyu, karanlıkta açık, hero üstünde beyaz. ============================================================ */ .theme-toggle { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 1.15rem; line-height: 1; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1); } .theme-toggle:hover { transform: translateY(-2px) rotate(8deg); border-color: var(--secondary-color); color: var(--secondary-color); background: color-mix(in srgb, var(--secondary-color) 10%, transparent); } .theme-toggle:focus-visible { outline: 2px solid #0dcaf0; outline-offset: 3px; } /* İkon görünürlüğü: açıkta ay (→ karanlığa geç), karanlıkta güneş (→ açığa geç) */ .theme-toggle .bi-sun-fill { display: none; } .theme-toggle .bi-moon-stars-fill { display: inline-block; } [data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; } [data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; } /* Ana sayfa hero'su (şeffaf navbar, en üstte): menü beyaz → düğme de beyaz olsun */ body.home .navbar:not(.scrolled) .theme-toggle { color: rgba(255, 255, 255, 0.92); } /* İletişim CTA aktifken: gradyan üzerinde yazı beyaz kalsın + ince marka halkası (genel .nav-link.active mavi yazı kuralını ezer) */ .contact-btn.active { color: #fff !important; box-shadow: 0 6px 18px rgba(13, 110, 253, 0.30), 0 0 0 3px rgba(13, 202, 240, 0.40); } .contact-btn.active::after { display: none !important; /* CTA'da alt çizgi olmasın */ } /* Mobil (collapsed) menüde düğmeyi hizala */ @media (max-width: 991.98px) { .theme-toggle { margin: 8px 0 2px; } } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:hover { transform: none; } } /* ============================================================ KARANLIK OVERRIDE'LAR — ortak alanlar (her sayfada) + ana sayfa ============================================================ */ /* ---- Navbar ---- */ [data-bs-theme="dark"] .navbar { background: var(--navbar-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); } /* Kaydırılmış header — koyu temanın cam karşılığı (26.07.2026). Açık tema karşılığı style.css → .navbar.scrolled. Kuyruklu yıldız korunur. */ [data-bs-theme="dark"] .navbar.scrolled { background: rgba(11, 18, 32, 0.72); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom-color: rgba(13, 202, 240, 0.5); box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-bs-theme="dark"] .navbar.scrolled { background: var(--navbar-bg); } } [data-bs-theme="dark"] .nav-link { color: var(--nav-text) !important; } /* MOBİL (açılır menü) — koyu temada menü yazıları KOYU kalıyordu, koyu zeminde okunmuyordu (26.07.2026 düzeltmesi). Sebep: style.css'teki mobil kuralın ikinci seçicisi ".fixed-top:not(.scrolled) .nav-link" — :not() içi özgüllüğe sayıldığı için yukarıdaki tema kuralını eziyordu. Aynı seçicilerin tema önekli hâli. */ @media (max-width: 991.98px) { [data-bs-theme="dark"] .navbar .nav-link, [data-bs-theme="dark"] .fixed-top:not(.scrolled) .nav-link { color: var(--nav-text) !important; } /* Açılır menü paneli — YALNIZ mobilde zemin alır (16.08.2026 düzeltmesi). Bu kural eskiden media query DIŞINDAYDI: masaüstünde de basıldığı için menü bağlantılarının arkasında navbar'dan ayrı, kutu gibi duran koyu bir dikdörtgen + gölge görünüyordu. Açık tema karşılığı style.css'te zaten bu eşiğin içindedir — ikisi birlikte değişir. */ [data-bs-theme="dark"] .navbar-collapse { background: rgba(12, 20, 36, 0.97); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); } } [data-bs-theme="dark"] .nav-link:hover, [data-bs-theme="dark"] .nav-link.active { color: #4dabf7 !important; } [data-bs-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.18); } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(100%) brightness(1.6); } /* ---- Dropdown ---- */ [data-bs-theme="dark"] .dropdown-menu { background: var(--dropdown-bg); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } [data-bs-theme="dark"] .dropdown-item { color: var(--dropdown-item); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(13, 110, 253, 0.20); color: #fff; } [data-bs-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.10); } /* ---- Bölüm zeminleri (Bootstrap bg-light / bg-white yardımcıları tema-duyarlı değildir → yalnızca
üzerinde çevir) ---- */ [data-bs-theme="dark"] section.bg-light, [data-bs-theme="dark"] section.bg-white { background-color: var(--darker-bg) !important; } /* ---- Başlıklar ---- */ [data-bs-theme="dark"] .section-title, [data-bs-theme="dark"] .service-title, [data-bs-theme="dark"] .package-title { color: var(--text-color); } /* ---- Hizmet kartları ---- */ [data-bs-theme="dark"] .service-card { background: var(--surface); border-color: var(--surface-border); box-shadow: var(--shadow-soft); } [data-bs-theme="dark"] .service-card:hover { border-color: var(--secondary-color); box-shadow: 0 20px 40px rgba(13, 110, 253, 0.30); } [data-bs-theme="dark"] .digital-grid-overlay { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); } /* ---- Ana sayfa kartları (package / tech / step) — .bg-white yardımcısı !important taşıdığından override de !important ---- */ [data-bs-theme="dark"] .package-card.bg-white, [data-bs-theme="dark"] .tech-box.bg-white, [data-bs-theme="dark"] .step-circle.bg-white { background-color: var(--surface) !important; border: 1px solid var(--surface-border); } [data-bs-theme="dark"] .process-line { background: rgba(255, 255, 255, 0.12); } /* ---- Referanslar bölümü ---- */ [data-bs-theme="dark"] .references-section { background: linear-gradient(180deg, #0d1726 0%, #0b1220 100%); } [data-bs-theme="dark"] .ref-bg-grid { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); } [data-bs-theme="dark"] .ref-showcase-card { background: var(--surface); border-color: var(--surface-border); } [data-bs-theme="dark"] .ref-showcase-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); } /* favicon kontrastı için logo kutusu açık kalsın */ [data-bs-theme="dark"] .ref-showcase-card .ref-logo { background: #f1f5f9; border-color: rgba(255, 255, 255, 0.10); } /* ---- Teknoloji kutusu hover gölgesi ---- */ [data-bs-theme="dark"] .tech-box:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; }