:root {
    --global-radius: 20px;
}

.zp-section {
    position: relative;
    z-index: 40;
    height: 160vh; /* Animasyonun daha hızlı tamamlanması için düşürüldü */
    width: 100%;
    background-color: #080808;
}

.zp-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #080808;
    perspective: 1000px; /* 3D derinlik için */
}

/* Fade gradients */
.zp-viewport::before,
.zp-viewport::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 160px;
    pointer-events: none;
    z-index: 200;
}
.zp-viewport::before {
    top: 0;
    background: linear-gradient(to bottom, #080808 0%, transparent 100%);
}
.zp-viewport::after {
    bottom: 0;
    background: linear-gradient(to top, #080808 0%, transparent 100%);
}

.zp-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s cubic-bezier(0.2, 0.4, 0.3, 1), opacity 0.2s linear;
    will-change: transform, opacity;
    transform-origin: center center;
    transform-style: preserve-3d;
}

.zp-image-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--global-radius, 20px);
    /* 3D Transformlarda radiusun bozulmasını/kaybolmasını önlemek için: */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.zp-image-box picture {
    display: block;
    width: 100%;
    height: 100%;
}

.zp-image-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit; /* Container radiusunu miras al */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.zp-star-btn-wrapper {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zp-image-box--0 { width: 25vw; height: 25vh; }
.zp-image-box--1, .zp-image-box--2, .zp-image-box--3, 
.zp-image-box--4, .zp-image-box--5, .zp-image-box--6 { aspect-ratio: 9 / 16; }

.zp-image-box--1 { width: 12vw; top: -10vw; left: -20.5vw; }
.zp-image-box--2 { width: 10vw; top: 2vw; left: -34vw; }
.zp-image-box--3 { width: 12vw; top: -12vw; left: 20.5vw; }
.zp-image-box--4 { width: 12vw; top: 10vw; left: 20.5vw; }
.zp-image-box--5 { width: 12vw; top: 12vw; left: -20.5vw; }
.zp-image-box--6 { width: 10vw; top: -2vw; left: 34vw; }

@media (max-width: 768px) {
    :root { --global-radius: 20px; }
    .zp-section { 
        height: 130vh;
        margin-bottom: 0;
    }
    .zp-viewport {
        margin-bottom: 0;
    }
    /* Mobil: Tüm resimler aynı boyutta ve dengeli dağılmış */
    .zp-image-box--0, .zp-image-box--1, .zp-image-box--2, 
    .zp-image-box--3, .zp-image-box--4, .zp-image-box--5, 
    .zp-image-box--6 { 
        width: 30vw; 
        aspect-ratio: 9/16; 
        height: auto;
    }

    .zp-image-box--0 { top: 0; left: 0; } /* Merkez */
    .zp-image-box--1 { top: -30vh; left: -22vw; } /* Sol Üst */
    .zp-image-box--2 { top: 4vh;   left: -38vw; } /* Tam Sol (hafif aşağıda) */
    .zp-image-box--3 { top: -32vh; left: 28vw; }  /* Sağ Üst (daha yukarıda) */
    .zp-image-box--4 { top: 26vh;  left: 20vw; }  /* Sağ Alt */
    .zp-image-box--5 { top: 30vh;  left: -28vw; } /* Sol Alt */
    .zp-image-box--6 { top: -6vh;  left: 36vw; }  /* Tam Sağ (hafif yukarıda) */
}