/* =========================================
   Floating Language Switcher Button
   ========================================= */
.lang-switcher-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99999;
  display: flex;
  align-items: center;
  width: auto;
}

.lang-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
  color: #0f172a;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  user-select: none;
  width: auto;
}

.lang-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.lang-flag {
  width: 24px;
  height: auto;
  border-radius: 2px;
  display: block;
}

@media (max-width: 768px) {
  .lang-switcher-container {
    bottom: 20px;
    right: 20px;
  }

  .lang-btn {
    padding: 12px 20px;
    background: #ffffff !important;
    opacity: 1 !important;
  }
}

/* =========================================
   Fluid Scaling & Hero/Header Styles
   ========================================= */
:root {
  /* Reference width: 375px to 1920px */
  --header-height: clamp(5rem, 5vw, 6rem);
  --font-hero-title: clamp(32px, 3.106vw + 20.36px, 80px);
  --font-hero-subtitle: clamp(16px, 0.517vw + 14.06px, 24px);
}

.hero-title {
  font-size: var(--font-hero-title);
}

.hero-subtitle {
  font-size: var(--font-hero-subtitle);
}

#site-header {
  height: var(--header-height);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#site-header.is-sticky {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Header navigation link look: grayer, bold, with active underline */
#site-header nav a {
  color: #6b7280; /* gray */
  font-weight: bold;
  position: relative;
  transition: color 0.2s ease;
}

#site-header nav a:hover {
  color: #0f172a;
}

/* Active link: primary color + underline */
#site-header nav a.active,
#site-header nav a[aria-current="page"] {
  color: #2563EB;
}

#site-header nav a.active::after,
#site-header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 3px;
  background-color: #2563EB;
  border-radius: 2px;
}

#site-header.is-sticky a {
  color: #6b7280 !important;
}

#site-header.is-sticky a:hover {
  color: #2563EB !important;
}

#site-header.is-sticky #mobile-menu-btn svg {
  stroke: #0f172a;
}

/* Upward Dropdown Logic */
#site-header.dropdown-up:not(.is-sticky) .dropdown-content {
  top: auto !important;
  bottom: 100% !important;
  transform: translateY(-0.5rem) !important;
}

#site-header.dropdown-up:not(.is-sticky) .group:hover .dropdown-content {
  transform: translateY(0) !important;
}

/* =========================================
   Smart Dropdown Directions
   ========================================= */

/* Default: Open Downwards */
.dropdown-content {
  top: 100% !important;
  bottom: auto !important;
  transform: translateY(0.5rem) !important;
}
.group:hover .dropdown-content {
  transform: translateY(0) !important;
}

/* Open Upwards (for index.html bottom or smart flip) */
#site-header.dropdown-up:not(.is-sticky) .dropdown-content,
#site-header .dropdown-content.force-up {
  top: auto !important;
  bottom: 100% !important;
  transform: translateY(-0.5rem) !important;
}
#site-header.dropdown-up:not(.is-sticky) .group:hover .dropdown-content,
#site-header .group:hover .dropdown-content.force-up {
  transform: translateY(0) !important;
}

/* Force Downwards (Override for smart flip) */
#site-header .dropdown-content.force-down {
  top: 100% !important;
  bottom: auto !important;
  transform: translateY(0.5rem) !important;
}
#site-header .group:hover .dropdown-content.force-down {
  transform: translateY(0) !important;
}

/* Spacing fix for upward dropdowns */
#site-header.dropdown-up:not(.is-sticky) .dropdown-content .py-2,
#site-header .dropdown-content.force-up .py-2 {
  padding-bottom: 0.5rem;
  padding-top: 0;
}


/* =========================================
   Layout & Overflow Fixes
   ========================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#hero {
  max-width: 100%;
}

*, ::before, ::after {
  box-sizing: border-box;
}



/* =========================================
   World Map Animation Styles
   ========================================= */
#global-reach-section {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.map-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#world-map-svg {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 200px); /* Yaziya alan birakmak icin */
}

/* 1. All Countries (Default): transparent fill, thin white/gray border */
#world-map-svg path {
  fill: transparent !important;
  stroke: #c0c0c0 !important;
  stroke-width: 0.15 !important;
  transition: fill 0.3s ease, filter 0.3s ease;
  cursor: pointer;
  pointer-events: all !important; /* ensures hover works even with transparent fill */
}
#world-map-svg path:hover {
  fill: rgba(255, 255, 255, 0.1) !important;
}


/* 2. Highlighted Countries: Mavi (Blue) */
#world-map-svg [cc="tr"], #world-map-svg [cc="tr"] path,
#world-map-svg [cc="az"], #world-map-svg [cc="az"] path,
#world-map-svg [cc="al"], #world-map-svg [cc="al"] path,
#world-map-svg [cc="kg"], #world-map-svg [cc="kg"] path,
#world-map-svg [cc="tm"], #world-map-svg [cc="tm"] path,
#world-map-svg [cc="qa"], #world-map-svg [cc="qa"] path,
#world-map-svg [cc="ng"], #world-map-svg [cc="ng"] path,
#world-map-svg [cc="es"], #world-map-svg [cc="es"] path,
#world-map-svg [cc="rs"], #world-map-svg [cc="rs"] path {
  fill: #3b82f6 !important;
  stroke: #3b82f6 !important;
}

/* Interactivity (Hover over teal countries): glow brighter cyan */
#world-map-svg [cc="tr"]:hover, #world-map-svg [cc="tr"]:hover path,
#world-map-svg [cc="az"]:hover, #world-map-svg [cc="az"]:hover path,
#world-map-svg [cc="al"]:hover, #world-map-svg [cc="al"]:hover path,
#world-map-svg [cc="kg"]:hover, #world-map-svg [cc="kg"]:hover path,
#world-map-svg [cc="tm"]:hover, #world-map-svg [cc="tm"]:hover path,
#world-map-svg [cc="qa"]:hover, #world-map-svg [cc="qa"]:hover path,
#world-map-svg [cc="ng"]:hover, #world-map-svg [cc="ng"]:hover path,
#world-map-svg [cc="es"]:hover, #world-map-svg [cc="es"]:hover path,
#world-map-svg [cc="rs"]:hover, #world-map-svg [cc="rs"]:hover path {
  fill: #60a5fa !important;
  filter: drop-shadow(0 0 6px #60a5fa) !important;
}




/* 3. Animation: Kusursuz Ok ve Çizgi (Sync Arrow & Line) */
.animated-arc {
  fill: none !important;
  stroke: #60a5fa !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-dasharray: var(--dash-length) !important;
  stroke-dashoffset: var(--dash-length) !important;
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.8)) !important;
  pointer-events: none !important;
}

.animated-arrow {
  fill: #60a5fa !important;
  filter: drop-shadow(0 0 5px rgba(96, 165, 250, 1)) !important;
  pointer-events: none !important;
}

/* 5 saniyelik döngü. İlk 2 saniye (0-40%) çizim. 2-4 saniye bekleme. 4-4.5 arası silinme. */
@keyframes drawArcSync {
  0% { stroke-dashoffset: var(--dash-length); opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: var(--dash-length); opacity: 0; }
}

@keyframes hideArrowSync {
  0% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; }
}

.map-section-visible .animated-arc {
  animation: drawArcSync 10s linear infinite !important;
}
.map-section-visible .animated-arrow {
  animation: hideArrowSync 10s linear infinite !important;
}

/* =========================================
   Page Transition Animation
   ========================================= */
#main-content {
  animation: pageFadeIn 0.8s ease-out forwards;
}

@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}