/* =====================================================
   HERO PANELS
===================================================== */

.hero-panels{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:100px;
    margin-left:-30px;
    position:relative;
    z-index:10;
}

.hero-panel{
    width:380px;
    height:600px;
    overflow:hidden;
    transform:skewX(-12deg);
    margin-right:-90px;

    transition:transform .5s ease, box-shadow .5s ease;

    box-shadow:
        0 45px 80px rgba(0,0,0,.25),
        0 20px 35px rgba(0,0,0,.12);

    position:relative;
    cursor:pointer;

    backface-visibility:hidden;
    transform-style:preserve-3d;
    z-index:20;
}

.hero-panel:last-child{
    margin-right:0;
}

/* panel içindeki görsel */

.hero-panel img{
    position:absolute;
    top:-10%;
    left:-10%;
    width:140%;
    height:130%;
    object-fit:cover;

    transform:skewX(12deg);
    transition:transform .5s ease;
}

.panel-1 img{ left:-20%; }
.panel-2 img{ left:-15%; }
.panel-3 img{ left:-16%; }

/* =====================================================
   HOVER
===================================================== */

.hero-panel:hover{
    transform:skewX(-10deg) scale(1.05);
    z-index:30;
    box-shadow:
        0 60px 100px rgba(0,0,0,.35),
        0 25px 45px rgba(0,0,0,.18);
}

/* =====================================================
   HERO LAYOUT
===================================================== */

.hero-parallax{
    width:100%;
    height:680px;
    display:flex;
    position:relative;
    overflow:hidden;
    background:linear-gradient(to bottom,#f3f3f3 65%,#cfd6df 100%);
}

.hero-stage{
    width:65%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:120px;
    position:relative;
    perspective:1200px;
}

.hero-left{
    width:35%;
    padding:110px 80px;
    position:relative;
    z-index:50;
}

.hero-left h1{
    font-size:64px;
    line-height:1.1;
    font-weight:600;
    color:#2f5d8c;
}

.hero-social{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:25px;
}

/* =====================================================
   BIG BANNER (FIXED)
===================================================== */

.hero-preview{
    position:absolute;
    left:175px;
    top:6%;
    transform:scale(.9);

    opacity:0;
    visibility:hidden;

    pointer-events:auto; /* 🔥 KRİTİK DÜZELTME */
    z-index:100;         /* 🔥 panellerin üstüne çık */
    
    transition:opacity .25s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}

.hero-preview img{
    width:980px;
    display:block;
    filter:drop-shadow(0 40px 80px rgba(0,0,0,.25));
}

/* hover aktif */

.hero-stage.hover-mode .hero-preview{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

/* =====================================================
   PANEL STACK HOVER
===================================================== */

.hero-stage.hover-mode .hero-panels{
    transform:translateX(-80px) scale(.85);
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
}

/* paneller gizlenir */

.hero-stage.hover-mode .hero-panel{
    position:absolute;
    margin-right:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/* aktif panel */

.hero-stage.hover-mode .hero-panel.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(20px) translateY(-35px) skewX(-12deg) scale(1.05);
    z-index:110;
}

/* =====================================================
   IMAGE FIX
===================================================== */

.hero-stage.hover-mode .hero-panel img{
    transform:skewX(12deg) scale(1.05);
}

/* =====================================================
   BANNER STACK (CLICK FIX)
===================================================== */

.hero-banner{
    position:absolute;
    left:0;
    top:0;
    width:980px;

    opacity:0;
    pointer-events:none; /* default kapalı */
}

/* sadece aktif banner tıklanabilir */

.hero-stage.panel-1-active .banner-1,
.hero-stage.panel-2-active .banner-2,
.hero-stage.panel-3-active .banner-3{
    opacity:1;
    pointer-events:auto; /* 🔥 KRİTİK */
}

/* =====================================================
   ARROWS
===================================================== */

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#2f5d8c;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.25);

    opacity:0;
    pointer-events:none;

    transition:.3s;
    z-index:120;
}

.hero-arrow-left{ left:-185px; }
.hero-arrow-right{ right:100px; }

.hero-stage.hover-mode .hero-arrow{
    opacity:1;
    pointer-events:auto;
}

.hero-arrow:hover{
    transform:translateY(-50%) scale(1.1);
}