/* NexaCore v3. Tokens and rules from Design.md. */

/* Yazı tipleri kendi sunucumuzdan iner; Google Fonts isteği yok. Latin + latin-ext (Türkçe). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(assets/fonts/inter-normal-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: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(assets/fonts/inter-normal-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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(assets/fonts/space-grotesk-normal-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 700; font-display: swap;
  src: url(assets/fonts/space-grotesk-normal-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; }

:root {
  color-scheme: light;

  --color-canvas: #f7f6f2;
  --color-surface: #ffffff;
  --color-surface-2: #efede7;
  --color-border: #e3e0d8;
  --color-border-strong: #c9c5bb;
  --color-ink: #14181a;
  --color-ink-soft: #5a6169;
  --color-ink-hover: #2b3135;
  --color-brand: #10b981;
  --color-accent: #0b6b4a;
  --color-accent-soft: #e3f1ea; /* accent on it: 5.6:1 */
  /* odak halkası: açık yüzeyde marka yeşili 3:1'i geçmez (kâğıtta 2.35), bağlantı yeşili 6.04 verir */
  --color-focus: #0b6b4a;
  --color-forest: #0f2e24;
  --color-forest-ink: #eef3ee;
  --color-forest-soft: #a9bfb3;
  /* access chain modules (/erisim-guvenligi/): raised blocks on the tinted section in both themes */
  --zincir-fill: var(--color-surface); --zincir-stroke: var(--color-ink-soft); --zincir-yesil: var(--color-forest);
  --color-operex: #fd6b36;
  --color-operex-ink: #c2410c;
  --color-danger: #b42318;
  --color-primary: var(--color-ink);
  --color-primary-ink: #ffffff;

  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-display: 64px; --leading-display: 1.02; --tracking-display: -0.03em;
  --text-h1: 56px;      --leading-h1: 1.05;      --tracking-h1: -0.03em;
  --text-h2: 40px;      --leading-h2: 1.1;       --tracking-h2: -0.02em;
  --text-h3: 24px;      --leading-h3: 1.25;      --tracking-h3: -0.01em;
  --text-lead: 20px;    --leading-lead: 1.5;
  --text-body: 17px;    --leading-body: 1.6;
  --text-small: 15px;   --leading-small: 1.5;
  --text-label: 13px;   --leading-label: 1.4;    --tracking-label: 0.04em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  --radius-button: 8px; --radius-input: 8px; --radius-card: 12px;
  --radius-media: 12px; --radius-badge: 6px; --radius-full: 9999px;

  --shadow-menu: 0 8px 24px -8px rgba(20, 24, 26, 0.18);
  --shadow-card: 0 12px 28px -14px rgba(20, 24, 26, 0.28);

  --page-max: 1200px; --page-gutter: 24px; --measure: 640px;
  --section-gap: 96px; --card-padding: 24px; --nav-height: 64px;

  --motion-fast: 160ms; --motion-base: 200ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 768px) {
  :root {
    --text-display: 40px; --text-h1: 36px; --text-h2: 30px; --text-h3: 20px;
    --text-lead: 18px; --text-body: 16px; --section-gap: 64px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #0e1512; --color-surface: #142019; --color-surface-2: #1a2822;
    --color-border: #26352e; --color-border-strong: #35473e;
    --color-ink: #eef3ee; --color-ink-soft: #a9bfb3; --color-ink-hover: #ffffff;
    --color-accent: #34d399; --color-accent-soft: #173a2e; --color-primary: #eef3ee;
    --zincir-fill: #22332b; --zincir-stroke: #3d5247; --zincir-yesil: #1d4a38; --color-primary-ink: #0e1512;
    --color-focus: #10b981; --color-danger: #f97066; --color-operex-ink: #fb923c;
    --shadow-menu: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-card: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0e1512; --color-surface: #142019; --color-surface-2: #1a2822;
  --color-border: #26352e; --color-border-strong: #35473e;
  --color-ink: #eef3ee; --color-ink-soft: #a9bfb3; --color-ink-hover: #ffffff;
  --color-accent: #34d399; --color-accent-soft: #173a2e; --color-primary: #eef3ee;
    --zincir-fill: #22332b; --zincir-stroke: #3d5247; --zincir-yesil: #1d4a38; --color-primary-ink: #0e1512;
  --color-focus: #10b981; --color-danger: #f97066; --color-operex-ink: #fb923c;
  --shadow-menu: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-card: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
/* orman bandı ve footer koyu yüzeydir: halka marka yeşiline döner (orman üstünde 5.76) */
.cta, .footer { --color-focus: #10b981; }

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--color-brand); color: #ffffff; }

.skip {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100;
  padding: var(--space-2) var(--space-3); background: var(--color-ink); color: #fff;
  font-size: var(--text-small); border-radius: var(--radius-button);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- type -- */
h1, h2, h3 { font-family: var(--font-heading); margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: 700; }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: 500; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink-soft); max-width: var(--measure); }
.soft { color: var(--color-ink-soft); }
.label {
  display: inline-block; font-size: var(--text-label); line-height: var(--leading-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-accent);
}
.label--operex { color: var(--color-operex-ink); }

/* -------------------------------------------------------------- layout -- */
.wrap { width: min(100% - var(--page-gutter) * 2, var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--section-gap); }
.section__head { max-width: var(--measure); display: grid; gap: var(--space-3); margin-bottom: var(--space-12); }
.section__head .lead { margin-top: var(--space-1); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 20px; border-radius: var(--radius-button);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-ink); }
.btn--primary:hover { background: var(--color-ink-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--secondary:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ----------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.nav__inner { height: var(--nav-height); display: flex; align-items: center; gap: var(--space-8); }
.nav__logo { display: block; margin-right: auto; flex-shrink: 0; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav__links > li { position: relative; }
.nav__links > li > a, .nav__btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 960px) { .nav__inner, .nav__links { gap: var(--space-3); } }
.nav__links a, .nav__btn { color: var(--color-ink); text-decoration: none; font-size: 15px; font-weight: 500; padding-block: var(--space-2); }
.nav__links a:hover, .nav__links a.is-active, .nav__links a[aria-current="page"], .nav__btn:hover, .nav__btn.is-active, .nav__btn[aria-expanded="true"] { color: var(--color-accent); }
.nav__links .nav__cta { display: none; }
/* desktop CTA: one width on every page (its label varies per page), so the links never shift between pages */
.nav__inner > .nav__cta { min-width: 11.75rem; justify-content: center; }
.nav__links .nav__cta a { color: var(--color-primary-ink); }
.nav__links .nav__cta a:hover { color: var(--color-primary-ink); }
/* dropdown */
.nav__btn { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding-inline: 0; cursor: pointer; }
.nav__btn svg { flex-shrink: 0; width: 16px; height: 16px; transition: transform var(--motion-fast) var(--ease-out); }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__menu {
  display: none; position: absolute; top: calc(100% + 8px); left: -12px; z-index: 60;
  min-width: 300px; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-menu);
}
/* grouped dropdown (Otomasyon): one column per group on desktop; group labels are plain text, not links */
.nav__menu.is-open { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2); }
.nav__group ul { list-style: none; margin: 0; padding: 0; }
.nav__group-label {
  display: block; padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft);
}
.nav__menu a { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-button); }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--color-surface-2); color: var(--color-ink); }
.nav__menu a[aria-current="page"] { color: var(--color-accent); }
.nav__menu strong { font-weight: 500; font-size: 15px; }
.nav__menu a span { font-size: 13px; color: var(--color-ink-soft); }
/* the toggle comes right after the logo in the DOM (Tab moves from it into the open panel);
   order keeps it at the right edge of the bar */
.nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; order: 1;
  background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-button); cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .ico-x { display: none; }
.nav.is-open .nav__toggle .ico-menu { display: none; }
.nav.is-open .nav__toggle .ico-x { display: block; }

/* ---------------------------------------------------------------- hero -- */
.hero { padding-block: var(--space-12); }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: center; }
.hero__copy { display: grid; gap: var(--space-6); }
/* hero entrance: once, on load, opacity + 12px, block by block (label, h1, lead, buttons, chips);
   slower than the in-page reveal on purpose; the global reduced-motion rule disables it */
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: hero-in 640ms var(--ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 140ms; }
.hero__copy > :nth-child(3) { animation-delay: 300ms; }
.hero__copy > :nth-child(4) { animation-delay: 460ms; }
.hero__copy > :nth-child(5) { animation-delay: 600ms; }
/* two-sentence hero headline: one step below h1 so it holds in three lines (Design.md, hero exception) */
.hero__copy h1 { font-size: 48px; max-width: 22ch; }
@media (max-width: 768px) { .hero__copy h1 { font-size: var(--text-h1); max-width: none; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.media {
  border-radius: var(--radius-media); border: 1px solid var(--color-border-strong);
  overflow: hidden; background: var(--color-surface-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media { aspect-ratio: 4 / 3; }
.hero__media img { object-position: 100% 55%; }
.hero__media { position: relative; }
/* frameless hero media: the render's ground is calibrated to the page canvas, so the object sits
   on the page itself. Bleeds to the right viewport edge; left/top/bottom fade into the canvas. */
.hero, .page-hero { overflow-x: clip; }
.media--bleed {
  border: 0; border-radius: 0; background: transparent; aspect-ratio: 4 / 3; align-self: center;
  margin-right: calc((min(100vw - var(--page-gutter) * 2, var(--page-max)) - 100vw) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.2) 7%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.9) 23%, #000 28%), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.2) 7%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.9) 23%, #000 28%), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 55%; opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.hero__media.has-video .hero__video { opacity: 1; }
/* two stacked clips: the idle loop sits behind the intro and comes forward when the intro ends;
   the intro stays underneath on its last frame, which equals the loop's first frame */
.hero__video.is-front { z-index: 2; }

/* ---------------------------------------------------------------- cards -- */
.grid { display: grid; gap: var(--space-6); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--card-padding);
  display: grid; gap: var(--space-3); align-content: start;
  transition: border-color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
/* info cards: border only (a light cue, nothing that promises a click) */
.card:hover { border-color: var(--color-border-strong); }
.card__img {
  aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--color-surface-2);
  margin-bottom: var(--space-1);
}
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { font-size: 20px; }
.card p { color: var(--color-ink-soft); font-size: var(--text-small); line-height: 1.55; }

/* ---------------------------------------------------------------- split -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split__copy { display: grid; gap: var(--space-4); }
.split__copy .btn { justify-self: start; margin-top: var(--space-2); }
.list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-ink); }
.list svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-brand); margin-top: 2px; }

/* ---------------------------------------------------------------- steps -- */
.step { display: grid; align-content: start; gap: var(--space-3); border-top: 1px solid var(--color-border-strong); padding-top: var(--space-6); }
.step__img { aspect-ratio: 4 / 3; margin-bottom: var(--space-2); }
.step__num { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.step p { color: var(--color-ink-soft); }

/* ---------------------------------------------------------------- band -- */
.band { background: var(--color-surface-2); padding-block: var(--space-12); }
.band__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.band__img { width: 88px; height: 88px; border-radius: var(--radius-media); overflow: hidden; border: 1px solid var(--color-border-strong); flex: 0 0 auto; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band__text { display: grid; gap: var(--space-1); }
.band__text p { color: var(--color-ink-soft); }

/* ----------------------------------------------------------------- cta -- */
.cta { background: var(--color-forest); color: var(--color-forest-ink); padding-block: var(--space-24); }
.cta .label { color: var(--color-forest-soft); }
.cta .lead { color: var(--color-forest-soft); }
.cta__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
.cta__copy { display: grid; gap: var(--space-4); }
.form {
  background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-card); border: 1px solid var(--color-border); padding: var(--space-8);
  display: grid; gap: var(--space-4);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: grid; gap: var(--space-2); align-content: start; }
.field label { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* alan çerçevesi bileşen sınırıdır, 3:1 ister: border-strong açıkta 1.72, koyuda 1.70 kalıyordu;
   ink-soft açıkta 6.27, koyuda 8.63 (yüzey üstünde). Kart çerçeveleri değişmedi. */
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-ink-soft); border-radius: var(--radius-input);
}
.field textarea { resize: vertical; min-height: 120px; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
/* hata odaktan sonra gelir: odaktaki geçersiz alan kırmızı çerçeve + yeşil halka taşır */
.field :is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) { border-color: var(--color-danger); }
.field__error { font-size: 13px; color: var(--color-danger); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__status { font-size: var(--text-small); color: var(--color-ink-soft); }
.form__status.is-ok { color: var(--color-accent); }
.form__status.is-err { color: var(--color-danger); }
.form__legal { font-size: 13px; color: var(--color-ink-soft); }
.form__checks { display: grid; gap: var(--space-2); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); color: var(--color-ink-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--color-ink); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --------------------------------------------------------------- footer -- */
.footer { background: var(--color-forest); color: var(--color-forest-ink); padding-block: var(--space-24) var(--space-12); border-top: 1px solid rgba(238, 243, 238, 0.14); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--space-8); }
.footer__brand { display: grid; gap: var(--space-4); align-content: start; }
.footer__brand img { height: 26px; width: auto; }
.footer__brand p { color: var(--color-forest-soft); max-width: 32ch; font-size: var(--text-small); }
.footer h3 { font-family: var(--font-body); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-forest-soft); margin-bottom: var(--space-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* sub-heading inside a column (Otomasyon: Çözümler, Sektörler) */
.footer h4 { margin: 0 0 var(--space-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: 500; color: var(--color-forest-soft); }
.footer ul + h4 { margin-top: var(--space-4); }
.footer a, .footer .textbtn { color: var(--color-forest-ink); text-decoration: none; font-size: var(--text-small); }
.footer a:hover, .footer .textbtn:hover { text-decoration: underline; }
.textbtn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer__bottom {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(238, 243, 238, 0.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-size: 13px; color: var(--color-forest-soft);
}

/* -------------------------------------------------------------- consent -- */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  background: var(--color-surface); color: var(--color-ink);
  border-top: 1px solid var(--color-border-strong);
}
.consent[hidden] { display: none; }
.consent__inner {
  width: min(100% - var(--page-gutter) * 2, var(--page-max)); margin-inline: auto; padding-block: var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6);
}
.consent p { font-size: var(--text-small); color: var(--color-ink-soft); }
.consent a { white-space: nowrap; }
.consent .btn { padding-block: 8px; }

/* ---------------------------------------------------------------- motion -- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- docs -- */
.doc { max-width: var(--measure); margin-inline: auto; padding: var(--space-16) var(--page-gutter) var(--space-24); display: grid; gap: var(--space-4); }
.doc h1 { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.doc p { text-align: justify; hyphens: auto; }
.doc h2 { font-size: var(--text-h3); font-weight: 500; margin-top: var(--space-6); }
.doc p, .doc li, .doc td, .doc th { color: var(--color-ink-soft); }
.doc ul { padding-left: 1.2em; margin: 0; display: grid; gap: var(--space-1); }
.doc .meta { font-size: 13px; color: var(--color-ink-soft); }
.todo { background: #fbecc0; color: #4a3b00; padding: 0 0.3em; border-radius: 4px; font-size: 0.92em; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--text-small); }
.doc th, .doc td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.doc th { color: var(--color-ink); font-weight: 600; }
.tbl { overflow-x: auto; }

/* ------------------------------------------------ in-page nav (nasil-calisir) -- */
/* Under the page hero actions: plain links to the sections below. Not sticky, no numbers. */
.toc { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
.toc li { display: flex; align-items: center; gap: var(--space-3); }
.toc a { padding-block: var(--space-1); font-size: var(--text-small); font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------------------------------------------- layer diagram (nasil-calisir) -- */
/* Ekran, Akış and İşlem as boxes; lines are borders, arrowheads clipped blocks, labels HTML.
   The drawing is aria-hidden; the visually hidden figcaption list tells the same flow.
   Every line sits at a fixed offset from the top of a box (--lay-*), so the link columns meet
   the chips without measuring. The return line is drawn long from the "onay bekler" chip and
   the Akış box clips it at its own edge. Wide screens read left to right, <=1024px top to
   bottom. Green only on the "onay bekler" chip. No motion of its own: the figure is a .reveal. */
.layers {
  --lay-pad: var(--space-6);      /* box padding */
  --lay-name: var(--space-6);     /* line box of a layer name */
  --lay-gap: var(--space-4);      /* layer name to chips */
  --lay-chip: var(--space-8);     /* chip height, border included */
  --lay-drop: var(--space-4);     /* chips to the return line */
  --lay-link: var(--space-24);    /* width of a link column */
  --lay-indent: var(--space-6);   /* stacked: room left of the chips for the return line */
  --lay-line: var(--color-ink-soft);
  /* top of the 1px forward line (chip middle) and of the return line, from a box's outer top */
  --lay-y-fwd: calc(var(--lay-pad) + var(--lay-name) + var(--lay-gap) + var(--lay-chip) / 2);
  --lay-y-back: calc(1px + var(--lay-pad) + var(--lay-name) + var(--lay-gap) + var(--lay-chip) + var(--lay-drop));
  margin: 0;
}
.layers__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lay-link) minmax(max-content, 1.6fr) var(--lay-link) minmax(0, 1fr);
}
.layers__box {
  position: relative; min-width: 0; padding: var(--lay-pad);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
}
.layers__name { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: var(--lay-name); letter-spacing: -0.01em; }
.layers__desc { margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-soft); }
/* below the chips: the return line, its label (placed from the link column) and padding */
.layers__box--akis { isolation: isolate; overflow: hidden; padding-bottom: calc(var(--lay-drop) + var(--space-12)); }
.layers__steps { display: flex; align-items: center; margin-top: var(--lay-gap); }
.layers__chip {
  position: relative; flex: none; display: inline-flex; align-items: center; height: var(--lay-chip); padding-inline: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-badge);
  font-size: var(--text-label); font-weight: 500; line-height: 1; color: var(--color-ink-soft); white-space: nowrap;
}
.layers__chip--wait { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
/* return line: down from the chip middle, then left; clipped by the Akış box. Offsets count the chip border. */
.layers__chip--wait::after {
  content: ""; position: absolute; z-index: -1; right: 50%; top: calc(var(--lay-chip) / 2 - 2px);
  width: 100vw; height: calc(var(--lay-chip) / 2 + var(--lay-drop) + 2px);
  border-right: 1px solid var(--lay-line); border-bottom: 1px solid var(--lay-line);
}
.layers__step { position: relative; flex: 1 1 var(--space-4); min-width: var(--space-6); height: var(--lay-chip); margin-inline: var(--space-1); }
.layers__step::before, .layers__step::after { content: ""; position: absolute; background: var(--lay-line); }
.layers__step::before { left: 0; right: 0; top: calc(var(--lay-chip) / 2 - 1px); height: 1px; }
.layers__step::after { right: 0; top: calc(var(--lay-chip) / 2 - 5px); width: 8px; height: 9px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* link columns: forward line at the chip middle, return line below it; heads touch the box edges */
.layers__link { position: relative; }
.layers__link--in { z-index: 1; }
.layers__arrow { position: absolute; left: 0; right: 0; height: 1px; background: var(--lay-line); }
.layers__arrow::after { content: ""; position: absolute; top: -4px; width: 8px; height: 9px; background: var(--lay-line); }
.layers__arrow > span {
  position: absolute; left: 0; right: 0; padding-inline: var(--space-1);
  font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-ink-soft); text-align: center;
}
.layers__arrow--fwd { top: var(--lay-y-fwd); }
.layers__arrow--fwd::after { right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.layers__arrow--fwd > span { bottom: calc(100% + var(--space-1)); }
.layers__arrow--back { top: var(--lay-y-back); }
.layers__arrow--back::after { left: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.layers__arrow--back > span { top: calc(100% + var(--space-1)); }
/* the return label reads under the return line, inside the Akış box */
.layers__link--in .layers__arrow--back > span { left: calc(100% + 1px + var(--lay-pad)); right: auto; padding: 0; white-space: nowrap; text-align: left; }
.layers__log {
  grid-column: 1 / -1; margin-top: var(--space-6); padding: var(--space-3) var(--lay-pad);
  background: var(--color-surface-2); border-radius: var(--radius-card); font-size: var(--text-small); color: var(--color-ink-soft);
}
.layers__log span { color: var(--color-ink); font-weight: 500; }
.layers__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* forced colors drop backgrounds: lines and heads drawn with them take the text colour */
@media (forced-colors: active) {
  .layers__arrow, .layers__arrow::after, .layers__step::before, .layers__step::after { forced-color-adjust: none; background: CanvasText; }
}
/* stacked: boxes top to bottom, links become vertical, chips a column; the return line runs up the left */
@media (max-width: 1024px) {
  .layers__map { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
  .layers__link { height: var(--space-16); }
  .layers__arrow { top: 0; bottom: 0; left: 60%; right: auto; width: 1px; height: auto; }
  .layers__arrow--fwd, .layers__arrow--back { top: 0; }
  .layers__arrow::after { left: -4px; right: auto; width: 9px; height: 8px; }
  .layers__arrow--fwd::after { top: auto; bottom: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .layers__arrow--back::after { top: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .layers__arrow--fwd > span, .layers__arrow--back > span, .layers__link--in .layers__arrow--back > span {
    left: calc(100% + var(--space-2)); right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
    padding: 0; white-space: nowrap; text-align: left;
  }
  .layers__link--in .layers__arrow--back { left: calc(1px + var(--lay-pad) + var(--space-2)); }
  .layers__link--out .layers__arrow--back { left: 30%; }
  .layers__box--akis { padding-bottom: var(--lay-pad); padding-left: calc(var(--lay-pad) + var(--lay-indent)); }
  .layers__steps { flex-direction: column; align-items: flex-start; }
  .layers__step { flex: none; align-self: stretch; min-width: 0; height: var(--space-6); margin: 0; }
  .layers__step::before { left: 15px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .layers__step::after { left: 11px; right: auto; top: auto; bottom: 0; width: 9px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .layers__chip--wait::after {
    top: auto; right: 100%; bottom: calc(var(--lay-chip) / 2 - 1px); width: calc(var(--lay-indent) - var(--space-2) + 1px); height: 100vh;
    border-right: 0; border-left: 1px solid var(--lay-line);
  }
}

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* mobile menu panel: up to 900px (was 768px). With five top-level items the desktop bar needs about
   800px of content on the longest nav CTA, so 769-900px also gets the panel. Keep site.js in sync. */
@media (max-width: 900px) {
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: var(--nav-height);
    flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface);
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-menu); padding: var(--space-2) var(--page-gutter) var(--space-4);
  }
  .nav.is-open .nav__links { display: flex; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; }
  .nav__links a { display: block; padding: var(--space-3) 0; font-size: 17px; }
  .nav__btn { display: block; width: 100%; text-align: left; padding: var(--space-3) 0 var(--space-1); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); cursor: default; }
  .nav__btn svg { display: none; }
  .nav__menu, .nav__menu.is-open { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: static; min-width: 0; padding: 0 0 var(--space-2); border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .nav__group-label { padding: var(--space-2) 0 var(--space-1); letter-spacing: 0; text-transform: none; font-weight: 500; }
  .nav__menu a { padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 1px solid var(--color-border); border-radius: 0; }
  .nav__menu a:hover { background: transparent; }
  .nav__menu a span { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav > .wrap > .nav__cta { display: none; }
  .nav.is-open .nav__links .nav__cta { display: block; margin-top: var(--space-3); }
  .nav__links .nav__cta a { display: inline-flex; padding: 12px 20px; font-size: 15px; }
}
@media (max-width: 768px) {
  .hero { padding-block: var(--space-12) var(--section-gap); }
  .hero__grid, .split, .cta__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  /* mobile hero shows a close 4:3 crop of the render (hero-m*), so the box follows it */
  .hero__media { aspect-ratio: 4 / 3; }
  .media--bleed {
    margin-inline: calc(-1 * var(--page-gutter)); aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .form { padding: var(--space-6); }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  /* full-width strip, button beside the copy: 13 px copy at label leading, links may wrap,
     44 px touch target (390 x 844: 138 -> 104 px tall, copy 5 lines; 768 wide: 2 lines) */
  .consent { inset-inline: 0; bottom: 0; }
  .consent__inner { width: auto; flex-wrap: nowrap; padding: 6px var(--space-3); gap: var(--space-3); }
  .consent p { font-size: 13px; line-height: var(--leading-label); }
  .consent a { white-space: normal; }
  .consent .btn { flex: none; min-height: 44px; padding-inline: var(--space-3); }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================ v4 pages == */
/* Components added for the multi-page build (site-kurgusu-v4.md). */

/* section head with a trailing link */
.section__head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.section__head--row > div { max-width: var(--measure); display: grid; gap: var(--space-3); }
.more { font-size: 15px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); }
.more svg { width: 18px; height: 18px; }

/* grids */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* sub-page hero */
.page-hero { padding-block: var(--space-16) var(--space-12); border-bottom: 1px solid var(--color-border); }
.page-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: center; }
.page-hero__copy { display: grid; gap: var(--space-4); max-width: 720px; }
.page-hero__copy h1 { max-width: 16ch; }
.page-hero__copy .lead { margin-top: var(--space-1); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.page-hero__media { aspect-ratio: 4 / 3; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); }
.crumbs a { color: var(--color-accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { width: 14px; height: 14px; }

/* card with an icon (packages, solution areas) */
.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-button);
  background: var(--color-surface-2); display: grid; place-items: center; margin-bottom: var(--space-1);
}
.card__icon svg { width: 22px; height: 22px; color: var(--color-brand); }
.card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.card__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-small); color: var(--color-ink); line-height: 1.5; }
.card__list li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-brand); margin-top: 8px; }
.card__foot { margin-top: auto; padding-top: var(--space-2); }
/* footer'lı kartlar: buton kartın altına oturur, yan yana kartlarda butonlar aynı hizada */
.card:has(.card__foot) { display: flex; flex-direction: column; }
.card--link { text-decoration: none; color: inherit; }
/* link cards: the one place a card lifts; shadow token, no glow */
.card--link:hover, .card--link:focus-visible { border-color: var(--color-border-strong); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card--link:hover h3 { color: var(--color-accent); }
.card--link h3 { transition: color var(--motion-fast) var(--ease-out); }
.card > .card__body { display: grid; gap: var(--space-3); }

/* package meta: data class and model, as a definition list */
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-1) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.meta div { display: flex; gap: var(--space-1); font-size: 13px; }
.meta dt { flex-shrink: 0; color: var(--color-ink-soft); }
.meta dt::after { content: ":"; }
.meta dd { margin: 0; font-weight: 500; color: var(--color-ink); }

/* two working models */
.models { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.model { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.model h3 { font-size: var(--text-h3); }
.model .model__claim { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink); font-weight: 500; }
.model p { color: var(--color-ink-soft); }
.model .btn { align-self: flex-start; margin-top: auto; }

/* the single guiding sentence (control principle) */
.principle {
  background: var(--color-surface-2); border-radius: var(--radius-card); padding: var(--space-8) var(--space-12);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-3) var(--space-12); align-items: end;
}
.principle .label { grid-column: 1 / -1; }
.principle p { font-family: var(--font-heading); font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance; }
.principle .soft { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); letter-spacing: 0; max-width: var(--measure); padding-bottom: 4px; }

/* question and answer rows (buying checklist) */
.qa { display: grid; border-top: 1px solid var(--color-border-strong); }
.qa__row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-4) var(--space-12); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.qa__row dt { font-family: var(--font-heading); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
.qa__row dd { margin: 0; color: var(--color-ink-soft); max-width: var(--measure); }

/* accordion (FAQ), native details */
.faq { border-top: 1px solid var(--color-border-strong); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4); font-family: var(--font-heading); font-weight: 500; font-size: 19px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-ink-soft); transition: transform var(--motion-fast) var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq details p { padding-bottom: var(--space-4); color: var(--color-ink-soft); max-width: var(--measure); }

/* plain bordered block with a label (e.g. "İlişki biterse") */
.box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-6); display: grid; gap: var(--space-2); }
.box p { color: var(--color-ink-soft); }
.box--tint { background: var(--color-surface-2); border-color: transparent; }

/* example assessment card (home, screen 02) */
.report { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); padding: var(--space-8); display: grid; gap: var(--space-4); }
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.report__tag { font-size: 13px; color: var(--color-ink-soft); padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-badge); background: var(--color-surface-2); }
.report__brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.report__brand img { display: block; height: calc(var(--text-label) * var(--leading-label)); width: auto; }
/* sample report: each finding is an icon, a title, one line and two chips (data class, model); the
   recommended start is the one tinted block. On entry a thin bar fills like a report being prepared,
   then the findings arrive in order and the recommendation last. Reduced motion: no animation. */
.report__bar { display: block; height: 2px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.report__bar::after { content: ""; display: block; height: 100%; background: var(--color-brand); transform-origin: left; }
.report__item, .report__pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.report__item + .report__item { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.report__ico { width: 40px; height: 40px; border-radius: var(--radius-button); background: var(--color-surface-2); display: grid; place-items: center; color: var(--color-brand); }
.report__ico svg { width: 20px; height: 20px; }
.report__body { display: grid; gap: var(--space-2); }
.report__body h3 { font-size: 19px; }
.report__body p { color: var(--color-ink-soft); font-size: var(--text-small); }
.report__chips { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; background: var(--color-surface-2); color: var(--color-ink-soft); }
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.chip--yerinde { background: var(--color-forest); color: var(--color-forest-ink); }
.chip--yerinde svg { color: var(--color-brand); }
.chip--yonetilen { background: var(--color-accent-soft); color: var(--color-accent); }
.report__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.report__pick { padding: var(--space-4); border-radius: var(--radius-button); background: var(--color-accent-soft); }
.report__pick .report__ico { background: var(--color-brand); color: #ffffff; }
.report__pick .label { color: var(--color-accent); }
.report.is-in .report__bar::after { animation: report-bar 900ms var(--ease-out) both; }
.report.is-in .report__item, .report.is-in .report__pick { animation: report-in 420ms var(--ease-out) both; }
.report.is-in .report__bar + .report__item { animation-delay: 600ms; }
.report.is-in .report__item + .report__item { animation-delay: 800ms; }
.report.is-in .report__pick { animation-delay: 1100ms; }
.report.is-in .report__pick .report__ico { animation: report-pop 360ms var(--ease-out) 1350ms both; }
@keyframes report-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes report-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes report-pop { from { transform: scale(0.8); } to { transform: scale(1); } }
.report__foot { font-size: 13px; color: var(--color-ink-soft); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* two doors */
.doors { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: center; }

/* three doors (home, under the hero): three columns under a 1 px top rule, each door one link.
   Not a card grid: no surface, no frame, no button inside. Hover changes colour and underline only;
   no shadow, no lift. Rows are shared (subgrid) so headings and links line up although only two
   doors carry a tag. Tags are Design.md badges, not section labels. Stacked at <=768px.
   Above 768px the section drops its top padding and follows the hero at one section gap (the
   hero's bottom padding). The hero is shorter (48 px top and bottom) and the doors' heading runs on
   one line, so the door titles show in the first screen of a real 1440 laptop (viewport about 800 px). */
@media (min-width: 769px) {
  .kapilar-bolum { padding-top: 0; }
  .kapilar-bolum .section__head { max-width: none; margin-bottom: var(--space-6); }
}
.kapilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); }
.kapi {
  grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start;
  padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); color: inherit; text-decoration: none;
}
.kapi__etiket {
  grid-row: 1; justify-self: start; align-self: start; padding: 4px 8px; border-radius: var(--radius-badge);
  background: var(--color-surface-2); color: var(--color-ink-soft); font-size: var(--text-label); line-height: var(--leading-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600;
}
.kapi h3 { grid-row: 2; transition: color var(--motion-fast) var(--ease-out); }
.kapi p { grid-row: 3; color: var(--color-ink-soft); }
.kapi .more { grid-row: 4; justify-self: start; color: var(--color-accent); text-decoration-thickness: 1px; }
.kapi:is(:hover, :focus-visible) h3 { color: var(--color-accent); }
.kapi:is(:hover, :focus-visible) .more { text-decoration-line: underline; }
@media (max-width: 768px) {
  .kapilar { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .kapi { grid-row: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* process flow (home): 01 -> 02 -> 03 -> 04 in one row; a thin connector with an arrowhead runs from
   each step's number to the next. Stacked at <=1024px: the connector runs down, the arrow points
   at the next number. Plain HTML and CSS, no motion beyond .reveal; green only in the numbers. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.flow__step { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.flow__step > .step__num { display: flex; align-items: center; }
.flow__step h3 { font-size: 20px; }
.flow__step p { color: var(--color-ink-soft); }
@media (min-width: 1025px) {
  /* the line fills the rest of the number row and runs into the column gap; the arrowhead (a 45deg
     corner, moved after the line with order) stops half a gap before the next number */
  .flow__step:not(:last-child) > .step__num::after {
    content: ""; flex: 1 1 auto; min-width: var(--space-6); height: 1px; margin-left: var(--space-3); background: var(--color-border-strong);
  }
  .flow__step:not(:last-child) > .step__num::before {
    content: ""; order: 1; flex: none; width: 7px; height: 7px; margin: 0 calc(var(--space-3) - var(--space-6)) 0 -7px;
    border: solid var(--color-ink-soft); border-width: 1px 1px 0 0; transform: rotate(45deg);
  }
}
@media (max-width: 1024px) {
  .flow { grid-template-columns: minmax(0, var(--measure)); gap: 0; }
  .flow__step { padding: 0 0 var(--space-8) var(--space-6); }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step > .step__num { margin-left: calc(-1 * var(--space-6)); }
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute; left: 3px; top: calc(var(--text-label) * var(--leading-label) + var(--space-2));
    bottom: calc(var(--space-2) + 1px); width: 1px; background: var(--color-border-strong);
  }
  .flow__step:not(:last-child)::after {
    content: ""; position: absolute; left: 0; bottom: var(--space-2); width: 7px; height: 7px;
    border: solid var(--color-ink-soft); border-width: 0 1px 1px 0; transform: rotate(45deg);
  }
}

/* showcase band (home; replaced the two-card showcase): tinted like .band, one row on desktop: the
   live Operex panel; the section heading, the product name and its text; the Operex link above the
   link to the full showcase. The band itself never moves (no marquee). */
.vitrin-bant { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; align-items: center; gap: var(--space-8) var(--space-12); }
.vitrin-bant__metin { display: grid; gap: var(--space-3); max-width: var(--measure); }
.vitrin-bant__metin h2 { margin-bottom: var(--space-3); }
.vitrin-bant__metin p { color: var(--color-ink-soft); }
.vitrin-bant__eylem { display: grid; justify-items: start; gap: var(--space-4); }
@media (max-width: 1024px) {
  .vitrin-bant { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-6); align-items: end; }
  .vitrin-bant__panel { grid-row: 1 / span 2; align-self: center; }
  .vitrin-bant__eylem { grid-column: 2; align-self: start; }
}
@media (max-width: 768px) {
  .vitrin-bant { grid-template-columns: minmax(0, 1fr); }
  .vitrin-bant__panel { grid-row: auto; }
  .vitrin-bant__eylem { grid-column: auto; }
}

/* simple forest CTA band: starts on the page's left grid edge like the logo and headings;
   copy one measure wide on the left, the button on the right in the same row (stacked <=768px).
   Markup: label, h2, lead, then the button (the button spans those three rows). */
.cta--simple { padding-block: var(--space-24); }
.cta__simple {
  display: grid; grid-template-columns: minmax(0, var(--measure)) auto; justify-content: space-between;
  gap: var(--space-4) var(--space-16);
}
.cta__simple > :not(.btn) { grid-column: 1; }
.cta__simple > .btn { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
/* bands without a label have two rows; spanning three would push the button below the lead */
@media (min-width: 769px) { .cta__simple:not(:has(> .label)) > .btn { grid-row: 1 / span 2; } }
.cta .btn--primary { background: var(--color-forest-ink); color: var(--color-forest); }
.cta .btn--primary:hover { background: #ffffff; }
.cta .btn--secondary { color: var(--color-forest-ink); border-color: rgba(238, 243, 238, 0.4); }
.cta .btn--secondary:hover { background: rgba(238, 243, 238, 0.08); }

/* steps without images */
.step--plain { border-top: 1px solid var(--color-border-strong); padding-top: var(--space-4); }
.step--plain h3 { font-size: 20px; }

/* select in forms: shares the input rules above (.field input, .field select, .field textarea) */
.field__hint { font-size: 13px; color: var(--color-ink-soft); }

/* alternating tinted section */
.section--tint { background: var(--color-surface-2); }
.section--tint .card, .section--tint .model, .section--tint .box { border-color: var(--color-border-strong); }
.section--tint .principle { background: var(--color-surface); }

/* inline list of short facts */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; }
.facts svg { width: 22px; height: 22px; color: var(--color-brand); margin-top: 2px; }
.facts strong { font-weight: 500; }
.facts span { display: block; color: var(--color-ink-soft); font-size: var(--text-small); }

/* v4 responsive overrides: must stay after the component rules above */
@media (max-width: 1024px) {
  .page-hero__grid { grid-template-columns: 1fr 1fr; }
  .doors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .grid--2, .page-hero__grid, .doors, .qa__row, .models { grid-template-columns: 1fr; gap: var(--space-8); }
  .qa__row { gap: var(--space-2); }
  .page-hero { padding-block: var(--space-12) var(--space-8); }
  .page-hero__media { aspect-ratio: 16 / 10; }
  .principle { padding: var(--space-6); grid-template-columns: 1fr; }
  .principle p { font-size: 22px; }
  .report, .model { padding: var(--space-6); }
  .cta--simple { padding-block: var(--space-16); }
  .cta__simple { grid-template-columns: minmax(0, 1fr); }
  .cta__simple > .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-2); }
  .section__head--row { align-items: start; }
}
.page-hero__media--wide { aspect-ratio: 1600 / 627; align-self: center; }

/* ---------------------------------------------------------------- operex panel -- */
/* operex.com.tr'deki canlı mockup; Operex'in kendi paleti (orman yeşili, kiremit uyarı).
   Playfair yalnız bu panelde, yalnız panel olan sayfalarda iner. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(assets/fonts/playfair-display-normal-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; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(assets/fonts/playfair-display-normal-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; }
.media--panel { aspect-ratio: auto; }
/* kart içinde panel: yandaki 3:2 görselle aynı yükseklik; şube listesi kalan alanı doldurur */
.card__img.media--panel { aspect-ratio: 3 / 2; }
.card__img.media--panel .opx { height: 100%; }
.card__img.media--panel .opx__main { grid-template-rows: auto auto auto 1fr; }
.opx { --opx-green: #064e3b; --opx-warn: #ac3400; --opx-bg: #faf9f6; --opx-line: rgba(6, 78, 59, 0.10); --opx-muted: #404944;
  display: flex; background: var(--opx-bg); color: #1a1c1a; font-size: 10px; line-height: 1.3; container-type: inline-size; }
.opx__side { flex: 0 0 26%; max-width: 156px; display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--opx-green); }
.opx__logo { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 12px; color: #fff; padding: 0 6px 10px; margin-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.15); }
.opx__item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; color: rgba(255,255,255,.65); white-space: nowrap; }
.opx__item.is-active { background: rgba(255,255,255,.14); color: #fff; }
.opx__sample { margin-top: auto; padding: 4px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: rgba(255,255,255,.8); font-size: 10px; text-align: center; white-space: nowrap; }
.opx__item svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.opx__main { flex: 1; min-width: 0; padding: 10px; display: grid; gap: 8px; align-content: start; }
.opx__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.opx__stat, .opx__card, .opx__list { background: #fff; border: 1px solid var(--opx-line); border-radius: 6px; }
.opx__stat { padding: 8px; }
.opx__card { padding: 8px 10px; }
.opx__label { font-size: 9px; font-weight: 500; letter-spacing: .04em; color: var(--opx-muted); opacity: .85; margin-bottom: 3px; }
.opx__val { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 14px; color: var(--opx-green); font-variant-numeric: tabular-nums; }
.opx__val--warn { color: var(--opx-warn); }
.opx__chart { display: block; width: 100%; height: 40px; }
.opx__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.opx__row .opx__label { margin: 0; }
.opx__kpi { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 11px; color: var(--opx-green); }
.opx__track { height: 5px; border-radius: 999px; background: #eeeeea; overflow: hidden; }
.opx__fill { height: 100%; width: 87%; border-radius: 999px; background: linear-gradient(to right, var(--opx-warn), #22c55e); }
.opx__list { overflow: hidden; }
.opx__head { font-size: 9px; font-weight: 500; letter-spacing: .04em; color: var(--opx-muted); padding: 6px 10px; border-bottom: 1px solid #bfc9c3; }
.opx__branch { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.opx__branch + .opx__branch { border-top: 1px solid #eeeeea; }
.opx__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.opx__name { flex: 1; }
.opx__amt { color: var(--opx-muted); }
@container (min-width: 560px) { .opx { font-size: 12px; } .opx__label, .opx__head { font-size: 11px; } .opx__val { font-size: 18px; } .opx__kpi { font-size: 13px; } .opx__chart { height: 56px; } .opx__logo { font-size: 15px; } .opx__item svg { width: 13px; height: 13px; } }
/* giriş: satırlar sırayla belirir (bir kez, JS görünür olunca .is-live verir); reduced-motion global kuralla kapanır */
.opx[data-opx-panel]:not(.is-live) .opx__branch { opacity: 0; }
.opx.is-live .opx__branch { animation: opx-row 400ms var(--ease-out) both; }
.opx.is-live .opx__branch:nth-child(3) { animation-delay: 1000ms; }
.opx.is-live .opx__branch:nth-child(4) { animation-delay: 1300ms; }
.opx.is-live .opx__branch:nth-child(2) { animation-delay: 700ms; }
.opx.is-live .opx__branch:nth-child(5) { animation-delay: 1600ms; }
@keyframes opx-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .opx[data-opx-panel] .opx__branch { opacity: 1; } }

/* ---------------------------------------------------------------- erişim zinciri -- */
/* /erisim-guvenligi/ #mevzuat. Halkalar hero'daki modülün yan profili (gorseller/modul-dili.md 2):
   modül genişliğinin 1/12'si komşuya taşar, eklem 30° derzde birleşir. Yeşil modül "Talep ve onay":
   işaretlenene kadar zincire kenetlenmemiş, iki yanında boşluk; durum seçilince kenetlenir.
   "Eksik" işaretlenen modülün içi boşalır, çerçevesi kırmızı kesikli olur: zincirdeki boşluk. Kaydırma yok:
   çoğu halka eksikken sağlam olan kopmuş gibi okunuyordu. Renkler --m-* ile sürülür. */
.zincir[hidden], .zincir [hidden] { display: none; }
.zincir { display: grid; gap: var(--space-6); }
.zincir__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.zincir__secim { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-3); }
.zincir__etiket {
  padding: 0; font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft);
}
.zincir__cipler { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zincir__cip {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button); background: var(--color-surface); font-size: var(--text-small); line-height: 1.3; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.zincir__cip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.zincir__nokta {
  flex: none; width: 14px; height: 14px; border-radius: var(--radius-full); border: 1.5px solid var(--color-ink-soft);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.zincir__cip:hover { border-color: var(--color-ink-soft); }
.zincir__cip:has(input:checked) { border-color: var(--color-ink); }
.zincir__cip:has(input:checked) .zincir__nokta { border-color: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 7px var(--color-ink); }
.zincir__cip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.zincir__bilgi { font-size: var(--text-small); color: var(--color-ink-soft); max-width: var(--measure); min-height: 1.5em; }

/* modüller: masaüstünde tek satır; halka alt ızgarası modülü ve madde etiketlerini iki satıra dizer, panel üçüncü satırda */
/* giriş öncesi: halkalar görünene kadar saklı (zincir.js, yalnız hareket açıkken) */
.zincir.is-bekle .zincir__modul { opacity: 0; }
@media print { .zincir.is-bekle .zincir__modul { opacity: 1; } }
.zincir__halkalar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--space-3); padding-inline: 1.6%; }
.zincir__halka {
  --m-fill: var(--zincir-fill); --m-stroke: var(--zincir-stroke); --m-dash: none; --m-ink: var(--color-ink);
  --m-ic: var(--color-ink-soft); --m-ara: 0px;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0;
}
.zincir__modul {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-1);
  aspect-ratio: 24 / 13; align-self: stretch; min-width: 0; padding: var(--space-4) calc(100% / 12 + var(--space-3));
  background: none; border: 0; border-radius: 0; color: var(--m-ink); text-align: left; cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
.zincir__modul:focus-visible { outline-offset: 4px; z-index: 2; }
.zincir__sekil {
  position: absolute; top: 0; left: calc(-100% / 12 + var(--m-ara)); width: calc(100% + 100% / 6 - var(--m-ara) * 2); height: 100%;
  max-width: none; overflow: visible; pointer-events: none;
  transition: left var(--motion-base) var(--ease-out), width var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
.zincir__sekil--y { display: none; }
.zincir__dolgu { fill: var(--m-fill); stroke: none; transition: fill var(--motion-fast) var(--ease-out); }
.zincir__cerceve {
  fill: none; stroke: var(--m-stroke); stroke-width: 1.5; stroke-dasharray: var(--m-dash); stroke-linejoin: round;
  transition: stroke var(--motion-fast) var(--ease-out);
}
.zincir__ad, .zincir__durum { position: relative; z-index: 1; }
.zincir__ad { font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.zincir__durum { display: none; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: 600; line-height: 1.3; color: var(--m-ic); }
.zincir__durum svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.zincir__halka[data-durum] .zincir__durum { display: inline-flex; }
.zincir__maddeler {
  display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-1); margin: 0; list-style: none;
  padding: 0 calc(100% / 12 + var(--space-3) - 8px);
}
.zincir__maddeler li {
  padding: 2px 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-badge); background: var(--color-surface);
  font-size: 13px; line-height: 1.4; color: var(--color-ink-soft); white-space: nowrap;
}

/* durumlar: yeşil (karar bekliyor) < işaret < soluk < açık */
.zincir__halka--yesil:not([data-durum]) { --m-fill: var(--zincir-yesil); --m-stroke: var(--color-forest); --m-ink: var(--color-forest-ink); --m-ara: 5px; }
.zincir__halka[data-durum="var"] { --m-stroke: var(--color-ink); --m-ic: var(--color-accent); }
.zincir__halka[data-durum="eksik"] { --m-fill: transparent; --m-stroke: var(--color-danger); --m-dash: 6 4; --m-ic: var(--color-danger); }
.zincir__halka[data-durum="bilmiyorum"] { --m-dash: 2 4; }
.zincir__halka.is-soluk { --m-ink: var(--color-ink-soft); }
.zincir__halka.is-soluk .zincir__sekil { opacity: 0.4; }
.zincir__halka:has(> .zincir__modul[aria-expanded="true"]) { --m-fill: var(--color-primary); --m-stroke: var(--color-primary); --m-ink: var(--color-primary-ink); --m-ic: currentColor; --m-dash: none; --m-ara: 0px; }
.zincir__modul[aria-expanded="true"] .zincir__sekil { opacity: 1; }
@media (hover: hover) {
  .zincir__halka:not(:has(> .zincir__modul[aria-expanded="true"])) .zincir__modul:hover { --m-stroke: var(--color-ink); }
  .zincir__halka--yesil:not([data-durum]) .zincir__modul:hover { --m-stroke: var(--color-accent); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zincir__halka--yesil:not([data-durum]) { --m-stroke: var(--color-accent); } }
:root[data-theme="dark"] .zincir__halka--yesil:not([data-durum]) { --m-stroke: var(--color-accent); }

/* panel: açık halkanın ayrıntısı; masaüstünde zincirin altında, mobilde halkanın hemen altında */
.zincir__panel {
  grid-column: 1 / -1; grid-row: 3; display: grid; gap: var(--space-6); margin: var(--space-3) -1.653% 0; padding: var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  animation: zincir-ac var(--motion-base) var(--ease-out);
}
.zincir__panel-ad { font-size: var(--text-h3); }
.zincir__panel-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-12); }
.zincir__panel-izgara > div { display: grid; gap: var(--space-2); align-content: start; }
.zincir__metin { display: grid; gap: var(--space-2); font-size: var(--text-small); line-height: 1.6; max-width: var(--measure); }
.zincir__not { padding-left: var(--space-3); border-left: 2px solid var(--color-border-strong); color: var(--color-ink-soft); }
@keyframes zincir-ac { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.zincir__ozet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong);
}
.zincir__ozet-metin { flex: 1 1 320px; max-width: var(--measure); display: grid; gap: var(--space-1); }
.zincir__ozet [data-ozet] { font-weight: 500; }
.zincir__koru { font-size: 13px; line-height: var(--leading-label); color: var(--color-ink-soft); }
.zincir__ozet-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.zincir__sifirla {
  min-height: 44px; padding: 0 var(--space-2); background: none; border: 0; cursor: pointer;
  font-size: var(--text-small); color: var(--color-ink-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: color var(--motion-fast) var(--ease-out);
}
.zincir__sifirla:hover { color: var(--color-ink); }

/* JS'siz yedek ve tam metin: sayfa açılınca açık gelir, JS kapatır */
.zincir-ozet { margin-top: var(--space-12); border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border); }
.zincir-ozet summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4); font-family: var(--font-heading); font-weight: 500; font-size: 19px; letter-spacing: -0.01em;
}
.zincir-ozet summary::-webkit-details-marker { display: none; }
.zincir-ozet summary svg { flex: none; width: 20px; height: 20px; color: var(--color-ink-soft); transition: transform var(--motion-fast) var(--ease-out); }
.zincir-ozet[open] summary svg { transform: rotate(180deg); }
.zincir-ozet summary:hover { color: var(--color-accent); }
.zincir-ozet__govde { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); padding-bottom: var(--space-8); }
.zincir-ozet__sektor { display: grid; gap: var(--space-2); align-content: start; }
.zincir-ozet__sektor h3 { font-size: 19px; }
.zincir-ozet__sektor .soft, .zincir-ozet__sektor dd { font-size: var(--text-small); line-height: 1.55; }
.zincir-ozet__sektor dl { margin: 0; display: grid; gap: var(--space-1); }
.zincir-ozet__sektor dt {
  margin-top: var(--space-2); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 600;
}
.zincir-ozet__sektor dd { margin: 0; color: var(--color-ink-soft); }
.zincir-uyari { margin-top: var(--space-4); font-size: 13px; }

@media (max-width: 1024px) {
  .zincir__ad { font-size: 16px; }
}
/* mobil: zincir dikey bir raya döner; satırın solunda dikey modül, sağında ad ve durum.
   Satır yüksekliği sabit: eklem ancak eşit adımda birleşir (taşma = yüksekliğin 1/12'si). */
@media (max-width: 768px) {
  .zincir__halkalar { display: flex; flex-direction: column; row-gap: 0; padding: var(--space-2) 0; }
  .zincir__halka { display: block; position: relative; }
  .zincir__modul {
    width: 100%; height: 76px; aspect-ratio: auto; flex-direction: row; justify-content: space-between; align-items: center;
    gap: var(--space-3); padding: 0 0 0 72px;
  }
  .zincir__halka:has(> .zincir__maddeler:not([hidden])) .zincir__modul { align-items: flex-start; padding-top: 12px; }
  .zincir__sekil--x { display: none; }
  .zincir__sekil--y {
    display: block; left: 12px; width: 44px; top: calc(-100% / 12 + var(--m-ara)); height: calc(100% + 100% / 6 - var(--m-ara) * 2);
    transition: top var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
  }
  .zincir__halka--yesil:not([data-durum]) { --m-ara: 4px; }
  .zincir__ad { font-size: 17px; }
  /* açık satırda yalnız modül dolar; metin sayfa zemininde kaldığı için mürekkep rengine döner */
  .zincir__halka:has(> .zincir__modul[aria-expanded="true"]) .zincir__modul { color: var(--color-ink); }
  .zincir__halka:has(> .zincir__modul[aria-expanded="true"]) .zincir__ad { font-weight: 700; }
  .zincir__halka:has(> .zincir__modul[aria-expanded="true"]) .zincir__durum { color: var(--color-ink); }
  .zincir__halka--yesil:not([data-durum]) .zincir__modul { color: var(--color-ink); }
  .zincir__halka.is-soluk .zincir__modul { color: var(--color-ink-soft); }
  .zincir__maddeler { position: absolute; left: 72px; bottom: 12px; padding: 0; pointer-events: none; }
  .zincir__panel { margin-block: var(--space-4); padding: var(--space-6) var(--space-4); }
  .zincir__panel-izgara, .zincir-ozet__govde { grid-template-columns: 1fr; }
  .zincir__ozet .btn { white-space: normal; text-align: left; }
}