/* create + closet screens — same visual language as the landing */
.app-main { padding: var(--space-4) 0 80px; }
h1.screen-title { font-weight: 400; font-size: 28px; letter-spacing: -0.01em; }
.screen-sub { margin-top: 6px; font-size: var(--size-small); color: var(--gray); }

/* progress seam */
.stepline { display: flex; align-items: center; gap: 12px; margin: 26px 0 34px; }
.stepline .hint { font-size: var(--size-fine); color: var(--gray); white-space: nowrap; }
.seam-progress {
  position: relative; flex: 1; height: 3px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--faint) 0 6px, transparent 6px 12px);
}
.seam-progress .sewn {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 20px);
}

/* measurement step */
.measure-block { max-width: 560px; }
.measure-label { font-size: 22px; margin-bottom: 4px; }
.measure-optional { font-size: 13px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.measure-diagram { width: 120px; height: 144px; display: block; margin: 4px 0 14px; }
/* named bodies (multi-client): compact, unobtrusive */
.profile-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 14px 0 6px; }
.profile-select, .profile-name { padding: 8px 12px; border: 1px dashed #9db8d6; border-radius: var(--radius); font: inherit; font-size: 13px; background: transparent; }
.profile-select:focus, .profile-name:focus { border-color: var(--accent); outline: none; }
.profile-save { padding: 8px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: transparent; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.profile-save:hover { background: var(--accent); color: #fbfaf6; }
.measure-help { font-size: var(--size-small); color: var(--gray); margin-bottom: 18px; }
.tape { display: block; width: 100%; height: 110px; margin: 8px 0 14px; user-select: none; -webkit-user-select: none; }
.measure-row { display: flex; max-width: 320px; }
.measure-row input {
  flex: 1; font: inherit; font-size: 22px; padding: 12px 14px;
  border: 1px solid #9db8d6; border-radius: var(--radius) 0 0 var(--radius); border-right: 0;
  background: transparent; outline: none;
}
.measure-row input:focus { border-color: var(--accent); border-style: dashed; }
.measure-row .unit { display: flex; align-items: center; padding: 0 16px; border: 1px solid #9db8d6; border-left: 1px dashed #9db8d6; border-radius: 0 var(--radius) var(--radius) 0; }
.field-error { color: var(--thread-rose); font-size: var(--size-fine); margin-top: 8px; min-height: 1.2em; }
.privacy-note { margin-top: 14px; font-size: var(--size-fine); color: var(--gray); }

/* spec pick */
.spec-groups { display: grid; gap: 26px; max-width: 720px; margin-left: auto; margin-right: auto; }
.spec-group { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }
.spec-group .group-label { font-size: var(--size-fine); color: var(--gray); margin-bottom: 8px; text-align: center; }
.choice-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* the whole spec screen shares one centered axis */
.spec-screen h1.screen-title, .spec-screen .screen-sub { text-align: center; }
.spec-screen .step-nav { max-width: 360px; margin-left: auto; margin-right: auto; }
.spec-screen .sewing-loader { justify-content: center; }
/* choices speak couture: basted (dashed) edges, vişne when picked, the
   selected chip wears the landing CTA's inner-stitch frame */
.choice {
  position: relative;
  padding: 10px 16px; border: 1px dashed #9db8d6; border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--size-small); cursor: pointer;
}
.choice:hover { border-color: var(--accent); color: var(--accent); }
.choice[aria-pressed="true"] { background: var(--accent); color: #fbfaf6; border: 1px solid var(--accent); }
.choice[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(255,255,255,.8);
  border-radius: var(--radius); pointer-events: none;
}
.choice:disabled { color: #d8c3c7; border-color: #ecdfe1; cursor: default; }

/* nav buttons */
.step-nav { display: flex; gap: 10px; margin-top: 40px; max-width: 560px; }
.step-nav .btn {
  position: relative;
  flex: 1; text-align: center; padding: 14px 0; font: inherit; font-size: 15px;
  border: 1px dashed #9db8d6; border-radius: var(--radius); background: transparent;
  color: var(--ink); cursor: pointer; text-decoration: none;
}
.step-nav .btn:hover { border-color: var(--accent); color: var(--accent); }
.step-nav .btn.primary { background: var(--accent); color: #fbfaf6; border: 1px solid var(--accent); }
.step-nav .btn.primary::after {
  content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(255,255,255,.85);
  border-radius: var(--radius); pointer-events: none;
}
.step-nav .btn.primary:hover { background: #1f3a5f; color: #fff; }

/* result */
.result-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
/* Demo-body result: the "make it fit you" banner is the loud next step. */
.fit-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin: 8px 0 24px; padding: 16px 20px; border: 1.5px dashed var(--accent); border-radius: 4px; background: rgba(143,32,56,.05); }
.fit-banner-text { font-size: 15px; color: var(--accent); font-weight: 600; }
.fit-banner .btn.primary { background: var(--accent); color: #fbfaf6; border: 1px solid var(--accent);
  padding: 11px 22px; border-radius: 3px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.fit-banner .btn.primary:hover { background: #1f3a5f; }
.grade-panel { margin: 32px 0 8px; padding: 22px 24px; border: 1px solid var(--seam-color, rgba(0,0,0,.12));
  border-top: 2px solid var(--accent); border-radius: 4px; background: rgba(143,32,56,.03); max-width: 620px; }
.grade-title { font-family: 'Didot','Bodoni 72',Georgia,serif; font-weight: 400; font-size: 22px; margin: 0 0 6px; color: var(--accent); }
.grade-sub { font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: var(--gray); max-width: 52ch; }
.grade-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.grade-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--gray); }
.grade-select { padding: 9px 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 3px; font-size: 15px; background: #fff; }
.grade-msg { min-height: 20px; font-size: 13.5px; margin: 12px 0 0; color: var(--gray); }
/* F-İNDİR: the take-it-home panel. Same paper as the grade panel so the result
   screen reads as one sheet; the download row is a grid so three buttons stay
   equal width and wrap to one column on a phone. */
.dl-panel { margin: 28px 0 8px; padding: 22px 24px; border: 1px solid var(--seam-color, rgba(0,0,0,.12));
  border-top: 2px solid var(--accent); border-radius: 4px; background: rgba(143,32,56,.03); max-width: 620px; }
.dl-title { font-family: 'Didot','Bodoni 72',Georgia,serif; font-weight: 400; font-size: 22px; margin: 0 0 6px; color: var(--accent); }
.dl-sub { font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: var(--gray); max-width: 52ch; }
.dl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .dl-row { grid-template-columns: 1fr; } }
.dl-row .btn { width: 100%; padding: 11px 10px; font-size: 14px; border: 1px solid var(--accent);
  border-radius: 3px; background: #fff; color: var(--accent); cursor: pointer; letter-spacing: .3px; }
.dl-row .btn:hover:not(:disabled) { background: var(--accent); color: #fbfaf6; }
.dl-row .btn:disabled { opacity: .55; cursor: default; }
.dl-alt { display: inline-block; margin: 12px 0 0; font-size: 13px; color: var(--gray);
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.dl-msg { min-height: 20px; font-size: 13.5px; margin: 10px 0 0; color: var(--accent); }
/* T4-hakem k3: THE FLAT, ON SCREEN. Ayni kagit (.dl-panel ile ayni cerceve),
   cunku sonuc ekrani tek bir sayfa gibi okunmali. Cizim 1:1 mm ciziliyor;
   burada yalnizca SUNUM genisligi kutuya sigar, viewBox'a dokunulmaz. */
.flat-panel { margin: 24px 0 8px; padding: 22px 24px; border: var(--rule-hairline, 1px solid var(--seam-color));
  border-top: 2px solid var(--accent); border-radius: 4px; background: var(--paper); max-width: 620px; }
.flat-card-svg { margin-top: 8px; min-height: 60px; font-size: 13.5px; color: var(--gray); }
.flat-card-svg svg { display: block; width: 100%; height: auto; }
.flat-card-sebep { font-size: 13px; color: var(--gray); margin: 10px 0 0; }
/* OPERATÖR PROGRAMI (GECE7 / F5-D): the engine's own answer to "what can
   op.split / op.suppress / op.rotate do to this pattern", refusals included.
   Deliberately the same quiet ink as .dl-koken and .dl-msg — a refusal here is
   not an error state, it is the measured answer, and colouring it like a
   failure would teach the shopper to ignore the one sentence that carries the
   number. */
.dl-ops { margin: 10px 0 0; max-width: 68ch; }
.dl-ops-title { font-size: 13px; margin: 12px 0 8px; color: var(--accent); letter-spacing: .3px; }
.dl-ops-yes, .dl-ops-no { font-size: 12.5px; line-height: 1.5; margin: 0 0 7px; padding: 0 0 0 10px;
  color: var(--gray); border-left: 1px solid rgba(0,0,0,.12); }
.dl-ops-yes { border-left-color: var(--accent); }
.dl-ops-why { display: block; color: var(--gray); opacity: .85; }
/* The SURFACE each block of answers is about (F5-E, borç 68). Two readings are
   printed, each under the engine's own `yuzey` sentence, so an answer is never
   read against the wrong garment. */
.dl-ops-surface { font-size: 12px; margin: 14px 0 6px; color: var(--ink); font-weight: 600; }

/* KÖKEN (F0): which fields the photo did not show. Sits above the buttons, in
   the same ink as the honest-refusal line — it is the same kind of sentence. */
.dl-koken { font-size: 13px; line-height: 1.55; margin: 0 0 16px; padding: 10px 12px;
  color: var(--gray); background: rgba(0,0,0,.025); border-left: 1px solid var(--accent);
  border-radius: 2px; max-width: 60ch; }
.missing-card { margin: 22px 0 8px; padding: 20px 22px; border: 1px solid var(--seam-color, rgba(0,0,0,.12));
  border-radius: 4px; background: rgba(143,32,56,.03); max-width: 620px; }
.missing-title { font-family: 'Didot','Bodoni 72',Georgia,serif; font-weight: 400; font-size: 20px; margin: 0 0 6px; color: var(--accent); }
.missing-intro { font-size: 14px; line-height: 1.5; margin: 0 0 12px; color: var(--gray); max-width: 56ch; }
.missing-list { list-style: none; margin: 0; padding: 0; }
.missing-list li { font-size: 14px; line-height: 1.55; padding: 7px 0; border-top: 1px solid rgba(0,0,0,.07); }
.missing-list li:first-child { border-top: none; }
.missing-label { color: var(--ink); }
.missing-detail { color: var(--gray); }
.result-meta { list-style: none; margin: 26px 0; max-width: 560px; }
.result-meta li { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: var(--seam); font-size: 14.5px; }
.result-meta li:first-child { border-top: var(--seam); }
.result-meta .k { color: var(--gray); font-size: var(--size-fine); }
.assembled-preview { border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius); padding: 14px;
  background: #fff; max-width: 720px; overflow: hidden; }
.pieces-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 10px; }
.piece-card { border: 1px dashed #9db8d6; border-radius: var(--radius); padding: 12px; background: #fff; }
.piece-card .label { font-size: var(--size-fine); margin-bottom: 8px; }
.piece-card .cut { color: var(--gray); }
.guide-list { margin: 16px 0 0 0; padding-left: 22px; max-width: 640px; }
.guide-list li { padding: 6px 0; font-size: 15px; }
/* tap-to-learn sewing term: subtle dotted underline, tooltip on hover/focus */
.gloss { border-bottom: 1px dotted var(--accent); cursor: help; }
.gloss:hover, .gloss:focus { color: var(--accent); outline: none; }
.issues-box { border: 1px dashed var(--thread-rose); border-radius: var(--radius); padding: 14px 16px; margin: 20px 0; max-width: 640px; font-size: var(--size-small); }
/* M5-band: the accepted measurement range, stated under the field BEFORE
   the user is refused. Quiet weight — it is a boundary, not a warning. */
.measure-band { font-size: 12px; opacity: .7; margin-top: 6px; }
/* M5-ret: the engine's own refusal lines, printed where the buyer reads them.
   Each line is a machine judgement ([rule] Piece: detail), so it is set apart
   by SIZE and indent, not by a font of its own: contract/design-tokens.json
   publishes three stacks and none of them is a mono, and inventing a fourth
   here is exactly what ios_zemin_check exists to stop (it caught this). */
.issues-list { margin: 10px 0 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; letter-spacing: .2px; }
.issues-list li { margin-bottom: 4px; }
.issues-next { margin-top: 12px; }

/* closet */
.closet-list { margin-top: 30px; max-width: 720px; }
.closet-item { display: flex; align-items: baseline; gap: 16px; padding: 14px 2px; border-bottom: var(--seam); }
.closet-item:first-child { border-top: var(--seam); }
.closet-item .when { margin-left: auto; font-size: var(--size-fine); color: var(--gray); white-space: nowrap; }
.closet-item a { color: var(--ink); }
.closet-item button { font: inherit; font-size: var(--size-fine); border: 1px dashed #9db8d6; border-radius: var(--radius); background: transparent; padding: 4px 10px; cursor: pointer; }
.closet-item button:hover { background: var(--accent); border-color: var(--accent); color: #fbfaf6; }
.empty-state { margin-top: 40px; max-width: 480px; }
.empty-state p { color: var(--gray); font-size: 15px; margin-top: 8px; }

@media (max-width: 720px) {
  h1.screen-title { font-size: 24px; }
  .choice { padding: 10px 12px; }
}

/* loading = a seam being sewn: stitches appear left to right */
.sewing-loader { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.sewing-loader .seam-track {
  position: relative; width: 180px; height: 4px; overflow: hidden;
}
.sewing-loader .seam-track::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 20px);
  animation: sew-reveal 1.4s linear infinite;
}
@keyframes sew-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.sewing-loader .loader-text { font-size: var(--size-fine); color: var(--gray); }

/* ---- true-scale printing ---- */
#print-root { display: none; }
.print-title { font-size: 20px; }
.print-demo-warn { font-size: 12px; font-weight: 700; color: #1f3a5f; border: 1.5px solid #1f3a5f; border-radius: 3px; padding: 8px 12px; margin: 8px 0; max-width: 170mm; }
.print-sub { font-size: 12px; color: #444; margin: 6px 0 10px; max-width: 170mm; }
.print-label { font-size: 11px; margin-bottom: 4px; }
.print-missing-head { color: #1f3a5f; font-weight: 700; margin-top: 12px; }
.print-map { padding-left: 18px; font-size: 12px; margin: 8px 0; }
.print-map li { padding: 2px 0; }
.print-sizechart { border-collapse: collapse; font-size: 12px; margin: 8px 0 12px; }
.print-sizechart th, .print-sizechart td { border: 1px solid #999; padding: 4px 12px; text-align: left; }
.print-sizechart th { background: #e6eef7; font-weight: 700; }
.print-cuttable { border-collapse: collapse; font-size: 11px; margin: 6px 0 12px; }
.print-cuttable th, .print-cuttable td { border: 1px solid #999; padding: 3px 10px; text-align: left; vertical-align: top; }
.print-cuttable th { background: #f3ecec; font-weight: 700; }
.print-cuttable td:first-child { text-align: right; font-weight: 700; color: #8f2038; }
/* Interior grade sheet: the size stamp rides in the top-right corner, bold and
   unmistakable, so a cut piece is never mistaken for another size. */
.print-size-stamp { position: absolute; top: 4mm; right: 6mm; font-size: 24px; font-weight: 800;
  letter-spacing: 1px; color: #1f3a5f; border: 2px solid #1f3a5f; border-radius: 3px; padding: 2px 8px; }
.print-page { position: relative; }
/* Nested run: colour → size legend on the cover. */
.print-nest-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 12px; }
.nest-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
/* Grade output-layout radios. */
.grade-layout { gap: 20px; margin: -4px 0 16px; }
.grade-radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.grade-radio input { accent-color: #1f3a5f; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  .print-page { page-break-after: always; }
  .print-page:last-child { page-break-after: auto; }
}

/* ───────── KUMAS ANAHTARLARI (14 Eyl) — YUVARLAK, HOVER ONIZLEMELI.
   Damla: *"kumas anahtarlari YUVARLAK... hover'da flat o renge, SOLUK tonda
   donuyor"* + *"tatli bir preview marketing hilesi"*.
   Ev kurali: yuvarlaklik yalnizca GERCEK dairelere serbest (damla-ui), o yuzden
   burada 50% mesru; kutu/panel hala 1px tel cizgi + <=4px kose.
   Onizleme SUNUCUYA GITMEZ: katmanlar onceden cizilir, hover yalnizca hangi
   katmanin gorundugunu degistirir (opacity), bu yuzden aninda doner. */
.kumas-katmanlar { position: relative; }
.kumas-katman { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 160ms ease; }
.kumas-katman:first-child { position: relative; }
.kumas-katman.acik { opacity: 1; }
/* Ilk katman akisi belirler; digerleri ustune biner. Gecis KISA (160ms):
   uzun gecis "takildi" hissi verir, cazibe olur. */

.kumas-sira { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 2px; }
.kumas-nokta { width: 26px; height: 26px; border-radius: 50%; padding: 0;
  border: 1px solid var(--seam-color); background: #fff; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease; }
.kumas-nokta:hover:not(:disabled), .kumas-nokta:focus-visible {
  transform: translateY(-2px); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.kumas-nokta.secili { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--navy); }
.kumas-nokta:disabled { opacity: .35; cursor: not-allowed; }
/* teknik = kumassiz hal: bos daire, uzerinde egik bir kalem izi. */
.kumas-nokta.teknik { background:
  linear-gradient(135deg, transparent 46%, var(--navy) 46%, var(--navy) 54%, transparent 54%), #fff; }
.kumas-not { font-size: 11.5px; color: var(--gray); letter-spacing: .3px; }
@media (prefers-reduced-motion: reduce) {
  .kumas-katman, .kumas-nokta { transition: none; }
  .kumas-nokta:hover:not(:disabled) { transform: none; }
}