/* Sayfalar arası geçiş (View Transitions, Chrome 126+ / Safari 18.2+). Desteklemeyen tarayıcı normal açar. */
@view-transition{navigation:auto}

.top{view-transition-name:top}
.dock{view-transition-name:dock}

/* Eski sayfa küçülüp kararır, arkada kırmızı zemin görünür, yeni sayfa alttan yukarı silinerek gelir. */
::view-transition{background:var(--red)}
::view-transition-old(root){animation:vtOut .6s cubic-bezier(.7,0,.3,1) both}
::view-transition-new(root){animation:vtIn .8s cubic-bezier(.75,0,.2,1) both .08s}
@keyframes vtOut{to{transform:scale(.9) translateY(-3%);opacity:.25;filter:blur(6px)}}
@keyframes vtIn{from{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

/* Tıklanan ürün görseli yeni sayfadaki ana görsele uçar. */
::view-transition-group(pimg){z-index:10;animation-duration:.8s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(pimg),::view-transition-new(pimg){height:100%;width:100%;object-fit:cover;animation-duration:.8s}

::view-transition-group(top),::view-transition-group(dock){z-index:20;animation:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Destek yoksa ürün sayfası yine de hafif bir girişle açılır. */
@supports not (view-transition-name:none){
  .pdp{animation:pdpIn .6s var(--ease-out) both}
  @keyframes pdpIn{from{opacity:0;transform:translateY(24px)}}
}