/* Kaydirmaya bagli giris animasyonlari. Bu dosya yalnizca baslangic durumunu ve gecisi tanimlar; ogenin acilmasi, yonu ve gecikmesi animasyon.js'in satir ici stilleriyle kontrol edilir. Gizleme yalnizca html.anim altinda gecerli. Sinifi 'deki satir ici betik koyar ve animasyon.js 3 saniye icinde yuklenmezse geri alir: betik gelmese de sayfa tam gorunur. */ /* Sagdan gelen oge kenar boslugunu asip yatay kaydirma doguruyor. hidden degil clip: hidden govdeyi kaydirma kapsayicisina cevirir ve position:sticky tasiyan ogeleri bozar (.header her sayfada sticky). html ve body'ye birlikte yazilmali; yalnizca body'de tanimliyken sayfa saga kaydirilabiliyor. */ html,body{overflow-x:clip} /* Secici listesi animasyon.js icindeki SECICI sabitiyle birebir ayni olmali; tools/animasyon_denetim.py denetliyor. Izgara kalibi "grid-" degil "grid": sitede hem onekli (grid-2) hem sonekli (blog-grid) adlar var. .form-grid disarida - basvuru formunun alanlari tek tek acilsa klavyeyle gezen kullanici henuz gorunmeyen alana atlar. Iki kapsayici sinifi var: .container ve blog yazilarindaki .blog-shell. .article-card, .timeline-wrap ve .ulke-harita-duzen ayri satirlar; olmasalardi cocuklari tek blok halinde birlikte acilirdi. Bu kaliplar genellestirilmemeli: .menu-wrap de ayni ekte ve o header'in navigasyonu. :not(.anim-bitti) sarti :is() sayesinde tek yerde duruyor. Animasyonu biten oge kuralin kapsamindan cikmali; cikmazsa satir ici stil silindiginde yeniden gizlenir, birakilirsa kalici transform:none kartlarin hover yukselmesini oldurur. :is() desteklenmeyen tarayicida kural tumden duser: animasyon olmaz, her sey gorunur kalir. */ html.anim :is( section:not(.page-hero) > :is(.container, .blog-shell) > *:not([class*="grid"]):not(.faq-wrap), [class*="grid"]:not(.form-grid) > *, .article-card > *, .faq-wrap > *, .timeline-wrap > *, .ulke-harita-duzen > *, .section-head, .footer-top > * ):not(.anim-bitti){ opacity:0; transform:var(--anim-t, translateY(40px)); transition:opacity 1.1s cubic-bezier(.25,.46,.45,.94), transform 1.1s cubic-bezier(.25,.46,.45,.94); transition-delay:var(--anim-gecikme, 0ms); } /* Dar ekranda tum yonler asagidan; gridler tek sutuna indigi icin sag/sol ayrimi anlamsizlasiyor. var() bilerek kullanilmiyor ki JS'in verdigi --anim-t burada devre disi kalsin. */ @media (max-width:920px){ html.anim :is( section:not(.page-hero) > :is(.container, .blog-shell) > *:not([class*="grid"]):not(.faq-wrap), [class*="grid"]:not(.form-grid) > *, .article-card > *, .faq-wrap > *, .timeline-wrap > *, .ulke-harita-duzen > *, .section-head, .footer-top > * ):not(.anim-bitti){ transform:translateY(40px); } } /* Hareket kisitliyken hicbir sey gizlenmiyor. animasyon.js de erken cikip html.anim sinifini kaldiriyor; bu blok ikinci ag. */ @media (prefers-reduced-motion:reduce){ html.anim :is( section:not(.page-hero) > :is(.container, .blog-shell) > *:not([class*="grid"]):not(.faq-wrap), [class*="grid"]:not(.form-grid) > *, .article-card > *, .faq-wrap > *, .timeline-wrap > *, .ulke-harita-duzen > *, .section-head, .footer-top > * ):not(.anim-bitti){ opacity:1; transform:none; transition:none; } } /* Yazdirma. IntersectionObserver yazdirma render'inda atesnlenmiyor, yani bu blok olmadan ekran altindaki her sey opacity:0 basilir. beforeprint dinleyicisi yerine CSS: Safari beforeprint'i desteklemiyor. */ @media print{ html.anim :is( section:not(.page-hero) > :is(.container, .blog-shell) > *:not([class*="grid"]):not(.faq-wrap), [class*="grid"]:not(.form-grid) > *, .article-card > *, .faq-wrap > *, .timeline-wrap > *, .ulke-harita-duzen > *, .section-head, .footer-top > * ):not(.anim-bitti){ opacity:1; transform:none; transition:none; } } /* Hero acilista gelir ve JS'i beklemez: hero h1 LCP ogesi ve defer betik inip calisana kadar gizli kalirsa LCP iki katina cikiyor. Saf CSS animasyonu ayni gorunumu veriyor. */ @media (prefers-reduced-motion: no-preference){ /* Hero'nun tamami animasyonlaniyor, h1 ve p dahil. Ic sayfalarin hero'sunda gorunen tek sey baslik ve alt metin; muafiyet o sayfalari tumden animasyonsuz birakiyordu. */ /* h1 muaf: kelimeleri ayri ayri animasyonlaniyor (asagida). Blok olarak da solsaydi opaklik iki kez carpilir, gecis bulanirdi. */ .page-hero-inner > *:not(h1), .hero-box > *:not(h1){ animation: animHeroGiris 1.1s cubic-bezier(.25,.46,.45,.94) both; } /* Hero basligi daktilo ile yaziliyor. Harflere tools/hero_kelime_bol.py yayin oncesi boluyor; tarayicida bolmek hero'yu JS'e baglardi. Metin JS ile yazilmiyor, opacity ile aciliyor: harf harf yazmak basligi buyutup altindaki her seyi asagi iterdi. Butun harfler bastan yerinde, yalnizca gorunmuyorlar - yerlesim sabit, arama motoru ve ekran okuyucu tam basligi goruyor. 28ms adim ortalama baslikta ~2 saniye tutuyor. Sure 1ms + steps: gecis yok, harf ya var ya yok. */ .page-hero-inner h1 .hk, .hero-box h1 .hk{white-space:nowrap} .page-hero-inner h1 .hk > span, .hero-box h1 .hk > span{ /* opacity:0 sart. Keyframe yalnizca to{opacity:1} tanimliyor, ortuk 'from' ogenin o anki degeri; temel deger yazilmazsa 1 olur ve 'both' dolgusu harflerin hepsini bastan gosterir. */ opacity:0; animation: animDaktilo 1ms linear both; animation-delay: calc(var(--i, 0) * 28ms); } /* Imlec yazim bitince belirir, alti kez yanip soner, kaybolur. Surekli yanip sonmuyor: sitede bosta calisan tek hareket harita sinyali. Gecikme --n'den, yani toplam harf sayisindan geliyor. Dolgu 'forwards' - 'both' olsaydi sayfa acilir acilmaz gorunurdu. */ .page-hero-inner h1::after, .hero-box h1::after{ content:""; display:inline-block; width:.07em; height:.82em; margin-left:.08em; vertical-align:-.06em; background:var(--accent); opacity:0; animation: animImlec 520ms steps(1, end) 6 forwards; animation-delay: calc(var(--n, 0) * 28ms + 120ms); } .page-hero-inner > :nth-child(2), .hero-box > :nth-child(2){animation-delay:90ms} .page-hero-inner > :nth-child(3), .hero-box > :nth-child(3){animation-delay:180ms} .page-hero-inner > :nth-child(4), .hero-box > :nth-child(4){animation-delay:270ms} .page-hero-inner > :nth-child(5), .hero-box > :nth-child(5){animation-delay:360ms} .page-hero-inner > :nth-child(n+6), .hero-box > :nth-child(n+6){animation-delay:450ms} } @keyframes animHeroGiris{ from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none} } @keyframes animDaktilo{ to{opacity:1} } @keyframes animImlec{ 0%,49% {opacity:1} 50%,100% {opacity:0} } /* ---- BOLUM BASLIKLARINDA ISIK SUZULUMU ---- Bolum acilirken yazinin uzerinden bir kez parilti geciyor. Yazi bolunmuyor: iki hareket ust uste binince ikisi de okunmaz oluyor. Bostayken baslik degismis gorunmuyor - degradenin band disinda kalan her yeri var(--bg-dark) ve baslangic konumu bandi gorus disinda birakiyor. @supports kapisi sart: yontem color:transparent gerektiriyor, destek yoksa basliklar gorunmez kalirdi. Kapinin icinde tanimli oldugu icin destek yoksa kural tumden duser. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ @media (prefers-reduced-motion: no-preference){ .anim-acildi .section-title{ /* Parilti rengi markanin altini; notr gri-mavi koyu lacivert baslikta zayif kaliyordu. */ background-image:linear-gradient(100deg, var(--bg-dark) 45%, var(--accent) 50%, var(--bg-dark) 55%); background-size:300% 100%; background-position:100% 0; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; color:transparent; animation:animBaslikParilti 1100ms cubic-bezier(.25,.46,.45,.94) 120ms; } } } @keyframes animBaslikParilti{ from{background-position:100% 0} to{background-position:0 0} } /* ---- KART IKONLARI ---- Kartlar hover'da yukseliyor ama icindeki ikon harekete katilmiyordu. Tetikleyici kartin kendisi, ikon degil (":hover > .ikon"). Kart siniflarinin listesi tutulmuyor: liste tutmak, yarin eklenecek bir kart turunde sessizce calismamak demek. [class*="-icon"] yedi sinifi tek satirda topluyor. .icon tire tasimadigi icin kalibin disinda kaliyor ve ayrica yaziliyor; kalibi genisletmek alakasiz bir .icon-* sinifini de kapsardi. Bosta hicbir sey donmuyor - ana sayfadaki harita sinyali sitedeki tek ambient odak, ikinci bir dongu ikisinin de anlamini siler. */ .icon-box, .icon, .service-badge, [class*="-icon"]{ transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s cubic-bezier(.25,.46,.45,.94); } :hover > .icon-box, :hover > .icon, :hover > .service-badge, :hover > [class*="-icon"]{ transform:scale(1.08); box-shadow:0 10px 22px rgba(198,31,54,.16); } /* Kart yerine oturduktan sonra ikon bir kez sisip geri iniyor. Gecikme yok: sinifi animasyon.js kartin girisi bittiginde ekliyor. Sabit bir gecikme kademe suresini bilemedigi icin poplar kartlar gorunmeden once patliyordu. Keyframe 1'den baslayip 1'e donuyor; 0.9'dan baslamak ikonu once kuculten gorunur bir sicrama yaratirdi. Genlik 1.22 hover'in 1.08'inden yeterince uzak. %70'teki 0.94 dipsiz duz bir sisme mekanik duruyordu. */ /* Dolgu yok. Ilk kare ile son kare ayni; 'both' verilseydi animasyon bittikten sonra da transform:scale(1) uygulanir ve animasyon bildirimi normali yendigi icin hover bir daha calismazdi. */ .anim-acildi .icon-box, .anim-acildi .icon, .anim-acildi .service-badge, .anim-acildi [class*="-icon"]{ animation:ikonPop 540ms cubic-bezier(.25,.46,.45,.94); } @keyframes ikonPop{ 0% {transform:scale(1)} 40% {transform:scale(1.22)} 70% {transform:scale(.94)} 100%{transform:scale(1)} } /* Hareket kisitliyken ikisi de kapali. animasyon.js zaten erken cikip anim-acildi sinifini hic olusturmuyor; bu blok ikinci ag. */ @media (prefers-reduced-motion:reduce){ .icon-box, .icon, .service-badge, [class*="-icon"], :hover > .icon-box, :hover > .icon, :hover > .service-badge, :hover > [class*="-icon"]{ transition:none; animation:none; transform:none; } }