/* Sadece masaüstü */
@media (min-width: 1200px) {

  /* Ana satır referans olsun */
  .row.productDetail{
    position: relative;
  }

  /* Küçük görselleri serbestleştir */
  .sub-images{
    position: absolute !important;
    right: 0;              /* boş alan */
    top: 220px;            /* yukarı-aşağı ayar noktası */
    width: 420px;          /* boş alan genişliği */
    display: flex !important;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    z-index: 5;
  }

  /* Thumbnail görseller */
  .sub-images img{
    width: 90px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    transition: all .2s ease;
  }

  .sub-images img:hover{
    transform: scale(1.05);
    border-color: #6a1b9a; /* Purple Shoes uyum */
  }

}
@media (min-width: 1200px) {

  /* Referans */
  .row.productDetail{
    position: relative;
  }

  /* Thumb container */
  .sub-images{
    position: absolute !important;
    right: 650px;              /* sağ boşluk – gerekirse 60 / 100 */
    top: 50%;
    transform: translateY(-50%);
    
    display: flex !important;
    gap: 14px;
    align-items: center;
    justify-content: center;

    z-index: 10;
  }

  /* Thumb görseller */
  .sub-images img.thumb-image{
    width: 90px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all .2s ease;
  }

  .sub-images img.thumb-image:hover{
    transform: scale(1.06);
    border-color: #6a1b9a;
  }

}
@media (min-width:1200px){

  .thumb-nav{
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
  }

  .thumb-arrow{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #6a1b9a;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, transform .2s ease;
  }

  .thumb-arrow:hover{
    background: #4a1170;
    transform: scale(1.08);
  }

}
@media (min-width:1200px){

  .thumb-nav{
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 12px;
    z-index: 9999;
  }

  .thumb-arrow{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #6a1b9a;
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }

  .thumb-arrow:hover{
    background:#4a1170;
  }

}
@media (min-width:1200px){

  .image-arrows{
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 80px);
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 20;
  }

  .image-arrow{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(106,27,154,.9);
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .2s ease, background .2s ease;
  }

  .image-arrow:hover{
    background:#4a1170;
    transform: scale(1.1);
  }

}