/* SANTRALL — tasarım belirteçleri (29.10.2026: "Temsilci arayüzü · Çağrılar" tasarımı tasarım dili olarak uygulandı, docs/04-tasarim-dili.md).
   Dil: yumuşak, dokunsal yüzeyler. Zemin açık gri-eflatun degrade; üzerinde YÜKSELEN (raised) düğmeler, ÇUKUR (well) alanlar, buzlu PANEL ve BÜYÜK KART.
   Ana eylem yeşil (go), bitirme/kapatma mercan (stop). Yazı tipi Manrope (SIL OFL 1.1), marka yazısı Outfit (OFL).
   Marka rengi değişimi: yalnızca --accent, --accent-soft, --accent-ink. Hiçbir yerde sabit renk yazılmaz; her zaman belirteç. */

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  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: "Outfit Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  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;

  --ff: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ölçü */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gap: 20px;
  --r-hero: 48px; --r-card: 32px; --r-md: 18px; --r-sm: 14px; --r-pill: 999px;
  --sidebar-w: 244px; --sidebar-w-col: 72px; --topbar-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 0.18s;

  /* marka: SANTRALL (logo ve isim çalışması). Amblem renkleri; yazı: "SANTR" + "ALL" hapı */
  --marka-nane: #79c9ba; --marka-seftali: #f5a88f; --marka-eflatun: #98a2ea; --marka-lacivert: #2f3a8f;
  --wm-yazi: #263447; --wm-pil: #e9ebfb; --wm-pil-yazi: #6872cf; --wm-alt: #566275;

  /* zemin: açık gri-eflatun degrade + sol üstte eflatun ışık */
  --bg: #eff0f5; --bg-glow: #f7f3ff; --bg-grad-a: #eff0f5; --bg-grad-b: #e2e4ec;
  --surface: #fafafd; --surface-2: #f2f3f8; --surface-3: #e9ebf2;      /* düz yüzeyler: menü, çekmece, pencere, tablo satırı */
  --topbar-bg: rgba(239, 240, 245, 0.78);

  /* mürekkep (metin) */
  --ink-900: #1f2433; --ink-700: #394055; --ink-600: #5b6175; --ink-500: #646a7f; --ink-400: #6a7086;
  --ink-300: #a9aec0; /* yalnızca ikon/çizgi/yer tutucu/devre dışı; metin için kullanma */

  /* çizgiler (zemin degrade olduğu için yarı saydam) */
  --line: rgba(54, 60, 98, 0.1); --line-2: rgba(54, 60, 98, 0.17);

  /* vurgu: odak halkası, avatar, "ALL" hapı, küçük işaretler. Ana eylem rengi DEĞİL (o yeşil: --go) */
  --accent: #5b65c9; --accent-soft: #e9ebfb; --accent-ink: #3f49a6; --on-accent: #ffffff;
  --accent-grad: linear-gradient(140deg, #5b65c9, #8791e3);

  /* grafik paleti (pastel). Varsayılan seri sırası: blue → amber → mint → violet → coral → sky → rose → lime */
  --c-blue: #6e8bfa; --c-amber: #f4b45e; --c-mint: #3fc8a0; --c-violet: #a98bf6;
  --c-coral: #f47c8c; --c-sky: #5cc8e6; --c-rose: #ec7fb6; --c-lime: #8fcf6b; --c-gray: #9ca3b8;
  /* aynı renklerin METİN tonu (grafik üstü değer etiketi / lejant metni) */
  --ci-blue: #4a63e0; --ci-amber: #a76307; --ci-mint: #238367; --ci-violet: #7c54e0;
  --ci-coral: #cc2f47; --ci-sky: #147f9c; --ci-rose: #c42b7f; --ci-lime: #498328; --ci-gray: #6b7290;

  /* anlam renkleri: yeşil = canlı/olumlu, mercan = bitirme/hata, kehribar = uyarı */
  --pos: #2f8a7d; --neg: #d2573b; --warn: #e9a23b;
  --pos-soft: #dff1ec; --neg-soft: #fbe8e2; --warn-soft: #fcf1de;
  --pos-ink: #1d6b5d; --neg-ink: #a8442a; --warn-ink: #8f5b12;     /* çip/etiket metni */
  --pos-solid: #1d7767;                                              /* beyaz yazılı dolgu */

  /* DOKUNSAL YÜZEYLER (tasarımdaki .card / .panel / .raised / .pressed / .well / .go / .stop / .off) */
  --card-bg: linear-gradient(180deg, #fafafd 0%, #eeeff5 100%);
  --card-sh: 0 44px 80px -30px rgba(54, 60, 98, 0.34), 0 14px 26px -14px rgba(54, 60, 98, 0.2), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(54, 60, 98, 0.05);
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.46));
  --panel-sh: 0 24px 44px -28px rgba(54, 60, 98, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --raised-bg: linear-gradient(180deg, #ffffff 0%, #f0f1f6 100%);
  --raised-sh: 0 12px 24px -10px rgba(54, 60, 98, 0.3), 0 2px 4px rgba(54, 60, 98, 0.06), inset 0 1px 0 #fff;
  --raised-sh-bas: inset 0 3px 8px rgba(54, 60, 98, 0.2);
  --pressed-bg: #1f2433; --pressed-sh: inset 0 3px 8px rgba(0, 0, 0, 0.35); --pressed-ink: #ffffff;
  --well-bg: #e4e6ee; --well-sh: inset 0 2px 7px rgba(54, 60, 98, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.85);
  --go-bg: linear-gradient(180deg, #2e9382 0%, #1d7767 100%); --go-sh: 0 16px 28px -12px rgba(29, 119, 103, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --stop-bg: linear-gradient(180deg, #da6747 0%, #bc4a2d 100%); --stop-sh: 0 16px 28px -12px rgba(188, 74, 45, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --off-bg: #e1e3eb; --off-ink: #5b6175; --off-sh: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --hi: #ffffff;                                                  /* yüzeylerdeki parlak çizgi (yay, üst kenar) */

  /* gölgeler */
  --sh-sm: 0 2px 4px rgba(54, 60, 98, 0.06), 0 8px 14px -8px rgba(54, 60, 98, 0.18);
  --sh-md: var(--panel-sh);
  --sh-lg: var(--card-sh);
  --sh-pop: 0 24px 60px -16px rgba(54, 60, 98, 0.45), 0 4px 12px rgba(54, 60, 98, 0.08);
  --glow: var(--go-sh);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --overlay: rgba(31, 36, 51, 0.42);

  /* grafik çerçevesi */
  --grid: rgba(54, 60, 98, 0.1); --tip-bg: rgba(250, 250, 253, 0.97); --tip-shadow: 0 12px 40px -8px rgba(54, 60, 98, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --wm-yazi: #eef0ff; --wm-pil: rgba(152, 162, 234, 0.22); --wm-pil-yazi: #c6ccff; --wm-alt: #9aa3c4;
    --bg: #0c0d13; --bg-glow: #1b1a33; --bg-grad-a: #12141c; --bg-grad-b: #0b0c12;
    --surface: #1a1d29; --surface-2: #1f2332; --surface-3: #262b3d;
    --topbar-bg: rgba(18, 20, 28, 0.78);
    --ink-900: #eceef6; --ink-700: #c5cadb; --ink-600: #a3a9be; --ink-500: #8e94ab; --ink-400: #868ca6; --ink-300: #4a4f68;
    --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
    --accent: #7c86e8; --accent-soft: #232852; --accent-ink: #b3bcff;
    --pos: #3fb5a0; --neg: #ef7a5f; --warn: #f0b350;
    --pos-soft: #123028; --neg-soft: #3a1c16; --warn-soft: #30230e;
    --pos-ink: #6fdcc6; --neg-ink: #ff9d85; --warn-ink: #f4b45e; --pos-solid: #1d7767;
    --ci-blue: #8fa6ff; --ci-amber: #f4b45e; --ci-mint: #3fc8a0; --ci-violet: #b9a0ff;
    --ci-coral: #ff8f9e; --ci-sky: #5cc8e6; --ci-rose: #f08fc0; --ci-lime: #9bd878; --ci-gray: #9ca3b8;
    --card-bg: linear-gradient(180deg, #252938 0%, #1a1d29 100%);
    --card-sh: 0 44px 80px -30px rgba(0, 0, 0, 0.75), 0 14px 26px -14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    --panel-sh: 0 24px 44px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --raised-bg: linear-gradient(180deg, #2c3144 0%, #21253a 100%);
    --raised-sh: 0 12px 24px -10px rgba(0, 0, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --raised-sh-bas: inset 0 3px 8px rgba(0, 0, 0, 0.5);
    --pressed-bg: #0c0d13; --pressed-sh: inset 0 3px 8px rgba(0, 0, 0, 0.6); --pressed-ink: #eceef6;
    --well-bg: #13151f; --well-sh: inset 0 2px 7px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    --go-sh: 0 16px 28px -12px rgba(46, 147, 130, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --stop-sh: 0 16px 28px -12px rgba(218, 103, 71, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --off-bg: #262b3d; --off-ink: #8e94ab; --off-sh: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hi: rgba(255, 255, 255, 0.12);
    --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --sh-pop: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4);
    --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
    --overlay: rgba(0, 0, 0, 0.62);
    --grid: rgba(255, 255, 255, 0.08); --tip-bg: rgba(31, 35, 50, 0.97); --tip-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wm-yazi: #eef0ff; --wm-pil: rgba(152, 162, 234, 0.22); --wm-pil-yazi: #c6ccff; --wm-alt: #9aa3c4;
  --bg: #0c0d13; --bg-glow: #1b1a33; --bg-grad-a: #12141c; --bg-grad-b: #0b0c12;
  --surface: #1a1d29; --surface-2: #1f2332; --surface-3: #262b3d;
  --topbar-bg: rgba(18, 20, 28, 0.78);
  --ink-900: #eceef6; --ink-700: #c5cadb; --ink-600: #a3a9be; --ink-500: #8e94ab; --ink-400: #868ca6; --ink-300: #4a4f68;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
  --accent: #7c86e8; --accent-soft: #232852; --accent-ink: #b3bcff;
  --pos: #3fb5a0; --neg: #ef7a5f; --warn: #f0b350;
  --pos-soft: #123028; --neg-soft: #3a1c16; --warn-soft: #30230e;
  --pos-ink: #6fdcc6; --neg-ink: #ff9d85; --warn-ink: #f4b45e; --pos-solid: #1d7767;
  --ci-blue: #8fa6ff; --ci-amber: #f4b45e; --ci-mint: #3fc8a0; --ci-violet: #b9a0ff;
  --ci-coral: #ff8f9e; --ci-sky: #5cc8e6; --ci-rose: #f08fc0; --ci-lime: #9bd878; --ci-gray: #9ca3b8;
  --card-bg: linear-gradient(180deg, #252938 0%, #1a1d29 100%);
  --card-sh: 0 44px 80px -30px rgba(0, 0, 0, 0.75), 0 14px 26px -14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  --panel-sh: 0 24px 44px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --raised-bg: linear-gradient(180deg, #2c3144 0%, #21253a 100%);
  --raised-sh: 0 12px 24px -10px rgba(0, 0, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --raised-sh-bas: inset 0 3px 8px rgba(0, 0, 0, 0.5);
  --pressed-bg: #0c0d13; --pressed-sh: inset 0 3px 8px rgba(0, 0, 0, 0.6); --pressed-ink: #eceef6;
  --well-bg: #13151f; --well-sh: inset 0 2px 7px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --go-sh: 0 16px 28px -12px rgba(46, 147, 130, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --stop-sh: 0 16px 28px -12px rgba(218, 103, 71, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --off-bg: #262b3d; --off-ink: #8e94ab; --off-sh: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --hi: rgba(255, 255, 255, 0.12);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-pop: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --overlay: rgba(0, 0, 0, 0.62);
  --grid: rgba(255, 255, 255, 0.08); --tip-bg: rgba(31, 35, 50, 0.97); --tip-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);
}

/* Temsilci durum renkleri (tüm ekranlarda aynı; renk durumu izler) */
.st-talk  { --c: var(--neg); }
.st-acw   { --c: var(--c-sky); }
.st-break { --c: var(--c-amber); }
.st-ready { --c: var(--pos); }
.st-meet  { --c: var(--c-violet); }
.st-back  { --c: var(--c-rose); }
.st-off   { --c: var(--ink-400); }