/* ================= RESET ================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Nunito Sans', sans-serif;
}

body{
  background:#f7f9fd;
}

/* ================= SAHNE ================= */

.parallel-stage{
  display:flex;
  align-items:center;
  gap:36px;
  position:relative;
}

/* ================= PANELLER ================= */

.small-panels{
  display:flex;
  gap:28px;
}

/* PANEL KUTUSU */
.small-panels .panel{
  width:260px;
  height:420px;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  box-shadow:0 22px 48px rgba(0,0,0,.25);

  /* EĞİK FORM */
  clip-path: polygon(
    10% 0,
    100% 0,
    90% 100%,
    0 100%
  );
}

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

/*
  🔑 KRİTİK NOKTA:
  Görsel panelden BÜYÜK
*/
.small-panels .panel img{
  position:absolute;
  top:50%;
  left:50%;

  width:120%;
  height:120%;

  object-fit:cover;

  transform:
    translate(-50%, -50%)
    scale(1.02);

  /* Boşluk ihtimalini sıfırlar */
  pointer-events:none;
}

/* ================= STACK (HOVER) ================= */

.parallel-stage.active .small-panels{
  position:relative;
  width:320px;
  height:520px;
}

.parallel-stage.active .panel{
  position:absolute;
  left:0;
}

.parallel-stage.active .panel:nth-child(1){
  top:0;
  z-index:3;
}

.parallel-stage.active .panel:nth-child(2){
  top:36px;
  left:36px;
  z-index:2;
  opacity:.96;
}

.parallel-stage.active .panel:nth-child(3){
  top:72px;
  left:72px;
  z-index:1;
  opacity:.92;
}

/* ================= BÜYÜK PANEL ================= */

.big-panel{
  width:0;
  height:520px;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  box-shadow:0 45px 90px rgba(0,0,0,.35);
  transition:.6s cubic-bezier(.22,.61,.36,1);
}

.big-panel img{
  width:120%;
  height:120%;
  object-fit:cover;
  transform:translate(-10%, -10%);
}

/* AÇILMA */
.parallel-stage.active .big-panel{
  width:640px;
}

/* ================= RESPONSIVE ================= */

@media (max-width:1000px){

  .parallel-stage{
    flex-direction:column;
  }

  .big-panel{
    width:100%!important;
    height:420px;
  }

  .parallel-stage.active .small-panels{
    position:static;
    width:auto;
    height:auto;
  }

  .parallel-stage.active .panel{
    position:static;
    opacity:1;
  }
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: "Segoe UI", Arial, sans-serif;
}

body{
  background:#fff;
}


/* ================= GÖRSEL OTURMA FIX ================= */

/* Panelin içini sabitle */
.small-panels .panel{
  overflow:hidden;
}

/* Görseli merkeze kilitle */
.small-panels .panel img{
  width:110%;
  height:110%;
  object-fit:cover;
  transform:
    skewX(10deg)
    scale(1.08)
    translateX(-4%)
    translateY(-2%);
}

/* ================= BÜYÜK PANEL ================= */

.big-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}

.big-panel img{
  width:110%;
  height:110%;
  object-fit:cover;
  transform:scale(1.04);
}

/* ================= STACK HALİNDEYKEN ================= */

.parallel-stage.active .small-panels .panel:nth-child(2) img{
  transform:
    skewX(10deg)
    scale(1.05)
    translateX(-3%)
    translateY(-1%);
}

.parallel-stage.active .small-panels .panel:nth-child(3) img{
  transform:
    skewX(10deg)
    scale(1.02)
    translateX(-2%)
    translateY(-1%);
}
/* ================= PANEL TEMİZLEME ================= */

.small-panels .panel{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
  background: transparent;
}

/* Skew efektini pseudo-element ile ver */
.small-panels .panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: skewX(-10deg);
  transform-origin: center;
  z-index: 1;
}

/* GERÇEK GÖRSEL */
.small-panels .panel img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ARTIK SKEW YOK */
  transform: scale(1.05);
}

/* ================= STACK HALİ ================= */

.parallel-stage.active .small-panels .panel:nth-child(2){
  opacity: .95;
}

.parallel-stage.active .small-panels .panel:nth-child(3){
  opacity: .9;
}
/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:"Segoe UI", Arial, sans-serif;
  background:#fff;
}

/* ================= HERO ================= */
.parallel-hero-full{
  width:100%;
  min-height:640px;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#f7f9fd,#eaf1fb);
  overflow:hidden;
}

/* SOL ALAN */
.parallel-left{
  width:30%;
  padding:90px 70px;
}

.parallel-left h1{
  font-size:56px;
  line-height:1.1;
  color:#2a6fb4;
  font-weight:700;
}

/* SAĞ SAHNE */
.parallel-stage{
  width:70%;
  position:relative;
  display:flex;
  align-items:center;
}

/* ================= PANEL GRUBU ================= */
.small-panels{
  display:flex;
  gap:28px;
  position:relative;
}

/* ================= PANEL ================= */
.small-panels .panel{
  position:relative;
  width:280px;
  height:440px;
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}

/* PANEL MASKESİ (EĞİKLİK BURADA) */
.small-panels .panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform:skewX(-10deg);
  transform-origin:center;
  z-index:1;
}

/* ================= GÖRSEL ================= */
.small-panels .panel img{
  position:absolute;
  inset:-8%;                 /* 🔴 KENAR BOŞLUK YOK */
  width:116%;
  height:116%;
  object-fit:cover;
  z-index:2;

  /* 🔴 ASLA SKEW YOK */
  transform:scale(1.05);
}

/* ================= STACK (HOVER) ================= */
.parallel-stage.active .small-panels{
  width:320px;
  height:520px;
}

.parallel-stage.active .panel{
  position:absolute;
  left:0;
}

.parallel-stage.active .panel:nth-child(1){
  top:0;
  z-index:3;
}

.parallel-stage.active .panel:nth-child(2){
  top:40px;
  left:40px;
  z-index:2;
  opacity:.95;
}

.parallel-stage.active .panel:nth-child(3){
  top:80px;
  left:80px;
  z-index:1;
  opacity:.9;
}

/* ================= BÜYÜK PANEL ================= */
.big-panel{
  position:absolute;
  right:0;
  width:0;
  height:520px;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  transition:.6s cubic-bezier(.22,.61,.36,1);
}

.parallel-stage.active .big-panel{
  width:620px;
}

.big-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* ================= PANEL GRUBU ================= */
.small-panels{
  display:flex;
  gap:28px;
  align-items:center;
}

/* ================= PANEL ================= */
.panel{
  width:280px;
  height:440px;
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 20px 45px rgba(0,0,0,.25);

  /* 🔴 GERÇEK ÇÖZÜM */
  clip-path: polygon(
    8% 0%,
    100% 0%,
    92% 100%,
    0% 100%
  );
}

/* ================= GÖRSEL ================= */
.panel img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* ❌ transform YOK */
  /* ❌ scale YOK */
  /* ❌ skew YOK */
}

/* PANEL TEMİZ RESET */

.small-panels .panel::before{
  display:none !important;
}

.small-panels .panel{
  position:relative;
  overflow:hidden;
  border-radius:26px;
}

/* SKEW SADECE PANELDE */
.small-panels .panel{
  transform:skewX(-10deg);
}

/* GÖRSEL TERS SKEW */
.small-panels .panel img{
  position:absolute;
  inset:0;

  width:120%;
  height:120%;

  object-fit:cover;
  object-position:center;

  transform:skewX(10deg) scale(1.1);
}