.nav-with-search {
  display: flex;
  align-items: center;
  gap: 0;
}

#main-menu {
  margin-right: 0;
}

.nav-search-wrap { position: relative; display: flex; align-items: center; }
.nav-search-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: #1D4791; background: rgba(255,255,255,0.12);
  cursor: pointer; border: 1px solid rgba(255,255,255,0.35);
  transition: background .2s, transform .2s;
  margin-left: 40px; /* panel ile ikon/X arasına ekstra boşluk */
}
.nav-search-toggle:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.nav-search-toggle .icon { display: none; }
.nav-search-toggle .icon svg { width: 24px; height: 24px; stroke: #1D4791; }
.nav-search-toggle .icon-search { display: inline-block; }
.nav-search-wrap.active .icon-search { display: none; }
.nav-search-wrap.active .icon-close { display: inline-block; }

.nav-search-panel {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  width: 0; opacity: 0; pointer-events: none; overflow: hidden;
  height: 44px; padding: 0 16px;
  background: #F7F9FC; color: #1D4791;
  border-radius: 30px;
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  transition: width .25s ease, opacity .2s ease;
  z-index: 9999;
}
.nav-search-panel input {
  border: none; background: transparent; outline: none;
  width: 100%; min-width: 0; color: #1D4791; font-size: 15px;
}
.nav-search-panel button {
  border: none; background: transparent; color: #1D4791;
  cursor: pointer; padding: 0; display: grid; place-items: center;
}
.nav-search-panel button:hover,
.nav-search-panel button:focus,
.elementor-kit-9 .nav-search-panel button,
.elementor-kit-9 .nav-search-panel button:hover,
.elementor-kit-9 .nav-search-panel button:focus {
  background: transparent !important;
  color: #1D4791 !important;
  outline: none;
  box-shadow: none !important;
  border: none !important;
}
.nav-search-panel button svg { width: 20px; height: 20px; stroke: #1D4791; }

.nav-search-wrap.active .nav-search-panel {
  width: clamp(320px, calc(100vw - 340px), 820px);
  /* 340px: logoya daha fazla mesafe bırakır; 300-360 arası ince ayar yapabilirsiniz */
  opacity: 1; pointer-events: auto;
}