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

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

.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:50;
}

.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%; }


/* =====================================================
   HERO PANEL HOVER
===================================================== */

.hero-panel:hover{
transform:skewX(-10deg) scale(1.05);
z-index:60;

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
===================================================== */

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

opacity:0;
visibility:hidden;
pointer-events:none;

transition:opacity .25s ease, transform .6s cubic-bezier(.22,.61,.36,1);

z-index:30;
}

.hero-preview img{
width:980px;
display:block;
transition:opacity .2s ease;

filter:drop-shadow(0 40px 80px rgba(0,0,0,.25));
}

/* hover olunca banner görünür */

.hero-stage.hover-mode .hero-preview{
opacity:1;
visibility:visible;
pointer-events:auto;
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);
}

/* tüm paneller gizlenir */

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

/* sadece aktif panel görünür */

.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:100;
}


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

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

.hero-panel,
.hero-preview{
backface-visibility:hidden;
transform-style:preserve-3d;
}


/* =====================================================
   BANNER STACK
===================================================== */

.hero-banner{
position:absolute;
left:0;
top:0;
width:980px;
opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}

/* aktif banner */

.hero-stage.panel-1-active .banner-1{opacity:1;}
.hero-stage.panel-2-active .banner-2{opacity:1;}
.hero-stage.panel-3-active .banner-3{opacity:1;}









/* =====================================================
   HERO 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);
}



/* BIG BANNER WHITE BACKGROUND FIX */

.hero-preview{
background:transparent !important;
}

.hero-banner{
background:transparent !important;
}

.hero-preview img{
background:transparent !important;
mix-blend-mode:multiply;
}


.hero-banner{
    pointer-events:auto;
    cursor:pointer;
}

/* BANNER YUKARI AL */

.hero-preview{
top:-40px !important;
transform:scale(.9) !important;
}

.hero-stage.hover-mode .hero-preview{
top:-40px !important;
transform:scale(1) !important;
}
.hero-preview{
    position:absolute;
    z-index:1;
}

.hero-arrow{
    position:absolute;
    z-index:999;
    cursor:pointer;
}

.hero-social a{
    font-size: 22px;          /* ikon boyutu */
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(255,255,255,0.15);

    transition: 0.3s;
}