/* otomatik üretildi, elle düzenleme
   
   Kaynak : packages/tokens/src/*.json
   Üreten : packages/tokens/arac/uret.mjs
   Komut  : npm run tokens
   
   Değer değiştirmek için kaynak JSON düzenlenir, bu dosya değil.
   Bu dosya commit'e dahildir: Cocos derlemesi Windows'ta, Flutter
   derlemesi Node olmadan koşuyor ve üretilmişi hazır bulmalı.

   Ürün: mscl

   K1 · Varsayılan sistem tercihi, tercih yoksa açık tema.
        :root her zaman açık; koyu tema medya sorgusu ya da
        data-tema="koyu" ile gelir, data-tema="acik" geri döner.

   Semantic katmanın tamamı, artı semantic karşılığı olmayan primitive
   ölçekler (tipografi, ikon, çizgi, boşluk). Renk ve yarıçap primitifleri
   YOK: değerler çözülmüş yazıldığı için ara değişkene gerek kalmıyor ve
   bileşen primitive okumamış oluyor. Katman kuralı böylece bu dosyanın
   içeriğiyle zorlanıyor, belgede kalmıyor.
*/

:root {
  /* tema taşımayan ölçek ve roller */
  --border-width-focus: 2px;
  --border-width-hairline: 1px;
  --breakpoint-lg: 900px;
  --breakpoint-md: 640px;
  --breakpoint-sm: 480px;
  --breakpoint-xl: 1024px;
  --font-family-display: "Space Grotesk", sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;
  --font-family-text: "DM Sans", system-ui, sans-serif;
  --font-line-height-normal: 1.4;
  --font-line-height-relaxed: 1.6;
  --font-line-height-snug: 1.2;
  --font-line-height-tight: 1.08;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-44: 44px;
  --font-tracking-none: 0em;
  --font-tracking-tight: -0.02em;
  --font-tracking-tighter: -0.03em;
  --font-tracking-tightest: -0.035em;
  --font-tracking-wide: 0.02em;
  --font-tracking-wider: 0.06em;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-32: 32px;
  --icon-stroke-lg: 2;
  --icon-stroke-md: 1.75;
  --icon-stroke-sm: 1.5;
  --layout-wrap: 46rem;
  --layout-wrap-wide: 75rem;
  --shape-card: 12px;
  --shape-control: 12px;
  --shape-fab: 16px;
  --shape-field: 8px;
  --shape-inner: 4px;
  --shape-pill: 999px;
  --shape-sheet: 24px;
  --shape-toast: 8px;
  --size-control-fab: 56px;
  --size-control-md: 48px;
  --size-control-sm: 40px;
  --size-focus-ring-offset: 2px;
  --size-touch-min: 48px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-2: 2px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-4: 4px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-6: 6px;
  --space-64: 64px;
  --space-8: 8px;
  --space-80: 80px;
  --space-screen-gutter: 16px;
  --state-disabled-container: 0.12;
  --state-disabled-content: 0.38;
  --state-dragged: 0.16;
  --state-focus: 0.1;
  --state-hover: 0.08;
  --state-pressed: 0.1;

  /* ürün ikonları — tema taşımaz, ikon setiyle aynı */
  --color-product-ishesap-icon-bg: #C05427;
  --color-product-ishesap-icon-mark: #FFFFFF;
  --color-product-mesai-icon-bg: #0C7B5D;
  --color-product-mesai-icon-mark: #FFFFFF;
  --color-product-mesai-icon-mark-soft: #98E1C7;
  --color-product-fatura-icon-bg: #4753C4;
  --color-product-fatura-icon-mark: #FFFFFF;
  --color-product-fatura-icon-mark-soft: #BAC8FA;
  --color-product-harfyolu-icon-bg: #AF3B68;
  --color-product-harfyolu-icon-mark: #FFFFFF;
  --color-product-harfyolu-icon-mark-soft: #F4B9D3;
  --color-product-harfyolu-icon-mark-accent: #E7BF43;
  --color-product-mangala-icon-bg: #8338A8;
  --color-product-mangala-icon-pit: #52256A;
  --color-product-mangala-icon-stone: #F9F0FC;
  --color-product-gazete-icon-bg: #5C7830;
  --color-product-gazete-icon-mark: #FFFFFF;
  --color-product-gazete-icon-mark-soft: #C2E09B;
  --color-product-sitereport-icon-bg: #6A45BB;
  --color-product-sitereport-icon-mark: #FFFFFF;
  --color-product-sitereport-icon-mark-soft: #CDC3FA;
  --color-product-sitereport-icon-mark-accent: #E7BF43;

  /* açık tema */
  --color-bg-accent: #0E1014;
  --color-bg-accent-subtle: #F6F7F9;
  --color-bg-canvas: #FFFFFF;
  --color-bg-inverse: #0E1014;
  --color-bg-scrim: #0E101473;
  --color-bg-surface: #F6F7F9;
  --color-bg-surface-high: #ECEEF1;
  --color-bg-surface-raised: #FFFFFF;
  --color-border-accent: #0E1014;
  --color-border-default: #DCE0E5;
  --color-border-focus: #1B63A3;
  --color-border-strong: #767E8A;
  --color-feedback-error: #AC3025;
  --color-feedback-error-surface: #FDEEEC;
  --color-feedback-info: #1B63A3;
  --color-feedback-info-surface: #ECF5FD;
  --color-feedback-on-error-surface: #8B271E;
  --color-feedback-on-info-surface: #175085;
  --color-feedback-on-success-surface: #0A614A;
  --color-feedback-on-warning-surface: #55420B;
  --color-feedback-success: #0C7B5D;
  --color-feedback-success-surface: #E9F8F2;
  --color-feedback-warning: #6F560D;
  --color-feedback-warning-surface: #FDF6E3;
  --color-text-accent: #0E1014;
  --color-text-disabled: #9AA1AC;
  --color-text-link: #1B63A3;
  --color-text-muted: #646B76;
  --color-text-on-accent: #FFFFFF;
  --color-text-on-accent-subtle: #0E1014;
  --color-text-on-inverse: #EDEFF2;
  --color-text-primary: #0E1014;
  --color-text-secondary: #5A616B;
  --elevation-1: 0px 1px 2px 0px #0E101414;
  --elevation-2: 0px 4px 12px 0px #0E10141A;
  --elevation-3: 0px 12px 28px 0px #0E101424;
  /* ürün vurguları — stüdyo sitesi dördünü birlikte gösteriyor */
  --color-product-ishesap-accent: #C05427;
  --color-product-mesai-accent: #0C7B5D;
  --color-product-fatura-accent: #4753C4;
  --color-product-harfyolu-accent: #AF3B68;
  --color-product-mangala-accent: #8338A8;
  --color-product-gazete-accent: #5C7830;
  --color-product-sitereport-accent: #6A45BB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-accent: #EDEFF2;
    --color-bg-accent-subtle: #15181D;
    --color-bg-canvas: #0E1014;
    --color-bg-inverse: #EDEFF2;
    --color-bg-scrim: #0E1014A6;
    --color-bg-surface: #15181D;
    --color-bg-surface-high: #2A2F37;
    --color-bg-surface-raised: #1C2027;
    --color-border-accent: #EDEFF2;
    --color-border-default: #2A2F37;
    --color-border-focus: #74B6EB;
    --color-border-strong: #767E8A;
    --color-feedback-error: #EE8479;
    --color-feedback-error-surface: #2F0D0A;
    --color-feedback-info: #74B6EB;
    --color-feedback-info-surface: #0B1C2F;
    --color-feedback-on-error-surface: #F6B0A8;
    --color-feedback-on-info-surface: #A9D2F4;
    --color-feedback-on-success-surface: #98E1C7;
    --color-feedback-on-warning-surface: #F3D77F;
    --color-feedback-success: #5FCDA8;
    --color-feedback-success-surface: #05231B;
    --color-feedback-warning: #E7BF43;
    --color-feedback-warning-surface: #241C05;
    --color-text-accent: #EDEFF2;
    --color-text-disabled: #5A616B;
    --color-text-link: #74B6EB;
    --color-text-muted: #9098A3;
    --color-text-on-accent: #0E1014;
    --color-text-on-accent-subtle: #EDEFF2;
    --color-text-on-inverse: #0E1014;
    --color-text-primary: #EDEFF2;
    --color-text-secondary: #9AA1AC;
    --elevation-1: none;
    --elevation-2: none;
    --elevation-3: none;
    /* ürün vurguları — stüdyo sitesi dördünü birlikte gösteriyor */
    --color-product-ishesap-accent: #F3A176;
    --color-product-mesai-accent: #5FCDA8;
    --color-product-fatura-accent: #96A9F5;
    --color-product-harfyolu-accent: #EB92B8;
    --color-product-mangala-accent: #D29AE8;
    --color-product-gazete-accent: #A5CC6D;
    --color-product-sitereport-accent: #B3A2F5;
  }
}

[data-tema="koyu"] {
  --color-bg-accent: #EDEFF2;
  --color-bg-accent-subtle: #15181D;
  --color-bg-canvas: #0E1014;
  --color-bg-inverse: #EDEFF2;
  --color-bg-scrim: #0E1014A6;
  --color-bg-surface: #15181D;
  --color-bg-surface-high: #2A2F37;
  --color-bg-surface-raised: #1C2027;
  --color-border-accent: #EDEFF2;
  --color-border-default: #2A2F37;
  --color-border-focus: #74B6EB;
  --color-border-strong: #767E8A;
  --color-feedback-error: #EE8479;
  --color-feedback-error-surface: #2F0D0A;
  --color-feedback-info: #74B6EB;
  --color-feedback-info-surface: #0B1C2F;
  --color-feedback-on-error-surface: #F6B0A8;
  --color-feedback-on-info-surface: #A9D2F4;
  --color-feedback-on-success-surface: #98E1C7;
  --color-feedback-on-warning-surface: #F3D77F;
  --color-feedback-success: #5FCDA8;
  --color-feedback-success-surface: #05231B;
  --color-feedback-warning: #E7BF43;
  --color-feedback-warning-surface: #241C05;
  --color-text-accent: #EDEFF2;
  --color-text-disabled: #5A616B;
  --color-text-link: #74B6EB;
  --color-text-muted: #9098A3;
  --color-text-on-accent: #0E1014;
  --color-text-on-accent-subtle: #EDEFF2;
  --color-text-on-inverse: #0E1014;
  --color-text-primary: #EDEFF2;
  --color-text-secondary: #9AA1AC;
  --elevation-1: none;
  --elevation-2: none;
  --elevation-3: none;
  /* ürün vurguları — stüdyo sitesi dördünü birlikte gösteriyor */
  --color-product-ishesap-accent: #F3A176;
  --color-product-mesai-accent: #5FCDA8;
  --color-product-fatura-accent: #96A9F5;
  --color-product-harfyolu-accent: #EB92B8;
  --color-product-mangala-accent: #D29AE8;
  --color-product-gazete-accent: #A5CC6D;
  --color-product-sitereport-accent: #B3A2F5;
}

[data-tema="acik"] {
  --color-bg-accent: #0E1014;
  --color-bg-accent-subtle: #F6F7F9;
  --color-bg-canvas: #FFFFFF;
  --color-bg-inverse: #0E1014;
  --color-bg-scrim: #0E101473;
  --color-bg-surface: #F6F7F9;
  --color-bg-surface-high: #ECEEF1;
  --color-bg-surface-raised: #FFFFFF;
  --color-border-accent: #0E1014;
  --color-border-default: #DCE0E5;
  --color-border-focus: #1B63A3;
  --color-border-strong: #767E8A;
  --color-feedback-error: #AC3025;
  --color-feedback-error-surface: #FDEEEC;
  --color-feedback-info: #1B63A3;
  --color-feedback-info-surface: #ECF5FD;
  --color-feedback-on-error-surface: #8B271E;
  --color-feedback-on-info-surface: #175085;
  --color-feedback-on-success-surface: #0A614A;
  --color-feedback-on-warning-surface: #55420B;
  --color-feedback-success: #0C7B5D;
  --color-feedback-success-surface: #E9F8F2;
  --color-feedback-warning: #6F560D;
  --color-feedback-warning-surface: #FDF6E3;
  --color-text-accent: #0E1014;
  --color-text-disabled: #9AA1AC;
  --color-text-link: #1B63A3;
  --color-text-muted: #646B76;
  --color-text-on-accent: #FFFFFF;
  --color-text-on-accent-subtle: #0E1014;
  --color-text-on-inverse: #EDEFF2;
  --color-text-primary: #0E1014;
  --color-text-secondary: #5A616B;
  --elevation-1: 0px 1px 2px 0px #0E101414;
  --elevation-2: 0px 4px 12px 0px #0E10141A;
  --elevation-3: 0px 12px 28px 0px #0E101424;
  /* ürün vurguları — stüdyo sitesi dördünü birlikte gösteriyor */
  --color-product-ishesap-accent: #C05427;
  --color-product-mesai-accent: #0C7B5D;
  --color-product-fatura-accent: #4753C4;
  --color-product-harfyolu-accent: #AF3B68;
  --color-product-mangala-accent: #8338A8;
  --color-product-gazete-accent: #5C7830;
  --color-product-sitereport-accent: #6A45BB;
}

/*
 * Styles of the outreach explanation page. Every colour, size, space and font
 * is a token from packages/tokens/dist/mscl.css, which build.mjs puts in front
 * of this file; no hex, rgb or px value is written here. The brand fonts are
 * not loaded on purpose (no font file, no extra request): the page falls back
 * to the system font that the token's stack names.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-size-16);
  line-height: var(--font-line-height-relaxed);
}

.wrap {
  max-width: var(--layout-wrap);
  margin: 0 auto;
  padding: var(--space-32) var(--space-screen-gutter) var(--space-48);
}

.eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
}

h1 {
  margin: 0 0 var(--space-16);
  font-family: var(--font-family-display);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-tight);
  letter-spacing: var(--font-tracking-tight);
}

h2 {
  margin: 0 0 var(--space-8);
  font-family: var(--font-family-display);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-snug);
}

p {
  margin: 0 0 var(--space-12);
}

.lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-17);
}

.note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
}

a {
  color: var(--color-text-link);
  text-underline-offset: var(--space-4);
}

a:focus-visible {
  outline: var(--border-width-focus) solid var(--color-border-focus);
  outline-offset: var(--size-focus-ring-offset);
}

.stop {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch-min);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--shape-control);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  text-decoration: none;
}

.stop:hover {
  text-decoration: underline;
}

section {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-border-default);
}

footer {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: var(--border-width-hairline) solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
}