/* ===== Temel ayarlar ===== */
*, *::before, *::after { 
  box-sizing: border-box; 
}

:root{
  --brand-blue: #2B77F6;            /* işletme mavisi */
  --brand-text: #0B1220;
  --header-h: 64px;
  --promo-h-desktop: 44px;
  --promo-h-mobile: 48px;           /* Mobilde daha yüksek */
  --radius-lg: 12px;
}

/* ===== Hamburger Menu Data Attributes ===== */
.hamburger-menu[hidden] { 
  display: none !important; 
}

.no-scroll { 
  overflow: hidden !important; 
}

html, body { 
  max-width: 100%; 
  overflow-x: clip; 
}

body { 
  margin: 0; 
  color: var(--brand-text); 
  background: #f8fafc; 
}

/* ===== Kampanya barı ===== */
.promo-bar{
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0;
  z-index: 99999;              /* header'dan çok daha büyük */
  background: linear-gradient(90deg, #6a5cff, #7a4bff);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Promo bar açıkken sayfayı aşağı it */
body.has-promo{
  padding-top: calc(var(--promo-h-desktop) + var(--header-h));
}

.promo-inner{
  max-width: 1200px; 
  margin: 0 auto;
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: var(--promo-h-desktop);
  position: relative;
}

/* Ensure promo link text is visible (white) on all pages */
.promo-bar a,
.promo-bar a:visited {
  color: #ffffff !important;
  text-decoration: none;
}

.promo-bar a:hover {
  opacity: 0.95;
}

.promo-icon{ 
  font-size: 20px; 
  line-height: 1; 
}

.promo-text{ 
  font-size: 14px; 
  text-align: center;
}

.promo-content{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Header ===== */
.navbar{
  position: fixed; 
  z-index: 1000;
  top: var(--promo-h-desktop); /* Promo bar'ın hemen altında */
  left: 0;
  right: 0;
  background: #fff; 
  border-bottom: 1px solid #eaeef4;
}

.nav-inner{
  max-width: 1200px; 
  margin-inline: auto;
  display: grid; 
  grid-template-columns: auto 1fr auto auto; /* brand | nav | cta | burger */
  align-items: center;
  column-gap: 56px;                 /* logo-nav ve nav-cta mesafesi (desktop) */
  padding: 8px 20px;
  min-height: var(--header-h);
}

/* Logo */
.brand{
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  text-decoration: none; 
}

.brand-logo{
  width: 38px; 
  height: auto; 
  object-fit: cover;
  border-radius: 6px;
}

.brand-name{
  font-weight: 800; 
  letter-spacing: .5px; 
  color: var(--brand-text); 
  font-size: 18px; 
}

/* Nav */
.nav-links{
  min-width:0; 
  justify-self: center; 
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link{
  text-decoration:none; 
  color:#1f2937; 
  padding:8px 6px; 
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-toggle i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.has-dropdown:hover .dropdown-toggle i {
  transform: rotate(180deg);
}

.nav-link:hover {
  color: #1e293b;
  background: rgba(37,99,235,.05);
}

/* Dropdown */
.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 240px;
  padding: 12px;
  display: none;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
  z-index: 100;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.has-dropdown.open .dropdown,
.has-dropdown:hover .dropdown {
  opacity: 1;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.dropdown a:hover {
  background: rgba(37,99,235,.08);
  color: #1e293b;
}

@media (hover: hover) {
  .has-dropdown:hover .dropdown {
    display: block;
  }
}

/* CTA (desktop) */
.cta-join{
  padding: 10px 16px; 
  border-radius: 999px;
  background: var(--brand-blue); 
  color: #fff; 
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700; 
  letter-spacing:.2px; 
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 44px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.cta-join:hover{
  filter: brightness(1.05); 
  transform: translateY(-1px);
}

/* Hamburger (sadece mobilde görünür) */
.hamburger{
  display: none; /* Desktop'ta gizli */
  width: 40px; 
  height: 40px;
  border:0; 
  background: transparent; 
  color:#0b1220;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  background: #1e293b;
  transition: .2s;
  border-radius: 1px;
}

.hamburger span:nth-child(1) {
  top: 11px;
}

.hamburger span:nth-child(2) {
  top: 17px;
}

.hamburger span:nth-child(3) {
  top: 23px;
}

/* ===== Mobil kırılım ===== */
@media (max-width: 1024px){
  :root{ 
    --header-h: 56px; 
  }
  
  .navbar{
    top: calc(var(--promo-h-mobile) + 8px); /* Mobilde promo bar + ekstra mesafe */
    position: fixed;
    left: 0;
    right: 0;
  }

  /* header–body arası gereksiz boşluk fix */
  .page-main > *:first-child { 
    margin-top: 0; 
  }
  
  .page-main { 
    padding-top: 8px; 
  }

  /* Header düzeni: logo | hamburger */
  .nav-inner{
    grid-template-columns: auto auto; 
    column-gap: 24px; /* 12px → 24px (daha fazla mesafe) */
    padding: 8px 12px;
    justify-content: space-between; /* Logo ve hamburger'i uçlara yasla */
  }
  
  .nav-links{ 
    display:none; 
  }
  
  .cta-join{ 
    display:none; 
  }           /* mobilde header içinden kalkıyor */
  
  .hamburger{ 
    display: inline-flex !important; 
    align-items:center; 
    justify-content:center; 
    width: 32px; 
    height: 32px; 
    cursor: pointer;
    z-index: 1001;
  }
  
  .brand-logo{ 
    width: 30px; 
  }
  
  .brand-name{ 
    font-size: 16px; 
  }
}

/* Çok küçük cihaz */
@media (max-width: 360px){
  .hamburger{ 
    width: 28px; 
    height: 28px; 
  }
  
  .brand-name{ 
    font-size: 15px; 
  }
  
  /* Ultra küçük cihazlarda da header pozisyonu doğru olsun */
  .navbar{
    top: calc(var(--promo-h-mobile) + 8px);
  }
}

/* Mobil promo bar padding */
@media (max-width: 1024px){
  body.has-promo{
    padding-top: calc(var(--promo-h-mobile) + 8px + var(--header-h));
  }
  
  /* Mobilde header'ın altından başla */
  .page-main{
    margin-top: calc(var(--promo-h-mobile) + 8px + var(--header-h));
  }
}

/* ===== YENİ MOBİL MENÜ TASARIMI ===== */
.mobile-menu{
  position: fixed; 
  inset: 0; 
  z-index: 99999;
  background: rgba(15,23,42,.45);
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.mobile-menu.is-open{ 
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu__panel{
  position: absolute; 
  inset: 0 auto 0 0; 
  width: min(82vw, 340px);
  background: #fff; 
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow-y: auto;
}

/* Mobil menü header ve kapatma butonu */
.mobile-menu-header {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mobile-menu-close {
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
}

.mobile-menu-close:hover {
  background: #e5e7eb;
  color: #374151;
  transform: scale(1.05);
}

.mobile-menu-close i {
  font-size: 18px;
}

/* YENİ NAVIGASYON TASARIMI */
.mobile-nav{ 
  flex: 1;
  padding: 8px;
}

.mobile-nav-section {
  margin-bottom: 2px; /* Çok az mesafe */
  border-radius: 8px;
  overflow: hidden;
}

.mobile-nav-toggle {
  width: 100%;
  background: #f8fafc;
  border: none;
    padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

.mobile-nav-toggle:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
}

.mobile-nav-toggle.active {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.mobile-nav-title {
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  margin: 0;
}

.toggle-icon {
  font-size: 14px;
  color: inherit;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.mobile-nav-toggle.active .toggle-icon {
  transform: rotate(180deg);
}

/* YENİ ALT MENÜ TASARIMI */
.mobile-nav-links {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 8px 0;
  display: none; /* Varsayılan olarak gizli */
}

.mobile-nav-links.open {
  display: block; /* Açıldığında görünür */
}

.mobile-nav-link{
  padding: 10px 20px;
  text-decoration: none; 
  color: #374151;
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid transparent;
}

.mobile-nav-link:hover {
  background: #f8fafc;
  color: #1f2937;
  border-left-color: #3b82f6;
}

.mobile-nav-link i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: #6b7280;
}

/* CTA Button */
.menu-cta{
  margin: 16px;
  width: calc(100% - 32px);
  padding: 16px;
  border-radius: 12px; 
  border: 0;
  background: var(--brand-blue); 
  color:#fff; 
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.menu-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Güvenlik: yatay taşmaları önle */
img{ 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

/* Font Awesome fallback */
.fas, .fa {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Pro', sans-serif;
  font-weight: 900;
}

/* Dropdown arrow fallback */
.dropdown-toggle i::before {
  content: '▼';
}

.has-dropdown:hover .dropdown-toggle i::before {
  content: '▲';
}