/* ==========================================================================
   Zed — design tokens

   The palette is the one the client approved (see htdocs/zed2): near-black
   anthracite, gold, cream. Not the navy of the service cards — the cards
   were a Canva artefact, this is the brand.

   The page runs dark, but it is NOT uniformly dark. Two sections flip to
   cream and carry dark type: the seven trades and the enquiry. Both are
   long reading blocks, and 43 lines of scope are simply easier to read off
   paper than off a screen pretending to be one. The flip is also the
   page's biggest contrast moment — dark, dark, then the lights come on.

   Gold is the one accent and it marks quantity and sequence only: item
   counts, step numbers, the figures. The moment gold starts appearing on
   ordinary links it stops meaning "this is a number that matters".
   ========================================================================== */

/* --- Instrument Serif: display only. latin-ext carries ş ğ İ ı ç ö ü. ---- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Schibsted Grotesk: everything else, including numerals.
       Not Inter. Inter and its relatives are the default UI face of every
       generated interface, and spending a free axis on the most-defaulted
       choice available makes the page read as generic no matter what the
       display face does. This one comes out of newsroom typesetting, which
       is the same editorial world the didone above belongs to, and it keeps
       real tabular figures — there is no mono face on this site. --------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- anthracite: the page, in three depths -------------------------- */
  --ground:   #1c1c1e;   /* the page */
  --ground-2: #232326;   /* a section lifted off it */
  --ground-3: #2b2b2f;   /* a card */
  --ground-4: #34343a;   /* the fill of a plate awaiting its photograph */

  /* --- cream: the two sections that flip, and the type on every dark
         ground. One cream, used both ways. ------------------------------ */
  --paper:      #ede6d6;
  --paper-2:    #e2dac7;
  --paper-3:    #d6cdb8;
  --paper-4:    #cfc8ba;
  --paper-ink:  #22201c;
  --paper-soft: #5e574c;
  --paper-mute: #6b5a32;   /* small type on cream: 5.4:1 */

  /* --- type on the dark ground ---------------------------------------- */
  --ink:      #ede6d6;
  --ink-soft: #c9c2b4;
  --ink-mute: #948c80;     /* on anthracite: 5.1:1 */

  /* --- gold: quantity and sequence, nothing else ----------------------- */
  --brass:    #b8a070;
  --brass-lt: #cfb988;
  --on-brass: #1c1c1e;     /* what sits ON gold, never cream */

  /* Gold as CONTENT — a number, a rule, a hovered link — has to survive on
     both grounds. #b8a070 on cream is about 1.9:1, unreadable, so the cream
     stratum swaps in the darker gold below. Use --accent inside content and
     --brass only where the ground is known to be dark. */
  --accent: var(--brass);

  /* --- the deep stratum (hero, the wide band, the colophon) ------------- */
  --deep:      #0e0e10;
  --deep-2:    #08080a;
  --deep-ink:  #ede6d6;
  --deep-soft: #948c80;

  /* --- the seams between layers ---------------------------------------- */
  --seam:        rgba(237, 230, 214, 0.13);
  --seam-strong: rgba(237, 230, 214, 0.30);
  --seam-deep:   rgba(237, 230, 214, 0.13);

  /* --- type ------------------------------------------------------------- */
  --display: 'Instrument Serif', 'Times New Roman', Times, serif;
  --text: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The hero headline is two short clauses; it is sized to hold
     "Tek yüklenici." on one line, not to be as large as possible. */
  --t-hero:    clamp(2.4rem, 5.35vw, 5.5rem);
  --t-display: clamp(2.4rem, 6.2vw, 6rem);
  --t-h2:      clamp(1.95rem, 4.4vw, 4.125rem);
  --t-h3:      clamp(1.3rem, 2.1vw, 2rem);
  --t-lead:    clamp(1.0625rem, 1.35vw, 1.3125rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* --- measure ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --rail:   clamp(0rem, 5vw, 5.5rem);   /* the section rail column */
  --maxw:   1720px;
  --layer:  clamp(5.5rem, 11vh, 10rem); /* vertical breathing per section */

  /* --- motion ----------------------------------------------------------- */
  --ease-deposit: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-seam:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   The cream stratum.

   Nothing inside needs its own light-mode rules: the section redefines the
   ground, ink and seam variables for its whole subtree, and every component
   below already draws itself from those. One block, and the services stack,
   the enquiry form and the scope list all invert correctly.
   -------------------------------------------------------------------------- */
[data-stratum='light'] {
  --ground:   var(--paper);
  --ground-2: var(--paper-2);
  --ground-3: var(--paper-3);
  --ground-4: var(--paper-4);
  --ink:      var(--paper-ink);
  --ink-soft: var(--paper-soft);
  --ink-mute: var(--paper-mute);
  --accent:      var(--paper-mute);
  --seam:        rgba(34, 32, 28, 0.16);
  --seam-strong: rgba(34, 32, 28, 0.34);
  background: var(--ground);
  color: var(--ink);
}

/* ==========================================================================
   reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

/**
 * `hidden` has to win.
 *
 * The rule above is an author style, and author styles beat the browser's
 * own `[hidden] { display: none }` no matter how specific that is. Without
 * this line a hidden <img> still lays out: on a demo link with no logo the
 * three brand seals became empty rings sitting next to the wordmark.
 */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Numerals in technical contexts must line up in a column. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ==========================================================================
   utilities
   ========================================================================== */
.u-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sabit başlığın altında kalmasın: JS'li yolda Lenis payı kendi hesaplıyor,
   bu satır script çalışmadığında ve "hareketi azalt" modunda devreye giriyor. */
:target, [id] { scroll-margin-top: 7rem; }

/* Content sits to the right of the stratigraphic log. */
.u-body-col { padding-left: var(--rail); }

.u-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- the deposit reveal ---------------------------------------------------
   The signature motion. Nothing on this site fades and slides up; a
   horizontal edge sweeps upward and the content is already there behind it,
   the way a surface is uncovered rather than announced.
   JS drives --deposit from 0 to 1; CSS does the rest, so a failed script
   leaves everything visible.
   -------------------------------------------------------------------------- */
.js [data-deposit] {
  clip-path: inset(calc((1 - var(--deposit, 0)) * 100%) 0 0 0);
}
.js [data-deposit] > * {
  transform: translateY(calc((1 - var(--deposit, 0)) * -0.35em));
  will-change: transform;
}

/* Line-level reveal for headlines. splitLines() wraps each line in
   .line > .line__i so the inner span can travel behind a fixed mask. */
.line {
  display: block;
  overflow: hidden;
  /* Turkish sets ç ş ğ below the baseline constantly, and a mask cut at the
     baseline shaves every one of them. The box grows downward; the negative
     margin keeps the line box itself unchanged. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.line__i { display: block; will-change: transform; }
.js .line__i { transform: translateY(120%); }
.js .is-settled .line__i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-deposit] { clip-path: none; }
  .js [data-deposit] > * { transform: none; }
  .js .line__i { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}