Floating Label Input

<div class="fl-wrap">
  <input type="text" id="fl-name" class="fl-input" placeholder=" ">
  <label for="fl-name" class="fl-label">İsminiz</label>
</div>

.fl-wrap {
  position: relative;
  width: 280px;
}
.fl-input {
  width: 100%;
  padding: 18px 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font: 14px/1.4 system-ui, sans-serif;
  outline: none;
  transition: border-color .25s;
}
.fl-input:focus { border-color: #a78bfa; }
.fl-label {
  position: absolute;
  left: 14px;
  top: 14px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), color .2s;
  transform-origin: 0 0;
}
.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
  transform: translateY(-8px) scale(0.78);
  color: #a78bfa;
}