Search Bar with Glow

<div class="search-bar">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  <input type="search" placeholder="Ara...">
</div>

.search-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  width: 320px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9999px;
  color: rgba(255,255,255,0.5);
  transition: box-shadow .3s, border-color .3s;
}
.search-bar:focus-within {
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
  color: rgba(255,255,255,0.9);
}
.search-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font: 14px/1 system-ui, sans-serif;
}
.search-bar input::placeholder { color: rgba(255,255,255,0.4); }