/* =====================================================
   OF PING PON — YÜKLEME EKRANI & SAYFA GEÇİŞ EFEKTİ
   Konsept: iki raket arasında ralli yapan top.
   Perde diyagonal iki panelden oluşur (bordo + lacivert),
   kapanır → top rallisi → açılır.
   ===================================================== */

.gecis-perde{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  visibility:hidden;
}
.gecis-perde.aktif{visibility:visible;pointer-events:all}

/* Diyagonal iki panel */
.gecis-panel{
  position:absolute;top:0;bottom:0;width:60%;
  transition:transform .45s cubic-bezier(.77,0,.18,1);
}
.gecis-panel.sol{
  left:0;background:var(--gece);
  clip-path:polygon(0 0,100% 0,calc(100% - 120px) 100%,0 100%);
  transform:translateX(-110%);
}
.gecis-panel.sag{
  right:0;background:var(--bordo);
  clip-path:polygon(120px 0,100% 0,100% 100%,0 100%);
  transform:translateX(110%);
}
.gecis-perde.kapali .gecis-panel.sol{transform:translateX(0)}
.gecis-perde.kapali .gecis-panel.sag{transform:translateX(0)}

/* Orta sahne: raketler + top */
.gecis-sahne{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:280px;height:120px;
  opacity:0;transition:opacity .2s ease .15s;
}
.gecis-perde.kapali .gecis-sahne{opacity:1}

/* File (net) ortada */
.gecis-file{
  position:absolute;left:50%;top:22px;bottom:26px;width:2px;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 4px, transparent 4px 8px);
  transform:translateX(-50%);
}
/* Masa çizgisi */
.gecis-masa{
  position:absolute;left:0;right:0;bottom:24px;height:3px;
  background:var(--turkuaz);
  box-shadow:0 0 14px rgba(63,182,178,.7);
}

/* Raketler */
.gecis-raket{
  position:absolute;bottom:30px;width:26px;height:34px;
  border-radius:50% 50% 46% 46%;
}
.gecis-raket::after{ /* sap */
  content:'';position:absolute;left:50%;bottom:-12px;
  transform:translateX(-50%);width:7px;height:14px;
  background:#E8DCC8;border-radius:2px;
}
.gecis-raket.sol{
  left:2px;background:var(--bordo-parlak);
  transform:rotate(-18deg);
  animation:raketSol 0.8s ease-in-out infinite;
}
.gecis-raket.sag{
  right:2px;background:var(--turkuaz);
  transform:rotate(18deg);
  animation:raketSag 0.8s ease-in-out infinite;
}
@keyframes raketSol{
  0%,100%{transform:rotate(-18deg) translateY(0)}
  10%{transform:rotate(-34deg) translateY(-4px)}
  25%{transform:rotate(-18deg) translateY(0)}
}
@keyframes raketSag{
  0%,100%{transform:rotate(18deg) translateY(0)}
  60%{transform:rotate(34deg) translateY(-4px)}
  75%{transform:rotate(18deg) translateY(0)}
}

/* Top — soldan sağa ralli, yay çizerek */
.gecis-top{
  position:absolute;bottom:58px;left:24px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.8);
  animation:topX 0.8s cubic-bezier(.45,0,.55,1) infinite;
}
.gecis-top::before{ /* zıplama yayı için dikey hareket ayrı katman */
  content:'';display:block;width:100%;height:100%;border-radius:50%;
}
@keyframes topX{
  0%{left:24px;bottom:58px}
  25%{bottom:86px}
  50%{left:calc(100% - 38px);bottom:58px}
  75%{bottom:86px}
  100%{left:24px;bottom:58px}
}
/* Top gölgesi masada */
.gecis-golge{
  position:absolute;bottom:20px;left:24px;
  width:16px;height:4px;border-radius:50%;
  background:rgba(0,0,0,.45);
  animation:golgeX 0.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes golgeX{
  0%{left:24px;transform:scale(1);opacity:.5}
  25%{transform:scale(.6);opacity:.25}
  50%{left:calc(100% - 38px);transform:scale(1);opacity:.5}
  75%{transform:scale(.6);opacity:.25}
  100%{left:24px;transform:scale(1);opacity:.5}
}

/* Alt yazı */
.gecis-yazi{
  position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);
  font-family:var(--f-cond);font-weight:800;font-size:13px;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);
  white-space:nowrap;
}
.gecis-yazi b{color:var(--turkuaz-parlak)}

/* İlk yükleme: perde kapalı başlar, sayfa hazır olunca açılır */
.gecis-perde.ilk-yukleme{visibility:visible;pointer-events:all}
.gecis-perde.ilk-yukleme .gecis-panel{transition:none}
.gecis-perde.ilk-yukleme.acilis .gecis-panel{transition:transform .55s cubic-bezier(.77,0,.18,1)}
.gecis-perde.ilk-yukleme.acilis .gecis-panel.sol{transform:translateX(-110%)}
.gecis-perde.ilk-yukleme.acilis .gecis-panel.sag{transform:translateX(110%)}
.gecis-perde.ilk-yukleme.acilis .gecis-sahne{opacity:0;transition:opacity .15s}

@media (prefers-reduced-motion:reduce){
  .gecis-perde{display:none!important}
}