<label class="toggle">
  <input type="checkbox" class="toggle-input" />
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Bildirimler</span>
</label>

<style>
.toggle { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 2.75rem; height: 1.5rem; border-radius: 9999px;
  background: var(--border); position: relative; transition: background 0.2s;
}
.toggle-input:checked + .toggle-track { background: var(--accent); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.toggle-input:checked ~ .toggle-track .toggle-thumb { transform: translateX(1.25rem); }
</style>