/* =========================================================================
   ORTAK ÇERÇEVE: Üst menü (header), mobil çekmece, alt bilgi (footer)
   Tüm görünümlerde (ana sayfa, profil/yönetim, rapor) aynıdır.
   ========================================================================= */

.site-header {
  transition: box-shadow var(--dur-base) ease, background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}

/* Kaydırma ilerleme çubuğu */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
}

.site-header.is-scrolled .scroll-progress {
  opacity: 1;
}

/* Masaüstü menü bağlantıları: alt çizgi animasyonu */
#topNavMenu > a {
  position: relative;
  padding-block: 0.375rem;
}

#topNavMenu > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-base) var(--ease-out);
}

#topNavMenu > a:hover::after,
#topNavMenu > a.text-foreground::after,
#topNavMenu > a.text-brand::after {
  transform: scaleX(1);
}

#topNavMenu > a {
  white-space: nowrap;
}

/* Tablet (768–1023px): masaüstü menü sığmıyor → hamburger menü kullanılır */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #topNavMenu {
    display: none !important;
  }
  #mobileMenuToggleBtn {
    display: flex !important;
  }
  #mobileNavDrawer {
    top: 4rem;
  }
}

/* Küçük masaüstü (1024–1279px): ikincil rozetler gizlenir, menü sıkışmaz */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #topNavMenu {
    gap: 1.1rem;
    font-size: 0.8125rem;
  }
  .site-header .lg\:inline-flex.rounded-full {
    display: none !important;
  }
  #navBrandLink span.uppercase {
    display: none;
  }
  #navRegisterBtn > span + span {
    display: none;
  }
}

/* Giriş yapılmışken sağ taraf kalabalıklaşır: ERA5 rozetini yalnızca geniş ekranda göster */
@media (max-width: 1439.98px) {
  body.is-logged-in .site-header .lg\:inline-flex.rounded-full {
    display: none !important;
  }
}

/* Mobil çekmece */
#mobileNavDrawer {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

#mobileNavDrawer.drawer-open {
  display: block !important;
  animation: drawerSlideDown 0.28s var(--ease-out) forwards;
}

#mobileNavDrawer.drawer-open .mobile-nav-link {
  animation: fadeSlideUp 0.35s var(--ease-out) both;
}

#mobileNavDrawer.drawer-open .mobile-nav-link:nth-child(2) { animation-delay: 30ms; }
#mobileNavDrawer.drawer-open .mobile-nav-link:nth-child(3) { animation-delay: 60ms; }
#mobileNavDrawer.drawer-open .mobile-nav-link:nth-child(4) { animation-delay: 90ms; }
#mobileNavDrawer.drawer-open .mobile-nav-link:nth-child(5) { animation-delay: 120ms; }
#mobileNavDrawer.drawer-open .mobile-nav-link:nth-child(n+6) { animation-delay: 150ms; }

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Header düğmeleri: basma hissi */
.site-header button {
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.site-header button:active {
  transform: scale(0.96);
}

/* Footer */
.site-footer a {
  transition: color var(--dur-fast) ease;
}

@media (max-width: 639.98px) {
  .site-footer {
    text-align: center;
  }
}