*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  background: var(--surface);
}

body {
  margin: var(--space-0);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Full-width blocks meet at a straight, unanimated register edge. */
[data-register="arka-yuz"] {
  background: var(--arka-yuz);
  color: var(--text);
}

::selection {
  background: var(--text);
  color: var(--surface);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg,
canvas {
  display: block;
  max-width: var(--size-full, 100%);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: var(--space-0);
}

ul {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

/* Explicit soft hyphens belong to editorial copy, never display lettering. */
p,
li,
dd {
  hyphens: manual;
  -webkit-hyphens: manual;
}

h1,
h2,
h3,
h4,
.hero-title-stack,
.hero-title-trap,
.wordmark,
.footer-wordmark,
.studio-note-copy,
.eyebrow,
.tier-label,
.work-kicker,
.showcase-tag,
.aura-made,
.diag-kicker,
.diag-result,
.footer-meta,
.hero-signature,
.section-kunye,
.seal-title,
.tco figcaption,
.tco-table thead th,
.field label {
  hyphens: none;
  -webkit-hyphens: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--leading-versal);
}

:focus-visible {
  outline: var(--focus-width) solid var(--odak);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

.shell {
  width: min(calc(100% - (var(--space-gutter) * 2)), var(--shell-max));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: var(--space-hairline);
  height: var(--space-hairline);
  padding: var(--space-0);
  margin: calc(var(--space-hairline) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: var(--space-0);
}

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--layer-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  padding-inline: var(--space-5);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translateY(calc((var(--header-height) + var(--space-8)) * -1));
}

.skip-link:focus {
  transform: translateY(var(--space-0));
}

.site-header {
  position: sticky;
  top: var(--space-0);
  z-index: var(--layer-header);
  min-height: var(--header-layout-height);
  border-bottom: var(--border-width) solid var(--cizgi);
  background: var(--transparent);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-grid);
  align-items: center;
  width: min(calc(100% - (var(--space-gutter) * 2)), var(--shell-max));
  min-height: calc(var(--header-layout-height) - var(--border-width));
  padding-block: var(--header-padding);
  margin-inline: auto;
}

.wordmark {
  grid-column: 1 / 4;
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: var(--control-min-height);
  font-family: var(--font-display);
  font-size: var(--text-lede);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-wordmark);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.wordmark::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  margin-right: var(--space-3);
  background: var(--text);
}

.primary-nav {
  grid-column: 4 / 10;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.primary-nav a,
.language-toggle {
  display: inline-flex;
  align-items: center;
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
}

.primary-nav a {
  position: relative;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: var(--space-0);
  bottom: var(--space-2);
  left: var(--space-0);
  height: var(--border-width);
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  grid-column: 10 / 13;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.language-toggle {
  justify-content: center;
  min-width: var(--control-min-height);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--radius-none);
  background: var(--transparent);
}

.language-toggle:hover {
  background: var(--text);
  color: var(--surface);
}

.button {
  min-block-size: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-height);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--transparent);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  line-height: var(--leading-heading);
  text-align: center;
}

.button-primary {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.button-primary:hover {
  background: var(--surface);
  color: var(--text);
}

.button-outline {
  border-color: currentColor;
  background: var(--transparent);
  color: var(--text);
}

.button-outline:hover {
  background: var(--surface);
  color: var(--text);
}

.eyebrow,
.tier-label,
.work-kicker,
.showcase-tag,
.aura-made,
.diag-kicker,
.diag-result,
.form-status,
.footer-meta {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow::before {
  content: "";
  flex: 0 0 var(--space-7);
  height: var(--border-width);
  background: var(--text);
}

.hero {
  position: relative;
  overflow: clip;
  border-bottom: var(--border-width) solid var(--cizgi);
  background: var(--surface);
}

.section > .shell {
  position: relative;
  z-index: var(--layer-content);
}

.hero-inner {
  position: relative;
  z-index: var(--layer-content);
  padding-block: var(--space-11) var(--space-8);
}

.hero-kunye {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-7);
  padding: var(--space-3) var(--space-4);
  border-block: var(--border-width) solid var(--cizgi);
  border-inline: var(--space-0);
  border-radius: var(--radius-none);
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  line-height: var(--leading-versal-kucuk);
}

.hero-kunye-alan {
  color: var(--murekkep-sonus);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.hero-kunye [data-senet-serial] {
  overflow-wrap: anywhere;
}

.hero-konu-ipucu {
  grid-column: 1 / -1;
  min-width: var(--space-0);
  color: var(--murekkep-sonus);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

#konu {
  width: var(--size-full);
  min-width: var(--space-0);
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-0);
  border: var(--space-0);
  border-bottom: var(--border-width) solid var(--cizgi);
  border-radius: var(--radius-none);
  background: var(--transparent);
  color: var(--murekkep);
}

#konu:focus {
  border-bottom-color: var(--register-odak);
}

#konu::placeholder {
  color: var(--murekkep-sonus);
  opacity: 1;
}

/* This absolute query container inherits the complete, content-sized hero box.
   Its size containment cannot affect the headline's intrinsic layout. */
.hero-plaka-space {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.hero-plaka-olcu {
  position: absolute;
  width: var(--plaka-side);
  aspect-ratio: var(--ratio-square);
  color: var(--gravur-murekkep);
  opacity: 0;
  pointer-events: none;
}

.hero-gravur {
  position: absolute;
  inset: 0;
  width: var(--size-full);
  height: var(--size-full);
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}

:root[data-gravur="deneme"] .hero-plaka,
:root[data-render-mode="webgl2"] .hero-plaka,
:root[data-render-mode="webgl"] .hero-plaka {
  visibility: hidden;
}

:root[data-render-mode="webgl2"] .hero-gravur,
:root[data-render-mode="webgl"] .hero-gravur {
  visibility: visible;
}

.hero-plaka {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--murekkep);
  -webkit-mask-image: url("../assets/gravur-senet.svg");
  mask-image: url("../assets/gravur-senet.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--plaka-side) var(--plaka-side);
  mask-size: var(--plaka-side) var(--plaka-side);
  -webkit-mask-position: center calc(50% + var(--plaka-shift-y));
  mask-position: center calc(50% + var(--plaka-shift-y));
}

.hero-title-stack {
  display: grid;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-heavy);
  /* Pin the measured cut: H stem and trap share the same outline at every size. */
  font-optical-sizing: none;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-versal);
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-title-stack > * {
  grid-area: 1 / 1;
  min-width: var(--space-0);
  font: inherit;
  letter-spacing: inherit;
}

.hero-title-trap {
  color: transparent;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Remove this ONE rule to remove only the paper rings; both grid items remain. */
.hero-title-trap { -webkit-text-stroke: var(--tuzak) var(--kagit); }

.hero h1 {
  position: relative;
  color: var(--murekkep);
}

@supports not (-webkit-text-stroke: 1px black) {
  .hero-title-trap { visibility: hidden; }
}

/* B: the plate ends at the preceding section's box, before this writing row.
   No overlay or gradient: the cut is the hero's rectangular overflow edge. */
.hero-writing {
  background: var(--kagit);
  border-bottom: var(--border-width) solid var(--cizgi);
}

.hero-writing-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  padding-block: var(--space-8);
}

.hero-copy {
  grid-column: 1 / 8;
  grid-row: 1;
  position: relative;
  z-index: var(--layer-content);
  align-self: center;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--space-grid);
  align-items: start;
}

.hero-copy .eyebrow {
  grid-column: 1 / -1;
}

.hero-lede {
  grid-column: 1 / -1;
  max-width: var(--measure);
  margin-top: var(--space-8);
  font-size: var(--text-lede);
}

.hero-lede strong {
  font-weight: var(--weight-bold);
}

.hero-actions {
  grid-column: 1 / 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.text-link,
.showcase-cta,
.email-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  font-weight: var(--weight-bold);
}

.contact-copy .tel-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-lede);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-versal);
  font-variant-numeric: lining-nums tabular-nums;
}

.contact-copy .email-link {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.footer-tel {
  min-block-size: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: var(--tracking-nav);
}

.text-link::after,
.showcase-cta::after,
.email-link::after {
  content: "↗";
  margin-left: var(--space-3);
  color: var(--text);
}

.hero-signature {
  grid-column: 10 / 13;
  grid-row: 1;
  align-self: end;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--cizgi);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-body);
  text-transform: uppercase;
}

.section {
  position: relative;
  padding-block: var(--space-section);
  border-bottom: var(--border-width) solid var(--cizgi);
}

.section-heading {
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  margin-bottom: var(--space-12);
}

.section-heading .eyebrow {
  grid-column: 1 / 4;
  align-self: start;
  padding-top: var(--space-4);
}

.section-heading h2 {
  grid-column: 4 / 13;
  hyphens: none;
  -webkit-hyphens: none;
  font-size: var(--text-section);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.section-heading > p:not(.eyebrow) {
  grid-column: 8 / 13;
  max-width: var(--measure-small);
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: var(--text-body);
}

.services {
  background: var(--surface);
}

.service-list {
  counter-reset: service;
  border-bottom: var(--border-width) solid var(--cizgi);
}

.service-item {
  counter-increment: service;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  align-items: baseline;
  padding-block: var(--space-7);
  border-top: var(--border-width) solid var(--cizgi);
}

.service-item::before {
  content: counter(service, decimal-leading-zero);
  grid-column: 1 / 3;
  color: var(--text);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}

.service-item h3 {
  grid-column: 3 / 9;
  font-size: var(--text-service);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.service-item p {
  grid-column: 9 / 13;
  max-width: var(--measure-small);
  color: var(--muted);
  font-size: var(--text-body);
}

.approach {
  border-color: var(--cizgi);
  color: var(--text);
}

.approach {
  background: var(--surface);
  padding-block-end: var(--space-7);
}

.contact {
  /* General section padding reserved 12vw below the final form (172.8px at 1440).
     Keep this closing section content-sized, with its own compact paper margin. */
  padding-block: var(--contact-padding-start) var(--contact-padding-end);
}

.approach-inner {
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
}

.approach-copy {
  grid-column: 1 / 7;
}

.approach-copy h2 {
  hyphens: none;
  -webkit-hyphens: none;
  margin-top: var(--space-6);
  font-size: var(--text-section);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.approach-lede {
  max-width: var(--measure-small);
  margin-top: var(--space-8);
  color: var(--text);
  font-size: var(--text-lede);
}

.honest-note {
  max-width: var(--measure-small);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--cizgi);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
}

.process-list {
  grid-column: 8 / 13;
  counter-reset: process;
  border-bottom: var(--border-width) solid var(--cizgi);
}

.process-list li {
  counter-increment: process;
  display: grid;
  grid-template-columns: var(--space-10) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--cizgi);
}

.process-list li::before {
  content: counter(process, decimal-leading-zero);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}

.process-list h3 {
  font-size: var(--text-lede);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.process-list p {
  grid-column: 2;
  color: var(--muted);
}

.work {
  background: var(--surface);
  padding-block-start: var(--space-7);
  container-type: inline-size;
}

.kayit-baslik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.kayit-baslik > .section-kunye {
  margin: var(--space-0);
}

.kayit-baslik .eyebrow::before {
  content: none;
}

.kayit-baslik h2 {
  font-size: var(--text-section);
}

.tier-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  color: var(--text);
}

.tier-label::after {
  content: "";
  flex: 1;
  height: var(--border-width);
  background: var(--cizgi);
}

/* The section is the paper trim. Extend past its edge by one space-7 beat,
   including when shell-max caps the writing area on a wide screen. */
.kayit {
  --kayit-tasma: calc((100cqw - min(calc(100cqw - var(--space-gutter) * 2), var(--shell-max))) / 2 + var(--space-7));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  align-items: start;
  padding-block: var(--space-8);
  border-top: var(--border-width) solid var(--cizgi);
}

.kayit-defteri {
  border-bottom: var(--border-width) solid var(--cizgi);
}

.kayit-metin {
  grid-column: 1 / 6;
  grid-row: 1;
  min-width: var(--space-0);
}

.kayit-ters .kayit-metin {
  grid-column: 8 / 13;
}

.kayit-gorsel {
  grid-column: 6 / 13;
  grid-row: 1;
  min-width: var(--space-0);
  width: calc(100% + var(--kayit-tasma) - var(--space-7));
  margin-inline-end: calc(var(--space-7) - var(--kayit-tasma));
  padding-block-start: var(--space-7);
}

.kayit-ters .kayit-gorsel {
  grid-column: 1 / 8;
  margin-inline-start: calc(var(--space-7) - var(--kayit-tasma));
  margin-inline-end: var(--space-0);
}

.kayit-kunye,
.kayit-damga {
  color: var(--murekkep-sonus);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-versal-kucuk);
  text-transform: uppercase;
  hyphens: none;
}

.kayit-kunye {
  margin-bottom: var(--space-5);
}

.kayit-damga {
  display: block;
  width: max-content;
  margin-bottom: var(--space-3);
}

.kayit-ters .kayit-damga {
  margin-inline-start: auto;
}

.kayit-gorsel > a {
  display: block;
}

.kayit-gorsel img {
  width: var(--size-full);
  height: auto;
}

/* Clip only visual wrappers. Linked figures stay open: the link clips its
   image, never its own outline. Reserve space-2 at the trim for the 3+3 ring;
   the clip margin lets the image reach the trim without moving that ring. */
.kayit-gorsel:not(:has(a)) {
  overflow: clip;
}

.kayit-gorsel > a {
  margin-inline-end: var(--space-2);
  overflow: clip;
  overflow-clip-margin: var(--space-2);
}

.kayit-ters .kayit-gorsel > a {
  margin-inline-start: var(--space-2);
  margin-inline-end: var(--space-0);
}

/* Restore the original image width and position: still space-7 past trim. */
.kayit-gorsel > img,
.kayit-gorsel > .urun-loop {
  width: calc(100% + var(--space-7));
  max-width: none;
}

.kayit-gorsel > a > img {
  width: calc(100% + var(--space-7) + var(--space-2));
  max-width: none;
}

.kayit-ters .kayit-gorsel > img,
.kayit-ters .kayit-gorsel > .urun-loop {
  margin-inline-start: calc(var(--space-7) * -1);
}

.kayit-ters .kayit-gorsel > a > img {
  margin-inline-start: calc((var(--space-7) + var(--space-2)) * -1);
}

.kayit-gorsel > img,
.kayit-gorsel > a > img {
  border: var(--border-width) solid var(--cizgi);
}

.aura-preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio-landscape);
  align-self: start;
  max-inline-size: 100%;
  min-height: var(--space-14);
  overflow: hidden;
  border: var(--border-width) solid var(--cizgi);
}

.aura-preview {
  background: var(--surface);
}

.aura-preview::before,
.aura-preview::after {
  content: "";
  position: absolute;
  background: var(--cizgi);
}

.aura-preview::before {
  top: var(--space-0);
  bottom: var(--space-0);
  left: 50%;
  width: var(--border-width);
}

.aura-preview::after {
  top: 50%;
  right: var(--space-0);
  left: var(--space-0);
  height: var(--border-width);
}

.aura-orbit {
  position: absolute;
  width: var(--aura-orbit-width);
  aspect-ratio: var(--ratio-square);
  border: var(--border-width) solid var(--text);
  transform: rotate(var(--visual-angle-a));
}

.aura-story-card {
  position: relative;
  z-index: var(--layer-content);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--aura-card-width);
  min-height: var(--space-14);
  padding: var(--space-6);
  border: var(--border-width) solid var(--cizgi);
  background: var(--surface);
  color: var(--text);
}

.aura-mark {
  color: var(--text);
  font-size: var(--text-lede);
  line-height: var(--leading-heading);
}

.aura-story-card blockquote {
  max-width: var(--measure-small);
  font-family: var(--font-body);
  font-size: var(--text-work-quote);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
}

.aura-made {
  color: var(--muted);
}

.diag-card {
  width: var(--diag-card-width);
  padding: var(--space-7);
  border: var(--border-width) solid var(--cizgi);
  background: var(--surface);
  color: var(--text);
}

.diag-kicker,
.diag-result {
  display: block;
}

.diag-kicker {
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--cizgi);
  color: var(--muted);
}

.diag-rows {
  padding-block: var(--space-4);
}

.diag-rows li {
  display: grid;
  grid-template-columns: minmax(var(--space-10), 0.72fr) 1fr;
  gap: var(--space-4);
  align-items: center;
  min-height: var(--space-9);
  color: var(--text);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.diag-bar {
  position: relative;
  display: block;
  height: var(--space-2);
  overflow: hidden;
  background: var(--cizgi);
}

.diag-bar::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  background: var(--text);
  transform: scaleX(var(--v));
  transform-origin: left;
}

.diag-rows .is-weak .diag-bar::after {
  opacity: var(--opacity-muted);
}

.diag-result {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--cizgi);
  color: var(--muted);
}

.work-kicker {
  margin-bottom: var(--space-5);
  color: var(--text);
}

.work-copy h3 {
  font-size: var(--text-case);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.work-position {
  margin-top: var(--space-4);
  font-size: var(--text-lede);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.work-body {
  max-width: var(--measure-small);
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-body);
}

.work-highlights {
  margin-top: var(--space-7);
  border-bottom: var(--border-width) solid var(--cizgi);
}

.work-highlights li {
  position: relative;
  padding: var(--space-3) var(--space-0) var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--cizgi);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
}

.work-highlights li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-0);
  width: var(--space-2);
  height: var(--space-2);
  background: var(--text);
  transform: translateY(-50%);
}

.work-proof {
  display: flex;
  margin-top: var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.work-proof li + li {
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: var(--border-width) solid var(--cizgi);
}

.work-cta {
  margin-top: var(--space-7);
}

.tier-label-showcase {
  margin-top: var(--space-12);
}

.showcase {
  border-top: var(--border-width) solid var(--cizgi);
}

.showcase-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  padding-block: var(--space-8);
}

.showcase-head h3 {
  grid-column: 1 / 8;
  font-size: var(--text-service);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.showcase-lead {
  grid-column: 9 / 13;
  color: var(--muted);
  font-size: var(--text-body);
}

.showcase-tag {
  padding-right: var(--space-8);
  color: var(--muted);
}

.showcase-name {
  font-size: var(--text-case);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.showcase-line {
  margin-top: var(--space-4);
  color: var(--muted);
}

.showcase-cta {
  width: max-content;
  max-width: var(--size-full, 100%);
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-nav);
}

.showcase-honesty {
  max-width: var(--measure);
  padding-block: var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
}

.studio-note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  margin-top: var(--space-12);
  padding-block: var(--space-8);
  border-top: var(--border-width) solid var(--cizgi);
  border-bottom: var(--border-width) solid var(--cizgi);
}

.studio-note .eyebrow {
  grid-column: 1 / 4;
}

.studio-note-copy {
  grid-column: 5 / 13;
  font-family: var(--font-display);
  font-size: var(--text-service);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.tco {
  position: relative;
  z-index: var(--layer-content);
}

.tco figcaption {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tco-scroll {
  max-width: var(--size-full, 100%);
  overflow-x: auto;
}

.tco-table {
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  color: var(--muted);
  width: var(--size-full, 100%);
  border-collapse: collapse;
}

.tco-table th,
.tco-table td {
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}

.tco-table thead th {
  border-top: var(--border-width) solid var(--cizgi);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tco-table th:nth-child(3),
.tco-table td:nth-child(3) {
  border-left: var(--border-width) solid var(--text);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-medium);
}

.tco-example {
  max-width: var(--measure);
  margin-top: var(--space-7);
  font-size: var(--text-sm);
}

.tco-honesty {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
}

.urun-loop {
  position: relative;
  width: var(--size-full, 100%);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--border-width) solid var(--cizgi);
  background: var(--surface);
}

.urun-kare {
  position: absolute;
  inset: var(--space-0);
  width: var(--size-full, 100%);
  height: var(--size-full, 100%);
  object-fit: cover;
  object-position: top left;
  opacity: var(--space-0);
}

.urun-kare.is-etkin {
  opacity: 1;
}

.contact-panel {
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  align-items: start;
}

.contact-copy {
  grid-column: 1 / 5;
  grid-row: 2;
  min-width: var(--space-0);
}

.contact-heading {
  /* Independent headline row; the narrow copy and offset form stay below it. */
  grid-column: 1 / 10;
  min-width: var(--space-0);
}

.contact-heading h2 {
  margin-top: var(--space-6);
  font-size: var(--text-contact);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.contact-copy > p:not(.eyebrow, .section-kunye) {
  max-width: var(--measure-small);
  margin-top: var(--space-7);
  color: var(--muted);
  font-size: var(--text-body);
}

.email-link {
  max-width: var(--size-full, 100%);
  margin-top: var(--space-7);
  color: var(--text);
  font-size: var(--text-lede);
  overflow-wrap: anywhere;
}

.contact-form {
  grid-column: 6 / 13;
  grid-row: 2;
  min-width: var(--space-0);
  margin-top: var(--contact-form-offset);
}

.ownership-seal {
  width: var(--seal-width);
  margin-top: var(--space-7);
  color: var(--gold);
  fill: none;
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-seal);
  font-weight: var(--weight-medium);
  user-select: text;
  -webkit-user-select: text;
}

.ownership-seal text {
  fill: currentColor;
}

.seal-title {
  font-size: var(--text-seal-title);
}

.field {
  margin-bottom: var(--space-6);
}

.field label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: var(--size-full, 100%);
  min-height: var(--field-min-height);
  padding: var(--space-4);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--radius-none);
  background: var(--surface);
  color: var(--text);
  caret-color: var(--text);
}

.field textarea {
  min-height: var(--space-textarea);
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--text);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--text);
}

.contact-form .button-outline {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.contact-form .button-outline:hover {
  background: var(--surface);
  color: var(--text);
}

.form-status {
  margin-top: var(--space-4);
  color: var(--text);
  text-transform: none;
}

.form-status:empty {
  margin-top: var(--space-0);
}

.form-status[data-state="error"] {
  padding-left: var(--space-3);
  border-left: var(--focus-width) solid var(--status-error);
  color: var(--status-error);
}

.form-status[data-state="success"] {
  padding-left: var(--space-3);
  border-left: var(--focus-width) solid var(--text);
}

.form-handoff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-start: var(--space-4);
}

/* Author display:flex otherwise overrides the browser's hidden display rule. */
.form-handoff[hidden] {
  display: none;
}

.site-footer {
  padding-block: var(--space-8);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-grid);
  align-items: start;
}

.footer-inner > div:first-child {
  grid-column: 1 / 5;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-service);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-versal);
  text-transform: uppercase;
}

.footer-tagline {
  margin-top: var(--space-2);
  color: var(--muted);
}

.footer-meta {
  grid-column: 1 / 5;
  grid-row: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: var(--muted);
}

.footer-record {
  grid-column: 6 / 13;
  grid-row: 1 / 3;
  width: var(--size-full);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.footer-record th,
.footer-record td {
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--cizgi);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.footer-record th {
  padding-right: var(--space-4);
  color: var(--muted);
  font-weight: inherit;
}

.footer-record tr:last-child > * {
  border-bottom: var(--border-width) solid var(--cizgi);
}

.footer-language {
  text-transform: uppercase;
}

@media (max-width: 72rem) {
  .primary-nav {
    gap: var(--space-5);
  }

}

@media (max-width: 61.25rem) {
  .wordmark {
    grid-column: 1 / 5;
  }

  .primary-nav {
    display: none;
  }

  .header-actions {
    grid-column: 7 / 13;
  }

  .hero-copy {
    grid-column: 1 / 13;
    grid-row: auto;
  }

  .hero-lede {
    grid-column: 1 / 8;
  }

  .hero-signature {
    grid-column: 8 / 13;
    grid-row: auto;
  }

  .section-heading h2 {
    grid-column: 4 / 13;
  }

  .section-heading > p:not(.eyebrow) {
    grid-column: 6 / -1;
  }

  .service-item h3 {
    grid-column: 3 / 8;
  }

  .service-item p {
    grid-column: 8 / 13;
  }

  .approach-copy {
    grid-column: 1 / 7;
  }

  .process-list {
    grid-column: 7 / 13;
  }

  .showcase-head h3 {
    grid-column: 1 / 8;
  }

  .showcase-lead {
    grid-column: 8 / 13;
  }

  .studio-note-copy {
    grid-column: 4 / 13;
  }
}

@media (max-width: 768px) {

  .header-inner {
    gap: var(--space-3);
  }

  .wordmark,
  .header-actions {
    grid-column: auto;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .header-cta {
    display: none;
  }

  .hero-inner {
    padding-block: var(--space-10) var(--space-7);
  }

  .hero-copy,
  .hero-writing-inner {
    display: block;
  }

  .hero-copy .eyebrow {
    margin-bottom: var(--space-0);
  }

  .hero-lede,
  .hero-actions {
    margin-top: var(--space-7);
  }

  .hero-signature {
    max-width: var(--measure-small);
    margin-top: var(--space-10);
  }

  .section-heading,
  .service-item,
  .approach-inner,
  .showcase-head,
  .studio-note,
  .contact-panel,
  .footer-inner {
    display: block;
  }

  .section-heading {
    margin-bottom: var(--space-10);
  }

  .section-heading .eyebrow {
    padding-top: var(--space-0);
  }

  .section-heading h2,
  .approach-copy h2,
  .contact-heading h2 {
    margin-top: var(--space-6);
  }

  .section-heading h2,
  .approach-copy h2 {
    hyphens: none;
  }

  .section-heading > p:not(.eyebrow) {
    margin-top: var(--space-6);
  }

  .service-item {
    padding-block: var(--space-6);
  }

  .service-item::before {
    display: block;
    margin-bottom: var(--space-5);
  }

  .service-item p {
    margin-top: var(--space-4);
  }

  .process-list {
    margin-top: var(--space-10);
  }

  /* Stack the text above the image; keep alternating trim edges on phones. */
  .kayit .kayit-metin {
    grid-column: 1 / -1;
  }

  .kayit-gorsel {
    grid-column: 2 / 13;
    grid-row: 2;
    padding-block-start: var(--space-0);
  }

  .kayit-ters .kayit-gorsel {
    grid-column: 1 / 12;
  }

  .work-proof {
    flex-direction: column;
  }

  .work-proof li + li {
    margin-top: var(--space-2);
    margin-left: var(--space-0);
    padding-top: var(--space-2);
    padding-left: var(--space-0);
    border-top: var(--border-width) solid var(--cizgi);
    border-left: var(--space-0);
  }

  .aura-preview {
    min-height: var(--space-12);
  }

  .showcase-lead {
    margin-top: var(--space-5);
  }

  .studio-note-copy {
    margin-top: var(--space-6);
  }

  .tco-scroll {
    overflow-x: auto;
  }

  .tco-table {
    min-width: var(--measure);
    font-size: var(--text-sm);
  }

  .contact-form {
    margin-top: var(--space-10);
  }

  .footer-record {
    margin-top: var(--space-7);
  }

  .footer-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--space-7);
  }
}

@media (max-width: 30rem) {
  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .button {
    width: var(--size-full, 100%);
  }

  .aura-story-card,
  .diag-card {
    width: calc(100% - (var(--space-7) * 2));
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }
}

.site-header.is-scrolled {
  background: var(--surface);
}

section[id],
main[id] {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

.section-kunye {
  margin-block-end: var(--space-7);
  color: var(--muted);
  font-family: var(--font-mono);
  font-stretch: 75%;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-versal);
}

/* All sub-12px uppercase labels share the small-size ink reserve, including mono. */
.eyebrow,
.tier-label,
.work-kicker,
.showcase-tag,
.aura-made,
.diag-kicker,
.diag-result,
.footer-meta,
.hero-signature,
.diag-rows li,
.tco-table thead th,
.field label,
.section-kunye {
  line-height: var(--leading-versal-kucuk);
}

.site-header :is(a, button),
.site-footer :is(a, button) {
  min-inline-size: var(--control-min-height);
  min-block-size: var(--control-min-height);
  flex-shrink: 0;
}

/* T5-A: identical inline boxes on both grid layers, including punctuation. */
.senet-word { display: inline-block; }
.senet-kunye {
  --senet-duration: var(--sure-kunye);
  --senet-exit-duration: var(--sure-kunye-cikis);
  --senet-delay: calc(var(--senet-index) * var(--gecikme-kunye));
}
.senet-word {
  --senet-duration: var(--sure-manset);
  --senet-exit-duration: var(--sure-manset-cikis);
  --senet-delay: calc(var(--sure-kunye) + var(--senet-kunye-last) * var(--gecikme-kunye) + var(--senet-index) * var(--gecikme-kelime));
}
.senet-enter :is(.senet-kunye, .senet-word) {
  animation: senet-enter var(--senet-duration) var(--egri-senet) var(--senet-delay) both;
}
@keyframes senet-enter {
  from { opacity: 0; transform: translateY(var(--giris-mesafe)); }
  to { opacity: 1; transform: translateY(0); }
}

.senet-seal {
  position: relative;
  width: var(--seal-width);
  max-width: var(--size-full);
  margin-top: var(--space-7);
}
.senet-seal .ownership-seal { margin-top: var(--space-0); }
.senet-seal-strike { position: relative; }
.senet-seal .senet-ink {
  position: absolute;
  inset: var(--space-0);
  stroke: currentColor;
  stroke-width: var(--murekkep-yayilim);
  opacity: var(--murekkep-yayilim-opaklik);
  pointer-events: none;
}
.senet-seal::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  box-shadow: var(--muhur-ic-golge);
  pointer-events: none;
}
.senet-seal.is-pending { opacity: 0; }
.senet-seal-strike {
  --senet-exit-duration: var(--sure-muhur-cikis);
  --senet-curve: var(--egri-muhur);
}
.senet-seal.is-pressed .senet-seal-strike {
  animation: senet-press var(--sure-muhur) var(--senet-curve) both;
}
/* The spring moves the strike. Monotone scale segments cap its peak at exactly 1.03. */
.senet-seal.is-pressed .ownership-seal:not(.senet-ink) {
  animation: senet-stamp-scale var(--sure-muhur) var(--egri-senet) both;
}
.senet-seal .senet-ink {
  --senet-exit-duration: var(--sure-murekkep-cikis);
  --senet-curve: var(--egri-murekkep);
}
.senet-seal.is-pressed .senet-ink {
  animation: senet-ink var(--sure-murekkep) var(--senet-curve) var(--gecikme-murekkep) both;
}
.senet-seal.is-pressed::after {
  animation: senet-impression var(--sure-cokuntu) var(--egri-cokuntu) both;
}
@keyframes senet-press {
  from { opacity: 0; transform: translateY(calc(var(--giris-mesafe) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes senet-stamp-scale {
  0% { transform: scale(var(--muhur-hazirlik)); }
  20% { transform: scale(var(--muhur-anticipation)); }
  70% { transform: scale(var(--muhur-overshoot)); }
  100% { transform: scale(1); }
}
@keyframes senet-ink {
  from { opacity: 0; transform: scale(var(--murekkep-baslangic)); }
  to { opacity: var(--murekkep-yayilim-opaklik); transform: scale(1); }
}
/* Prepainted 8px inset shadow: only its opacity changes, never box-shadow. */
@keyframes senet-impression {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Exit contract for an explicit future dismissal; scrolling never erases the deed. */
.senet-exit :is(.senet-kunye, .senet-word),
.senet-seal.is-exiting :is(.senet-seal-strike, .senet-ink) {
  animation: senet-exit var(--senet-exit-duration) var(--senet-curve, var(--egri-senet)) both;
}
.senet-seal.is-exiting::after {
  animation: senet-exit var(--sure-cokuntu-cikis) var(--egri-cokuntu) both;
}
@keyframes senet-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--sure-anlik) !important;
    animation-delay: var(--sure-anlik) !important;
    transition-duration: var(--sure-anlik) !important;
    transition-delay: var(--sure-anlik) !important;
    animation-iteration-count: 1 !important;
  }
}