/* Sihirbaz bileseni - adim gostergesi (wizard-step/wizard-conn) ve ilerleme cubugu (progress-bar) */

/* ============================================================
   16. WIZARD (step indicator)
   ============================================================ */
.wizard-steps {
  display: flex; align-items: flex-start; gap: 0;
  padding: 0 12px;
  margin-bottom: 24px;
}
.wizard-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.wizard-step .num {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: #fff; border: 1px solid var(--border-strong);
  color: var(--muted);
}
.wizard-step .lbl { font-size: 12px; color: var(--muted); text-align: center; }
.wizard-step .sublbl { font-size: 10px; color: var(--muted); margin-top: -2px; font-variant-numeric: tabular-nums; }
.wizard-step.active .num {
  background: var(--mac-blue); color: #fff; border-color: var(--mac-blue);
  box-shadow: 0 0 0 4px rgba(0,122,255,0.15);
}
.wizard-step.active .lbl { color: var(--mac-blue); font-weight: 500; }
.wizard-step.done .num { background: var(--green); color: #fff; border-color: var(--green); }
.wizard-step.done .lbl { color: var(--text); }
.wizard-conn {
  flex: 1; height: 2px; background: var(--border);
  align-self: flex-start; margin: 15px -1px 0;
}
.wizard-conn.done { background: var(--green); }

/* Progress bar (wizard / partial) */
.progress-bar {
  flex: 1; height: 4px; background: #E5E5EA; border-radius: 2px; overflow: hidden;
}
.progress-bar .pf { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.3s ease; }
.progress-bar .pf.blue { background: var(--mac-blue); }
.progress-bar .pf.yellow { background: var(--yellow); }
.progress-bar .pf.red { background: var(--red); }