/* ===========================================================
   Fleetexo v117 — Ultra Animasyon Katmanı (eklenti, üzerine yazmaz)
   Bu dosya mevcut tema değişkenlerini (--gold, --bg, --card vb.)
   kullanır, renk/yapı değiştirmez; sadece hareket/geçiş ekler.
   Geri almak için: layout.php'deki tek <link> satırını silmek yeterli.
   =========================================================== */

/* ---- Sayfa giriş geçişi (fade-up) ---- */
body{animation:fxUltraPageIn .55s cubic-bezier(.16,.84,.32,1) both}
@keyframes fxUltraPageIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- Scroll ile beliren elemanlar ---- */
[data-fx-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.84,.32,1), transform .7s cubic-bezier(.16,.84,.32,1);
  will-change:opacity,transform;
}
[data-fx-reveal].fx-in{
  opacity:1;
  transform:translateY(0);
}
[data-fx-reveal="left"]{transform:translateX(-30px)}
[data-fx-reveal="left"].fx-in{transform:translateX(0)}
[data-fx-reveal="right"]{transform:translateX(30px)}
[data-fx-reveal="right"].fx-in{transform:translateX(0)}
[data-fx-reveal="scale"]{transform:scale(.94)}
[data-fx-reveal="scale"].fx-in{transform:scale(1)}

/* Grup içindeki elemanlara otomatik sıralı (stagger) gecikme */
[data-fx-stagger] > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.84,.32,1), transform .6s cubic-bezier(.16,.84,.32,1);
}
[data-fx-stagger].fx-in > *{opacity:1;transform:translateY(0)}
[data-fx-stagger].fx-in > *:nth-child(1){transition-delay:.03s}
[data-fx-stagger].fx-in > *:nth-child(2){transition-delay:.09s}
[data-fx-stagger].fx-in > *:nth-child(3){transition-delay:.15s}
[data-fx-stagger].fx-in > *:nth-child(4){transition-delay:.21s}
[data-fx-stagger].fx-in > *:nth-child(5){transition-delay:.27s}
[data-fx-stagger].fx-in > *:nth-child(6){transition-delay:.33s}
[data-fx-stagger].fx-in > *:nth-child(n+7){transition-delay:.38s}

/* ---- Kart hover mikro-etkileşimi (tema renklerini kullanır) ---- */
.card,.process-step,.mock-window,.ops-floating-card,.highlight-card{
  transition:transform .45s cubic-bezier(.16,.84,.32,1), box-shadow .45s ease, border-color .45s ease;
}
@media(hover:hover){
  .card:hover,.process-step:hover,.highlight-card:hover{
    transform:translateY(-6px);
    border-color:rgba(216,170,69,.32);
    box-shadow:0 36px 90px rgba(0,0,0,.55),0 0 0 1px rgba(216,170,69,.08);
  }
  .mock-window:hover{transform:translateY(-8px)}
}

/* ---- Buton mikro-etkileşim: ışık kayması ---- */
.btn,button:not(.nav-toggle){position:relative;overflow:hidden}
.btn:before,button:not(.nav-toggle):before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .55s ease;
  pointer-events:none;
}
@media(hover:hover){
  .btn:hover:before,button:not(.nav-toggle):hover:before{transform:translateX(120%)}
}
.btn,button{transition:transform .25s cubic-bezier(.16,.84,.32,1), filter .25s ease, box-shadow .25s ease}
.btn:active,button:active{transform:scale(.97)}

/* ---- Sayaç (counter) animasyonu için stil kancası ---- */
[data-fx-counter]{display:inline-block;font-variant-numeric:tabular-nums}

/* ---- Topbar: scroll'da hafif küçülme/derinlik ---- */
.topbar{transition:box-shadow .35s ease, background-color .35s ease}
.topbar.fx-scrolled{box-shadow:0 18px 60px rgba(0,0,0,.45);background:rgba(2,4,7,.92)}

/* ---- Hero görseli hafif yüzme (float) efekti ---- */
@media(prefers-reduced-motion:no-preference){
  .hero-card img,.ops-visual .ops-panel{
    animation:fxUltraFloat 7s ease-in-out infinite;
  }
}
@keyframes fxUltraFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ---- Eyebrow / etiket parıltı vurgusu ---- */
.eyebrow{position:relative}
.eyebrow:after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .8s cubic-bezier(.16,.84,.32,1);
}
[data-fx-reveal].fx-in .eyebrow:after{width:100%}

/* ---- Pill / durum etiketleri için hafif nabız (yalnızca canlı/aktif olanlarda kullanılabilir) ---- */
.pill.fx-pulse{position:relative}
.pill.fx-pulse:before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid currentColor;opacity:.5;
  animation:fxUltraPulse 1.8s ease-out infinite;
}
@keyframes fxUltraPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.18);opacity:0}
}

/* ---- Tablo satırlarının sırayla belirmesi ---- */
.table-wrap table tbody tr{
  opacity:0;transform:translateY(8px);
  animation:fxUltraRowIn .45s cubic-bezier(.16,.84,.32,1) both;
}
.table-wrap table tbody tr:nth-child(n+1){animation-delay:calc(.025s * var(--fx-row-i,0))}

@keyframes fxUltraRowIn{to{opacity:1;transform:translateY(0)}}

/* ---- Yükleniyor durumundaki buton için ince spinner çerçevesi (var olan .is-loading sınıfını genişletir) ---- */
button.is-loading:after{
  content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;
  margin-top:-7px;border:2px solid rgba(5,8,15,.35);border-top-color:rgba(5,8,15,.85);
  border-radius:50%;animation:fxUltraSpin .6s linear infinite;
}
@keyframes fxUltraSpin{to{transform:rotate(360deg)}}

/* ---- Erişilebilirlik: hareket azaltma tercihine kesin saygı ---- */
@media(prefers-reduced-motion:reduce){
  body,[data-fx-reveal],[data-fx-stagger] > *,.hero-card img,.ops-visual .ops-panel,
  .table-wrap table tbody tr,.pill.fx-pulse:before{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
}