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

.zp-section {
    position: relative;
    z-index: 1000;
    height: 140vh;
    width: 100%;
    background-color: transparent;
    opacity: 1 !important; /* Görünürlüğü zorla */
    visibility: visible !important;
}

.zp-section.is-parallax-disabled {
    display: none !important;
}

.zp-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: var(--zp-bg, transparent);
    perspective: 1000px; /* 3D derinlik için */
    z-index: 1001;
}


.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;
    background-color: rgba(255, 255, 255, 0.05); /* Yüklenemezse arka plan göster */
    min-height: 100%;
}

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

.zp-section .star-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.zp-section .star-btn__bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zp-section .star-btn:hover .star-btn__bg {
    opacity: 1;
}

.zp-section .star-btn__label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zp-section .star-btn__arrow {
    transition: transform 0.3s ease;
}

.zp-section .star-btn:hover .star-btn__arrow {
    transform: translateX(4px);
}

.zp-section .star-btn:hover {
    transform: translateY(-2px);
}

.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: 120vh;
        margin-bottom: 0;
    }
    .zp-viewport {
        margin-bottom: 0;
    }
    .zp-star-btn-wrapper {
        bottom: 12%;
    }
    /* 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) */
}