/* Sekme gibi üst üste */
.small-panels .panel:nth-child(1){
  left:0;
  z-index:3;
}
.small-panels .panel:nth-child(2){
  left:70px;
  z-index:2;
}
.small-panels .panel:nth-child(3){
  left:140px;
  z-index:1;
}


/* Hover'da öne gelme */
.small-panels .panel.active{
  left:0 !important;
  z-index:10;
  transform:skewX(-12deg) translateY(-15px);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.big-panel{
  width:520px;
  height:620px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.big-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .35s ease, transform .4s ease;
}

.big-panel img.fade{
  opacity:0;
  transform:scale(1.03);
}


.small-panels .panel{
  transform:skewX(-12deg);
  opacity:1 !important;
  animation:none !important;
}

/* overlap kaldır */
.small-panels .panel + .panel{
  margin-left:-60px;
}

/* big panel başlangıçta gizli */
.big-panel{
  display:none;
}
.parallel-stage.active .small-panels .panel{
  transform:skewX(-12deg) scale(.9);
  opacity:.6;
}

.parallel-stage.active .small-panels .panel.active{
  transform:skewX(-12deg) translateY(-20px) scale(1.05);
  opacity:1;
  z-index:10;
}

.parallel-stage.active .big-panel{
  display:block;
  width:600px;
  margin-left:60px;
  animation:bigFade .35s ease;
}

@keyframes bigFade{
  from{opacity:0; transform:translateX(20px);}
  to{opacity:1; transform:translateX(0);}
}

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

  transform:skewX(-12deg);
  opacity:1;
  box-shadow:0 35px 70px rgba(0,0,0,.25);
  transition:.4s ease;
}

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

/* büyük görsel gizli */
.big-panel{
  display:none;
}
.small-panels .panel:hover img{ transform:skewX(12deg) scale(1) !important; }