@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  #siteHeader {
    view-transition-name: so-ust;
  }

  #mobileNav {
    view-transition-name: so-alt;
  }

  html:active-view-transition-type(ileri) #mainProductImage {
    view-transition-name: so-gorsel;
  }

  ::view-transition-group(root) {
    animation-duration: 0.28s;
  }

  html:active-view-transition-type(ileri)::view-transition-old(root) {
    animation: so-cik 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  html:active-view-transition-type(ileri)::view-transition-new(root) {
    animation: so-gir 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  html:active-view-transition-type(geri)::view-transition-old(root) {
    z-index: 1;
    animation: so-don-cik 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  html:active-view-transition-type(geri)::view-transition-new(root) {
    animation: so-don-gir 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  ::view-transition-group(so-gorsel) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-new(so-gorsel):only-child {
    animation: so-gir 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  ::view-transition-old(so-gorsel):only-child {
    animation: so-cik 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .so-bas {
    transform: scale(0.97);
    transition: transform 0.12s ease;
  }

  .so-cizgi {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    background: #244c3a;
    transform-origin: 0 50%;
    animation: so-yuk 2.4s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
    pointer-events: none;
  }
}

@keyframes so-gir {
  from {
    transform: translateX(100%);
  }
}

@keyframes so-cik {
  to {
    transform: translateX(-28%);
    opacity: 0.6;
  }
}

@keyframes so-don-gir {
  from {
    transform: translateX(-28%);
    opacity: 0.6;
  }
}

@keyframes so-don-cik {
  to {
    transform: translateX(100%);
  }
}

@keyframes so-yuk {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.85);
  }
}