/* ═══════════════════════════════════════════════════════════════ DARK MODE — matematikbitmistir.com Etkinleşme: Marka paleti korunur: lacivert taban + amber (#f0a500) vurgu. Bu dosya yalnızca koyu temada devreye girer; açık temada hiçbir etkisi yoktur. ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { color-scheme: dark; /* Mevcut site değişkenlerinin koyu karşılıkları */ --color-header-bg: #10182c; --color-link: #e9eef9; --color-footer-bg: #0b1120; --color-button: #f0a500; --color-white: #151d33; --color-line: #27345a; --color-muted: #1b2542; --color-sari: #f0a500; --color-sari-dark: #ffb820; /* Dark moda özel yardımcı değişkenler */ --mbd-bg: #0d1322; --mbd-surface: #151d33; --mbd-surface-2: #1b2542; --mbd-border: #27345a; --mbd-text: #aeb9d0; --mbd-heading: #e9eef9; /* Bootstrap bileşenleri (blog kartları vb.) */ --bs-body-bg: #0d1322; --bs-body-color: #aeb9d0; --bs-card-bg: #151d33; --bs-card-color: #aeb9d0; --bs-border-color: #27345a; --bs-secondary-color: #8794ad; --bs-tertiary-bg: #1b2542; } /* ── Taban ─────────────────────────────────────────────────── */ html[data-theme="dark"] body { background: var(--mbd-bg); color: var(--mbd-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--mbd-heading); } html[data-theme="dark"] p, html[data-theme="dark"] li { color: var(--mbd-text); } html[data-theme="dark"] a:not(.btn):not([class*="btn-"]) { color: #ffc63d; } html[data-theme="dark"] hr { border-color: var(--mbd-border); } html[data-theme="dark"] ::selection { background: rgba(240, 165, 0, 0.35); color: #fff; } /* ── Header / Navigasyon ───────────────────────────────────── */ html[data-theme="dark"] .site-header { background: var(--color-header-bg); border-bottom: 1px solid var(--mbd-border); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .navbar-brand img { filter: brightness(0) invert(1); } html[data-theme="dark"] .menu-link { color: #d6deee; } html[data-theme="dark"] .menu-link:hover, html[data-theme="dark"] .menu-link.active { color: var(--color-sari); } html[data-theme="dark"] .menu-toggle { background: var(--mbd-surface); color: #d6deee; border-color: var(--mbd-border); } html[data-theme="dark"] .dropdown-menu { background: var(--mbd-surface); border: 1px solid var(--mbd-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .dropdown-menu a { color: #d6deee; } html[data-theme="dark"] .dropdown-menu a:hover { background: var(--mbd-surface-2); color: var(--color-sari); } html[data-theme="dark"] .mobile-panel { background: var(--mbd-bg); } html[data-theme="dark"] .mobile-menu > li > a, html[data-theme="dark"] .mobile-menu-toggle { color: #d6deee; border-color: var(--mbd-border); } html[data-theme="dark"] .mobile-submenu { background: var(--mbd-surface); } html[data-theme="dark"] .mobile-submenu a { color: var(--mbd-text); } html[data-theme="dark"] .breadcrumb-nav { background: var(--mbd-surface); border-color: var(--mbd-border); } html[data-theme="dark"] .breadcrumb-item.active span { color: var(--mbd-heading); } /* ── Tema geçiş düğmesi ────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 12px; border: 1px solid #e2e7f6; border-radius: 50%; background: #fff; color: #1a2a4a; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { border-color: #f0a500; color: #f0a500; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle { background: var(--mbd-surface); border-color: var(--mbd-border); color: #ffc63d; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── Genel yüzeyler: kartlar, kutular, formlar ─────────────── */ html[data-theme="dark"] .card, html[data-theme="dark"] .review-card, html[data-theme="dark"] .reference-card, html[data-theme="dark"] .toc-card, html[data-theme="dark"] .sp-related-card, html[data-theme="dark"] .sp-price-card, html[data-theme="dark"] .sp-main, html[data-theme="dark"] .lgs-referans-container, html[data-theme="dark"] .about-approach-card, html[data-theme="dark"] .about-feature-card, html[data-theme="dark"] .contact-info-card, html[data-theme="dark"] .contact-chat-card, html[data-theme="dark"] .contact-style-one-info, html[data-theme="dark"] .contact-style-one-info .contact-box, html[data-theme="dark"] .contact-meta .meta-item, html[data-theme="dark"] .sss-item, html[data-theme="dark"] .sss-item[open], html[data-theme="dark"] .sp-accordion-item, html[data-theme="dark"] .sp-accordion-item--open, html[data-theme="dark"] .sp-accordion-links, html[data-theme="dark"] .sp-accordion-link, html[data-theme="dark"] .chat-host, html[data-theme="dark"] .chat-body, html[data-theme="dark"] .chat-footer, html[data-theme="dark"] .whatsapp-chatbox, html[data-theme="dark"] .whatsapp-bubble, html[data-theme="dark"] .quick-option, html[data-theme="dark"] .review-photo-wrap, html[data-theme="dark"] .yt-lite-card, html[data-theme="dark"] .sp-related-card-footer, html[data-theme="dark"] .sp-related-prev, html[data-theme="dark"] .sp-related-next, html[data-theme="dark"] .hero-trust-badge { background: var(--mbd-surface); border-color: var(--mbd-border); color: var(--mbd-text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Yüzey üstü metinler */ html[data-theme="dark"] .review-name, html[data-theme="dark"] .toc-title, html[data-theme="dark"] .toc-link, html[data-theme="dark"] .sp-related-title, html[data-theme="dark"] .sp-related-card-title, html[data-theme="dark"] .sp-sss-title, html[data-theme="dark"] .sss-item summary, html[data-theme="dark"] .sss-section-title, html[data-theme="dark"] .sp-accordion-text, html[data-theme="dark"] .sp-accordion-arrow, html[data-theme="dark"] .about-feature-title, html[data-theme="dark"] .about-approach-card h3, html[data-theme="dark"] .about-section-title, html[data-theme="dark"] .about-profile-text h2, html[data-theme="dark"] .about-profile-text strong, html[data-theme="dark"] .contact-style-one-info h2, html[data-theme="dark"] .contact-meta .meta-item strong, html[data-theme="dark"] .quick-option, html[data-theme="dark"] .single-content h2, html[data-theme="dark"] .single-content h3, html[data-theme="dark"] .single-content h4, html[data-theme="dark"] .sitemap-group h2, html[data-theme="dark"] .sitemap-head h1, html[data-theme="dark"] .review-arrow { color: var(--mbd-heading); } html[data-theme="dark"] .toc-link:hover, html[data-theme="dark"] .sp-accordion-link:hover, html[data-theme="dark"] .quick-option:hover { color: var(--color-sari); } html[data-theme="dark"] .toc-level-3 .toc-link, html[data-theme="dark"] .contact-style-one-info a { color: var(--mbd-text); } /* Açık gri bölüm arka planları */ html[data-theme="dark"] .contact-section, html[data-theme="dark"] .about-approach, html[data-theme="dark"] .sp-related-section::before, html[data-theme="dark"] .sp-related-card--servis::before { background: var(--mbd-bg); } /* ── Blog kartları (Bootstrap) ─────────────────────────────── */ html[data-theme="dark"] .card .card-title, html[data-theme="dark"] .card .card-title a { color: var(--mbd-heading); } html[data-theme="dark"] .card .card-text { color: var(--mbd-text); } html[data-theme="dark"] .shadow-sm { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] #blogSuggestions, html[data-theme="dark"] #dersSuggestions { background: var(--mbd-surface); border-color: var(--mbd-border); } html[data-theme="dark"] #blogSuggestions li a, html[data-theme="dark"] #dersSuggestions li a { color: var(--mbd-text); } html[data-theme="dark"] #blogSuggestions li a:hover, html[data-theme="dark"] #blogSuggestions li a.active, html[data-theme="dark"] #dersSuggestions li a:hover, html[data-theme="dark"] #dersSuggestions li a.active { background: var(--mbd-surface-2); color: var(--color-sari); } /* ── Formlar ───────────────────────────────────────────────── */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .whatsapp-input { background: var(--mbd-surface-2); border-color: var(--mbd-border); color: var(--mbd-heading); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b7a99; } html[data-theme="dark"] .form-control:focus { background: var(--mbd-surface-2); border-color: var(--color-sari); color: var(--mbd-heading); box-shadow: 0 0 0 0.2rem rgba(240, 165, 0, 0.2); } /* ── İçerik alanı (blog yazıları / TinyMCE çıktısı) ────────── */ html[data-theme="dark"] .single-content table { background: var(--mbd-surface); border-color: var(--mbd-border); color: var(--mbd-text); } html[data-theme="dark"] .single-content table th { background: var(--mbd-surface-2); color: var(--mbd-heading); } html[data-theme="dark"] .single-content table td, html[data-theme="dark"] .single-content table th { border-color: var(--mbd-border); } html[data-theme="dark"] .single-content blockquote { background: var(--mbd-surface); border-left-color: var(--color-sari); color: var(--mbd-text); } html[data-theme="dark"] .single-content code, html[data-theme="dark"] .single-content pre { background: var(--mbd-surface-2); color: #ffd87a; } /* İçerikte editörden gelen koyu metin renklerini okunur yap */ html[data-theme="dark"] .single-content [style*="color: #000"], html[data-theme="dark"] .single-content [style*="color:#000"], html[data-theme="dark"] .single-content [style*="color: rgb(0, 0, 0)"] { color: var(--mbd-text) !important; } /* ── Butonlar ──────────────────────────────────────────────── */ html[data-theme="dark"] .btn-hero-secondary, html[data-theme="dark"] .sp-btn-outline, html[data-theme="dark"] .mbp-btn-white, html[data-theme="dark"] .sss-cta-btn, html[data-theme="dark"] .about-hero-cta, html[data-theme="dark"] .about-cta-btn--primary { background: var(--mbd-surface); border-color: var(--mbd-border); color: var(--mbd-heading); } html[data-theme="dark"] .btn-hero-secondary:hover, html[data-theme="dark"] .sss-cta-btn:hover, html[data-theme="dark"] .about-hero-cta:hover, html[data-theme="dark"] .about-cta-btn--primary:hover { background: var(--mbd-surface-2); border-color: var(--color-sari); color: var(--color-sari); } /* ── Sitemap sayfası ───────────────────────────────────────── */ html[data-theme="dark"] .sitemap-group li a { background: var(--mbd-surface); border-color: var(--mbd-border); color: var(--mbd-text); } /* ── Görseller: koyu zeminde hafif yumuşatma ───────────────── */ html[data-theme="dark"] img { opacity: 0.92; } html[data-theme="dark"] img:hover { opacity: 1; } /* ── Scrollbar ─────────────────────────────────────────────── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; background: var(--mbd-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--mbd-surface-2); border-radius: 6px; border: 2px solid var(--mbd-bg); } /* ═══════════════════════════════════════════════════════════════ ANA SAYFA DÜZELTMELERİ (index.php gömülü header + bölümler) ═══════════════════════════════════════════════════════════════ */ /* index.php kartlarındaki inline lacivert başlıklar aşağıdaki [style*=...] kuralıyla çözülür; --color-lacivert değişkenine dokunulmaz çünkü chatbot bunu ARKA PLAN olarak da kullanıyor. */ /* Hero bölümü (ana sayfada arka planı beyazdı) */ html[data-theme="dark"] .hero-bg { background: var(--mbd-bg); } /* Bootstrap yardımcı arka plan sınıfları (bölüm zeminleri). Bootstrap bunları !important ile tanımlar, o yüzden burada da gerekli. */ html[data-theme="dark"] .bg-white { background-color: var(--mbd-bg) !important; } html[data-theme="dark"] .bg-light { background-color: #111929 !important; } /* Bootstrap metin yardımcıları */ html[data-theme="dark"] .text-dark { color: var(--mbd-heading) !important; } html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-muted { color: #8794ad !important; } html[data-theme="dark"] .text-body { color: var(--mbd-text) !important; } /* İletişim kartı etiketleri (Telefon / Adres / E-posta) */ html[data-theme="dark"] .contact-item strong { color: var(--mbd-heading); } html[data-theme="dark"] .contact-item span, html[data-theme="dark"] .contact-item a { color: var(--mbd-text); } html[data-theme="dark"] .contact-icon { background: var(--mbd-surface-2); color: var(--color-sari); } html[data-theme="dark"] .contact-title, html[data-theme="dark"] .contact-desc { color: var(--mbd-heading); } html[data-theme="dark"] .contact-desc { color: var(--mbd-text); } /* Footer logosu (koyu yazılı logo koyu zeminde okunmuyordu) */ html[data-theme="dark"] .footer-logo { filter: brightness(0) invert(1); } /* ═══════════════════════════════════════════════════════════════ TUR 2 DÜZELTMELERİ: logo, single sayfalar, referanslar ═══════════════════════════════════════════════════════════════ */ /* ── LOGO: filter kaldırıldı, koyu temada gerçek logo değişimi ── logo-seffaf.png = renkli ikon + beyaz yazı (koyu zemin için üretilmiş) */ html[data-theme="dark"] .navbar-brand img { filter: none; content: url("/assets/img/logo-seffaf.png"); max-height: 50px; width: auto; } /* Footer logosu (logo-footer-white.png) zaten beyaz yazılı — filter'a gerek yok */ html[data-theme="dark"] .footer-logo { filter: none; } /* ── SINGLE: Sıkça Sorulan Sorular bölümü (beyaz kalmıştı) ───── */ html[data-theme="dark"] .sp-sss-section { background: var(--mbd-bg); border-top-color: #22c55e; /* yeşil vurgu çizgisi kalsın */ } html[data-theme="dark"] .sp-sss-header, html[data-theme="dark"] .sp-sss-header-left { background: transparent; } /* ── SINGLE: İlginizi Çekebilir bölümü (açık gri degrade kalmıştı) ── */ html[data-theme="dark"] .sp-related-section { background: #111929; border-top-color: var(--mbd-border); box-shadow: none; } /* ── Inline style="color:#1a2a4a" başlıklar (blog, derslerimiz, referanslarimiz, 404). Inline stili ancak !important yener. ── */ html[data-theme="dark"] h1[style*="color:#1a2a4a"], html[data-theme="dark"] h1[style*="color: #1a2a4a"], html[data-theme="dark"] h2[style*="color:#1a2a4a"], html[data-theme="dark"] h2[style*="color: #1a2a4a"], html[data-theme="dark"] h3[style*="color:#1a2a4a"], html[data-theme="dark"] [style*="color:var(--color-lacivert)"] { color: var(--mbd-heading) !important; } /* ═══════════════════════════════════════════════════════════════ TUR 3 DÜZELTMELERİ: hakkımızda bölümleri, hero istatistikleri, chatbot başlığı ve Gönder butonu ═══════════════════════════════════════════════════════════════ */ /* ── Hakkımızda: açık zeminli bölümler ───────────────────────── (.about-testimonial ve .about-cta zaten lacivert, dokunulmadı) */ html[data-theme="dark"] .about-profile-section, html[data-theme="dark"] .about-features-section { background: var(--mbd-bg); } html[data-theme="dark"] .about-approach { background: #111929; } html[data-theme="dark"] .about-profile-text p, html[data-theme="dark"] .about-approach-card p { color: var(--mbd-text); } html[data-theme="dark"] .about-profile-text a { color: #ffc63d; } /* ── Ana sayfa hero istatistikleri (19+ / 2000+ / %98) ───────── */ html[data-theme="dark"] .hero-stat-value { color: var(--color-sari); } html[data-theme="dark"] .hero-stat-label { color: var(--mbd-text); } /* ── Chatbot: başlık çubuğu lacivert kalır (değişken geri alındı), Gönder butonu koyu temada amber yapılır (görünürlük) ─────── */ html[data-theme="dark"] .chat-bar { background: #1a2a4a; color: #fff; } html[data-theme="dark"] .chat-send { background: var(--color-sari); color: #1a2a4a; } html[data-theme="dark"] .chat-send:hover { background: var(--color-sari-dark); color: #1a2a4a; } /* ═══════════════════════════════════════════════════════════════ TUR 4 DÜZELTMELERİ: sayfalama (blog/derslerimiz) + breadcrumb ═══════════════════════════════════════════════════════════════ */ /* ── Sayfalama (Bootstrap .pagination koyu tema) ──────────────── */ html[data-theme="dark"] .page-link { background-color: var(--mbd-surface); border-color: var(--mbd-border); color: var(--mbd-text); } html[data-theme="dark"] .page-link:hover { background-color: var(--mbd-surface-2); border-color: var(--mbd-border); color: var(--color-sari); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--color-sari); border-color: var(--color-sari); color: #1a2a4a; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--mbd-surface); border-color: var(--mbd-border); color: #56648a; } /* ── Breadcrumb çift "/" düzeltmesi ─────────────────────────── Bootstrap, .breadcrumb-item'lara kendi "/" ayracını ::before ile ekliyor; site zaten .breadcrumb-sep ile ayraç basıyor. Bootstrap'inki kapatılır. (Tema bağımsız kural — açık temadaki çift slash da düzelir) */ .breadcrumb-list .breadcrumb-item + .breadcrumb-item::before { content: none; } /* ── Ücretler: "Düzenli Çalışma Planı" kartı ───────────────── Parlak mavi gradient koyu temada sırıtıyordu → marka uyumlu lacivert-amber geçişli zemin + amber vurgu çizgisi */ html[data-theme="dark"] .mbp-action-card { background: linear-gradient(145deg, #1a2a4a 0%, #14203a 60%, #111929 100%); border: 1px solid var(--mbd-border); border-left: 4px solid var(--color-sari); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .mbp-action-card h3 { color: #fff; } html[data-theme="dark"] .mbp-action-card p { color: var(--mbd-text); } html[data-theme="dark"] .mbp-btn-white { background: var(--color-sari); border-color: var(--color-sari); color: #1a2a4a; } html[data-theme="dark"] .mbp-btn-white:hover { background: var(--color-sari-dark); border-color: var(--color-sari-dark); color: #1a2a4a; } /* ═══════════════════════════════════════════════════════════════ TUR 5 DÜZELTMELERİ: "İlginizi Çekebilir" kart altı yazısı ve sağa/sola kaydırma butonları (koyu temada silik kalıyordu) ═══════════════════════════════════════════════════════════════ */ /* ── Kart altı "Devamını Oku" yazısı: okunur amber tonu ────── Açık temada lacivert (#1a2a4a) olan CTA, koyu zeminde görünmüyor. */ html[data-theme="dark"] .sp-related-card-cta { color: var(--color-sari); } html[data-theme="dark"] .sp-related-card:hover .sp-related-card-cta { color: var(--color-sari-dark); } /* Kart altı çubuğu: açık temadaki açık gri gradient koyu zeminde yetersiz kontrast yaratıyordu → marka uyumlu koyu yüzey. */ html[data-theme="dark"] .sp-related-card-footer { background: linear-gradient(180deg, var(--mbd-surface-2) 0%, var(--mbd-surface) 100%); border-top-color: var(--mbd-border); } /* ── Sağa/sola kaydırma butonları: belirgin lacivert + amber ok ─ Varsayılan: lacivert zemin, amber ikon — koyu zeminde de görünür. Hover: amber zemin, lacivert ikon (açık temadaki kontrastı korur). */ html[data-theme="dark"] .sp-related-prev, html[data-theme="dark"] .sp-related-next { background: #1a2a4a; border-color: var(--mbd-border); color: var(--color-sari); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .sp-related-prev:hover, html[data-theme="dark"] .sp-related-next:hover { background: var(--color-sari); border-color: var(--color-sari); color: #1a2a4a; box-shadow: 0 6px 16px rgba(240, 165, 0, 0.3); } /* Kaydırma çubuğu (yatay scrollbar): koyu temada belirgin görünür */ html[data-theme="dark"] .sp-related-scroll { scrollbar-color: var(--color-sari) var(--mbd-surface-2); } html[data-theme="dark"] .sp-related-scroll::-webkit-scrollbar { height: 8px; } html[data-theme="dark"] .sp-related-scroll::-webkit-scrollbar-track { background: var(--mbd-surface-2); border-radius: 4px; } html[data-theme="dark"] .sp-related-scroll::-webkit-scrollbar-thumb { background: var(--color-sari); border-radius: 4px; } html[data-theme="dark"] .sp-related-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-sari-dark); }