:root {
    --pt-sure: 350ms;
    --pt-sepet-sure: 400ms;
    --pt-easing: cubic-bezier(0, 0, .58, 1); 
}
@view-transition {
    navigation: auto;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: var(--pt-sure);
    animation-timing-function: var(--pt-easing);
}
header.desktop,
header.mobile,
[data-pt-sabit] {
    view-transition-name: pt-header;
}
::view-transition-group(pt-header) {
    animation-duration: 0s;
}
::view-transition-old(pt-header) {
    display: none;
}
::view-transition-new(pt-header) {
    animation: none;
}
html:active-view-transition-type(pt-sepet)::view-transition-old(root) {
    animation: none;
}
html:active-view-transition-type(pt-sepet)::view-transition-new(root) {
    animation: pt-sagdan-gel var(--pt-sepet-sure) var(--pt-easing) both;
}
html:active-view-transition-type(pt-sepet-cikis)::view-transition-new(root) {
    animation: none;
}
html:active-view-transition-type(pt-sepet-cikis)::view-transition-old(root) {
    z-index: 1;
    animation: pt-saga-git var(--pt-sepet-sure) var(--pt-easing) both;
}
@keyframes pt-sagdan-gel {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes pt-saga-git {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
html.pt-yedek body {
    animation: pt-belir var(--pt-sure) var(--pt-easing) backwards;
}
html.pt-yedek.pt-cikis body {
    opacity: 0;
    transition: opacity calc(var(--pt-sure) * .6) var(--pt-easing);
}
@keyframes pt-belir {
    from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    html.pt-yedek body {
        animation: none;
    }
}