/* Sayfa geçişleri: tarayıcının belgeler arası View Transitions özelliği.
   gecis.js her geçişte perde / kesik / daire / kayma türlerinden birini rastgele seçer.
   Desteklemeyen tarayıcıda (Firefox) sayfa normal açılır. */
@view-transition{navigation:auto}

:root{
  --gecis-yellow:#ffca28;--gecis-coral:#ff5a4f;--gecis-ink:#101820;
  --gecis-renk:var(--gecis-yellow);
  --gecis-x:50%;--gecis-y:50%;
}
@property --gecis-delik{syntax:"<percentage>";inherits:false;initial-value:0%}

::view-transition-image-pair(root){background:var(--gecis-renk)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}

/* 1. Perde: renkli panel eski sayfayı örter, arkasından yenisi açılır */
html:active-view-transition-type(perde)::view-transition-old(root){animation:gecis-perde-kapan .42s cubic-bezier(.7,0,.3,1) both}
html:active-view-transition-type(perde)::view-transition-new(root){animation:gecis-perde-acil .48s cubic-bezier(.7,0,.3,1) .38s both}
@keyframes gecis-perde-kapan{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes gecis-perde-acil{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 2. Çapraz kesik: eğik bir kenar mercan şeritle eski sayfayı keser */
html:active-view-transition-type(kesik)::view-transition-old(root){animation:gecis-kesik-kapan .55s cubic-bezier(.76,0,.24,1) both}
html:active-view-transition-type(kesik)::view-transition-new(root){animation:gecis-kesik-acil .6s cubic-bezier(.76,0,.24,1) .16s both}
@keyframes gecis-kesik-kapan{from{clip-path:polygon(0 0,130% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,0 0,-30% 100%,0 100%)}}
@keyframes gecis-kesik-acil{from{clip-path:polygon(130% 0,130% 0,100% 100%,100% 100%)}to{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}

/* 3. Daire: tıklanan noktadan büyüyen renkli bir halka */
html:active-view-transition-type(daire)::view-transition-old(root){animation:gecis-daire-delik .6s cubic-bezier(.65,0,.35,1) both;
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--gecis-x) var(--gecis-y),transparent var(--gecis-delik),#000 calc(var(--gecis-delik) + .5%));
  mask-image:radial-gradient(circle farthest-corner at var(--gecis-x) var(--gecis-y),transparent var(--gecis-delik),#000 calc(var(--gecis-delik) + .5%))}
html:active-view-transition-type(daire)::view-transition-new(root){animation:gecis-daire-acil .62s cubic-bezier(.65,0,.35,1) .2s both}
@keyframes gecis-daire-delik{from{--gecis-delik:0%}to{--gecis-delik:101%}}
@keyframes gecis-daire-acil{from{clip-path:circle(0% at var(--gecis-x) var(--gecis-y))}to{clip-path:circle(150% at var(--gecis-x) var(--gecis-y))}}

/* 4. Sade kayma: eski sayfa solarak yukarı çıkar, yenisi alttan gelir */
html:active-view-transition-type(kayma)::view-transition-image-pair(root){background:none}
html:active-view-transition-type(kayma)::view-transition-old(root){animation:gecis-kayma-cik .3s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(kayma)::view-transition-new(root){animation:gecis-kayma-gel .45s cubic-bezier(0,0,.2,1) .18s both}
@keyframes gecis-kayma-cik{to{opacity:0;transform:translateY(-28px)}}
@keyframes gecis-kayma-gel{from{opacity:0;transform:translateY(36px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}