@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/foundation.css

@@ -0,0 +1,1394 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+/* tokens.css */
+@layer sti.tokens {
+  /* tema: stisocial varsayılanı koyu; "system" işletim sistemi tercihini izler */
+  :root,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+  [data-theme="system"] {
+    color-scheme: light dark;
+  }
+  /* tema, marka ve yoğunluktan bağımsız ölçüler; varsayılan yoğunluk (rahat) */
+  :root {
+    --sti-space-0: 0px;
+    --sti-space-0-5: 2px;
+    --sti-space-1: 4px;
+    --sti-space-2: 8px;
+    --sti-space-3: 12px;
+    --sti-space-4: 16px;
+    --sti-space-5: 20px;
+    --sti-space-6: 24px;
+    --sti-space-8: 32px;
+    --sti-space-10: 40px;
+    --sti-space-12: 48px;
+    --sti-space-16: 64px;
+    --sti-space-20: 80px;
+    --sti-space-24: 96px;
+    --sti-space-32: 128px;
+    --sti-radius-pill: 9999px;
+    --sti-border-width: 1px;
+    --sti-border-width-strong: 2px;
+    --sti-font-size-xs: 0.75rem;
+    --sti-line-height-xs: 1rem;
+    --sti-tracking-xs: 0.01em;
+    --sti-font-size-sm: 0.875rem;
+    --sti-line-height-sm: 1.25rem;
+    --sti-tracking-sm: 0;
+    --sti-font-size-md: 1rem;
+    --sti-line-height-md: 1.5rem;
+    --sti-tracking-md: 0;
+    --sti-font-size-body: 1.0625rem;
+    --sti-line-height-body: 1.75rem;
+    --sti-tracking-body: 0;
+    --sti-font-size-lg: 1.25rem;
+    --sti-line-height-lg: 1.75rem;
+    --sti-tracking-lg: -0.005em;
+    --sti-font-size-xl: 1.5rem;
+    --sti-line-height-xl: 2rem;
+    --sti-tracking-xl: -0.015em;
+    --sti-font-size-2xl: 1.875rem;
+    --sti-line-height-2xl: 2.25rem;
+    --sti-tracking-2xl: -0.02em;
+    --sti-font-size-3xl: 2.25rem;
+    --sti-line-height-3xl: 2.5rem;
+    --sti-tracking-3xl: -0.02em;
+    --sti-font-size-4xl: 3rem;
+    --sti-line-height-4xl: 3.25rem;
+    --sti-tracking-4xl: -0.025em;
+    --sti-font-size-display-2xl: clamp(2.75rem, 1.5rem + 5.556vw, 6.5rem);
+    --sti-line-height-display-2xl: 1;
+    --sti-tracking-display-2xl: -0.03em;
+    --sti-font-size-display-xl: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);
+    --sti-line-height-display-xl: 1.02;
+    --sti-tracking-display-xl: -0.025em;
+    --sti-font-size-display-lg: clamp(2rem, 1.5rem + 2.222vw, 3.5rem);
+    --sti-line-height-display-lg: 1.05;
+    --sti-tracking-display-lg: -0.02em;
+    --sti-font-size-heading-xl: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
+    --sti-line-height-heading-xl: 1.1;
+    --sti-tracking-heading-xl: -0.015em;
+    --sti-font-size-heading-lg: clamp(1.375rem, 1.208rem + 0.7407vw, 1.875rem);
+    --sti-line-height-heading-lg: 1.2;
+    --sti-tracking-heading-lg: -0.01em;
+    --sti-font-size-lead: clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem);
+    --sti-line-height-lead: 1.5;
+    --sti-tracking-lead: -0.005em;
+    --sti-font-size-prose: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
+    --sti-line-height-prose: 1.6;
+    --sti-tracking-prose: 0;
+    --sti-font-weight-regular: 400;
+    --sti-font-weight-medium: 500;
+    --sti-font-weight-semibold: 600;
+    --sti-font-weight-bold: 700;
+    --sti-tracking-label: 0.08em;
+    --sti-tracking-eyebrow: 0.12em;
+    --sti-tracking-code: 0.02em;
+    --sti-link-underline-offset: 0.18em;
+    --sti-word-spacing-display: 0.08em;
+    --sti-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
+    --sti-icon-sm: 16px;
+    --sti-icon-md: 20px;
+    --sti-icon-lg: 24px;
+    --sti-opacity-disabled: 0.6;
+    --sti-duration-fast: 180ms;
+    --sti-duration-base: 320ms;
+    --sti-duration-slow: 640ms;
+    --sti-duration-reveal: 1800ms;
+    --sti-duration-loop: 2400ms;
+    --sti-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --sti-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --sti-ease-snap: cubic-bezier(0.5, 0, 0, 1);
+    --sti-z-base: 0;
+    --sti-z-raised: 1;
+    --sti-z-dropdown: 1000;
+    --sti-z-sticky: 1100;
+    --sti-z-header: 1200;
+    --sti-z-overlay: 1300;
+    --sti-z-modal: 1400;
+    --sti-z-popover: 1500;
+    --sti-z-toast: 1600;
+    --sti-z-tooltip: 1700;
+    --sti-z-skip-link: 1800;
+    --sti-width-content: 1040px;
+    --sti-width-container: 1600px;
+    --sti-width-measure: 68ch;
+    --sti-width-sidebar: 264px;
+    --sti-height-topbar: 64px;
+    --sti-gutter: clamp(1.25rem, 4vw, 5rem);
+    --sti-control-h-sm: 36px;
+    --sti-control-h-md: 44px;
+    --sti-control-h-lg: 52px;
+    --sti-space-inset-sm: 12px;
+    --sti-space-inset-md: 16px;
+    --sti-space-inset-lg: 24px;
+    --sti-row-h: 44px;
+  }
+  /* ham katman, marka stisocial: tohum #50c2f6; bilgi rengi vurgunun kendisi (SİNYAL tek vurgu) */
+  :root,
+  [data-theme],
+  [data-brand="stisocial"],
+  [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+    --sti-radius-xs: 6px;
+    --sti-radius-sm: 10px;
+    --sti-radius-md: 16px;
+    --sti-radius-lg: 24px;
+    --sti-radius-xl: 40px;
+    --sti-font-display: var(--font-clash, "Clash Display"), "STI Display Fallback", "STI Display Fallback Android", var(--font-general, "General Sans"), "STI Text Fallback", "STI Text Fallback Android", system-ui, sans-serif;
+    --sti-font-text: var(--font-general, "General Sans"), "STI Text Fallback", "STI Text Fallback Android", system-ui, sans-serif;
+    --sti-font-numeric: "STI Numeric", var(--sti-font-text);
+    --sti-ref-neutral-1: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-neutral-2: light-dark(#f8f8f9, #131315);
+    --sti-ref-neutral-3: light-dark(#f0f0f2, #1a1a1d);
+    --sti-ref-neutral-4: light-dark(#e8e8ec, #222226);
+    --sti-ref-neutral-5: light-dark(#e1e1e5, #2a2a2e);
+    --sti-ref-neutral-6: light-dark(#d8d8dd, #333337);
+    --sti-ref-neutral-7: light-dark(#ccccd2, #404044);
+    --sti-ref-neutral-8: light-dark(#b8b8bf, #55555b);
+    --sti-ref-neutral-9: light-dark(#727279, #6e6e76);
+    --sti-ref-neutral-10: light-dark(#67676e, #606067);
+    --sti-ref-neutral-11: light-dark(#64646b, #ababb3);
+    --sti-ref-neutral-12: light-dark(#19191d, #f2f1ed);
+    --sti-ref-neutral-ink: #fcfcfc;
+    --sti-ref-neutral-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-neutral-fill-more: light-dark(#64646b, #ababb3);
+    --sti-ref-neutral-fill-more-hover: light-dark(#19191d, #f2f1ed);
+    --sti-ref-neutral-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-accent-1: light-dark(#f9fdff, #050c11);
+    --sti-ref-accent-2: light-dark(#f1faff, #07151c);
+    --sti-ref-accent-3: light-dark(#e0f4ff, #031d2a);
+    --sti-ref-accent-4: light-dark(#d0eeff, #012636);
+    --sti-ref-accent-5: light-dark(#bfe8fe, #012f42);
+    --sti-ref-accent-6: light-dark(#abe2fe, #02394e);
+    --sti-ref-accent-7: light-dark(#8ed8fe, #034760);
+    --sti-ref-accent-8: light-dark(#67c6f4, #055e7f);
+    --sti-ref-accent-9: #50c2f6;
+    --sti-ref-accent-10: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-accent-11: light-dark(#076997, #69bbed);
+    --sti-ref-accent-12: light-dark(#02314d, #e5f3ff);
+    --sti-ref-accent-ink: #061c2a;
+    --sti-ref-accent-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-accent-fill-more: #50c2f6;
+    --sti-ref-accent-fill-more-hover: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-accent-ink-more: #061c2a;
+    --sti-ref-success-1: light-dark(#f9fdfa, #060d08);
+    --sti-ref-success-2: light-dark(#f1fbf3, #0a170d);
+    --sti-ref-success-3: light-dark(#e0f8e5, #072010);
+    --sti-ref-success-4: light-dark(#cef5d6, #032b12);
+    --sti-ref-success-5: light-dark(#bdf0c9, #013517);
+    --sti-ref-success-6: light-dark(#aceabc, #023f1d);
+    --sti-ref-success-7: light-dark(#98e1ab, #034e25);
+    --sti-ref-success-8: light-dark(#79d092, #066733);
+    --sti-ref-success-9: #0a8342;
+    --sti-ref-success-10: #08753b;
+    --sti-ref-success-11: light-dark(#087544, #6bc891);
+    --sti-ref-success-12: light-dark(#023820, #ddf9e8);
+    --sti-ref-success-ink: #fcfcfc;
+    --sti-ref-success-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-success-fill-more: light-dark(#087544, #6bc891);
+    --sti-ref-success-fill-more-hover: light-dark(#023820, #ddf9e8);
+    --sti-ref-success-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-warning-1: light-dark(#fefcf8, #0f0a04);
+    --sti-ref-warning-2: light-dark(#fef7ed, #1a1205);
+    --sti-ref-warning-3: light-dark(#fdeed6, #251800);
+    --sti-ref-warning-4: light-dark(#fde5bf, #2f1f01);
+    --sti-ref-warning-5: light-dark(#fcdda9, #3a2701);
+    --sti-ref-warning-6: light-dark(#f8d394, #452f02);
+    --sti-ref-warning-7: light-dark(#f1c67b, #553b02);
+    --sti-ref-warning-8: light-dark(#e2b055, #704f04);
+    --sti-ref-warning-9: #f0b135;
+    --sti-ref-warning-10: light-dark(#e4a623, #f8c05a);
+    --sti-ref-warning-11: light-dark(#8a5306, #e5a159);
+    --sti-ref-warning-12: light-dark(#462401, #ffeee0);
+    --sti-ref-warning-ink: #0b0b0c;
+    --sti-ref-warning-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-warning-fill-more: #f0b135;
+    --sti-ref-warning-fill-more-hover: light-dark(#e4a623, #f8c05a);
+    --sti-ref-warning-ink-more: #0b0b0c;
+    --sti-ref-danger-1: light-dark(#fffbfb, #140707);
+    --sti-ref-danger-2: light-dark(#fff6f5, #210d0b);
+    --sti-ref-danger-3: light-dark(#ffebe9, #300d0c);
+    --sti-ref-danger-4: light-dark(#ffe1de, #410d0d);
+    --sti-ref-danger-5: light-dark(#fed6d2, #510d0f);
+    --sti-ref-danger-6: light-dark(#fecac5, #610f12);
+    --sti-ref-danger-7: light-dark(#feb9b2, #761719);
+    --sti-ref-danger-8: light-dark(#fe9992, #972728);
+    --sti-ref-danger-9: #d53136;
+    --sti-ref-danger-10: #c3292e;
+    --sti-ref-danger-11: light-dark(#b22027, #fe8b83);
+    --sti-ref-danger-12: light-dark(#570e0d, #ffecea);
+    --sti-ref-danger-ink: #fcfcfc;
+    --sti-ref-danger-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-danger-fill-more: light-dark(#b22027, #fe8b83);
+    --sti-ref-danger-fill-more-hover: light-dark(#570e0d, #ffecea);
+    --sti-ref-danger-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-info-1: light-dark(#f9fdff, #050c11);
+    --sti-ref-info-2: light-dark(#f1faff, #07151c);
+    --sti-ref-info-3: light-dark(#e0f4ff, #031d2a);
+    --sti-ref-info-4: light-dark(#d0eeff, #012636);
+    --sti-ref-info-5: light-dark(#bfe8fe, #012f42);
+    --sti-ref-info-6: light-dark(#abe2fe, #02394e);
+    --sti-ref-info-7: light-dark(#8ed8fe, #034760);
+    --sti-ref-info-8: light-dark(#67c6f4, #055e7f);
+    --sti-ref-info-9: #50c2f6;
+    --sti-ref-info-10: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-info-11: light-dark(#076997, #69bbed);
+    --sti-ref-info-12: light-dark(#02314d, #e5f3ff);
+    --sti-ref-info-ink: #061c2a;
+    --sti-ref-info-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-info-fill-more: #50c2f6;
+    --sti-ref-info-fill-more-hover: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-info-ink-more: #061c2a;
+    --sti-ref-accent-brand: #50c2f6;
+    --sti-ref-focus-ring: light-dark(#076997, #50c2f6);
+    --sti-ref-signal-text: light-dark(#076997, #50c2f6);
+    --sti-ref-shadow-1: light-dark(rgb(11 11 12 / 0.1), rgb(3 3 4 / 0.6));
+    --sti-ref-shadow-2: light-dark(rgb(11 11 12 / 0.06), rgb(3 3 4 / 0.4));
+    --sti-ref-scrim: light-dark(rgb(11 11 12 / 0.4), rgb(3 3 4 / 0.7));
+  }
+  /* anlamlı katman: bileşenler yalnız bunları kullanır */
+  :where(:root, [data-brand], [data-theme]) {
+    --sti-bg-canvas: var(--sti-ref-neutral-1);
+    --sti-bg-subtle: var(--sti-ref-neutral-2);
+    --sti-bg-surface: var(--sti-ref-neutral-3);
+    --sti-bg-surface-hover: var(--sti-ref-neutral-4);
+    --sti-bg-surface-active: var(--sti-ref-neutral-5);
+    --sti-bg-inverse: var(--sti-ref-neutral-12);
+    --sti-border-subtle: var(--sti-ref-neutral-6);
+    --sti-border: var(--sti-ref-neutral-7);
+    --sti-border-strong: var(--sti-ref-neutral-8);
+    --sti-border-control: var(--sti-ref-neutral-9);
+    --sti-border-selected: var(--sti-ref-accent-11);
+    --sti-fg: var(--sti-ref-neutral-12);
+    --sti-fg-muted: var(--sti-ref-neutral-11);
+    --sti-fg-inverse: var(--sti-ref-neutral-1);
+    --sti-fg-link: var(--sti-ref-accent-11);
+    --sti-fg-link-hover: var(--sti-ref-accent-12);
+    --sti-fg-signal: var(--sti-ref-signal-text);
+    --sti-focus-ring: var(--sti-ref-focus-ring);
+    --sti-selection-bg: var(--sti-ref-accent-5);
+    --sti-selection-fg: var(--sti-ref-neutral-12);
+    --sti-scrim: var(--sti-ref-scrim);
+    --sti-shadow-color-1: var(--sti-ref-shadow-1);
+    --sti-shadow-color-2: var(--sti-ref-shadow-2);
+    --sti-fill-neutral: var(--sti-ref-neutral-9);
+    --sti-fill-neutral-hover: var(--sti-ref-neutral-10);
+    --sti-fg-on-neutral: var(--sti-ref-neutral-ink);
+    --sti-fill-accent: var(--sti-ref-accent-9);
+    --sti-fill-accent-hover: var(--sti-ref-accent-10);
+    --sti-fg-on-accent: var(--sti-ref-accent-ink);
+    --sti-fill-success: var(--sti-ref-success-9);
+    --sti-fill-success-hover: var(--sti-ref-success-10);
+    --sti-fg-on-success: var(--sti-ref-success-ink);
+    --sti-fill-warning: var(--sti-ref-warning-9);
+    --sti-fill-warning-hover: var(--sti-ref-warning-10);
+    --sti-fg-on-warning: var(--sti-ref-warning-ink);
+    --sti-fill-danger: var(--sti-ref-danger-9);
+    --sti-fill-danger-hover: var(--sti-ref-danger-10);
+    --sti-fg-on-danger: var(--sti-ref-danger-ink);
+    --sti-fill-info: var(--sti-ref-info-9);
+    --sti-fill-info-hover: var(--sti-ref-info-10);
+    --sti-fg-on-info: var(--sti-ref-info-ink);
+    --sti-fg-accent: var(--sti-ref-accent-11);
+    --sti-fg-accent-strong: var(--sti-ref-accent-12);
+    --sti-bg-accent-subtle: var(--sti-ref-accent-3);
+    --sti-border-accent: var(--sti-ref-accent-7);
+    --sti-fg-success: var(--sti-ref-success-11);
+    --sti-fg-success-strong: var(--sti-ref-success-12);
+    --sti-bg-success-subtle: var(--sti-ref-success-3);
+    --sti-border-success: var(--sti-ref-success-7);
+    --sti-fg-warning: var(--sti-ref-warning-11);
+    --sti-fg-warning-strong: var(--sti-ref-warning-12);
+    --sti-bg-warning-subtle: var(--sti-ref-warning-3);
+    --sti-border-warning: var(--sti-ref-warning-7);
+    --sti-fg-danger: var(--sti-ref-danger-11);
+    --sti-fg-danger-strong: var(--sti-ref-danger-12);
+    --sti-bg-danger-subtle: var(--sti-ref-danger-3);
+    --sti-border-danger: var(--sti-ref-danger-7);
+    --sti-fg-info: var(--sti-ref-info-11);
+    --sti-fg-info-strong: var(--sti-ref-info-12);
+    --sti-bg-info-subtle: var(--sti-ref-info-3);
+    --sti-border-info: var(--sti-ref-info-7);
+    --sti-focus-ring-width: 2px;
+    --sti-focus-ring-offset: 2px;
+    --sti-shadow-sm: 0 1px 2px var(--sti-shadow-color-1);
+    --sti-shadow-md: 0 4px 12px -2px var(--sti-shadow-color-1), 0 2px 4px -2px var(--sti-shadow-color-2);
+    --sti-shadow-lg: 0 12px 32px -8px var(--sti-shadow-color-1), 0 4px 8px -4px var(--sti-shadow-color-2);
+    --sti-shadow-xl: 0 24px 64px -12px var(--sti-shadow-color-1), 0 8px 16px -8px var(--sti-shadow-color-2);
+  }
+  /* yüksek karşıtlık: sistem tercihi (<html data-contrast="normal"> değilse) ya da <html data-contrast="more"> */
+  @media (prefers-contrast: more) {
+    :where(:root:not([data-contrast="normal"]), :root:not([data-contrast="normal"]) :is([data-brand], [data-theme])) {
+      --sti-border-subtle: var(--sti-ref-neutral-11);
+      --sti-border: var(--sti-ref-neutral-11);
+      --sti-border-strong: var(--sti-ref-neutral-11);
+      --sti-border-control: var(--sti-ref-neutral-11);
+      --sti-border-selected: var(--sti-ref-accent-12);
+      --sti-fg-muted: var(--sti-ref-neutral-12);
+      --sti-fg-link: var(--sti-ref-accent-12);
+      --sti-fg-signal: var(--sti-ref-accent-12);
+      --sti-fill-neutral: var(--sti-ref-neutral-fill-more);
+      --sti-fill-neutral-hover: var(--sti-ref-neutral-fill-more-hover);
+      --sti-fg-on-neutral: var(--sti-ref-neutral-ink-more);
+      --sti-fill-accent: var(--sti-ref-accent-fill-more);
+      --sti-fill-accent-hover: var(--sti-ref-accent-fill-more-hover);
+      --sti-fg-on-accent: var(--sti-ref-accent-ink-more);
+      --sti-fill-success: var(--sti-ref-success-fill-more);
+      --sti-fill-success-hover: var(--sti-ref-success-fill-more-hover);
+      --sti-fg-on-success: var(--sti-ref-success-ink-more);
+      --sti-fill-warning: var(--sti-ref-warning-fill-more);
+      --sti-fill-warning-hover: var(--sti-ref-warning-fill-more-hover);
+      --sti-fg-on-warning: var(--sti-ref-warning-ink-more);
+      --sti-fill-danger: var(--sti-ref-danger-fill-more);
+      --sti-fill-danger-hover: var(--sti-ref-danger-fill-more-hover);
+      --sti-fg-on-danger: var(--sti-ref-danger-ink-more);
+      --sti-fill-info: var(--sti-ref-info-fill-more);
+      --sti-fill-info-hover: var(--sti-ref-info-fill-more-hover);
+      --sti-fg-on-info: var(--sti-ref-info-ink-more);
+      --sti-fg-accent: var(--sti-ref-accent-12);
+      --sti-border-accent: var(--sti-ref-accent-11);
+      --sti-fg-success: var(--sti-ref-success-12);
+      --sti-border-success: var(--sti-ref-success-11);
+      --sti-fg-warning: var(--sti-ref-warning-12);
+      --sti-border-warning: var(--sti-ref-warning-11);
+      --sti-fg-danger: var(--sti-ref-danger-12);
+      --sti-border-danger: var(--sti-ref-danger-11);
+      --sti-fg-info: var(--sti-ref-info-12);
+      --sti-border-info: var(--sti-ref-info-11);
+      --sti-focus-ring-width: 3px;
+    }
+  }
+  :where(:root[data-contrast="more"], :root[data-contrast="more"] :is([data-brand], [data-theme])) {
+    --sti-border-subtle: var(--sti-ref-neutral-11);
+    --sti-border: var(--sti-ref-neutral-11);
+    --sti-border-strong: var(--sti-ref-neutral-11);
+    --sti-border-control: var(--sti-ref-neutral-11);
+    --sti-border-selected: var(--sti-ref-accent-12);
+    --sti-fg-muted: var(--sti-ref-neutral-12);
+    --sti-fg-link: var(--sti-ref-accent-12);
+    --sti-fg-signal: var(--sti-ref-accent-12);
+    --sti-fill-neutral: var(--sti-ref-neutral-fill-more);
+    --sti-fill-neutral-hover: var(--sti-ref-neutral-fill-more-hover);
+    --sti-fg-on-neutral: var(--sti-ref-neutral-ink-more);
+    --sti-fill-accent: var(--sti-ref-accent-fill-more);
+    --sti-fill-accent-hover: var(--sti-ref-accent-fill-more-hover);
+    --sti-fg-on-accent: var(--sti-ref-accent-ink-more);
+    --sti-fill-success: var(--sti-ref-success-fill-more);
+    --sti-fill-success-hover: var(--sti-ref-success-fill-more-hover);
+    --sti-fg-on-success: var(--sti-ref-success-ink-more);
+    --sti-fill-warning: var(--sti-ref-warning-fill-more);
+    --sti-fill-warning-hover: var(--sti-ref-warning-fill-more-hover);
+    --sti-fg-on-warning: var(--sti-ref-warning-ink-more);
+    --sti-fill-danger: var(--sti-ref-danger-fill-more);
+    --sti-fill-danger-hover: var(--sti-ref-danger-fill-more-hover);
+    --sti-fg-on-danger: var(--sti-ref-danger-ink-more);
+    --sti-fill-info: var(--sti-ref-info-fill-more);
+    --sti-fill-info-hover: var(--sti-ref-info-fill-more-hover);
+    --sti-fg-on-info: var(--sti-ref-info-ink-more);
+    --sti-fg-accent: var(--sti-ref-accent-12);
+    --sti-border-accent: var(--sti-ref-accent-11);
+    --sti-fg-success: var(--sti-ref-success-12);
+    --sti-border-success: var(--sti-ref-success-11);
+    --sti-fg-warning: var(--sti-ref-warning-12);
+    --sti-border-warning: var(--sti-ref-warning-11);
+    --sti-fg-danger: var(--sti-ref-danger-12);
+    --sti-border-danger: var(--sti-ref-danger-11);
+    --sti-fg-info: var(--sti-ref-info-12);
+    --sti-border-info: var(--sti-ref-info-11);
+    --sti-focus-ring-width: 3px;
+  }
+  /* yoğunluk (varsayılan yukarıda); ham değerler, iç içe kullanım kendiliğinden çalışır */
+  [data-density="compact"] {
+    --sti-control-h-sm: 32px;
+    --sti-control-h-md: 36px;
+    --sti-control-h-lg: 44px;
+    --sti-space-inset-sm: 8px;
+    --sti-space-inset-md: 12px;
+    --sti-space-inset-lg: 16px;
+    --sti-row-h: 36px;
+  }
+  [data-density="comfortable"] {
+    --sti-control-h-sm: 36px;
+    --sti-control-h-md: 44px;
+    --sti-control-h-lg: 52px;
+    --sti-space-inset-sm: 12px;
+    --sti-space-inset-md: 16px;
+    --sti-space-inset-lg: 24px;
+    --sti-row-h: 44px;
+  }
+  [data-density="spacious"] {
+    --sti-control-h-sm: 44px;
+    --sti-control-h-md: 52px;
+    --sti-control-h-lg: 60px;
+    --sti-space-inset-sm: 16px;
+    --sti-space-inset-md: 24px;
+    --sti-space-inset-lg: 32px;
+    --sti-row-h: 52px;
+  }
+  /* dokunmatik: hiçbir denetim 44 pikselin altına inmez */
+  @media (pointer: coarse) {
+    :root:not([data-density]) {
+      --sti-control-h-sm: 44px;
+    }
+    [data-density="compact"] {
+      --sti-control-h-sm: 44px;
+      --sti-control-h-md: 44px;
+      --sti-row-h: 44px;
+    }
+    [data-density="comfortable"] {
+      --sti-control-h-sm: 44px;
+    }
+  }
+  /* geniş renk uzayı: aynı açıklık ve ton, daha çok doygunluk; vurgu-9 ve nötrler birebir */
+  @supports (color: oklch(0 0 0)) and (color: light-dark(#000, #fff)) {
+    @media (color-gamut: p3) {
+      :root,
+      [data-theme],
+      [data-brand="stisocial"],
+      [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+        --sti-ref-accent-1: light-dark(#f9fdff, oklch(0.15 0.0191 231.5));
+        --sti-ref-accent-2: light-dark(oklch(0.979 0.013 231.5), oklch(0.188 0.0287 231.5));
+        --sti-ref-accent-3: light-dark(oklch(0.956 0.0275 231.5), oklch(0.219 0.0478 231.5));
+        --sti-ref-accent-4: light-dark(oklch(0.933 0.0422 231.5), oklch(0.254 0.0664 231.5));
+        --sti-ref-accent-5: light-dark(oklch(0.91 0.0571 231.5), oklch(0.287 0.075 231.5));
+        --sti-ref-accent-6: light-dark(oklch(0.884 0.0742 231.5), oklch(0.322 0.0842 231.5));
+        --sti-ref-accent-7: light-dark(oklch(0.848 0.0984 231.5), oklch(0.372 0.0973 231.5));
+        --sti-ref-accent-8: light-dark(oklch(0.786 0.1306 231.5), oklch(0.452 0.1182 231.5));
+        --sti-ref-accent-10: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-accent-11: light-dark(oklch(0.495 0.1397 237.5), oklch(0.76 0.1274 237.5));
+        --sti-ref-accent-12: light-dark(oklch(0.3 0.0876 241.5), oklch(0.958 0.0237 241.5));
+        --sti-ref-accent-fill-more-hover: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-success-1: light-dark(oklch(0.991 0.0071 152), oklch(0.15 0.0212 152));
+        --sti-ref-success-2: light-dark(oklch(0.979 0.0177 152), oklch(0.188 0.0319 152));
+        --sti-ref-success-3: light-dark(oklch(0.956 0.0425 152), oklch(0.219 0.0531 152));
+        --sti-ref-success-4: light-dark(oklch(0.933 0.0673 152), oklch(0.254 0.0743 152));
+        --sti-ref-success-5: light-dark(oklch(0.91 0.0885 152), oklch(0.287 0.092 152));
+        --sti-ref-success-6: light-dark(oklch(0.884 0.1062 152), oklch(0.322 0.1062 152));
+        --sti-ref-success-7: light-dark(oklch(0.848 0.1239 152), oklch(0.372 0.1204 152));
+        --sti-ref-success-8: light-dark(oklch(0.786 0.1451 152), oklch(0.452 0.1381 152));
+        --sti-ref-success-9: oklch(0.535 0.1652 152);
+        --sti-ref-success-10: oklch(0.495 0.1534 152);
+        --sti-ref-success-11: light-dark(oklch(0.495 0.1628 156), oklch(0.76 0.1416 156));
+        --sti-ref-success-12: light-dark(oklch(0.3 0.0949 158), oklch(0.958 0.0442 158));
+        --sti-ref-success-fill-more: light-dark(oklch(0.495 0.1628 156), oklch(0.76 0.1416 156));
+        --sti-ref-success-fill-more-hover: light-dark(oklch(0.3 0.0949 158), oklch(0.958 0.0442 158));
+        --sti-ref-warning-1: light-dark(oklch(0.991 0.0071 80), oklch(0.15 0.0212 80));
+        --sti-ref-warning-2: light-dark(oklch(0.979 0.0177 80), oklch(0.188 0.0319 80));
+        --sti-ref-warning-3: light-dark(oklch(0.956 0.0425 80), oklch(0.219 0.0512 80));
+        --sti-ref-warning-4: light-dark(oklch(0.933 0.0673 80), oklch(0.254 0.0593 80));
+        --sti-ref-warning-5: light-dark(oklch(0.91 0.0885 80), oklch(0.287 0.0671 80));
+        --sti-ref-warning-6: light-dark(oklch(0.884 0.1062 80), oklch(0.322 0.0752 80));
+        --sti-ref-warning-7: light-dark(oklch(0.848 0.1239 80), oklch(0.372 0.0869 80));
+        --sti-ref-warning-8: light-dark(oklch(0.786 0.1451 80), oklch(0.452 0.1056 80));
+        --sti-ref-warning-9: oklch(0.8 0.177 80);
+        --sti-ref-warning-10: light-dark(oklch(0.765 0.177 80), oklch(0.84 0.1593 80));
+        --sti-ref-warning-11: light-dark(oklch(0.495 0.1237 66), oklch(0.76 0.1416 66));
+        --sti-ref-warning-12: light-dark(oklch(0.3 0.0788 60), oklch(0.958 0.0326 60));
+        --sti-ref-warning-fill-more: oklch(0.8 0.177 80);
+        --sti-ref-warning-fill-more-hover: light-dark(oklch(0.765 0.177 80), oklch(0.84 0.1593 80));
+        --sti-ref-danger-1: light-dark(oklch(0.991 0.0055 25), oklch(0.15 0.0269 25));
+        --sti-ref-danger-2: light-dark(oklch(0.979 0.013 25), oklch(0.188 0.0404 25));
+        --sti-ref-danger-3: light-dark(oklch(0.956 0.0278 25), oklch(0.219 0.0673 25));
+        --sti-ref-danger-4: light-dark(oklch(0.933 0.0431 25), oklch(0.254 0.0942 25));
+        --sti-ref-danger-5: light-dark(oklch(0.91 0.059 25), oklch(0.287 0.1166 25));
+        --sti-ref-danger-6: light-dark(oklch(0.884 0.0777 25), oklch(0.322 0.1345 25));
+        --sti-ref-danger-7: light-dark(oklch(0.848 0.105 25), oklch(0.372 0.1525 25));
+        --sti-ref-danger-8: light-dark(oklch(0.786 0.1563 25), oklch(0.452 0.1749 25));
+        --sti-ref-danger-9: oklch(0.575 0.236 25);
+        --sti-ref-danger-10: oklch(0.535 0.2242 25);
+        --sti-ref-danger-11: light-dark(oklch(0.495 0.213 25), oklch(0.76 0.1794 25));
+        --sti-ref-danger-12: light-dark(oklch(0.3 0.1233 27), oklch(0.958 0.0265 27));
+        --sti-ref-danger-fill-more: light-dark(oklch(0.495 0.213 25), oklch(0.76 0.1794 25));
+        --sti-ref-danger-fill-more-hover: light-dark(oklch(0.3 0.1233 27), oklch(0.958 0.0265 27));
+        --sti-ref-info-1: light-dark(#f9fdff, oklch(0.15 0.0191 231.5));
+        --sti-ref-info-2: light-dark(oklch(0.979 0.013 231.5), oklch(0.188 0.0287 231.5));
+        --sti-ref-info-3: light-dark(oklch(0.956 0.0275 231.5), oklch(0.219 0.0478 231.5));
+        --sti-ref-info-4: light-dark(oklch(0.933 0.0422 231.5), oklch(0.254 0.0664 231.5));
+        --sti-ref-info-5: light-dark(oklch(0.91 0.0571 231.5), oklch(0.287 0.075 231.5));
+        --sti-ref-info-6: light-dark(oklch(0.884 0.0742 231.5), oklch(0.322 0.0842 231.5));
+        --sti-ref-info-7: light-dark(oklch(0.848 0.0984 231.5), oklch(0.372 0.0973 231.5));
+        --sti-ref-info-8: light-dark(oklch(0.786 0.1306 231.5), oklch(0.452 0.1182 231.5));
+        --sti-ref-info-10: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-info-11: light-dark(oklch(0.495 0.1397 237.5), oklch(0.76 0.1274 237.5));
+        --sti-ref-info-12: light-dark(oklch(0.3 0.0876 241.5), oklch(0.958 0.0237 241.5));
+        --sti-ref-info-fill-more-hover: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-focus-ring: light-dark(oklch(0.495 0.1397 237.5), #50c2f6);
+        --sti-ref-signal-text: light-dark(oklch(0.495 0.1397 237.5), #50c2f6);
+      }
+    }
+  }
+  /* light-dark() olmayan motorlar: tema yalnız <html data-theme>'dan, yalnız sRGB */
+  @supports not (color: light-dark(#000, #fff)) {
+    :root,
+    [data-theme],
+    [data-brand="stisocial"],
+    [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+      --sti-ref-neutral-1: #0b0b0c;
+      --sti-ref-neutral-2: #131315;
+      --sti-ref-neutral-3: #1a1a1d;
+      --sti-ref-neutral-4: #222226;
+      --sti-ref-neutral-5: #2a2a2e;
+      --sti-ref-neutral-6: #333337;
+      --sti-ref-neutral-7: #404044;
+      --sti-ref-neutral-8: #55555b;
+      --sti-ref-neutral-9: #6e6e76;
+      --sti-ref-neutral-10: #606067;
+      --sti-ref-neutral-11: #ababb3;
+      --sti-ref-neutral-12: #f2f1ed;
+      --sti-ref-neutral-ink-strong: #0b0b0c;
+      --sti-ref-neutral-fill-more: #ababb3;
+      --sti-ref-neutral-fill-more-hover: #f2f1ed;
+      --sti-ref-neutral-ink-more: #0b0b0c;
+      --sti-ref-accent-1: #050c11;
+      --sti-ref-accent-2: #07151c;
+      --sti-ref-accent-3: #031d2a;
+      --sti-ref-accent-4: #012636;
+      --sti-ref-accent-5: #012f42;
+      --sti-ref-accent-6: #02394e;
+      --sti-ref-accent-7: #034760;
+      --sti-ref-accent-8: #055e7f;
+      --sti-ref-accent-10: #70cffe;
+      --sti-ref-accent-11: #69bbed;
+      --sti-ref-accent-12: #e5f3ff;
+      --sti-ref-accent-ink-strong: #0b0b0c;
+      --sti-ref-accent-fill-more-hover: #70cffe;
+      --sti-ref-success-1: #060d08;
+      --sti-ref-success-2: #0a170d;
+      --sti-ref-success-3: #072010;
+      --sti-ref-success-4: #032b12;
+      --sti-ref-success-5: #013517;
+      --sti-ref-success-6: #023f1d;
+      --sti-ref-success-7: #034e25;
+      --sti-ref-success-8: #066733;
+      --sti-ref-success-11: #6bc891;
+      --sti-ref-success-12: #ddf9e8;
+      --sti-ref-success-ink-strong: #0b0b0c;
+      --sti-ref-success-fill-more: #6bc891;
+      --sti-ref-success-fill-more-hover: #ddf9e8;
+      --sti-ref-success-ink-more: #0b0b0c;
+      --sti-ref-warning-1: #0f0a04;
+      --sti-ref-warning-2: #1a1205;
+      --sti-ref-warning-3: #251800;
+      --sti-ref-warning-4: #2f1f01;
+      --sti-ref-warning-5: #3a2701;
+      --sti-ref-warning-6: #452f02;
+      --sti-ref-warning-7: #553b02;
+      --sti-ref-warning-8: #704f04;
+      --sti-ref-warning-10: #f8c05a;
+      --sti-ref-warning-11: #e5a159;
+      --sti-ref-warning-12: #ffeee0;
+      --sti-ref-warning-ink-strong: #0b0b0c;
+      --sti-ref-warning-fill-more-hover: #f8c05a;
+      --sti-ref-danger-1: #140707;
+      --sti-ref-danger-2: #210d0b;
+      --sti-ref-danger-3: #300d0c;
+      --sti-ref-danger-4: #410d0d;
+      --sti-ref-danger-5: #510d0f;
+      --sti-ref-danger-6: #610f12;
+      --sti-ref-danger-7: #761719;
+      --sti-ref-danger-8: #972728;
+      --sti-ref-danger-11: #fe8b83;
+      --sti-ref-danger-12: #ffecea;
+      --sti-ref-danger-ink-strong: #0b0b0c;
+      --sti-ref-danger-fill-more: #fe8b83;
+      --sti-ref-danger-fill-more-hover: #ffecea;
+      --sti-ref-danger-ink-more: #0b0b0c;
+      --sti-ref-info-1: #050c11;
+      --sti-ref-info-2: #07151c;
+      --sti-ref-info-3: #031d2a;
+      --sti-ref-info-4: #012636;
+      --sti-ref-info-5: #012f42;
+      --sti-ref-info-6: #02394e;
+      --sti-ref-info-7: #034760;
+      --sti-ref-info-8: #055e7f;
+      --sti-ref-info-10: #70cffe;
+      --sti-ref-info-11: #69bbed;
+      --sti-ref-info-12: #e5f3ff;
+      --sti-ref-info-ink-strong: #0b0b0c;
+      --sti-ref-info-fill-more-hover: #70cffe;
+      --sti-ref-focus-ring: #50c2f6;
+      --sti-ref-signal-text: #50c2f6;
+      --sti-ref-shadow-1: rgb(3 3 4 / 0.6);
+      --sti-ref-shadow-2: rgb(3 3 4 / 0.4);
+      --sti-ref-scrim: rgb(3 3 4 / 0.7);
+    }
+    :root[data-theme="light"],
+    :root[data-theme="light"] [data-theme],
+    :root[data-theme="light"] [data-brand="stisocial"],
+    :root[data-theme="light"] [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+      --sti-ref-neutral-1: #fcfcfc;
+      --sti-ref-neutral-2: #f8f8f9;
+      --sti-ref-neutral-3: #f0f0f2;
+      --sti-ref-neutral-4: #e8e8ec;
+      --sti-ref-neutral-5: #e1e1e5;
+      --sti-ref-neutral-6: #d8d8dd;
+      --sti-ref-neutral-7: #ccccd2;
+      --sti-ref-neutral-8: #b8b8bf;
+      --sti-ref-neutral-9: #727279;
+      --sti-ref-neutral-10: #67676e;
+      --sti-ref-neutral-11: #64646b;
+      --sti-ref-neutral-12: #19191d;
+      --sti-ref-neutral-ink-strong: #fcfcfc;
+      --sti-ref-neutral-fill-more: #64646b;
+      --sti-ref-neutral-fill-more-hover: #19191d;
+      --sti-ref-neutral-ink-more: #fcfcfc;
+      --sti-ref-accent-1: #f9fdff;
+      --sti-ref-accent-2: #f1faff;
+      --sti-ref-accent-3: #e0f4ff;
+      --sti-ref-accent-4: #d0eeff;
+      --sti-ref-accent-5: #bfe8fe;
+      --sti-ref-accent-6: #abe2fe;
+      --sti-ref-accent-7: #8ed8fe;
+      --sti-ref-accent-8: #67c6f4;
+      --sti-ref-accent-10: #3eb5ea;
+      --sti-ref-accent-11: #076997;
+      --sti-ref-accent-12: #02314d;
+      --sti-ref-accent-ink-strong: #fcfcfc;
+      --sti-ref-accent-fill-more-hover: #3eb5ea;
+      --sti-ref-success-1: #f9fdfa;
+      --sti-ref-success-2: #f1fbf3;
+      --sti-ref-success-3: #e0f8e5;
+      --sti-ref-success-4: #cef5d6;
+      --sti-ref-success-5: #bdf0c9;
+      --sti-ref-success-6: #aceabc;
+      --sti-ref-success-7: #98e1ab;
+      --sti-ref-success-8: #79d092;
+      --sti-ref-success-11: #087544;
+      --sti-ref-success-12: #023820;
+      --sti-ref-success-ink-strong: #fcfcfc;
+      --sti-ref-success-fill-more: #087544;
+      --sti-ref-success-fill-more-hover: #023820;
+      --sti-ref-success-ink-more: #fcfcfc;
+      --sti-ref-warning-1: #fefcf8;
+      --sti-ref-warning-2: #fef7ed;
+      --sti-ref-warning-3: #fdeed6;
+      --sti-ref-warning-4: #fde5bf;
+      --sti-ref-warning-5: #fcdda9;
+      --sti-ref-warning-6: #f8d394;
+      --sti-ref-warning-7: #f1c67b;
+      --sti-ref-warning-8: #e2b055;
+      --sti-ref-warning-10: #e4a623;
+      --sti-ref-warning-11: #8a5306;
+      --sti-ref-warning-12: #462401;
+      --sti-ref-warning-ink-strong: #fcfcfc;
+      --sti-ref-warning-fill-more-hover: #e4a623;
+      --sti-ref-danger-1: #fffbfb;
+      --sti-ref-danger-2: #fff6f5;
+      --sti-ref-danger-3: #ffebe9;
+      --sti-ref-danger-4: #ffe1de;
+      --sti-ref-danger-5: #fed6d2;
+      --sti-ref-danger-6: #fecac5;
+      --sti-ref-danger-7: #feb9b2;
+      --sti-ref-danger-8: #fe9992;
+      --sti-ref-danger-11: #b22027;
+      --sti-ref-danger-12: #570e0d;
+      --sti-ref-danger-ink-strong: #fcfcfc;
+      --sti-ref-danger-fill-more: #b22027;
+      --sti-ref-danger-fill-more-hover: #570e0d;
+      --sti-ref-danger-ink-more: #fcfcfc;
+      --sti-ref-info-1: #f9fdff;
+      --sti-ref-info-2: #f1faff;
+      --sti-ref-info-3: #e0f4ff;
+      --sti-ref-info-4: #d0eeff;
+      --sti-ref-info-5: #bfe8fe;
+      --sti-ref-info-6: #abe2fe;
+      --sti-ref-info-7: #8ed8fe;
+      --sti-ref-info-8: #67c6f4;
+      --sti-ref-info-10: #3eb5ea;
+      --sti-ref-info-11: #076997;
+      --sti-ref-info-12: #02314d;
+      --sti-ref-info-ink-strong: #fcfcfc;
+      --sti-ref-info-fill-more-hover: #3eb5ea;
+      --sti-ref-focus-ring: #076997;
+      --sti-ref-signal-text: #076997;
+      --sti-ref-shadow-1: rgb(11 11 12 / 0.1);
+      --sti-ref-shadow-2: rgb(11 11 12 / 0.06);
+      --sti-ref-scrim: rgb(11 11 12 / 0.4);
+    }
+    @media (prefers-color-scheme: light) {
+      :root[data-theme="system"],
+      :root[data-theme="system"] [data-theme],
+      :root[data-theme="system"] [data-brand="stisocial"],
+      :root[data-theme="system"] [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+        --sti-ref-neutral-1: #fcfcfc;
+        --sti-ref-neutral-2: #f8f8f9;
+        --sti-ref-neutral-3: #f0f0f2;
+        --sti-ref-neutral-4: #e8e8ec;
+        --sti-ref-neutral-5: #e1e1e5;
+        --sti-ref-neutral-6: #d8d8dd;
+        --sti-ref-neutral-7: #ccccd2;
+        --sti-ref-neutral-8: #b8b8bf;
+        --sti-ref-neutral-9: #727279;
+        --sti-ref-neutral-10: #67676e;
+        --sti-ref-neutral-11: #64646b;
+        --sti-ref-neutral-12: #19191d;
+        --sti-ref-neutral-ink-strong: #fcfcfc;
+        --sti-ref-neutral-fill-more: #64646b;
+        --sti-ref-neutral-fill-more-hover: #19191d;
+        --sti-ref-neutral-ink-more: #fcfcfc;
+        --sti-ref-accent-1: #f9fdff;
+        --sti-ref-accent-2: #f1faff;
+        --sti-ref-accent-3: #e0f4ff;
+        --sti-ref-accent-4: #d0eeff;
+        --sti-ref-accent-5: #bfe8fe;
+        --sti-ref-accent-6: #abe2fe;
+        --sti-ref-accent-7: #8ed8fe;
+        --sti-ref-accent-8: #67c6f4;
+        --sti-ref-accent-10: #3eb5ea;
+        --sti-ref-accent-11: #076997;
+        --sti-ref-accent-12: #02314d;
+        --sti-ref-accent-ink-strong: #fcfcfc;
+        --sti-ref-accent-fill-more-hover: #3eb5ea;
+        --sti-ref-success-1: #f9fdfa;
+        --sti-ref-success-2: #f1fbf3;
+        --sti-ref-success-3: #e0f8e5;
+        --sti-ref-success-4: #cef5d6;
+        --sti-ref-success-5: #bdf0c9;
+        --sti-ref-success-6: #aceabc;
+        --sti-ref-success-7: #98e1ab;
+        --sti-ref-success-8: #79d092;
+        --sti-ref-success-11: #087544;
+        --sti-ref-success-12: #023820;
+        --sti-ref-success-ink-strong: #fcfcfc;
+        --sti-ref-success-fill-more: #087544;
+        --sti-ref-success-fill-more-hover: #023820;
+        --sti-ref-success-ink-more: #fcfcfc;
+        --sti-ref-warning-1: #fefcf8;
+        --sti-ref-warning-2: #fef7ed;
+        --sti-ref-warning-3: #fdeed6;
+        --sti-ref-warning-4: #fde5bf;
+        --sti-ref-warning-5: #fcdda9;
+        --sti-ref-warning-6: #f8d394;
+        --sti-ref-warning-7: #f1c67b;
+        --sti-ref-warning-8: #e2b055;
+        --sti-ref-warning-10: #e4a623;
+        --sti-ref-warning-11: #8a5306;
+        --sti-ref-warning-12: #462401;
+        --sti-ref-warning-ink-strong: #fcfcfc;
+        --sti-ref-warning-fill-more-hover: #e4a623;
+        --sti-ref-danger-1: #fffbfb;
+        --sti-ref-danger-2: #fff6f5;
+        --sti-ref-danger-3: #ffebe9;
+        --sti-ref-danger-4: #ffe1de;
+        --sti-ref-danger-5: #fed6d2;
+        --sti-ref-danger-6: #fecac5;
+        --sti-ref-danger-7: #feb9b2;
+        --sti-ref-danger-8: #fe9992;
+        --sti-ref-danger-11: #b22027;
+        --sti-ref-danger-12: #570e0d;
+        --sti-ref-danger-ink-strong: #fcfcfc;
+        --sti-ref-danger-fill-more: #b22027;
+        --sti-ref-danger-fill-more-hover: #570e0d;
+        --sti-ref-danger-ink-more: #fcfcfc;
+        --sti-ref-info-1: #f9fdff;
+        --sti-ref-info-2: #f1faff;
+        --sti-ref-info-3: #e0f4ff;
+        --sti-ref-info-4: #d0eeff;
+        --sti-ref-info-5: #bfe8fe;
+        --sti-ref-info-6: #abe2fe;
+        --sti-ref-info-7: #8ed8fe;
+        --sti-ref-info-8: #67c6f4;
+        --sti-ref-info-10: #3eb5ea;
+        --sti-ref-info-11: #076997;
+        --sti-ref-info-12: #02314d;
+        --sti-ref-info-ink-strong: #fcfcfc;
+        --sti-ref-info-fill-more-hover: #3eb5ea;
+        --sti-ref-focus-ring: #076997;
+        --sti-ref-signal-text: #076997;
+        --sti-ref-shadow-1: rgb(11 11 12 / 0.1);
+        --sti-ref-shadow-2: rgb(11 11 12 / 0.06);
+        --sti-ref-scrim: rgb(11 11 12 / 0.4);
+      }
+    }
+  }
+  /* Windows zorunlu renkler: anlamlı katman kullanıcının sistem paletini izler */
+  @media (forced-colors: active) {
+    :where(:root, [data-brand], [data-theme]) {
+      --sti-bg-canvas: Canvas;
+      --sti-bg-subtle: Canvas;
+      --sti-bg-surface: Canvas;
+      --sti-bg-surface-hover: Canvas;
+      --sti-bg-surface-active: Canvas;
+      --sti-bg-inverse: Canvas;
+      --sti-border-subtle: GrayText;
+      --sti-border: CanvasText;
+      --sti-border-strong: CanvasText;
+      --sti-border-control: CanvasText;
+      --sti-border-selected: CanvasText;
+      --sti-fg: CanvasText;
+      --sti-fg-muted: CanvasText;
+      --sti-fg-inverse: CanvasText;
+      --sti-fg-link: LinkText;
+      --sti-fg-link-hover: LinkText;
+      --sti-fg-signal: CanvasText;
+      --sti-focus-ring: Highlight;
+      --sti-selection-bg: Highlight;
+      --sti-selection-fg: HighlightText;
+      --sti-scrim: transparent;
+      --sti-shadow-color-1: transparent;
+      --sti-shadow-color-2: transparent;
+      --sti-fill-neutral: Highlight;
+      --sti-fill-neutral-hover: Highlight;
+      --sti-fg-on-neutral: HighlightText;
+      --sti-fill-accent: Highlight;
+      --sti-fill-accent-hover: Highlight;
+      --sti-fg-on-accent: HighlightText;
+      --sti-fill-success: Highlight;
+      --sti-fill-success-hover: Highlight;
+      --sti-fg-on-success: HighlightText;
+      --sti-fill-warning: Highlight;
+      --sti-fill-warning-hover: Highlight;
+      --sti-fg-on-warning: HighlightText;
+      --sti-fill-danger: Highlight;
+      --sti-fill-danger-hover: Highlight;
+      --sti-fg-on-danger: HighlightText;
+      --sti-fill-info: Highlight;
+      --sti-fill-info-hover: Highlight;
+      --sti-fg-on-info: HighlightText;
+      --sti-fg-accent: CanvasText;
+      --sti-fg-accent-strong: CanvasText;
+      --sti-bg-accent-subtle: Canvas;
+      --sti-border-accent: CanvasText;
+      --sti-fg-success: CanvasText;
+      --sti-fg-success-strong: CanvasText;
+      --sti-bg-success-subtle: Canvas;
+      --sti-border-success: CanvasText;
+      --sti-fg-warning: CanvasText;
+      --sti-fg-warning-strong: CanvasText;
+      --sti-bg-warning-subtle: Canvas;
+      --sti-border-warning: CanvasText;
+      --sti-fg-danger: CanvasText;
+      --sti-fg-danger-strong: CanvasText;
+      --sti-bg-danger-subtle: Canvas;
+      --sti-border-danger: CanvasText;
+      --sti-fg-info: CanvasText;
+      --sti-fg-info-strong: CanvasText;
+      --sti-bg-info-subtle: Canvas;
+      --sti-border-info: CanvasText;
+    }
+  }
+}
+
+/* fonts.css */
+@font-face {
+  font-family: "STI Numeric";
+  src: url("./fonts/sti-numeric-400.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "STI Numeric";
+  src: url("./fonts/sti-numeric-500.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "STI Numeric";
+  src: url("./fonts/sti-numeric-600.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0030-0039;
+}
+@font-face {
+  font-family: "STI Numeric";
+  src: url("./fonts/sti-numeric-700.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0030-0039;
+}
+
+/* General Sans 400 -> Arial */
+@font-face {
+  font-family: "STI Text Fallback";
+  src:
+    local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"),
+    local("LiberationSans");
+  font-weight: 400;
+  font-style: normal;
+  size-adjust: 99.17%;
+  ascent-override: 101.84%;
+  descent-override: 24.20%;
+  line-gap-override: 10.08%;
+}
+
+/* General Sans 500 -> Arial */
+@font-face {
+  font-family: "STI Text Fallback";
+  src:
+    local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"),
+    local("LiberationSans");
+  font-weight: 500;
+  font-style: normal;
+  size-adjust: 102.22%;
+  ascent-override: 98.80%;
+  descent-override: 23.48%;
+  line-gap-override: 9.78%;
+}
+
+/* General Sans 600 -> Arial Bold */
+@font-face {
+  font-family: "STI Text Fallback";
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"),
+    local("Liberation Sans Bold"), local("LiberationSans-Bold");
+  font-weight: 600;
+  font-style: normal;
+  size-adjust: 98.43%;
+  ascent-override: 102.61%;
+  descent-override: 24.38%;
+  line-gap-override: 10.16%;
+}
+
+/* General Sans 700 -> Arial Bold */
+@font-face {
+  font-family: "STI Text Fallback";
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"),
+    local("Liberation Sans Bold"), local("LiberationSans-Bold");
+  font-weight: 700;
+  font-style: normal;
+  size-adjust: 101.37%;
+  ascent-override: 99.63%;
+  descent-override: 23.68%;
+  line-gap-override: 9.86%;
+}
+
+/* General Sans 400 -> Roboto 400 (Android) */
+@font-face {
+  font-family: "STI Text Fallback Android";
+  src: local("Roboto-Regular"), local("Roboto Regular"), local("Roboto");
+  font-weight: 400;
+  font-style: normal;
+  size-adjust: 100.06%;
+  ascent-override: 100.94%;
+  descent-override: 23.99%;
+  line-gap-override: 9.99%;
+}
+
+/* General Sans 500 -> Roboto 500 (Android) */
+@font-face {
+  font-family: "STI Text Fallback Android";
+  src: local("Roboto-Medium"), local("Roboto Medium"), local("Roboto");
+  font-weight: 500;
+  font-style: normal;
+  size-adjust: 102.00%;
+  ascent-override: 99.02%;
+  descent-override: 23.53%;
+  line-gap-override: 9.80%;
+}
+
+/* General Sans 600 -> Roboto 600 (Android) */
+@font-face {
+  font-family: "STI Text Fallback Android";
+  src: local("Roboto-Bold"), local("Roboto Bold"), local("Roboto");
+  font-weight: 600;
+  font-style: normal;
+  size-adjust: 105.08%;
+  ascent-override: 96.12%;
+  descent-override: 22.84%;
+  line-gap-override: 9.52%;
+}
+
+/* General Sans 700 -> Roboto 700 (Android) */
+@font-face {
+  font-family: "STI Text Fallback Android";
+  src: local("Roboto-Bold"), local("Roboto Bold"), local("Roboto");
+  font-weight: 700;
+  font-style: normal;
+  size-adjust: 107.72%;
+  ascent-override: 93.76%;
+  descent-override: 22.28%;
+  line-gap-override: 9.28%;
+}
+
+/* Clash Display 700 -> Arial Bold */
+@font-face {
+  font-family: "STI Display Fallback";
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Arimo-Bold"),
+    local("Liberation Sans Bold"), local("LiberationSans-Bold");
+  font-weight: 700;
+  font-style: normal;
+  unicode-range: U+0000-20B9, U+20BB-10FFFF;
+  size-adjust: 104.08%;
+  ascent-override: 85.51%;
+  descent-override: 24.02%;
+  line-gap-override: 8.65%;
+}
+
+/* Clash Display 700 -> Roboto 700 (Android) */
+@font-face {
+  font-family: "STI Display Fallback Android";
+  src: local("Roboto-Bold"), local("Roboto Bold"), local("Roboto");
+  font-weight: 700;
+  font-style: normal;
+  unicode-range: U+0000-20B9, U+20BB-10FFFF;
+  size-adjust: 110.61%;
+  ascent-override: 80.47%;
+  descent-override: 22.60%;
+  line-gap-override: 8.14%;
+}
+
+/* reset.css */
+@layer sti.reset {
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
+
+  :where(*) {
+    margin: 0;
+  }
+
+  :where(html) {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(img, picture, video, canvas, svg) {
+    display: block;
+    max-width: 100%;
+  }
+
+  :where(img, video) {
+    height: auto;
+  }
+
+  :where(input, button, textarea, select) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  :where(table) {
+    border-collapse: collapse;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6, p, li, dd, figcaption, blockquote) {
+    overflow-wrap: break-word;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    text-wrap: balance;
+  }
+
+  :where(p, li, dd, figcaption, blockquote) {
+    text-wrap: pretty;
+  }
+
+  /* `hidden` her zaman gizler: bir bileşenin `display: flex` kuralı bile onu açamaz. */
+  :where([hidden]:not([hidden="until-found"])) {
+    /* biome-ignore lint/complexity/noImportantStyles: hidden özniteliği hiçbir stile yenilmemeli */
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(*, *::before, *::after) {
+      /* biome-ignore-start lint/complexity/noImportantStyles: kullanıcının hareket tercihi her kuralı ezmeli */
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+      /* biome-ignore-end lint/complexity/noImportantStyles: kullanıcının hareket tercihi her kuralı ezmeli */
+    }
+  }
+}
+
+/* base.css */
+@layer sti.base {
+  :where(html) {
+    /* Yapışkan başlığın altında kalmasın diye çapa bağlantılarının kaydırma payı (uygulama verir). */
+    --sti-scroll-offset: 0px;
+    scroll-padding-block-start: var(--sti-scroll-offset);
+    background: var(--sti-bg-canvas);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-synthesis: none;
+    font-kerning: normal;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scrollbar-color: var(--sti-border-strong) transparent;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(html:focus-within) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  :where(body) {
+    min-height: 100dvh;
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  :where(a) {
+    color: var(--sti-fg-link);
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: var(--sti-link-underline-offset);
+  }
+
+  :where(a:hover) {
+    color: var(--sti-fg-link-hover);
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--sti-font-mono);
+    font-size: 0.9375em;
+  }
+
+  /*
+   * Tablolarda, saatlerde ve ölçümlerde rakamlar eşit genişlikte: stisocial'da STI Numeric (yalnız
+   * 0–9; harfler, ayraçlar ve ₺ metin yazı tipinde kalır), müşteri markalarında yazı tipinin kendi
+   * tablo rakamları.
+   */
+  :where(td, th, time, data, output, meter, progress) {
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(abbr[title]) {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+
+  :where(hr) {
+    border: 0;
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  :where(::placeholder) {
+    color: var(--sti-fg-muted);
+    opacity: 1;
+  }
+
+  ::selection {
+    background: var(--sti-selection-bg);
+    color: var(--sti-selection-fg);
+  }
+
+  /* Odak halkası yalnız klavyeyle gezilirken görünür (WCAG 2.4.7, 2.4.13: 2 piksel, 3:1). */
+  :where(:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  :where(:focus:not(:focus-visible)) {
+    outline: none;
+  }
+
+  /* Dokunmatikte çift dokunma yakınlaştırmasının gecikmesi kalkar. */
+  :where(a, button, [role="button"], input, label, select, summary, textarea) {
+    touch-action: manipulation;
+  }
+
+  :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, label[for]) {
+    cursor: pointer;
+  }
+
+  @media print {
+    /* Kâğıt her zaman açık temadadır: koyu zemin basılmaz, light-dark() açık değeri seçer. */
+    :where(:root, [data-theme]) {
+      color-scheme: light;
+    }
+
+    :where([data-print="hidden"]) {
+      display: none;
+    }
+
+    :where(img, svg, figure, pre, blockquote, table, tr) {
+      break-inside: avoid;
+    }
+
+    :where(h1, h2, h3, h4) {
+      break-after: avoid;
+    }
+  }
+}
+
+@layer sti.utilities {
+  /* Ekranda görünmeyen, ekran okuyucunun okuduğu metin. */
+  :where(.sti-visually-hidden),
+  :where(.sti-visually-hidden-focusable:not(:focus-within)) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/*
+ * Yüzen eylem düğmesi payı (FloatingActionButton, tanim.md §1): sabit düğme sayfanın son içeriğini
+ * ve klavyeyle odaklanan öğeyi örtmesin (WCAG 2.2 2.4.11). Sınıf sayfanın içerik kabına verilir
+ * (`<body>` ya da ana içerik; iç kaydırma kabı varsa o kap): altta düğme yüksekliği + alt pay +
+ * güvenli alan + nefes payı kadar boşluk açılır; aynı değer kaydırma payı olur (kabın kendisinde ve
+ * belgenin kaydırma kökünde, `html`). Alt gezinme çubuğu olan sayfada `--sti-fab-offset-block` ile
+ * birlikte `--sti-fab-clearance-extra` de çubuğun yüksekliği kadar verilir.
+ */
+@layer sti.utilities {
+  :where(html:has(.sti-fab-clearance), .sti-fab-clearance) {
+    --sti-fab-clearance: calc(
+      var(--sti-control-h-lg) +
+      var(--sti-space-4) +
+      var(--sti-space-4) +
+      var(--sti-fab-clearance-extra, 0px) +
+      env(safe-area-inset-bottom, 0px)
+    );
+    scroll-padding-block-end: var(--sti-fab-clearance);
+  }
+
+  /* Geniş ekranda düğmenin alt payı space-6'dır (FloatingActionButton.module.css). */
+  @media (min-width: 48rem) {
+    :where(html:has(.sti-fab-clearance), .sti-fab-clearance) {
+      --sti-fab-clearance: calc(
+        var(--sti-control-h-lg) +
+        var(--sti-space-6) +
+        var(--sti-space-4) +
+        var(--sti-fab-clearance-extra, 0px) +
+        env(safe-area-inset-bottom, 0px)
+      );
+    }
+  }
+
+  :where(.sti-fab-clearance) {
+    padding-block-end: var(--sti-fab-clearance);
+  }
+}
+
+/* scoped.css */
+@layer sti.components {
+  /*
+   * Surface ters zemin: en yakın temalı atanın (yoksa stisocial varsayılanı koyu) tersine geçer;
+   * alt ağaçtaki her bileşen karşı temanın izinli çiftleriyle çizilir. `@scope` desteklemeyen
+   * tarayıcıda yedek: `bg-inverse` üzerinde `fg-inverse` (izinli çift).
+   */
+  [data-sti-surface][data-background="inverse"] {
+    --sti-surface-bg: var(--sti-bg-inverse);
+    --sti-surface-fg: var(--sti-fg-inverse);
+  }
+
+  @scope (:root:not([data-theme="light"], [data-theme="system"]), [data-theme="dark"]) {
+    [data-sti-surface][data-background="inverse"] {
+      color-scheme: light;
+      --sti-surface-bg: var(--sti-bg-canvas);
+      --sti-surface-fg: var(--sti-fg);
+    }
+  }
+
+  @scope ([data-theme="light"]) {
+    [data-sti-surface][data-background="inverse"] {
+      color-scheme: dark;
+      --sti-surface-bg: var(--sti-bg-canvas);
+      --sti-surface-fg: var(--sti-fg);
+    }
+  }
+
+  /* "system": işletim sistemi açıksa koyu, koyuysa açık. */
+  @scope ([data-theme="system"]) {
+    [data-sti-surface][data-background="inverse"] {
+      color-scheme: dark;
+      --sti-surface-bg: var(--sti-bg-canvas);
+      --sti-surface-fg: var(--sti-fg);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    @scope ([data-theme="system"]) {
+      [data-sti-surface][data-background="inverse"] {
+        color-scheme: light;
+      }
+    }
+  }
+}
+
+/*
+ * React Aria'nın gizli input sarmalayıcısı (onay kutusu, anahtar, radyo): sunucudaki satır içi
+ * `style` sıkı CSP'de engellense de input görünmez kalır (özet: src/csp/csp.ts). Kural genel ve
+ * yalnız React Aria'nın işaretlediği etiketlerin, input taşıyan sınıfsız ilk çocuğunu hedefler.
+ */
+@layer sti.base {
+  :where(label[data-rac] > span:not([class]):has(> input)) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+  }
+}
+
+/*
+ * Select'in otomatik doldurma için çizdiği gizli yerel seçim kabı: sıkı CSP satır içi stili engellese
+ * de görünmez kalır (özet: src/csp/csp.ts, ARIA_HIDDEN_SELECT_STYLE).
+ */
+@layer sti.base {
+  :where(div[data-react-aria-prevent-focus][aria-hidden="true"]:has(select)) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+  }
+}
+
+/* Etiket grubu hücresi (ChipGroup): sıkı CSP satır içi stili engellese de düzen bozulmaz. */
+@layer sti.base {
+  :where([role="row"] > [role="gridcell"][style]) {
+    display: contents;
+  }
+}
+
+/* Dosya seçicinin (FileUpload) React Aria dosya alanı: sıkı CSP satır içi stili engellese de gizli. */
+@layer sti.base {
+  :where(input[type="file"][data-rac][style]) {
+    display: none;
+  }
+}
+
+/*
+ * Parçalı tarih alanı (DateField, TimeField, DatePicker): sıkı CSP satır içi stili engellese de
+ * parçalar yazı yönünden yalıtılır ve imleç görünmez.
+ */
+@layer sti.base {
+  :where([role="group"][data-rac][style]:has(> [role="spinbutton"])) {
+    unicode-bidi: isolate;
+  }
+
+  :where([role="spinbutton"][data-rac][contenteditable]) {
+    caret-color: transparent;
+  }
+}