/* ============================================================================ ATÖLYE DİLİ — görünüm katmanı ============================================================================ Bu dosya sitenin KARAKTERİNİ değiştirir, yapısını değil. Dört iş yapar: 16 Mono font sistemi — rakam, etiket, teknik veri mono fontla yazılır 18 Keskin köşe — tüm yarıçaplar sıfırlanır (laboratuvar hissi) 19 Kenarlık — gölge yerine 1px çizgi 13 Grain — çok ince doku katmanı NEDEN AYRI DOSYA: Bunlar zevk meselesi. Beğenilmezse inc/ust.php içindeki tek satırı silinir ve site eski görünümüne piksel piksel döner. stil.css'e hiç dokunulmadı; burada geri alınacak bir şey yok. KURALLAR (bozma): 1) Bu dosya yalnızca GÖRÜNÜM ezer — düzen (grid/flex/konum) kuralları stil.css'te kalır. Buraya grid yazarsan katman kaldırıldığında sayfa dağılır, "sadece görünüm değişir" garantisi çöker. 2) Yarıçap sıfırlaması --r-* değişkenleri üzerinden yapılır, tek tek kural ezerek değil. Yeni bileşen de otomatik keskin olur. 3) Yuvarlak KALMASI gerekenler istisna listesinde: avatar, yüzen WhatsApp düğmesi, ilerleme çubuğu, form anahtarı. Kare olunca bozuluyorlar. ========================================================================= */ /* ---------------------------------------------------------------- 18 · Köşe Rossmann kalıbı: --radius 0. Yumuşak "startup" görünümü yerine ölçüm aleti / laboratuvar hissi. Değişkenden ezildiği için stil.css'teki her kural ve ileride eklenecek her bileşen otomatik uyar. */ :root { --r-xs: 0px; --r-s: 0px; --r-m: 0px; --r-l: 0px; --r-xl: 0px; } /* İstisnalar — bunlar kare olunca işlevsel olarak bozuluyor. :where() sıfır özgüllük: stil.css'teki kendi kuralları hâlâ üstte kalır. */ :where(.wa-yuzen, .wa-yuzen span, .avatar, .ilerleme, .ilerleme span, .anahtar, .anahtar::after, .rozet-yuvarlak) { border-radius: 999px; } /* -------------------------------------------------------------- 16 · Mono Üç fontluk sistem: başlık + gövde sistem sans'ı (stil.css), teknik veri mono. "Mühendislik" hissini veren asıl şey bu — rakamın ve etiketin gövde metninden farklı bir dille yazılması. Mono kullanılan yerler bilinçli seçildi: · bölüm etiketleri (.etiket) · ölçüm rakamları (.olcum dt, .sayfa-olcum dt) · model kodu / EMC / teknik künye (.teknik-deger, .model-kod) · süre ve garanti rozetleri (.veri-rozet) · adım numaraları (.adim-no) Gövde metni ASLA mono olmaz — okunurluğu düşürür. */ :where(.etiket) { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } /* Açılış bandının damga levhası ve künye etiketleri. Cümle biçiminde yazıldıkları için büyük harfe çevrilmiyorlar; yalnızca font değişiyor. */ :where(.acilis-ust > span, .acilis-kunye dt) { font-family: var(--mono); letter-spacing: .06em; } /* Eski kahraman bandı 404 sayfasında duruyor; üst etiketi orada da mono. */ :where(.kahraman-ust) { font-family: var(--mono); letter-spacing: .04em; text-transform: none; } :where(.olcum dt, .sayfa-olcum dt, .adim-no, .sonuc-olcu dt) { font-family: var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* Tarih, okuma süresi, teknik künye satırları — rakam içeren küçük metinler. */ :where(.yazi-kunye, .kunye-satir, .model-kunye, .takip-kod) { font-family: var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ 19 · Kenarlık Gölge yerine 1px çizgi. Gölge "yüzen kart" hissi verir; çizgi "çizilmiş plan" hissi verir. İkincisi bir onarım atölyesine daha yakışıyor. Gölge değişkenleri sıfırlanmıyor, ZAYIFLATILIYOR: bazı yerlerde (açılır menü, mobil menü) gölge katman ayrımı için işlevsel. Onlar aşağıda geri veriliyor. */ :where(.kutu, .kart, .katalog-kart, .hizmet-kart, .yazi-kart, .cihaz-kart, .secenek, .adim, .fis, .bilgi-kutu, .sss details, .harita-kutu) { box-shadow: none; border: 1px solid var(--cizgi); } /* Hover: gölge patlaması değil, çizginin koyulaşması + 2px yükselme. scale() ve büyük gölge ucuz görünüyor (araştırma bulgusu). */ :where(.kutu, .katalog-kart, .hizmet-kart, .yazi-kart, .cihaz-kart, .secenek) { transition: border-color .15s ease-out, transform .15s ease-out; } :where(a.kutu, .hizmet-kart, .yazi-kart, .cihaz-kart, .secenek):hover { border-color: var(--murekkep); transform: translateY(-2px); box-shadow: none; } /* Katman ayrımı için gölge ŞART olan yerler — burada geri veriliyor. */ :where(.gez-acilir, .mobil-menu, .bildirim, .tepe.yapisik) { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .07); } /* --------------------------------------------------------------- 13 · Grain Çok ince gürültü dokusu. Düz dijital yüzeyi basılı kâğıda yaklaştırır. Üç kısıt: · Opaklık .028 — görülmemeli, yalnızca hissedilmeli. .05 üstü kirli görünür. · pointer-events: none + tıklama geçirir; z-index düşük tutuldu ki yüzen WhatsApp düğmesi ve mobil çubuk üstünde kalsın. · Koyu yüzeylerde (.koyu, .kahraman, .dip) doku ters çalışıyor — orada kapatılıyor, zaten video/degrade kendi dokusunu taşıyor. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* Doku yalnızca açık zeminde. Koyu bantlar kendi görüntüsünü taşıyor. */ :where(.kahraman, .bolum.koyu, .dip, .tezgah) { position: relative; isolation: isolate; } /* Yüksek piksel yoğunluğunda doku tanesi çok küçülüp titriyor. */ @media (min-resolution: 2dppx) { body::before { background-size: 200px 200px; opacity: .022; } } /* Hareket duyarlılığı: doku sabit, animasyon değil — kalabilir. Ama kontrast tercihinde tamamen kapanmalı. */ @media (prefers-contrast: more) { body::before { display: none; } } /* ---------------------------------------------------- 1 · Künye levhası Açılış bandındaki dört satırlık ilke tablosu. Düzen stil.css'te (ızgara orada tanımlı); burada yalnızca levha karakteri veriliyor: değer satırı biraz daha ağır, çerçevenin plakası biraz daha koyu. Eskiden burada dört ikonlu bir güven şeridi güçlendiriliyordu; şerit yaygın bir kalıp olduğu için kaldırıldı, yerini bu tablo aldı. */ :where(.acilis-kunye dd b) { letter-spacing: -.02em; } :where(.acilis-plaka) { color: var(--murekkep); } /* Klip çerçevesi "çizilmiş plan" dilinde: kenar biraz daha belirgin. */ :where(.acilis-cerceve) { border-color: var(--murekkep); } /* ------------------------------------------------------------ Düğme ritmi Araştırma bulgusu: 300 ms üstü geçişler yavaş/ucuz hissettiriyor. stil.css'teki süreler korunuyor, yalnızca uzun olanlar kısaltılıyor. */ :where(.dugme, .bag, .kutu-ok) { transition-duration: .15s; transition-timing-function: ease-out; }