/* ============================================================
   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;
}

.globe-loader-stage {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.globe-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(43, 146, 255, 0.16) 0%, rgba(43, 146, 255, 0.08) 42%, rgba(43, 146, 255, 0) 72%);
  animation: globePulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes globePulse {
  0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

.globe-whirl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.globe-whirl svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.whirl-ring-1     { animation: whirlSpin 3.6s linear infinite; }
.whirl-ring-2     { animation: whirlSpin 5.2s linear infinite reverse; }
.whirl-ring-3     { animation: whirlSpin 7.8s linear infinite; }
.whirl-particles  { animation: whirlSpin 2.4s linear infinite; }

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

.globe-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #d9fbff 0%, #6fc7ff 38%, #1f7fdb 70%, #06457e 100%);
  box-shadow:
    inset -26px -32px 58px rgba(0, 28, 84, 0.42),
    inset 20px 18px 45px rgba(255, 255, 255, 0.32),
    0 24px 55px rgba(20, 108, 205, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.48);
}

#loginTravelGlobe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.18) 21%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 72% 78%, rgba(0, 20, 70, 0.28) 0%, rgba(0, 20, 70, 0) 54%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 42%, rgba(2,35,85,0.24));
}

.atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 252px;
  height: 252px;
  margin: -126px 0 0 -126px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(98, 202, 255, 0) 58%, rgba(98, 202, 255, 0.42) 73%, rgba(98, 202, 255, 0) 84%);
  filter: blur(2px);
}

.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));
}

.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,
.globe-whirl,
.whirl-ring-1,
.whirl-ring-2,
.whirl-ring-3,
.whirl-particles,
.cloud,
.globe-pulse,
.subtitle,
.loading-text .dots span {
  animation-play-state: running !important;
  will-change: transform, opacity;
}