/* =========================================================
   360° PRODUCT VIEWER – FINAL CSS (UPDATED)
   Sprite: 8192 x 566 px
   Frames: 16
   Single Frame: 512 x 566 px
   Ratio: 1 : 1.105
   JS Model: translateX (%)
   ========================================================= */

/* 1️⃣ Ana kapsayıcı */
.cd-product-viewer-wrapper{
  width: 720px;              /* ⬅️ buradan büyüt/küçült */
  max-width: 100%;
  margin: 0 auto;
}

/* 2️⃣ Görüntü sahnesi (YENİ ORAN) */
.cd-product-viewer-wrapper .product-viewer{
  position: relative;
  width: 100%;
  height: 774px;             /* 720 × 1.105 ≈ 796 */
  overflow: hidden;
}

/* 3️⃣ İlk statik görsel (kullanıyorsan) */
.cd-product-viewer-wrapper .product-viewer > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 4️⃣ 360 sprite katmanı */
.cd-product-viewer-wrapper .product-sprite{
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 1600%;              /* 16 frame */

  background-repeat: no-repeat;
  background-size: 100% 100%;

  will-change: transform;
  cursor: grab;
}

/* 5️⃣ Drag cursor */
.cd-product-viewer-wrapper .product-sprite.cd-draggable{
  cursor: grabbing;
}

/* 6️⃣ Handle hizası */
.cd-product-viewer-wrapper .cd-product-viewer-handle{
  margin-top: 20px;
}

/* 7️⃣ Mobil */
@media (max-width: 768px){
  .cd-product-viewer-wrapper{
    width: 100%;
  }

  .cd-product-viewer-wrapper .product-viewer{
    height: 420px;           /* mobil için orantılı */
  }
}