/* OTOMATİK ÜRETİLDİ: shared/tokens/build.mjs. Elle düzenleme; tokens.json değiştir. */
/* Koyu tema varsayılan; sistem açık temadaysa açık tema. data-theme ile zorlanır; [data-theme-preview] alt ağaç önizlemesi içindir (vitrin). */
:root {
  --font-ui: 'Onest', system-ui, sans-serif;
  --font-stamp: 'Barlow Condensed', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-stamp: 600;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  --line-height-body: 1.45;
  --line-height-heading: 1.25;
  --line-height-stamp: 1;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sheet: 24px;
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-key: 8px;
  --radius-full: 9999px;
  --size-touch-field: 56px;
  --size-touch-min: 44px;
  --size-control: 48px;
  --size-table-row: 44px;
  --icon-stroke: 1.75;
  --size-icon-sm: 16px;
  --size-icon-md: 24px;
  --size-icon-lg: 32px;
  --size-content-narrow: 480px;
  --size-content-readable: 720px;
  --size-content-wide: 1120px;
  --size-sheet-max: 520px;
  --size-skeleton-card: 96px;
  --size-sidebar: 248px;
  --size-menu-min: 160px;
  --size-menu-w-min: 240px;
  --size-menu-w-max: 320px;
  --size-palette: 560px;
  --size-palette-top: 96px;
  --size-key: 24px;
  --size-chip: 32px;
  --size-badge: 24px;
  --size-toast: 380px;
  --size-close: 28px;
  --size-tag-dot: 10px;
  --size-unread-dot: 8px;
  --size-indicator: 3px;
  --size-viewer-height: 560px;
  --distance-xs: 4px;
  --distance-sm: 8px;
  --distance-md: 32px;
  --border-width-hairline: 1px;
  --border-width-thin: 1.5px;
  --border-width-thick: 3px;
  --opacity-disabled: 0.45;
  --opacity-pending: 0.8;
  --opacity-placeholder: 0.3;
  --opacity-scrim: 0.72;
  --opacity-scrim-strong: 0.92;
  --opacity-scrim-viewer: 0.96;
  --opacity-watermark-bg: 0.72;
  --opacity-tint-faint: 0.08;
  --opacity-tint-subtle: 0.1;
  --opacity-tint-soft: 0.14;
  --opacity-tint-medium: 0.18;
  --opacity-tint-strong: 0.25;
  --viewfinder-corner: 32px;
  --viewfinder-corner-stroke: 3px;
  --viewfinder-corner-radius: 8px;
  --bp-xs: 520px; /* yalnızca bilgi: media query'de sabit değer kullan */
  --bp-sm: 560px; /* yalnızca bilgi: media query'de sabit değer kullan */
  --bp-md: 720px; /* yalnızca bilgi: media query'de sabit değer kullan */
  --bp-lg: 960px; /* yalnızca bilgi: media query'de sabit değer kullan */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-stamp-total: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-stamp-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --scale-stamp-from: 1.15;
  --scale-stamp-to: 1;
  --scale-lift: 1.03;
  --scale-shutter-press: 0.88;
  --rotation-stamp: -6deg;
}

:root {
  --color-bg: #0F1A2B;
  --color-surface: #172437;
  --color-surface-raised: #1F3048;
  --color-surface-hover: #1B2A40;
  --color-border: #2A3D57;
  --color-text: #EAF0F7;
  --color-text-muted: #93A4BA;
  --color-accent: #FF7A1A;
  --color-on-accent: #0F1A2B;
  --color-on-status-todo: #0F1A2B;
  --color-on-status-progress: #0F1A2B;
  --color-on-danger: #0F1A2B;
  --color-status-todo: #7C8DA6;
  --color-status-progress: #4C8DFF;
  --color-status-review: #F5B83D;
  --color-status-done: #2BB673;
  --color-danger: #F0524F;
  --color-danger-text: #FF6B68;
  --color-team-1: #A78BFA;
  --color-team-2: #2DD4BF;
  --color-team-3: #F472B6;
  --color-team-4: #A3D95B;
  --color-team-5: #C9A27E;
  --color-team-6: #4FC3D9;
  --color-team-7: #8C9EFF;
  --color-team-8: #D08CE8;
  --shadow-drag: 0px 12px 24px 0px rgba(0, 0, 0, 0.45);
  --shadow-raised: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #F4F6F9;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #EDF1F6;
    --color-border: #DCE2EA;
    --color-text: #142033;
    --color-text-muted: #5B6B80;
    --color-accent: #E8650A;
    --color-on-accent: #0F1A2B;
    --color-on-status-todo: #03070E;
    --color-on-status-progress: #FFFFFF;
    --color-on-danger: #FFFFFF;
    --color-status-todo: #6B7A90;
    --color-status-progress: #2F6FE4;
    --color-status-review: #C98A0B;
    --color-status-done: #1E9A5E;
    --color-danger: #D63B38;
    --color-danger-text: #C2302D;
    --color-team-1: #7C5CE0;
    --color-team-2: #0F9488;
    --color-team-3: #D6458B;
    --color-team-4: #5E8F1A;
    --color-team-5: #8F6A3F;
    --color-team-6: #0E86A3;
    --color-team-7: #4F5BD5;
    --color-team-8: #A24FC0;
    --shadow-raised: 0px 4px 16px 0px rgba(20, 32, 51, 0.1);
    --shadow-drag: 0px 12px 24px 0px rgba(20, 32, 51, 0.18);
    color-scheme: light;
  }
}

:root[data-theme="light"],
[data-theme-preview="light"] {
  --color-bg: #F4F6F9;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-hover: #EDF1F6;
  --color-border: #DCE2EA;
  --color-text: #142033;
  --color-text-muted: #5B6B80;
  --color-accent: #E8650A;
  --color-on-accent: #0F1A2B;
  --color-on-status-todo: #03070E;
  --color-on-status-progress: #FFFFFF;
  --color-on-danger: #FFFFFF;
  --color-status-todo: #6B7A90;
  --color-status-progress: #2F6FE4;
  --color-status-review: #C98A0B;
  --color-status-done: #1E9A5E;
  --color-danger: #D63B38;
  --color-danger-text: #C2302D;
  --color-team-1: #7C5CE0;
  --color-team-2: #0F9488;
  --color-team-3: #D6458B;
  --color-team-4: #5E8F1A;
  --color-team-5: #8F6A3F;
  --color-team-6: #0E86A3;
  --color-team-7: #4F5BD5;
  --color-team-8: #A24FC0;
  --shadow-raised: 0px 4px 16px 0px rgba(20, 32, 51, 0.1);
  --shadow-drag: 0px 12px 24px 0px rgba(20, 32, 51, 0.18);
  color-scheme: light;
}

:root[data-theme="dark"],
[data-theme-preview="dark"] {
  --color-bg: #0F1A2B;
  --color-surface: #172437;
  --color-surface-raised: #1F3048;
  --color-surface-hover: #1B2A40;
  --color-border: #2A3D57;
  --color-text: #EAF0F7;
  --color-text-muted: #93A4BA;
  --color-accent: #FF7A1A;
  --color-on-accent: #0F1A2B;
  --color-on-status-todo: #0F1A2B;
  --color-on-status-progress: #0F1A2B;
  --color-on-danger: #0F1A2B;
  --color-status-todo: #7C8DA6;
  --color-status-progress: #4C8DFF;
  --color-status-review: #F5B83D;
  --color-status-done: #2BB673;
  --color-danger: #F0524F;
  --color-danger-text: #FF6B68;
  --color-team-1: #A78BFA;
  --color-team-2: #2DD4BF;
  --color-team-3: #F472B6;
  --color-team-4: #A3D95B;
  --color-team-5: #C9A27E;
  --color-team-6: #4FC3D9;
  --color-team-7: #8C9EFF;
  --color-team-8: #D08CE8;
  --shadow-drag: 0px 12px 24px 0px rgba(0, 0, 0, 0.45);
  --shadow-raised: none;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 120ms;
    --duration-fast: 120ms;
    --duration-base: 120ms;
    --duration-slow: 120ms;
    --duration-stamp-total: 120ms;
  }
}

/* Ekiplio tanıtım sitesi. Renk, boşluk ve hareket değerleri yalnızca shared/tokens token'larından gelir
   (assets/tokens.css, build sırasında shared/tokens/dist'ten kopyalanır). Burada sabit renk yazılmaz. */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Yedek yazı tipleri: web yazı tipi gelene kadar yerleşimi sabit tutar (CLS). Değerler YAKLAŞIKTIR (Arial'a göre elle seçildi). */
@font-face {
  font-family: 'Onest Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 104%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 88%; ascent-override: 98%; descent-override: 20%; line-gap-override: 0%;
}

:root {
  --font-ui: 'Onest', 'Onest Fallback', system-ui, sans-serif;
  --font-stamp: 'Barlow Condensed', 'Barlow Fallback', system-ui, sans-serif;
  /* Site yerel boyutlar: token kümesinde karşılığı olmayan, yalnızca bu sitede kullanılan ölçüler. */
  --seal-size: 5rem;
  --line-min-height: 1.25rem;
  --lines-min-height: 3.75rem;
  --line-gap: var(--border-width-thick);
  /* Demo satırları: ilk gecikme + sıra aralığı; son satır gecikme + geçiş süresi <= --duration-stamp-total (700 ms). demo.js okur. */
  --icon-xl: 3.5rem;
  --how-no-w: 3.5rem;
  --tablet-cap-w: 24rem;
  --journey-dot: 2rem;
  --plan-bar-w: 20rem;
  --line-start: 180ms;
  --line-stagger: 140ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-7); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; }

a { color: var(--color-text); text-decoration-thickness: var(--border-width-hairline); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: var(--border-width-thin); }

:focus-visible {
  outline: var(--border-width-thick) solid var(--color-text);
  outline-offset: 2px;
  border-radius: var(--radius-key);
}
main:focus { outline: none; }

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

.skip {
  position: absolute; left: var(--space-4); top: var(--space-2);
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-input);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

.container {
  width: min(var(--size-content-wide), 100% - 2 * var(--space-4));
  margin-inline: auto;
}
.narrow { width: min(var(--size-content-readable), 100% - 2 * var(--space-4)); margin-inline: auto; }

h1, h2, h3 { line-height: var(--line-height-heading); margin: 0; font-weight: var(--font-weight-bold); letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
p { margin: 0; }
.muted { color: var(--color-text-muted); }
.lead { font-size: var(--font-size-lg); line-height: var(--line-height-body); color: var(--color-text-muted); max-width: 38rem; }

/* Üst bar */
.site-header { border-bottom: var(--border-width-hairline) solid var(--color-border); }
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
}
.brand { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.brand img { height: var(--size-icon-lg); width: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin-inline-start: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min);
  text-decoration: none; color: var(--color-text-muted); font-weight: var(--font-weight-medium);
}
.site-nav a:hover { color: var(--color-text); }
.site-nav a[aria-current='page'] { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--border-width-thick)) 0 var(--color-text); }
.lang-switch {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-stamp); font-weight: var(--font-weight-stamp);
  letter-spacing: 0.06em; font-size: var(--font-size-md);
  border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-full);
  padding-inline: var(--space-2);
}
.site-nav .lang-switch a { min-width: var(--size-touch-min); justify-content: center; }
.site-nav .lang-switch a[aria-current='true'] { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--border-width-thick)) 0 var(--color-text); }
.lang-sep { color: var(--color-text-muted); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.nav-menu { display: none; }
.nav-menu summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); cursor: pointer;
  list-style: none; font-weight: var(--font-weight-medium); color: var(--color-text);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: '+'; font-size: var(--font-size-xl); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.nav-menu[open] summary::after { content: '\2212'; }
.nav-menu-links { display: grid; padding-bottom: var(--space-2); }
.nav-menu-links a { overflow-wrap: anywhere; }

/* Düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-control); padding: 0 var(--space-5);
  border-radius: var(--radius-input); border: var(--border-width-thin) solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--color-surface-hover); }
.btn:active { background: var(--color-surface-hover); }
.btn[aria-disabled='true'] { color: var(--color-text-muted); cursor: default; }
.btn[aria-disabled='true']:hover { background: var(--color-surface); }
.btn-solid { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-solid:hover { background: var(--color-text); opacity: var(--opacity-pending); }
/* Sayfadaki tek turuncu odak: ispat demosunun birincil düğmesi */
.btn-stamp {
  min-height: var(--size-touch-field); width: 100%; font-size: var(--font-size-lg);
  background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent);
}
.btn-stamp:hover { background: var(--color-accent); opacity: var(--opacity-pending); }
.btn-stamp:active { transform: scale(var(--scale-shutter-press)); }
.btn-wide { width: 100%; }
.store-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store-note { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Ana sayfa: hero */
.hero { padding-block: var(--space-7); }
.hero .container { display: grid; gap: var(--space-6); align-items: center; }
.hero-copy { display: grid; gap: var(--space-5); align-content: start; }

/* Ispat demosu */
.demo {
  background: var(--color-surface); border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sheet); padding: var(--space-5); box-shadow: var(--shadow-raised);
  display: grid; gap: var(--space-4); width: 100%; max-width: var(--size-sheet-max); margin-inline: auto;
}
.demo-head { display: grid; gap: var(--space-2); }
.demo-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.job-no {
  font-family: var(--font-stamp); font-weight: var(--font-weight-stamp); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; font-size: var(--font-size-md);
  border: var(--border-width-thin) solid var(--color-text-muted); color: var(--color-text);
  border-radius: var(--radius-key); padding: 0 var(--space-2); line-height: var(--size-badge);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-chip); padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--color-surface-raised); border: var(--border-width-hairline) solid var(--color-border);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.chip::before {
  content: ''; width: var(--size-tag-dot); height: var(--size-tag-dot); border-radius: var(--radius-full);
  background: var(--chip-color, var(--color-status-todo)); transition: background var(--duration-base) var(--ease-standard);
}
.chip[data-status='todo'] { --chip-color: var(--color-status-todo); }
.chip[data-status='progress'] { --chip-color: var(--color-status-progress); }
.chip[data-status='done'] { --chip-color: var(--color-status-done); }
.demo-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.demo-customer { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.step {
  display: grid; grid-template-columns: var(--seal-size) 1fr; gap: var(--space-4); align-items: center;
  padding: var(--space-3); border-radius: var(--radius-input);
  transition: background var(--duration-base) var(--ease-standard);
}
.step[aria-current='step'] { background: var(--color-surface-hover); }
.seal {
  position: relative; width: var(--seal-size); height: var(--seal-size); border-radius: var(--radius-full);
  display: grid; place-items: center; text-align: center;
  border: var(--border-width-thin) dashed var(--color-border); color: var(--color-text-muted);
  font-family: var(--font-stamp); font-weight: var(--font-weight-stamp);
  font-size: var(--font-size-md); letter-spacing: 0.05em; line-height: var(--line-height-stamp);
}
.seal::before {
  content: ''; position: absolute; inset: var(--space-1); border-radius: var(--radius-full);
  border: var(--border-width-hairline) solid transparent;
}
.step[data-state='done'] .seal {
  border: var(--border-width-thick) solid var(--color-accent); color: var(--color-text); transform: rotate(-3deg);
}
.step[data-state='done'] .seal::before { border-color: var(--color-accent); }
.step.is-fresh .seal { animation: stamp-down var(--duration-slow) var(--ease-emphasized) both; }
@keyframes stamp-down {
  from { opacity: 0; transform: scale(var(--scale-stamp-from)) rotate(var(--rotation-stamp)); }
  55% { opacity: 1; transform: scale(0.96) rotate(-2deg); }
  to { opacity: 1; transform: scale(var(--scale-stamp-to)) rotate(-3deg); }
}
.step-body { position: relative; display: grid; gap: var(--space-1); min-width: 0; }
.step-name { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.lines { position: relative; display: grid; gap: var(--line-gap); font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.line { display: flex; align-items: center; gap: var(--space-2); min-height: var(--line-min-height); }
/* Demo yalnızca JS çalışınca (is-live) satırları gizler ve düğmeyi gösterir; JS yoksa tamamlanmış hali statik görünür. */
.demo.is-live .line { opacity: 0; transform: translateY(var(--distance-xs)); }
.demo.is-live .step[data-state='idle'] .line { visibility: hidden; }
.demo.is-live .line.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.pending { display: none; position: absolute; inset: 0 auto auto 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.demo.is-live .step[data-state='idle'] .pending { display: block; }
.demo.is-live .step[data-state='idle'] .lines { min-height: var(--lines-min-height); }
.demo:not(.is-live) .demo-actions { display: none; }

.demo-actions { display: grid; gap: var(--space-3); }
.demo-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Bölümler */
.section { padding-block: var(--space-7); }
.section + .section { border-top: var(--border-width-hairline) solid var(--color-border); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 40rem; }
.split { display: grid; gap: var(--space-6); }

/* Durum renkleri (mini kanban ve durum çizgileri) */
.seg-todo { --seg: var(--color-status-todo); }
.seg-progress { --seg: var(--color-status-progress); }
.seg-review { --seg: var(--color-status-review); }
.seg-done { --seg: var(--color-status-done); }

/* Roller: tanım listesi */
.roles { margin: 0; display: grid; }
.roles > div { display: grid; gap: var(--space-2); padding-block: var(--space-5); border-top: var(--border-width-hairline) solid var(--color-border); }
.roles > div:last-child { border-bottom: var(--border-width-hairline) solid var(--color-border); }
.roles dt { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.roles dd { margin: 0; color: var(--color-text-muted); max-width: 36rem; }

/* CTA bandı */
.cta { background: var(--color-surface); border-block: var(--border-width-hairline) solid var(--color-border); }
.cta .container { display: grid; gap: var(--space-5); padding-block: var(--space-7); }
.cta p { color: var(--color-text-muted); max-width: 36rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Özellikler */
.page-head { padding-block: var(--space-7) var(--space-6); display: grid; gap: var(--space-4); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); align-content: start; }
.points li { padding-inline-start: var(--space-5); position: relative; max-width: 36rem; }
.points li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.7em; width: var(--space-3); height: var(--border-width-thick); background: var(--color-text-muted); border-radius: var(--radius-full); }

/* Nasıl çalışır */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; }
.how-steps li { counter-increment: s; display: grid; grid-template-columns: var(--how-no-w) 1fr; gap: var(--space-4); padding-block: var(--space-5); border-top: var(--border-width-hairline) solid var(--color-border); }
.how-steps li::before {
  content: counter(s); font-family: var(--font-ui); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xxl); line-height: var(--line-height-heading); color: var(--color-text-muted);
}
.how-steps p { color: var(--color-text-muted); margin-top: var(--space-2); max-width: 36rem; }
.note { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); border: var(--border-width-hairline) solid var(--color-border); display: grid; gap: var(--space-2); max-width: 36rem; }
.note p { color: var(--color-text-muted); }

/* Yasal ve destek */
.prose { padding-bottom: var(--space-7); }
.prose h2 { font-size: var(--font-size-xl); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p, .prose li { max-width: 44rem; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--space-3); }
.prose ul { padding-inline-start: var(--space-5); margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.prose ol { padding-inline-start: var(--space-5); margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.updated { color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.faq { display: grid; margin-top: var(--space-4); }
.faq details { border-top: var(--border-width-hairline) solid var(--color-border); }
.faq details:last-child { border-bottom: var(--border-width-hairline) solid var(--color-border); }
.faq summary { cursor: pointer; padding-block: var(--space-4); font-weight: var(--font-weight-semibold); min-height: var(--size-touch-min); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: var(--font-size-xl); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: var(--space-4); color: var(--color-text-muted); max-width: 40rem; }
.template { margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-surface); border: var(--border-width-hairline) solid var(--color-border); font-family: var(--font-ui); font-size: var(--font-size-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.template-label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* Davet ve 404 */
.center-page { padding-block: var(--space-7); display: grid; gap: var(--space-5); justify-items: start; }
.invite-actions { display: grid; gap: var(--space-3); width: 100%; max-width: var(--size-content-narrow); margin-block: var(--space-5); }
.invite-code { margin-top: var(--space-3); }
.nf-en-text { margin-top: var(--space-2); }
.nf-en-action { margin-top: var(--space-3); }
/* Davet düğmesi tokensız ekiplio://davet/ açmasın: JS tokenı okuyunca (is-live) görünür. */
[data-invite]:not(.is-live) [data-open] { display: none; }

/* Alt bilgi */
.site-footer { border-top: var(--border-width-hairline) solid var(--color-border); margin-top: var(--space-7); }
/* Kapanış bandı ana içeriğin son öğesiyse alt bilgiyle arasında boşluk şeridi kalmaz */
main:has(> .cta:last-child) + .site-footer { margin-top: 0; }
.site-footer .container { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
.footer-brand { display: grid; gap: var(--space-3); align-content: start; }
.footer-brand img { height: var(--size-icon-lg); width: auto; }
.footer-cols { display: grid; gap: var(--space-5); }
.footer-cols h2 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); margin-bottom: var(--space-2); letter-spacing: 0; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-cols a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.copyright { font-size: var(--font-size-sm); color: var(--color-text-muted); }

@media (max-width: 520px) {
  .demo { padding: var(--space-4); }
}
@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .roles > div { grid-template-columns: 14rem 1fr; gap: var(--space-5); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer .container { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 960px) {
  .hero .container { grid-template-columns: 1fr 1.1fr; gap: var(--space-7); }
  .hero { padding-block: calc(var(--space-7) + var(--space-5)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-stamp { animation: none; opacity: 1; transform: rotate(-3deg); }
  .ld-progress span { animation: none; width: 100%; opacity: var(--opacity-pending); }
  .btn-primary:active { transform: none; }
  .step.is-fresh .seal { animation: fade-in var(--duration-base) var(--ease-standard) both; }
  .demo.is-live .line, .demo.is-live .line.is-on { transform: none; }
  .btn-stamp:active { transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.step-h { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

/* ---- M12-03: ana sayfa yeniden tasarımı ---- */
.btn-sm { min-height: var(--size-touch-min); padding: 0 var(--space-4); }
/* Bölüm başına tek turuncu birincil eylem (hero ve kapanış) */
.btn-primary {
  min-height: var(--size-touch-field); padding: 0 var(--space-6); font-size: var(--font-size-lg);
  background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent); opacity: var(--opacity-pending); }
.btn-primary:active { transform: scale(var(--scale-shutter-press)); }
.btn-quiet { min-height: var(--size-touch-min); background: transparent; border-color: var(--color-border); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.btn-quiet:hover { background: var(--color-surface); color: var(--color-text); }
.tag {
  display: inline-flex; align-items: center; min-height: var(--size-chip); padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: var(--border-width-hairline) solid var(--color-border);
  color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.icon-lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); stroke-width: var(--border-width-thin); }
.site-header a.btn-solid, .site-header a.btn-solid:hover { color: var(--color-bg); text-decoration: none; }
a.btn, a.btn:hover { text-decoration: none; }

/* Hero */
.hero-copy .cta-actions { margin-top: var(--space-2); }
.hero-stores { display: grid; gap: var(--space-2); }
.duo { position: relative; width: 100%; max-width: var(--frame-width-laptop); padding-bottom: var(--space-6); }
.duo-solo { padding-bottom: 0; }
.duo-phone { position: absolute; inset-inline-end: var(--space-2); bottom: 0; width: 28%; max-width: var(--frame-width-phone); }
.duo-phone .frame-phone { --frame-bezel-phone: var(--space-1); }
.hero-stage { padding-block: var(--space-5) var(--space-6); }
/* İspat damgası: sayfada tek kendiliğinden oynayan hareket; bir kez basılır (gecikme + süre < 700 ms) */
.hero-stamp {
  position: absolute; inset-inline-start: var(--space-3); bottom: var(--space-2);
  width: var(--seal-size); height: var(--seal-size); border-radius: var(--radius-full);
  display: grid; place-content: center; text-align: center; gap: var(--space-1);
  background: var(--color-bg); border: var(--border-width-thick) solid var(--color-accent); color: var(--color-text);
  font-family: var(--font-stamp); font-weight: var(--font-weight-stamp); line-height: var(--line-height-stamp);
  letter-spacing: 0.05em; transform: rotate(-3deg);
  animation: stamp-press var(--duration-slow) var(--ease-stamp-overshoot) var(--duration-base) both;
}
.hero-stamp::before { content: ''; position: absolute; inset: var(--space-1); border-radius: var(--radius-full); border: var(--border-width-hairline) solid var(--color-accent); }
.hero-stamp-word { font-size: var(--font-size-md); }
.hero-stamp-time { font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
@keyframes stamp-press {
  from { opacity: 0; transform: scale(var(--scale-stamp-from)) rotate(var(--rotation-stamp)); }
  to { opacity: 1; transform: scale(var(--scale-stamp-to)) rotate(-3deg); }
}

/* Sektör şeridi: logo değil, düz metin satırları */
.sector-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sector-list li { border-top: var(--border-width-hairline) solid var(--color-border); }
/* Sektör bağlantısı: tüm satır tıklanır (>= 44 px); hover ve odak nötr (metin rengi), turuncu değil */
.sector-link { display: grid; gap: var(--space-1); align-content: start; min-height: var(--size-touch-min); padding-block: var(--space-4); color: var(--color-text); text-decoration: none; }
.sector-name { text-decoration: underline; text-decoration-thickness: var(--border-width-hairline); text-underline-offset: 0.2em; }
.sector-link:hover .sector-name { text-decoration-thickness: var(--border-width-thin); }
.sector-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); }
.sector-line { color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 28rem; }

/* Önce / sonra */
.compare { display: grid; gap: var(--space-5); }
.compare-col { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-5); border-radius: var(--radius-card); }
.compare-before { border: var(--border-width-hairline) dashed var(--color-border); color: var(--color-text-muted); }
.compare-after { background: var(--color-surface); border: var(--border-width-thin) solid var(--color-text); }
.mark-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.mark-list li { display: grid; grid-template-columns: var(--size-icon-sm) 1fr; gap: var(--space-3); align-items: start; }
.mark-list .icon { margin-top: var(--space-1); }
.mark-before .icon { color: var(--color-text-muted); }
.mark-todo .mark-box { display: block; box-sizing: border-box; width: var(--size-icon-sm); height: var(--size-icon-sm); margin-top: var(--space-1); border: var(--border-width-thin) solid var(--color-text-muted); border-radius: var(--radius-key); }
.mark-after .icon { color: var(--color-status-done); }

/* Özellik vitrini: dönüşümlü düzen */
.showcase { display: grid; }
.show { display: grid; gap: var(--space-5); align-items: center; padding-block: var(--space-6); border-top: var(--border-width-hairline) solid var(--color-border); }
.show:first-child { border-top: 0; padding-top: 0; }
.show-copy { display: grid; gap: var(--space-3); align-content: center; min-width: 0; }
.show-copy p { max-width: 34rem; }
.show-media { min-width: 0; }
.roles-compact { margin-top: var(--space-3); }
.roles-compact > div { padding-block: var(--space-3); }
.roles-compact dt { font-size: var(--font-size-md); }
.phones { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.phone-step { display: grid; gap: var(--space-3); justify-items: center; min-width: 0; }
.phone-step figure { width: 100%; }
.step-cap { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: center; }
.step-no { font-family: var(--font-ui); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; border: var(--border-width-thin) solid var(--color-text-muted); border-radius: var(--radius-full); min-width: var(--size-badge); line-height: var(--size-badge); text-align: center; }
.docs { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; justify-items: center; }
.docs li { min-width: 0; width: 100%; display: grid; justify-items: center; }
@media (max-width: 520px) { .docs { grid-template-columns: 1fr; } .docs li + li { margin-top: var(--space-5); } }
.offline-panel { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); border: var(--border-width-hairline) dashed var(--color-border); background: var(--color-surface); justify-items: start; }
.offline-panel .icon-xl, .offline-panel > .icon { color: var(--color-text-muted); }
.clock-pair { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); width: 100%; }
.clock-pair li { display: grid; grid-template-columns: var(--size-icon-lg) 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-bg); border: var(--border-width-hairline) solid var(--color-border); }
.clock-pair div { display: grid; gap: var(--space-1); }
.clock-pair .icon { color: var(--color-text-muted); }
.more { margin-top: var(--space-5); }

/* Platformlar */
.platform-list { list-style: none; margin: 0; padding: 0; display: grid; }
.platform-list li { display: grid; grid-template-columns: var(--size-icon-lg) 1fr; gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-top: var(--border-width-hairline) solid var(--color-border); }
.platform-list li:last-child { border-bottom: var(--border-width-hairline) solid var(--color-border); }
.platform-list .icon { color: var(--color-text-muted); }
.platform-text { display: grid; gap: var(--space-1); min-width: 0; }
.platform-action { grid-column: 2; justify-self: start; }
.platform-list + .store-note { margin-top: var(--space-3); }

/* Fiyatlandırma: plan başına bir satır; ad solda, kullanıcı limiti ve oran çubuğu sağda. Kart ızgarası yok. */
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.plan { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-card); }
.plan-free { border: var(--border-width-thin) solid var(--color-text); background: var(--color-surface); }
.plan h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.plan-meter { display: grid; gap: var(--space-2); min-width: 0; }
.plan-limit { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
.plan-bar { display: block; width: 100%; max-width: var(--plan-bar-w); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-raised); overflow: hidden; }
.plan-bar i { display: block; height: 100%; width: calc(var(--plan-users) / 60 * 100%); background: var(--color-text); border-radius: var(--radius-full); }
.plan-fill-1 { --plan-users: 3; }
.plan-fill-2 { --plan-users: 10; }
.plan-fill-3 { --plan-users: 25; }
.plan-fill-4 { --plan-users: 60; }
.plan-note { font-size: var(--font-size-sm); }
.plan-notes { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 40rem; }
.price-note { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

/* SSS */
.faq-wide { max-width: var(--size-content-readable); margin-top: 0; }

/* Canlı demo diyaloğu */
.live-demo {
  width: min(var(--size-sheet-max), 100% - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); overflow: auto;
  padding: 0; border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-sheet);
  background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-raised);
}
.live-demo::backdrop { background: var(--color-bg); opacity: var(--opacity-scrim); }
.ld-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ld-head h2 { font-size: var(--font-size-xl); }
.ld-close { display: inline-grid; place-items: center; width: var(--size-touch-min); height: var(--size-touch-min); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text); cursor: pointer; }
.ld-close:hover { background: var(--color-surface-hover); }
.ld-roles { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ld-role {
  display: grid; gap: var(--space-1); width: 100%; min-height: var(--size-touch-field); padding: var(--space-3) var(--space-4); text-align: start;
  font: inherit; color: var(--color-text); background: var(--color-surface); border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-input); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
}
.ld-role:hover { background: var(--color-surface-hover); border-color: var(--color-text-muted); }
.ld-role-name { font-weight: var(--font-weight-semibold); }
.ld-role-text { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ld-state { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.ld-progress { height: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface); overflow: hidden; }
.ld-progress span { display: block; height: 100%; width: 40%; border-radius: var(--radius-full); background: var(--color-text); animation: ld-slide var(--duration-stamp-total) var(--ease-standard) infinite alternate; }
@keyframes ld-slide { from { transform: translateX(0); } to { transform: translateX(150%); } }
.ld-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
[data-ld-view]:focus { outline: none; }

@media (max-width: 520px) {
  .ld-body { padding: var(--space-4); }
  .ld-actions { flex-direction: column-reverse; }
  .ld-actions .btn, .cta-actions .btn { width: 100%; }
  .btn-primary { padding-inline: var(--space-4); }
  .site-header .container { gap: var(--space-2) var(--space-3); }
  .site-nav { gap: 0 var(--space-3); }
}
@media (min-width: 720px) {
  .sector-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
  .plan { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-5); align-items: center; }
  .plan h3 { grid-row: 1 / span 2; }
  .plan-note { grid-column: 2; }
  .compare { grid-template-columns: 1fr 1fr; }
  .platform-list li { grid-template-columns: var(--size-icon-lg) 1fr auto; }
  .platform-action { grid-column: auto; justify-self: end; }
}
@media (min-width: 960px) {
  .show { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .show:nth-child(even) .show-media { order: -1; }
}

/* Üst bar kırılım eşiği 880 px: altında TEK SATIR (marka | dil | Menü); bağlantılar ve demo düğmesi <details> menü panelinde */
@media (max-width: 880px) {
  .site-header { position: relative; }
  .site-header .container { flex-wrap: nowrap; gap: var(--space-3); }
  .site-nav { display: contents; }
  .nav-links, .header-cta { display: none; }
  .brand { flex: 0 0 auto; }
  .lang-switch { order: 1; margin-inline-start: auto; flex: 0 0 auto; }
  .nav-menu { display: block; order: 2; flex: 0 0 auto; }
  .nav-menu summary { padding-inline: var(--space-2); }
  .nav-menu-links {
    position: absolute; z-index: 20; inset-inline: 0; top: 100%;
    background: var(--color-bg); border-bottom: var(--border-width-hairline) solid var(--color-border);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .nav-menu-links .nav-menu-cta { width: 100%; margin-top: var(--space-3); }
}
/* 400 px ve altı (320 dahil): marka + dil + menü sığsın diye menü yalnızca simge (metin ekran okuyucuya kalır), hedef 44x44 */
@media (max-width: 400px) {
  .site-header .container { gap: var(--space-2); }
  .nav-menu summary { min-width: var(--size-touch-min); justify-content: center; padding-inline: 0; }
  .nav-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 881-1000 px: tek satır sığsın diye boşluklar daralır (CTA ikinci satıra düşmez) */
@media (min-width: 881px) {
  .site-header .container, .site-nav, .nav-links { flex-wrap: nowrap; }
  .header-cta { flex: 0 0 auto; white-space: nowrap; }
  .nav-links a { white-space: nowrap; }
}
@media (min-width: 881px) and (max-width: 1000px) {
  .site-header .container { gap: var(--space-3); }
  .site-nav, .nav-links { gap: var(--space-1) var(--space-3); }
  .header-cta { padding-inline: var(--space-3); }
}

/* ---- M12-04: sektör sayfaları ---- */
.sector-hero .container { padding-top: var(--space-4); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.crumbs li + li::before { content: '/' / ''; margin-inline: var(--space-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); color: var(--color-text-muted); }
.sector-hero .page-head { padding-block: var(--space-4) var(--space-6); }
.sector-hero .cta-actions { margin-top: var(--space-2); }
.job-sample { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); border: var(--border-width-hairline) solid var(--color-border); min-width: 0; }
.job-sample h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.job-sample-head { display: flex; align-items: center; gap: var(--space-3); }
.job-meta { margin: 0; display: grid; gap: var(--space-3); }
.job-meta > div { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-width-hairline) solid var(--color-border); }
.job-meta dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.job-meta dd { margin: 0; font-weight: var(--font-weight-medium); }
.job-list-label { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.settings dd { display: grid; gap: var(--space-1); }
.settings dd strong { font-weight: var(--font-weight-semibold); color: var(--color-text); font-size: var(--font-size-md); }
.settings dd .muted { font-size: var(--font-size-sm); }
.settings-note { margin-top: var(--space-4); max-width: 36rem; }
.setting-reason { max-width: 36rem; }
.report-sub { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.doc-caption { margin-top: var(--space-3); font-size: var(--font-size-sm); text-align: center; }
.section .split > div { min-width: 0; }
@media (min-width: 720px) {
  .job-meta { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}

/* ---- M12-05: Özellikler ve Nasıl çalışır ---- */
.toc ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.toc a {
  display: inline-flex; align-items: center; min-height: var(--size-touch-min); padding-inline: var(--space-4);
  border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-full);
  color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none;
}
.toc a:hover { color: var(--color-text); border-color: var(--color-text-muted); background: var(--color-surface); }
.show-copy h2 { font-size: var(--font-size-xl); }
.show-copy .points { margin-top: var(--space-2); }
.show-copy > p > a { font-weight: var(--font-weight-semibold); }
.media-stack { display: grid; gap: var(--space-5); min-width: 0; }
.media-cap { display: grid; gap: var(--space-2); min-width: 0; }
.media-cap .doc-caption { margin-top: 0; }
.docs-one { grid-template-columns: 1fr; }
.cta-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.cta-links a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }

/* Nasıl çalışır: adım satırı = numara + metin + ekran */
.flow li { align-items: start; }
.flow-body { display: grid; gap: var(--space-5); min-width: 0; }
.flow-copy { display: grid; gap: var(--space-2); align-content: start; }
.flow-copy p { margin-top: 0; }
.flow-media { min-width: 0; }
.step-facts { margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.step-facts > div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.step-facts dt { color: var(--color-text-muted); min-width: var(--how-no-w); }
.step-facts dd { margin: 0; font-weight: var(--font-weight-medium); }

/* Bir işin yolculuğu: nötr numara ve çizgi (durum rengi yeniden kullanılmaz) */
.journey { list-style: none; margin: 0; padding: 0; counter-reset: j; min-width: 0; }
.journey li { counter-increment: j; position: relative; display: grid; grid-template-columns: var(--journey-dot) minmax(0, 1fr); column-gap: var(--space-4); padding-bottom: var(--space-5); }
.journey li:last-child { padding-bottom: 0; }
.journey li::before {
  content: counter(j); position: relative; z-index: 1; display: grid; place-items: center;
  width: var(--journey-dot); height: var(--journey-dot); border-radius: var(--radius-full);
  border: var(--border-width-thin) solid var(--color-text-muted); background: var(--color-bg); color: var(--color-text);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
}
.journey li:not(:last-child)::after {
  content: ''; position: absolute; top: var(--journey-dot); bottom: 0;
  inset-inline-start: calc(var(--journey-dot) / 2); width: var(--border-width-hairline); background: var(--color-border);
}
.journey p { margin-top: var(--space-1); color: var(--color-text-muted); max-width: 36rem; }
@media (max-width: 640px) {
  .flow li { grid-template-columns: 1fr; gap: var(--space-2); }
}
@media (min-width: 960px) {
  .flow-body { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
  .show.show-text { grid-template-columns: 1fr; }
  .media-cap .frame-tablet { max-width: var(--tablet-cap-w); }
}

/* Cihaz çerçeveleri ve marka zemini. Sade, modern CSS; fotoğraf gerçekçi mockup değildir.
   Renk/boşluk/yarıçap yalnızca token'lardan (assets/tokens.css) gelir; burada sabit hex yoktur.
   --frame-width-* değerleri shots.mjs FRAME_WIDTHS ile aynı tutulur (sizes türetilir; test doğrular).
   Ekran içeriği <picture>; en/boy oranı img width/height ile CLS'sizdir. */

:root {
  --frame-bezel: var(--space-2);
  --frame-bezel-phone: var(--space-2);
  --frame-radius-phone: var(--radius-sheet);
  --frame-radius-tablet: var(--radius-card);
  --frame-radius-laptop: var(--radius-input);
  --frame-radius-screen: var(--radius-input);
  --frame-base-height: var(--space-2);
  --frame-line: var(--border-width-thin);
  --frame-width-phone: 17rem;
  --frame-width-tablet: 36rem;
  --frame-width-laptop: 60rem;
  --frame-width-doc: 25rem;
}

/* Marka zemini: koyu tema yüzeyi + çok ince ızgara çizgisi (süs gradyanı/ışıma yok). */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--color-text) calc(var(--opacity-tint-faint) * 100%), transparent) var(--border-width-hairline), transparent var(--border-width-hairline)),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-text) calc(var(--opacity-tint-faint) * 100%), transparent) var(--border-width-hairline), transparent var(--border-width-hairline));
  background-size: var(--space-6) var(--space-6), var(--space-6) var(--space-6);
  border: var(--border-width-hairline) solid var(--color-border);
}
.stage > * { max-width: 100%; }

[class^='frame-'], [class*=' frame-'] { margin: 0; width: 100%; }
.frame-screen { overflow: hidden; background: var(--color-surface); line-height: 0; }
.frame-screen picture, .frame-screen img { display: block; width: 100%; height: auto; }

/* Telefon: ince yuvarlatılmış çerçeve, çentiksiz. */
.frame-phone {
  max-width: var(--frame-width-phone);
  padding: var(--frame-bezel-phone);
  border: var(--frame-line) solid var(--color-border);
  border-radius: var(--frame-radius-phone);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}
.frame-phone .frame-screen { border-radius: calc(var(--frame-radius-phone) - var(--frame-bezel-phone)); }

/* Tablet: biraz daha geniş, daha küçük yarıçap. */
.frame-tablet {
  max-width: var(--frame-width-tablet);
  padding: var(--frame-bezel);
  border: var(--frame-line) solid var(--color-border);
  border-radius: var(--frame-radius-tablet);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}
.frame-tablet .frame-screen { border-radius: calc(var(--frame-radius-tablet) - var(--frame-bezel)); }

/* Dizüstü: ekran + ince alt taban çizgisi. */
.frame-laptop { max-width: var(--frame-width-laptop); }
.frame-laptop .frame-screen {
  padding: 0;
  border: var(--frame-bezel) solid var(--color-surface-raised);
  outline: var(--frame-line) solid var(--color-border);
  border-radius: var(--frame-radius-laptop) var(--frame-radius-laptop) 0 0;
  box-shadow: var(--shadow-raised);
}
.frame-laptop::after {
  content: '';
  display: block;
  height: var(--frame-base-height);
  margin-inline: calc(-1 * var(--space-2));
  border: var(--frame-line) solid var(--color-border);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  background: var(--color-surface-raised);
}

/* PDF tutanağı: kâğıt gölgeli sayfa (tema fark etmez, içerik açık kâğıttır). */
.frame-doc {
  max-width: var(--frame-width-doc);
  border: var(--frame-line) solid var(--color-border);
  border-radius: var(--radius-key);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}
.frame-doc .frame-screen { border-radius: inherit; }

@media (max-width: 20rem) {
  .stage { padding: var(--space-4) var(--space-2); }
}