/* ==========================================================================
   DutaLab Ortak Tasarım Sistemi · tokens.css · v2 (22.10.2026)
   Tek dosya, derleme yok. Tüm yerel + online sistemler bunu kullanır.
   Tema:  <html data-theme="light|dark">   (yoksa sistem tercihine uyar)
   Marka: <html data-brand="dutalab|ajans"> (müşteriye açık ajans ekranları: ajans)
   ========================================================================== */

/* ---- Fontlar: yerel dosya (internetsiz çalışır). fonts/ klasörü pakete dahil. ---- */
/* latin + latin-ext (Türkçe ğ ş ı İ ve ₺ latin-ext içinde). Lisans: SIL OFL 1.1, fonts/ klasöründe. */
@font-face { font-family: "Lexend"; src: url("fonts/lexend-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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: "Lexend"; src: url("fonts/lexend-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; 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: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; 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; }

/* ---- Sabitler (tema bağımsız) ---- */
:root {
  --font-display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Tip ölçeği (px) */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-34: 34px; --fs-40: 40px;
  --lh-tight: 1.2; --lh-ui: 1.5;

  /* 4/8 ızgarası */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --radius-pill: 999px;
  --dur: 160ms; --ease: cubic-bezier(.2,.7,.2,1);
  --focus-ring: 0 0 0 3px var(--focus);

  /* Ölçüler */
  --topbar-h: 60px; --sidebar-w: 232px; --content-max: 1280px;
  --control-h: 40px; --control-h-sm: 32px;
}

/* ---- Açık tema (operasyon) — varsayılan ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F2F4FC;
  --surface: #FFFFFF;
  --surface-2: #F7F8FD;
  --surface-3: #EEF1F8;          /* satır ayırıcı, ilerleme izi */
  --border: #DEE3F2;
  --border-strong: #C9D0E4;
  --ink: #10162B;                /* 16.9:1 */
  --ink-2: #3C4560;              /* 9.6:1 */
  --muted: #5B6585;              /* 5.6:1 — en küçük metin bile AA */
  --accent: #3E63E0;             /* birincil eylem, link, seçili */
  --accent-strong: #2C49B3;      /* hover, accent zemin üstü metin */
  --accent-bg: #E7ECFB;          /* seçili satır/sekme, bilgi rozeti */
  --on-accent: #FAFBFF;
  --good: #166F56;    --good-bg: #E7F6F0;
  --warning: #9A5A16; --warning-bg: #FBF0E6; --warning-line: #D08A3E;
  --critical: #B5371F; --critical-bg: #FBEAE7;
  --neutral-bg: #EEF0F6;         /* taslak, arşiv, süresi doldu */
  --clay: #D08A3E;               /* yalnız dolgu/çizgi, metinde kullanılmaz */
  --focus: rgba(62, 99, 224, .35);
  --shadow-1: 0 1px 2px rgba(16, 22, 43, .06);
  --shadow-2: 0 12px 32px rgba(16, 22, 43, .12);
  --radius: 6px; --radius-lg: 10px;
}

/* ---- Koyu tema (HUD) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1020;
  --surface: #10162B;
  --surface-2: #171F3A;
  --surface-3: #1D2645;
  --border: #262F4F;
  --border-strong: #34406A;
  --ink: #EEF1FA;
  --ink-2: #C3CAE0;
  --muted: #8D97B5;
  --accent: #7D9BFF;
  --accent-strong: #A5B9FF;
  --accent-bg: rgba(125, 155, 255, .14);
  --on-accent: #0B1020;
  --good: #4CC79B;    --good-bg: rgba(76, 199, 155, .14);
  --warning: #E3A35C; --warning-bg: rgba(227, 163, 92, .14); --warning-line: #E3A35C;
  --critical: #F07A6E; --critical-bg: rgba(240, 122, 110, .14);
  --neutral-bg: rgba(141, 151, 181, .14);
  --clay: #E3A35C;
  --focus: rgba(125, 155, 255, .45);
  --shadow-1: none;
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .45);
  --radius: 10px; --radius-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1020; --surface: #10162B; --surface-2: #171F3A; --surface-3: #1D2645;
    --border: #262F4F; --border-strong: #34406A;
    --ink: #EEF1FA; --ink-2: #C3CAE0; --muted: #8D97B5;
    --accent: #7D9BFF; --accent-strong: #A5B9FF; --accent-bg: rgba(125,155,255,.14); --on-accent: #0B1020;
    --good: #4CC79B; --good-bg: rgba(76,199,155,.14);
    --warning: #E3A35C; --warning-bg: rgba(227,163,92,.14); --warning-line: #E3A35C;
    --critical: #F07A6E; --critical-bg: rgba(240,122,110,.14);
    --neutral-bg: rgba(141,151,181,.14); --clay: #E3A35C;
    --focus: rgba(125,155,255,.45); --shadow-1: none; --shadow-2: 0 16px 40px rgba(0,0,0,.45);
    --radius: 10px; --radius-lg: 16px;
  }
}

/* ---- Ajans markası (müşteriye açık: Sunum raporu, portal, harcama, dekont, SEO portal) ---- */
[data-brand="ajans"] {
  --bg: #F7F4F8;
  --border: #E8DFEA;
  --accent: #8E3F8F;
  --accent-strong: #6E2F70;
  --accent-bg: #F6EEF6;
  --on-accent: #FFFFFF;
  --focus: rgba(142, 63, 143, .35);
}
[data-brand="ajans"][data-theme="dark"] {
  --bg: #0E1326;
  --border: #2A2F4D;
  --accent: #C27BC3;             /* koyu zeminde AA için #A855A9 değil bu ton */
  --accent-strong: #DDA8DE;
  --accent-bg: rgba(194, 123, 195, .16);
  --on-accent: #0E1326;
  --focus: rgba(194, 123, 195, .45);
}

/* ---- Taban ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-14)/var(--lh-ui) var(--font-ui); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0; }
h1 { font-size: var(--fs-28); } h2 { font-size: var(--fs-20); } h3 { font-size: var(--fs-16); font-weight: 500; }
a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; }
code, kbd, samp, .mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Marka imzaları */
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); color: var(--ink); white-space: nowrap; }
.wordmark b { font-weight: 700; color: var(--accent); }
.wordmark small { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-13); color: var(--muted); }
.signature-ajans { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }
.signature-ajans b { color: var(--accent); font-weight: 700; }