/* Ücretsiz araç sayfaları (/tools/...): isim grafiği üreticisi. brand.css'in üstüne yüklenir. */
section.blk.tool-hero { padding-block: 18px 72px; }
.tool-hero .sechead { max-width: 72ch; margin-bottom: 28px; }
.tool-hero h1 { font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112; font-size: clamp(36px, 4.6vw, 64px); line-height: .96; }
.tool-hero h1 em.s { color: var(--c-accent); }
.tool {
  display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 22px 40px;
  grid-template-areas: "name chart" "opts chart" "opts knit"; grid-template-rows: auto auto 1fr; align-items: start;
}
.t-name { grid-area: name; } .t-chart { grid-area: chart; min-width: 0; } .t-opts { grid-area: opts; } .t-knit { grid-area: knit; min-width: 0; }
.t-name .fld span { display: block; font: 600 14px/1.3 var(--font-ui); margin-bottom: 8px; }
.namein { width: 100%; box-sizing: border-box; font: 700 26px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; padding: 16px 18px; border: 1.5px solid var(--c-ink); border-radius: 14px; background: var(--c-surface); color: var(--c-ink); }
.namein::placeholder { text-transform: none; letter-spacing: 0; font: 500 17px var(--font-ui); color: var(--c-ink-2); }
.t-name .note { margin: 8px 0 0; }

.t-opts { display: grid; gap: 4px; }
.t-opts fieldset { border: 0; border-top: 1px solid var(--c-line); margin: 0; padding: 14px 0 12px; min-width: 0; }
.t-opts legend { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.t-opts legend + * { clear: both; }
.t-opts .note { margin: 8px 0 0; font-size: 13.5px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg.col { display: grid; grid-template-columns: 1fr; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; font: 600 14px/1 var(--font-ui); padding: 11px 14px; border: 1.5px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); }
.seg label:hover span { border-color: var(--c-ink); }
.seg input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-canvas); }
.seg input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.numin { width: 100%; box-sizing: border-box; font: 600 17px/1 var(--font-mono); padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); }
.numin:focus { border-color: var(--c-ink); outline: none; }
.sub { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); }
.chk { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.35; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-accent); }
.chk:has(input:disabled) { opacity: .5; cursor: default; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swatch { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.swatch input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-line); border-radius: 12px; background: none; cursor: pointer; }
.gauge { display: grid; gap: 4px; font: 500 12px var(--font-mono); color: var(--c-ink-2); letter-spacing: .04em; }

.chartbox, .knitbox { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 16px; overflow-x: auto; box-shadow: 0 24px 50px -38px oklch(0.235 0.05 272 / .5); }
.chartbox svg { display: block; width: 100%; height: auto; max-height: 560px; }
.knitbox { background: var(--c-surface); padding: 14px; }
.knitbox svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.t-knit .h3x { margin: 6px 0 12px; }
.t-knit .note { margin: 10px 0 0; }
.readout { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.readout li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 15.5px; line-height: 1.45; }
.readout b { font: 500 11.5px/1.9 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.readout li.ok b { color: oklch(0.5 0.12 150); } .readout li.warn b { color: oklch(0.6 0.14 75); } .readout li.bad b { color: var(--c-accent); }
.readout li.bad span { color: var(--c-ink); }
.readout code, .techgrid code, .qa code { font: 600 .92em var(--font-mono); letter-spacing: .04em; }
.tactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tactions .kw-btn[disabled] { opacity: .45; pointer-events: none; }

.techgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.techgrid article { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 20px; padding: 24px; }
.techgrid h3 { font-size: 22px; font-weight: 750; margin-bottom: 10px; }
.techgrid p { margin: 0; color: var(--c-ink-2); font-size: 16px; }
.lead2 { font-size: 18px; color: var(--c-ink-2); margin: 0 0 16px; }
.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sheets figure { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 18px; }
.sheets figcaption { font: 500 12.5px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--c-ink-2); margin-bottom: 12px; }
.sheets figcaption b { color: var(--c-ink); }
.sheets svg { display: block; width: 100%; height: auto; }
.fitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.fitlist li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 16px; }
.fitlist b { font-weight: 700; }
.fitlist li.ok::after { content: "✓"; color: oklch(0.5 0.12 150); font-weight: 800; }
.fitlist li.bad { color: var(--c-ink-2); }
.printonly { display: none; }
/* tığ aracı: yazılı sıralar (tapestry / C2C) */
.written { margin-top: 18px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
.written summary { cursor: pointer; padding: 14px 18px; font: 600 15px/1.3 var(--font-ui); list-style-position: inside; }
.written[open] summary { border-bottom: 1px solid var(--c-line); }
.written .note { margin: 12px 18px 0; }
.rowlist { margin: 0; padding: 12px 18px 16px 18px; list-style: none; columns: 2 300px; column-gap: 28px; max-height: 420px; overflow: auto; font: 500 13.5px/1.55 var(--font-mono); }
.rowlist li { break-inside: avoid; padding: 2px 0; }
.rowlist b { font-weight: 700; margin-right: 6px; }

@media (max-width: 1000px) { .techgrid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "chart" "opts" "knit"; grid-template-rows: none; }
  .sheets { grid-template-columns: 1fr; }
  .readout li { grid-template-columns: 78px 1fr; }
}
@media (max-width: 560px) { section.blk.tool-hero { padding-block: 14px 56px; } .chartbox { padding: 10px; } }

/* Yazdır → PDF: "Print or save as PDF" yalnız grafiği, "Print the alphabet" yalnız alfabeyi basar */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 12pt; }
  header.top, footer.foot, .crumbs, .noprint { display: none !important; }
  section.blk { padding-block: 0 !important; background: none !important; }
  .printonly { display: block; }
  .printhead { font: 500 10pt var(--font-mono); color: #444; margin: 0 0 6mm; }
  body[data-print] main > section { display: none; }
  body[data-print="chart"] main > section.tool-hero { display: block; }
  body[data-print="chart"] .tool-hero .sechead, body[data-print="chart"] .t-name { display: none; }
  body[data-print="chart"] .tool { display: block; }
  body[data-print="chart"] .chartbox, body[data-print="chart"] .knitbox { box-shadow: none; border: 0; padding: 0; overflow: visible; break-inside: avoid; }
  body[data-print="chart"] .chartbox svg { max-height: 150mm; }
  body[data-print="chart"] .t-knit { margin-top: 6mm; break-inside: avoid; }
  body[data-print="chart"] .knitbox svg { max-height: 60mm; width: auto; max-width: 100%; }
  body[data-print="alphabet"] main > section#alphabet { display: block; }
  body[data-print="alphabet"] .sheets { grid-template-columns: 1fr; gap: 8mm; }
  body[data-print="alphabet"] .sheets figure { border: 0; padding: 0; break-inside: avoid; }
  body[data-print="alphabet"] .sheets svg { max-height: 105mm; width: auto; max-width: 100%; }
  .readout li { padding: 4px 0; font-size: 10.5pt; }
  .written { border: 0; margin-top: 6mm; }
  .written summary { padding: 0 0 3mm; list-style: none; border: 0 !important; }
  .written .note { margin: 0 0 3mm; }
  .rowlist { max-height: none; overflow: visible; padding: 0; font-size: 8.5pt; columns: 2; }
}