:root {
  color-scheme: dark;
  --signal-orange: #f0591f;
  --orange-deep: #d14613;
  --orange-line: #fbd7c5;
  --orange-soft: #fff1ea;
  --ink: #27140e;
  --header-height: 52px;

  /* Sahne jetonları: kağıt tarafı ve grafit tarafı. Küre paleti earth.js
     içindeki tek PALETTE nesnesinden gelir; burada yalnız DOM katmanı var.

     --graphite, earth.js içindeki PALETTE.graphite.globe ile aynı değerdir.
     Sahne kararınca ekranı kaplayan yüzey kürenin kendisidir; onu izleyen
     grafit bant da aynı zeminden devam etmeli. İkisi ayrışırsa sahnenin
     bittiği yerde görünür bir yüzey kesiği oluşur. Biri değişirse diğeri de
     değişir. --graphite-deep, bandın içine gömülü hücreler içindir.

     Kağıt tarafı saf beyaz değil: sarıya çalan, gri kırıklı bir kağıt.
     Grafit tarafı da saf siyah değil: kahverengiye çalan koyu bir zemin.
     İkisi de aynı sıcak eksende durur, böylece geçiş renk atlamadan olur. */
  --paper: #f2efe7;
  --paper-bright: #faf7f0;
  --graphite: #251e17;
  --graphite-deep: #1a1510;
  /* Küre kadrajı doldurduğunda sahnenin alt kenarında kalan ton. Ölçülen
     değer; grafit bandın tepesi buradan başlar. */
  --graphite-rise: #231c16;
  --graphite-line: rgba(255, 255, 255, 0.16);
  --service-voice: #68554d;
  --service-messaging: #463c38;
  --service-connectivity: #251e17;
  --service-line: rgba(255, 255, 255, 0.18);
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-ui: "Space Grotesk", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --muted: #77716b;
  --muted-invert: #a79d92;
  --line: #d8d3cc;
  --line-strong: #bbb4ac;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-variable.ttf") format("truetype");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-latin-ext.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: "Space Grotesk";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-latin.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;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

canvas {
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

.stage__evidence h2,
.clients__statement h2,
.service-stack__intro h2,
.service-card__heading h3 {
  font-variation-settings: "opsz" 72, "wdth" 94, "wght" 520;
  font-weight: 520;
}

html.is-opening .site-header,
html.is-opening [data-earth-canvas],
html.is-opening [data-stage-title-line],
html.is-opening .stage__title-support,
html.is-opening .stage__claims {
  visibility: hidden;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--paper-bright);
  transform: translateY(-110%);
  transition: transform 180ms ease;
}

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

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

.site-header {
  --nav-color: var(--paper-bright);
  --nav-divider: rgba(255, 255, 255, 0.22);
  --nav-hover: rgba(255, 255, 255, 0.1);
  --cta-bg: var(--paper-bright);
  --cta-color: var(--graphite);
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--nav-color);
  font-family: var(--font-ui);
  font-feature-settings: "ss01" 1, "ss02" 1;
  transition: color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header[data-theme="light"],
.site-header.is-menu-open {
  --nav-color: var(--ink);
  --nav-divider: rgba(39, 20, 14, 0.18);
  --nav-hover: rgba(39, 20, 14, 0.07);
  --cta-bg: var(--graphite);
  --cta-color: var(--paper-bright);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 240px auto 1fr;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0;
}

.site-header__inner::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--nav-divider);
  opacity: 1;
  transform: scaleX(1);
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease;
}

.site-header.is-menu-open .site-header__inner::after {
  opacity: 0.12;
  transform: scaleX(1);
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: 240px;
  height: 100%;
  padding-left: 20px;
  text-decoration: none;
  border-right: 1px solid var(--nav-divider);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand__art {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 38px;
}

.brand__logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.brand__logo {
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand__word {
  display: inline-flex;
  align-items: baseline;
  padding-left: 3px;
  color: var(--paper-bright);
  font-family: "Nunito", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand__word-cloud,
.brand__word-cell {
  transition: color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand__logo--light {
  filter: brightness(0) invert(1);
}

.brand__logo--color {
  opacity: 0;
}

.site-header[data-theme="light"] .brand__logo--light,
.site-header.is-menu-open .brand__logo--light {
  opacity: 0;
  transform: translateY(-3px);
}

.site-header[data-theme="light"] .brand__logo--color,
.site-header.is-menu-open .brand__logo--color {
  opacity: 1;
}

.site-header[data-theme="light"] .brand__word-cloud,
.site-header.is-menu-open .brand__word-cloud {
  color: #6d6e71;
}

.site-header[data-theme="light"] .brand__word-cell,
.site-header.is-menu-open .brand__word-cell {
  color: #f04f23;
}

.desktop-nav,
.site-header__actions {
  display: flex;
  align-items: center;
  height: 100%;
}

.desktop-nav {
  justify-content: flex-start;
}

.desktop-nav a,
.header-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  text-decoration: none;
  border-right: 1px solid var(--nav-divider);
  transition:
    color 220ms ease,
    background-color 220ms ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.header-link:hover,
.header-link:focus-visible {
  background: var(--nav-hover);
}

.site-header__actions {
  grid-column: 3;
  justify-self: end;
}

.header-link {
  border-left: 1px solid var(--nav-divider);
  border-right: 0;
}

.desktop-nav,
.site-header__actions,
.menu-toggle {
  transition:
    opacity 240ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 148px;
  height: 100%;
  padding: 0 20px;
  color: var(--cta-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  background: var(--cta-bg);
  border: 0;
  border-left: 1px solid var(--nav-divider);
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--nav-color);
  background: transparent;
}

.header-cta svg {
  width: 16px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 1.5;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

/* ---------------------------------------------------------------------------
   Sahne: üç perdelik, kaydırmaya bağlı açılış.
   Yükseklik kaydırma bütçesidir; içerideki yapışkan katman sahnenin kendisi.
   --------------------------------------------------------------------------- */

.stage {
  position: relative;
  height: 512svh;
  background: var(--paper);
}

.stage__inner {
  /* Tek özellik: GSAP bunu 0'dan 1'e sürer, kağıttan grafite geçiş budur. */
  --stage-dark: 0;
  isolation: isolate;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ui);
}

.stage__inner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: var(--graphite);
  opacity: var(--stage-dark);
}

/* Film grenini taklit eden ince gürültü katmanı. SVG feTurbulence ile
   üretiliyor: ek bir görsel dosyası gerekmiyor, her çözünürlükte keskin.
   Aynı doku sahneyi izleyen grafit bantta da sürer: zemin rengi eşit olsa
   bile grensiz bir blok, grenli sahnenin yanında düz bir yama gibi durur. */
.stage__inner::after,
.clients::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 220px 220px;
}

.stage__globe {
  position: absolute;
  z-index: 1;
  inset: var(--header-height) 0 0;
  will-change: transform;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  outline: 0;
  /* Yatay sürükleme küreyi döndürür, dikey hareket sayfayı kaydırır. */
  touch-action: pan-y;
}

.stage__canvas:active {
  cursor: grabbing;
}

.stage__canvas:focus-visible::after {
  position: absolute;
  inset: 34px;
  content: "";
  pointer-events: none;
  border: 1px solid var(--signal-orange);
}

.stage__canvas canvas {
  position: relative;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* İstasyon ve sinyal katmanı. Küre gövdesi tuvalde kalır; istasyon işaretleri
   ve gezen sinyal burada vektör olarak durur, böylece Türkiye yakınlaşmasında
   ne bulanıklaşır ne de kalınlaşır. Öğeler bir kez kurulur, kare başına
   yalnızca öznitelikleri değişir. */
.earth-signal-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.earth-signal-route,
.earth-signal-static {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Çizgi kalınlıkları ekran uzayında sabit: sayfa yakınlaştırması da küre
   yakınlaştırması da görünen kalınlığı değiştirmez. */
.earth-station circle {
  vector-effect: non-scaling-stroke;
}

.stage__loading {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: opacity 400ms ease;
}

.stage__loading span {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--signal-orange);
  animation: stage-pulse 1.1s ease-in-out infinite;
}

.stage__loading.is-hidden {
  pointer-events: none;
  opacity: 0;
}

/* Opening title band ---------------------------------------------------- */

.stage__title {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-height) + clamp(28px, 7vh, 82px));
  right: clamp(26px, 5vw, 76px);
  left: clamp(26px, 5vw, 76px);
  pointer-events: none;
}

/* Navbar'dan destek metnine kadarki açılış bandı kendi zeminini taşır:
   sayfanın kağıdından bir ton açık, ayrı bir düzlem gibi. Altında sert bir
   kenar yerine yumuşak bir geçişle biter, çünkü küre perde ilerledikçe
   yukarı doğru bu alana giriyor. Bant .stage__title'ın kendi katmanında
   durur, böylece başlıkla aynı anda çıkar. */
.stage__title::before {
  position: absolute;
  z-index: -1;
  top: calc(-1 * (var(--header-height) + clamp(28px, 7vh, 82px)));
  right: calc(-1 * clamp(26px, 5vw, 76px));
  bottom: -34px;
  left: calc(-1 * clamp(26px, 5vw, 76px));
  content: "";
  background: linear-gradient(
    180deg,
    var(--paper-bright) 0,
    var(--paper-bright) calc(100% - 72px),
    rgba(250, 247, 240, 0) 100%
  );
}

.stage__title h1 {
  margin: 0;
  font-size: clamp(62px, 9.5vw, 148px);
  font-variation-settings: "opsz" 96, "wdth" 90, "wght" 650;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 0.82;
  white-space: nowrap;
}

.stage__headline-line {
  display: inline-block;
  will-change: opacity, transform;
}

.stage__headline-line + .stage__headline-line {
  margin-left: 0.08em;
}

.stage__title-support {
  max-width: 38ch;
  margin: clamp(34px, 4.4vh, 48px) auto 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

/* Claim beats ----------------------------------------------------------- */

/* The claims are one column beside the globe. Every beat arrives under the
   previous one and the whole list is lifted, so the group stays optically
   centred while it grows from one claim to three. The layer sits above the
   globe and below the grain, and never takes pointer events, so the globe
   underneath stays draggable. */
.stage__claims {
  position: absolute;
  z-index: 4;
  inset: var(--header-height) clamp(26px, 5vw, 76px) 0;
  pointer-events: none;
  will-change: transform;
}

.stage__claim-list {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(40vw, 470px);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

/* A fixed step keeps the lift arithmetic stable: the offset the timeline
   applies must not change when a support sentence happens to wrap. */
.stage__claim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(104px, 14vh, 152px);
}

.stage__claim + .stage__claim {
  margin-top: clamp(18px, 2.6vh, 34px);
}

.stage__claim-word {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 52px);
  font-variation-settings: "opsz" 84, "wdth" 92, "wght" 620;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 0.94;
  text-transform: uppercase;
  will-change: opacity, transform, clip-path;
}

.stage__claim-support {
  margin: clamp(10px, 1.2vh, 16px) 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.45;
}

.stage__claim-rail {
  position: absolute;
  right: 0;
  bottom: clamp(24px, 4.2vh, 52px);
  left: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  /* No room for a side column: the list runs full width in the lower half
     while the globe sits above it. */
  .stage__claim-list {
    top: 54%;
    right: 0;
    left: 0;
    width: auto;
  }

  .stage__claim {
    min-height: clamp(88px, 12vh, 120px);
  }

  .stage__claim-word {
    font-size: clamp(24px, 7.4vw, 36px);
  }

  .stage__claim-support {
    font-size: 14px;
  }

  .stage__claim-rail {
    letter-spacing: 0.1em;
    line-height: 1.6;
  }
}

/* Without motion no claim timeline exists, so all three claims are shown at
   once as a static stacked list over a paper wash. No claim text is dropped. */
/* The stage is not pinned without motion and no claim timeline exists, so the
   claims join the same static flow the rest of the stage uses and all three
   read at once, between the globe and the backbone evidence. */
@media (prefers-reduced-motion: reduce) {
  .stage__claims {
    position: static;
    padding: 56px clamp(22px, 5vw, 76px) 0;
  }

  .stage__claim-list {
    position: static;
    display: grid;
    gap: clamp(18px, 2.6vh, 30px);
    width: auto;
  }

  .stage__claim {
    min-height: 0;
    margin-top: 0;
  }

  .stage__claim-word {
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.05;
  }

  .stage__claim-support {
    max-width: 62ch;
    margin-top: 8px;
  }

  .stage__claim-rail {
    position: static;
    margin-top: clamp(20px, 3vh, 32px);
    text-align: left;
  }
}

/* Perde 3 -------------------------------------------------------------- */

.stage__evidence {
  position: absolute;
  z-index: 4;
  bottom: clamp(36px, 6vh, 72px);
  left: clamp(26px, 5vw, 76px);
  width: min(46vw, 520px);
  color: var(--paper);
}

/* Airbrushed, not a panel. Two things kept it from reading that way: the box
   ended just past the block, so the ellipse was clipped into a hard vertical
   edge on the left, and a two-stop radial falls off linearly, which the eye
   reads as a rim. The box now reaches far enough out that the gradient dies
   before the edge, and three offset layers with staged stops approximate a
   sprayed falloff. */
.stage__evidence::before {
  position: absolute;
  z-index: -1;
  inset: -150px -230px -190px -340px;
  content: "";
  background:
    radial-gradient(
      ellipse 44% 40% at 46% 55%,
      rgba(23, 20, 15, 0.92) 0%,
      rgba(23, 20, 15, 0.74) 32%,
      rgba(23, 20, 15, 0.4) 55%,
      rgba(23, 20, 15, 0.15) 73%,
      rgba(23, 20, 15, 0) 90%
    ),
    radial-gradient(
      ellipse 62% 56% at 40% 60%,
      rgba(23, 20, 15, 0.48) 0%,
      rgba(23, 20, 15, 0.22) 44%,
      rgba(23, 20, 15, 0.06) 68%,
      rgba(23, 20, 15, 0) 86%
    ),
    radial-gradient(
      ellipse 34% 66% at 34% 48%,
      rgba(23, 20, 15, 0.4) 0%,
      rgba(23, 20, 15, 0.12) 52%,
      rgba(23, 20, 15, 0) 82%
    );
}

.stage__evidence h2 {
  margin: 0 0 26px;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -0.05em;
  line-height: 1;
}

.stage__evidence ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage__evidence li {
  padding-top: 12px;
  color: var(--muted-invert);
  border-top: 1px solid var(--graphite-line);
  font-size: 14px;
  line-height: 1.45;
}

.stage__evidence strong {
  display: block;
  margin-bottom: 3px;
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Küre sarmalayıcısının içinde durur: piksel koordinatları canvas ile
   birebir aynı olsun diye. */
.stage__focus {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.stage__focus > p {
  position: absolute;
  top: 28px;
  right: clamp(26px, 5vw, 76px);
  margin: 0;
  color: #ff8b58;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.stage__city {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--muted-invert);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.stage__city span {
  display: flex;
  flex-direction: column;
}

.stage__city strong {
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

@keyframes stage-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Perde 3'ün grafiti referans bandına taşınır, sayfa aşağıda kağıda döner. */
/* Bandın tepesi sahnenin bittiği tonu devralır ve aşağı doğru grafit zemine
   oturur. Küre yüzeyi kendi içinde gölge ve sıcak ışıkla değiştiği için birebir
   eşleşme mümkün değil; amaç kesik bir kenar yerine sürekli bir yüzey. */
.clients {
  isolation: isolate;
  position: relative;
  color: var(--paper);
  background-color: var(--graphite);
  background-image: linear-gradient(
    180deg,
    var(--graphite-rise) 0,
    var(--graphite) 58svh
  );
  background-repeat: no-repeat;
}

.clients__statement {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 76svh;
  padding: calc(var(--header-height) + 48px) 32px 64px;
  overflow: hidden;
  text-align: center;
}

.clients__statement::before {
  position: absolute;
  top: 0;
  right: 32px;
  left: 32px;
  height: 1px;
  content: "";
  background: var(--graphite-line);
}

.clients__eyebrow {
  margin: 0 0 24px;
  color: #ff8b58;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.clients__statement h2 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(48px, 6.4vw, 94px);
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.clients__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--graphite-line);
  border-bottom: 1px solid var(--graphite-line);
}

.clients__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.client-cell {
  display: flex;
  flex: 0 0 clamp(224px, 18.75vw, 300px);
  align-items: center;
  justify-content: center;
  height: 270px;
  margin: 0;
  padding: 48px;
  background: var(--graphite-deep);
  border-right: 1px solid var(--graphite-line);
}

/* Logolar açık zeminli dosyalar; grafit bant üzerinde ters kontrastla
   okunur hale gelir. */
.client-cell img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76px;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: 0.82;
  transition:
    opacity 280ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-cell:hover img {
  opacity: 1;
  transform: scale(1.04);
}

/* Product service stack ------------------------------------------------- */

.service-stack {
  --service-card-expanded: 33.25rem;
  --service-card-collapsed: 10rem;
  --service-list-lift: 6.25rem;
  position: relative;
  color: var(--paper-bright);
  background: var(--graphite);
}

.service-stack__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 48px;
  align-items: end;
  padding: clamp(120px, 14vw, 204px) clamp(26px, 5vw, 76px)
    clamp(88px, 10vw, 148px);
  border-top: 1px solid var(--graphite-line);
}

.service-stack__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -12px;
  color: #ff8b58;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.service-stack__intro h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(54px, 7vw, 108px);
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.service-stack__intro > p:last-child {
  max-width: 34ch;
  margin: 0 0 8px;
  color: var(--muted-invert);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.5;
}

.service-stack__track {
  position: relative;
  background: var(--service-connectivity);
}

.service-stack__list {
  position: sticky;
  top: 0;
  will-change: transform;
}

.service-card {
  --service-surface: var(--service-voice);
  position: relative;
  height: var(--service-card-expanded);
  overflow: hidden;
  color: var(--paper-bright);
  background: var(--service-surface);
  border-top: 1px solid var(--service-line);
  will-change: height;
}

.service-card--messaging {
  --service-surface: var(--service-messaging);
}

.service-card--connectivity {
  --service-surface: var(--service-connectivity);
}

.service-card__heading {
  display: grid;
  grid-template-columns: 112px minmax(240px, 1fr) minmax(220px, 0.72fr);
  gap: 28px;
  align-items: center;
  height: var(--service-card-collapsed);
  padding: calc(var(--header-height) + 18px) clamp(26px, 5vw, 76px) 22px;
}

.service-card__index,
.service-card__heading > p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.service-card__index {
  color: #ffad88;
}

.service-card__heading h3 {
  margin: 0;
  font-size: clamp(58px, 6vw, 86px);
  letter-spacing: -0.055em;
  line-height: 0.78;
}

.service-card__heading > p {
  max-width: 22ch;
  margin: 0;
  justify-self: end;
  color: rgba(250, 247, 240, 0.72);
  text-align: right;
}

.service-card__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  height: calc(var(--service-card-expanded) - var(--service-card-collapsed));
  padding: 30px clamp(26px, 5vw, 76px) 38px;
  border-top: 1px solid var(--service-line);
  will-change: opacity, transform;
}

.service-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
    var(--service-surface);
  border: 1px solid var(--service-line);
}

.service-card__visual svg {
  width: min(100%, 680px);
  height: 100%;
  max-height: 278px;
}

.service-diagram__grid path {
  fill: none;
  stroke: rgba(250, 247, 240, 0.1);
  stroke-width: 1;
}

.service-diagram__routes path,
.service-diagram__lanes path {
  fill: none;
  stroke: #ff9d70;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.service-diagram__lanes path {
  stroke-dasharray: 4 8;
}

.service-diagram__nodes circle {
  fill: var(--service-surface);
  stroke: #ffb18d;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.service-diagram__nodes circle:nth-child(3),
.service-card--connectivity .service-diagram__nodes circle:nth-child(4) {
  fill: var(--signal-orange);
  stroke: var(--paper-bright);
}

.service-diagram__signal circle,
.service-diagram__packets rect {
  fill: var(--signal-orange);
  stroke: #ffc0a3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.service-card__copy {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.service-card__copy > p {
  max-width: 31ch;
  margin: 0;
  font-size: clamp(21px, 2vw, 29px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.service-card__copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 24px 0;
  list-style: none;
}

.service-card__copy li {
  padding: 8px 11px 7px;
  color: rgba(250, 247, 240, 0.72);
  border: 1px solid var(--service-line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.service-card__copy a {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  align-self: flex-start;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(250, 247, 240, 0.48);
  font-size: 13px;
  font-weight: 600;
}

.service-card__copy a svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

@media (max-width: 820px) {
  .service-stack__intro {
    display: block;
    padding: 96px 22px 70px;
  }

  .service-stack__eyebrow {
    margin-bottom: 28px;
  }

  .service-stack__intro h2 {
    font-size: clamp(48px, 14vw, 64px);
  }

  .service-stack__intro > p:last-child {
    margin-top: 34px;
  }

  .service-stack__track {
    height: auto !important;
    margin-bottom: 0 !important;
  }

  .service-stack__list {
    position: static;
    transform: none !important;
  }

  .service-card {
    height: auto !important;
    overflow: visible !important;
  }

  .service-card__heading {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px 14px;
    height: auto;
    padding: 34px 22px 28px;
  }

  .service-card__heading h3 {
    font-size: clamp(54px, 17vw, 72px);
  }

  .service-card__heading > p {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .service-card__content {
    display: flex;
    height: auto;
    padding: 24px 22px 52px;
    flex-direction: column;
    opacity: 1 !important;
    transform: none !important;
  }

  .service-card__visual {
    width: 100%;
    height: 230px;
  }

  .service-card__copy {
    width: 100%;
    height: auto;
  }

  .service-card__copy > p {
    margin-top: 8px;
    font-size: 22px;
  }

  .service-card__copy ul {
    margin: 28px 0 36px;
  }
}

@media (max-width: 1100px) {
  .site-header__inner {
    grid-template-columns: 220px auto 1fr;
    padding: 0;
  }

  .site-header__inner::after {
    right: 0;
    left: 0;
  }

  .brand {
    width: 220px;
    padding-left: 16px;
  }

  .brand__art {
    width: 52px;
  }

  .brand__word {
    padding-left: 2px;
    font-size: 26px;
  }

  .desktop-nav a,
  .header-link {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 14px;
  }

  .header-cta {
    min-width: 128px;
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 56px;
  }

  .site-header__inner {
    display: flex;
    justify-content: space-between;
    padding: 0;
  }

  .site-header__inner::after {
    right: 0;
    left: 0;
  }

  .brand {
    width: 210px;
    height: 100%;
    padding-left: 16px;
  }

  .brand__art {
    width: 54px;
    height: 38px;
  }

  .brand__word {
    padding-left: 2px;
    font-size: 26px;
  }

  .desktop-nav,
  .site-header__actions {
    display: none;
  }

  .menu-toggle {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    color: currentColor;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--nav-divider);
  }

  .menu-toggle span {
    position: absolute;
    right: 4px;
    left: 4px;
    height: 1px;
    background: currentColor;
    transition:
      top 240ms ease,
      transform 240ms ease;
  }

  .menu-toggle span:first-child {
    top: 23px;
  }

  .menu-toggle span:last-child {
    top: 33px;
  }

  .site-header.is-menu-open .menu-toggle span:first-child {
    top: 28px;
    transform: rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:last-child {
    top: 28px;
    transform: rotate(-45deg);
  }

  .site-header.is-menu-open {
    min-height: 100dvh;
    color: var(--ink);
    background: var(--orange-soft);
  }

  .mobile-menu {
    height: calc(100dvh - var(--header-height));
    padding: 24px 18px 28px;
    background: var(--orange-soft);
  }

  .mobile-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-menu nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu nav a {
    display: flex;
    align-items: baseline;
    padding: 15px 0;
    font-size: clamp(32px, 10vw, 52px);
    letter-spacing: -0.045em;
    line-height: 1;
    text-decoration: none;
    border-bottom: 1px solid var(--orange-line);
  }

  .mobile-menu nav span {
    width: 36px;
    color: var(--orange-deep);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .mobile-menu__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-menu__actions a {
    padding: 16px;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--orange-line);
  }

  .mobile-menu__actions .mobile-menu__cta {
    color: var(--paper-bright);
    background: var(--signal-orange);
    border-color: var(--signal-orange);
  }

  .clients__statement {
    min-height: 68svh;
    padding-top: calc(var(--header-height) + 42px);
    padding-bottom: 56px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .clients__statement::before {
    right: 18px;
    left: 18px;
  }

  .clients__statement h2 {
    font-size: clamp(42px, 12vw, 64px);
  }

  .client-cell {
    flex-basis: 64vw;
    height: 210px;
    padding: 38px;
  }
}

/* Dar ekranda küre sol kenardan kırpılmaz: üst yarıda küçülerek ortada
   kalır, kartlar alt yarıdan tam genişlikte geçer. */
@media (max-width: 760px) {
  .stage {
    height: 390svh;
  }

  .stage__title {
    top: calc(var(--header-height) + 28px);
    right: 22px;
    left: 22px;
  }

  .stage__title::before {
    top: calc(-1 * (var(--header-height) + 28px));
    right: -22px;
    bottom: -26px;
    left: -22px;
  }

  .stage__title h1 {
    font-size: clamp(48px, 13.5vw, 58px);
    line-height: 0.84;
    white-space: normal;
  }

  .stage__headline-line {
    display: block;
    white-space: nowrap;
  }

  .stage__headline-line + .stage__headline-line {
    margin-left: 0;
  }

  .stage__title-support {
    max-width: 31ch;
    margin-top: 22px;
    font-size: 15px;
  }

  .stage__evidence {
    right: 22px;
    bottom: 26px;
    left: 22px;
    width: auto;
  }

.stage__evidence h2 {
    margin-bottom: 18px;
    font-size: clamp(26px, 8vw, 34px);
  }

  .stage__evidence li {
    font-size: 13px;
  }

  .stage__focus > p {
    top: 16px;
    right: 22px;
    font-size: 7px;
  }

  /* Dar ekranda üçüncü perde tam ekran Türkiye + kanıt bloğu taşıyor;
     şehir etiketleri metnin üstüne düşüyordu, bu boyutta çıkarıldı. */
  .stage__city {
    display: none;
  }

  .stage__canvas:focus-visible::after {
    inset: 16px;
  }
}

/* Hareket azaltıldığında sahne sabitlenmez: küre tek ekranlık bir blok,
   üç kart ve omurga kanıtı onun altında normal akışta okunur. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .stage,
  .stage__inner {
    height: auto;
  }

  .stage__inner {
    position: static;
    padding-bottom: 72px;
  }

  /* Sahne sabitlenmediğinde bant normal akışta durur; anıştırdığı düzlem
     aynı, yalnızca konumlandırması değişir. */
  .stage__title {
    position: relative;
    max-width: none;
    padding: calc(var(--header-height) + 56px) clamp(22px, 5vw, 76px) 0;
  }

  .stage__title::before {
    inset: 0 0 -30px;
  }

  .stage__globe {
    position: relative;
    inset: auto;
    height: 78svh;
    margin-top: 24px;
  }

  .stage__focus {
    display: none;
  }

  .stage__evidence {
    position: static;
    width: auto;
    padding: 56px clamp(22px, 5vw, 76px) 0;
    color: var(--ink);
  }

  /* Kanıt bloğu artık kürenin üstünde durmuyor; okunurluk perdesi gereksiz
     ve statik akışta yatay taşma yaratıyordu. */
  .stage__evidence::before {
    display: none;
  }

  .stage__evidence li {
    color: var(--muted);
    border-top-color: var(--line);
  }

  .stage__evidence strong {
    color: var(--ink);
  }

  .stage__eyebrow--invert {
    color: var(--orange-deep);
  }

  .clients__marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .client-cell {
    scroll-snap-align: start;
  }

  .service-stack__track {
    height: auto !important;
    margin-bottom: 0 !important;
  }

  .service-stack__list {
    position: static;
    transform: none !important;
  }

  .service-card {
    height: auto !important;
    overflow: visible !important;
  }

  .service-card__content {
    height: auto;
    min-height: calc(
      var(--service-card-expanded) - var(--service-card-collapsed)
    );
    opacity: 1 !important;
    transform: none !important;
  }
}