:root {
  --max: 1150px;
  --muted: #666;
  --primary: #007bff;
  /* Yeni Dark Mode renk değişkenleri */
  --dark-bg-primary: #0d0d0d;
  --dark-bg-secondary: #121212;
  --dark-bg-tertiary: #1a1a1a;
  --dark-border: #333;
  --dark-text-primary: #eaeaea;
  --dark-text-secondary: #eee;
  --dark-text-muted: #ccc;
  --dark-hover-bg: #222;
  --dark-ad-label-bg: #ffb700;
  --dark-ad-label-text: #111;
}

/* ===== HEADER ===== */
header.site {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0,0,0,.03);
  padding: 8px 0;
  transition: background .3s, color .3s, box-shadow .3s; /* box-shadow da eklendi */
  /* İyileştirme: Donanım hızlandırmayı tetikle */
  will-change: transform; 
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 14px;
}

/* ☰ MENU BUTTON */
.menu-toggle {
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  transition: color .3s;
  /* İyileştirme: Odağı ve tıklama alanını genişletmek için */
  padding: 5px; 
  margin: -5px;
}

/* LOGO */
.logo-link {
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  transition: color .3s;
}

/* 🌙 DARK MODE TOGGLE */
.theme-toggle {
  font-size: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  transition: color .3s;
  /* İyileştirme: Odağı ve tıklama alanını genişletmek için */
  padding: 5px; 
  margin: -5px;
}
.theme-toggle:hover { color: var(--primary); }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 0;
  transition: background .3s;
}
.mobile-menu.show { display: flex; }

.mobile-menu a {
  padding: 12px 18px;
  text-decoration: none;
  color: #111;
  font-size: 1rem;
  transition: background .3s, color .3s;
  /* İyileştirme: Daha iyi tıklanabilirlik için blok element yap */
  display: block; 
}
.mobile-menu a:hover {
  background: #f0f0f0;
}

/* 🔍 Mobil arama */
.mobile-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}
.mobile-search input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  /* İyileştirme: Mobil cihazlarda input odağına basıldığında yakınlaştırmayı engelle */
  font-size: 1rem; 
}
.mobile-search button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  /* İyileştirme: Hover efekti ekle */
  transition: background .2s ease;
}
.mobile-search button:hover {
  background: darken(var(--primary), 10%); /* CSS değişkenleri direkt desteklemez, SASS/LESS için */
  /* Geçici olarak: */
  filter: brightness(0.9); 
}


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .theme-toggle { font-size: 1.3rem; }
  .logo-link { font-size: 1.4rem; }
}

/* ===== DARK MODE ===== */
body.dark {
  background: var(--dark-bg-primary); /* Değişken kullanıldı */
  color: var(--dark-text-primary);     /* Değişken kullanıldı */
  transition: background .3s, color .3s;
}
body.dark header.site {
  background: var(--dark-bg-secondary); /* Değişken kullanıldı */
  border-color: var(--dark-border);     /* Değişken kullanıldı */
  box-shadow: 0 2px 4px rgba(255,255,255,.05);
}
body.dark .logo-link { color: var(--dark-text-secondary); } /* Değişken kullanıldı */
body.dark .theme-toggle { color: var(--dark-text-muted); }   /* Değişken kullanıldı */
body.dark .menu-toggle { color: var(--dark-text-secondary); } /* Değişken kullanıldı */

/* Mobil menü - dark görünür */
body.dark .mobile-menu {
  background: var(--dark-bg-tertiary); /* Değişken kullanıldı */
  border-color: var(--dark-border);     /* Değişken kullanıldı */
}
body.dark .mobile-menu a {
  color: var(--dark-text-secondary);    /* Değişken kullanıldı */
}
body.dark .mobile-menu a:hover {
  background: var(--dark-hover-bg);     /* Değişken kullanıldı */
}
body.dark .mobile-search input {
  background: var(--dark-bg-tertiary);  /* Değişken kullanıldı */
  color: var(--dark-text-secondary);    /* Değişken kullanıldı */
  border-color: var(--dark-border);     /* Değişken kullanıldı */
}
body.dark .mobile-search button {
  background: var(--primary); /* Bu zaten primary, değiştirmeye gerek yok */
}

/* Video sayfası özel dark mode stilleri de eklendi (önceki koddan) */
body.dark .excerpt,
body.dark .meta,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark p { color:var(--dark-text-secondary) !important; } /* Daha tutarlı değişken */
body.dark .related-item{background:var(--dark-bg-tertiary);border-color:var(--dark-border);}
body.dark .related-item h3{color:var(--dark-text-secondary);}
body.dark .ad-space div{border-color:var(--dark-border);color:#aaa;} /* #aaa sabit kaldı */
body.dark .ad-label{background:var(--dark-ad-label-bg);color:var(--dark-ad-label-text);}


/* ===== DESKTOP MENU (dar görünüm) ===== */
@media (min-width: 769px) {
  .mobile-menu {
    position: absolute;
    top: 100%;
    /* `left` ve `transform` merkezleme için */
    left: 50%; /* 30% yerine 50% daha mantıklı bir merkezleme başlangıcı */
    transform: translateX(-50%); 
    width: 380px;            /* menü genişliği */
    max-height: 300px;       /* menü yüksekliği */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
    overflow: hidden;
    animation: dropdown .25s ease forwards; /* 'forwards' eklendi */
    /* İyileştirme: Başlangıçta gizli tut */
    opacity: 0; 
    transform: translate(-50%, -10px);
  }
  
  /* .mobile-menu.show kuralını Javascript ile ekleyeceksiniz */
  .mobile-menu.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .mobile-menu a {
    text-align: center;
  }

  /* Animasyon artık sadece .mobile-menu.show sınıfında tetiklenmeli */
  @keyframes dropdown {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}