/*
  Adencoat -- base stylesheet
  Follows ADENTE/shared/design_guidelines.md:
  solid colors only, 0px radius on buttons, max 2px elsewhere, no shadows,
  asymmetric columns, warm neutrals, serif + sans pairing, no decorative motion.

  Every color comes from a --c-* custom property that js/main.js rewrites when
  a palette is chosen. Every typeface comes from --font-heading / --font-body.
*/

:root {
  /* Defaults mirror the chosen set (palette 03, font set 08) so the page renders
     correctly before JS runs. Chosen 2026-09-04. */
  --c-bg: #ebebe9;
  --c-surface: #dfdfdc;
  --c-surface-rgb: 223, 223, 220;   /* for the one translucent surface: the hero title panel */
  --c-text: #161717;
  --c-text2: #48494a;
  --c-line: #c4c4c0;
  --c-primary: #bf0d0d;
  --c-onPrimary: #fdf3f2;
  --c-accent: #3f4648;
  --c-mark: #e30613;
  --c-ph: #c8c8c3;
  --c-phText: #363837;
  --c-altBg: #211f1f;
  --c-alt2: #2c2a2a;
  --c-altText: #eeeceb;
  --c-altText2: #b8b4b3;
  --c-altLine: #403c3c;
  --c-altAccent: #f28b83;

  --font-heading: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Sometype Mono", ui-monospace, Menlo, Consolas, monospace;
  --hw: 600;            /* heading weight, set per font set */
  --ls-heading: 0;      /* heading letter-spacing, set per font set */
  --h-scale: 0.98;      /* heading size nudge, set per font set */
  --h-case: none;       /* text-transform for headings, set per font set */

  --wrap: 1200px;
  --edge: clamp(20px, 4vw, 56px);
  }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

/* ---------- type scale ---------- */
h1, h2, h3, .quote, .wordmark {
  font-family: var(--font-heading);
  font-weight: var(--hw);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
h1, h2, h3 { text-transform: var(--h-case); }
h1 { font-size: calc(clamp(2.05rem, 3.6vw, 2.75rem) * var(--h-scale)); line-height: 1.15; }
h2 { font-size: calc(clamp(1.6rem, 2.6vw, 2.05rem) * var(--h-scale)); line-height: 1.2; }
h3 { font-size: calc(1.3rem * var(--h-scale)); line-height: 1.25; }
.lede { font-size: 1.15rem; line-height: 1.6; }
.muted { color: var(--c-text2); }

/* ---------- layout primitives ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }
.rule { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* ---------- buttons (spec: rectangular, uppercase, 0.1em, 16px 32px) ---------- */
.btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-onPrimary); }
.btn-primary:hover { background: var(--c-text); border-color: var(--c-text); }
.btn-secondary { background: transparent; border-color: var(--c-text); color: var(--c-text); }
.btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn:focus-visible { outline: none; border-color: var(--c-mark); text-decoration: underline; text-underline-offset: 4px; }
.alt .btn-secondary { border-color: var(--c-altText); color: var(--c-altText); }
.alt .btn-secondary:hover { border-color: var(--c-altAccent); color: var(--c-altAccent); }

/* ---------- placeholder image blocks (solid color + label, per guidelines) ---------- */
.ph {
  background: var(--c-ph); color: var(--c-phText);
  display: flex; align-items: flex-end;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
  min-height: 200px;
}

/* ---------- header: full-width, breathes at the viewport edges ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--c-surface);
  border-top: 4px solid var(--c-mark);
  border-bottom: 1px solid var(--c-line);
}
.site-header .bar {
  display: flex; align-items: center; gap: 64px;
  padding: 28px var(--edge);
}
.wordmark { display: block; color: var(--c-text); line-height: 0; }
.wordmark svg { display: block; height: 32px; width: auto; }
.wordmark:focus-visible { outline: none; box-shadow: 0 2px 0 var(--c-mark); }
.nav { display: flex; gap: 36px; }
.nav a {
  font-size: 1rem; font-weight: 500; text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a:focus-visible { outline: none; border-bottom-color: var(--c-text); }
.nav .nav-label { font-size: 1rem; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; cursor: default; }
.has-menu:hover .nav-label { border-bottom-color: var(--c-text); }
.header-aside { margin-left: auto; font-size: 0.9375rem; color: var(--c-text2); display: flex; gap: 28px; }
.header-aside a { text-decoration: none; }
.header-aside span { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.06em; }
.header-aside a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- intro: one paragraph, deliberately offset ---------- */
.intro { padding: 64px 0 0; }
.intro p { max-width: 720px; margin-left: 20%; font-size: 1.25rem; line-height: 1.6; }

/* ---------- products: 35/65 sticky heading + ruled list ---------- */
.products { padding: 128px 0 112px; }
.products .wrap { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; align-items: start; }
.products .side { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 20px; }
.products .side p { color: var(--c-text2); }
.list-ruled > li {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
}
.list-ruled > li:last-child { border-bottom: 1px solid var(--c-line); }
.list-ruled .idx { font-family: var(--font-mono); font-weight: 500; color: var(--c-accent); font-size: 0.95rem; padding-top: 6px; letter-spacing: 0.04em; }
.list-ruled h3 { margin-bottom: 8px; }
.list-ruled p { color: var(--c-text2); max-width: 60ch; }

/* ---------- full-bleed image with an overlapping note panel ---------- */
.bleed .ph { height: clamp(320px, 46vw, 560px); justify-content: flex-end; align-items: flex-start; }
.bleed .panel {
  position: relative; z-index: 1;
  margin-top: -96px;
  max-width: 560px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  padding: 40px 48px 44px;
  display: flex; flex-direction: column; gap: 16px;
}
.bleed .panel p { color: var(--c-text2); }

/* ---------- contrast section: 55/45, statement + spec table ---------- */
.alt { background: var(--c-altBg); color: var(--c-altText); }
.spec { margin-top: 96px; padding: 96px 0 112px; }
.spec .wrap { display: grid; grid-template-columns: 55fr 45fr; gap: 80px; align-items: start; }
.spec .quote { font-size: calc(clamp(1.35rem, 2.2vw, 1.7rem) * var(--h-scale)); line-height: 1.35; font-weight: 500; margin: 20px 0 36px; }
.spec table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.spec th, .spec td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--c-altLine); vertical-align: top; }
.spec th { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--c-altText2); width: 42%; padding-right: 24px; letter-spacing: 0.02em; }
.spec caption { font-family: var(--font-mono); text-align: left; color: var(--c-altText2); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 12px; caption-side: top; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1px solid var(--c-altLine); }

/* ---------- text section: 60/40, prose + link column ---------- */
.prose { padding: 128px 0 96px; }
.prose .wrap { display: grid; grid-template-columns: 60fr 40fr; gap: 96px; align-items: start; }
.prose .copy { display: flex; flex-direction: column; gap: 20px; }
.prose .copy h2 { margin-bottom: 8px; }
.prose .copy p { color: var(--c-text2); }
.links { display: flex; flex-direction: column; gap: 0; margin-top: 44px; }
.links a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--c-line);
  text-decoration: none; font-weight: 500;
}
.links a:last-child { border-bottom: 1px solid var(--c-line); }
.links a small { font-family: var(--font-mono); color: var(--c-text2); font-weight: 400; font-size: 0.8125rem; }
.links a:hover span:first-child, .links a:focus-visible span:first-child { outline: none; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- contact: full-width heading, inline form row ---------- */
.contact { padding: 96px 0 112px; background: var(--c-surface); border-top: 1px solid var(--c-line); }
.contact .head { display: grid; grid-template-columns: 45fr 55fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.contact .head p { color: var(--c-text2); }
.form-row { display: grid; grid-template-columns: 1.1fr 1.1fr 1.8fr auto; gap: 16px; align-items: stretch; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--c-text2); }
.field input, .field textarea {
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0;
  padding: 14px 16px; line-height: 1.3; min-height: 50px;
}
.field textarea { resize: vertical; min-height: 50px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--c-accent); }
.form-row .btn { align-self: end; height: 50px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.contact .note { margin-top: 20px; font-size: 0.9375rem; color: var(--c-text2); max-width: 64ch; }

/* ---------- footer: 2 / 1 / 1 / 1.5 ---------- */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--c-line); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; }
.site-footer .wordmark svg { height: 22px; }
.site-footer .blurb { margin-top: 20px; max-width: 40ch; }
.site-footer .addr { margin-top: 16px; }
.site-footer p, .site-footer li { font-size: 0.9375rem; color: var(--c-text2); }
.site-footer h4 { font-family: var(--font-mono); margin: 0 0 12px; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.site-footer li + li { margin-top: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; gap: 24px; font-size: 0.875rem; color: var(--c-text2); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .products .wrap { gap: 40px; }
  .spec .wrap { gap: 48px; }
  .prose .wrap { gap: 56px; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .site-header .bar { flex-wrap: wrap; gap: 14px 32px; padding: 16px var(--edge) 0; }
  .header-aside { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 24px; padding-bottom: 12px; white-space: nowrap; }
  .intro { padding-top: 48px; }
  .intro p { margin-left: 0; font-size: 1.125rem; }
  .products { padding: 80px 0 64px; }
  .products .wrap { grid-template-columns: 1fr; }
  .products .side { position: static; }
  .list-ruled > li { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; }
  .bleed .panel { margin-top: -48px; margin-inline: var(--edge); padding: 28px 24px; }
  .spec { margin-top: 64px; padding: 64px 0 80px; }
  .spec .wrap, .prose .wrap, .contact .head { grid-template-columns: 1fr; }
  .prose { padding: 80px 0 64px; }
  .links { margin-top: 0; }
  .contact { padding: 64px 0 80px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row .field:nth-child(3) { grid-column: 1 / 3; }
  .form-row .btn { grid-column: 1 / 3; justify-content: center; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer .cols > div:first-child { grid-column: 1 / 3; }
  .site-footer .bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .site-footer .cols { grid-template-columns: 1fr; }
  .site-footer .cols > div:first-child { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .form-row .field:nth-child(3), .form-row .btn { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ============================================================
   Revision 2026-09-04: real product architecture and photography
   ============================================================ */

/* real photographs replace placeholder blocks; crops are pre-cut to the slot ratio */
.photo { display: block; width: 100%; height: auto; }
.bleed img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; object-position: 50% 60%; display: block; }
.header-aside a.strong { color: var(--c-text); font-weight: 500; }

/* product list: index | text | photo */
.list-ruled > li { grid-template-columns: 1fr 200px; column-gap: 32px; align-items: start; }
.list-ruled .spec-line {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.03em; line-height: 1.5;
  color: var(--c-accent); margin: 0 0 10px;
}
.list-ruled figure { margin: 0; }

/* spec section: table + dimension drawing */
.spec .drawing { margin-top: 28px; }
.spec .drawing img { width: 100%; height: auto; display: block; }
.spec .drawing .for-dark { mix-blend-mode: screen; }
.spec .drawing figcaption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-altText2); padding-top: 10px; }

/* references without names: 60/40 with a stacked right column */
.refs { padding: 0 0 128px; }
.refs .head { max-width: 640px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.refs .head p { color: var(--c-text2); }
.refs .grid { display: grid; grid-template-columns: 60fr 40fr; gap: 24px; align-items: start; }
.refs .stack { display: grid; gap: 24px; }
.refs figure { margin: 0; }
.refs figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--c-text2); padding-top: 10px;
}

@media (max-width: 860px) {
  .list-ruled > li { grid-template-columns: 1fr; column-gap: 16px; }
  .list-ruled figure { margin-top: 12px; }
  .list-ruled figure img { max-width: 320px; }
  .refs { padding-bottom: 80px; }
  .refs .grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Revision 2026-09-04 (multi-page): header dropdown, page heads,
   category, product, cases, documents, service, contact pages
   ============================================================ */

/* header: phone, compact primary button, product dropdown */
.header-aside { align-items: center; gap: 20px; }
.header-aside .phone { font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--c-text); }
.header-aside .lang { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--c-text2); }
.btn-sm { padding: 14px 22px; font-size: 0.8125rem; }
.nav a.is-current, .nav .nav-label.is-current { border-bottom-color: var(--c-primary); }
.has-menu { position: relative; display: flex; align-items: center; gap: 4px; }
.menu-toggle { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.menu-toggle::before { content: ""; position: absolute; left: 12px; top: 10px; width: 7px; height: 7px; border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); transform: rotate(45deg); }
.menu { display: block; visibility: hidden; position: absolute; left: -16px; top: calc(100% + 12px); z-index: 30; min-width: 300px; padding: 8px 0; background: var(--c-bg); border: 1px solid var(--c-line); transition: visibility 0s linear 0.35s; }
.menu::before { content: ""; position: absolute; left: -1px; right: -1px; top: -14px; height: 14px; }
.has-menu::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 14px; }
.menu li a { display: block; padding: 13px 20px; font-size: 1rem; text-decoration: none; border-bottom: 0; }
.menu li a:hover, .menu li a:focus-visible { outline: none; background: var(--c-surface); }
.menu li.all a { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-text2); border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 12px; }
.has-menu:hover .menu, .has-menu:focus-within .menu, .has-menu.is-open .menu { visibility: visible; transition-delay: 0s; }
.has-menu:hover .menu-toggle::before, .has-menu.is-open .menu-toggle::before { border-color: var(--c-primary); }
.has-menu.is-dismissed .menu { visibility: hidden; transition-delay: 0s; }

/* breadcrumb strip */
.crumbs { border-bottom: 1px solid var(--c-line); font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.crumbs .wrap { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--c-text2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs span[aria-current] { color: var(--c-text); }

/* generic page head: text only, or 45/55 with photo */
.page-head { padding: 72px 0 56px; }
.page-head .copy { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.page-head .copy h1 { margin-top: 4px; }
.page-head .spec-line { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.03em; color: var(--c-accent); }
.page-head.has-photo .wrap { display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: end; }
.page-head.has-photo { padding-bottom: 0; }
.page-head.has-photo .media { margin-right: calc(-1 * var(--edge)); }

/* key/value mini table used on product and case pages */
.kv { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 8px 0; }
.kv th, .kv td { text-align: left; padding: 10px 0; border-top: 1px solid var(--c-line); vertical-align: top; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 1px solid var(--c-line); }
.kv th { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--c-text2); width: 40%; padding-right: 16px; }

/* shared ruled line list */
.lines { display: flex; flex-direction: column; }
.lines li { padding: 12px 0; border-top: 1px solid var(--c-line); }
.lines li:last-child { border-bottom: 1px solid var(--c-line); }

/* split CTA row (left heading, right actions) */
.cta-row { padding: 80px 0 96px; border-top: 1px solid var(--c-line); }
.cta-row .wrap { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; }
.cta-row p { color: var(--c-text2); margin-top: 10px; max-width: 52ch; }
.cta-row .act { display: flex; align-items: center; gap: 28px; justify-content: flex-end; flex-wrap: wrap; }
.cta-row .phone { font-family: var(--font-mono); font-size: 0.9375rem; text-decoration: none; }
.cta-row .phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* home: case in depth (60/40 photo + facts) */
.case { padding: 112px 0; }
.case .head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.case .grid { display: grid; grid-template-columns: 60fr 40fr; gap: 40px; align-items: start; }
.case figure { margin: 0; }
.case figure img { width: 100%; height: auto; display: block; }
.case figcaption { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text2); padding-top: 10px; }
.case .facts .btn { margin-top: 24px; }

/* home + kurumsal: production block (40/60 text + 1 large, 2 small photos) */
.uretim { padding: 112px 0 96px; }
.uretim .wrap { display: grid; grid-template-columns: 40fr 60fr; gap: 64px; align-items: start; }
.uretim .copy { display: flex; flex-direction: column; gap: 16px; }
.uretim .copy p { color: var(--c-text2); }
.uretim .copy .links { margin-top: 20px; }
.uretim .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uretim .photos figure { margin: 0; }
.uretim .photos figure:first-child { grid-column: 1 / 3; }
.uretim .photos img { width: 100%; height: auto; display: block; }

/* home: service strip */
.servis-strip { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 40px 0; }
.servis-strip .wrap { display: grid; grid-template-columns: 30fr 70fr; gap: 40px; align-items: start; }
.servis-strip .lead { display: flex; flex-direction: column; gap: 10px; }
.servis-strip ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.servis-strip li { padding: 4px 20px 4px 0; border-left: 1px solid var(--c-line); padding-left: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; }
.servis-strip li strong { font-weight: 500; }
.servis-strip li span { color: var(--c-text2); font-size: 0.875rem; }

/* products hub */
.hub { padding: 24px 0 96px; }
.hub-list li { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: start; padding: 48px 0; border-top: 1px solid var(--c-line); }
.hub-list li:last-child { border-bottom: 1px solid var(--c-line); }
.hub-list figure { margin: 0; }
.hub-list .idx { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-accent); }
.hub-list h2 { margin: 8px 0 12px; }
.hub-list h2 a { text-decoration: none; }
.hub-list h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.hub-list .spec-line { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--c-accent); margin-bottom: 20px; line-height: 1.5; }
.hub-list .sub li { display: block; padding: 10px 0; border-top: 1px solid var(--c-line); }
.hub-list .sub li:last-child { border-bottom: 1px solid var(--c-line); }
.hub-list .sub a { text-decoration: none; font-weight: 500; }
.hub-list .sub a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* category page: product list (photo 300 | text) */
.cat-list { padding: 72px 0 64px; }
.cat-list ol > li { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 36px 0; border-top: 1px solid var(--c-line); align-items: start; }
.cat-list ol > li:last-child { border-bottom: 1px solid var(--c-line); }
.cat-list figure { margin: 0; }
.cat-list .idx { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-accent); }
.cat-list h2 { font-size: calc(1.45rem * var(--h-scale)); margin: 6px 0 10px; }
.cat-list h2 a { text-decoration: none; }
.cat-list h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.cat-list p { color: var(--c-text2); max-width: 60ch; }
.cat-list .kv { max-width: 520px; margin-top: 16px; }
.cat-list .more { display: inline-block; margin-top: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--c-text); padding-bottom: 2px; }
.cat-list .more:hover { border-bottom-color: var(--c-primary); color: var(--c-primary); }
.cat-fit { padding: 64px 0 96px; }
.cat-fit .wrap { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; align-items: start; }
.cat-fit p { color: var(--c-text2); margin-top: 12px; }

/* product page */
.prod-head { padding: 56px 0 64px; }
.prod-head .wrap { display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: start; }
.prod-head .copy { display: flex; flex-direction: column; gap: 18px; }
.prod-head .copy .kv { max-width: 480px; }
.prod-head .copy .btn { align-self: flex-start; margin-top: 8px; }
.prod-head .media img { width: 100%; height: auto; display: block; }
.prod-head .media .ph.tall { min-height: 460px; }
.prod-photos { padding: 0 0 72px; }
.prod-photos .strip { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 16px; }
.prod-photos figure { margin: 0; }
.prod-photos img { width: 100%; height: auto; display: block; }
.prod-photos figcaption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--c-text2); padding-top: 8px; }
.prod-spec { margin-top: 0; }
.prod-fit { padding: 96px 0 80px; }
.prod-fit .wrap { display: grid; grid-template-columns: 55fr 45fr; gap: 64px; align-items: start; }
.prod-fit h2 { margin: 12px 0 20px; }
.prod-fit p { color: var(--c-text2); margin-top: 20px; }
.prod-docs { padding: 96px 0 64px; }
.prod-docs .wrap { display: grid; grid-template-columns: 50fr 50fr; gap: 64px; align-items: start; }
.prod-docs h2 { margin: 12px 0 20px; }
.prod-docs .links { margin-top: 0; }

/* tesisler */
.flow.tight { padding-top: 72px; }

/* projeler: case files, always facts left / photos right */
.cases { padding: 24px 0 64px; }
.case-file { display: grid; grid-template-columns: 40fr 60fr; gap: 56px; align-items: start; padding: 64px 0; border-top: 1px solid var(--c-line); }
.case-file:last-child { border-bottom: 1px solid var(--c-line); }
.case-file .idx { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-accent); }
.case-file h2 { margin: 8px 0 16px; }
.case-file .facts p { color: var(--c-text2); margin-top: 20px; }
.case-file figure { margin: 0; }
.case-file img { width: 100%; height: auto; display: block; }
.case-file figcaption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--c-text2); padding-top: 8px; }
.case-file .row { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-top: 16px; }

/* teknik */
.sheets { padding: 24px 0 96px; }
.sheets .wrap { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; align-items: start; }
.sheets h2 { margin: 12px 0 16px; }
.sheets p { color: var(--c-text2); }
.sheets .links { margin-top: 0; }
.katalog { padding: 96px 0 0; }
.panel-row { display: grid; grid-template-columns: 60fr 40fr; gap: 40px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); padding: 36px 40px; }
.panel-row h2 { margin: 10px 0 8px; }
.panel-row p { color: var(--c-text2); }
.panel-row .act { display: flex; gap: 20px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pill { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-text2); border: 1px solid var(--c-line); padding: 8px 12px; }
.faq { padding: 96px 0 64px; }
.faq .wrap { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; align-items: start; }
.faq h2 { margin-top: 12px; }
.faq details { border-top: 1px solid var(--c-line); }
.faq details:last-child { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 500; list-style: none; display: flex; gap: 16px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .idx { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-accent); }
.faq details p { color: var(--c-text2); padding: 0 0 20px; }
.faq summary:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }

/* kurumsal */
.facts-row { padding: 72px 0 0; }
.facts-row .wrap { display: grid; grid-template-columns: 35fr 65fr; gap: 64px; align-items: start; }
.facts-row .copy { display: flex; flex-direction: column; gap: 16px; }
.facts-row .copy p { color: var(--c-text2); }

/* belgeler */
.docs { padding: 24px 0 64px; }
.docs ol > li { display: grid; grid-template-columns: 1fr 140px 220px; gap: 24px; align-items: center; padding: 28px 0; border-top: 1px solid var(--c-line); }
.docs ol > li:last-child { border-bottom: 1px solid var(--c-line); }
.docs .idx { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-accent); }
.docs h2 { font-size: calc(1.3rem * var(--h-scale)); margin-bottom: 6px; }
.docs p { color: var(--c-text2); font-size: 0.9375rem; }
.docs .issuer { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text2); }
.docs .ph.doc { min-height: 120px; font-size: 0.75rem; }

/* servis */
.service-list { padding: 64px 0 96px; }
.service-list ol > li { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--c-line); align-items: start; }
.service-list ol > li:last-child { border-bottom: 1px solid var(--c-line); }
.service-list .idx { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-accent); padding-top: 8px; }
.service-list h2 { font-size: calc(1.4rem * var(--h-scale)); margin-bottom: 8px; }
.service-list p { color: var(--c-text2); max-width: 64ch; }

/* iletisim */
.contact-page { padding: 24px 0 112px; }
.contact-page .wrap { display: grid; grid-template-columns: 40fr 60fr; gap: 64px; align-items: start; }
.contact-page .info .links { margin-top: 0; }
.contact-page .ph.map { min-height: 280px; margin-top: 32px; }
.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-stack .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-stack .btn { align-self: flex-start; margin-top: 8px; }
.form-stack .note { color: var(--c-text2); font-size: 0.9375rem; }
.form-stack .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-stack .form-msg:empty { display: none; }
.field select { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; padding: 14px 16px; min-height: 50px; -webkit-appearance: none; appearance: none; }
.field select:focus-visible { outline: none; border-color: var(--c-accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text2); opacity: 1; }

@media (max-width: 1080px) {
  .servis-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .docs ol > li { grid-template-columns: 1fr 120px; }
  .docs .ph.doc { grid-column: 1 / 3; }
}
@media (max-width: 860px) {
  .site-header .bar { gap: 12px 20px; }
  .header-aside { gap: 14px; }
  .header-aside .phone { display: none; }
  .menu-toggle { display: none; }
  .menu { display: none !important; }
  .page-head { padding: 40px 0 32px; }
  .page-head.has-photo .wrap { grid-template-columns: 1fr; gap: 28px; }
  .page-head.has-photo .media { margin-inline: calc(-1 * var(--edge)); }
  .cta-row { padding: 56px 0 64px; }
  .cta-row .wrap { grid-template-columns: 1fr; gap: 24px; }
  .cta-row .act { justify-content: flex-start; }
  .case .grid, .uretim .wrap, .servis-strip .wrap, .hub-list li, .cat-list ol > li, .cat-fit .wrap, .prod-head .wrap, .prod-fit .wrap, .prod-docs .wrap, .case-file, .sheets .wrap, .panel-row, .faq .wrap, .facts-row .wrap, .contact-page .wrap { grid-template-columns: 1fr; }
  .case, .uretim, .cat-fit, .prod-fit, .prod-docs { padding-top: 56px; padding-bottom: 56px; }
  .servis-strip ul { grid-template-columns: 1fr; }
  .servis-strip li { border-left: 0; border-top: 1px solid var(--c-line); padding: 12px 0; }
  .hub-list li { padding: 32px 0; gap: 20px; }
  .cat-list ol > li { gap: 20px; padding: 28px 0; }
  .cat-list figure img { max-width: 360px; }
  .prod-photos .strip { grid-template-columns: 1fr 1fr; }
  .case-file { padding: 40px 0; gap: 24px; }
  .docs ol > li { grid-template-columns: 1fr; }
  .docs .issuer, .docs .ph.doc { grid-column: 1; }
  .form-stack .two { grid-template-columns: 1fr; }
}

/* heading links: underline only on hover */
.list-ruled h3 a { text-decoration: none; }
.list-ruled h3 a:hover, .list-ruled h3 a:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 6px; }

/* ============================================================
   Revision 2026-09-04 (hero rebuilt, eyebrows removed)
   ============================================================ */
.hero { padding: 0; }
.hero-title { position: absolute; top: 50%; transform: translateY(-50%); left: max(var(--edge), calc((100% - var(--wrap)) / 2 + var(--edge))); max-width: min(1080px, calc(100% - 2 * var(--edge))); background: rgba(var(--c-surface-rgb), 0.5); padding: 44px 56px 50px; }
.hero-title h1 { font-size: calc(clamp(2.6rem, 5vw, 3.75rem) * var(--h-scale)); line-height: 1.06; overflow-wrap: anywhere; }
.hero-title h1 .line { display: block; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; height: clamp(520px, 60vw, 760px); object-fit: cover; object-position: 50% 48%; display: block; }
.hero-cta { position: absolute; bottom: 104px; right: calc(var(--edge) + 96px); padding: 24px 44px; font-size: 1.0625rem; border: 2px solid var(--c-text); }
.hero-cta:hover { border-color: var(--c-text); }
.hero-strip { position: relative; z-index: 1; margin-top: -58px; }
.hero-strip .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--c-surface); border: 2px solid var(--c-text2); }
.hero-strip .facts li { display: flex; flex-direction: column; gap: 8px; padding: 26px 32px; border-right: 2px solid var(--c-text2); }
.hero-strip .facts li:last-child { border-right: 0; }
.hero-strip .facts span { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text2); }
.hero-strip .facts b { font-family: var(--font-heading); font-weight: var(--hw); font-size: calc(1.75rem * var(--h-scale)); line-height: 1.1; }
.intro { padding: 88px 0 0; }
.intro p { max-width: 640px; }

/* headings that replaced eyebrows */
.spec h2 { font-size: calc(1.15rem * var(--h-scale)); margin-bottom: 4px; }
.spec .quote { margin-top: 12px; }
.servis-strip .lead h2 { font-size: calc(1.15rem * var(--h-scale)); }
.case .head p { color: var(--c-text2); }
.faq .wrap > div > p { color: var(--c-text2); margin-top: 10px; }
.facts-row h2 { margin-bottom: 12px; }
.page-head h1 { font-size: calc(clamp(2.1rem, 3.6vw, 2.8rem) * var(--h-scale)); }

@media (max-width: 860px) {
  .hero-title { top: 44%; left: var(--edge); right: var(--edge); max-width: none; padding: 20px 22px 22px; }
  .hero-title h1 .line { display: inline; }
  .hero-photo img { height: clamp(520px, 130vw, 640px); }
  .hero-cta { bottom: 20px; right: var(--edge); padding: 18px 28px; font-size: 0.9375rem; }
  .hero-strip { margin-top: 0; padding-inline: 0; }
  .hero-strip .facts { grid-template-columns: 1fr 1fr; border-left: 0; border-right: 0; }
  .hero-strip .facts li { padding: 18px var(--edge); border-right: 0; border-bottom: 2px solid var(--c-text2); }
  .hero-strip .facts li:nth-child(odd) { border-right: 2px solid var(--c-text2); }
  .hero-strip .facts li:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-strip .facts b { font-size: calc(1.35rem * var(--h-scale)); }
}

@media (max-width: 860px) { .wordmark svg { height: 22px; } }

/* ============================================================
   Revision 2026-09-07: content architecture
   ============================================================ */
/* claims to confirm before publishing; removed with the brackets in src/content */
mark.confirm { background: var(--c-mark); color: var(--c-onPrimary); padding: 0 4px; font-family: inherit; }
mark.confirm::before { content: "confirm: "; font-family: var(--font-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer .cols { grid-template-columns: 2fr 1fr 1.2fr 1fr; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* home: who we build for */
.who { padding: 112px 0 0; }
.who .head { max-width: 640px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.who .head p { color: var(--c-text2); }
.seg-list li { padding: 0; }
.seg-list a { display: grid; grid-template-columns: 34fr 66fr; gap: 32px; padding: 18px 0; text-decoration: none; }
.seg-list a strong { font-weight: 500; }
.seg-list a span { color: var(--c-text2); }
.seg-list a:hover strong, .seg-list a:focus-visible strong { outline: none; text-decoration: underline; text-underline-offset: 5px; }
.spec .standards { font-size: 0.9375rem; margin: 0 0 28px; color: var(--c-altText2); }
@media (max-width: 860px) { .who { padding-top: 64px; } .seg-list a { grid-template-columns: 1fr; gap: 6px; } }
.cat-fit.buyers { padding-top: 0; }
.prod-fit h2.sub { margin-top: 32px; }
.prod-fit .note { margin-top: 16px; font-size: 0.9375rem; }

/* sizing guide */
.guide { padding: 24px 0 64px; }
.guide .rule { display: grid; grid-template-columns: 62fr 38fr; gap: 56px; padding: 44px 0; border-top: 1px solid var(--c-line); align-items: start; }
.guide .rule:last-child { border-bottom: 1px solid var(--c-line); }
.guide .rule h2 { margin-bottom: 14px; }
.guide .rule p { color: var(--c-text2); }
.guide .rule .example { color: var(--c-text); margin-top: 14px; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6; }
.guide .inputs h3 { font-size: 0.8125rem; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--c-text2); margin-bottom: 8px; }
@media (max-width: 860px) { .guide .rule { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; } }

/* compare */
.routes { padding: 24px 0 48px; }
.route { padding: 40px 0; border-top: 1px solid var(--c-line); }
.route:last-child { border-bottom: 1px solid var(--c-line); }
.route h2 { margin-bottom: 20px; }
.route .cols { display: grid; grid-template-columns: 45fr 30fr 25fr; gap: 40px; }
.route h3 { font-size: 0.8125rem; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--c-text2); margin-bottom: 8px; }
.route p { color: var(--c-text); font-size: 0.9375rem; }
.criteria { padding: 64px 0 32px; }
.criteria h2 { margin-bottom: 24px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.cmp th, .cmp td { text-align: left; padding: 12px 16px 12px 0; border-top: 1px solid var(--c-line); vertical-align: top; }
.cmp thead th { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 500; color: var(--c-text2); border-top: 0; border-bottom: 2px solid var(--c-text2); }
.cmp tbody th { font-weight: 500; width: 26%; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 1px solid var(--c-line); }
@media (max-width: 860px) { .route .cols { grid-template-columns: 1fr; gap: 16px; } .cmp { display: block; overflow-x: auto; } }

.facts-row .copy .lines li strong { font-weight: 500; }
.contact-page .after { margin-top: 24px; color: var(--c-text2); font-size: 0.9375rem; }

/* header: the menu spreads across the bar so logo, every item and the quote button sit at equal gaps
   (bar gap = nav gap, the spare width shared evenly); the chevron box ends at the chevron so it adds no hidden gap */
.site-header .bar { gap: 44px; }
.nav { gap: 28px; }
@media (min-width: 861px) {
  .site-header .bar { gap: 28px; }
  .nav { flex: 1; justify-content: space-evenly; }
  .menu-toggle { width: 21px; }
}
.header-aside .phone, .btn-sm { white-space: nowrap; }
@media (max-width: 1280px) { .header-aside .phone { display: none; } }

/* ---------- engineering tools (2026-09-10) ---------- */
.tool { padding: 24px 0 72px; }
.tool .wrap { display: grid; grid-template-columns: 42fr 58fr; gap: 64px; align-items: start; }
.tool .group { border: 0; border-top: 1px solid var(--c-line); padding: 20px 0 8px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tool .group legend { font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.1rem; padding: 0 0 6px; }
.tool .form-stack .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.tool .field input { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; padding: 12px 14px; min-height: 46px; }
.tool .field input:focus-visible { outline: none; border-color: var(--c-accent); }
.tool .field[hidden] { display: none; }
.tool .stages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool .stages .stage-head { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text2); }
.tool-out { position: sticky; top: 24px; }
.tool-out .out-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 8px; }
.tool-out .units { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; }
.tool-out .units label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.tool-out .units input { margin: 0; accent-color: var(--c-primary); }
.tool-out h3 { margin: 28px 0 4px; font-size: 1rem; }
.tool-out .kv th { width: 52%; }
.tool-out .kv tr.key th, .tool-out .kv tr.key td { font-weight: 600; color: var(--c-text); font-size: 1.05rem; }
.tool-out .kv tr.key td { font-family: var(--font-mono); }
.tool-out .cmp-out th { width: auto; }
.tool-out .cmp-out thead th { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--c-text2); border-top: 0; border-bottom: 2px solid var(--c-text2); padding: 8px 0; }
.tool-out .cmp-out tbody td { font-family: var(--font-mono); font-size: 0.9rem; padding-right: 16px; }
.tool-out .out-note { color: var(--c-text2); font-size: 0.9375rem; margin-top: 16px; }
.tool-out .out-act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.tool-out .flow-svg { margin-top: 20px; border: 1px solid var(--c-line); }
.tool-out .flow-svg svg { width: 100%; height: auto; }
.tool-list { padding: 8px 0 24px; }
.tool-list .hub-list h2 a { text-decoration: none; }
.tool-list .hub-list h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tool-list .hub-list li > div:first-child p { color: var(--c-text2); margin-top: 8px; max-width: 52ch; }
.tool-list .hub-list li > div:last-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.prose.method .copy h2:not(:first-child) { margin-top: 24px; }
.prose.method .lines li { color: var(--c-text2); font-size: 0.9375rem; }
.tool-note { margin-top: 20px; color: var(--c-text2); font-size: 0.9375rem; }
@media (max-width: 1080px) { .tool .wrap { gap: 40px; } }
@media (max-width: 860px) {
  .tool .wrap { grid-template-columns: 1fr; }
  .tool-out { position: static; }
  .tool .form-stack .three { grid-template-columns: 1fr; }
  .tool .stages { grid-template-columns: 1fr; }
}
.tool .wrap > * { min-width: 0; }
.tool .field input, .tool .field select { width: 100%; min-width: 0; }
.tool-out .out-act [hidden] { display: none; }
.tool-out .kv th { width: 46%; }
.tool-out .cmp-out th { width: auto; }
.tool-out .cmp-out tbody td, .tool-out .cmp-out thead th { white-space: nowrap; padding-right: 20px; }
.tool-out .cmp-out tbody th { white-space: normal; padding-right: 12px; }
.tool .field { justify-content: flex-end; }

/* ---------- tool cards and diagrams (2026-09-10) ---------- */
.tool-cards { padding: 8px 0 32px; }
.tool-cards .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tool-cards .card { border: 1px solid var(--c-line); background: var(--c-bg); display: flex; flex-direction: column; }
.tool-cards .figure { display: block; background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: 20px 24px; color: var(--c-text); }
.tool-cards .figure svg { width: 100%; height: auto; display: block; }
.tool-cards .figure svg text { font-family: var(--font-mono); }
.tool-cards .body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tool-cards .body h2 { font-size: calc(1.35rem * var(--h-scale)); }
.tool-cards .body h2 a { text-decoration: none; }
.tool-cards .body h2 a:hover, .tool-cards .body h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.tool-cards .body > p { color: var(--c-text2); }
.tool-cards .io { display: grid; grid-template-columns: 48px 1fr; row-gap: 6px; column-gap: 12px; margin: 4px 0 8px; font-size: 0.9375rem; }
.tool-cards .io dt { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text2); padding-top: 3px; }
.tool-cards .io dd { margin: 0; color: var(--c-text); }
.tool-cards .body .btn { align-self: flex-start; margin-top: auto; }
.page-head.has-diagram .wrap { align-items: start; }
.page-head .media.diagram { border: 1px solid var(--c-line); background: var(--c-surface); padding: 20px 24px; color: var(--c-text); }
.page-head .media.diagram svg { width: 100%; height: auto; display: block; }
.page-head .media.diagram svg text { font-family: var(--font-mono); }
@media (max-width: 860px) {
  .tool-cards .cards { grid-template-columns: 1fr; }
}

/* ---------- blog: engineering notes (2026-09-10) ---------- */
.post-list { padding: 8px 0 24px; }
.post-list .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post-list .card { border: 1px solid var(--c-line); background: var(--c-bg); display: flex; flex-direction: column; }
.post-list .figure { display: block; background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: 16px 20px; color: var(--c-text); }
.post-list .figure svg { width: 100%; height: auto; display: block; }
.post-list .figure svg text { font-family: var(--font-mono); }
.post-list .body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-list .meta { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--c-text2); text-transform: uppercase; }
.post-list .body h2 { font-size: calc(1.25rem * var(--h-scale)); line-height: 1.25; }
.post-list .body h2 a { text-decoration: none; }
.post-list .body h2 a:hover, .post-list .body h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.post-list .body > p:not(.meta) { color: var(--c-text2); }
.post-list .body .btn { align-self: flex-start; margin-top: auto; }

.post { padding: 24px 0 88px; }
.post .wrap { display: grid; grid-template-columns: 64fr 36fr; gap: 72px; align-items: start; }
.post .copy { max-width: 68ch; min-width: 0; }
.post .byline { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--c-text2); padding-bottom: 20px; border-bottom: 1px solid var(--c-line); margin-bottom: 32px; }
.post .copy h2 { margin: 44px 0 14px; }
.post .copy h3 { margin: 28px 0 10px; }
.post .copy p { margin-bottom: 16px; }
.post .copy p.q { font-weight: 600; color: var(--c-text); margin-top: 26px; margin-bottom: 8px; }
.post .copy p.q + p { color: var(--c-text2); }
.post .copy .cmp { margin: 24px 0 28px; }
.post .copy .lines { margin: 8px 0 24px; }
.post .copy blockquote { margin: 28px 0; padding: 20px 0 20px 24px; border-left: 2px solid var(--c-primary); }
.post .copy blockquote p { color: var(--c-text2); margin: 0; }
.post .copy code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-surface); padding: 1px 5px; }
.post .copy a { color: var(--c-primary); text-underline-offset: 3px; }
.post .side { position: sticky; top: 24px; border-top: 2px solid var(--c-text2); padding-top: 20px; }
.post .side h2 { font-size: 1rem; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; color: var(--c-text2); margin-bottom: 10px; }
.post .side h2:not(:first-child) { margin-top: 32px; }
.post .side p { color: var(--c-text2); font-size: 0.9375rem; margin-bottom: 16px; }
.post .side .links { margin-top: 0; }
@media (max-width: 1080px) { .post .wrap { gap: 48px; } }
@media (max-width: 860px) {
  .post-list .cards { grid-template-columns: 1fr; }
  .post .wrap { grid-template-columns: 1fr; gap: 40px; }
  .post .side { position: static; }
}

.cfg-feature { padding: 8px 0 24px; }
.cfg-feature .wrap > .body { border: 1px solid var(--c-text2); background: var(--c-surface); padding: 28px 32px; display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 760px; }
.cfg-feature h2 { font-size: calc(1.5rem * var(--h-scale)); }
.cfg-feature h2 a { text-decoration: none; }
.cfg-feature h2 a:hover, .cfg-feature h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.cfg-feature .io { display: grid; grid-template-columns: 48px 1fr; row-gap: 6px; column-gap: 12px; margin: 0 0 6px; font-size: 0.9375rem; }
.cfg-feature .io dt { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text2); padding-top: 3px; }
.cfg-feature .io dd { margin: 0; }
.cfg-feature .btn { justify-self: start; }

.cfg { padding: 16px 0 40px; }
.cfg .wrap { display: grid; grid-template-columns: 36fr 64fr; gap: 32px; align-items: stretch; }
.cfg .wrap > * { min-width: 0; }
.cfg-chat { display: flex; flex-direction: column; border: 1px solid var(--c-line); background: var(--c-bg); height: 640px; }
.cfg-msgs { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.cfg-welcome h2 { font-size: calc(1.3rem * var(--h-scale)); margin-bottom: 8px; }
.cfg-welcome p { color: var(--c-text2); font-size: 0.9375rem; }
.cfg-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cfg-offline { margin-top: 16px; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-line); font-size: 0.9375rem; }
.cfg-offline[hidden], .cfg-welcome[hidden] { display: none; }
.cfg-turn { display: flex; flex-direction: column; gap: 10px; font-size: 0.9375rem; line-height: 1.55; }
.cfg-user { align-self: flex-end; max-width: 88%; background: var(--c-accent); color: var(--c-altText); padding: 10px 14px; border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cfg-bot { max-width: 96%; background: var(--c-surface); padding: 12px 14px; border-radius: 2px; overflow-wrap: anywhere; }
.cfg-bot p + p, .cfg-bot p + ul, .cfg-bot ul + p { margin-top: 8px; }
.cfg-bot ul { list-style: square; padding-left: 18px; }
.cfg-steps { list-style: none !important; padding: 0 !important; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text2); display: flex; flex-direction: column; gap: 4px; }
.cfg-steps .is-now { color: var(--c-text); font-weight: 500; }
.cfg-error { color: var(--c-primary); }
.cfg-notice { font-size: 0.875rem; color: var(--c-primary); background: var(--c-surface); padding: 8px 12px; }
.cfg-composer { border-top: 1px solid var(--c-line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.cfg-composer label { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text2); }
.cfg-composer textarea { width: 100%; resize: vertical; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; padding: 10px 12px; font-size: 0.9375rem; line-height: 1.5; }
.cfg-composer textarea:focus-visible { outline: none; border-color: var(--c-accent); }
.cfg-composer textarea:disabled { background: var(--c-surface); color: var(--c-text2); }
.cfg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-bar .hint { font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-text2); margin-right: auto; }
.cfg-bar [hidden] { display: none; }
.cfg-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cfg-viewer { position: relative; height: 520px; border: 1px solid var(--c-line); background: var(--c-bg); overflow: hidden; }
.cfg-viewer canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.cfg-noview { display: none; position: absolute; inset: 0; padding: 32px; color: var(--c-text2); align-items: center; justify-content: center; text-align: center; }
.cfg-viewer.is-offline .cfg-noview { display: flex; }
.cfg-tag { position: absolute; pointer-events: none; background: var(--c-text); color: var(--c-bg); font-family: var(--font-mono); font-size: 0.75rem; padding: 4px 8px; white-space: nowrap; }
.cfg-tag[hidden] { display: none; }
.cfg-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-views { display: flex; gap: 6px; }
.cfg-views .btn { padding: 10px 16px; }
.cfg-x { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8125rem; cursor: pointer; }
.cfg-x input { margin: 0; accent-color: var(--c-primary); }
.cfg-status { margin-left: auto; font-family: var(--font-mono); font-size: 0.8125rem; padding: 6px 10px; border: 1px solid currentColor; }
.cfg-status.is-pass { color: var(--c-text); }
.cfg-status.is-fail { color: var(--c-primary); }
.cfg-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cfg-act [hidden] { display: none; }
.cfg-gate { margin-top: 18px; max-width: 420px; gap: 12px; }
.cfg-gate[hidden] { display: none; }
.cfg-gate .btn { margin-top: 0; }
.cfg-gate-msg:empty { display: none; }

@media (max-width: 1080px) { .cfg .wrap { grid-template-columns: 1fr; } .cfg-chat { height: 520px; } .cfg-result .wrap { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 860px) { .cfg-viewer { height: 400px; } .cfg-status { margin-left: 0; } .cfg-feature .wrap > .body { padding: 22px 20px; } }
.cfg-feature .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cfg-feature .wrap > .body { max-width: none; }
@media (max-width: 1080px) { .cfg-feature .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .cfg-feature .wrap { grid-template-columns: 1fr; } }
.prod-head .copy .btn + .btn { margin-top: 12px; }
.cfg-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line); }
.cfg-tabs [role=tab] { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; padding: 12px 14px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: var(--c-surface); color: var(--c-text2); cursor: pointer; text-align: center; }
.cfg-tabs [role=tab] + [role=tab] { border-left: 1px solid var(--c-line); }
.cfg-tabs [role=tab][aria-selected=true] { background: var(--c-bg); color: var(--c-text); border-bottom-color: var(--c-primary); }
.cfg-tabs [role=tab]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.cfg-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cfg-pane[hidden] { display: none; }
.cfg-pick-intro { padding: 14px 22px 0; color: var(--c-text2); font-size: 0.9375rem; }
.cfg-pick-bar { border-top: 1px solid var(--c-line); padding: 12px 22px; display: flex; justify-content: flex-end; }
.cfg-pick { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 20px; }
.cfg-pick .grp { border: 0; border-top: 1px solid var(--c-line); margin: 14px 0 0; padding: 12px 0 0; min-width: 0; }
.cfg-pick .grp:first-child { border-top: 0; margin-top: 4px; }
.cfg-pick .grp[hidden], .cfg-pick .cfg-f[hidden], .cfg-pick .note[hidden] { display: none; }
.cfg-pick legend { float: left; width: 100%; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: 10px; }
.cfg-pick legend + .row { clear: both; }
.cfg-pick .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cfg-pick .cfg-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cfg-pick .cfg-f.radios, .cfg-pick .cfg-f.check, .cfg-pick .cfg-f:has(select), .cfg-pick .note { grid-column: 1 / -1; }
.cfg-pick label, .cfg-pick .label { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text2); }
.cfg-pick .unit { color: var(--c-text2); opacity: 0.8; }
.cfg-pick input[type=number], .cfg-pick select { font: inherit; font-size: 0.9375rem; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; padding: 8px 10px; width: 100%; min-width: 0; }
.cfg-pick input[type=number]:focus, .cfg-pick select:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.cfg-pick input[type=number]:invalid { border-color: var(--c-primary); }
.cfg-pick .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-pick .opts label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-line); padding: 7px 10px; cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; color: var(--c-text); background: var(--c-bg); }
.cfg-pick .opts label:has(input:checked) { border-color: var(--c-text); background: var(--c-surface); }
.cfg-pick .opts input, .cfg-pick .check input { margin: 0; accent-color: var(--c-primary); }
.cfg-pick .check label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.9375rem; color: var(--c-text); cursor: pointer; }
.cfg-pick .help { color: var(--c-text2); font-size: 0.8125rem; }
.cfg-pick .note { color: var(--c-text2); font-size: 0.875rem; background: var(--c-surface); padding: 8px 10px; }
@media (max-width: 520px) { .cfg-pick .row { grid-template-columns: 1fr; } .cfg-pick { padding: 8px 16px 16px; } .cfg-pick-intro { padding: 12px 16px 0; } }
.cfg-home { padding: 104px 0 96px; }
.cfg-home .head { display: grid; grid-template-columns: 40fr 60fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.cfg-home .head p { color: var(--c-altText2); font-size: 1.0625rem; }
.cfg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cfg-cards li { display: flex; flex-direction: column; gap: 12px; padding: 0 0 26px; background: var(--c-alt2); border: 1px solid var(--c-altLine); }
.cfg-cards li > :not(.shot) { margin-left: 26px; margin-right: 26px; }
.cfg-cards .shot { display: block; margin-bottom: 10px; line-height: 0; border-bottom: 1px solid var(--c-altLine); }
.cfg-cards .shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cfg-cards h3 { font-size: calc(1.35rem * var(--h-scale)); margin: 0; }
.cfg-cards h3 a { color: var(--c-altText); text-decoration: none; }
.cfg-cards h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cfg-cards p { color: var(--c-altText2); font-size: 0.9375rem; }
.cfg-cards .btn { margin-top: auto; align-self: flex-start; }
.cfg-home .more { margin-top: 28px; }
.cfg-home .more a { color: var(--c-altText); text-underline-offset: 4px; }
.cfg-home .more a:hover { color: var(--c-altAccent); }
@media (max-width: 1080px) { .cfg-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .cfg-home { padding: 72px 0 64px; } .cfg-home .head, .cfg-cards { grid-template-columns: 1fr; } .cfg-home .head { gap: 16px; } }
.cfg-problems { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--c-primary); background: var(--c-surface); font-size: 0.9375rem; }
.cfg-problems[hidden] { display: none; }
.cfg-problems span { display: block; }
.cfg-problems span + span { margin-top: 6px; }

/* ---------- phones and small tablets (2026-10-19): one-row header with a menu button, menu as a list,
   content that never runs past the screen, form fields iOS does not zoom into ---------- */
.nav-open { display: none; }
.header-aside .btn .q-long { font: inherit; letter-spacing: inherit; }
@media (max-width: 860px) {
  .site-header .bar { flex-wrap: wrap; gap: 0 12px; padding: 12px var(--edge); }
  .header-aside { margin-left: auto; gap: 8px; }
  .header-aside .btn-sm { padding: 12px 16px; }
  .nav-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--c-text); background: transparent; cursor: pointer; }
  .nav-open span, .nav-open span::before, .nav-open span::after { display: block; width: 20px; height: 2px; background: var(--c-text); position: relative; }
  .nav-open span::before, .nav-open span::after { content: ""; position: absolute; left: 0; }
  .nav-open span::before { top: -6px; }
  .nav-open span::after { top: 6px; }
  .nav-is-open .nav-open span { background: transparent; }
  .nav-is-open .nav-open span::before { top: 0; transform: rotate(45deg); }
  .nav-is-open .nav-open span::after { top: 0; transform: rotate(-45deg); }
  .nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 12px; padding: 0 0 8px; overflow-x: visible; overflow-y: auto; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); white-space: normal; }
  .site-header.nav-is-open .nav { display: flex; }
  .nav > a, .nav .has-menu > a, .nav .nav-label { display: block; padding: 14px 0; border-top: 1px solid var(--c-line); border-bottom: 0; }
  .nav a.is-current, .nav .nav-label.is-current { color: var(--c-primary); border-bottom: 0; }
  .nav .nav-label { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--c-text2); }
  .has-menu { display: block; }
  .has-menu::after, .site-header .menu::before { display: none; }
  .site-header .nav .menu { display: block !important; visibility: visible; position: static; min-width: 0; padding: 0 0 6px 16px; border: 0; background: transparent; }
  .site-header .menu li a { padding: 12px 0; font-size: 0.9375rem; }
  .site-header .menu li.all a { margin-top: 0; padding-top: 12px; border-top: 0; }
  .contact-page .wrap > *, .tool .wrap > *, .post .wrap > * { min-width: 0; }
  .form-stack .two > *, .form-stack .field { min-width: 0; }
  .form-stack select, .form-stack input:not([type=checkbox]):not([type=radio]) { max-width: 100%; width: 100%; }
  .header-aside .btn-sm { min-height: 44px; display: inline-flex; align-items: center; }
  .links a { flex-wrap: wrap; gap: 4px 16px; }
  .links a span { overflow-wrap: anywhere; }
  .tool-out .cmp-out tbody td, .tool-out .cmp-out thead th { white-space: normal; padding-right: 10px; }
  .tool-out .cmp-out { font-size: 0.875rem; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  .q-long { display: none; }
}