<div class="wizard">
  <!-- Step indicators -->
  <div class="steps">
    <div class="step done">1 Hesap</div>
    <div class="step-line done"></div>
    <div class="step active">2 Profile</div>
    <div class="step-line"></div>
    <div class="step">3 Tamamla</div>
  </div>

  <!-- Current step -->
  <div class="wizard-body">
    <h2>Profilee Details</h2>
    <!-- form fields -->
  </div>

  <!-- Navigation -->
  <div class="wizard-nav">
    <button class="btn btn-ghost">← Geri</button>
    <button class="btn btn-primary">Next →</button>
  </div>
</div>

<style>
.steps { display: flex; align-items: center; margin-bottom: 2rem; }
.step { padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.875rem; }
.step.done   { background: var(--accent-dim); color: var(--accent); }
.step.active { background: var(--accent); color: white; }
.step-line   { flex: 1; height: 1px; background: var(--border); }
.step-line.done { background: var(--accent); opacity: 0.4; }
.wizard-nav  { display: flex; justify-content: space-between; margin-top: 2rem; }
</style>