/* ============================================================
   Silicon Tales: paylaşılan site header'ı (TÜM sayfalarda aynı İÇERİK).
   Tek kaynak: hem Astro sayfaları (BaseLayout) hem public/ altındaki
   elle yazılmış statik HTML sayfaları bu dosyayı kullanır.

   Self-contained: tasarım token değerleri sabitlenmiştir, hiçbir global
   CSS değişkenine bağlı değildir. Sınıflar "st-" önekli → her sayfanın
   kendi .brand / .nav / .site sınıflarıyla ÇAKIŞMAZ.

   TEMA: header'ın İÇERİĞİ (logo, marka yazısı, nav) her sayfada birebir
   aynıdır; yalnız RENKLER aşağıdaki --sth-* değişkenleriyle sayfa temasına
   göre değiştirilebilir. Bir sayfa (örn. krem temalı Amiga) kendi <style>
   içinde `.st-head{ --sth-bg:...; --sth-ink:...; ... }` override eder.
   Varsayılan = koyu tema.
   ============================================================ */
@import url('/fonts/switzer.css');

.st-head {
  /* tema renkleri (varsayılan: koyu) — sayfa override edebilir */
  --sth-bg: rgba(11, 13, 17, 0.82);
  --sth-border: #232a35;
  --sth-ink: #f7f5ef;
  --sth-nav: #9aa1ad;
  --sth-accent: #ff9d3c;

  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--sth-border);
  background: var(--sth-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.st-head__inner {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding: 0 1.5rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-brand {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Switzer', 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--sth-ink);
  text-decoration: none;
  text-shadow: var(--sth-brand-glow, 0 0 10px rgba(176, 226, 112, 0.30), 0 0 22px rgba(122, 196, 140, 0.16));
}

.st-brand__logo {
  height: 32px;
  width: auto;
  display: block;
  filter: var(--sth-logo-glow, drop-shadow(0 0 5px rgba(176, 226, 112, 0.55)) drop-shadow(0 0 14px rgba(122, 196, 140, 0.40)));
  transition: filter 0.25s ease;
}

/* pastel yeşil sis / glow: logo + marka yazısının etrafında yumuşak fog hâlesi
   (tema ile kapatılabilir: --sth-brand-fog: transparent) */
.st-brand::before {
  content: "";
  position: absolute;
  inset: -0.7rem -1.4rem;
  z-index: -1;
  border-radius: 1.1rem;
  background: var(--sth-brand-fog, radial-gradient(ellipse at 25% 50%,
              rgba(176, 226, 112, 0.45),
              rgba(122, 196, 140, 0.17) 56%,
              transparent 82%));
  filter: blur(17px);
  opacity: 0.9;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.st-brand:hover::before { opacity: 1; }

.st-brand:hover .st-brand__logo {
  filter: var(--sth-logo-glow-hover, drop-shadow(0 0 7px rgba(176, 226, 112, 0.75)) drop-shadow(0 0 20px rgba(122, 196, 140, 0.55)));
}

.st-nav {
  display: flex;
  gap: 1.6rem;
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.st-nav a {
  color: var(--sth-nav);
  text-decoration: none;
  transition: color 0.18s ease;
}

.st-nav a:hover,
.st-nav a[aria-current='page'] {
  color: var(--sth-accent);
}

.st-head__right { display: flex; align-items: center; gap: 1.6rem; }
.st-social { display: flex; align-items: center; gap: 0.85rem; padding-left: 1.5rem; border-left: 1px solid var(--sth-border); }

/* "Follow us" — sıcak, davetkâr CTA: gözü sosyal ikonlara yönlendirir.
   Etiket her zaman accent renginde (header'daki en sıcak öğe); yanındaki
   yumuşak nabız "canlı topluluk, bize katıl" hissi verir. */
.st-social__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sth-accent);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.st-social__label::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--sth-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sth-accent) 55%, transparent);
  animation: st-follow-pulse 2.8s ease-out infinite;
}
@keyframes st-follow-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sth-accent) 55%, transparent); }
  60%  { box-shadow: 0 0 0 0.5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.st-social a { color: var(--sth-nav); display: inline-flex; align-items: center; transition: color .18s ease, transform .18s ease, filter .18s ease; }
.st-social a:hover { color: var(--sth-accent); transform: translateY(-1px); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sth-accent) 50%, transparent)); }
.st-social svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .st-social__label::before { animation: none; }
}

@media (max-width: 640px) {
  .st-head__inner { padding: 0 1.1rem; }
  .st-nav { gap: 1.1rem; }
  .st-social { display: none; }
}