/* ============================================================================
   ÖTD Automation — sayfa katmanı.
   scrollcraft.css motorun kendisi, burası markanın kendisi. Motor dosyasına
   dokunulmadı; buradaki her şey token override'ı ya da bu sayfaya ait markup.
   ========================================================================== */

:root {
  /* Altı rol, tek aksan. OTD-BRIEF.md §3. */
  --sc-canvas:     #0B0B0C;
  --sc-surface:    #131315;
  --sc-ink:        #F2F1EE;
  --sc-ink-soft:   #8A8A8F;
  --sc-accent:     #C9A227;
  --sc-accent-ink: #0B0B0C;

  --otd-edge:      #232326;
  --sc-hairline:        #1D1D20;
  --sc-hairline-strong: #2C2C31;

  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Outfit", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --otd-font-serif:  "Source Serif 4", Georgia, serif;

  /* Yuvarlak köşe: maksimum 4px, tercihen 0. Tek ölçek, sayfa boyunca sabit. */
  --sc-r-sm: 3px; --sc-r-md: 3px; --sc-r-lg: 3px; --sc-r-pill: 3px;

  --otd-bar-h: 74px;
  --otd-strip-h: 46px;

  --sc-shadow-color: 240 8% 2%;
}

/* Koyu zeminde açık metin üç eksende telafi ister: bir tık daha satır
   yüksekliği, bir tık daha harf aralığı, bir kademe daha ağırlık. */
body {
  font-weight: 300;
  letter-spacing: 0.004em;
  padding-bottom: var(--otd-strip-h);
}

/* Film grain: motorun SVG turbulence'ı yerine A3 dokusu, geldiğinde kendini
   otomatik değiştirir. Dosya yokken zemin yine de bantlanmasın diye motorun
   kendi deseni fallback olarak duruyor. */
.sc-grain { opacity: 0.06; mix-blend-mode: overlay; }
.sc-grain::before {
  inset: 0;
  background-image: url("assets/images/a3-grain.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

.otd-serif {
  font-family: var(--otd-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}

/* Etiketler: küçük punto, geniş harf aralığı, versal. Mevcut sitede çalışan
   şey, korunuyor. */
.otd-label {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.otd-note {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
}

.sc-display { font-weight: 300; }
.sc-display strong { font-weight: 500; }
.sc-lede { font-weight: 300; color: var(--sc-ink); }
.sc-body { line-height: 1.66; }

/* ------------------------------------------------------------ enstrüman -- */
/* Gramerin kromu: logo, geçtikçe dolan bölüm indeksi, tek CTA. */

.bar {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  height: var(--otd-bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: height 240ms var(--sc-ease-out),
              background-color 240ms var(--sc-ease-out),
              border-color 240ms var(--sc-ease-out);
}
.bar.is-stuck {
  height: 58px;
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--otd-edge);
}
.bar__mark {
  display: flex; align-items: center;
  text-decoration: none; color: var(--sc-ink);
}
.bar__logo {
  display: block;
  width: 115px; height: 38px;
  /* Optik hizalama, matematiksel değil. Ölçüm: gezinti yazısının optik
     merkezi bar ortasının 1.14px üstünde, CTA'nınki 0.55px üstünde.
     Lockup'ın alfa ağırlıklı merkezi de kendi kutusunun 0.91px üstünde
     kaldığı için, kutu geometrik olarak ortalandığında logonun optik
     merkezi kendiliğinden nav yazısıyla aynı hatta düşüyor. Bu yüzden
     düzeltme kaydırması YOK: eklenen her piksel hizayı bozuyor. */
}
.bar__index { display: flex; gap: var(--sc-5); margin-left: auto; }
.bar__link {
  position: relative;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  padding-block: 0.6rem;
  transition: color 160ms var(--sc-ease-out);
}
.bar__link::after {
  content: ""; position: absolute; left: 0; bottom: 0.15rem;
  width: 100%; height: 1px; background: var(--sc-ink-soft);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 320ms var(--sc-ease-out);
}
.bar__link.is-passed { color: var(--sc-ink); }
.bar__link.is-passed::after { transform: scaleX(1); }
.bar__link:hover { color: var(--sc-ink); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--sc-accent);
  border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 140ms var(--sc-ease-out),
              transform 120ms var(--sc-ease-out);
}
.cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, #FFFFFF); }
.cta:active { transform: translateY(1px); }
.cta--ghost {
  background: transparent; color: var(--sc-ink);
  border-color: var(--otd-edge);
}
.cta--ghost:hover { background: var(--sc-surface); border-color: var(--sc-hairline-strong); }
.cta[disabled] { opacity: 0.55; pointer-events: none; }

/* ----------------------------------------------------------------- hero -- */
/* Üç düzlem: olay akışı yatağı, başlık, öndeki talep kartı. Fotoğraf yok, o
   yüzden derinlik hareket farkından gelmek zorunda. */

.hero { display: grid; place-items: center; }
.hero__bed {
  position: absolute; inset: -8% -4%;
  z-index: 0;
  opacity: 0.34;
  background: url("assets/images/a1-hero-bg.webp") center/cover no-repeat;
  max-width: none;
}
.hero__stream {
  position: absolute; inset: 0; z-index: 1;
  overflow: clip; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 92%);
  opacity: 0.5;
}
.hero__stream ol {
  position: absolute; left: var(--sc-gutter); bottom: 0;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; line-height: 2.15;
  color: var(--sc-ink-soft);
  white-space: nowrap;
}
.hero__stream li { opacity: 0.42; }
.hero__stream li:last-child { opacity: 0.9; }
.hero__stream b { color: var(--sc-ink); font-weight: 400; }

.hero__copy {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
}
.hero__copy h1 {
  max-width: 22ch;
  font-size: var(--sc-t-3xl);
  line-height: 1.02;
}
.hero__sub { margin-top: var(--sc-5); max-width: 52ch; }
.hero__actions {
  margin-top: var(--sc-7);
  display: flex; flex-wrap: wrap; gap: var(--sc-3);
}

/* Öndeki düzlem: sayfanın işleyeceği tek gerçek talep buraya düşüyor. */
.hero__inbound {
  position: absolute; z-index: 4;
  right: var(--sc-gutter); bottom: clamp(4rem, 14vh, 9rem);
  width: min(23rem, 74vw);
  border: 1px solid var(--otd-edge);
  border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--sc-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--sc-e2);
  padding: var(--sc-4);
}
.hero__inbound .otd-label { margin-bottom: var(--sc-2); }
.hero__inbound p { margin: 0; font-size: 0.92rem; line-height: 1.5; }

/* --------------------------------------------------------------- talep --- */

.talep { display: grid; place-items: center; }
.talep__grid {
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.msg {
  border: 1px solid var(--otd-edge);
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  padding: var(--sc-5);
  max-width: 32rem;
  box-shadow: var(--sc-e1);
}
.msg__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sc-3); margin-bottom: var(--sc-3);
  padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline);
}
.msg__body { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.msg__caret {
  display: inline-block; width: 0.5ch; height: 1.05em;
  background: var(--sc-ink-soft); vertical-align: -0.16em; margin-left: 0.1ch;
}

.payload {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem; line-height: 1.95;
  border-left: 1px solid var(--otd-edge);
  padding-left: var(--sc-5);
  margin: 0;
  color: var(--sc-ink-soft);
  min-height: 17em;
}
.payload span { display: block; opacity: 0; }
.payload span.is-on { opacity: 1; }
.payload .k { color: var(--sc-ink); }

/* --------------------------------------------------------- akış motoru --- */

.engine { display: grid; grid-template-rows: auto 1fr auto; align-content: center; }
.engine__head {
  width: 100%; max-width: 96rem; margin-inline: auto;
  padding: calc(var(--otd-bar-h) + var(--sc-5)) var(--sc-gutter) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4);
}
.engine__body {
  width: 100%; max-width: 96rem; margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  min-height: 0;
}
.engine__canvas {
  border: 1px solid var(--otd-edge);
  border-radius: var(--sc-r-sm);
  background:
    linear-gradient(var(--sc-hairline) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, var(--sc-hairline) 1px, transparent 1px) 0 0 / 26px 100%,
    var(--sc-surface);
  background-blend-mode: normal;
  padding: var(--sc-4);
  overflow: hidden;
}
.engine__canvas svg { width: 100%; height: auto; }

.nd__box {
  fill: #17171A; stroke: var(--otd-edge); stroke-width: 1;
  transition: fill 220ms var(--sc-ease-out), stroke 220ms var(--sc-ease-out);
}
.nd__name { fill: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.nd__sub  { fill: #7A7A80; font-family: var(--sc-font-mono); font-size: 12.5px; letter-spacing: 0.02em; }
.nd__dot  { fill: #2E2E33; transition: fill 220ms var(--sc-ease-out); }

.nd.is-live .nd__box { fill: #1E1B12; stroke: var(--sc-accent); }
.nd.is-live .nd__name { fill: var(--sc-ink); }
.nd.is-live .nd__sub { fill: var(--sc-ink-soft); }
.nd.is-live .nd__dot { fill: var(--sc-accent); }
.nd.is-done .nd__box { stroke: var(--sc-hairline-strong); fill: #18181B; }
.nd.is-done .nd__name { fill: var(--sc-ink); }
.nd.is-done .nd__dot { fill: #8A8A8F; }

.ed {
  fill: none; stroke: var(--otd-edge); stroke-width: 1.5;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
}
.ed.is-drawn { stroke-dashoffset: 0; stroke: #55555C; }
.ed.is-live { stroke: var(--sc-accent); }
.ed.is-idle { stroke: #202024; stroke-dasharray: 3 5; stroke-dashoffset: 0; }

.engine__side { align-self: center; }
.engine__step {
  font-family: var(--sc-font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-accent);
}
.engine__say {
  margin: var(--sc-3) 0 0;
  font-size: 1.06rem; line-height: 1.5; font-weight: 300;
  min-height: 4.6em;
  max-width: 30ch;
}
.engine__ticks { margin-top: var(--sc-5); display: grid; gap: 0.55rem; }
.engine__tick {
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline;
  gap: var(--sc-2);
  font-family: var(--sc-font-mono); font-size: 0.72rem;
  color: #7A7A80;
  transition: color 200ms var(--sc-ease-out);
}
.engine__tick.is-done { color: #C9C8C4; }
.engine__tick.is-live { color: var(--sc-ink); font-weight: 500; }
.engine__foot {
  width: 100%; max-width: 96rem; margin-inline: auto;
  padding: var(--sc-4) var(--sc-gutter) calc(var(--otd-strip-h) + var(--sc-4));
}

/* ------------------------------------------------------------ süre ------- */

.dur { display: grid; place-items: center; }
.dur__grid {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.dur__lanes { display: grid; gap: var(--sc-6); }
.lane__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sc-3); margin-bottom: var(--sc-3);
}
.lane__track {
  position: relative; height: 12px;
  border: 1px solid var(--otd-edge);
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  overflow: hidden;
}
.lane__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: #3A3A40;
}
.lane--auto .lane__fill { background: var(--sc-accent); }
.lane__steps {
  margin-top: var(--sc-3);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  font-family: var(--sc-font-mono); font-size: 0.7rem; color: #7A7A80;
}
.lane__steps span { transition: color 200ms var(--sc-ease-out); }
.lane__steps span.is-on { color: var(--sc-ink-soft); }
.lane__steps span.is-on::before { content: "✓ "; color: var(--sc-ink); }
.dur__figure { border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); overflow: hidden; }
.dur__figure img { width: 100%; height: clamp(90px, 13vh, 150px); object-fit: cover; }
.dur__figure > div { line-height: 0; }
.dur__figure figcaption { padding: var(--sc-3) var(--sc-4); border-top: 1px solid var(--otd-edge); }

/* ---------------------------------------------------------- mimari ------- */

.arch { display: grid; place-items: center; overflow: clip; }
.arch__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.16;
  background: url("assets/images/b4-katman.webp") center right/cover no-repeat;
  mask-image: linear-gradient(to left, #000, transparent 62%);
  max-width: none;
}
.arch__grid {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.arch__stack { display: grid; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); }
.layer { background: var(--sc-canvas); border-top: 1px solid var(--otd-edge); }
.layer:first-child { border-top: 0; }
/* Çerçeve duruyor, dolan şey içerik. */
.layer > button, .layer__more {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.layer.is-on > button, .layer.is-on .layer__more { opacity: 1; transform: none; }
/* Henüz dolmamış satır yüksekliğini korusun, yığın zıplamasın. */
.layer > button { min-height: 4.6rem; }
.layer > button {
  width: 100%; display: grid; grid-template-columns: 11rem minmax(0, 1fr) 1.2rem;
  align-items: center; gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-5);
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--sc-ink);
  transition: background-color 160ms var(--sc-ease-out);
}
.layer > button:hover { background: var(--sc-surface); }
.layer__name { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink); }
.layer__kit { font-size: 0.92rem; color: var(--sc-ink-soft); }
.layer__sign { font-family: var(--sc-font-mono); color: var(--sc-ink-soft); justify-self: end; }
.layer__more {
  padding: 0 var(--sc-5) var(--sc-5);
  max-width: 60ch;
}
.layer__more p { margin: 0; }
.layer[data-open="false"] .layer__more { display: none; }
.layer.is-current > button { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); }
.arch__aside figure { margin: 0; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); overflow: hidden; }
.arch__aside img { width: 100%; height: clamp(110px, 16vh, 190px); object-fit: cover; }
.arch__aside figure > div { line-height: 0; }
.arch__aside figcaption { padding: var(--sc-3) var(--sc-4); border-top: 1px solid var(--otd-edge); }

/* ------------------------------------------------------------ ayırıcı ---- */

.divider {
  height: clamp(200px, 26vh, 300px);
  border-block: 1px solid var(--otd-edge);
  background: url("assets/images/a2-bolum-ayirici.webp") center/cover no-repeat;
  opacity: 0.5;
}

/* --------------------------------------------------------- hizmetler ----- */
/* Kart ızgarası değil: asimetrik zigzag, ikisi kanıt yüzeyli, ikisi düz
   tipografi. Aynı şekil dört kere tekrarlanmıyor. */

.svc { border-top: 1px solid var(--sc-hairline); padding-block: clamp(3rem, 6vw, 6rem); }
.svc:first-of-type { border-top: 0; }
.svc__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.svc--flip .svc__row > figure { order: -1; }
.svc--plain .svc__row { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.svc h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 300; letter-spacing: var(--sc-track-snug); margin: 0; line-height: 1.12; }
.svc__lede { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 46ch; }
.svc ol { margin: var(--sc-5) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.svc li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--sc-3);
  padding: 0.85rem 0;
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.95rem;
}
.svc li i { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); letter-spacing: 0.1em; padding-top: 0.22em; }
.svc figure { margin: 0; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); overflow: hidden; }
.svc figure img { width: 100%; height: clamp(200px, 26vh, 330px); object-fit: cover; }
.svc figcaption { padding: var(--sc-3) var(--sc-4); border-top: 1px solid var(--otd-edge); }

/* Otonom iş akışları için kanıt yüzeyi: fotoğraf değil, aynı grafiğin küçük
   hali. Sahte ekran görüntüsü değil, sayfanın kendi çizdiği şerit. */
.mini {
  border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm);
  background: var(--sc-surface); padding: var(--sc-4);
}
.mini ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.mini li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--sc-3);
  padding: 0.6rem 0; border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.74rem; color: var(--sc-ink-soft);
}
.mini li:first-child { border-top: 0; }
.mini li b { color: var(--sc-ink); font-weight: 500; }
.mini li em { font-style: normal; color: #7A7A80; }

/* ------------------------------------------------------------- nasıl ----- */

.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.how ol { margin: var(--sc-6) 0 0; padding: 0; list-style: none; }
.how li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: var(--sc-4); align-items: baseline;
  padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline);
}
.how li i { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--sc-ink-soft); }
.how li h3 { margin: 0; font-size: 1.06rem; font-weight: 400; }
.how li p { margin: 0.35rem 0 0; color: var(--sc-ink-soft); font-size: 0.92rem; max-width: 48ch; }
.how li b {
  font-family: var(--sc-font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--sc-ink-soft); white-space: nowrap;
}
.how li b.free { color: var(--sc-accent); }
.how figure { margin: 0; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); overflow: hidden; }
.how figure img { width: 100%; height: clamp(180px, 24vh, 300px); object-fit: cover; }
.how figcaption { padding: var(--sc-3) var(--sc-4); border-top: 1px solid var(--otd-edge); }

/* ------------------------------------------------------- yol haritası ---- */

.road { background: #0E0E10; }
.road .sc-stage { display: grid; align-items: center; }
.rail { gap: var(--sc-6); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail > * { flex: 0 0 auto; width: clamp(20rem, 30vw, 32rem); }
.rail__lead { display: flex; flex-direction: column; justify-content: center; }
.card {
  border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm);
  background: var(--sc-canvas);
  padding: var(--sc-6);
  display: flex; flex-direction: column; gap: var(--sc-3);
}
.card h3 { margin: 0; font-size: var(--sc-t-lg); font-weight: 300; letter-spacing: var(--sc-track-snug); }
.card p { margin: 0; color: var(--sc-ink-soft); font-size: 0.94rem; }
.card__q {
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--sc-ink-soft);
}
.card__state {
  margin-top: auto; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: #7A7A80;
}
.rail__end { display: flex; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------------- kim ----- */

.who__grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.who figure { margin: 0; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); overflow: hidden; }
.who figure img { width: 100%; height: auto; }
.who__body figure img { height: clamp(180px, 24vh, 300px); object-fit: cover; }
.who figcaption { padding: var(--sc-3) var(--sc-4); border-top: 1px solid var(--otd-edge); }
.who__body p { max-width: 58ch; }
.who__body p + p { margin-top: var(--sc-4); }

/* ---------------------------------------------------------- iletişim ----- */

.close { display: grid; align-content: center; }
.close__grid {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding: calc(var(--otd-bar-h) + var(--sc-5)) var(--sc-gutter) var(--sc-5);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.close__intro h2 { max-width: 16ch; }
.close__intro p { margin-top: var(--sc-4); }

/* Tamamlanmış iş emri: formun zemini. Sayfa açıldığı anda burada bir şey var,
   yani pinned sahne boş bir ekranla başlamıyor. */
.order__panel {
  margin-top: var(--sc-6);
  border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  font-family: var(--sc-font-mono); font-size: 0.74rem;
}
.order__panel h3 {
  margin: 0; padding: var(--sc-3) var(--sc-4);
  border-bottom: 1px solid var(--otd-edge);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: flex; justify-content: space-between; gap: var(--sc-3);
}
.order__panel ol { margin: 0; padding: var(--sc-3) var(--sc-4) var(--sc-4); list-style: none; display: grid; gap: 0.55rem; }
.order__panel li { display: grid; grid-template-columns: 4.4rem 1fr; gap: var(--sc-3); color: #7A7A80; }
.order__panel li.is-on { color: var(--sc-ink-soft); }
.order__panel li.is-on b { color: var(--sc-ink); font-weight: 400; }

form { display: grid; gap: var(--sc-4); }
.field { display: grid; gap: 0.4rem; }
.field > span { font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field input, .field textarea {
  width: 100%;
  background: var(--sc-surface);
  border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm);
  padding: 0.72rem 0.85rem;
  color: var(--sc-ink); font-size: 0.95rem;
  transition: border-color 160ms var(--sc-ease-out);
}
.field input:hover, .field textarea:hover { border-color: var(--sc-hairline-strong); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--sc-accent); }
.field textarea { min-height: 6.5rem; resize: vertical; }
.field [aria-invalid="true"] { border-color: #C0563C; }
.field em { font-style: normal; font-size: 0.78rem; color: #C0563C; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-3); align-items: start; font-size: 0.82rem; color: var(--sc-ink-soft); }
.consent input { margin-top: 0.2rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__sent { border: 1px solid var(--sc-accent); border-radius: var(--sc-r-sm); padding: var(--sc-5); }

.foot {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding: var(--sc-5) var(--sc-gutter) var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
  display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6);
  align-items: baseline; justify-content: space-between;
  font-size: 0.8rem; color: var(--sc-ink-soft);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); text-decoration: underline; }

/* -------------------------------------------------------- iş emri şeridi -- */
/* İmza hareketi. Sabit, ince, sayfanın tamamı boyunca aynı talebi taşıyor. */

.order {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--sc-z-chrome);
  height: var(--otd-strip-h);
  display: flex; align-items: center; gap: var(--sc-4);
  padding-inline: var(--sc-gutter);
  border-top: 1px solid var(--otd-edge);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  backdrop-filter: blur(14px);
  font-family: var(--sc-font-mono); font-size: 0.7rem;
  color: var(--sc-ink-soft);
  overflow: hidden;
}
.order__id { color: var(--sc-ink); white-space: nowrap; letter-spacing: 0.06em; }
.order__id em { font-style: normal; color: var(--sc-ink-soft); }
.order__stamps { display: flex; align-items: center; gap: var(--sc-2); min-width: 0; overflow: hidden; }
.stamp {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm);
  background: none; color: inherit; font: inherit;
  padding: 0.28rem 0.6rem; white-space: nowrap; cursor: pointer;
  opacity: 0; transform: translate3d(0, 6px, 0);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out),
              border-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.stamp.is-on { opacity: 1; transform: none; }
.stamp.is-new { border-color: var(--sc-accent); color: var(--sc-ink); }
.stamp:hover { border-color: var(--sc-hairline-strong); color: var(--sc-ink); }
.stamp::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.order__state { margin-left: auto; white-space: nowrap; }
.order__demo { white-space: nowrap; color: #7A7A80; }

/* ------------------------------------------------- act sökülmüş bölümler --
   Hem mobilde hem hareket kapalıyken act nitelikleri JS tarafından
   sökülüyor. Bu kural medya sorgusunun içinde OLAMAZ: hareket kapalı bir
   masaüstü ziyaretçisi de aynı düzeni alıyor. */

.m-flow { height: auto !important; }
.m-flow .sc-stage,
.m-flow [data-sc-stage] {
  position: static !important;
  height: auto !important;
  overflow: visible;
  padding-block: var(--sc-8);
}

/* ------------------------------------------------------------- mobil ----- */

@media (max-width: 860px) {
  :root { --otd-bar-h: 60px; --otd-strip-h: 40px; }

  .bar__index { display: none; }
  .bar { gap: var(--sc-3); }

  .hero__copy h1 { font-size: var(--sc-t-2xl); max-width: none; }
  .hero { padding-top: calc(var(--otd-bar-h) + var(--sc-7)); }
  .hero__inbound { position: static; width: auto; margin-top: var(--sc-6); backdrop-filter: none; }
  .hero__stream { display: none; }
  .hero__bed { opacity: 0.22; }

  .talep__grid, .engine__body, .dur__grid, .arch__grid,
  .svc__row, .svc--plain .svc__row, .how__grid, .who__grid, .close__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc--flip .svc__row > figure { order: 0; }
  .payload { border-left: 0; border-top: 1px solid var(--otd-edge); padding-left: 0; padding-top: var(--sc-4); min-height: 0; }
  .payload span { opacity: 1; }

  .engine__head { padding-top: var(--sc-6); flex-direction: column; align-items: flex-start; gap: var(--sc-2); }
  .engine__foot { padding-bottom: var(--sc-6); }
  .engine__say { min-height: 0; }
  .engine__side { position: sticky; bottom: calc(var(--otd-strip-h) + var(--sc-3)); background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); padding: var(--sc-4); }
  /* Yapışkan panel ekranın üçte birini yemesin: adım listesi dikey grafikte
     zaten görünüyor. */
  .engine__ticks { display: none; }
  .payload { overflow-x: auto; }

  /* Grafik dikey tek kolona dönüyor. Her node ekran ortasına gelince aktif. */
  .engine__canvas { display: none; }
  .stackgraph { display: grid; gap: 0; border: 1px solid var(--otd-edge); border-radius: var(--sc-r-sm); background: var(--sc-surface); }
  .stackgraph li {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sc-4); align-items: center;
    padding: var(--sc-4) var(--sc-5);
    border-top: 1px solid var(--sc-hairline);
    opacity: 0.42;
    transition: opacity 260ms var(--sc-ease-out), background-color 260ms var(--sc-ease-out);
  }
  .stackgraph li:first-child { border-top: 0; }
  .stackgraph li.is-on { opacity: 1; background: #17171A; }
  .stackgraph li.is-live { background: #1E1B12; }
  .stackgraph .pip { width: 7px; height: 7px; border-radius: 50%; background: #2E2E33; }
  .stackgraph li.is-live .pip { background: var(--sc-accent); }
  .stackgraph li.is-on .pip { background: #8A8A8F; }
  .stackgraph b { display: block; font-family: var(--sc-font-mono); font-size: 0.8rem; font-weight: 500; }
  .stackgraph span { display: block; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-ink-soft); }
  .stackgraph em { display: block; font-style: normal; font-size: 0.86rem; margin-top: 0.35rem; color: var(--sc-ink-soft); }

  .rail { flex-direction: row; }
  .road .sc-stage { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .rail > * { width: 100%; scroll-snap-align: center; }
  .rail { display: grid; gap: var(--sc-5); }

  .two { grid-template-columns: 1fr; }
  .layer > button { grid-template-columns: minmax(0, 1fr) 1.2rem; row-gap: 0.3rem; }
  .layer__kit { grid-column: 1 / -1; }

  .order { gap: var(--sc-3); font-size: 0.66rem; }
  .order__stamps .stamp { display: none; }
  .order__stamps .stamp.is-last { display: inline-flex; }
  .order__demo { display: none; }
  .foot { flex-direction: column; }
}

@media (min-width: 861px) { .stackgraph { display: none; } }

/* --------------------------------------------------- azaltılmış hareket -- */
/* Az ve yumuşak, sıfır değil. Hareket kapalıyken de her şey okunabilir. */

@media (prefers-reduced-motion: reduce) {
  .layer > button, .layer__more { opacity: 1; transform: none; }
  .stamp { opacity: 1; transform: none; }
  .payload span { opacity: 1; }
  .hero__stream { display: none; }
  .ed { stroke-dashoffset: 0; }
  .lane__fill { transform: scaleX(1); }
  .lane__steps span { color: var(--sc-ink-soft); }
  .lane__steps span::before { content: "✓ "; color: var(--sc-ink); }
  .nd .nd__box { fill: #18181B; stroke: var(--sc-hairline-strong); }
  .nd .nd__name { fill: var(--sc-ink); }
  .nd .nd__dot { fill: #8A8A8F; }
  .engine__tick { color: var(--sc-ink-soft); }
  .stackgraph li { opacity: 1; }
}

/* --------------------------------------------------------------- atlama --- */
.skip {
  position: absolute; left: var(--sc-gutter); top: -4rem;
  z-index: calc(var(--sc-z-chrome) + 1);
  padding: 0.7rem 1rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm); text-decoration: none; font-size: 0.9rem;
  transition: top 160ms var(--sc-ease-out);
}
.skip:focus-visible { top: 0.75rem; }

/* Hareket kapalıyken ray bir ızgaraya açılıyor: yatay kaydırma bırakılmıyor,
   üç çeyrek de aynı anda okunuyor. */
@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  .road .sc-stage, .road [data-sc-stage] { overflow: visible; padding-block: var(--sc-8); }
  .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
  .rail > * { width: auto; }
  .rail__lead, .rail__end { grid-column: 1 / -1; }
}

/* JS yüklenene kadar hero boş kalmasın. Motor mount'ta inline opacity yazıyor
   ve inline stil bu kuralı eziyor, yani burası yalnızca ilk boyamayı
   ilgilendiriyor. Greet formundaki (üçüncü değeri 0 olan) her cue için geçerli:
   o cue'lar zaten p=0'da tam opaklıkta olacak. */
[data-sc-cue^="0 "] { opacity: 1; }