/* ══════════════════════════════════════════════════════════════════════════════ GECE MODU — vitrin/panel ortak koyu tema katmanı Tek kaynak: app/Services/Theme/DarkMode.php (palet) + bu dosya (eşleme). ─── NEDEN BU DOSYA VAR ──────────────────────────────────────────────────────── Tenant vitrinleri renklerini büyük ölçüde Tailwind utility sınıflarıyla verir (`bg-white`, `text-gray-500`, `border-gray-200` …). Bunlar CSS DEĞİŞKENİ değil, SABİT renklerdir; yalnız `--color-bg` gibi değişkenleri koyulaştırmak bu yüzden hiçbir sitede gece modu üretmez — sayfa beyaz kalır. İki yol vardı: (a) 40+ tenant'ın bütün şablonlarındaki renk sınıflarını değişkene çevirmek — devasa, geri dönüşsüz ve "tasarımı bozmama" garantisi verilemez; (b) koyu modda bu sınıfları TEK dosyadan yeniden tanımlamak. (b) seçildi: hiçbir şablona dokunulmaz, yeni eklenen sayfa/tema kendiliğinden kapsanır (§2) ve kapalıyken çıktı BİREBİR aynıdır — bütün kurallar `:is(html.elx-dark, html[data-theme="dark"])` altındadır, o öznitelik yokken bu dosya ölüdür. ─── EN ÖNEMLİ KURAL: ZATEN KOYU OLANA DOKUNULMAZ ────────────────────────────── `text-white`, `bg-gray-900`, `bg-black`, `bg-white/10`, `border-white/10` gibi sınıflar KOYU zeminler için yazılmıştır — koyu bir header'daki beyaz yazı gece modunda da beyaz kalmalıdır. Bunları "ters çevirmek" çalışan tasarımları bozar: koyu şeritteki beyaz başlık koyu griye döner ve okunmaz olur. Bu dosya yalnızca AÇIK yüzeyleri koyulaştırır ve KOYU metinleri açar; ters yöne hiç dokunmaz. ─── İKİ KÖK İŞARETİ ─────────────────────────────────────────────────────────── Kurallar `:is(html.elx-dark, html[data-theme="dark"])` altında yazılır. İkinci işaret, açık/koyu temasını KENDİ yöneten kabuklar içindir (spor portalı: `data-theme` + `sp-theme`). O kabuklar kendi paletlerini CSS DEĞİŞKENLERİYLE kurar; ama sayfalarının bir kısmı Tailwind'in sabit renk sınıflarıyla yazılmıştır (`bg-white border rounded-xl`) ve değişken paleti onları kapsamaz — haber detayında metin kutusu ve "Çok Okunanlar" koyu temada BEYAZ kalıyordu. Aynı eşlemeyi o kabuğa ikinci kez yazmak yerine (§2) buradaki tek liste iki işarete birden açılır. ⚠ `body` kuralları BİLEREK yalnız `html.elx-dark` altındadır: kendi temasını yöneten kabuğun sayfa zeminini ve metin rengini ezmek, onun kendi paletini bozardı. Değişkenler de orada tanımsızdır ve `var(--elx-dk-surface, #151a21)` fallback'leri devreye girer. ─── KAÇIŞ KAPISI ────────────────────────────────────────────────────────────── `.elx-keep-light` taşıyan ağaç gece modundan MUAFTIR (widget ayarı bunu basar). Ürün görseli gibi açık zemin bekleyen bileşenler için gereklidir. ══════════════════════════════════════════════════════════════════════════════ */ /* ─── Kök ──────────────────────────────────────────────────────────────────── */ /* * ⚠ `!important` BURADA ZORUNLUDUR ve tek istisnadır. * * Dikey vitrin kabukları (travel, restaurant, jewelry, rego, recipe, service …) * gövde zeminini tenant'ın `design_bg_color` kolonundan alıp ``e * `body{background:… !important}` olarak basar. Bu, seçici özgüllüğüyle * yenilemez — `:is(html.elx-dark, html[data-theme="dark"]) body` (0,1,1) bile `!important` taşıyan `body`nin * (0,0,1 + !important) altında kalır. * * Ölçüldü: bu satır olmadan 22 sitede (ambar ağı, shish …) düğmeye basılıyor, * `elx-dark` sınıfı geliyor, kartlar koyulaşıyor ama SAYFA ZEMİNİ açık kalıyordu — * yani gece modu yarım çalışıyordu ve bu yalnız hesaplanmış stille görülüyordu. * * Alternatif, o kabukların hepsinden `!important`i kaldırmaktı; ama o satırlar * tenant'ın marka zeminini Tailwind preflight'ına karşı korumak için konmuş ve * kaldırmak AÇIK temada 22 sitenin zeminini bozardı. `!important` yalnız gece * modunda, yalnız kök yüzeyde kullanılır — utility eşlemelerinde KULLANILMAZ * (orada özgüllük yeterlidir ve `!important` widget ayarlarını ezerdi). */ html.elx-dark body { background: var(--elx-dk-bg, #0f1318) !important; /* Aynı kabuklar gövde METNİNİ de `!important` ile basıyor (`color:var(--rg-text) !important`). Zemini koyulaştırıp metni bırakmak, koyu üstüne koyu yazı demekti: ölçülen kontrast 1.27 — okunamaz. İkisi birlikte devralınır. */ color: var(--elx-dk-text, #e6e9ed) !important; } /* Geçiş yalnız renkte; layout özelliklerine geçiş vermek scroll'da titreme yapar. */ html.elx-dark, html.elx-dark body { transition: background-color .18s ease, color .18s ease; } /* ─── AÇIK YÜZEYLER → koyu ─────────────────────────────────────────────────── */ :is(html.elx-dark, html[data-theme="dark"]) :where(.bg-white, .bg-gray-50, .bg-slate-50, .bg-zinc-50, .bg-neutral-50, .bg-stone-50):not(.elx-keep-light, .elx-keep-light *) { background-color: var(--elx-dk-surface, #151a21); } :is(html.elx-dark, html[data-theme="dark"]) :where(.bg-gray-100, .bg-slate-100, .bg-zinc-100, .bg-neutral-100, .bg-stone-100):not(.elx-keep-light, .elx-keep-light *) { background-color: var(--elx-dk-raised, #1c222b); } :is(html.elx-dark, html[data-theme="dark"]) :where(.bg-gray-200, .bg-slate-200, .bg-zinc-200, .bg-neutral-200):not(.elx-keep-light, .elx-keep-light *) { background-color: var(--elx-dk-raised2, #232a34); } :is(html.elx-dark, html[data-theme="dark"]) :where(.bg-gray-300, .bg-slate-300):not(.elx-keep-light, .elx-keep-light *) { background-color: var(--elx-dk-raised3, #2b333f); } /* Gradyan uçları — açık gri gradyanlar koyu modda beyaz bant bırakır. */ :is(html.elx-dark, html[data-theme="dark"]) :where(.from-white, .from-gray-50, .from-slate-50):not(.elx-keep-light, .elx-keep-light *) { --tw-gradient-from: var(--elx-dk-surface, #151a21); } :is(html.elx-dark, html[data-theme="dark"]) :where(.to-white, .to-gray-50, .to-slate-50):not(.elx-keep-light, .elx-keep-light *) { --tw-gradient-to: var(--elx-dk-surface, #151a21); } /* ─── KOYU METİN → açık ────────────────────────────────────────────────────── */ :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-900, .text-slate-900, .text-zinc-900, .text-neutral-900, .text-black):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-text0, #f2f4f7); } :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-800, .text-slate-800, .text-zinc-800, .text-neutral-800):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-text, #e6e9ed); } :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-700, .text-slate-700, .text-zinc-700, .text-neutral-700):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-text2, #d3d8de); } :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-600, .text-slate-600, .text-zinc-600, .text-neutral-600):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-text3, #b5bdc7); } :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-500, .text-slate-500, .text-zinc-500, .text-neutral-500):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-muted, #9aa3ae); } :is(html.elx-dark, html[data-theme="dark"]) :where(.text-gray-400, .text-slate-400, .text-zinc-400, .text-neutral-400):not(.elx-keep-light, .elx-keep-light *) { color: var(--elx-dk-faint, #6f7884); } /* `text-gray-300` çoğunlukla KOYU zemin üstünde soluk metindir (footer). Koyu modda da soluk kalır; açmak footer'ı olduğundan parlak yapardı. Dokunulmaz. */ /* ─── ÇİZGİLER ─────────────────────────────────────────────────────────────── */ :is(html.elx-dark, html[data-theme="dark"]) :where(.border-gray-50, .border-gray-100, .border-slate-100, .border-zinc-100):not(.elx-keep-light, .elx-keep-light *) { border-color: var(--elx-dk-line0, #222933); } :is(html.elx-dark, html[data-theme="dark"]) :where(.border-gray-200, .border-slate-200, .border-zinc-200, .border-neutral-200):not(.elx-keep-light, .elx-keep-light *) { border-color: var(--elx-dk-line, #2a323d); } :is(html.elx-dark, html[data-theme="dark"]) :where(.border-gray-300, .border-slate-300):not(.elx-keep-light, .elx-keep-light *) { border-color: var(--elx-dk-line2, #333c4a); } /* Sınıfsız `border` (Tailwind preflight varsayılan rengi) — açık gri kalırdı. */ :is(html.elx-dark, html[data-theme="dark"]) :where(.divide-gray-100, .divide-gray-200, .divide-slate-200) > :where(*) { border-color: var(--elx-dk-line, #2a323d); } /* ─── FORM ELEMANLARI ──────────────────────────────────────────────────────── */ /* `color-scheme: dark` (palette CSS'inde) tarayıcı varsayılanlarını hâlleder; burada yalnız açıkça beyaz boyanmış alanlar düzeltilir. */ /* ⚠ Onay kutusu ve radyo BAŞTAN HARİÇTİR, sonradan geri alınmaz. Kurala dâhil edilip `background-color:initial` ile geri alındığında kutular koyu zeminde SİYAH KARE olarak çıkıyordu (ölçüldü). Bu denetimlerin çizimini tarayıcı `color-scheme: dark` ile kendisi yapar; üstüne renk basmak onu bozar. */ :is(html.elx-dark, html[data-theme="dark"]) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.elx-keep-light, .elx-keep-light *) { background-color: var(--elx-dk-raised, #1c222b); color: var(--elx-dk-text, #e6e9ed); border-color: var(--elx-dk-line, #2a323d); } :is(html.elx-dark, html[data-theme="dark"]) :where(input, textarea)::placeholder { color: var(--elx-dk-faint, #6f7884); } /* ─── OTOMATİK YÜZEY NORMALLEŞTİRME ────────────────────────────────────────── */ /* * Bu iki sınıfı `elx-dark.js` çalışma anında ekler: koyu moda geçildikten SONRA hâlâ * PARLAK kalan yüzeyleri ve KOYU kalan metinleri bulup işaretler. * * ⚠ NEDEN GEREKLİ: yukarıdaki eşleme yalnız Tailwind'in nötr utility sınıflarını * tanır. Tenant'ların kendi yazdığı tasarımlar rengi çoğu zaman satır içi stille ya * da kendi sınıflarıyla (`.card`, `.hero`, `.panel`) verir — o yüzeyler eşlemeye hiç * takılmaz ve gece modunda beyaz kalırdı (ölçüldü: form kartı, üst şerit, çerez bandı). * Kullanıcının "kendine özel tasarım yapmış tenant da doğru geçmeli" şartı ancak * çalışma anında ölçülerek karşılanır — hangi sınıfın hangi rengi verdiği önceden * bilinemez. * * Sınıflar AÇIK TEMADA ETKİSİZDİR (kurallar `:is(html.elx-dark, html[data-theme="dark"])` altında), bu yüzden tema * geri alınırken temizlemek gerekmez; kalmaları hiçbir şeyi değiştirmez. */ :is(html.elx-dark, html[data-theme="dark"]) .elx-dk-auto-surface:not(.elx-keep-light):not(.elx-keep-light *) { background-color: var(--elx-dk-surface, #151a21) !important; } :is(html.elx-dark, html[data-theme="dark"]) .elx-dk-auto-text:not(.elx-keep-light):not(.elx-keep-light *) { color: var(--elx-dk-text, #e6e9ed) !important; } :is(html.elx-dark, html[data-theme="dark"]) .elx-dk-auto-border:not(.elx-keep-light):not(.elx-keep-light *) { border-color: var(--elx-dk-line, #2a323d) !important; } /* Açık GRADYAN zemin: gradyanın kendisi kapatılır, yerine düz koyu yüzey gelir. `background-color` tek başına yetmez — gradyan onun ÜSTÜNDE çizilir ve zemin görünmez kalırdı. */ :is(html.elx-dark, html[data-theme="dark"]) .elx-dk-auto-gradient:not(.elx-keep-light):not(.elx-keep-light *) { background-image: none !important; background-color: var(--elx-dk-bg, #0f1318) !important; } /* ─── GÖLGELER ─────────────────────────────────────────────────────────────── */ /* Açık tema gölgeleri koyu zeminde görünmez; katman ayrımı çizgiyle verilir. */ :is(html.elx-dark, html[data-theme="dark"]) :where(.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl):not(.elx-keep-light, .elx-keep-light *) { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } /* ─── PLATFORM BİLEŞENLERİ ─────────────────────────────────────────────────── */ /* * Çerez onay bandı ve tercih penceresi rengini yönetim ayarından alır * (`#cc-banner{background:…}` satır içi basılır). O renk AÇIK tema için seçilmiştir; * gece modunda ekranın köşesinde parlayan beyaz bir kart olarak kalıyordu (ölçüldü). * Bu bir tenant tasarımı değil PLATFORM bileşenidir — temayla birlikte gitmelidir. * * Özgüllük: satır içi kural `#cc-banner` (1,0,0), buradaki `:is(html.elx-dark, html[data-theme="dark"]) #cc-banner` * (1,1,0) → bu kazanır. `!important` gerekmez. */ /* * ⚠ BURADA `:where()` KULLANILMAZ — id özgüllüğünü SIFIRLAR. * * Çerez bandı rengini satır içi `