<header class="site-header" id="header">
  <div class="header-inner">
    <a href="/" class="logo">motif</a>
    <nav>
      <a href="/kategoriler">Kategoriler</a>
      <a href="/about">About</a>
      <a href="#" class="btn btn-primary">Start</a>
    </nav>
  </div>
</header>

<style>
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(248,247,244,0.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s;
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
nav { display: flex; align-items: center; gap: 0.5rem; }
</style>