/* =============================================================
   Fleetexo v118 — Tam Animasyon Sistemi
   Eklenti katmanı: mevcut stillere dokunmaz, üzerine ekler.
   Geri almak için layout.php'deki 2 satırı silmek yeterli.
   ============================================================= */

/* ── 1. SAYFA GİRİŞ GEÇİŞİ ─────────────────────────────────── */
body { animation: fx-page-in .6s cubic-bezier(.16,.84,.32,1) both }
@keyframes fx-page-in {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0)    }
}

/* ── 2. CANVAS ARKA PLAN (parçacık/3D) ──────────────────────── */
#fx-canvas-bg {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; display:block;
  width:100%; height:100%;
}
/* Canvas'ın üzerindeki tüm içerik */
.topbar, main, .footer, .site-footer { position:relative; z-index:2 }
.site-bg { z-index:1 }

/* ── 3. SCROLL REVEAL ────────────────────────────────────────── */
[data-fx]{
  opacity:0;
  transition:
    opacity  .75s cubic-bezier(.16,.84,.32,1),
    transform .75s cubic-bezier(.16,.84,.32,1),
    filter   .75s ease;
  will-change: opacity, transform;
}
[data-fx]:not([data-fx-from]) { transform: translateY(28px) }
[data-fx][data-fx-from="left"]  { transform: translateX(-36px) }
[data-fx][data-fx-from="right"] { transform: translateX(36px) }
[data-fx][data-fx-from="scale"] { transform: scale(.92); transform-origin:center }
[data-fx][data-fx-from="down"]  { transform: translateY(-24px) }
[data-fx].fx-visible { opacity:1; transform:none; filter:none }

/* Stagger grup */
[data-fx-group] > * {
  opacity:0; transform:translateY(22px);
  transition: opacity .6s cubic-bezier(.16,.84,.32,1), transform .6s cubic-bezier(.16,.84,.32,1);
}
[data-fx-group].fx-visible > * { opacity:1; transform:none }
[data-fx-group].fx-visible > *:nth-child(1)  { transition-delay:.03s }
[data-fx-group].fx-visible > *:nth-child(2)  { transition-delay:.09s }
[data-fx-group].fx-visible > *:nth-child(3)  { transition-delay:.15s }
[data-fx-group].fx-visible > *:nth-child(4)  { transition-delay:.21s }
[data-fx-group].fx-visible > *:nth-child(5)  { transition-delay:.27s }
[data-fx-group].fx-visible > *:nth-child(6)  { transition-delay:.33s }
[data-fx-group].fx-visible > *:nth-child(n+7){ transition-delay:.39s }

/* ── 4. KART & PANEL HOVERları ───────────────────────────────── */
.card, .process-step, .mock-window,
.highlight-card, .timeline-item,
.proof-card, .doc-card, .ops-route-card,
.ops-floating-card, .sidebar a,
.pool-toast {
  transition:
    transform   .4s cubic-bezier(.16,.84,.32,1),
    box-shadow  .4s ease,
    border-color.4s ease,
    background  .4s ease !important;
}
@media(hover:hover) {
  .card:hover, .process-step:hover, .highlight-card:hover {
    transform: translateY(-7px);
    border-color: rgba(216,170,69,.34);
    box-shadow: 0 40px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(216,170,69,.1);
  }
  .mock-window:hover   { transform:translateY(-9px) }
  .timeline-item:hover { transform:translateX(6px); border-left-color: var(--gold2,#f0cf7a) }
  .sidebar a:hover     { transform:translateX(5px) !important }
  .ops-route-card:hover{ transform:translateY(-4px); border-color:rgba(216,170,69,.28) }
}

/* ── 5. BUTON IŞIK KAYMA + MİKRO DOKUNUŞ ────────────────────── */
.btn, button:not(.nav-toggle):not([class*="pool"]):not([class*="close"]) {
  position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.16,.84,.32,1), filter .22s, box-shadow .25s !important;
}
.btn::after,
button:not(.nav-toggle):not([class*="pool"]):not([class*="close"])::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .5s ease; pointer-events:none;
}
@media(hover:hover){
  .btn:hover::after,
  button:not(.nav-toggle):not([class*="pool"]):not([class*="close"]):hover::after {
    transform:translateX(130%);
  }
}
.btn:active, button:active { transform:scale(.96) !important }

/* ── 6. TOPBAR SCROLL DERİNLİĞİ ─────────────────────────────── */
.topbar {
  transition: background-color .4s ease, box-shadow .4s ease,
              backdrop-filter .4s ease !important;
}
.topbar.fx-scrolled {
  background: rgba(2,4,7,.94) !important;
  box-shadow: 0 20px 64px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(24px) !important;
}

/* ── 7. FORM ALANLARI FOCUS ANİMASYONU ───────────────────────── */
input, select, textarea {
  transition: border-color .3s, box-shadow .3s, background .3s !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(216,170,69,.14), 0 0 0 1px rgba(216,170,69,.5) !important;
}
label {
  transition: color .25s ease;
}
input:focus ~ label, select:focus ~ label { color: var(--gold2,#f0cf7a) }

/* ── 8. TABLO SATIRLARI STAGGER ──────────────────────────────── */
.table-wrap tbody tr {
  opacity:0; transform:translateY(7px);
  animation: fx-row-in .4s cubic-bezier(.16,.84,.32,1) both;
}
.table-wrap tbody tr:nth-child(n) {
  animation-delay: calc(.04s * var(--fx-i, 0));
}
@keyframes fx-row-in { to { opacity:1; transform:translateY(0) } }

/* ── 9. SAYAÇLAR ─────────────────────────────────────────────── */
[data-fx-count] { display:inline-block; font-variant-numeric:tabular-nums }

/* ── 10. PILL NABIZ (aktif/yeşil) ────────────────────────────── */
.pill.green { overflow:visible; position:relative }
.pill.green::before {
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  border:1px solid #adf3cb; opacity:0;
  animation: fx-pill-pulse 2.2s ease-out infinite;
}
@keyframes fx-pill-pulse {
  0%   { transform:scale(1);   opacity:.55 }
  100% { transform:scale(1.22);opacity:0   }
}

/* ── 11. HERO VİZÜEL YÜZME ──────────────────────────────────── */
.hero-card img, .ops-visual .ops-panel, .ops-visual svg {
  animation: fx-float 8s ease-in-out infinite;
}
@keyframes fx-float {
  0%,100% { transform:translateY(0)    }
  50%     { transform:translateY(-10px)}
}

/* ── 12. GİRİŞ / KAYIT SAYFALARI ──────────────────────────────
   Auth card hafifçe yukarı gelir */
.auth-wrap .auth-card {
  opacity:0; transform:translateY(24px) scale(.98);
  animation: fx-auth-in .65s .2s cubic-bezier(.16,.84,.32,1) forwards;
}
@keyframes fx-auth-in { to { opacity:1; transform:none } }

/* ── 13. PANELLERDEKİ KENARÇİZGİ PARLAMA ────────────────────── */
.sidebar a.active {
  position:relative;
  box-shadow: inset 3px 0 0 var(--gold,#d8aa45),
              0 0 18px rgba(216,170,69,.12);
}

/* ── 14. YÜKLEME SPINNER ─────────────────────────────────────── */
button.is-loading { opacity:.72; pointer-events:none }
button.is-loading::before {
  content:""; position:absolute; right:14px; top:50%;
  width:15px; height:15px; margin-top:-7.5px;
  border:2px solid rgba(5,8,15,.3); border-top-color:rgba(5,8,15,.85);
  border-radius:50%; animation:fx-spin .55s linear infinite;
}
@keyframes fx-spin { to { transform:rotate(360deg) } }

/* ── 15. SAYFA GEÇİŞ OVERLAY ────────────────────────────────── */
#fx-transition-overlay {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background: #020407;
  opacity:0; transition:opacity .35s ease;
}
#fx-transition-overlay.fx-out { opacity:1 }

/* ── 16. ÖZEL İMLEÇ (yalnızca masaüstü) ─────────────────────── */
@media(hover:hover) and (pointer:fine){
  body { cursor:none }
  #fx-cursor {
    position:fixed; z-index:9998; pointer-events:none;
    width:12px; height:12px; border-radius:50%;
    background:rgba(216,170,69,.85);
    transform:translate(-50%,-50%);
    transition:width .2s, height .2s, opacity .2s, background .2s;
    mix-blend-mode:difference;
  }
  #fx-cursor-ring {
    position:fixed; z-index:9997; pointer-events:none;
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid rgba(216,170,69,.4);
    transform:translate(-50%,-50%);
    transition:width .35s cubic-bezier(.16,.84,.32,1),
               height .35s cubic-bezier(.16,.84,.32,1),
               border-color .25s, opacity .25s;
  }
  a:hover ~ #fx-cursor, button:hover ~ #fx-cursor,
  .card:hover ~ #fx-cursor { width:22px; height:22px }
  #fx-cursor.fx-hover { width:8px; height:8px; background:var(--gold2,#f0cf7a) }
  #fx-cursor-ring.fx-hover { width:54px; height:54px; border-color:rgba(216,170,69,.65) }
}

/* ── ERİŞİLEBİLİRLİK: hareket azaltma ────────────────────────── */
@media(prefers-reduced-motion:reduce){
  body, [data-fx], [data-fx-group] > *,
  .hero-card img, .ops-visual .ops-panel,
  .auth-wrap .auth-card, .table-wrap tbody tr,
  .pill.green::before, #fx-canvas-bg {
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
  #fx-canvas-bg { display:none }
  body { cursor:auto }
  #fx-cursor, #fx-cursor-ring { display:none }
}