<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); }