/* ========================================================================== 12. TELEVİZYON NE DEĞİŞİYOR — VE NEDEN BU ÜÇÜ Televizyon, büyük bir monitör değil. Üç şey aynı anda başka: 1. MESAFE. Ekran 50 santimde değil üç metrede. Aynı piksel, gözde üçte bir açı kaplıyor; yani 16 piksellik bir yazı televizyonda okunmuyor. Google ve Netflix'in kendi kılavuzları 1080p'de gövde metni için 24 piksel diyor. Ölçek bu yüzden 1,5 kat. 2. KENARLAR GÜVENİLİR DEĞİL. Televizyonların çoğu görüntüyü hâlâ biraz kırpıyor (overscan) — kenarda duran bir düğme ekranın dışında kalabiliyor. Bu yüzden her kenarda güvenli pay bırakılıyor. 3. FARE YOK, PARMAK YOK. Tek giriş kumandanın yön tuşları. Yani "şu an neredeyim" sorusunun cevabı her an ekranda görünmek zorunda; `:hover` ise hiç çalışmıyor. ÖLÇEK NEDEN `zoom` DEĞİL — DENENDİ VE BOZDU. İlk yol `html { zoom: 1.5 }` idi: tek satır, her şeyi büyütüyor. ÖLÇÜLDÜ (1920x1080): `zoom` görünüm ölçeğini değiştiriyor ama GÖRÜNTÜ ALANI birimlerini değiştirmiyor — `body { height: 100vh }` hâlâ tam ekranı istiyor, sonuç 1080 piksellik pencerede 1620 piksellik gövde ve taşan bir sayfa oluyordu. Sitenin yazı ölçeği zaten `rem` üstüne kurulu (bkz. tokens.css), yani KÖK YAZI BOYU tek başına bütün tipografiyi taşıyor: 16'dan 24'e çıkmak `--fs-*` değerlerinin hepsini 1,5 katına getiriyor ve `100vh` hiç etkilenmiyor. Boşluklar piksel cinsinden olduğu için onlar ayrıca yazılıyor — aşağıdaki liste tokens.css'tekinin 1,5 katı. NASIL AÇILIYOR: `js/tv.js` gövdeye `tv` sınıfını koyuyor. Kendiliğinden (bilinen televizyon tarayıcıları) ya da elle (`?tv=1`). ========================================================================== */ html.tv { /* Bütün tipografi buradan. 16 → 24 piksel. */ font-size: 24px; /* Boşluklar `px` cinsinden tanımlı, yani kök yazı boyuyla büyümüyorlar; hepsi burada 1,5 katına alınıyor. Oran tipografiyle aynı olmak zorunda, yoksa sayfanın ritmi bozuluyor: yazı büyürken aralar aynı kalırsa her şey birbirine yapışıyor. */ --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 24px; --sp-5: 36px; --sp-6: 48px; --sp-7: 60px; --sp-8: 90px; --sp-9: 120px; /* SAÇ ÇİZGİSİ TELEVİZYONDA YOK HÜKMÜNDE. 1 piksellik bir kenarlık üç metreden görünmüyor; üstelik çoğu televizyon görüntüyü ölçekleyip yumuşattığı için o tek piksel iyice siliniyor. Site kenarlıkların taşıdığı ayrımlara dayanıyor (kart çerçeveleri, ızgara çizgileri) — ikiye çıkmadan o ayrımların hepsi kayboluyor. */ --hair: 2px; /* Köşeler de ölçekle birlikte: 4 piksellik yuvarlaklık 1,5 kat büyümüş bir kartta keskin köşe gibi duruyor. */ --radius-sm: 3px; --radius-md: 6px; /* GÜVENLİ PAY. `vmin` kullanılıyor ki 16:9 ve 21:9 ekranlarda da kenara göre orantılı kalsın. %4, televizyon üreticilerinin en kötü kırpma payına (%5) yakın ama sayfayı ortaya sıkıştırmayan bir değer. */ --tv-edge: 4vmin; } /* ========================================================================== GÜVENLİ ALAN Sayfanın kenara dayanan her parçası içeri alınıyor. Liste kısa, çünkü sitede gerçekten kenara dayanan az sayıda öğe var: üst navigasyon, panel, kapatma düğmeleri ve açılış perdesinin parçaları. `env(safe-area-inset-*)` BURADA İŞE YARAMIYOR: o değerler çentik ve ana ekran çizgisi için ve televizyonda hepsi sıfır. Overscan'in tarayıcıya bildirildiği bir arayüz yok — pay bu yüzden elle veriliyor. ========================================================================== */ html.tv #navbar { margin-top: max(var(--tv-edge), 45px); padding-left: var(--tv-edge); padding-right: var(--tv-edge); } html.tv #hero { padding-left: var(--tv-edge); padding-right: var(--tv-edge); } html.tv .close-btn { top: var(--tv-edge); right: var(--tv-edge); } html.tv #portal-main, html.tv .work-detail-inner { padding-left: max(var(--tv-edge), var(--sp-5)); padding-right: max(var(--tv-edge), var(--sp-5)); } html.tv #intro-hint { bottom: max(var(--tv-edge), 46px); } html.tv #intro-progress { right: max(var(--tv-edge), 24px); } /* ========================================================================== ŞERİT Kartlar televizyonda ekranın çok küçük bir kısmını kaplıyordu: yükseklik `46vh` ile sınırlıyken tavan 460 piksel, yani 1080 piksellik bir ekranda ekranın yarısından azı. Üç metreden bakan biri için bir portfolyo şeridinin işi GÖRÜNMEK; tavan yükseltildi. ========================================================================== */ html.tv .reel-item { height: clamp(320px, 54vh, 760px); margin-right: clamp(24px, 2.4vw, 48px); } /* ========================================================================== ODAK — TELEVİZYONDA ARAYÜZÜN EN ÖNEMLİ PARÇASI Farede imleç, dokunmada parmak var; kumandada ise ekranda "şu an buradasın" diyen tek şey odak halkası. Sitenin kendi `:focus-visible` halkası masaüstü için doğru ölçüde — televizyonda görünmüyor. `:focus` kullanılıyor, `:focus-visible` DEĞİL: tarayıcılar `:focus-visible`i "kullanıcı klavye kullanıyorsa" diye yorumluyor ve televizyon kumandasını her zaman klavye saymıyorlar. Odağın görünmediği bir kumanda arayüzü kullanılamaz; burada her odak görünür. İKİ KATMANLI HALKA: içte sayfanın zemini, dışta metin rengi. Tek renk bir halka, altındaki şey aynı renge yakınsa kayboluyor — iki katman her zeminde kontrast bırakıyor. ========================================================================== */ html.tv a:focus, html.tv button:focus, html.tv [tabindex]:focus { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 8px var(--text); border-radius: var(--radius-md); /* Halka kırpılmasın: kenara yakın bir düğmede dış halka komşusunun altında kalıyordu. */ position: relative; z-index: 2; } /* Şerit kartı odaklandığında halka yerine kartın kendisi büyüyor: kart zaten bir görsel, çevresine halka çizmek onu çerçeveliyor ve küçültüyor. Büyüme `:hover`ın televizyondaki karşılığı. */ html.tv .reel-item:focus { outline: none; box-shadow: 0 0 0 4px var(--text), var(--reel-glow-hover); transform: translateY(-8px) scale(1.03); z-index: 3; } /* Izgara kartı da öyle. */ html.tv .img-card:focus { outline: none; box-shadow: 0 0 0 4px var(--text), var(--lift-2); z-index: 3; } /* ========================================================================== HOVER'IN KAPATILMASI Televizyonda `:hover` hiç düşmüyor ama bazı televizyon tarayıcıları odağı hover gibi de işliyor ve iki etki üst üste biniyor. Site zaten dokunmatik için bir hover susturması taşıyor (bkz. responsive.css); televizyon da aynı kümeye giriyor. ========================================================================== */ html.tv .nav-btn:hover { background: transparent; transform: none; } html.tv .accordion-row:hover { background: transparent; transform: none; } /* ========================================================================== OKUNURLUK Üç metreden ince yazı eriyor. Sitenin ağır tipografisi zaten kalın ama gövde metni ve künyeler değil; onların ağırlığı bir kademe artıyor ve satır arası açılıyor — uzaktan okurken göz satırı kaybetmesin diye. ========================================================================== */ html.tv body { line-height: 1.6; } html.tv .lede, html.tv .cv-line, html.tv .work-body p { font-weight: 450; } /* Uzun metin satırı televizyonda daha da kısa olmalı: göz üç metreden satır başına dönerken yatayda ne kadar az yol alırsa o kadar iyi. */ html.tv .work-body, html.tv .accordion-item > p { max-width: 46ch; }