/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Manrope", sans-serif; background: #ffffff; }
header { position: relative; }
/* THEME TOKENS */
:root{
  --rute-crimson:#ED1C24;
  --nav-height:88px;       /* JS will keep this in sync if the logo height changes */
  --submenu-height:280px;  /* ↓ Reduced submenu bar height */
  --submenu-gap:20px;      /* ↓ Smaller visible gap above submenu text */
  --banner-height:720px;   /* Banner height */

  /* Scroll-state tokens */
  --nav-scrolled-bg: rgba(255,255,255,0.9);     /* semi-transparent white */
  --nav-scrolled-fg: #555;                       /* gray text on scroll */
  --submenu-scrolled-bg: #f3f4f6;                /* light gray for menus when scrolled */
  --menu-heading-gray: #555;
  --menu-link-gray: #666;
}

/* Spinner overlay styles */
#spinner-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}
.spinner {
  border: 8px solid #f3f3f3; border-top: 8px solid #0077b6;
  border-radius: 50%; width: 60px; height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===== NAVBAR (Glass on top; white/transparent when scrolled) ===== */
/* Center navbar menus */
.navbar.glass-on-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center; /* center everything */
  padding: 0 24px;
  z-index: 1100;

  background: rgba(255,255,255,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  color: #fff;
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    color .25s ease,
    border-color .25s ease;
  font-family: "Montserrat","Roboto Condensed","Gotham",Arial,sans-serif;
}

/* Position logo absolutely so it stays on the left */
.navbar .logo {
  position: absolute;
  left: 24px;
  display: flex;
  align-items: center;
}

/* Keep nav-links centered */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

/* turn solid white on hover (only at top) */
.navbar.glass-on-banner:hover{
  background:#fff;
  color:#555;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* ======== SCROLLED STATE (applied to <header>.scrolled) ======== */
header.scrolled .navbar.glass-on-banner{
  background: var(--nav-scrolled-bg);
  color: var(--nav-scrolled-fg);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* Inputs look correct when nav turns white (hover OR scrolled) */
.navbar.glass-on-banner:hover .search-box,
header.scrolled .navbar.glass-on-banner .search-box{
  border-color:rgba(0,0,0,.25); background:#fff; color:#555;
}

/* Logo swap when nav is white (hover OR scrolled) */
.navbar.glass-on-banner:hover .logo-1,
header.scrolled .navbar.glass-on-banner .logo-1{ display:none; }
.navbar.glass-on-banner:hover .logo-2,
header.scrolled .navbar.glass-on-banner .logo-2{ display:block; }

/* layout */
.logo{display:flex; align-items:center; gap:0;}
.logo-img{height:64px; object-fit:contain; display:none;}
.logo-1{display:block;}                 /* default (transparent state) */
.nav-links{list-style:none; display:flex; gap:30px;}
.nav-links li{
  padding:24px 6px; font-size:18px; font-weight:600;
  cursor:pointer; transition:color .2s ease; color:inherit;
}
.nav-links li:hover{ color:var(--rute-crimson); }
.auth{display:flex; align-items:center; gap:10px;}
.auth a{ text-decoration:none; color:inherit; transition:color .2s ease; }
.auth a:hover{ color:var(--rute-crimson); }
.search-box{
  padding:6px 10px; border:1px solid rgba(255,255,255,.6);
  border-radius:4px; background:rgba(255,255,255,.2); color:#fff;
}

/* underline accent like RUTE */
.nav-links li{ position:relative; }
.nav-links li::after{
  content:""; position:absolute; left:0; right:0; bottom:10px;
  height:2px; background:var(--rute-crimson);
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav-links li:hover::after{ transform:scaleX(1); }

/* ===== MEGA DROPDOWN ===== */
/* Default (at top): white */
.mega-dropdown{
  position:fixed;
  top:var(--nav-height); left:0; right:0;
  height:var(--submenu-height);
  background:#fff;                /* solid white submenu (top-of-page) */
  display:flex;

  align-items:flex-start;
  justify-content:center;

  /* Uses smaller --submenu-gap so the content starts closer to the navbar */
  padding: calc(var(--submenu-gap) + 8px) 60px 20px;

  opacity:0; pointer-events:none; transform:translateY(-20px);
  transition:opacity .6s ease, transform .8s ease, background-color .25s ease, color .25s ease;
  z-index:1099;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
}
.mega-dropdown.active{ opacity:1; transform:translateY(0); pointer-events:all; }

/* When scrolled: menus become gray */
header.scrolled .mega-dropdown{
  background: var(--submenu-scrolled-bg);
}

.menu-content{
  display:none;
  width:100%;
  max-width:1200px;
  justify-content:center;
  gap:80px;
}
.menu-content.active{ display:flex; }
.menu-content div{ min-width:180px; }

.menu-content h4{
  font-size:18px; color:var(--menu-heading-gray); margin-bottom:12px;
  border-bottom:1px solid #d1d5db; padding-bottom:6px; text-align:center;
}
.menu-content a{
  display:block; color:var(--menu-link-gray); text-decoration:none; margin-bottom:8px;
  font-size:16px; text-align:center; transition:color .3s;
}
.menu-content a:hover{ color:var(--rute-crimson); }

/* ===== Banner sits at the top, beneath nav ===== */
.banner-slider { position:relative; margin-top:0; }
.slide {
  width: 100%; height: 100%;
  object-fit: cover; position: absolute; opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active { opacity: 1; z-index: 1; }

/* Set the banner's height via variable (easier to tweak) */
.banner-slider { width: 100%; height: var(--banner-height); overflow: hidden; }
.slides { position: relative; height: 100%; }

/* ===== Home Page Text ===== */
.tubitak-polar-research {
  background: #e9f0fa;
  padding: 60px 20px;
  display: flex; justify-content: center; align-items: center;
}
.research-content {
  width: 100%; max-width: 1200px;
  background: white; padding: 40px; border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.05); text-align: center;
}
.research-content h2 { font-size: 2rem; margin-bottom: 20px; color: #004889; }
.research-content h2 i { color: #00d1b2; margin-right: 10px; }
.research-content p { font-size: 1.1rem; line-height: 1.8rem; color: #333; margin-bottom: 16px; }
.research-tags { margin-top: 20px; }
.research-tags .tag {
  display: inline-block; background: #00d1b2; color: white;
  padding: 6px 12px; border-radius: 20px; margin: 5px; font-size: 0.85rem;
}

/* ===== Background decor ===== */
.background-decor {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0; background: transparent;
}
.decor-img { display: block; margin-bottom: 20px; height: auto; width: auto; max-width: 100%; }
.decor-image-with-text { position: relative; width: 100%; display: flex; justify-content: center; }
.decor-image-with-text .decor-img { width: 100%; height: auto; }

/* ===== News ===== */
.news-section { padding: 50px 10%; background: #f5f9fc; }
.news-header { text-align: center; margin-bottom: 40px; }
.news-header h2 { font-size: 2rem; color: #004d66; }
.news-header p { color: #555; max-width: 700px; margin: 0 auto; }
.news-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px;
}
.news-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
.news-card img { height: 200px; object-fit: cover; }
.news-content { padding: 1rem; }
.news-content h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #003366; }
.read-more { color: #0077b6; font-weight: bold; text-decoration: none; }
.news-content p { color: #666; font-size: 0.95rem; }
.read-more:hover { text-decoration: underline; }

/* ===== Dashboard ===== */
.dashboard {
  background-color: #e9f0fa;
  padding: 40px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}
.chart-container {
  background: white; padding: 20px; border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.chart-container h3 { margin-bottom: 10px; font-size: 18px; }

/* ===== Summary cards ===== */
.summary-section {
  display: flex; justify-content: space-around; flex-wrap: wrap;
  background: #e9f0fa; padding: 20px 0;
}
.summary-card {
  text-align: center; padding: 1.5rem; background: #f8f9fa;
  border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  margin: 10px; flex: 1; min-width: 150px; position: relative;
  border-bottom: 4px solid #00C1FF; transition: transform 0.2s ease;
}
.summary-card:hover { transform: translateY(-4px); }
.summary-card .icon { font-size: 2.5rem; margin-bottom: 0.8rem; color: #00C1FF; transition: transform 0.3s ease; }
.summary-card:hover .icon { transform: scale(1.15); }
.summary-card h4 { margin-bottom: 10px; font-size: 16px; }
.summary-card p { font-size: 20px; font-weight: bold; }

/* ===== Map Section ===== */
.map-section { padding: 2rem; background: #f9fafb; }
.map-box {
  border: 1px solid #ddd; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.map-header {
  text-align: center; padding: 1.5rem 1rem;
  background: linear-gradient(to right, #FFFFFF, #A7C2CC);
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-bottom: -1rem;
}
.map-header h2 { font-size: 1.8rem; color: #1e3a8a; font-weight: 600; margin-bottom: 0.5rem; }
.map-header h2 i { color: #0ea5e9; margin-right: 0.5rem; }
.map-header p { font-size: 1rem; color: #334155; max-width: 700px; margin: 0 auto; }

/* Leaflet tooltip */
.leaflet-tooltip.tase-tooltip {
  background: rgba(220, 38, 38, 0.85); color: #fff; border: none; border-radius: 9999px;
  padding: 8px 14px;
  font: 600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15); pointer-events: none;
}
.leaflet-tooltip.tase-tooltip:before { display: none; }

/* ===== Footer ===== */
.footer {
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  color: #ecf0f1; padding: 40px 20px; font-size: 15px; margin-top: 40px;
  font-family: 'Segoe UI', sans-serif; border-top: 4px solid #00d1b2;
}
.footer-container {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 40px; max-width: 1200px; margin: auto;
}
.footer-left, .footer-right { flex: 1 1 300px; }
.footer-left p, .footer-right p { margin: 10px 0; line-height: 1.6; }
.footer-left strong { font-size: 1.1rem; color: #ffffff; }
.footer a { color: #00d1b2; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-left p i { margin-right: 10px; color: #00d1b2; }

/* ===== Icons in menu (show on hover) ===== */
.nav-links .menu-icon{
  display: inline-block; margin-right: 8px; opacity: 0; transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease; color: var(--rute-crimson);
}
.nav-links li:hover .menu-icon{ opacity:1; transform: translateY(0); }

/* ===== Responsive banner tweaks (optional) ===== */
@media (max-width: 1024px) {
  :root { --banner-height: 600px; }
}
@media (max-width: 640px) {
  :root { --banner-height: 460px; }
}