/* ============================================================
   loading.css — Lara Fly globe loader (yeniarayuz2026 tabanli)
   Hicbir Razor/C# degiskeni yoktur; saf CSS.
   _LoadingOverlay.cshtml partial'i ile birlikte kullanilir.
   Genel akis:
     - .login-loading-overlay overlay'i z-index: 999999.
     - .is-page-loading sayfa-acilis state'i, .is-visible runtime state'i.
     - Tum dahili animasyonlar prefers-reduced-motion'a ragmen
       animation-play-state: running !important ile zorlanir
       (Windows Server gibi "Show animations" kapali ortamlar icin).
   ============================================================ */

.login-loading-overlay {
  position: fixed;
  inset: 0;
  /* Daha opak arkaplan: hasta/MT layout'larinda sidebar + topbar gibi
     katmanli icerik vardi; 0.78 opacity icerigi yumusatip blur ile gosteriyordu
     ama "duzgun gorunmuyor" hissi veriyordu. 0.96 ile underlying icerik
     gorsel olarak gizlenir, sadece loader animasyonu temiz gorunur. */
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 999999;
  animation: overlayFade 0.45s ease;
}

.login-loading-overlay.is-visible,
.login-loading-overlay.is-page-loading { display: flex; }
.login-loading-overlay.is-page-loading { opacity: 1; }

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scene {
  position: relative;
  width: 360px;
  height: 360px;
  isolation: isolate;
}

/* ── Yuzen logo (globe yerine; login-logo ile ayni stil) ──
   .scene merkezinde durur; etrafinda .orbit/.plane doner. Login'deki
   .login-logo-wrap ile AYNI soft yukari-asagi float (loginLogoHafifHareket). */
.loading-logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  animation: loginLogoHafifHareket 5.4s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.loading-logo {
  display: block;
  height: 80px;
  max-width: 70%;
  object-fit: contain;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes loginLogoHafifHareket {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.orbit {
  position: absolute;
  inset: 0;
  z-index: 5;
  animation: orbit 6s linear infinite;
  transform-origin: 50% 50%;
  pointer-events: none;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 90deg,
    rgba(74, 144, 226, 0)    0deg,
    rgba(74, 144, 226, 0)    195deg,
    rgba(74, 144, 226, 0.10) 240deg,
    rgba(74, 144, 226, 0.30) 305deg,
    rgba(255, 90, 110, 0.70) 350deg,
    rgba(255, 90, 110, 0.95) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 147px, #000 148.5px, #000 151.5px, transparent 153px);
          mask: radial-gradient(circle, transparent 147px, #000 148.5px, #000 151.5px, transparent 153px);
}

.plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  transform: translateX(151px) rotate(180deg);
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.22));
}

.plane img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(255,255,255,0.18));
}

/* ── Bulutlar (globe kaldirildi ama bulutlar KORUNDU; logo + ucak ile birlikte yuzer) ── */
.cloud {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 10px 18px rgba(83, 146, 214, 0.18));
  will-change: transform, opacity;
}

.cloud svg { width: 100%; height: auto; display: block; }

.cloud-1 { top: -6px;   left: -36px;  width: 126px; animation: cloudFloatOne   11s   ease-in-out infinite; }
.cloud-2 { top: 18px;   right: -32px; width: 112px; opacity: 0.94; animation: cloudFloatTwo   12.4s ease-in-out infinite; }
.cloud-3 { bottom: 8px; left: -18px;  width: 96px;  opacity: 0.84; animation: cloudFloatThree 10.6s ease-in-out infinite; }
.cloud-4 { bottom: 30px; right: -22px; width: 104px; opacity: 0.82; animation: cloudFloatFour 13.2s ease-in-out infinite; }
.cloud-5 { top: 122px;  left: -44px;  width: 88px;  opacity: 0.76; animation: cloudFloatFive  9.8s  ease-in-out infinite; }
.cloud-6 { top: 132px;  right: -42px; width: 84px;  opacity: 0.72; animation: cloudFloatSix   10.8s ease-in-out infinite; }

@keyframes cloudFloatOne {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.9; }
  35%      { transform: translate3d(24px, -10px, 0) scale(1.06); opacity: 1; }
  70%      { transform: translate3d(12px, 8px, 0) scale(1.02);   opacity: 0.94; }
}
@keyframes cloudFloatTwo {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.88; }
  42%      { transform: translate3d(-26px, 12px, 0) scale(1.08); opacity: 0.98; }
  74%      { transform: translate3d(-10px, -8px, 0) scale(1.03); opacity: 0.92; }
}
@keyframes cloudFloatThree {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.76; }
  40%      { transform: translate3d(18px, 9px, 0) scale(1.07); opacity: 0.9; }
  72%      { transform: translate3d(-8px, -6px, 0) scale(1.02); opacity: 0.82; }
}
@keyframes cloudFloatFour {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.78; }
  38%      { transform: translate3d(-18px, 8px, 0) scale(1.06); opacity: 0.9; }
  76%      { transform: translate3d(-6px, -7px, 0) scale(1.02); opacity: 0.82; }
}
@keyframes cloudFloatFive {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.7; }
  50%      { transform: translate3d(14px, -5px, 0) scale(1.08); opacity: 0.82; }
}
@keyframes cloudFloatSix {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.68; }
  50%      { transform: translate3d(-15px, 6px, 0) scale(1.07); opacity: 0.8; }
}

.loading-text {
  margin-top: 42px;
  font-family: 'DM Serif Display', Manrope, Inter, serif;
  font-size: 28px;
  font-weight: 400;
  color: #2d3a5f;
  letter-spacing: 1px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.loading-text .dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}

.loading-text .dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5a6e;
  opacity: 0;
  transform: translateY(0);
  animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-text .dots span:nth-child(1) { animation-delay: 0s; }
.loading-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-text .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

.subtitle {
  margin-top: 14px;
  font-size: 12px;
  color: #3773a8;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  animation: subtitlePulse 2.6s ease-in-out infinite;
}

@keyframes subtitlePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (max-width: 480px) {
  .scene { transform: scale(0.82); }
  .loading-text { font-size: 22px; }
}

/* Windows Server "Show animations in Windows" kapali geldiginde tarayici
   prefers-reduced-motion: reduce raporlar. Loader animasyonlari kritik
   UX ogesi oldugu icin animasyonlar her durumda calissin diye zorlanir. */
.orbit,
.loading-logo-wrap,
.cloud,
.subtitle,
.loading-text .dots span {
  animation-play-state: running !important;
  will-change: transform, opacity;
}