/* The signup and onboarding screens (ARCP-93), taken from Claude Design project
   77f69ab2-febe-4e17-87bc-ec431a5418c0, file "V - Kayit ve dogrulama", as written - the
   source is docs/design/import/yeni-siniflar-kayit.css. Loaded only by
   Pages/Shared/_BareLayout.cshtml, after tenant-app.css.

   Not taken: .tapp-kt-frame and its .is-w390/1152/1470/1920 widths (the mock-up's fixed-size
   preview frames) and .tapp-kt-grid (the mock-up's row of those frames). Nothing in the app
   corresponds to them; .tapp-bare below takes the frame's one real job. */

/* The page root of a shell-less screen.

   container-type: the design's CSS answers @container queries and cqi units, which were
   written against the mock-up frame; here the page root is that container.

   font-family and color: tenant-app.css gives the panel its typeface and body colour on
   .tapp-shell, which these pages do not have - without them the whole screen fell back to
   the browser's serif default and default text colour. Same stack as .tapp-shell.

   font-size, line-height and smoothing: the design's own base (its tokens' --text-md,
   --leading-normal, body antialiasing). Every tapp-kt-* rule that names no size of its own
   inherits these, and Bootstrap's 1.5 under them made each such line shorter than the design.

   Links: the design's page carries a bare `a{color:var(--acc-text)}` rule. :where() keeps it
   at element specificity, as in the design, so a link styled as .tapp-btn still wins. */
.tapp-bare{
  container-type:inline-size;
  min-height:100vh;
  background:var(--bg);
  color:var(--body);
  font-family:'Manrope','Inter',system-ui,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Headings inherit the page's line-height, as in the design. Bootstrap's reboot sets
   h1-h6 to 1.2, which none of the design's heading rules overrides because the design's own
   base never set one - every title here drew about a quarter shorter than designed.
   :is() carries element weight (0,0,1), the same as the reboot's own selector, so this wins
   by loading later; :where(.tapp-bare) adds nothing, so any class rule naming a
   line-height still wins over it. (Wrapping the headings in :where() as well made the rule
   weigh nothing and lose to the reboot - measured.) */
:where(.tapp-bare) :is(h1,h2,h3,h4,h5,h6){ line-height:inherit; }
:where(.tapp-bare) a{ color:var(--acc-text); text-decoration:none; }
:where(.tapp-bare) a:hover{ color:var(--head); }

.cr{
  --kt-card:452px;      /* form kartının üst sınırı */
  --kt-rail:400px;      /* soldaki marka sütunu */
  --kt-gap:14px;
  --kt-pad:clamp(18px,4cqi,28px);
  --kt-r-card:var(--r-card);
  --kt-r-ctl:var(--r-ctl);
  --kt-t-lbl:10.5px; /* deliberate: no shared step lands on 10.5px */
  --kt-t-note:var(--t-12);
  --kt-t-body:var(--t-13-5);
  --kt-t-title:clamp(19px,2.6cqi,24px);
}

/* ── Sayfa gövdesi ──────────────────────────────────────── */

.tapp-kt-page{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3cqi,34px);
  padding:clamp(18px,3cqi,44px);
  min-height:520px;
  background:var(--bg);
}
.tapp-kt-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.tapp-kt-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:700;
  color:var(--head);
  letter-spacing:-.3px;
}
.tapp-kt-logo img{ width:24px; height:24px; display:block; }
.tapp-kt-toplink{ font-size:var(--kt-t-note); color:var(--muted); }
.tapp-kt-toplink a{ font-weight:600; }

.tapp-kt-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3cqi,40px);
  justify-content:center;
  width:100%;
  margin:0 auto;
  max-width:var(--kt-card);
}
@container (min-width:900px){
  .tapp-kt-split{
    grid-template-columns:minmax(0,var(--kt-rail)) var(--kt-card);
    max-width:calc(var(--kt-rail) + var(--kt-card) + 64px);
    gap:64px;
    align-items:start;
  }
}

/* ── Sol sütun: ne olduğu ve nerede olunduğu ─────────────── */

.tapp-kt-rail{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.tapp-kt-rail-h{
  font-size:clamp(20px,2.4cqi,26px);
  font-weight:700;
  color:var(--head);
  letter-spacing:-.5px;
  margin:0;
  text-wrap:pretty;
}
.tapp-kt-rail-p{
  font-size:var(--kt-t-body);
  color:var(--muted);
  margin:0;
  line-height:1.55;
  text-wrap:pretty;
}
.tapp-kt-steps{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
.tapp-kt-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--kt-r-ctl);
  font-size:var(--kt-t-body);
  color:var(--muted);
  min-width:0;
}
.tapp-kt-step.is-now{ background:var(--hover); color:var(--head); font-weight:600; }
.tapp-kt-step-n{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.tapp-kt-step.is-now .tapp-kt-step-n{ border-color:var(--acc-solid); color:var(--head); }
.tapp-kt-step.is-done .tapp-kt-step-n{ border-color:var(--ok); color:var(--ok); }
.tapp-kt-step.is-done{ color:var(--body); }

/* ── Form kartı ─────────────────────────────────────────── */

.tapp-kt-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--kt-r-card);
  padding:var(--kt-pad);
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
  width:100%;
}
.tapp-kt-title{
  font-size:var(--kt-t-title);
  font-weight:700;
  color:var(--head);
  letter-spacing:-.4px;
  margin:0;
}
.tapp-kt-sub{
  font-size:var(--kt-t-note);
  color:var(--muted);
  margin:-10px 0 0;
  line-height:1.55;
  text-wrap:pretty;
}
.tapp-kt-form{ display:flex; flex-direction:column; gap:16px; }

/* Modül bağlamı: hangi modülün sayfasından gelindiği */
.tapp-kt-ctx{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--hover);
  min-width:0;
}
.tapp-kt-ctx-tile{
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:var(--r-xs);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--on-accent);
  font-size:13px;
}
.tapp-kt-ctx-body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.tapp-kt-ctx-k{
  font-size:var(--kt-t-lbl);
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.tapp-kt-ctx-name{ font-size:var(--kt-t-body); font-weight:700; color:var(--head); }
.tapp-kt-ctx-x{
  flex:0 0 auto;
  background:none;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  color:var(--muted);
  font:inherit;
  font-size:var(--kt-t-note);
  padding:4px 9px;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.tapp-kt-ctx-x:hover{ background:var(--card); color:var(--head); }

/* Alan */
.tapp-kt-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.tapp-kt-lbl{ font-size:var(--kt-t-body); font-weight:600; color:var(--head); }
.tapp-kt-rule{ font-size:var(--kt-t-note); color:var(--muted); line-height:1.5; text-wrap:pretty; }

/* Alt alan adı: ek satırı alanın içinde, adres canlı yazılır */
.tapp-kt-join{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--input);
  overflow:hidden;
  min-width:0;
}
.tapp-kt-join:focus-within{ border-color:var(--brand-indigo); }
.tapp-kt-join .tapp-kt-in{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--head);
  font:inherit;
  font-size:var(--kt-t-body);
  padding:9px 11px;
  outline:none;
}
.tapp-kt-join .tapp-kt-in::placeholder{ color:var(--muted); }
.tapp-kt-suffix{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-left:1px solid var(--border);
  background:var(--hover);
  color:var(--muted);
  font-size:var(--kt-t-body);
  white-space:nowrap;
}
.tapp-kt-in-solo{
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--input);
  color:var(--head);
  font:inherit;
  font-size:var(--kt-t-body);
  padding:9px 11px;
  outline:none;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.tapp-kt-in-solo::placeholder{ color:var(--muted); }
.tapp-kt-in-solo:focus{ border-color:var(--brand-indigo); }
.tapp-kt-field.is-bad .tapp-kt-join,
.tapp-kt-field.is-bad .tapp-kt-in-solo{ border-color:var(--bad); }

/* Canlı adres satırı */
.tapp-kt-live{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:var(--kt-t-note);
  color:var(--muted);
  min-width:0;
}
.tapp-kt-live b{
  color:var(--head);
  font-weight:700;
  overflow-wrap:anywhere;
}
.tapp-kt-live.is-bad b{ color:var(--bad); }

/* Alan hatası ve öneriler */
.tapp-kt-err{
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:var(--kt-t-note);
  color:var(--bad);
  line-height:1.5;
  text-wrap:pretty;
}
.tapp-kt-err i{ margin-top:2px; }
.tapp-kt-submit{ width:100%; justify-content:center; }
.tapp-kt-foot{
  font-size:var(--kt-t-note);
  color:var(--muted);
  text-align:center;
}
.tapp-kt-sep{ height:1px; background:var(--border); }

/* ── Doğrulama ekranları ────────────────────────────────── */

.tapp-kt-mark{
  width:40px; height:40px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--hover);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px;
  color:var(--muted);
}
.tapp-kt-mark.is-ok{ color:var(--ok); border-color:color-mix(in oklab,var(--ok) 45%,transparent); }
.tapp-kt-mark.is-bad{ color:var(--bad); border-color:color-mix(in oklab,var(--bad) 45%,transparent); }
.tapp-kt-who{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  background:var(--hover);
  min-width:0;
}
.tapp-kt-who-k{
  font-size:var(--kt-t-lbl);
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.tapp-kt-who-mail{
  font-size:15px;
  font-weight:700;
  color:var(--head);
  overflow-wrap:anywhere;
}
.tapp-kt-who-sub{ font-size:var(--kt-t-note); color:var(--muted); overflow-wrap:anywhere; }
.tapp-kt-hint{
  font-size:var(--kt-t-note);
  color:var(--muted);
  line-height:1.6;
  margin:0;
  text-wrap:pretty;
}
.tapp-kt-hint ul{ margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:3px; }

/* Sonraki adımlar (doğrulandı ekranı) */
.tapp-kt-next{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--kt-r-ctl);
  overflow:hidden;
}
.tapp-kt-next-i{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  font-size:var(--kt-t-body);
  color:var(--body);
  border-bottom:1px solid var(--border);
  min-width:0;
}
.tapp-kt-next-i:last-child{ border-bottom:0; }
.tapp-kt-next-i i{ color:var(--muted); width:14px; text-align:center; flex:0 0 auto; }
.tapp-kt-next-i b{ color:var(--head); font-weight:600; }
.tapp-kt-next-i span{ color:var(--muted); font-size:var(--kt-t-note); }

/* 390'da kart dolgusu daralır, sol sütun kısalır */
@container (max-width:520px){
  .tapp-kt-title{ font-size:20px; }
  .tapp-kt-rail-h{ font-size:19px; }
  .tapp-kt-steps{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .tapp-kt-step{ padding:6px 8px; font-size:var(--kt-t-note); }
}