/* ═══ LIQUID GLASS ═══ Apple iOS cam dilinin web uyarlaması. Dört bileşen: 1) ZEMİN — çok hafif dikey gradyan (camın kendi hacmi, düz renk değil) 2) SPECULAR KENAR — üstte parlak, altta sönük gradyan çerçeve (ışığın cam kenarından yansıması). box-shadow:inset YERİNE background border-box katmanı → gölgesiz kurala uyar. 3) ARKA PLAN — yüksek blur + doygunluk + hafif parlaklık (altındaki renkleri canlandırır) 4) KENAR LENSING — kenar şeridinde ekstra blur (mask ile), camın kalınlık hissi Kullanımı: bir yüzeye `.t52-cam` sınıfı ver. Rail ve hero kutusu bunu kullanır. */ :root{ /* zemin (iç hacim gradyanı) */ --cam-ust:rgba(255,255,255,.78); --cam-alt:rgba(255,255,255,.55); --cam-ust-koyu:rgba(255,255,255,.90); --cam-alt-koyu:rgba(255,255,255,.68); /* specular kenar */ --cam-kenar-ust:rgba(255,255,255,.95); --cam-kenar-orta:rgba(255,255,255,.34); --cam-kenar-alt:rgba(0,0,0,.10); /* arka plan işlemi */ --cam-blur:13px; --cam-doygunluk:190%; --cam-parlaklik:1.03; --rail-h:72px; --rail-r:18px; /* Rail'in ekran tepesinden payı. 14px doğrudan .t52-railwrap'e yazılıydı; yığın bölümü de kendi yapışma noktasını hesaplarken bu sayıya ihtiyaç duyunca token'a çevrildi. İki yerde ayrı ayrı yazılırsa biri değişip öteki kalır — yapışan paneller sessizce rail'in altına girer. */ --rail-ust:14px; } html.dark{ --cam-ust:rgba(38,41,47,.62); --cam-alt:rgba(20,22,26,.44); --cam-ust-koyu:rgba(30,33,38,.80); --cam-alt-koyu:rgba(14,16,19,.66); --cam-kenar-ust:rgba(255,255,255,.30); --cam-kenar-orta:rgba(255,255,255,.10); --cam-kenar-alt:rgba(255,255,255,.04); --cam-blur:14px; --cam-doygunluk:200%; --cam-parlaklik:1.10; } /* ---- .t52-cam ---- yeniden kullanılabilir Liquid Glass yüzeyi ---- */ .t52-cam{ position:relative; background: linear-gradient(180deg, var(--cam-ust), var(--cam-alt)) padding-box, linear-gradient(180deg, var(--cam-kenar-ust) 0%, var(--cam-kenar-orta) 42%, var(--cam-kenar-alt) 100%) border-box; border:1px solid transparent; -webkit-backdrop-filter:blur(var(--cam-blur)) saturate(var(--cam-doygunluk)) brightness(var(--cam-parlaklik)); backdrop-filter:blur(var(--cam-blur)) saturate(var(--cam-doygunluk)) brightness(var(--cam-parlaklik)); transition:background .34s cubic-bezier(.22,1,.36,1),backdrop-filter .34s cubic-bezier(.22,1,.36,1)} /* kenar lensing — yalnız 1.5px'lik kenar şeridinde ekstra bulanıklık (camın kalınlığı) */ /* kenar lensing — ESKİDEN ikinci bir backdrop-filter'dı (blur 5px). Sabit ray altından içerik akarken bu, kare başına İKİNCİ bir arka plan örneklemesi demekti; ölçümde 133 karenin 17'si düşüyordu (p95 53.9ms). Aynı görsel etki bulanıklık olmadan, saydam bir kenar şeridiyle kuruluyor → 0 düşen kare. */ .t52-cam::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; padding:1.5px; background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.14) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude} html.dark .t52-cam::after{ background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,.09) 100%)} /* yoğun hal (scroll'da / üstünde içerik varken) — zemin koyulaşır, cam sertleşir */ .t52-cam.yogun{ background: linear-gradient(180deg, var(--cam-ust-koyu), var(--cam-alt-koyu)) padding-box, linear-gradient(180deg, var(--cam-kenar-ust) 0%, var(--cam-kenar-orta) 42%, var(--cam-kenar-alt) 100%) border-box; -webkit-backdrop-filter:blur(calc(var(--cam-blur) + 4px)) saturate(215%) brightness(var(--cam-parlaklik)); backdrop-filter:blur(calc(var(--cam-blur) + 4px)) saturate(215%) brightness(var(--cam-parlaklik))} @supports not (backdrop-filter: blur(1px)){ .t52-cam{background:var(--surface)} /* cam desteklenmiyorsa düz yüzey */ } .t52-nav .cta, .t52-nav .tglt, .t52-nav .burger, .t52-mob .alt .cta, .t52-mob .alt .wa, .t52-home .hm-hero .btn{position:relative;overflow:hidden;isolation:isolate} .t52-nav .cta > span, .t52-nav .cta > i, .t52-mob .alt .cta > span, .t52-mob .alt .wa > span, .t52-mob .alt .wa > i, .t52-home .hm-hero .btn > span, .t52-home .hm-hero .btn > i, .t52-nav .tglt > i, .t52-nav .burger > i{position:relative;z-index:2} /* Huzme: DAR ve EĞİK bir bant, soldan sağa süpürür. DÖNÜŞÜM SIRASI KRİTİK — CSS transform'ları SAĞDAN SOLA uygulanır: rotate() translateX() → önce öteleme elemanın KENDİ ekseninde olur, sonra 22° döner → hareket çapraz AŞAĞI iner ve bandın üst kısmı butonun dışına taşar, ışık yarım görünür. translateX() rotate() → önce bant eğilir, sonra ÜST kabın ekseninde yatay ötelenir → bant hep dikey ortalı kalır, ışık butonun tam yüksekliğini süpürür. ← doğrusu bu Ayrıca bant %220 yerine %300 yüksekliğinde: 22° eğimde köşeler de dolsun. */ .t52-nav .cta::before, .t52-nav .tglt::before, .t52-nav .burger::before, .t52-mob .alt .cta::before, .t52-mob .alt .wa::before, .t52-home .hm-hero .btn::before{ content:"";position:absolute;top:-100%;bottom:-100%;left:0;width:34%; pointer-events:none;z-index:1;opacity:0; background:linear-gradient(90deg,transparent, rgba(255,255,255,.55),transparent); transform:translateX(-300%) rotate(22deg); transition:opacity .15s ease} .t52-nav .cta:hover::before, .t52-nav .tglt:hover::before, .t52-nav .burger:hover::before, .t52-mob .alt .cta:hover::before, .t52-mob .alt .wa:hover::before, .t52-home .hm-hero .btn:hover::before{opacity:1;animation:t52-supurme .85s ease-out 1} @keyframes t52-supurme{ from{transform:translateX(-300%) rotate(22deg)} to {transform:translateX(620%) rotate(22deg)} } @media(prefers-reduced-motion:reduce){ .t52-nav .cta::before,.t52-nav .tglt::before,.t52-nav .burger::before, .t52-mob .alt .cta::before,.t52-mob .alt .wa::before, .t52-home .hm-hero .btn::before{display:none} } /* ---- BUTON YÜKSEKLİK ÖLÇEĞİ ---- her yerde aynı iki ölçü. Yükseklik SABİT verilir. */ :root{--btn-s:38px; --btn-l:52px} /* ---- RAİL (yüzen kapsül bar) ---- */ /* FONTU AÇIKÇA YAZ · daha önce html/body mirasına güveniyordu ve Tailwind kalkınca Times'a düştü (01.09.2026). Bir daha başkasının mirasına bağlı kalmasın diye kendi ailesini burada tanımlıyor. */ .t52-railwrap{font-family:var(--sans);position:fixed;top:var(--rail-ust);left:0;right:0;z-index:50;padding:0 var(--edge);pointer-events:none} /* ÜÇ SÜTUN · logo | menü | eylemler. Önce flex + space-between'di: logo sola, menü ve eylemler birlikte sağa yaslanıyordu; menünün merkezi ekran merkezinden 364px sapmıştı. 1fr auto 1fr ile yan sütunlar eşit pay alır, orta sütun içeriği kadar yer kaplar ve rail'in tam ortasına oturur — logo ile eylemler farklı genişlikte olsa bile menü kaymaz. Simetri buradan geliyor. */ .t52-rail{pointer-events:auto;height:var(--rail-h);max-width:var(--maxw);margin:0 auto; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:var(--bo-4);padding:0 calc(var(--bo-5) - 1.5px); /* 22.10 · 1,5px çerçeve düşülür: logo tam --metin-kenar çizgisinde (bütün içerik bu çizgiden başlar) */ border-radius:var(--rail-r)} /* cam görünümü .t52-cam'den gelir */ .t52-rail > *{position:relative;z-index:1} /* içerik lensing katmanının üstünde */ /* ---- LOGO (rail içinde, sabit yükseklik → bar zıplamaz) ---- */ .t52-logo{display:flex;align-items:center;gap:var(--bo-3);text-decoration:none;color:var(--fg);flex:none} /* LOGO KİLİDİ · tek parça orijinal SVG, statik. Yükseklikten sürülüyor, genişlik oranı korur (width:auto). Tek boyut verilip öteki serbest bırakılmazsa marka esner — logoda bu affedilmez bir hatadır. 52px seçildi: 243×75 oranında (3.24) genişlik 169px yapıyor; rail ızgarasının sol hücresine oturuyor ve menü ortalaması bozulmuyor. Ayraç ve alt satır artık logonun İÇİNDE — .divline / .word kuralları kalktı. */ .t52-logo .kilit{display:block;height:60px;width:auto;max-width:100%; /* GÜVENLİK KİLİDİ · height sabit + max-width:100% ikilisi kutu daralınca logoyu YATAYDA EZER; ölçüldü, 390px'te 168×52 yerine 76×52 çıkıyordu ve marka fark edilmeden yamuluyordu. object-fit:contain kutu ne olursa olsun oranı korur, taşırmaz. Dar ekranda ölçü ayrıca genişlikten sürülüyor (aşağıya bak) — bu satır yine de son savunma hattı olarak duruyor. */ object-fit:contain;object-position:left center} /* Zemine göre doğru mürekkep. Görünürlük display ile değil, DOSYA seçimiyle: yanlış olan hiç boyanmasın diye ikisi de yerinde ama biri kapalı. */ .t52-logo .kilit.koyu{display:none} html.dark .t52-logo .kilit.acik{display:none} html.dark .t52-logo .kilit.koyu{display:block} /* ---- NAV ---- hover = zemin dolgusu, ölçü sabit ---- */ /* display:contents · nav kutusu yerleşimden çekilir, çocukları (.baglar ve .t52-eylem) doğrudan rail ızgarasının hücrelerine oturur. Böylece HTML'deki anlamlı