/* =========================================================
   header.css — Üst bilgi çubuğu + ana menü
   ========================================================= */

/* ---------- Üst bilgi çubuğu ---------- */
.topbar{
  background: var(--black);
  color: rgba(255,255,255,.75);
  font-size:.82rem;
  font-family: var(--font-button);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:10px;
  padding-bottom:10px;
  gap:20px;
}
.topbar-left, .topbar-center, .topbar-right, .topbar-social{
  display:flex;
  align-items:center;
  gap:20px;
}
.topbar-item{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar-item i{ color: var(--gold); }
.topbar-social{ gap:12px; padding-left:20px; border-left:1px solid rgba(255,255,255,.15); }
.topbar-social a{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(255,255,255,.08);
  color: var(--white);
  transition: var(--transition);
  font-size:.8rem;
}
.topbar-social a:hover{ background: var(--gold); color:var(--black); }

/* ---------- Ana menü / header ---------- */
.main-header{
  position: sticky;
  top:0;
  left:0;
  right:0;
  width:100%;
  background: var(--white);
  z-index: 500;
  box-shadow: 0 2px 20px rgba(17,17,17,.06);
  transition: padding .3s ease, box-shadow .3s ease;
}
.main-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-top:18px;
  padding-bottom:18px;
  transition: padding .3s ease;
}

.main-header.scrolled .container{
  padding-top:10px;
  padding-bottom:10px;
}
.main-header.scrolled{ box-shadow: 0 4px 25px rgba(17,17,17,.12); }

.logo{ display:flex; align-items:center; gap:12px; }
.logo-image{
  display:block;
  width:clamp(240px, 24vw, 350px);
  max-width:100%;
  height:auto;
}
.logo-mark{
  width:52px; height:52px;
  border:2px solid var(--gold);
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading);
  font-weight:700;
  color: var(--gold);
  font-size:1.1rem;
  transition: var(--transition);
}
.main-header.scrolled .logo-mark{ width:42px; height:42px; font-size:.95rem; }
.main-header.scrolled .logo-image{ width:clamp(220px, 22vw, 315px); }

.logo-text .name{
  font-family: var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  color: var(--black);
  letter-spacing:.5px;
  line-height:1.1;
}
.logo-text .tagline{
  font-family: var(--font-button);
  font-size:.62rem;
  letter-spacing:3px;
  color: var(--gold-dark);
  text-transform:uppercase;
}

.main-nav ul{ display:flex; align-items:center; gap:38px; }
.main-nav a{
  font-family: var(--font-button);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.8px;
  text-transform:uppercase;
  color: var(--black);
  position:relative;
  padding: 6px 0;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--gold);
  transition: width .3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{ width:100%; }
.main-nav a.active{ color: var(--gold-dark); }

.header-actions{ display:flex; align-items:center; gap:22px; }

.header-phone{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-button);
  font-weight:600;
  font-size:.85rem;
}
.header-phone i{
  width:38px;height:38px;border-radius:50%;
  background: var(--gray-light);
  color: var(--gold-dark);
  display:flex;align-items:center;justify-content:center;
}

/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:30px;
  z-index:600;
}
.hamburger span{
  height:2px;
  background: var(--black);
  border-radius:2px;
  transition: var(--transition);
}
.hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobil menü overlay */
@media (max-width: 992px){
  .main-nav{
    position: fixed;
    top:0; right:-100%;
    width: min(320px, 82%);
    height:100vh;
    background: var(--black);
    padding: 100px 34px 40px;
    transition: right .4s ease;
    z-index:550;
  }
  .main-nav.active{ right:0; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:26px; }
  .main-nav a{ color: var(--white); font-size:1rem; }
  .header-phone{ display:none; }
  .hamburger{ display:flex; }
  .menu-overlay{
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,.5);
    z-index:540;
  }
  .menu-overlay.active{ display:block; }
}