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

.parallel-hero-full{
  width:100%;
  min-height:720px;
  background:linear-gradient(180deg,#eef1f5,#d9e1ec);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:120px;
  padding:0 100px;
  overflow:hidden;
}

/* ================= SOL ================= */

.parallel-left{
  width:40%;
}

.parallel-left h1{
  font-size:78px;
  line-height:1.05;
  font-weight:800;
  font-style:italic;
  color:#3a6aa3;
}

.parallel-social{
  margin-top:45px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.parallel-social a{
  width:60px;
  height:60px;
  background:#f2f4f8;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#3a6aa3;
  box-shadow:0 15px 35px rgba(0,0,0,.1);
  transition:.3s ease;
}

.parallel-social a:hover{
  background:#3a6aa3;
  color:#fff;
}

/* ================= SAĞ BLOK ================= */

.parallel-stage{
  width:60%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ================= PANEL WRAPPER ================= */

.small-panels{
  display:flex;
  align-items:flex-end;
  position:relative;
}

/* ================= PANEL ================= */

.small-panels .panel{
  width:420px;
  height:620px;
  position:relative;
  overflow:hidden;
  border-radius:22px;

  transform:skewX(-12deg);
  box-shadow:0 35px 70px rgba(0,0,0,.25);

  transition:transform .45s ease,
             box-shadow .45s ease;
}

/* overlap */
.small-panels .panel + .panel{
  margin-left:-80px;
}

/* ================= GÖRSEL ================= */

.small-panels .panel img{
  position:absolute;
  inset:0;

  width:120%;
  height:100%;
  object-fit:cover;
  object-position:center;

  transform:skewX(12deg);
}

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

.small-panels .panel:hover{
  transform:skewX(-12deg) translateY(-15px);
  box-shadow:0 45px 90px rgba(0,0,0,.35);
  z-index:5;
}

.small-panels .panel:hover img{
  transform:skewX(12deg) scale(1.05);
}
/* ================= GİRİŞ ANİMASYONU ================= */

.small-panels .panel{
  opacity:0;
  transform:skewX(-12deg) translateX(250px);
}

/* Tek tek gecikme */
.small-panels .panel:nth-child(1){
  animation:panelIn .9s cubic-bezier(.22,.61,.36,1) .2s forwards;
}

.small-panels .panel:nth-child(2){
  animation:panelIn .9s cubic-bezier(.22,.61,.36,1) .5s forwards;
}

.small-panels .panel:nth-child(3){
  animation:panelIn .9s cubic-bezier(.22,.61,.36,1) .8s forwards;
}

@keyframes panelIn{
  0%{
    opacity:0;
    transform:skewX(-12deg) translateX(250px);
  }
  70%{
    opacity:1;
    transform:skewX(-12deg) translateX(-15px);
  }
  100%{
    opacity:1;
    transform:skewX(-12deg) translateX(0);
  }
}
/* ================= SOL YAZI ANİMASYON ================= */

.parallel-left h1{
  opacity:0;
  transform:translateY(40px);
  animation:titleIn 1s cubic-bezier(.22,.61,.36,1) .3s forwards;
}

.parallel-left h1 span{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  animation:titleIn 1s cubic-bezier(.22,.61,.36,1) .6s forwards;
}

@keyframes titleIn{
  0%{
    opacity:0;
    transform:translateY(40px);
    filter:blur(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
/* ================= SOSYAL İKON ANİMASYON ================= */

.parallel-social a{
  opacity:0;
  transform:translateY(30px) scale(.8);
}

/* sırayla giriş */
.parallel-social a:nth-child(1){
  animation:iconIn .6s cubic-bezier(.22,.61,.36,1) 1s forwards;
}

.parallel-social a:nth-child(2){
  animation:iconIn .6s cubic-bezier(.22,.61,.36,1) 1.2s forwards;
}

.parallel-social a:nth-child(3){
  animation:iconIn .6s cubic-bezier(.22,.61,.36,1) 1.4s forwards;
}

@keyframes iconIn{
  0%{
    opacity:0;
    transform:translateY(30px) scale(.8);
  }
  70%{
    opacity:1;
    transform:translateY(-5px) scale(1.05);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}