/* ===========================================================================
   TFNUYSP — FX KATMANI  (assets/fx.css)
   ---------------------------------------------------------------------------
   Animasyonlu desenler · özel imleç · bildirim pencereleri · sayfa geçişleri.
   Bu dosya ELLE yazılır, hiçbir derleme adımı üretmez. Tailwind sınıflarına
   BAĞIMLI DEĞİLDİR (assets/tailwind.css önceden derlenmiş olduğu için yeni
   bir Tailwind sınıfı sessizce kaybolurdu) — saf CSS + CSS değişkenleri.
   Satır içi stil/script yoktur; CSP uyumludur.
   =========================================================================== */

/* ─── 1. TASARIM JETONLARI ───────────────────────────────────────────────── */
:root{
  --fx-accent:      #22d3ee;
  --fx-accent-2:    #2dd4bf;
  --fx-accent-3:    #818cf8;
  --fx-accent-rgb:  34, 211, 238;

  --fx-ink:         #e6e9f5;
  --fx-ink-dim:     #8a94b5;
  --fx-surface:     rgba(17, 21, 36, .86);
  --fx-border:      rgba(120, 140, 190, .18);

  --fx-ok:    #34d399;  --fx-ok-rgb:   52, 211, 153;
  --fx-err:   #f87171;  --fx-err-rgb:  248, 113, 113;
  --fx-warn:  #fbbf24;  --fx-warn-rgb: 251, 191, 36;
  --fx-info:  #38bdf8;  --fx-info-rgb: 56, 189, 248;

  --fx-ease:   cubic-bezier(.22,.61,.36,1);
  --fx-spring: cubic-bezier(.34,1.56,.64,1);
  --fx-shadow: 0 24px 60px -18px rgba(0,0,0,.78);
}

/* Ürüne özel vurgu — <body data-fx-accent="chatgpt"> ile tüm katman renk değiştirir. */
body[data-fx-accent="chatgpt"]{ --fx-accent:#10a37f; --fx-accent-2:#34d399; --fx-accent-rgb:16,163,127; }
body[data-fx-accent="adobe"]  { --fx-accent:#ff5b5b; --fx-accent-2:#f97316; --fx-accent-rgb:255,91,91; }
body[data-fx-accent="gemini"] { --fx-accent:#7c9cff; --fx-accent-2:#a78bfa; --fx-accent-rgb:124,156,255; }
body[data-fx-accent="webmail"]{ --fx-accent:#fbbf24; --fx-accent-2:#f59e0b; --fx-accent-rgb:251,191,36; }

/* ─── 2. ÖZEL İMLEÇ ──────────────────────────────────────────────────────── */
html.fx-cursor,
html.fx-cursor body{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 2.4L17.6 12.1 11.4 12.6 9.9 18.7z' fill='%230b1020' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/></svg>") 4 2, auto;
}
html.fx-cursor a,
html.fx-cursor button,
html.fx-cursor summary,
html.fx-cursor select,
html.fx-cursor label[for],
html.fx-cursor [role="button"],
html.fx-cursor [onclick],
html.fx-cursor .cursor-pointer{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M4 2.4L17.6 12.1 11.4 12.6 9.9 18.7z' fill='%230b1020' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/><circle cx='20' cy='20' r='3.4' fill='%2338bdf8' stroke='%23ffffff' stroke-width='1.2'/></svg>") 4 2, pointer;
}
html.fx-cursor input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.fx-cursor textarea,
html.fx-cursor [contenteditable="true"]{ cursor: text; }
html.fx-cursor [disabled]{ cursor: not-allowed; }

/* Tıklama dalgası */



/* ─── 3. ANİMASYONLU ARKA PLAN DESENLERİ ─────────────────────────────────── */
.fx-bg{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.fx-bg > *{ position: absolute; inset: 0; }

/* 3a. Aurora — sürüklenen renk kümeleri */
.fx-aurora i{
  position: absolute; display: block; border-radius: 50%;
  filter: blur(120px); opacity: .40; will-change: transform;
}
.fx-aurora i:nth-child(1){
  width: 620px; height: 620px; top: -14%; left: 8%;
  background: radial-gradient(circle, rgba(var(--fx-accent-rgb), .55), transparent 68%);
  animation: fx-drift-a 26s ease-in-out infinite;
}
.fx-aurora i:nth-child(2){
  width: 560px; height: 560px; bottom: -16%; right: 6%;
  background: radial-gradient(circle, rgba(129,140,248,.45), transparent 68%);
  animation: fx-drift-b 32s ease-in-out infinite;
}
.fx-aurora i:nth-child(3){
  width: 460px; height: 460px; top: 34%; left: 44%;
  background: radial-gradient(circle, rgba(45,212,191,.32), transparent 70%);
  animation: fx-drift-c 38s ease-in-out infinite;
}
@keyframes fx-drift-a{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  33%    { transform: translate3d(70px,50px,0) scale(1.12); }
  66%    { transform: translate3d(-40px,90px,0) scale(.94); }
}
@keyframes fx-drift-b{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(-90px,-60px,0) scale(1.16); }
}
@keyframes fx-drift-c{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  40%    { transform: translate3d(60px,-70px,0) scale(1.1); }
  75%    { transform: translate3d(-70px,40px,0) scale(.9); }
}

/* 3b. Kayan ızgara */
.fx-grid{
  background-image:
    linear-gradient(rgba(var(--fx-accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--fx-accent-rgb), .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 38%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 85% 65% at 50% 38%, #000 25%, transparent 78%);
  animation: fx-grid-pan 34s linear infinite;
}
@keyframes fx-grid-pan{ to{ background-position: 64px 64px, 64px 64px; } }

/* 3c. Sürüklenen nokta dokusu */
.fx-dots{
  background-image: radial-gradient(rgba(190,205,240,.13) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 10%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 10%, transparent 80%);
  animation: fx-dots-pan 48s linear infinite;
}
@keyframes fx-dots-pan{ to{ background-position: -170px 340px; } }

/* 3d. Dönen petal/çiçek deseni */
.fx-petal{
  inset: auto; top: 50%; left: 50%;
  width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
     transparent 0deg,   rgba(var(--fx-accent-rgb), .07) 12deg,  transparent 30deg,
     transparent 60deg,  rgba(var(--fx-accent-rgb), .05) 72deg,  transparent 90deg,
     transparent 120deg, rgba(129,140,248,.06)           132deg, transparent 150deg,
     transparent 180deg, rgba(var(--fx-accent-rgb), .07) 192deg, transparent 210deg,
     transparent 240deg, rgba(45,212,191,.05)            252deg, transparent 270deg,
     transparent 300deg, rgba(var(--fx-accent-rgb), .05) 312deg, transparent 330deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle, #000 12%, transparent 62%);
  animation: fx-spin 120s linear infinite;
  will-change: transform;
}
@keyframes fx-spin{ to{ transform: rotate(360deg); } }

/* 3e. Süzülen altıgenler */
.fx-hex b{
  position: absolute; display: block;
  width: var(--s, 46px); height: var(--s, 46px);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(140deg, rgba(var(--fx-accent-rgb), .18), rgba(var(--fx-accent-rgb), .02));
  opacity: .5;
  animation: fx-float var(--d, 20s) ease-in-out var(--dl, 0s) infinite;
  will-change: transform;
}
@keyframes fx-float{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%    { transform: translate3d(0,-38px,0) rotate(24deg); }
}

/* 3f. Çapraz ışık huzmesi */
.fx-beam{
  background: linear-gradient(104deg, transparent 38%,
              rgba(var(--fx-accent-rgb), .085) 47%,
              rgba(255,255,255,.05) 50%,
              rgba(var(--fx-accent-rgb), .085) 53%, transparent 62%);
  background-size: 260% 100%;
  animation: fx-beam-sweep 13s ease-in-out infinite;
}
@keyframes fx-beam-sweep{
  0%  { background-position: 150% 0;  opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100%{ background-position: -50% 0;  opacity: 0; }
}

/* 3g. Yıldız alanı (panel giriş ekranı) */
.fx-stars b{
  position: absolute; display: block;
  width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0;
  animation: fx-twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes fx-twinkle{
  0%,100%{ opacity: 0;   transform: scale(.6); }
  50%    { opacity: .75; transform: scale(1);  }
}

/* Fare paralaksı — JS --fx-px / --fx-py yazar */
.fx-parallax{
  transform: translate3d(calc(var(--fx-px, 0) * 1px), calc(var(--fx-py, 0) * 1px), 0);
  transition: transform .5s var(--fx-ease);
}

/* ─── 4. BİLDİRİM PENCERELERİ (TOAST) ────────────────────────────────────── */
#toast-container.fx-toasts{
  position: fixed; top: 18px; right: 18px;
  z-index: 2147482000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.fx-toast{
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 34px 1fr 22px; align-items: start; gap: 11px;
  padding: 13px 13px 15px; border-radius: 15px;
  background: linear-gradient(145deg, rgba(20,25,42,.96), rgba(12,15,26,.96));
  border: 1px solid var(--fx-border);
  box-shadow: var(--fx-shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--fx-ink); pointer-events: auto;
  animation: fx-toast-in .48s var(--fx-spring) both;
}
.fx-toast.is-leaving{ animation: fx-toast-out .32s var(--fx-ease) both; }
@keyframes fx-toast-in{
  from{ opacity: 0; transform: translate3d(120%, 0, 0) scale(.94); }
  to  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fx-toast-out{
  from{ opacity: 1; transform: translate3d(0,0,0) scale(1);      max-height: 200px; margin-bottom: 0; }
  to  { opacity: 0; transform: translate3d(120%,0,0) scale(.92); max-height: 0;     margin-bottom: -10px; }
}
/* Sol renk şeridi */
.fx-toast::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fx-tone, var(--fx-info));
  box-shadow: 0 0 16px 0 var(--fx-tone, var(--fx-info));
}
.fx-toast-icon{
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; font-size: 14px;
  color: var(--fx-tone, var(--fx-info));
  background: rgba(var(--fx-tone-rgb, var(--fx-info-rgb)), .13);
  border: 1px solid rgba(var(--fx-tone-rgb, var(--fx-info-rgb)), .30);
  animation: fx-toast-pop .5s var(--fx-spring) .08s both;
}
@keyframes fx-toast-pop{ from{ transform: scale(.4) rotate(-25deg); } to{ transform: none; } }
.fx-toast-body{ min-width: 0; padding-top: 1px; }
.fx-toast-title{
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fx-tone, var(--fx-info)); margin: 0 0 3px;
}
.fx-toast-msg{
  font-size: 12.5px; line-height: 1.55; color: var(--fx-ink);
  margin: 0; word-break: break-word; font-weight: 500;
}
.fx-toast-close{
  width: 22px; height: 22px; border: 0; border-radius: 7px; padding: 0;
  background: transparent; color: var(--fx-ink-dim); font-size: 12px;
  display: grid; place-items: center; transition: all .18s var(--fx-ease);
}
.fx-toast-close:hover{ background: rgba(255,255,255,.08); color: var(--fx-ink); }
/* Otomatik azalan ilerleme çubuğu */
.fx-toast-bar{
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--fx-tone, var(--fx-info)), transparent);
  animation: fx-toast-bar var(--fx-life, 5s) linear forwards;
}
@keyframes fx-toast-bar{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
.fx-toast:hover .fx-toast-bar{ animation-play-state: paused; }

.fx-toast[data-tone="success"]{ --fx-tone: var(--fx-ok);   --fx-tone-rgb: var(--fx-ok-rgb);   }
.fx-toast[data-tone="error"]  { --fx-tone: var(--fx-err);  --fx-tone-rgb: var(--fx-err-rgb);  }
.fx-toast[data-tone="warning"]{ --fx-tone: var(--fx-warn); --fx-tone-rgb: var(--fx-warn-rgb); }
.fx-toast[data-tone="info"]   { --fx-tone: var(--fx-info); --fx-tone-rgb: var(--fx-info-rgb); }

/* ─── 5. SAYFALAR ARASI GEÇİŞ ────────────────────────────────────────────── */
/* 5a. Tıklanan noktadan yayılan renk dalgası */



/* 5b. Görünümün yeniden belirmesi */
.fx-view-in{ animation: fx-view-in .46s var(--fx-ease) both; }
@keyframes fx-view-in{
  from{ opacity: 0; transform: translate3d(0, 16px, 0) scale(.994); filter: blur(5px); }
  to  { opacity: 1; transform: none; filter: none; }
}
/* İçerik blokları sırayla belirir */
.fx-stagger > *{ animation: fx-view-in .5s var(--fx-ease) both; }
.fx-stagger > *:nth-child(1){ animation-delay: .02s; }
.fx-stagger > *:nth-child(2){ animation-delay: .07s; }
.fx-stagger > *:nth-child(3){ animation-delay: .12s; }
.fx-stagger > *:nth-child(4){ animation-delay: .17s; }
.fx-stagger > *:nth-child(5){ animation-delay: .22s; }
.fx-stagger > *:nth-child(6){ animation-delay: .27s; }
.fx-stagger > *:nth-child(n+7){ animation-delay: .32s; }

/* 5c. Sekmelerin arkasında kayan gösterge */
.fx-glider{
  position: absolute; z-index: 0; border-radius: 12px;
  background: rgba(var(--fx-accent-rgb), .14);
  border: 1px solid rgba(var(--fx-accent-rgb), .40);
  box-shadow: 0 0 22px -6px rgba(var(--fx-accent-rgb), .6);
  pointer-events: none; opacity: 0;
  transition: transform .38s var(--fx-spring), width .38s var(--fx-spring),
              height .38s var(--fx-spring), opacity .25s linear;
}

/* ─── 6. KAYDIRINCA BELİREN İÇERİK ───────────────────────────────────────── */
.fx-reveal{
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .6s var(--fx-ease), transform .6s var(--fx-ease);
}
.fx-reveal.is-in{ opacity: 1; transform: none; }

/* ─── 7. KART / KPI ETKİLEŞİMLERİ ────────────────────────────────────────── */
.fx-lift{ transition: transform .28s var(--fx-ease), box-shadow .28s var(--fx-ease), border-color .28s var(--fx-ease); }
.fx-lift:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--fx-accent-rgb), .45);
  box-shadow: 0 18px 44px -20px rgba(var(--fx-accent-rgb), .55);
}
.fx-lift:hover .fx-lift-icon{ transform: rotate(-8deg) scale(1.08); }
.fx-lift-icon{ transition: transform .35s var(--fx-spring); }

/* Butonlarda geçen parlama */
.fx-sheen{ position: relative; overflow: hidden; }
.fx-sheen::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  background-size: 220% 100%; background-position: 170% 0;
  pointer-events: none;
}
.fx-sheen:hover::after{ animation: fx-sheen-run .85s var(--fx-ease); }
@keyframes fx-sheen-run{ to{ background-position: -70% 0; } }

/* Tıklama dalgası (ripple) */



/* İlerleme çubuğunda parıltı */
.fx-shimmer{ position: relative; overflow: hidden; }
.fx-shimmer::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  background-size: 200% 100%;
  animation: fx-shimmer-run 1.8s linear infinite;
}
@keyframes fx-shimmer-run{ from{ background-position: -100% 0; } to{ background-position: 200% 0; } }

/* Nabız atan durum noktası */
.fx-pulse{ position: relative; }
.fx-pulse::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid currentColor; animation: fx-pulse-run 1.9s var(--fx-ease) infinite;
}
@keyframes fx-pulse-run{
  0%  { transform: scale(1);   opacity: .7; }
  100%{ transform: scale(2.6); opacity: 0;  }
}

/* ─── 8. ONAY / MODAL PENCERELERİ ────────────────────────────────────────── */
.fx-modal-backdrop{
  position: fixed; inset: 0; z-index: 2147481500;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,12,.62);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  animation: fx-fade-in .24s var(--fx-ease) both;
}
.fx-modal-backdrop.is-leaving{ animation: fx-fade-out .2s var(--fx-ease) both; }
@keyframes fx-fade-in { from{ opacity: 0; } to{ opacity: 1; } }
@keyframes fx-fade-out{ from{ opacity: 1; } to{ opacity: 0; } }

.fx-modal{
  width: min(440px, 100%);
  background: linear-gradient(160deg, rgba(20,25,42,.98), rgba(11,14,24,.98));
  border: 1px solid var(--fx-border); border-radius: 20px;
  box-shadow: var(--fx-shadow); padding: 26px 24px 20px;
  animation: fx-modal-in .42s var(--fx-spring) both;
}
.fx-modal-backdrop.is-leaving .fx-modal{ animation: fx-modal-out .2s var(--fx-ease) both; }
@keyframes fx-modal-in{
  from{ opacity: 0; transform: translateY(22px) scale(.92); }
  to  { opacity: 1; transform: none; }
}
@keyframes fx-modal-out{
  from{ opacity: 1; transform: none; }
  to  { opacity: 0; transform: translateY(10px) scale(.96); }
}
.fx-modal-icon{
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 17px;
  display: grid; place-items: center; font-size: 21px;
  color: var(--fx-tone, var(--fx-warn));
  background: rgba(var(--fx-tone-rgb, var(--fx-warn-rgb)), .13);
  border: 1px solid rgba(var(--fx-tone-rgb, var(--fx-warn-rgb)), .32);
}
.fx-modal h3{ margin: 0 0 7px; text-align: center; font-size: 17px; font-weight: 800; color: var(--fx-ink); }
.fx-modal p { margin: 0 0 20px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--fx-ink-dim); }
.fx-modal-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-modal-actions button{
  padding: 11px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 800;
  border: 1px solid var(--fx-border); background: rgba(255,255,255,.04);
  color: var(--fx-ink); transition: all .2s var(--fx-ease);
}
.fx-modal-actions button:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.fx-modal-actions button.is-primary{
  background: linear-gradient(135deg, var(--fx-tone, var(--fx-err)), rgba(var(--fx-tone-rgb, var(--fx-err-rgb)), .62));
  border-color: transparent; color: #08101c;
}
.fx-modal[data-tone="danger"] { --fx-tone: var(--fx-err);  --fx-tone-rgb: var(--fx-err-rgb);  }
.fx-modal[data-tone="warning"]{ --fx-tone: var(--fx-warn); --fx-tone-rgb: var(--fx-warn-rgb); }
.fx-modal[data-tone="info"]   { --fx-tone: var(--fx-info); --fx-tone-rgb: var(--fx-info-rgb); }

/* ─── 9. KONFETİ ─────────────────────────────────────────────────────────── */
.fx-confetti{ position: fixed; inset: 0; pointer-events: none; z-index: 2147481900; overflow: hidden; }
.fx-confetti b{
  position: absolute; display: block; width: 8px; height: 13px; border-radius: 2px;
  animation: fx-confetti-fall var(--d, 2.4s) var(--fx-ease) var(--dl, 0s) forwards;
}
@keyframes fx-confetti-fall{
  0%  { transform: translate3d(0,0,0) rotate(0deg);                          opacity: 1; }
  100%{ transform: translate3d(var(--x, 0px), 105vh, 0) rotate(var(--r, 540deg)); opacity: 0; }
}

/* ─── 10. SAYFA İLK AÇILIŞI ──────────────────────────────────────────────── */
.fx-boot{ animation: fx-boot-in .6s var(--fx-ease) both; }
@keyframes fx-boot-in{
  from{ opacity: 0; transform: translate3d(0,10px,0); }
  to  { opacity: 1; transform: none; }
}

/* Başlıkta ışık süzülmesi */
.fx-shine{
  background-image: linear-gradient(100deg,
      currentColor 0%, currentColor 38%,
      rgba(255,255,255,.95) 48%, currentColor 58%, currentColor 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: currentColor;
  animation: fx-shine-run 5.5s var(--fx-ease) infinite;
}
@keyframes fx-shine-run{
  0%,70%{ background-position: 180% 0; }
  100%  { background-position: -40% 0; }
}

/* ─── 11. ERİŞİLEBİLİRLİK: "HAREKETİ AZALT" ──────────────────────────────── */
/* Windows'ta "Animasyon efektleri" kapalıyken dekoratif hareketler durur;
   yalnızca kısa açılış geçişleri kalır. */
/* html.fx-force-motion varsa (site sahibi ?fx=full ile zorladıysa) bu blok
   devreye GİRMEZ — efektler işletim sistemi tercihine rağmen tam çalışır. */
@media (prefers-reduced-motion: reduce){
  html:not(.fx-force-motion) .fx-aurora i,
  html:not(.fx-force-motion) .fx-grid,
  html:not(.fx-force-motion) .fx-dots,
  html:not(.fx-force-motion) .fx-petal,
  html:not(.fx-force-motion) .fx-hex b,
  html:not(.fx-force-motion) .fx-beam,
  html:not(.fx-force-motion) .fx-stars b,
  html:not(.fx-force-motion) .fx-shimmer::after,
  html:not(.fx-force-motion) .fx-shine,
  html:not(.fx-force-motion) .fx-pulse::after,
  html:not(.fx-force-motion) .fx-sheen:hover::after{
    animation: none !important;
  }
  html:not(.fx-force-motion) .fx-confetti{ display: none !important; }
  html:not(.fx-force-motion) .fx-parallax{ transform: none !important; }
  html:not(.fx-force-motion) .fx-reveal{ opacity: 1 !important; transform: none !important; }
  html:not(.fx-force-motion) .fx-view-in,
  html:not(.fx-force-motion) .fx-stagger > *,
  html:not(.fx-force-motion) .fx-boot,
  html:not(.fx-force-motion) .fx-toast,
  html:not(.fx-force-motion) .fx-modal{
    animation-duration: .16s !important; animation-delay: 0s !important;
  }
  html:not(.fx-force-motion) .fx-lift:hover{ transform: none; }
}

/* Dokunmatik cihazlarda imleç efektleri kapanır */
@media (hover: none), (pointer: coarse){
  html.fx-cursor, html.fx-cursor body, html.fx-cursor a, html.fx-cursor button{ cursor: auto; }
}

/* Dar ekranlarda ağır desenler sadeleşir */
@media (max-width: 640px){
  .fx-petal, .fx-hex, .fx-beam{ display: none; }
  .fx-aurora i{ filter: blur(90px); opacity: .32; }
  #toast-container.fx-toasts{ top: 12px; right: 12px; left: 12px; width: auto; }
}

/* ─── 12. ESKİ STATİK ARKA PLANIN DEVRE DIŞI BIRAKILMASI ─────────────────── */
/* index.php / toprak.php içindeki sabit .cyber-grid-bg ve blur küreleri artık
   .fx-bg tarafından (animasyonlu olarak) sağlanıyor. HTML'i değiştirmek yerine
   burada gizleniyor — geri almak tek satır. */
body .cyber-grid-bg{ display: none !important; }
body > .fixed.rounded-full.blur-\[140px\],
body > .fixed.rounded-full.blur-\[160px\]{ display: none !important; }

/* Ana içerik arka planın üstünde kalsın */
body > header, body > main, body > footer,
body > .app-view, body > .arena-shell, body > #admin-login-screen{ position: relative; z-index: 1; }

/* ─── 13. GERÇEK SAYFA GEÇİŞİ (index.php ↔ toprak.php) ───────────────────── */
.fx-leaving{ animation: fx-page-out .3s var(--fx-ease) forwards; }
@keyframes fx-page-out{
  to{ opacity: 0; transform: translate3d(0,-10px,0); filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce){
  html:not(.fx-force-motion) .fx-leaving{ animation: none !important; }
}