/* ========================================================================== NEO SERVİS — TEMA KATMANI (koyu tema) Bu dosya EK bir katmandır. inc/ust.php'deki tek satırı silinirse site bugünkü tek temalı hâline döner; stil.css veya atolye.css içinde geri alınacak hiçbir şey yoktur. --------------------------------------------------------------------------- NEDEN BÖYLE YAZILDI — stil.css'teki tarih notu (bkz. "18 Tema kilidi") Sitede bir zamanlar `@media (prefers-color-scheme: dark)` bloğu vardı ve işletim sistemi koyu moddayken bütün sayfa kontrolsüz siyaha dönüyordu: tasarımın seçmediği yerler de karardığı için kartlar zemine gömülüyor, formlar okunmuyordu. O blok kaldırıldı ve `:root { color-scheme: light }` yazıldı. Bu katman aynı hatayı tekrarlamıyor, çünkü: 1) Renk MEDYA SORGUSUNA değil, ÖZNİTELİĞİNE bağlı. Cihaz tercihi yalnızca ilk açılışta bir başlangıç değeri öneriyor; kararı ziyaretçi (ve varsayılan olarak tasarım) veriyor. 2) Tarayıcının kendi kararına bırakılan hiçbir şey yok: jetonların tamamı burada AÇIKÇA yeniden tanımlanıyor. 3) `color-scheme` de temayla birlikte dönüyor — bu satır olmadan koyu temada açılır kutular, kaydırma çubuğu ve otomatik doldurulan form alanları açık kalıp sayfayla çakışıyor. --------------------------------------------------------------------------- AKSAN ÖLÇEĞİ KOYU TEMADA TERSTİR — kritik Açık temada ölçek koyulaşarak yükselir (50 en açık, 950 en koyu) ve stil.css bu sırayı varsayar: `.dugme` zemini --aksan-600, üzerine gelince --aksan-700 (yani DAHA KOYU). Koyu temada aynı sıra korunsaydı düğme üzerine gelince kararıp kaybolurdu. Bu yüzden koyu temada ölçek AÇILARAK yükselir. Böylece stil.css'teki "bir tık yukarısı = vurgulu hâli" varsayımı tersine çevrilmeden çalışır: büyük sayı her iki temada da "daha vurgulu" demektir, "daha koyu" değil. İKİNCİ SONUÇ: koyu temada aksan artık PARLAK. Üstüne beyaz yazı okunmaz. Aksanı zemin olarak kullanan üç yer (düğme, adım numarası, işaretli kutu) aşağıda koyu mürekkebe çevriliyor. Aksanı sadece nokta/çizgi olarak kullanan yerlere dokunulmuyor — onlarda parlaklık zaten istenen şey. ========================================================================== */ /* == Açık tema — yalnızca yeni jeton ================================== */ /* Kart zemini stil.css'te --yuzey-1'di, yani gövde zeminiyle AYNI; kartı sadece kenarlık ayırıyordu. Açık temada bu doğru (beyaz üstüne beyaz kart kasıtlı bir sadelik), koyu temada değil: karanlıkta kenarlık tek başına yetmiyor, kart zeminden bir ton kalkmalı. Ayrı jeton bu yüzden var. Açık temadaki değeri bilerek --yuzey-1: görünüm değişmiyor. */ :root { --kart-zemin: var(--yuzey-1); } /* == Koyu tema — jetonlar ============================================= */ [data-tema="koyu"] { color-scheme: dark; /* Aksan — ters ölçek, yukarısı daha parlak (bkz. başlık notu) */ --aksan-50: #071322; --aksan-100: #0a1c30; --aksan-200: #12314f; --aksan-300: #1b4675; --aksan-400: #2f6fb8; --aksan-500: #4a93e2; --aksan-600: #6aabf0; /* birincil */ --aksan-700: #8cc0f6; /* üzerine gelince */ --aksan-800: #b0d5fa; --aksan-900: #d0e7fd; --aksan-950: #e8f3ff; --aksan-rgb: 106, 171, 240; /* Yüzeyler — gövde --yuzey-1, çukur bölümler --yuzey-2 (açık temadaki ilişkinin aynısı: "gri bölüm" gövdeden bir ton geride). RENKLER NÖTR, KLİPTEN ALINDI (2026-08-24). Önceki ölçek mavi tonluydu (--yuzey-1 #0f141b); açılış bandının zemini ise klibin kendi stüdyo zemininden üretiliyor ve TAM NÖTR gri (üst 28, alt 15 — bkz. patlak.css'teki --patlak-ust/--patlak-alt). İki zemin yan yana gelince bant sayfanın üstünde ayrı bir mavi levha gibi duruyordu; bandın alt kenarındaki geçiş de --yuzey-1'e açıldığı için tam orada renk atıyordu. Gövde = #151515: klibin YAN kenarının ölçülen değeri (21). Bandın altı #0f0f0f'ten buraya açılıyor, fark 6 birim — geçiş görünmüyor. Basamaklar eski ölçeğin aralıklarıyla aynı, sadece mavi çıkarıldı; --sis-2 kontrastı yeniden hesaplandı (kart 4,89 / gövde 5,36 / gri 5,58 — üçü de AA eşiğinin üstünde). */ --siyah: #090909; --yuzey-1: #151515; --yuzey-2: #101010; --yuzey-3: #0d0d0d; --kart-zemin: #1e1e1e; /* Metin. --ters ve --ters-sis DEĞİŞMEZ: ikisi de "koyu zeminin üstündeki yazı" demek ve koyu temada o zeminler hâlâ koyu. Ters çevrilirse kahraman bandındaki ve alt bilgideki yazı yok olur. */ --murekkep: #e8edf4; --sis: #98a2b1; /* Açık temadaki --sis-2'nin birebir koyu karşılığı (#8b8d95) kart zemininde 4,5:1'in altında kalıyordu (ölçüm: 3,63). Bu jeton en soluk yardımcı metin için kullanılıyor — küçük punto olduğu için asıl AA eşiğini geçmesi gereken yer burası. Kart / gövde / gri zeminde sırasıyla 4,98 – 5,42 – 5,60. */ --sis-2: #828c99; --cizgi: #292929; --cizgi-koyu: #383838; /* Durum renkleri — koyu zeminde okunur tonlar, zeminleri koyu tint */ --yesil: #4ade80; --yesil-z: #0d2a1c; --kirmizi: #f87171; --kirmizi-z:#2e1512; --sari: #fbbf24; --sari-z: #2a2110; /* Gölge karanlıkta görünmez; katmanları koyulaştırmak yerine daha derin siyaha çekiyoruz, ayrışmayı asıl kenarlık ve kart zemini yapıyor. */ --golge-0: 0 1px 2px rgba(0, 0, 0, .5); --golge-1: 0 4px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4); --golge-2: 0 18px 48px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .45); } /* == Koyu tema — jetonla çözülemeyen yerler =========================== */ /* Kart zemini. Seçici listesi stil.css'teki tek kart reçetesinin aynısı (bkz. "08 Kartlar"); oraya yeni bir kart türü eklenirse buraya da eklenmeli. */ [data-tema="koyu"] .kutu, [data-tema="koyu"] .hizmet-kart, [data-tema="koyu"] .cihaz-kart, [data-tema="koyu"] .yazi-kart, [data-tema="koyu"] .katalog-kart, [data-tema="koyu"] .bilgi-kart, [data-tema="koyu"] .adim, [data-tema="koyu"] .fis, [data-tema="koyu"] .sihirbaz, [data-tema="koyu"] .yazar-kutu, [data-tema="koyu"] .harita-kutu, [data-tema="koyu"] .secenek, [data-tema="koyu"] .yontem-adim { background: var(--kart-zemin); } /* Bilerek koyu bandın (kahraman, .koyu) İÇİNDEKİ kartlar hariç: onlar zaten yarı saydam beyazla çiziliyor, opak zemin verilirse banttan kopuyorlar. */ [data-tema="koyu"] .kahraman .kutu, [data-tema="koyu"] .kahraman .bilgi-kart, [data-tema="koyu"] .koyu .kutu, [data-tema="koyu"] .koyu .bilgi-kart, [data-tema="koyu"] .koyu .adim { background: rgba(255, 255, 255, .05); } /* --murekkep ZEMİN olarak kullanılan yerler. Koyu temada mürekkep açık bir renk; üstündeki #fff / --ters yazı görünmez olur. Üçü de tersine çevriliyor: açık blok + koyu yazı. Bu aynı zamanda referans tasarımdaki "parlak düğme, koyu etiket" davranışının kendisi. */ [data-tema="koyu"] .atla, [data-tema="koyu"] .dugme.murekkep, [data-tema="koyu"] .suzgec button[aria-pressed="true"] { background: var(--murekkep); border-color: var(--murekkep); color: #0b1119; } [data-tema="koyu"] .dugme.murekkep:hover { background: #fff; border-color: #fff; color: #0b1119; } /* Aksan ZEMİN olarak kullanılan yerler — parlak aksanın üstüne koyu mürekkep. .dugme'nin yazı rengi stil.css'te #fff olarak sabit yazılmış, jetonla çözülemiyor. .hat ve .sade DIŞARIDA BIRAKILIYOR: ikisinin de zemini yok. Kural onları da kapsayınca koyu temada koyu yazı koyu zemine düşüyor ve düğme kayboluyordu (ölçüm: sihirbazın "Geri" ve "Bu Hizmetin Sayfası" düğmelerinde kontrast 1,12). İkisi renklerini stil.css'teki kendi kurallarından alır. */ [data-tema="koyu"] .dugme:not(.hat):not(.sade), [data-tema="koyu"] .adim-no, [data-tema="koyu"] .koyu .adim-no { color: #0b1119; } /* İşaretli kutucuğun tiki --ters (beyaz) çiziliyor; parlak aksan zeminde kayboluyor. */ [data-tema="koyu"] .hazirlik-kutu:checked::before { border-left-color: #0b1119; border-bottom-color: #0b1119; } /* Marka işareti zemini --siyah; koyu temada gövde de koyu olduğu için yonga simgesi görünmez oluyordu. Tersine çevriliyor: açık yonga, koyu çizim. */ [data-tema="koyu"] .marka-im { background: var(--murekkep); color: #0b1119; } /* atolye.css'in ince doku katmanı açık zemin için ayarlanmış (%2,2). Koyu zeminde aynı doku görünmüyor; biraz açılıyor. */ [data-tema="koyu"] body::before { opacity: .035; } /* Buzlu cam şeritler. İkisinin de zemini stil.css'te SABİT beyaz yazılmış (bkz. .tepe ve .eylem-cubugu) — jeton değil, o yüzden temayla dönmüyordu: koyu temada üst şerit beyaz bir levha olarak kalıyor, üstündeki açık yazı okunmuyordu. Aynı saydamlık oranı korunarak koyuya çevriliyor; blur olduğu gibi duruyor, altından geçen içerik hâlâ seziliyor. */ [data-tema="koyu"] .tepe { background: rgba(21, 21, 21, .82); } [data-tema="koyu"] .eylem-cubugu { background: rgba(21, 21, 21, .93); } /* Dar ekranda stil.css blur'u kapatıp opak --yuzey-1 veriyor; o jeton zaten döndüğü için orada ek bir şey gerekmiyor. */ /* İç sayfaların üst bandındaki ışık huzmesi stil.css'te AKSAN rengiyle çiziliyor (bkz. .sayfa-basi::before) — açık temada beyaz sayfanın üstünde duran koyu bandı markaya bağlayan bir vurgu. Koyu temada sayfanın tamamı nötr gri olduğu için o mavi huzme tek başına kalıyor, bant sayfadan kopmuş mavi bir levha gibi duruyordu. Yerine açılış bandındaki klibin KENDİ ışığı kullanılıyor: 72,72,79 — patlak.css'teki --patlak-isik'in aynısı, klibin üst ortasındaki yumuşak aydınlanmanın ölçülen tepe rengi. Böylece iç sayfaların üst bandı ana sayfadaki bandın devamı gibi okunuyor. */ [data-tema="koyu"] .sayfa-basi::before { background: radial-gradient(64% 120% at 8% 0%, rgba(72, 72, 79, .55) 0%, transparent 62%); } /* Aynı gerekçe: kahraman bandının zemini #0b0c11 ile mavi başlıyordu. */ [data-tema="koyu"] .kahraman-arka { background: linear-gradient(180deg, #131313 0%, var(--siyah) 100%); } /* Açılır gezinti panosu --yuzey-1'di, yani koyu temada sayfayla AYNI renk: havada duran bir pano ama zeminden ayrışmıyor. Kart zeminine alınıyor. */ [data-tema="koyu"] .gez-acilir { background: var(--kart-zemin); } /* stil.css koyu bandın içindeki fişi bilerek --yuzey-1 yapıyor: karanlık bandın üstünde BEYAZ bir kâğıt. Koyu temada --yuzey-1 de koyulaştığı için kâğıt banda gömülüyordu; kart zeminiyle geri kaldırılıyor. */ [data-tema="koyu"] .koyu .fis, [data-tema="koyu"] .kahraman .fis { background: var(--kart-zemin); } /* Görsel/video yüklenene kadar görünen açık gri dolgu. Koyu temada yükleme anında beyaz bir dikdörtgen çakıyordu. */ [data-tema="koyu"] .sayfa-basi-medya, [data-tema="koyu"] .cihaz-resim, [data-tema="koyu"] .secenek-resim { background: #232323; } /* == Tema düğmesi ===================================================== */ /* Üst şeritte telefon ile "Randevu Al" arasında duruyor. İki simge de kutunun içinde; hangisinin görüneceğine tema karar veriyor — böylece düğme, basınca NE OLACAĞINI değil, o an NEREDE OLDUĞUNU göstermiyor; tersi kafa karıştırıcı olurdu. */ .tema-dugme { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--cizgi-koyu); border-radius: 100px; background: none; color: var(--murekkep); cursor: pointer; transition: border-color var(--hiz), background var(--hiz), color var(--hiz); } .tema-dugme:hover { background: var(--yuzey-2); border-color: var(--murekkep); } .tema-dugme:focus-visible { outline: 2px solid var(--aksan-600); outline-offset: 2px; } .tema-dugme svg { width: 18px; height: 18px; display: block; } /* Görünen simge temaya bağlı. Betik çalışmazsa data-tema hiç yazılmaz ve varsayılan olarak ay simgesi kalır. */ .tema-dugme .tema-gunes { display: none; } [data-tema="koyu"] .tema-dugme .tema-gunes { display: block; } [data-tema="koyu"] .tema-dugme .tema-ay { display: none; } /* 861–1080 arasında stil.css .tepe-eylem'i zaten gösteriyor (telefon açık, "Randevu Al" gizli); tema düğmesi telefonun yanında kendiliğinden çıkıyor, burada yapılacak bir şey yok. 861'in ALTINDA ise stil.css .tepe-eylem'i tamamen gizliyor — telefon da "Randevu Al" da menünün içine giriyor. Tema düğmesi menünün içinde değil ve orada olmamalı: menüyü açmadan, tek dokunuşla erişilebilmesi gereken bir kontrol. Bu yüzden kutu geri açılıp içinden YALNIZCA tema düğmesi gösteriliyor; telefon ve düğme gizli kalmaya devam ediyor. */ @media (max-width: 860px) { .tepe-eylem { display: flex; order: 2; margin-left: auto; } /* Dil düğmesi de tema düğmesi gibi menünün DIŞINDA kalıyor: ikisi de menüyü açmadan tek dokunuşla erişilmesi gereken kontroller. */ .tepe-eylem > :not(.tema-dugme):not(.dil-dugme) { display: none; } /* .menu-dugme'nin kendi margin-left: auto'su var; kutu zaten sağa yaslandığı için ikisi üst üste binerse düğmeler ayrılıyor. */ .menu-dugme { order: 3; margin-left: 10px; } /* Dar ekranda yer kazanmak için düğme yalnız dil koduna iner. */ .dil-dugme { padding: 0 10px; gap: 5px; } .dil-dugme svg { display: none; } } /* == Dil düğmesi ====================================================== */ /* Tema düğmesinin hemen yanında, aynı yükseklikte.