/* ============================================================ tema-mod.css — KARANLIK / AYDINLIK MOD (2026-08-23) ------------------------------------------------------------ Webster teması 2016'da tek modlu tasarlandı: style.css içinde 830 sabit renk var. Onları tek tek değiştirmek hem riskli hem gereksiz — çoğu belirli bileşenlere ait. YAKLAŞIM: yeniden yazmak değil, ÜSTÜNE KATMAN. Sayfanın yüzeylerini (zemin, metin, kart, çizgi, form) token'a bağlarız; karanlık modda yalnız token'lar değişir. Bileşen renkleri (marka kırmızısı, yeşil, sarı) her iki modda da aynı kalır — marka kimliği moda göre değişmez. İKİ DURUM — VARSAYILAN AYDINLIK (2026-08-23 revizyon): 1) Varsayılan -> üzerinde işaret YOK => AYDINLIK tema kendi orijinal görünümünde kalır 2) Elle karanlık -> (data-theme="light" de kabul edilir; varsayılanla aynı sonucu verir) 🔴 SİSTEM TERCİHİ BİLEREK İZLENMİYOR. Önce prefers-color-scheme ile otomatik karanlığa geçiliyordu; ama Webster teması karanlık için tasarlanmadı (830 sabit renk, slider görselleri, skin dosyası hep aydınlık varsayar). İşletim sistemi karanlık olan ziyaretçi siteyi ilk açtığında yarı dönüşmüş bir sayfa görüyordu. Artık karanlık YALNIZCA ziyaretçi düğmeye basarsa devreye girer; ilk izlenim her zaman temanın orijinali. 🔴 KURAL: hiçbir renk YALNIZCA karanlık blok içinde tanımlanmaz. Önce :root'ta aydınlık değer verilir, sonra karanlıkta ezilir. ============================================================ */ :root { /* Yüzeyler — AYDINLIK (varsayılan) */ --tm-zemin: #ffffff; /* sayfa gövdesi */ --tm-zemin-alt: #f6f7f8; /* gri bölümler */ --tm-kart: #ffffff; /* kart/panel içi */ --tm-cizgi: #e7ebf0; --tm-cizgi-koyu: #d9dee5; /* Metin */ --tm-metin: #323232; --tm-metin-2: #626262; /* ikincil */ --tm-metin-3: #8a94a3; /* soluk */ --tm-baslik: #2b3341; /* Header / footer */ --tm-header: #ffffff; --tm-footer: #f6f7f8; /* Form */ --tm-input: #ffffff; --tm-input-cizgi: #dddddd; /* Gölge */ --tm-golge: 0 1px 2px rgba(35,43,58,.05), 0 8px 26px rgba(35,43,58,.06); /* Görsel parlaklığı — karanlıkta hafif kısılır */ --tm-gorsel: none; color-scheme: light; } /* ---------- Sistem tercihi KARANLIK (elle "aydınlık" seçilmediyse) ---------- */ /* ---------- Elle KARANLIK seçimi (sistem ne derse desin) ---------- */ :root[data-theme="dark"] { --tm-zemin: #12161d; --tm-zemin-alt: #171c25; --tm-kart: #1b212b; --tm-cizgi: #2a323e; --tm-cizgi-koyu: #38424f; --tm-metin: #e6eaf0; --tm-metin-2: #9aa5b4; --tm-metin-3: #6e7887; --tm-baslik: #f0f3f7; --tm-header: #171c25; --tm-footer: #0e1218; --tm-input: #1b212b; --tm-input-cizgi: #38424f; --tm-golge: 0 1px 2px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.40); --tm-gorsel: brightness(.92) contrast(1.02); color-scheme: dark; } /* ============================================================ YÜZEYLERİN TOKEN'A BAĞLANMASI Yalnız KARANLIK modda uygulanır; aydınlıkta tema kendi renklerini kullanmaya devam eder (regresyon riski sıfır). ============================================================ */ :root[data-theme="dark"] body, :root[data-theme="dark"] .white-bg, :root[data-theme="dark"] .bg-white { background-color: var(--tm-zemin) !important; color: var(--tm-metin); } /* 🔴 KARANLIK MODUN EN BÜYÜK TEK KUSURU BURADAYDI. ------------------------------------------------------------ css/typography.css içinde ÇIPLAK bir kural var: section { background: #ffffff; } Yani sayfadaki HER
beyaz — sınıfı ne olursa olsun. `.white-bg` / `.gray-bg` taşıyan bölümler yukarıdaki kurallarla karartıldığı için doğru görünüyordu; ama SINIFSIZ bölümler (ör. `
`) beyaz kalıyordu. Sonuç: karanlık sayfada aralara serpişmiş BEYAZ BANTLAR — üstelik başlıklar `--tm-baslik` ile açık renge döndüğü için o bantlarda beyaz-üstüne-beyaz yazı oluşuyordu (blog bölümünde "Blog Yazılarımız" okunmuyordu). Teşhis tahminle değil ölçümle yapıldı: body, .wrapper ve html sırayla renklendirilip render alındı — hiçbiri görünmedi; `section` renklendirilince bantlar boyandı. Bu kural o çıplak beyazı karşılar. Sınıf taşıyan bölümler kendi kurallarıyla üstüne yazmaya devam eder. */ :root[data-theme="dark"] section { background-color: var(--tm-zemin); } /* Akordeon (SSS) — başlık metni #353535 sabitiyle geliyor (shortcodes/accordion.css:15) ve koyu zeminde okunmuyordu. */ :root[data-theme="dark"] .accordion .acd-heading { color: var(--tm-metin) !important; } :root[data-theme="dark"] .accordion .acd-group.acd-active .acd-heading, :root[data-theme="dark"] .accordion .acd-group .acd-heading:hover { color: var(--mk-kirmizi, #E8493A) !important; } :root[data-theme="dark"] .accordion .acd-des { color: var(--tm-metin-2) !important; } :root[data-theme="dark"] .accordion.shadow .acd-heading, :root[data-theme="dark"] .accordion.gray .acd-heading { background: var(--tm-kart) !important; } /* Kenarlıklı düğme — marka.css'te `.button.border { color: var(--mk-slate) }` yani koyu slate. Karanlık zeminde okunmuyordu ("TÜM SORULARI GÖRÜN"). */ :root[data-theme="dark"] .button.border { color: var(--tm-metin) !important; border-color: var(--tm-cizgi-koyu) !important; } :root[data-theme="dark"] .button.border:hover { background: var(--mk-kirmizi, #E8493A) !important; border-color: var(--mk-kirmizi, #E8493A) !important; color: #ffffff !important; } :root[data-theme="dark"] .gray-bg, :root[data-theme="dark"] .grey-bg { background-color: var(--tm-zemin-alt) !important; } /* Metin — başlıklar ve paragraflar */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--tm-baslik); } :root[data-theme="dark"] p, :root[data-theme="dark"] li, :root[data-theme="dark"] td, :root[data-theme="dark"] label { color: inherit; } :root[data-theme="dark"] .text-back, :root[data-theme="dark"] .text-dark { color: var(--tm-baslik) !important; } /* Header ve footer */ /* 🔴 KARANLIKTA YALNIZ TEK KATMAN BOYANIR. ------------------------------------------------------------ Onceki surumde BES ayri oge birden karartiliyordu: .menu · .topbar + .menu · .menu > .container · .menu-bar · .menu-list-items (+ ikisinde ayrica box-shadow) Hepsi ayni --tm-header degerini alsa da ic ice gectikleri ve ikisi golge tasidigi icin ekranda BASAMAKLI koyu bantlar olusuyordu (ekran goruntusuyle gorüldü): menu satiri ayri, alt div ayri, ul'un basladigi yer ayri tonda. Kural: AYDINLIKTA BEYAZ OLAN NE İSE, KARANLIKTA O KARARIR. Beyaz zemin `.menu-list-items` uzerinde (style.css:213), o yuzden karartilan tek oge de odur. `.menu` ve ara katmanlar seffaf birakilir. */ :root[data-theme="dark"] .header.fancy .mega-menu > section.menu-list-items, :root[data-theme="dark"] .mega-menu.desktopTopFixed .menu-list-items { background: var(--tm-header) !important; } /* 🔴 Sabit başlık için ÖZGÜLLÜK YARIŞI. marka.css'e eklenen `.header.fancy .mega-menu.desktopTopFixed > section.menu-list-items` kuralı (0,5,1) özgüllüğünde ve `background:#fff !important` taşıyor. Yukarıdaki satır (0,5,0) — eleman seçici içermediği için DAHA ZAYIF, yani karanlık modda kaydırınca çubuk BEYAZ kalırdı. Aynı biçim burada da yazılıp bir kademe yukarı çıkılıyor. */ :root[data-theme="dark"] .header.fancy .mega-menu.desktopTopFixed > section.menu-list-items { background: var(--tm-header) !important; box-shadow: 0 2px 20px 0 rgba(0,0,0,.35) !important; } :root[data-theme="dark"] .mega-menu .menu-links > li > a, :root[data-theme="dark"] .header.fancy .mega-menu .menu-links > li > a { color: #e6eaf0 !important; } /* 🔴 Aynı özgüllük tuzağı: bir üstteki kuralın `.header.fancy`li biçimi (0,6,0), buradaki hover/aktif kuralı ise (0,5,0) idi. Sonuç: fancy başlıkta karanlık modda AKTİF SAYFA vurgulanmıyor, diğerleriyle aynı beyaz kalıyordu (render'da görüldü). Tüm 61 sayfa `header fancy` kullandığı için bu kural pratikte hiç uygulanmıyordu. `.header.fancy`li biçimler eklendi. */ :root[data-theme="dark"] .mega-menu .menu-links > li > a:hover, :root[data-theme="dark"] .mega-menu .menu-links > li.active > a, :root[data-theme="dark"] .header.fancy .mega-menu .menu-links > li > a:hover, :root[data-theme="dark"] .header.fancy .mega-menu .menu-links > li.active > a { color: var(--mk-kirmizi, #E8493A) !important; } :root[data-theme="dark"] .search-cart i.icon, :root[data-theme="dark"] .header.fancy .search-cart i.icon { color: #e6eaf0 !important; } /* ============================================================ KARANLIKTA MENÜ İKİ TON (2026-08-23 revizyon) ------------------------------------------------------------ İstek: menü satırını saran katmanlar tek ve aynı renk olsun, yüzen bar ise ondan ayrılsın; gölge hiç olmasın. .menu > .container > .row > .col > nav -> #232b3a section.menu-list-items -> #171c25 #232b3a üst bandın rengiyle aynı (--mk-slate-koyu), yani menü satırı üst bandın doğal devamı gibi okunur. Yüzen bar bir ton koyu kalıp kendini ayırır — aydınlıktaki "beyaz kart" etkisinin karanlık karşılığı. Gölge KALDIRILDI: koyu üstüne koyu gölge sınırı bulanıklaştırıp basamak izlenimi veriyordu (zaten bu basamaklı görüntü şikâyetin kaynağıydı). ============================================================ */ :root[data-theme="dark"] .header.fancy .menu, :root[data-theme="dark"] .header.fancy .menu > .container, :root[data-theme="dark"] .header.fancy .menu > .container > .row, :root[data-theme="dark"] .header.fancy .menu > .container > .row > div, :root[data-theme="dark"] .header.fancy .menu .mega-menu { background-color: #232b3a !important; box-shadow: none !important; } /* Yüzen bar: bir ton koyu, gölgesiz */ :root[data-theme="dark"] .header.fancy .mega-menu > section.menu-list-items, :root[data-theme="dark"] .header.fancy .mega-menu.desktopTopFixed > section.menu-list-items { background-color: #171c25 !important; box-shadow: none !important; } :root[data-theme="dark"] .drop-down-multilevel, :root[data-theme="dark"] .drop-down { background: var(--tm-kart) !important; border-color: var(--tm-cizgi) !important; } /* 🔴 `.drop-down` DA HEDEFLENMELI. Bu satir once yalniz `.drop-down-multilevel a` idi; MEGA PANEL (Emlak / Paketler / Cozumler) ise `.drop-down grid-col-12` kullaniyor. Sonuc: karanlikta panel BASLIKLARI temanin `#323232` rengiyle kalip koyu zeminde neredeyse gorunmez oluyordu; altlarindaki `` aciklamalar ise kendi acik grisini korudugu icin OKUNUYORDU. Yani hiyerarsi tersine donmustu: aciklama okunur, baslik okunmaz (render'da gorüldü). */ :root[data-theme="dark"] .drop-down-multilevel a, :root[data-theme="dark"] .mega-menu .drop-down a, :root[data-theme="dark"] .mega-menu .drop-down a b { color: var(--tm-metin) !important; } :root[data-theme="dark"] .mega-menu .drop-down a:hover, :root[data-theme="dark"] .mega-menu .drop-down a:hover b, :root[data-theme="dark"] .drop-down-multilevel a:hover { color: var(--mk-kirmizi, #E8493A) !important; } /* Aciklama satirlari bir ton soluk kalir - hiyerarsi korunur */ :root[data-theme="dark"] .mega-menu .drop-down a small, :root[data-theme="dark"] .mega-menu .drop-down .em-mn-aciklama { color: var(--tm-metin-3) !important; } :root[data-theme="dark"] footer.footer { background: var(--tm-footer) !important; } /* ============================================================ FOOTER — KARANLIKTA OKUNABİLİRLİK ------------------------------------------------------------ Tema footer'ı AYDINLIK zemin için yazılmış: .footer .usefull-link ul li a { color: #323232 } .footer .copyright ul li a { color: #323232 } Bu koyu gri, karanlık moddaki #0e1218 zeminin üzerinde neredeyse görünmez oluyordu (ekran görüntüsüyle görüldü). Başlıklar (h6) zaten --tm-baslik alıyordu, o yüzden yalnız BAĞLANTILAR ve gövde metni gride kalmıştı — hiyerarşi tersine dönmüş, "okunur başlık + okunmaz liste" hâli oluşmuştu. Ayrıca temanın birçok footer metni rgba(255,255,255,.5) — yani %50 opaklık. Koyu zeminde bu kasten soluk bir tondur; ana gezinme bağlantıları için fazla düşük. .78'e çıkarıldı, hover'da tam beyaz. ============================================================ */ :root[data-theme="dark"] .footer .usefull-link ul li a, :root[data-theme="dark"] .footer .footer-nav ul li a, :root[data-theme="dark"] .footer .copyright ul li a, :root[data-theme="dark"] .footer .copyright ul li, :root[data-theme="dark"] .footer-useful-link ul li a, :root[data-theme="dark"] .footer .footer-text p, :root[data-theme="dark"] .footer .footer-social ul li a, :root[data-theme="dark"] .footer.footer-topbar .copyright ul li { color: rgba(255,255,255,.78) !important; } :root[data-theme="dark"] .footer .usefull-link ul li a:hover, :root[data-theme="dark"] .footer .footer-nav ul li a:hover, :root[data-theme="dark"] .footer .copyright ul li a:hover, :root[data-theme="dark"] .footer-useful-link ul li a:hover, :root[data-theme="dark"] .footer .footer-social ul li a:hover { color: #ffffff !important; } /* Gövde metni ve widget paragrafları */ :root[data-theme="dark"] .footer p, :root[data-theme="dark"] .footer-widget p, :root[data-theme="dark"] .footer .about-content p { color: rgba(255,255,255,.72) !important; } /* Başlıklar: .text-black karanlıkta siyah-üstüne-siyah olurdu */ :root[data-theme="dark"] .footer h6, :root[data-theme="dark"] .footer .text-black { color: var(--tm-baslik) !important; } /* Ayraç çizgileri ve sosyal ikonlar */ :root[data-theme="dark"] .footer .divider, :root[data-theme="dark"] .footer hr { border-color: var(--tm-cizgi) !important; background: var(--tm-cizgi) !important; } :root[data-theme="dark"] .footer .social ul li a i { color: rgba(255,255,255,.78) !important; } :root[data-theme="dark"] .footer .social ul li a:hover i { color: var(--mk-kirmizi, #E8493A) !important; } /* Alt bant (copyright) zemini gövdeden bir ton ayrılsın */ :root[data-theme="dark"] .footer .copyright.gray-bg { background: var(--tm-zemin-alt) !important; } /* ============================================================ MENÜ VİTRİN KARTININ DÜĞMESİ — HER İKİ MODDA DOLU ------------------------------------------------------------ Kart zemini açık pembe (#faf4f5). Düğme herhangi bir sebeple dolgusunu kaybederse (geçiş animasyonu, ezilen bir kural, önbellekte kalmış eski stil) beyaz yazı açık zeminde kaybolur. Burada dolgu AÇIKÇA sabitlenir; artık kaybolamaz. ============================================================ */ .mega-menu .drop-down .em-mn-vitrin .button, .mega-menu .drop-down .em-mn-vitrin .button:focus { background: var(--mk-kirmizi) !important; border-color: var(--mk-kirmizi) !important; color: #ffffff !important; } .mega-menu .drop-down .em-mn-vitrin .button:hover { background: var(--mk-kirmizi-h) !important; border-color: var(--mk-kirmizi-h) !important; } .mega-menu .drop-down .em-mn-vitrin .button span { color: #ffffff !important; } /* Karanlıkta kart zemini ve metni */ :root[data-theme="dark"] .mega-menu .drop-down .em-mn-vitrin { background: var(--tm-zemin-alt) !important; } :root[data-theme="dark"] .mega-menu .drop-down .em-mn-vitrin h6 { color: var(--tm-baslik) !important; } :root[data-theme="dark"] .mega-menu .drop-down .em-mn-vitrin p { color: var(--tm-metin-2) !important; } /* Form elemanları */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background-color: var(--tm-input) !important; border-color: var(--tm-input-cizgi) !important; color: var(--tm-metin) !important; } :root[data-theme="dark"] .form-control::placeholder { color: var(--tm-metin-3) !important; } /* Kart benzeri kutular ve çizgiler */ :root[data-theme="dark"] .feature-text.box-shadow, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .pricing-content, :root[data-theme="dark"] .acd-group { background: var(--tm-kart) !important; border-color: var(--tm-cizgi) !important; box-shadow: var(--tm-golge) !important; } :root[data-theme="dark"] hr, :root[data-theme="dark"] .table > tbody > tr > td, :root[data-theme="dark"] .table > thead > tr > th { border-color: var(--tm-cizgi) !important; } :root[data-theme="dark"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background: #fff"] { background: var(--tm-kart) !important; } :root[data-theme="dark"] [style*="border:1px solid #E7EBF0"] { border-color: var(--tm-cizgi) !important; } /* Görseller — karanlıkta göz yakmasın */ :root[data-theme="dark"] img:not([src*="logo"]):not(.rev-slidebg) { filter: var(--tm-gorsel); } /* ============================================================ GEÇİŞ DÜĞMESİ ============================================================ */ /* 🔴 DÜĞMENİN KABUĞU BURADA TANIMLANMAZ — marka.css'te tanımlıdır. ------------------------------------------------------------ Burada bir zamanlar tam kabuk vardı: 32x32, yarıçap 7px, sarı hover. tema-mod.css head.asp'te marka.css'ten SONRA yüklendiği ve özgüllük eşit olduğu için (ikisi de `.topbar .tema-dugme`) BU dosya kazanıyordu. Sonuç: arama ve sepet 34x34/8px/kırmızı hover iken tema düğmesi 32x32/7px/sarı hover kalıyordu — üç ikon "aynı aile" görünmüyordu. Kabuk artık tek yerde: marka.css içindeki `.search-btn, .cart-btn, .tema-dugme` ortak kuralı. Burada YALNIZCA tema moduna özgü davranış kalır. */ .topbar .tema-dugme { cursor: pointer; } .topbar .tema-dugme:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,194,14,.35); } /* 🔴 Bu kural ikon gizlemeyi EZMEMELI. Once ".topbar .tema-dugme svg { display:block }" yazilmisti; ozgullugu ".tema-dugme .ikon-gunes { display:none }" kuralindan yuksek oldugu icin AY ve GUNES ikonlarinin IKISI BIRDEN gorunuyordu (ekran goruntusunde). Cizim ozellikleri verilir, gorunurluge karisilmaz. */ .topbar .tema-dugme svg { vertical-align: middle; } /* İkon: aydınlıkta ay (karanlığa geç), karanlıkta güneş */ .tema-dugme .ikon-ay { display: inline-block; } .tema-dugme .ikon-gunes { display: none; } :root[data-theme="dark"] .tema-dugme .ikon-ay { display: none; } :root[data-theme="dark"] .tema-dugme .ikon-gunes { display: inline-block; } :root[data-theme="light"] .tema-dugme .ikon-ay { display: inline-block; } :root[data-theme="light"] .tema-dugme .ikon-gunes { display: none; } /* Hareket azaltma tercihi */ @media (prefers-reduced-motion: reduce) { .topbar .tema-dugme { transition: none; } }