/*
 * Urun sayfasi mobil fotograf galerisi (2026-10-12).
 *
 * Yapi: #image-zoom-container > .pg-track > .pg-slide > img. Ilk slaytin
 * gorseli #main-image, masaustu buyutec ve kucuk resim kodu onu kullanir.
 *
 * NEDEN AYRI DOSYA: Tailwind derlemesi eski, blade'e yazilan yeni utility
 * siniflari etkisiz kalir. Davranis public/js/product-gallery.js icinde.
 *
 * NEDEN 767.98 px: noktalar md:hidden ile 768 px'te (48rem) kayboluyor, kucuk
 * resim seridi orada aciliyor. Galeri modu ayni sinirda biter. 767 yazilsa
 * 767.5 px gibi kesirli genislikte ne serit ne kaydirma olurdu.
 */

/* Masaustu: yalniz ilk slayt gorunur, gorunum eskisiyle ayni. */
.pg-track,
.pg-slide {
    width: 100%;
    height: 100%;
}

.pg-slide + .pg-slide {
    display: none;
}

@media (max-width: 767.98px) {
    /* NEDEN pan-y: dikey kaydirma tarayicida kalir, sayfa akar. Yatay kaydirma
       ve iki parmak yakinlastirma betige gelir. Yakinlastirilmis gorselde tek
       parmak gorseli gezdirir, o yuzden pg-zoomed iken none. */
    #image-zoom-container.pg-on {
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }

    #image-zoom-container.pg-on.pg-zoomed {
        touch-action: none;
    }

    /* NEDEN KARE KUTU (2026-10-12): dosyalar kare, eski kutu 375x256 gibi
       yatay. Eski kod gorseli kutuya gererek dolduruyordu, makineler basik
       cikiyordu. contain ile gorsel kutunun yuksekligine sigip yanlarda bosluk
       birakti ve kucuk gorundu (sahibin bildirimi). cover denendi: makine
       gorsellerinin yarisinda urun kesiliyordu (olcum 76/144). Kare kutuda
       kare gorsel kutuyu tam doldurur, ne gerilir ne kesilir.
       NEDEN @supports: aspect-ratio olmayan eski Safari'de yukseklik auto
       kalip kutu sifira inerdi. Orada Tailwind h-64 yuksekligi gecerli kalir.
       NEDEN max-height: yatay tutulan dar cihazlarda kutu ekrani asmasin. */
    @supports (aspect-ratio: 1 / 1) {
        #image-zoom-container[data-pg] {
            height: auto;
            aspect-ratio: 1 / 1;
            max-height: 80vh;
        }
    }

    .pg-on .pg-track {
        display: flex;
        transform: translate3d(0, 0, 0);
    }

    .pg-on .pg-track.pg-anim {
        transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .pg-on .pg-slide {
        position: relative;
        display: block;
        flex: 0 0 100%;
        overflow: hidden;
    }

    /* NEDEN contain: dosyalar kare (beyaz zemine oturtulmus), kutu yatay.
       Eski tek gorsel kutuya gerilerek basiliyordu. Masaustu buyutecinin
       hesabi gerilmis gorsele gore oldugu icin bu kural yalniz mobilde.
       NEDEN [data-pg]: betik ertelenmis yukleniyor, kural pg-on sinifini
       beklese ilk boyamada gorsel bir an gerilmis gorunurdu. */
    #image-zoom-container[data-pg] .pg-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pg-on .pg-slide img {
        transform-origin: 0 0;
        -webkit-user-drag: none;
    }

    /* NEDEN: src'siz gorsel alt metnini kutuya yazardi, inene kadar gizli. */
    .pg-slide img[data-src] {
        visibility: hidden;
    }

    .pg-on .pg-slide img.pg-img-anim {
        transition: transform 0.25s ease-out;
    }

    /* Yuklenmekte olan slayt: ince donen halka. Gorsel gelince kalkar. */
    .pg-slide.pg-loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
        border: 3px solid #e5e7eb;
        border-top-color: #9ca3af;
        border-radius: 50%;
        animation: pg-spin 0.8s linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .pg-on .pg-track.pg-anim,
        .pg-on .pg-slide img.pg-img-anim {
            transition: none;
        }

        .pg-slide.pg-loading::after {
            animation: none;
        }
    }
}

@keyframes pg-spin {
    to {
        transform: rotate(360deg);
    }
}