/* ============================================================
   Cloud UI Kit — Sayfa Geçiş Animasyonları
   transitions.js #cui-pt-overlay öğesini oluşturur ve sınıfları yönetir:
     • (sınıfsız)   → dinlenme: sayfa görünür, overlay görünmez
     • .is-entering → sayfa yüklenirken: overlay kapalıdan açılır (reveal)
     • .is-leaving  → linke tıklandığında: overlay sayfayı örter, sonra gider
   data-style="..." aktif geçiş stilini seçer.
   ============================================================ */

.cui-pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--cui-pt-overlay, #0A0B0D);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0);
  transition:
    opacity   var(--cui-pt-duration, 500ms) cubic-bezier(.4,0,.2,1),
    transform var(--cui-pt-duration, 500ms) cubic-bezier(.4,0,.2,1),
    clip-path var(--cui-pt-duration, 500ms) cubic-bezier(.4,0,.2,1),
    filter    var(--cui-pt-duration, 500ms) cubic-bezier(.4,0,.2,1);
}
.cui-pt-overlay.is-entering,
.cui-pt-overlay.is-leaving {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Loader çizgisi (tüm stillerde ortak, ortada) ----- */
.cui-pt-loader {
  width: clamp(80px, 12vw, 160px);
  height: 2px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity calc(var(--cui-pt-duration, 500ms) * 0.6) ease;
}
.cui-pt-overlay.is-entering .cui-pt-loader,
.cui-pt-overlay.is-leaving  .cui-pt-loader { opacity: 1; }
.cui-pt-loader span {
  position: absolute; inset: 0;
  background: var(--cui-pt-accent, var(--fs-color-primary, #1e73be));
  transform-origin: left center;
  animation: cui-pt-bar 1.1s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cui-pt-bar {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* ============================================================
   1) FADE — sade saydamlık (varsayılan). Base opacity geçişi yeterli.
   ============================================================ */

/* ============================================================
   2) WIPE-UP — dikey süpürme.
   ============================================================ */
.cui-pt-overlay[data-style="wipe-up"] { transform: translateY(100%); opacity: 1; }
.cui-pt-overlay[data-style="wipe-up"].is-leaving  { transform: translateY(0); }
.cui-pt-overlay[data-style="wipe-up"].is-entering { transform: translateY(-100%); }

/* ============================================================
   3) SLIDE-LEFT — yatay kayan panel.
   ============================================================ */
.cui-pt-overlay[data-style="slide-left"] { transform: translateX(100%); opacity: 1; }
.cui-pt-overlay[data-style="slide-left"].is-leaving  { transform: translateX(0); }
.cui-pt-overlay[data-style="slide-left"].is-entering { transform: translateX(-100%); }

/* ============================================================
   4) CURTAIN — dikey perde (ortadan açılır / kapanır).
   ============================================================ */
.cui-pt-overlay[data-style="curtain"] { opacity: 1; clip-path: inset(0 0 0 0); }
.cui-pt-overlay[data-style="curtain"]:not(.is-leaving):not(.is-entering) {
  clip-path: inset(50% 0 50% 0); pointer-events: none;
}
.cui-pt-overlay[data-style="curtain"].is-leaving  { clip-path: inset(0 0 0 0); }
.cui-pt-overlay[data-style="curtain"].is-entering { clip-path: inset(0 0 0 0); }

/* ============================================================
   5) SPLIT-H — yatay perde (sol/sağ açılır).
   ============================================================ */
.cui-pt-overlay[data-style="split-h"] { opacity: 1; clip-path: inset(0 0 0 0); }
.cui-pt-overlay[data-style="split-h"]:not(.is-leaving):not(.is-entering) {
  clip-path: inset(0 50% 0 50%); pointer-events: none;
}
.cui-pt-overlay[data-style="split-h"].is-leaving  { clip-path: inset(0 0 0 0); }
.cui-pt-overlay[data-style="split-h"].is-entering { clip-path: inset(0 0 0 0); }

/* ============================================================
   6) CIRCLE-REVEAL — merkezden daire açılma/kapanma.
   ============================================================ */
.cui-pt-overlay[data-style="circle-reveal"] { opacity: 1; clip-path: circle(150% at 50% 50%); }
.cui-pt-overlay[data-style="circle-reveal"]:not(.is-leaving):not(.is-entering) {
  clip-path: circle(0% at 50% 50%); pointer-events: none;
}
.cui-pt-overlay[data-style="circle-reveal"].is-leaving  { clip-path: circle(150% at 50% 50%); }
.cui-pt-overlay[data-style="circle-reveal"].is-entering { clip-path: circle(150% at 50% 50%); }

/* ============================================================
   7) ZOOM-BLUR — yakınlaş + bulanıklaş geçiş.
   ============================================================ */
.cui-pt-overlay[data-style="zoom-blur"] { opacity: 1; transform: scale(1); filter: blur(0); }
.cui-pt-overlay[data-style="zoom-blur"]:not(.is-leaving):not(.is-entering) {
  opacity: 0; transform: scale(1.18); filter: blur(14px); pointer-events: none;
}
.cui-pt-overlay[data-style="zoom-blur"].is-leaving  { opacity: 1; transform: scale(1);   filter: blur(0); }
.cui-pt-overlay[data-style="zoom-blur"].is-entering { opacity: 1; transform: scale(1);   filter: blur(0); }

/* ============================================================
   8) BLOCKS — ızgara bloklar sırayla kapanır/açılır.
   JS, overlay içine 12 adet .cui-pt-block ekler.
   ============================================================ */
.cui-pt-overlay[data-style="blocks"] {
  background: transparent !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 1;
}
.cui-pt-overlay[data-style="blocks"] .cui-pt-loader { display: none; }
.cui-pt-overlay[data-style="blocks"] .cui-pt-block {
  background: var(--cui-pt-overlay, #0A0B0D);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform calc(var(--cui-pt-duration, 500ms) * 0.6) ease;
}
/* Dinlenme: bloklar kapalı (sayfa görünür). */
.cui-pt-overlay[data-style="blocks"]:not(.is-leaving):not(.is-entering) { pointer-events: none; }
.cui-pt-overlay[data-style="blocks"]:not(.is-leaving):not(.is-entering) .cui-pt-block { transform: scaleY(0); }
/* Örtme: bloklar dolar. */
.cui-pt-overlay[data-style="blocks"].is-leaving  .cui-pt-block { transform: scaleY(1); }
.cui-pt-overlay[data-style="blocks"].is-entering .cui-pt-block { transform: scaleY(1); transform-origin: bottom; }
/* Kademeli gecikme (JS index'e göre --i set eder). */
.cui-pt-overlay[data-style="blocks"] .cui-pt-block { transition-delay: calc(var(--i, 0) * 30ms); }

/* ============================================================
   9) DIAGONAL — köşegen süpürme (skew + taşan genişlik).
   ============================================================ */
.cui-pt-overlay[data-style="diagonal"] {
  opacity: 1;
  width: 160%; left: -30%; right: auto;
  transform: translateX(100%) skewX(-12deg);
}
.cui-pt-overlay[data-style="diagonal"].is-leaving  { transform: translateX(0)     skewX(-12deg); }
.cui-pt-overlay[data-style="diagonal"].is-entering { transform: translateX(-130%) skewX(-12deg); }

/* ============================================================
   ERİŞİLEBİLİRLİK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cui-pt-overlay { transition-duration: 0ms !important; }
  .cui-pt-overlay .cui-pt-block { transition-duration: 0ms !important; }
  .cui-pt-loader span { animation: none; }
}