/* =========================
   ENERGIA-LIKE HEADER (SOLID)
   Works with your markup
   ========================= */

.siteHeader{
  position: sticky; /* Energia gibi: üstte kalsın ama boşluk yapmasın */
  top: 0;
  z-index: 1200;
  background: #fff;
}

/* --- Top Strip --- */
.topStrip{
  background: #243b4a; /* koyu mavi-gri */
  color: rgba(255,255,255,.88);
  font-size: 14px;
}

.topStripInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
}

.tsLeft{ display:flex; align-items:center; gap:12px; }

.tsBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  color:#fff;
}

.tsRight{
  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.tsLink{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tsLink:hover{ color:#fff; }

.tsIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight: 800;
  line-height: 1;
}
.tsIcon:hover{ background: rgba(255,255,255,.18); }

/* --- Main Nav --- */
.mainNav{
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.mainNavInner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
}

/* Brand */
.brand{
  display: flex;
  align-items: center;
}
.brand-logo{
  height: 48px;        /* header için ideal */
  width: auto;         /* oranı koru */
  max-width: 240px;    /* aşırı uzamasın */
  object-fit: contain;
}
.brandText{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.2px;
}

/* Nav links (Energia hissi: sade, kalın, underline hover) */
.navlinks{
  display:flex;
  align-items:center;
  gap: 22px;
  flex: 1;
  justify-content: center;
}

.navlinks a{
  position: relative;
  text-decoration:none;
  color: rgba(15,23,42,.80);
  font-weight: 800;
  padding: 10px 6px;
  border-radius: 10px;
}

.navlinks a:hover{
  color: rgba(15,23,42,.95);
}

.navlinks a::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 3px;
  background: rgba(34,197,94,.0);
  transform: scaleX(0);
  transform-origin:left;
  transition: .18s ease;
  border-radius: 99px;
}
.navlinks a:hover::after{
  background: rgba(34,197,94,.95);
  transform: scaleX(1);
}

/* Right side */
.navRight{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 280px;
  justify-content: flex-end;
}

.callBox{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.callLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}
.callPhone{
  font-size: 18px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
  text-decoration:none;
  letter-spacing: .2px;
}
.callPhone:hover{ color:#0f172a; }

/* CTA button - Energia “Request a Quote” gibi */
.btn.navCta{
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Senin btn sistemin varsa bunu uyum için ekliyorum */
.btnPrimary{
  background: #22c55e;
  color:#fff;
  border: 1px solid rgba(0,0,0,.06);
}
.btnPrimary:hover{ filter: brightness(.95); }

/* Mobile toggle */
.navToggle{
  display:none;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  cursor:pointer;
}

/* Mobile Panel */
.navPanel{
  display:none;
  padding: 10px 0 18px;
}
body.navOpen .navPanel{ display:block; }

.navPanelLinks{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.navPanelLinks a{
  text-decoration:none;
  color: rgba(15,23,42,.90);
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15,23,42,.03);
}
.navPanelLinks a:hover{ background: rgba(34,197,94,.10); }

.navPanelCta{
  display:flex;
  gap: 10px;
  padding-top: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .navlinks{ display:none; }
  .navToggle{ display:inline-flex; align-items:center; justify-content:center; }
  .brand{ min-width: unset; }
  .navRight{ min-width: unset; }
  .callBox{ display:none; } /* Energia mobilde genelde gizli */
}

@media (max-width: 680px){
  .topStripInner{ padding: 8px 0; }
  .tsRight{ gap: 10px; }
  .tsIcon{ width: 32px; height: 32px; }
  .mainNavInner{ padding: 14px 0; }
  .brandText{ font-size: 18px; }
.brand-logo{
    height: 36px;
    max-width: 180px;
  }}
/* ====== MOBILE: Energia gibi tek satır header ====== */
@media (max-width: 980px){

  /* üst koyu şerit mobilde yok */
  .topStrip{ display:none; }

  /* ana bar sabit yükseklik */
  .mainNav{
    background:#fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .mainNavInner{
    padding: 14px 0;            /* bar yüksekliği */
    justify-content: space-between;
    align-items: center;
  }

  /* orta menü yok */
  .navlinks{ display:none !important; }

  /* sağ taraf sadeleşsin */
  .callBox{ display:none !important; }
  .navCta{ display:none !important; } /* WhatsApp butonu mobilde görünmesin */

  /* logo: yatay ve sabit */
  .brand{
    min-width: unset;
    gap: 10px;
  }
  .brand-logo{
    height: 38px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
  }

  /* hamburger butonu Energia gibi */
  .navToggle{
    display:inline-flex !important;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position: relative;
  }

  /* ☰ yerine 3 çizgi (Energia gibi) */
  .navToggle{
    font-size: 0; /* içerdeki karakteri gizle */
  }
  .navToggle::before,
  .navToggle::after,
  .navToggle span{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    height: 2.5px;
    background: rgba(15,23,42,.9);
    border-radius: 99px;
    transition: .2s ease;
  }
  .navToggle::before{ top: 14px; }
  .navToggle span{ top: 21px; }
  .navToggle::after{ top: 28px; }

  /* menü açıkken X'e dönüşsün (isteğe bağlı ama güzel) */
  body.navOpen .navToggle::before{
    top: 21px;
    transform: rotate(45deg);
  }
  body.navOpen .navToggle span{
    opacity: 0;
  }
  body.navOpen .navToggle::after{
    top: 21px;
    transform: rotate(-45deg);
  }

  /* mobil panel, header'ın altında açılır */
  .navPanel{
    display:none;
    padding: 12px 0 18px;
  }
  body.navOpen .navPanel{
    display:block;
  }

  .navPanelLinks a{
    background: transparent;
    border: 1px solid rgba(0,0,0,.08);
    padding: 12px 14px;
    border-radius: 12px;
  }
}
.tsIcon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease;
}

.tsIcon svg{
  width: 18px;
  height: 18px;
  fill: #34c759; /* solar yeşili */
}

.tsIcon:hover{
  background: #34c759;
}

.tsIcon:hover svg{
  fill: #0b2a2f;
}