:root{ --container:1200px; --radius:12px; }
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }

/* Header iskeleti */
.site-header{ background:#fff; border-bottom:1px solid #eee; }

/* ÜST BAR */
.header-top{ padding:12px 0; }
.header-top__inner{ display:flex; align-items:center; gap:12px; }
.brand__link{ font-weight:700; color:#111; font-size:20px; text-decoration:none; }

/* Arama (desktop) */
.site-search{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.site-search__input{
  width:520px; max-width:60vw; height:44px;
  border:1px solid #ddd; border-radius:999px; padding:0 14px; background:#fff;
}
.site-search__btn{
  height:44px; width:44px; border-radius:999px;
  border:1px solid #111; background:#111; color:#fff; cursor:pointer;
}

/* Mobil arama butonu (desktop’ta gizli) */
.site-search-toggle{
  display:none; margin-left:auto; height:40px; width:40px;
  border:1px solid #111; border-radius:999px; background:#111; color:#fff;
}

/* MOBİL HAMBURGER (üst barda, search butonunun sağında) */
.hamburger{
  display:none; height:40px; width:40px;
  border:1px solid #111; border-radius:8px; background:#fff; color:#111; cursor:pointer;
}

/* Mobil arama paneli */
.mobile-search-panel{ border-top:1px solid #eee; background:#fafafa; padding:12px 16px; }
.mobile-search-form{ display:flex; gap:8px; }
.mobile-search-form input{
  flex:1; height:42px; border:1px solid #ddd; border-radius:8px; padding:0 10px;
}
.mobile-search-form button{
  height:42px; padding:0 14px; border:1px solid #111; background:#111; color:#fff; border-radius:8px;
}

/* ALT BAR (MENÜ) */
.header-nav{ border-top:1px solid #f2f2f2; }
.header-nav__inner{ display:flex; align-items:center; gap:16px; position:relative; }

.primary-menu{ width:100%; }
.primary-menu__list{
  display:flex; gap:18px; list-style:none; margin:0; padding:10px 0; flex-wrap:wrap;
}

/* Link görünümü + KIRMIZI underline animasyonu */
.primary-menu__list a{
  text-decoration:none; color:#333; padding:8px 6px; border-radius:8px;
  position:relative;
}
.primary-menu__list a:hover{ background:none; } /* gri hover’ı iptal et */
.primary-menu__list a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:#d60000;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.primary-menu__list a:hover::after,
.primary-menu__list a:focus::after,
.primary-menu__list .current-menu-item > a::after{
  transform:scaleX(1);
}

/* ------------------- Responsive ------------------- */
@media (max-width: 992px){

  /* Desktop arama gizlenir, mobil buton + hamburger görünür */
  .site-search{ display:none; }
  .site-search-toggle{
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
  }
  .hamburger{
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* NAV satırını kolona çevir: menü aşağı açılacak */
  .header-nav__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Menü aşağı doğru açılır (slide-down) */
  .primary-menu__list{
    display:block;           /* akışta dursun */
    width:100%;
    padding:0; margin:0;
    max-height:0;            /* kapalı */
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .primary-menu__list.is-open{
    max-height:60vh;         /* açılınca aşağı genişler */
  }

  .primary-menu__list li{ border-top:1px solid #f0f0f0; }
  .primary-menu__list a{ display:block; padding:12px 0; }
}

/* =========================================
   YENİ EKLENEN LOGIN/REGISTER BUTONLARI
   ========================================= */

/* Butonlar için ortak temel stil */
.btn-auth {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-size: 14px;
  text-align: center;
  margin-left: 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* 1. Register Butonu (Beyaz zemin, siyah yazı/border) */
.btn-auth--register {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
.btn-auth--register:hover,
.btn-auth--register:focus {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* 2. Login Butonu (Siyah zemin, beyaz yazı) */
.btn-auth--login {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}
.btn-auth--login:hover,
.btn-auth--login:focus {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

/* =========================================
   HEADER DÜZENLEMELERİ (MOBİL/DESKTOP)
   ========================================= */

/* 1. Orijinal Arama Formunu ve Mobil İkonunu Gizle */
.site-header .site-search,
.site-header .site-search-toggle,
.site-header .mobile-search-panel {
  display: none !important;
}

/* 2. Butonları ve Hamburgeri sağa yaslamak için
   .header-top__inner'da marka (brand) dışındaki her şeyi
   sağa iteceğiz.
*/
.header-auth-buttons {
  margin-left: auto; /* Bu, butonları (ve hamburgeri) sağa iter */
  display: flex; /* Butonların yan yana durması için */
  align-items: center;
}

/* 3. Mobil Butonları için ayar (küçük ekran) */
@media (max-width: 992px) {
  /* Mobilde butonları biraz küçültelim */
  .btn-auth {
    padding: 6px 12px; /* Dikey 6px, Yatay 12px */
    font-size: 13px;
    margin-left: 6px; /* Butonlar arası boşluk */
  }
}

/* 4. Desktop Butonları için ayar (büyük ekran) */
@media (min-width: 992.01px) {
  /* Masaüstü boyutları */
  .btn-auth {
    padding: 8px 20px;
    font-size: 14px;
    margin-left: 10px;
  }
}