/* The onboarding wizard's own three active steps and its finish screen (ARCP-93, Ekran 4),
   taken from Claude Design project 180a8f31-8cb0-4019-be72-86b0a095a889, file "Y - Kurulum
   sihirbazı", as written - the source is docs/design/import/yeni-siniflar-kurulum.css.
   Loaded by Pages/Shared/_BareLayout.cshtml, after onboarding-modules.css.

   Not taken: the panel mock-up (.tapp-kp and every .tapp-kp-*) and the dashboard's own
   "kurulumu tamamla" box (.tapp-tdo and every .tapp-tdo-*) - both belong to the tenant panel
   shell, not to this shell-less wizard, and the other worker carries them into
   wwwroot/tenant-app/tenant-app.css instead. Everything else in the source file - the
   .cr{} tokens the ks-* classes need (including --ks-tdo, declared in the source's own
   shared block but never referenced by anything the wizard itself draws), the wizard body,
   the logo field, the staff rows, the action row and the finish screen's summary - is kept
   verbatim. */

.cr{
  --ks-card:560px;      /* sihirbaz kartının üst sınırı */
  --ks-logo:56px;       /* logo önizleme / baş harf karesi */
  --ks-tdo:2px;         /* ilerleme çubuğu kalınlığı değil, ölçek tutucu */
}

/* ── Sihirbaz gövdesi ───────────────────────────────────── */

.tapp-ks-wrap{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.4cqi,24px);
  width:100%;
  max-width:var(--ks-card);
  margin:0 auto;
  min-width:0;
}

/* İlerleme: metin + çubuk + adım şeridi */
.tapp-ks-prog{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.tapp-ks-prog-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.tapp-ks-prog-k{
  font-size:var(--kt-t-lbl);
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tapp-ks-prog-note{ font-size:var(--kt-t-note); color:var(--muted); }
.tapp-ks-bar{
  height:3px;
  border-radius:var(--r-pill);
  background:var(--hover);
  border:1px solid var(--border);
  overflow:hidden;
}
.tapp-ks-bar-f{ display:block; height:100%; background:var(--acc-solid); }

.tapp-ks-steps{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  min-width:0;
}
.tapp-ks-step{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--kt-r-ctl);
  font-size:var(--kt-t-note);
  color:var(--muted);
  min-width:0;
  /* Now an <a>, not a plain <li> (Wizard.cshtml, ARCP-93's own back-navigation fix) - the
     colours below already override the user agent's link colour, this only resets the
     underline it does not touch. */
  text-decoration:none;
}
.tapp-ks-step-n{
  flex:0 0 auto;
  width:19px; height:19px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tapp-ks-step.is-now{ background:var(--hover); color:var(--head); font-weight:600; }
.tapp-ks-step.is-now .tapp-ks-step-n{ border-color:var(--acc-solid); color:var(--head); }
.tapp-ks-step.is-done{ color:var(--body); }
.tapp-ks-step.is-done .tapp-ks-step-n{ border-color:var(--ok); color:var(--ok); }
.tapp-ks-step.is-skip .tapp-ks-step-n{ border-style:dashed; }
.tapp-ks-step.is-skip em{ font-style:normal; color:var(--muted); }
.tapp-ks-step button{
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}

/* Atlanan adımın hatırlatması */
.tapp-ks-skipped{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--hover);
  font-size:var(--kt-t-note);
  color:var(--muted);
  line-height:1.55;
  text-wrap:pretty;
  min-width:0;
}
.tapp-ks-skipped i{ margin-top:2px; color:var(--muted); flex:0 0 auto; }
.tapp-ks-skipped b{ color:var(--head); font-weight:600; }
.tapp-ks-skipped button{
  background:none; border:0; padding:0;
  font:inherit; font-weight:600;
  color:var(--acc-text);
  cursor:pointer;
}

/* Alan çiftleri: 390'da alt alta */
.tapp-ks-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
@container (min-width:620px){
  .tapp-ks-pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ── Logo alanı ─────────────────────────────────────────── */

.tapp-ks-logo{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.tapp-ks-logo-box{
  flex:0 0 auto;
  width:var(--ks-logo); height:var(--ks-logo);
  border-radius:var(--kt-r-ctl);
  border:1px solid var(--border);
  background:var(--hover);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tapp-ks-logo-box img{ width:100%; height:100%; object-fit:contain; display:block; }
.tapp-ks-init{
  font-size:19px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--head);
}
.tapp-ks-logo-side{ display:flex; flex-direction:column; gap:7px; flex:1 1 200px; min-width:0; }
.tapp-ks-logo-acts{ display:flex; flex-wrap:wrap; gap:8px; }

/* Dosya bırakma alanı — kesikli kenarlık tapp-file kalıbıyla aynı rol */
.tapp-ks-file{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px dashed var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--input);
  font-size:var(--kt-t-note);
  color:var(--muted);
  cursor:pointer;
  min-width:0;
  flex:1 1 220px;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.tapp-ks-file:hover{ background:var(--hover); color:var(--head); border-color:var(--acc-solid); }
.tapp-ks-file i{ font-size:15px; flex:0 0 auto; }
.tapp-ks-file b{ display:block; color:var(--head); font-size:var(--kt-t-body); font-weight:600; }

/* Logonun nerede görüneceği — iki küçük önizleme */
.tapp-ks-prev{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
}
.tapp-ks-prev-i{
  flex:1 1 180px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--bg);
  min-width:0;
}
.tapp-ks-prev-k{
  font-size:var(--kt-t-lbl);
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.tapp-ks-prev-row{ display:flex; align-items:center; gap:8px; min-width:0; }
.tapp-ks-prev-mark{
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:var(--r-2xs);
  border:1px solid var(--border);
  background:var(--hover);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; color:var(--head);
  overflow:hidden;
}
.tapp-ks-prev-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.tapp-ks-prev-name{ font-size:var(--kt-t-body); font-weight:600; color:var(--head); overflow-wrap:anywhere; }

/* ── Personel satırları ─────────────────────────────────── */

.tapp-ks-people{ display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--kt-r-ctl); overflow:hidden; }
.tapp-ks-person{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 11px;
  border-bottom:1px solid var(--border);
  min-width:0;
}
.tapp-ks-person:last-child{ border-bottom:0; }
.tapp-ks-person-av{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--hover);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--head);
}
.tapp-ks-person-b{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.tapp-ks-person-n{ font-size:var(--kt-t-body); font-weight:600; color:var(--head); overflow-wrap:anywhere; }
.tapp-ks-person-t{ font-size:var(--kt-t-note); color:var(--muted); }

/* ── Kart altı eylem satırı: Geç solda, Devam sağda ─────── */

.tapp-ks-acts{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  padding-top:4px;
}
.tapp-ks-acts-sp{ flex:1 1 auto; }
@container (max-width:520px){
  .tapp-ks-acts{ flex-direction:column-reverse; align-items:stretch; }
  .tapp-ks-acts .tapp-btn{ width:100%; justify-content:center; }
  .tapp-ks-acts-sp{ display:none; }
}

/* ── Bitiş ekranı ───────────────────────────────────────── */

.tapp-ks-done-sum{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  overflow:hidden;
}
.tapp-ks-done-i{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  font-size:var(--kt-t-body);
  color:var(--body);
  min-width:0;
}
.tapp-ks-done-i:last-child{ border-bottom:0; }
.tapp-ks-done-i i{ flex:0 0 auto; width:14px; text-align:center; margin-top:3px; color:var(--muted); }
.tapp-ks-done-i.is-ok i{ color:var(--ok); }
.tapp-ks-done-b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tapp-ks-done-b b{ color:var(--head); font-weight:600; }
.tapp-ks-done-b span{ font-size:var(--kt-t-note); color:var(--muted); line-height:1.5; text-wrap:pretty; }