/* Bi'Tişört Mockup Standardı v6.6.80
   Ana kaynak standardı: 1600 × 1800 px (8:9) */

:root{
  --bt-mockup-ratio:8 / 9;
  --bt-mockup-max-desktop-height:820px;
}

/* Standart 8:9 mockup geldiğinde sahne ürün/renk/ön-arka değişiminde oran değiştirmez. */
.mockup-wrap.bt-mockup-standardized{
  aspect-ratio:var(--bt-mockup-ratio)!important;
  width:var(--mockup-width)!important;
  height:var(--mockup-height)!important;
  max-width:none!important;
  max-height:none!important;
  flex:0 0 auto!important;
  contain:layout paint;
}

/* 8:9 kaynaklarda görsel ve Fabric katmanları aynı koordinat sistemini kullanır. */
.mockup-wrap.bt-mockup-standardized #mockupImg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center center!important;
}

/* Eski oranlı dosyaları geçiş sürecinde esnetmeyiz. */
.mockup-wrap.bt-mockup-legacy-ratio{
  aspect-ratio:auto!important;
}

/* Ürün/renk geçişlerinde ani genişlik-yükseklik sıçramasını görsel olarak yumuşatır. */
.mockup-wrap{
  transition:
    width .16s ease,
    height .16s ease,
    transform .16s ease,
    opacity .14s ease!important;
}

/* Ön/arka yüz küçük görselleri de aynı kutu mantığında dursun. */
.surface-thumb{
  overflow:hidden;
}
.surface-thumb img,
#surfaceFrontThumb,
#surfaceBackThumb{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Çok geniş ekranlarda mockup gereksiz büyümez; merkezde kalır. */
@media(min-width:1600px){
  .mockup-wrap.bt-mockup-standardized{
    max-height:var(--bt-mockup-max-desktop-height)!important;
  }
}

/* Tablet / küçük laptop */
@media(max-width:1050px) and (min-width:641px){
  .mockup-wrap.bt-mockup-standardized{
    max-height:700px!important;
  }
}

/* Mobil sahnede viewport sınırı esas alınır. */
@media(max-width:640px){
  .mockup-wrap.bt-mockup-standardized{
    max-width:100%!important;
  }
}

/* Kullanıcı hareket azaltma tercih ettiyse animasyon kaldırılır. */
@media(prefers-reduced-motion:reduce){
  .mockup-wrap{
    transition:none!important;
  }
}