/* 23G — Sayfa geçişleri (anlamlı, tarım temalı) */

:root {
  --page-t-exit: 0.42s;
  --page-t-enter: 0.62s;
  --page-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --page-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Geçiş sırasında çıkan sayfa görünür kalsın */
body.spa-transitioning .spa-view.spa-page-exit {
  display: block !important;
  pointer-events: none;
}

.spa-view.spa-page-enter {
  display: block !important;
}

/* --- Geçiş bandı (nereye gidildiğini gösterir) --- */
.spa-transition-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #2d8f5f, #4ecf8f, #7ec8e8);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

body.spa-transitioning .spa-transition-banner {
  opacity: 1;
  height: 4px;
  animation: spa-banner-grow 0.55s var(--page-ease) forwards;
  box-shadow: 0 0 20px rgba(78, 207, 143, 0.5);
}

@keyframes spa-banner-grow {
  0% { transform: scaleX(0); }
  70% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0.85; }
}

.spa-transition-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9001;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(12, 28, 24, 0.92);
  border: 1px solid rgba(78, 207, 143, 0.35);
  color: #e8f4ef;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

body.spa-transitioning .spa-transition-toast.is-visible {
  animation: spa-toast-in 0.4s var(--page-ease-bounce) forwards;
}

@keyframes spa-toast-in {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ========== ÇIKIŞ animasyonları ========== */
.spa-page-exit {
  animation: spa-exit-fade var(--page-t-exit) var(--page-ease) forwards;
}

.spa-page-exit--home {
  animation-name: spa-exit-home;
}

.spa-page-exit--auth {
  animation-name: spa-exit-auth;
}

.spa-page-exit--dashboard {
  animation-name: spa-exit-dashboard;
}

.spa-page-exit--shop {
  animation-name: spa-exit-shop;
}

.spa-page-exit--admin {
  animation-name: spa-exit-admin;
}

.spa-page-exit--article {
  animation-name: spa-exit-article;
}

@keyframes spa-exit-fade {
  to { opacity: 0; transform: translateY(12px); }
}

@keyframes spa-exit-home {
  to { opacity: 0; transform: scale(0.98) translateY(20px); }
}

@keyframes spa-exit-auth {
  to { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(4px); }
}

@keyframes spa-exit-dashboard {
  to { opacity: 0; transform: translateX(-24px); }
}

@keyframes spa-exit-shop {
  to { opacity: 0; transform: translateX(24px); }
}

@keyframes spa-exit-admin {
  to { opacity: 0; transform: translateY(-16px); }
}

@keyframes spa-exit-article {
  to { opacity: 0; transform: translateX(20px); }
}

/* ========== GİRİŞ animasyonları ========== */
.spa-page-enter {
  animation-duration: var(--page-t-enter);
  animation-timing-function: var(--page-ease);
  animation-fill-mode: both;
}

.spa-page-enter--home {
  animation-name: spa-enter-home;
}

.spa-page-enter--auth {
  animation-name: spa-enter-auth;
}

.spa-page-enter--dashboard {
  animation-name: spa-enter-dashboard;
}

.spa-page-enter--shop {
  animation-name: spa-enter-shop;
}

.spa-page-enter--admin {
  animation-name: spa-enter-admin;
}

.spa-page-enter--corp {
  animation-name: spa-enter-admin;
}

.spa-page-exit--corp {
  animation-name: spa-exit-admin;
}

.spa-page-enter--article {
  animation-name: spa-enter-article;
}

@keyframes spa-enter-home {
  from { opacity: 0; transform: scale(1.02) translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes spa-enter-auth {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes spa-enter-dashboard {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}

@keyframes spa-enter-shop {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

@keyframes spa-enter-admin {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes spa-enter-article {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

/* --- Sayfa grubuna göre arka plan tonu --- */
body[data-page-group="auth"] .app-bg-layer::after {
  background: linear-gradient(165deg, rgba(78, 207, 143, 0.14) 0%, transparent 45%, rgba(20, 50, 35, 0.4) 100%);
}

body[data-page-group="dashboard"] .app-bg-layer::after {
  background: linear-gradient(165deg, rgba(100, 180, 255, 0.1) 0%, transparent 40%, rgba(45, 120, 70, 0.35) 100%);
}

body[data-page-group="shop"] .app-bg-layer::after {
  background: linear-gradient(165deg, rgba(212, 168, 83, 0.12) 0%, transparent 50%, rgba(20, 40, 30, 0.35) 100%);
}

/* --- Giriş / kayıt: form alanları sırayla --- */
.spa-view[data-view="login"].auth-page-ready .login-type-tabs,
.spa-view[data-view="register"].auth-page-ready .auth-card > *:not(.auth-card__brand),
.spa-view[data-view="forgot"].auth-page-ready .auth-card > * {
  animation: auth-stagger-in 0.55s var(--page-ease-bounce) both;
}

.spa-view[data-view="login"].auth-page-ready .login-panel:not(.hidden) .login-eye-outer {
  animation: auth-eye-invite 1.2s var(--page-ease-bounce) 0.15s both;
}

.spa-view[data-view="register"].auth-page-ready .form-group,
.spa-view[data-view="forgot"].auth-page-ready .form-group {
  animation: auth-field-in 0.5s var(--page-ease) both;
}

.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(1) { animation-delay: 0.08s; }
.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(2) { animation-delay: 0.12s; }
.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(3) { animation-delay: 0.16s; }
.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(4) { animation-delay: 0.2s; }
.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(5) { animation-delay: 0.24s; }
.spa-view[data-view="register"].auth-page-ready .form-group:nth-child(n+6) { animation-delay: 0.28s; }

.auth-page-ready .spa-panel-bounce {
  animation: none !important;
}

@keyframes auth-stagger-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-field-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes auth-eye-invite {
  0% { opacity: 0; transform: scale(0.85); box-shadow: 0 0 0 rgba(78, 207, 143, 0); }
  50% { box-shadow: 0 0 40px rgba(78, 207, 143, 0.35); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
}

/* --- Panel girişi --- */
.spa-view[data-view="dashboard"].dash-page-ready .dash-hero,
.spa-view[data-view="dashboard"].dash-page-ready .panel--weather,
.spa-view[data-view="dashboard"].dash-page-ready .metrics-grid > .metric-card {
  animation: dash-panel-in 0.55s var(--page-ease) both;
}

.spa-view[data-view="dashboard"].dash-page-ready .panel--weather { animation-delay: 0.06s; }
.spa-view[data-view="dashboard"].dash-page-ready .metrics-grid > .metric-card:nth-child(1) { animation-delay: 0.1s; }
.spa-view[data-view="dashboard"].dash-page-ready .metrics-grid > .metric-card:nth-child(2) { animation-delay: 0.14s; }
.spa-view[data-view="dashboard"].dash-page-ready .metrics-grid > .metric-card:nth-child(3) { animation-delay: 0.18s; }
.spa-view[data-view="dashboard"].dash-page-ready .metrics-grid > .metric-card:nth-child(5) { animation-delay: 0.26s; }

@keyframes dash-panel-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* --- Mağaza --- */
.spa-view[data-view="store"].shop-page-ready .store-grid .store-card,
.spa-view[data-view="cart"].shop-page-ready .cart-panel,
.spa-view[data-view="checkout"].shop-page-ready .checkout-panel {
  animation: shop-card-in 0.45s var(--page-ease) both;
}

.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(odd) {
  animation-name: shop-card-in-left;
}

.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(even) {
  animation-name: shop-card-in-right;
}

.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(1) { animation-delay: 0.04s; }
.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(2) { animation-delay: 0.08s; }
.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(3) { animation-delay: 0.12s; }
.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(4) { animation-delay: 0.16s; }
.spa-view[data-view="store"].shop-page-ready .store-grid .store-card:nth-child(n+5) { animation-delay: 0.2s; }

@keyframes shop-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes shop-card-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes shop-card-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spa-page-exit,
  .spa-page-enter,
  .spa-transition-banner,
  .auth-page-ready *,
  .dash-page-ready *,
  .shop-page-ready * {
    animation: none !important;
    transition: none !important;
  }

  .spa-transition-toast {
    display: none !important;
  }
}