/* ═══════════════════════════════════════════════
   BLUE THEME - Mavi Tema
   Profesyonel, Koyu, Mavi Ton Renginde
   ═══════════════════════════════════════════════ */

:root {
  /* Birincil Renkler */
  --primary:      #0052CC;
  --primary-dark: #003D99;
  --primary-glow: rgba(0, 82, 204, 0.18);
  
  /* Eski sistem ile uyumluluk */
  --red:          #0052CC;
  --red-dark:     #003D99;
  --red-glow:     rgba(0, 82, 204, 0.18);
  
  /* Arka Plan Renkler */
  --dark:         #0D1B2A;
  --dark2:        #1A2F4F;
  --dark3:        #243B63;
  --dark4:        #2D4A7D;
  --gray:         #3D5A80;
  --gray2:        #4D6A96;
  --light:        #E8EEF7;
  --muted:        #7A8FA0;
  --white:        #FFFFFF;
  
  /* Accent Renkler */
  --accent:       #00A8FF;
  --success:      #06A77D;
  --warning:      #FF9500;
  --danger:       #E63946;
  
  /* Tipografi */
  --font-h:       'Montserrat', sans-serif;
  --font-b:       'Barlow', sans-serif;
  
  /* Tasarım Değişkenleri */
  --radius:       4px;
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.65);
  --transition:   0.25s ease;
}

html { scroll-behavior: smooth; }
body { 
  font-family: var(--font-b); 
  background: var(--dark); 
  color: var(--light); 
  line-height: 1.65; 
  overflow-x: hidden; 
}

/* Element Stilleri */
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
ul { list-style: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.section { padding: 90px 0; }
.section-sm { padding: 56px 0; }

/* ── TOPBAR ──────────────────────────────────── */
.topbar { 
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  font-size: 13px; 
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.15);
}
.topbar-inner { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 9px 32px; 
  max-width: 1280px; 
  margin: 0 auto; 
}
.topbar-left { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  opacity: .95; 
  color: var(--white);
}
.topbar-right a { 
  color: var(--white); 
  font-weight: 600;
  transition: opacity var(--transition);
}
.topbar-right a:hover {
  opacity: .8;
}
.sep { opacity: .5; }

.language-selector { display: flex; gap: 8px; }
.lang-link { 
  color: var(--white); 
  opacity: .7; 
  font-weight: 600; 
  transition: opacity .2s; 
  text-decoration: none; 
  padding: 0 4px; 
}
.lang-link:hover, .lang-link.active { opacity: 1; }

/* ── NAVBAR ──────────────────────────────────── */
#navbar { 
  background: var(--dark2); 
  border-bottom: 2px solid var(--gray); 
  position: sticky; 
  top: 0; 
  z-index: 200; 
  transition: box-shadow .3s; 
}
#navbar.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

.nav-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  height: 74px; 
}

.logo { 
  font-family: var(--font-h); 
  font-size: 32px; 
  font-weight: 900; 
  letter-spacing: .06em; 
  color: var(--white);
}
.logo span { color: var(--primary); }

.nav-links { display: flex; gap: 0; }
.nav-links li { position: relative; }
.nav-links .nav-link { 
  display: block; 
  padding: 0 17px; 
  height: 74px; 
  line-height: 74px; 
  font-size: 13px; 
  font-weight: 600; 
  letter-spacing: .07em; 
  text-transform: uppercase; 
  color: #7A8FA0; 
  transition: color var(--transition), background var(--transition); 
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active { color: var(--white); }
.nav-links .nav-link.active { border-bottom: 3px solid var(--primary); }
.nav-links .has-drop:hover > .nav-link { background: var(--dark3); color: var(--white); }

.dropdown { 
  display: none; 
  position: absolute; 
  top: 74px; 
  left: 0; 
  background: var(--dark3); 
  border: 1px solid var(--gray); 
  min-width: 210px; 
  box-shadow: var(--shadow); 
  border-radius: var(--radius);
}
.has-drop:hover .dropdown { display: block; }
.dropdown li a { 
  display: block; 
  padding: 13px 20px; 
  font-size: 13px; 
  color: #7A8FA0; 
  border-bottom: 1px solid var(--gray); 
  transition: background var(--transition), color var(--transition); 
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover { 
  background: var(--gray); 
  color: var(--white); 
}
.arrow { font-size: 10px; margin-left: 3px; }

.btn-call { 
  background: var(--primary); 
  color: var(--white); 
  padding: 10px 20px; 
  border-radius: var(--radius); 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: .05em; 
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-call:hover { 
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 26px; height: 2px; background: var(--white); transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(12px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-12px); }

/* ── BUTTONS ─────────────────────────────────── */
.btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 13px 28px; 
  border-radius: var(--radius); 
  font-family: var(--font-b); 
  font-size: 14px; 
  font-weight: 700; 
  letter-spacing: .06em; 
  text-transform: uppercase; 
  cursor: pointer; 
  border: 2px solid transparent; 
  transition: all var(--transition); 
}
.btn-primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--dark); }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: var(--white); }

/* ── HERO SLIDER ─────────────────────────────── */
.hero { 
  position: relative; 
  height: 620px; 
  overflow: hidden; 
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
}
.hero-slide { 
  position: absolute; 
  inset: 0; 
  opacity: 0; 
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); 
  background: linear-gradient(110deg, var(--dark) 55%, var(--dark3) 100%); 
  display: flex; 
  align-items: center; 
  animation: slideZoom 8s ease forwards; 
}
.hero-slide.active { opacity: 1; z-index: 1; animation: slideZoomActive 8s ease forwards; }
.hero-slide::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0H50L0 50V60zm60 0V50L10 0H0l60 60z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E"); 
  opacity: 0.5;
}
.hero-content { position: relative; z-index: 2; max-width: 680px; }
.hero-badge { 
  display: inline-block; 
  background: var(--accent); 
  color: var(--dark); 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  padding: 5px 14px; 
  margin-bottom: 20px; 
  border-radius: 2px; 
  animation: slideIn 0.6s ease 0.2s backwards; 
}
.hero-title { 
  font-family: var(--font-h); 
  font-size: clamp(42px, 6vw, 76px); 
  font-weight: 900; 
  line-height: 1.02; 
  letter-spacing: .02em; 
  text-transform: uppercase; 
  margin-bottom: 20px; 
  animation: slideIn 0.6s ease 0.3s backwards;
  color: var(--white);
}
.hero-title span { color: var(--primary); }
.hero-text { 
  font-size: 17px; 
  color: var(--muted); 
  max-width: 500px; 
  margin-bottom: 36px; 
  line-height: 1.7; 
  animation: slideIn 0.6s ease 0.4s backwards; 
}