/* ==========================================================================
   Yaren Mermer Granit

   The page is a stratigraphic column. Sections are strata: each one has its
   own ground tone, and the boundary between two is a bedding plane — a
   hairline seam, never a gradient and never a gap. Reading down the page is
   reading down through the rock.
   ========================================================================== */

.skip {
  position: absolute; left: var(--gutter); top: 0.75rem; z-index: 400;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--ground);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   type roles
   -------------------------------------------------------------------------- */
.hero__title, .origin__title, .works__title, .breath__quote,
.mats__title, .precise__title, .ask__title, .colo__mark,
.detail__title, .proc__title, .slab__name {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 0.94;
  text-wrap: balance;
}

.btn {
  display: inline-flex; align-items: center;
  padding: 0.85rem 1.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  transition: background-color 0.4s var(--ease-deposit), color 0.4s var(--ease-deposit);
}
.btn:hover { background: var(--deep-ink); color: var(--deep); }
.btn--quiet { border-color: transparent; opacity: 0.72; }
.btn--quiet:hover { background: none; color: inherit; opacity: 1; border-color: currentColor; }
.btn--solid { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn--solid:hover { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }

/* A bedding plane that draws itself in. */
.seam {
  display: block; height: 1px; width: 100%;
  background: var(--seam-strong);
  transform-origin: left center;
  margin-block: clamp(2rem, 5vh, 4rem);
}

/* ==========================================================================
   pointer — a word, not a shape. The native cursor stays where it is.
   ========================================================================== */
.pointer { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; }
.pointer__label {
  position: absolute; translate: 14px 16px; transform-origin: 0 0;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-size: var(--t-micro); letter-spacing: 0.03em; white-space: nowrap;
  opacity: 0; scale: 0.75;
  transition: opacity 0.3s var(--ease-deposit), scale 0.35s var(--ease-deposit);
}
.pointer[data-active='true'] .pointer__label { opacity: 1; scale: 1; }
.pointer[data-off='true'] .pointer__label { opacity: 0; }

/* ==========================================================================
   the stratigraphic log
   ========================================================================== */
.log {
  position: fixed; left: calc(var(--gutter) * 0.6); top: 50%; z-index: 90;
  translate: 0 -50%;
  display: grid; gap: 0.9rem; justify-items: center;
  opacity: 0; transition: opacity 0.6s var(--ease-deposit);
  mix-blend-mode: difference; color: #fff;
}
.log[data-visible='true'] { opacity: 0.9; }
.log__track {
  display: block; width: 1px; height: clamp(6rem, 16vh, 12rem);
  background: rgba(255, 255, 255, 0.28); overflow: hidden;
}
.log__fill {
  display: block; width: 100%; height: 100%; background: #fff;
  transform: scaleY(0); transform-origin: top center;
}
.log__label, .log__depth {
  font-size: var(--t-micro); letter-spacing: 0.04em;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.log__depth { opacity: 0.55; }
@media (max-width: 1100px) { .log { display: none; } }

/* ==========================================================================
   header
   ========================================================================== */
.head {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-block: clamp(1rem, 2.2vh, 1.6rem);
  color: var(--ink);
  transition: transform 0.6s var(--ease-deposit), color 0.5s linear,
              background-color 0.5s linear;
}
.head[data-hidden='true'] { transform: translateY(-110%); }
.head[data-on-deep='true'] { color: var(--deep-ink); }
.head[data-lifted='true'] { background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(14px); }
.head[data-lifted='true'][data-on-deep='true'] { background: color-mix(in srgb, var(--deep) 70%, transparent); }
/* Over one of the two cream sections the header has to read the other way
   round. This wins over the rule above because the page is dark by default
   and light only in those two places. */
.head[data-on-light='true'] { color: var(--paper-ink); }
.head[data-lifted='true'][data-on-light='true'] { background: color-mix(in srgb, var(--paper) 84%, transparent); }

.head__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  /* Centred, not baseline: the lockup is now two lines beside a round seal,
     and there is no single baseline for the nav to sit on. */
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 3rem);
}
/* The brand lockup: the company's own seal beside a wordmark set in the
   site's display face. The seal carries provenance, the wordmark carries
   the page's voice, and the locative under it is the antecedent for the
   hero's "burada". */
.head__brand {
  display: flex; align-items: center; gap: 0.8rem;
  margin-right: auto; padding-right: 1rem;
}
.head__lockup { display: grid; gap: 0.1rem; }
.head__name {
  font-family: var(--display); font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  letter-spacing: -0.015em; line-height: 1;
}
.head__place { font-size: var(--t-micro); opacity: 0.62; letter-spacing: 0.01em; }
.head__nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); font-size: var(--t-small); }
.head__nav a { position: relative; padding-bottom: 0.2rem; }
.head__nav a::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-deposit);
}
.head__nav a:hover::after { transform: scaleX(1); }
.head__cta {
  font-size: var(--t-small); border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
.head__toggle { display: none; font-size: var(--t-small); }

@media (max-width: 860px) {
  .head__nav, .head__cta { display: none; }
  .head__toggle { display: block; }
}
@media (max-width: 460px) {
  .head__name { font-size: 1.125rem; }
  }

.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--deep); color: var(--deep-ink);
  display: grid; align-content: center; gap: 2rem;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-seam);
}
.menu[data-open='true'] { clip-path: inset(0 0 0 0); }
.menu__links { display: grid; gap: 0.4rem; }
.menu__links a { font-family: var(--display); font-size: clamp(2.25rem, 11vw, 4rem); line-height: 1.05; }
.menu__cta {
  justify-self: start; font-size: var(--t-small);
  border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
.menu__foot { display: grid; gap: 0.4rem; font-size: var(--t-small); opacity: 0.7; }
.is-menu-open { overflow: hidden; }

/* ==========================================================================
   01 · hero
   ========================================================================== */
.hero { position: relative; height: 560vh; background: var(--deep); }
.hero__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--deep); color: var(--deep-ink);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(18, 20, 28, 0.82) 0%, rgba(18, 20, 28, 0.42) 46%, transparent 74%),
    linear-gradient(to top, rgba(18, 20, 28, 0.72) 0%, transparent 52%);
}

.hero__copy {
  position: absolute; left: var(--gutter); bottom: clamp(4.5rem, 12vh, 9rem);
  max-width: min(60rem, 72vw); display: grid; gap: 1.5rem;
  padding-left: var(--rail);
}
.hero__place { font-size: var(--t-micro); opacity: 0.62; }
.hero__title { font-size: var(--t-hero); line-height: 0.9; }
.hero__title span { display: block; }
.hero__title span:last-child { opacity: 0.55; }
.hero__desc { font-size: var(--t-lead); max-width: 34ch; opacity: 0.82; line-height: 1.45; }
.hero__sub { display: grid; gap: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(4.5rem, 12vh, 9rem);
  display: grid; gap: 0.75rem; justify-items: center;
  font-size: var(--t-micro); opacity: 0.6;
}
.hero__scroll-line { display: block; width: 1px; height: 3.5rem; background: currentColor; opacity: 0.4; }

/* The three beats of the job — annotations on a room being measured, so
   they are set the way a dimension is called out on a drawing: a rule that
   measures itself out, a tick where it starts, and a marker where it ends. */
.hero__caption {
  position: absolute; max-width: min(34rem, 46vw);
  display: grid; justify-items: start; gap: 0.15rem;
}

/**
 * The room goes out of focus behind the annotation instead of having a dark
 * shape painted over it. The mask feathers the blur away at the edges, so
 * it reads as depth of field — the camera pulling focus to the note — and
 * not as a grey blob sitting on the photograph.
 */
.hero__caption-wash {
  position: absolute; inset: -3rem -4.5rem -3rem -3.5rem;
  pointer-events: none;
  backdrop-filter: blur(14px) brightness(0.5) saturate(0.85);
  -webkit-backdrop-filter: blur(14px) brightness(0.5) saturate(0.85);
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 32% 50%,
    #000 0%, #000 38%, rgba(0, 0, 0, 0.45) 64%, transparent 86%);
  mask-image: radial-gradient(ellipse 74% 66% at 32% 50%,
    #000 0%, #000 38%, rgba(0, 0, 0, 0.45) 64%, transparent 86%);
}

/**
 * The content has to be lifted above the wash explicitly.
 *
 * CSS paints non-positioned block descendants (the h2 and the p) BEFORE
 * positioned ones, so the wash — which is absolutely positioned — landed on
 * top of its own caption and blurred the headline it was meant to sit
 * behind. Being first in the markup is not enough.
 */
.hero__caption-no,
.hero__caption-rule,
.hero__caption-title,
.hero__caption-body { position: relative; z-index: 1; }

.hero__caption-no {
  font-size: var(--t-micro); letter-spacing: 0.14em;
  color: var(--deep-ink); opacity: 0.6;
}

/* The dimension rule. Drawn left to right as the beat arrives. */
.hero__caption-rule {
  display: block; position: relative;
  width: min(17rem, 100%); height: 1px;
  margin: 0.5rem 0 0.75rem;
  background: rgba(236, 235, 230, 0.45);
  transform-origin: left center;
}
.hero__caption-rule::before {
  content: ''; position: absolute; left: 0; top: -3px;
  width: 1px; height: 7px; background: rgba(236, 235, 230, 0.85);
}
.hero__caption-rule::after {
  content: ''; position: absolute; right: 0; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass-lt);
}

.hero__caption-title {
  font-family: var(--display); font-size: clamp(2.5rem, 4.2vw, 4rem);
  line-height: 0.94; letter-spacing: -0.022em;
}
.hero__caption-body {
  font-size: var(--t-lead); line-height: 1.45; max-width: 30ch;
  color: var(--deep-ink); opacity: 0.78; margin-top: 0.5rem;
  /* Keeps a single word off its own last line. */
  text-wrap: pretty;
}

.hero__caption--a { left: calc(var(--gutter) + var(--rail)); top: 23%; }
.hero__caption--c { left: calc(var(--gutter) + var(--rail)); bottom: 24%; }

/* The middle beat mirrors, so the three do not stack down one edge. */
.hero__caption--b {
  right: var(--gutter); top: 28%;
  text-align: right; justify-items: end;
}
.hero__caption--b .hero__caption-rule { transform-origin: right center; }
.hero__caption--b .hero__caption-rule::before { left: auto; right: 0; }
.hero__caption--b .hero__caption-rule::after { right: auto; left: 0; }
.hero__caption--b .hero__caption-wash {
  inset: -3rem -3.5rem -3rem -4.5rem;
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 68% 50%,
    #000 0%, #000 38%, rgba(0, 0, 0, 0.45) 64%, transparent 86%);
  mask-image: radial-gradient(ellipse 74% 66% at 68% 50%,
    #000 0%, #000 38%, rgba(0, 0, 0, 0.45) 64%, transparent 86%);
}

.hero__payoff {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  text-align: center; font-family: var(--display);
  font-size: var(--t-display); line-height: 0.98;
}
.hero__payoff span { display: block; }
.hero__payoff span:last-child { opacity: 0.5; }

/* The waterline. The page ground rises over the render; a single hairline of
   water colour rides its leading edge. */
.hero__flood { position: absolute; inset: 0; background: var(--ground); }
.hero__flood::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--brass-lt);
  box-shadow: 0 0 26px 2px color-mix(in srgb, var(--brass-lt) 55%, transparent);
}

.hero__loader {
  position: absolute; left: 50%; bottom: 2.5rem; translate: -50% 0;
  transition: opacity 0.7s var(--ease-deposit);
}
.hero__loader[data-done='true'] { opacity: 0; pointer-events: none; }
.hero__loader-track { display: block; width: 96px; height: 1px; background: var(--seam-deep); overflow: hidden; }
.hero__loader-bar {
  display: block; width: 100%; height: 100%; background: var(--deep-ink);
  transform: scaleX(0); transform-origin: left center;
}

@media (max-width: 767px) {
  /* Telefonda kare artık tam ekran; yazı fotoğrafın üstünde duruyor.
     Sahnenin alt yarısı açık taş zemin olduğu için alttan gelen perde
     masaüstündekinden daha koyu olmak zorunda. */
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(14, 14, 16, 0.92) 0%, rgba(14, 14, 16, 0.62) 34%,
                      rgba(14, 14, 16, 0.12) 62%, transparent 100%);
  }
  .hero__copy { max-width: none; right: var(--gutter); bottom: auto; top: calc(var(--stage-bottom, 60%) + 1.75rem); gap: 1rem; }
  /* The copy's hard line breaks are set for a wide measure; on a phone they
     leave a stranded three-word line. Let it wrap on its own. */
  .hero__desc br { display: none; }
  .hero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .hero__scroll { display: none; }
  .hero__caption {
    left: var(--gutter); right: var(--gutter);
    top: calc(var(--stage-bottom, 58%) + 1.5rem); bottom: auto;
    max-width: none; text-align: left; justify-items: start;
  }
  .hero__caption-title { font-size: clamp(2rem, 10vw, 2.75rem); }
  .hero__caption-body { font-size: var(--t-body); }
  .hero__caption--b .hero__caption-rule { transform-origin: left center; }
  .hero__caption--b .hero__caption-rule::before { left: 0; right: auto; }
  .hero__caption--b .hero__caption-rule::after { right: 0; left: auto; }
  .hero__caption--b .hero__caption-wash,
  .hero__caption-wash {
    inset: -2rem -2.5rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 42% 50%,
      #000 0%, #000 44%, rgba(0, 0, 0, 0.4) 70%, transparent 92%);
    mask-image: radial-gradient(ellipse 80% 70% at 42% 50%,
      #000 0%, #000 44%, rgba(0, 0, 0, 0.4) 70%, transparent 92%);
  }
  .hero__payoff { font-size: clamp(2rem, 11vw, 3.5rem); }
}

/* ==========================================================================
   02 · approach
   ========================================================================== */
.origin { position: relative; background: var(--ground); padding-block: calc(var(--layer) * 1.4) var(--layer); }
.origin__inner { display: grid; gap: clamp(3rem, 8vh, 6rem); }
.origin__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: end;
  padding-left: var(--rail);
}
.origin__title { font-size: var(--t-display); }
.origin__lead { font-size: var(--t-lead); max-width: 46ch; color: var(--ink-soft); line-height: 1.55; }

.origin__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-left: var(--rail);
  border-top: 1px solid var(--seam); padding-top: clamp(1.75rem, 4vh, 3rem);
}
.origin__col-title { font-size: var(--t-h3); font-family: var(--display); line-height: 1.1; margin-bottom: 0.6rem; }
.origin__col-body { color: var(--ink-soft); max-width: 40ch; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-left: var(--rail);
  border-top: 1px solid var(--seam); padding-top: clamp(1.75rem, 4vh, 3rem);
}
.facts__value { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; display: flex; align-items: baseline; gap: 0.3rem; }
.facts__unit { font-family: var(--text); font-style: normal; font-size: 0.9rem; opacity: 0.5; letter-spacing: 0.02em; }
.facts__label { font-size: var(--t-small); color: var(--ink-soft); margin-top: 0.5rem; max-width: 18ch; }

@media (max-width: 860px) {
  .origin__head { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   03 · the wide band
   ========================================================================== */
.band { position: relative; background: var(--deep); }
.band__image { width: 128%; height: 100%; object-fit: cover; }
.band__caption { max-width: min(42rem, 90vw); font-size: var(--t-small); color: var(--deep-soft); }

/* ==========================================================================
   05 · works — pinned horizontal
   ========================================================================== */
.works { background: var(--ground); border-top: 1px solid var(--seam); padding-top: var(--layer); overflow: hidden; }
.works__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-left: calc(var(--gutter) + var(--rail)); }
.works__title { font-size: var(--t-h2); }
.works__count { font-size: var(--t-small); color: var(--ink-soft); display: flex; gap: 0.35rem; }
.works__count i { font-style: normal; opacity: 0.4; }

.works__viewport { margin-top: clamp(2rem, 6vh, 4rem); padding-bottom: var(--layer); }
.works__track {
  display: flex; gap: clamp(1.25rem, 3vw, 3rem); align-items: flex-start;
  padding-inline: calc(var(--gutter) + var(--rail)) 40vw;
  will-change: transform;
}
.work { flex: 0 0 auto; display: grid; gap: 1rem; }
.work__open { display: block; padding: 0; }
.work__figure { overflow: hidden; background: var(--ground-4); height: min(58vh, 620px); aspect-ratio: var(--ar, 16 / 9); }
.work__figure img { width: 100%; height: 100%; object-fit: cover; }
.work:nth-child(1) .work__figure { --ar: 16 / 9; }
.work:nth-child(2) .work__figure { --ar: 4 / 5; }
.work:nth-child(3) .work__figure { --ar: 21 / 9; }
.work:nth-child(4) .work__figure { --ar: 5 / 4; }
.work__place { font-size: var(--t-micro); color: var(--ink-soft); }
.work__title { font-size: var(--t-h3); font-family: var(--display); line-height: 1.1; margin-top: 0.2rem; }

@media (max-width: 899px) {
  .works__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .works__track { padding-right: var(--gutter); }
  .work { scroll-snap-align: start; }
  .work__figure { height: 46vh; }
  .works__count { display: none; }
}

/* ==========================================================================
   06 · the pause — the one centred moment on the page
   ========================================================================== */
.breath {
  background: var(--ground-3); border-top: 1px solid var(--seam);
  padding-block: calc(var(--layer) * 1.5);
}
.breath__inner { display: grid; gap: 1.75rem; justify-items: center; text-align: center; }
.breath__quote { font-size: var(--t-display); max-width: 18ch; line-height: 1.02; }
.breath__cite { font-size: var(--t-micro); color: var(--ink-soft); letter-spacing: 0.03em; }

/* ==========================================================================
   04 · services — the seven trades

   Two readings of the same list. The index on the left is for finding:
   all seven visible at once, numbered, with the size of each trade beside
   it. The stack on the right is for reading: the trades pile up in the
   order a job is actually built, each covering the one before.
   ========================================================================== */
.mats { background: var(--ground-2); border-top: 1px solid var(--seam); padding-block: var(--layer); }
/* The stack sits on paper, so its cards are the lighter of the two creams
   and keep a hairline — otherwise seven stacked cards read as one slab. */
[data-stratum='light'] .slab__inner { box-shadow: 0 1px 0 rgba(34, 32, 28, 0.06); }
.mats__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mats__ledger { position: sticky; top: 18vh; display: grid; gap: 1.5rem; padding-left: var(--rail); }
.mats__title { font-size: var(--t-h2); }
.mats__note { font-size: var(--t-small); color: var(--ink-soft); max-width: 34ch; margin-top: -0.75rem; }

.ledger { display: grid; }
.ledger__row { border-top: 1px solid var(--seam); }
.ledger__row:last-child { border-bottom: 1px solid var(--seam); }
.ledger__name {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: baseline;
  gap: 0.75rem; padding: 0.7rem 0;
  color: var(--ink-mute);
  transition: color 0.45s var(--ease-deposit), translate 0.45s var(--ease-deposit);
}
.ledger__no { font-size: var(--t-micro); color: var(--ink-mute); transition: color 0.45s; }
.ledger__label { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2; }
/* The count is a quantity, so it is brass — the same rule as every other
   number on the page. */
.ledger__count { font-size: var(--t-micro); color: var(--ink-mute); transition: color 0.45s; }
.ledger__count::after { content: ' kalem'; }

.ledger__row[data-active='true'] .ledger__name { color: var(--ink); translate: 0.4rem 0; }
.ledger__row[data-active='true'] .ledger__no,
.ledger__row[data-active='true'] .ledger__count { color: var(--accent); }
.ledger__name:hover { color: var(--ink); }

.mats__stack { display: grid; }
.slab { position: sticky; top: calc(12vh + var(--i) * 0.9rem); padding-bottom: clamp(2rem, 6vh, 5rem); }
.slab__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  background: var(--ground); border: 1px solid var(--seam);
  overflow: hidden;
  transform-origin: center top;
  /* Both halves of the recession run off one variable, so they can never
     drift apart. 3% is enough to read as depth without warping the type. */
  transform: scale(calc(1 - var(--recede, 0) * 0.03));
  will-change: transform;
}

/* The veil is the page's own ground colour, not black: a slab that has been
   covered has receded into the page, not into shadow. */
.slab__veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ground-2);
  opacity: calc(var(--recede, 0) * 0.62);
}
.slab__figure { overflow: hidden; background: var(--ground-4); aspect-ratio: 3 / 4; }
.slab__figure img { width: 100%; height: 100%; object-fit: cover; }
.slab__copy { display: grid; align-content: start; gap: 0.7rem; padding: clamp(1.5rem, 3vw, 2.75rem); }
.slab__index { font-size: var(--t-micro); color: var(--accent); letter-spacing: 0.1em; }
.slab__name { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.slab__body { font-size: var(--t-small); color: var(--ink-soft); max-width: 42ch; }

.slab__items {
  display: grid; gap: 0.3rem;
  margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--seam);
  font-size: var(--t-small); color: var(--ink-soft);
}
.slab__items li { padding-left: 1.1rem; position: relative; }
.slab__items li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 0.4rem; height: 1px; background: var(--seam-strong);
}
.slab__more { color: var(--ink-mute); }
.slab__more::before { display: none; }

.slab__link {
  justify-self: start; margin-top: 0.9rem;
  font-size: var(--t-small); letter-spacing: 0.02em;
  padding-bottom: 0.15rem; border-bottom: 1px solid var(--seam-strong);
  transition: color 0.35s, border-color 0.35s;
}
.slab__link::after { content: ' →'; }
.slab__link:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 980px) {
  .mats__inner { grid-template-columns: 1fr; }
  .mats__ledger { position: static; }
  .ledger { display: none; }
  .slab__inner { grid-template-columns: 1fr; }
  .slab__figure { aspect-ratio: 16 / 10; }

  /* Yigilma telefonda da kaliyor: duz liste olarak akmasi bolumun butun
     fikrini, yani isin ust uste binmesini siliyordu.
     Kart tek sutuna indigi icin ekranin cogunu kapliyor; masaustu
     ofsetleriyle (14vh + 1.1rem kademe) sonuncusu ekrandan tasardi. Daha
     yukaridan yapisiyor, kademe inceliyor, kartin ici sikisiyor ki ust uste
     binen kenarlar gorunur kalsin. */
  .slab { top: calc(5vh + var(--i) * 0.45rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
  .slab__copy { padding: clamp(1.1rem, 4vw, 1.75rem); gap: 0.5rem; }
  .slab__name { font-size: clamp(1.5rem, 6vw, 2rem); }
  .slab__body { font-size: var(--t-micro); }
  .slab__items { gap: 0.15rem; padding-top: 0.7rem; margin-top: 0.4rem; }
  .slab__link { margin-top: 0.6rem; }
}

/* ==========================================================================
   07 · process
   ========================================================================== */
.proc { background: var(--ground); border-top: 1px solid var(--seam); padding-block: var(--layer); }
.proc__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.proc__marker { position: sticky; top: 26vh; display: grid; gap: 1.1rem; justify-items: start; padding-left: var(--rail); }
.proc__title { font-size: var(--t-h2); }
.proc__tally { display: flex; gap: 0.4rem; font-size: var(--t-small); color: var(--ink-soft); }
.proc__tally i { font-style: normal; opacity: 0.4; }
.proc__rule { display: block; width: 1px; height: clamp(4rem, 12vh, 8rem); background: var(--seam); }
.proc__rule i { display: block; width: 100%; height: 100%; background: var(--brass); transform: scaleY(0); transform-origin: top; }

/* --- the steps, shown rather than listed ---------------------------------
   Altı adım altı fotoğraf. Yazıyla "keşif yapıyoruz" demek ile keşfin
   fotoğrafını göstermek arasındaki fark, bu sitenin bütün iddiası.

   Bulunduğun adım tam görünür, diğerleri geri çekilir — sayfanın solundaki
   sayaçla aynı bilgiyi iki ayrı yerden veriyor.
   ------------------------------------------------------------------------ */
.proc__steps { display: grid; }
.step {
  display: grid; gap: clamp(1.1rem, 2.5vh, 1.75rem);
  padding-block: clamp(2rem, 6vh, 4rem);
  border-top: 1px solid var(--seam);
  opacity: 0.45; transition: opacity 0.6s var(--ease-deposit);
}
.step[data-active='true'] { opacity: 1; }
/* Numara, başlık ve metin kendi ızgarasında: adımın üstüne fotoğraf gelse de
   gelmese de bu blok aynı hizada kalıyor. */
.step__copy { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.3rem 1.5rem; align-items: baseline; }
.step__no { grid-row: span 2; font-size: var(--t-small); color: var(--ink-mute); padding-top: 0.35rem; }
.step__title { font-family: var(--display); font-size: var(--t-h3); line-height: 1.1; }
.step__body { color: var(--ink-soft); max-width: 46ch; }

/* Fotoğraflı sürüm: hakkımızda sayfasındaki sade liste bozulmasın diye
   bütün kurallar .step--shown altında. */
.step--shown { padding-block: clamp(2.5rem, 7vh, 5rem); }
/* Sayaç ince bir sütuna sığıyor; kalan genişliğin tamamı fotoğrafa.
   5/7 bölünmesinde solda yarım ekran boşluk kalıyordu. */
.proc--shown .proc__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }

.step--shown .step__figure {
  position: relative; margin: 0; overflow: hidden;
  /* Kaynak kareler dikey; 16:9 onları ortadan ince bir şerit hâlinde
     kesiyordu. 3:2 hem sahneyi bırakıyor hem sayfayı uzatmıyor. */
  aspect-ratio: 3 / 2; background: var(--ground-4);
}
/* Fotoğraf çerçevesinden büyük: kayarken alt ya da üst kenarda boşluk açılmasın. */
.step--shown .step__figure img {
  width: 100%; height: 112%; object-fit: cover;
  position: absolute; inset: -6% 0 auto 0;
}
.step--shown .step__no { padding-top: 0.2rem; color: var(--accent); }
.step--shown .step__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

@media (prefers-reduced-motion: reduce) {
  .step--shown .step__figure img { height: 100%; inset: 0; }
}
@media (max-width: 720px) {
  .step--shown .step__copy { grid-template-columns: 2.5rem 1fr; }
  .step--shown .step__figure { aspect-ratio: 4 / 3; }
}

@media (max-width: 980px) {
  .proc__inner { grid-template-columns: 1fr; }
  /* The marker stops tracking and simply becomes the section's heading. */
  .proc__marker { position: static; margin-bottom: 1.5rem; }
  .proc__tally, .proc__rule { display: none; }
}

/* ==========================================================================
   08 · detail — the page returns to the dark
   ========================================================================== */
.precise { background: var(--deep); color: var(--deep-ink); padding-block: calc(var(--layer) * 1.2); }
.precise__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.precise__figure { display: grid; gap: 0.85rem; }
.precise__image { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
/* Under the frame, not over it: the photograph is pale marble and white
   type laid on it disappears. */
.precise__cap { font-size: var(--t-micro); color: var(--deep-soft); }
.precise__copy { display: grid; gap: clamp(1.75rem, 4vh, 3rem); }
.precise__title { font-size: var(--t-h2); }
.precise__notes { display: grid; gap: 1.5rem; }
.precise__note { border-top: 1px solid var(--seam-deep); padding-top: 1.1rem; }
.precise__note-title { font-family: var(--display); font-size: var(--t-h3); line-height: 1.1; margin-bottom: 0.4rem; }
.precise__note-body { font-size: var(--t-small); color: var(--deep-soft); max-width: 42ch; }

@media (max-width: 980px) { .precise__inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   09 · enquiry
   ========================================================================== */
.ask { background: var(--ground); padding-block: var(--layer); }
.ask__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ask__lede { display: grid; gap: 1.5rem; padding-left: var(--rail); }
.ask__title { font-size: var(--t-h2); }
.ask__body { color: var(--ink-soft); max-width: 34ch; }
.ask__direct { display: grid; gap: 0.9rem; margin-top: 1rem; border-top: 1px solid var(--seam); padding-top: 1.75rem; }
.ask__link { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.1; width: max-content; border-bottom: 1px solid var(--seam); transition: border-color 0.4s, color 0.4s; }
.ask__link:hover { color: var(--accent); border-color: var(--accent); }
.ask__where { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.ask__area { font-size: var(--t-micro); color: var(--ink-mute); }

.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--t-micro); color: var(--ink-mute); }
.field input, .field select, .field textarea {
  background: none; border: 0; border-bottom: 1px solid var(--seam-strong);
  padding: 0.65rem 0 0.55rem; border-radius: 0;
  transition: border-color 0.45s var(--ease-deposit);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }
.field select { appearance: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form__status { font-size: var(--t-small); color: var(--ink-soft); max-width: 40ch; }
.form__status[data-state='error'] { color: #9e3b2a; }
.form__status[data-state='ok'] { color: var(--accent); }

@media (max-width: 900px) { .ask__inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   colophon
   ========================================================================== */
.colo { background: var(--deep); color: var(--deep-ink); padding-block: var(--layer) 2.5rem; }
.colo__inner { display: grid; gap: clamp(2rem, 6vh, 4rem); }
.colo__lockup { display: grid; gap: clamp(1rem, 2.5vh, 2rem); justify-items: start; }
.colo__mark { font-size: clamp(2.5rem, 9vw, 8rem); line-height: 0.9; }
.colo__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; font-size: var(--t-small); color: var(--deep-soft); line-height: 1.6; border-top: 1px solid var(--seam-deep); padding-top: 2rem; }
.colo__cols a:hover { color: var(--deep-ink); }
/* A second way into the seven sub-pages, for anyone who scrolled past the
   index without using it. */
.colo__services { display: grid; gap: 0.35rem; }
.colo__services a { width: max-content; border-bottom: 1px solid transparent; transition: border-color 0.3s, color 0.3s; }
.colo__services a:hover { color: var(--deep-ink); border-color: var(--seam-deep); }

.colo__fine { font-size: var(--t-micro); color: var(--deep-soft); opacity: 0.6; }

/* ==========================================================================
   work detail — Flip target
   ========================================================================== */
.detail { position: fixed; inset: 0; z-index: 200; visibility: hidden; opacity: 0; }
.detail[data-open='true'] { visibility: visible; }
.detail__ground { position: absolute; inset: 0; background: var(--deep); opacity: 0; }
.detail__frame {
  position: relative; height: 100%;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(3.5rem, 9vh, 7rem) var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
}
.detail__figure { height: 100%; display: grid; place-items: center; overflow: hidden; }
.detail__figure img { width: 100%; height: 100%; object-fit: contain; }
.detail__panel { color: var(--deep-ink); display: grid; gap: 1.1rem; align-content: center; }
.detail__place { font-size: var(--t-micro); color: var(--deep-soft); }
.detail__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.detail__spec { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; font-size: var(--t-small); border-top: 1px solid var(--seam-deep); padding-top: 1rem; }
.detail__spec dt { color: var(--deep-soft); }
.detail__note { font-size: var(--t-small); color: var(--deep-soft); max-width: 38ch; line-height: 1.6; }
.detail__close {
  position: absolute; top: clamp(1.25rem, 3vh, 2.25rem); right: var(--gutter); z-index: 2;
  color: var(--deep-ink); font-size: var(--t-small); border-bottom: 1px solid currentColor; padding-bottom: 0.1rem;
}
.is-detail-open { overflow: hidden; }

@media (max-width: 860px) {
  .detail__frame { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-content: center; }
  .detail__panel { gap: 0.7rem; }
  .detail__note { display: none; }
}

/* ==========================================================================
   no-JS / no-GSAP fallback: everything is simply present
   ========================================================================== */
.is-static [data-deposit] { --deposit: 1; }

/* The hero is 560vh because that length is the frame sequence's timeline.
   With no sequence running there is nothing to scrub, and leaving the height
   would make a reduced-motion visitor scroll five blank screens past a still
   image before the page continues. */
.is-static .hero, .no-js .hero { height: 100svh; }
.is-static .hero__flood, .no-js .hero__flood,
.is-static .hero__loader, .no-js .hero__loader,
.is-static .hero__caption, .no-js .hero__caption,
.is-static .hero__payoff, .no-js .hero__payoff,
.is-static .hero__scroll, .no-js .hero__scroll { display: none; }

/* ==========================================================================
   the opening plane
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 500;
  background: var(--ground); color: var(--ink);
  display: grid; align-content: center; justify-items: center; gap: 2.5rem;
  will-change: transform;
}
.is-intro { overflow: hidden; }
/* Without JS there is no one to lift the plane, so it must never appear. */
.no-js .intro { display: none; }

/* This is the moment a demo recipient sees their own name and mark, so it is
   a title card, not a spinner. */
.intro__mark { display: grid; justify-items: center; gap: 1.4rem; }
.intro__name {
  font-family: var(--display); font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: -0.025em; line-height: 0.94; text-align: center;
  text-wrap: balance; max-width: 16ch;
}
.intro__place { font-size: var(--t-small); color: var(--ink-soft); letter-spacing: 0.01em; }

.intro__meter { display: grid; justify-items: center; gap: 1rem; }
.intro__count { font-size: var(--t-small); color: var(--ink-mute); letter-spacing: 0.22em; }
.intro__track {
  display: block; width: clamp(10rem, 26vw, 20rem); height: 2px;
  background: var(--seam); overflow: hidden;
}
.intro__bar { display: block; width: 100%; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left center; }

/* ==========================================================================
   the wide band — a full-bleed moment rather than a strip
   ========================================================================== */
.band__stage { position: relative; height: 100svh; overflow: hidden; background: var(--deep); }
.band__window { position: absolute; inset: 0; overflow: hidden; }
.band__overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--gutter);
  padding-left: calc(var(--gutter) + var(--rail));
  display: grid; gap: 0.9rem;
  color: var(--deep-ink);
  /* The photograph is pale marble in direct sun; a light scrim leaves the
     type unreadable exactly where it lands. */
  background: linear-gradient(to top,
    rgba(18, 20, 28, 0.94) 0%, rgba(18, 20, 28, 0.78) 32%,
    rgba(18, 20, 28, 0.42) 66%, transparent 100%);
  padding-top: clamp(5rem, 18vh, 12rem);
}
.band__lead {
  font-family: var(--display); font-size: var(--t-h2);
  letter-spacing: -0.018em; line-height: 0.98; max-width: 16ch;
}

/* ==========================================================================
   missing photographs

   The site is being built before the photography exists. A browser's broken
   image icon cheapens a page instantly, so a figure whose file is not there
   yet becomes a calm labelled plate instead. Nothing to remove later: once
   the file lands, none of this applies.
   ========================================================================== */
[data-missing='true'] {
  position: relative;
  background: var(--ground-4);
  display: grid; place-items: center;
  min-height: 8rem;
}
[data-missing='true']::after {
  content: attr(data-missing-label);
  font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
  padding: 1rem; max-width: 22ch;
}
/* On the dark strata the plate has to lift off its own background. */
[data-stratum='deep'] [data-missing='true'] { background: var(--deep-2); }
[data-stratum='deep'] [data-missing='true']::after { color: var(--deep-soft); }

/* ==========================================================================
   the service sub-pages

   Deliberately quiet. Someone who lands here is looking for something
   specific; the page's job is to hold 43 lines of scope legibly, not to
   perform. The opening gets one campaign frame; everything below it is
   plain reading.
   ========================================================================== */
.page--sub { background: var(--ground); }

/* --- the opening -----------------------------------------------------------
   Borrowed skeleton: SUMMIT's campaign frame. One full-height photograph,
   a two-voice title (upright, then italic), and small labels that carry
   real information instead of decoration. The breadcrumb is gone; in its
   place a rail that does the two jobs someone on this page actually has —
   go back to the seven, or step to the next trade.

   Motion is two CSS entrances that run once on load. Nothing scroll-driven.
   ------------------------------------------------------------------------- */
.svc { background: var(--deep); color: var(--deep-ink); border-bottom: 1px solid var(--seam-deep); }
.svc__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  min-height: 100svh;
}
.svc__copy {
  display: grid; grid-template-rows: auto 1fr auto; gap: 2rem;
  padding: calc(6.5rem + 1rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
}

/* labels: one voice for every piece of small, factual text */
.svc__rail, .svc__kicker, .svc__facts dt {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.svc__rail {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--seam-deep);
  color: var(--deep-soft);
}
.svc__back { transition: color 0.3s; }
.svc__back:hover { color: var(--deep-ink); }
.svc__pos { display: flex; align-items: center; gap: 0.35rem; }
.svc__pos b { font-weight: 400; color: var(--brass); }
.svc__step {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--seam-deep); border-radius: 50%;
  color: var(--deep-ink); letter-spacing: 0;
  transition: border-color 0.3s, background-color 0.3s;
}
.svc__step:hover { border-color: var(--brass); }
.svc__step[hidden] { display: grid !important; visibility: hidden; }

.svc__head { align-self: center; display: grid; gap: clamp(1.1rem, 2.5vh, 1.75rem); }
.svc__kicker { color: var(--brass); }
.svc__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 6.2vw, 6.75rem); line-height: 0.92; letter-spacing: -0.022em;
}
/* Maske satır kutusu kadar yüksek; satır aralığı 0.9'un altına inince harf
   satır kutusundan taşıyor ve `overflow: hidden` taşan yeri kesiyor.
   Kutuyu iki yönde büyütüp aynı kadar negatif kenar boşluğu vererek
   dizilimi bozmadan yer açıyoruz. Türkçede bu iki kat önemli: ğ, ş, ç
   aşağı, İ yukarı taşıyor. */
.svc__mask {
  display: block; overflow: hidden;
  padding-block: 0.22em; margin-block: -0.22em;
}
.svc__mask > * { display: block; animation: svc-rise 1.05s var(--ease-deposit) both; }
.svc__mask + .svc__mask > * { animation-delay: 0.09s; }
.svc__title em { font-style: italic; color: var(--ink-soft); }
.svc__lead { font-size: var(--t-lead); color: var(--deep-soft); max-width: 42ch; line-height: 1.55; }

/* the trade's place in the job: real order, not a slogan */
.svc__facts {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 1rem clamp(1.25rem, 3vw, 2.75rem);
  margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--seam-deep);
}
.svc__facts dt { color: var(--deep-soft); margin-bottom: 0.45rem; }
.svc__facts dd { margin: 0; font-size: var(--t-small); line-height: 1.35; }
.svc__facts a { border-bottom: 1px solid var(--seam-deep); transition: border-color 0.3s; }
.svc__facts a:hover { border-color: var(--brass); }
.svc__facts .svc__count { font-size: 1.75rem; line-height: 1; color: var(--brass); }

.svc__cover { position: relative; margin: 0; overflow: hidden; background: var(--deep-2); }
.svc__cover-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: svc-settle 1.6s var(--ease-deposit) both;
}
/* A soft edge where the photograph meets the copy column. */
.svc__cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--deep) 0%, transparent 18%);
}

@keyframes svc-rise { from { transform: translateY(115%); } }
@keyframes svc-settle { from { transform: scale(1.06); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .svc__mask > *, .svc__cover-image { animation: none; }
}

@media (max-width: 900px) {
  .svc__stage { grid-template-columns: 1fr; min-height: 0; }
  .svc__copy { padding-top: calc(5.5rem + 0.5rem); }
  .svc__cover { aspect-ratio: 4 / 5; }
  .svc__cover::after { background: linear-gradient(to bottom, var(--deep) 0%, transparent 14%); }
  .svc__facts { grid-template-columns: auto 1fr; }
  .svc__facts > div:first-child { grid-row: span 2; }
}

/* --- the scope list ------------------------------------------------------ */
.svc-list { padding-block: var(--layer); border-bottom: 1px solid var(--seam); }
.svc-list__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc-list__head { position: sticky; top: 18vh; display: grid; gap: 0.85rem; }
.svc-list__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; }
.svc-list__note { font-size: var(--t-small); color: var(--ink-soft); max-width: 32ch; }

.svc-list__items { display: grid; }
.svc-list__item {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1.15rem 0; border-top: 1px solid var(--seam);
}
.svc-list__items .svc-list__item:last-child { border-bottom: 1px solid var(--seam); }
.svc-list__no { font-size: var(--t-micro); color: var(--accent); }
.svc-list__text { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; max-width: 48ch; }

/* --- the photographs ----------------------------------------------------- */
.svc-shots { padding-block: var(--layer); border-bottom: 1px solid var(--seam); }
.svc-shots__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.svc-shots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.svc-shots__item { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-4); }
.svc-shots__item img { width: 100%; height: 100%; object-fit: cover; }

/* --- the other six ------------------------------------------------------- */
.svc-more { padding-block: var(--layer); }
.svc-more__inner { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); }
.svc-more__title { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.svc-more__list { display: grid; }
.svc-more__row { border-top: 1px solid var(--seam); }
.svc-more__row:last-child { border-bottom: 1px solid var(--seam); }
.svc-more__link {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1.15rem 0; color: var(--ink-soft);
  transition: color 0.35s var(--ease-deposit), translate 0.35s var(--ease-deposit);
}
.svc-more__link:hover { color: var(--ink); translate: 0.4rem 0; }
.svc-more__no { font-size: var(--t-micro); color: var(--ink-mute); }
.svc-more__name { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.3; }
.svc-more__count { font-size: var(--t-micro); color: var(--ink-mute); }
.svc-more__count::after { content: ' kalem'; }

/* --- the ask ------------------------------------------------------------- */
.svc-ask { background: var(--deep); color: var(--deep-ink); padding-block: var(--layer); }
.svc-ask__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: end; justify-content: space-between; }
.svc-ask__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; max-width: 16ch; }
.svc-ask__body { font-size: var(--t-small); color: var(--deep-soft); max-width: 40ch; margin-top: 0.9rem; }
.svc-ask__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- nothing here -------------------------------------------------------- */
.svc-404 { padding-block: calc(var(--layer) + 5rem) var(--layer); display: grid; gap: 1.25rem; justify-items: start; }
.svc-404__title { font-family: var(--display); font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; }
.svc-404__body { color: var(--ink-soft); max-width: 44ch; }
.svc-404 .svc-more__list { width: 100%; margin-block: 1rem 1.5rem; }

@media (max-width: 900px) {
  .svc-list__inner { grid-template-columns: 1fr; }
  .svc-list__head { position: static; }
  .svc-shots__grid { grid-template-columns: 1fr 1fr; }
  .svc-list__item, .svc-more__link { grid-template-columns: 2.25rem 1fr; }
  .svc-more__count { grid-column: 2; }
}
@media (max-width: 560px) {
  .svc-shots__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   the services page

   The home page stacks the seven on top of one another; this page lays them
   out down a line. Same content, a different reading: there you see the job
   pile up, here you see it run in order. The rail on the left is the site —
   a number per station, a hairline between them.

   One motion only, the reveal the rest of the site uses. Someone who
   clicked "Hizmetler" came to find something.
   ========================================================================== */
.nav__soon { opacity: 0.38; cursor: default; }

.kol-head {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--deep-ink);
  min-height: 100svh;
  display: grid; align-content: end;
  border-bottom: 1px solid var(--seam-deep);
}
.kol-head__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* İki yönlü perde: alttan yazının oturduğu zemin, soldan başlığın arkası.
   Tek yönlü olsaydı başlık fotoğrafın aydınlık yerine denk geldiğinde
   okunmuyordu. */
.kol-head__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14, 14, 16, 0.96) 2%, rgba(14, 14, 16, 0.72) 32%,
                    rgba(14, 14, 16, 0.2) 66%, transparent 100%),
    linear-gradient(to right, rgba(14, 14, 16, 0.7) 0%, transparent 52%);
}
.kol-head__inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(1.1rem, 2.5vh, 1.75rem); justify-items: start;
  /* Üstte sabit başlık duruyor. Bu boşluk olmadan bölüm ekrandan uzun
     olduğu anda başlık, header'ın altına giriyor. */
  padding-top: calc(6.5rem + clamp(1rem, 4vh, 3rem));
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
}
/* `justify-items: start` her ögeyi kendi içeriği kadar geniş yapıyor ve bir
   paragraf için bu, sarmamış satırın tamamı demek. Dar ekranda kutu şeridin
   dışına taşıp metni kestiriyordu. */
.kol-head__inner > * { max-width: 100%; }

.kol-head__kicker {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}
.kol-head__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 8.5rem); line-height: 0.88; letter-spacing: -0.028em;
}
.kol-head__title em { font-style: italic; color: var(--ink-soft); }
.kol-head__lead { font-size: var(--t-lead); color: var(--deep-soft); max-width: 44ch; line-height: 1.55; }
/* Künye üç sütun kalmalı.
   Kapsayıcı `justify-items: start` olduğu için ızgara kendi içeriği kadar
   daralıyordu; `auto-fit` o genişlikte tek sütuna düşüp üç sayıyı alt alta
   diziyor ve bölümü ekran boyunun iki katına çıkarıyordu. */
.kol-head .facts {
  justify-self: stretch; width: 100%;
  grid-template-columns: repeat(3, auto); justify-content: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding-left: 0;
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  border-color: var(--seam-deep);
}
.kol-head .facts__value { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.kol-head .facts__label { color: var(--deep-soft); margin-top: 0.35rem; }

@media (max-width: 720px) {
  /* `1fr` bir ızgara sütununun en küçük genişliğini içeriğine göre
     belirler; "Tasarımdan teslime" gibi bir etiket sütunu ekran
     genişliğinin ötesine itiyor ve bütün bölüm yatayda taşıyordu.
     `minmax(0, 1fr)` sütunun küçülmesine izin veriyor. */
  .kol-head .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .kol-head .facts__value { font-size: 1.6rem; }
  .kol-head .facts__label { font-size: var(--t-micro); max-width: none; }
}

.kol { padding-block: clamp(2rem, 6vh, 4rem) var(--layer); }
.kol__list { display: grid; }

.kol__link {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 6rem) minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 5vh, 3.25rem);
  border-top: 1px solid var(--seam);
}
.kol__row:last-child .kol__link { border-bottom: 1px solid var(--seam); }

/* the rail: the number is the station, the line is the job continuing */
.kol__rail { align-self: stretch; display: grid; grid-template-rows: auto 1fr; gap: 0.9rem; justify-items: start; }
.kol__no { font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--accent); }
.kol__rail::after {
  content: ''; width: 1px; height: 100%; background: var(--seam);
  transition: background-color 0.4s;
}
.kol__link:hover .kol__rail::after { background: var(--accent); }

.kol__copy { display: grid; gap: 0.8rem; align-content: start; }
.kol__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -0.018em;
  transition: color 0.35s;
}
.kol__lead { font-size: var(--t-small); color: var(--ink-soft); max-width: 46ch; line-height: 1.5; }

/* the scope, compressed to chips — enough to tell what the trade covers */
.kol__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.kol__tags li {
  font-size: var(--t-micro); color: var(--ink-soft);
  border: 1px solid var(--seam); border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.kol__more { color: var(--ink-mute); }

.kol__go {
  margin-top: 0.7rem; font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color 0.35s, gap 0.35s;
}
.kol__go::after { content: '→'; letter-spacing: 0; }
.kol__link:hover .kol__go { color: var(--accent); gap: 0.85rem; }

.kol__figure {
  margin: 0; overflow: hidden; background: var(--ground-4);
  aspect-ratio: 4 / 3;
}
.kol__figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-deposit);
}
.kol__link:hover .kol__figure img { transform: scale(1.035); }

@media (max-width: 900px) {
  .kol__link {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start; gap: 1rem 1.25rem;
  }
  .kol__figure { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; margin-bottom: 0.5rem; }
  .kol__rail { grid-row: 2; }
  .kol__copy { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .kol__figure img { transition: none; }
}

/* A way out of the home page's stack and into the services page itself. */
.mats__all {
  justify-self: start; font-size: var(--t-small);
  padding-bottom: 0.15rem; border-bottom: 1px solid var(--seam-strong);
  transition: color 0.35s, border-color 0.35s;
}
.mats__all::after { content: ' →'; }
.mats__all:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   the commercial & industrial page

   The services page sorts the work by TRADE (who does it); this one sorts it
   by FACILITY (where it happens). A plant manager searches for "epoksi
   zemin", not for "zemin sistemleri", so the same 43 items are laid out a
   second way — and every item links back to the trade it came from.

   Five cards, 2 + 2 + 1. The last one runs full width so the grid closes on
   a flat edge instead of leaving a hole.
   ========================================================================== */
.tesis { padding-block: clamp(3rem, 8vh, 6rem) var(--layer); }
.tesis__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}
.tesis__card { display: grid; gap: 1.25rem; align-content: start; }
.tesis__card--wide { grid-column: 1 / -1; }

.tesis__figure { margin: 0; overflow: hidden; background: var(--ground-4); aspect-ratio: 16 / 10; }
.tesis__card--wide .tesis__figure { aspect-ratio: 21 / 9; }
.tesis__figure img { width: 100%; height: 100%; object-fit: cover; }

.tesis__copy { display: grid; gap: 0.7rem; }
.tesis__head { display: flex; align-items: baseline; gap: 0.9rem; }
.tesis__no { font-size: var(--t-micro); letter-spacing: 0.16em; color: var(--accent); }
.tesis__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.018em;
}
.tesis__lead { font-size: var(--t-small); color: var(--ink-soft); max-width: 46ch; line-height: 1.5; }

/* Her kalem kendi kolunun sayfasına gidiyor; bağlantı olduğu belli olsun
   diye alt çizgi üzerine geliyor, yoksa liste ölü metin gibi duruyor. */
.tesis__items {
  display: grid; gap: 0.1rem; margin-top: 0.35rem;
  border-top: 1px solid var(--seam);
}
.tesis__card--wide .tesis__items {
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem);
}
.tesis__item {
  display: block; padding: 0.55rem 0; font-size: var(--t-small);
  color: var(--ink-soft); border-bottom: 1px solid var(--seam);
  transition: color 0.3s, padding-left 0.3s;
}
.tesis__item:hover { color: var(--ink); padding-left: 0.4rem; }

@media (max-width: 860px) {
  .tesis__grid { grid-template-columns: 1fr; }
  .tesis__card--wide .tesis__items { grid-template-columns: 1fr; }
  .tesis__card--wide .tesis__figure { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .tesis__item { transition: none; }
}

/* ==========================================================================
   about: vision, mission, values, profile, references

   A contractor's claims are cheap; what is not cheap is tying each one to
   something that happens on site, so the four values read like site rules.
   Every block whose data has not arrived removes itself rather than showing
   an empty frame.
   ========================================================================== */
.vm { padding-block: var(--layer); }
.vm__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.vm__card { display: grid; gap: 1rem; align-content: start; border-top: 1px solid var(--seam-strong); padding-top: 1.5rem; }
.vm__label { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.vm__text {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.25; letter-spacing: -0.012em;
  max-width: 34ch;
}

.deger { padding-block: var(--layer); border-top: 1px solid var(--seam); }
.deger__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.deger__head { position: sticky; top: 18vh; display: grid; gap: 0.85rem; }
.deger__title { font-family: var(--display); font-weight: 400; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; }
.deger__note { font-size: var(--t-small); color: var(--ink-soft); max-width: 32ch; }
.deger__list { display: grid; }
.deger__item {
  display: grid; grid-template-columns: 3rem 1fr; gap: 0.35rem 1rem;
  padding-block: 1.6rem; border-top: 1px solid var(--seam);
}
.deger__item:last-child { border-bottom: 1px solid var(--seam); }
.deger__no { grid-row: span 2; font-size: var(--t-micro); color: var(--accent); padding-top: 0.4rem; }
.deger__item-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.1; }
.deger__body { font-size: var(--t-small); color: var(--ink-soft); max-width: 52ch; line-height: 1.55; }

.kunye { padding-block: var(--layer); border-top: 1px solid var(--seam); }
.kunye__inner { display: grid; gap: 1.5rem; }
.kunye__title { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.kunye__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; margin: 0; }
.kunye__row { display: grid; gap: 0.3rem; }
.kunye__row dt { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.kunye__row dd { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; }

.ref { padding-block: var(--layer); }
.ref__inner { display: grid; gap: clamp(1.75rem, 4vh, 3rem); }
.ref__head { display: grid; gap: 0.6rem; }
.ref__title { font-family: var(--display); font-weight: 400; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.018em; }
.ref__note { font-size: var(--t-small); color: var(--ink-soft); }
.ref__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.ref__item {
  background: var(--ground); display: grid; place-items: center; gap: 0.4rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; text-align: center; min-height: 8rem;
}
.ref__logo { max-width: 9rem; max-height: 3rem; object-fit: contain; }
.ref__name { font-family: var(--display); font-size: 1.25rem; line-height: 1.15; }
.ref__sector { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

.belge { padding-block: var(--layer); border-top: 1px solid var(--seam); }
.belge__inner { display: grid; gap: 1.5rem; }
.belge__title { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.belge__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.belge__item { display: grid; gap: 0.3rem; border-top: 1px solid var(--seam); padding-top: 0.9rem; }
.belge__name { font-family: var(--display); font-size: 1.35rem; }
.belge__note { font-size: var(--t-micro); color: var(--ink-mute); }

@media (max-width: 900px) {
  .vm__inner, .deger__inner { grid-template-columns: 1fr; }
  .deger__head { position: static; }
  .deger__item { grid-template-columns: 2.25rem 1fr; }
}

/* ==========================================================================
   contact

   No photograph in the opening: someone who reached this page came to write,
   not to look. The band stays short so the form starts inside the first
   screen.
   ========================================================================== */
.ilet-head {
  background: var(--deep); color: var(--deep-ink);
  padding: calc(6.5rem + clamp(2rem, 6vh, 4rem)) 0 clamp(2.5rem, 7vh, 4.5rem);
  border-bottom: 1px solid var(--seam-deep);
}
.ilet-head__inner { display: grid; gap: clamp(1rem, 2.5vh, 1.6rem); justify-items: start; }
.ilet-head__inner > * { max-width: 100%; }
.ilet-head__kicker { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.ilet-head__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.024em;
}
.ilet-head__title em { font-style: italic; color: var(--ink-soft); }
.ilet-head__lead { font-size: var(--t-lead); color: var(--deep-soft); max-width: 46ch; line-height: 1.55; }

.ilet { padding-block: var(--layer); }
.ilet__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ilet__side { display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); }
.ilet__block { display: grid; gap: 0.5rem; justify-items: start; border-top: 1px solid var(--seam); padding-top: 1.1rem; }
.ilet__label { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.ilet__phone {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1;
  border-bottom: 1px solid var(--seam); transition: color 0.35s, border-color 0.35s;
}
.ilet__phone:hover { color: var(--accent); border-color: var(--accent); }
.ilet__link { font-size: var(--t-small); border-bottom: 1px solid var(--seam); transition: border-color 0.3s; }
.ilet__link:hover { border-color: var(--accent); }
.ilet__text { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.ilet__text--mute { color: var(--ink-mute); font-size: var(--t-micro); }
.ilet__steps { display: grid; gap: 0.45rem; counter-reset: adim; }
.ilet__steps li { font-size: var(--t-small); color: var(--ink-soft); display: flex; gap: 0.6rem; align-items: baseline; }
.ilet__steps li::before {
  counter-increment: adim; content: counter(adim, decimal-leading-zero);
  font-size: var(--t-micro); color: var(--accent); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .ilet__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   the mark

   İki parça: biri duvar, biri zemin; aralarındaki boşluk birleşim yeri.
   Satır içi SVG, çünkü `currentColor` ile başlığın rengini takip etmesi
   gerekiyor — krem bölümlerin üstünden geçerken işaret de koyuya dönüyor.
   Bir <img> bunu yapamazdı, kremin üstünde kremle görünmez olurdu.
   ========================================================================== */
.mark { display: block; flex: none; height: auto; }
.mark__b { fill: var(--accent); }
/* Başlık şeridi hiçbir katmanın içinde değil, o yüzden altın tonunu kendisi
   seçiyor: krem bölümün üstünde koyu altın, kalan her yerde parlak. */
.head[data-on-light='true'] .mark__b { fill: var(--paper-mute); }

.head__mark { width: clamp(2.1rem, 2.8vw, 2.6rem); }
.colo__sign { width: 3.25rem; }
.intro__sign { width: clamp(3.75rem, 7vw, 5.25rem); }

/* ==========================================================================
   mobile corrections

   Telefonda bulunan üç gerçek hata. Hepsi aynı sebepten: masaüstü için
   yazılan bir kural, sonradan eklendiği için kendi medya sorgusunu geçersiz
   kılıyordu.
   ========================================================================== */

/* 1. Süreç bölümü telefonda iki sütun kalıyordu: `.proc--shown .proc__inner`
      kuralı dosyada 980px sorgusundan SONRA geldiği ve iki sınıf taşıdığı
      için onu eziyordu. Fotoğraflar minicik, metin dar bir şeride sıkışmıştı. */
@media (max-width: 980px) {
  .proc--shown .proc__inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* 2. Galeri kartı 58vh yüksekliğinden türeyen genişlikle ~870px çıkıyordu;
        390px'lik ekranda kartın yarısı görünüyordu. Telefonda genişliği ekran
        belirlesin, yükseklik orandan çıksın. */
  .work__figure { width: 82vw; height: auto; }
  .works__track { padding-inline: var(--gutter) 18vw; }

  /* Uzun oranlar telefonda ince şeride dönüyor; hepsi tek bir okunur orana. */
  .work:nth-child(1) .work__figure,
  .work:nth-child(2) .work__figure,
  .work:nth-child(3) .work__figure,
  .work:nth-child(4) .work__figure { --ar: 4 / 5; }
}

@media (max-width: 560px) {
  /* 3. Künye "7 kol / 43 kalem" + alt satırda "1 yüklenici" diye kırılıyordu.
        Üçü bir satırda kalsın; `minmax(0, 1fr)` sütunun daralmasına izin
        veriyor, düz `1fr` içeriğe göre genişleyip taşırıyordu. */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .facts__value { font-size: 1.6rem; }
  .facts__label { font-size: var(--t-micro); max-width: none; }
}