/* Veraius Design System - Base Styles */
/* Material Symbols Outlined support (ligatures) */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url('../fonts/material-symbols/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined' !important;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
/* text-transform and letter-spacing MUST be forced: Material Symbols icons are
LIGATURES (the text "chevron_right" becomes a glyph). If an ancestor applies
text-transform: uppercase the source text renders as "CHEVRON_RIGHT", which has
no ligature → the raw word shows. Any letter-spacing inserts gaps that break
ligature formation the same way. These inherit, so a parent label style (e.g. an
uppercase breadcrumb/eyebrow) silently corrupts every icon inside it. !important
guarantees icons stay glyphs no matter the surrounding label styling. */
letter-spacing: normal !important;
text-transform: none !important;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* Fonts are loaded via in the host page (App.razor / index.html) with
preconnect + rel=stylesheet for non-blocking parallel loading. Do NOT
re-import them here — @import inside CSS blocks CSSOM construction and
defeats HTTP/2 stream multiplexing. See design review 2026-04-14. */
/* ============================
CSS Custom Properties (Theme-agnostic)
Foundation tokens — see docs/design-system/foundations.md
Canonical source: tools/tokens/base.json
============================ */
:root {
/* Typography — DESIGN.md: Manrope for display, headlines, body, and labels */
--font-headline: 'Manrope', sans-serif;
--font-body: 'Manrope', sans-serif;
--font-label: 'Manrope', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
/* Type Scale — modular (1.125 ratio, hand-tuned for display tiers)
Used by .display-*, .headline-*, .title-*, .body-*, .label-* and .va-text-* utilities */
--font-size-xs: 0.625rem; /* 10px — label-xs */
--font-size-2xs: 0.6875rem; /* 11px — label-sm */
--font-size-sm: 0.75rem; /* 12px — body-sm, label-md */
--font-size-md: 0.8125rem; /* 13px */
--font-size-base: 0.875rem; /* 14px — body-md, title-sm, label-lg */
--font-size-lg: 1rem; /* 16px — body-lg, title-md */
--font-size-xl: 1.125rem; /* 18px — title-lg */
--font-size-2xl: 1.25rem; /* 20px — headline-sm */
--font-size-3xl: 1.5rem; /* 24px — headline-md */
/* Fluid tiers from 4xl upward — viewport-scaled with clamp() to prevent
display-lg (56px) from overflowing narrow phones. Floors preserve
readability; ceilings match the original static values. */
--font-size-4xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); /* 24→30px */
--font-size-5xl: clamp(1.625rem, 1.25rem + 1.8vw, 2rem); /* 26→32px — headline-lg, display-sm */
--font-size-6xl: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); /* 28→36px */
--font-size-7xl: clamp(1.875rem, 1.35rem + 2.4vw, 2.5rem); /* 30→40px — display-md */
--font-size-8xl: clamp(2rem, 1.4rem + 3vw, 3rem); /* 32→48px */
--font-size-9xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem); /* 36→56px — display-lg */
/* Line Height Scale */
--leading-tight: 1.1;
--leading-snug: 1.2;
/* KÜÇÜK PUNTO İÇİN AYRI SATIR YÜKSEKLİĞİ. Oran tabanlı satır yüksekliği
puntoyla ölçeklenir ve küçükte ÇÖKER: 1.2 değeri 36px başlıkta 7.2px
boşluk verirken 11px etikette yalnız 2.2px bırakıyor — sarmalanan
etiketin satırları birbirine yapışıyor (ÖLÇÜLDÜ 2026-09-11,
/observability/scheduled-jobs). Minimum okunabilir boşluk 3px.
--leading-snug'a DOKUNULMADI: başlıklarda 1.2 doğru, orada bol boşluk
veriyor; bu token yalnız .label-sm/.label-xs gibi küçük etiketler için. */
--leading-label: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
--leading-loose: 1.75;
/* Letter Spacing Scale */
--tracking-tightest: 0; /* display */
--tracking-tighter: 0; /* headline */
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em; /* label */
--tracking-widest: 0.08em; /* tech-label (Mixed) */
--tracking-max: 0.1em; /* label-xs */
/* MUTLAK renkler — TEMAYA GÖRE DEĞİŞMEZ. ÖLÇÜLDÜ 2026-09-16:
`var(--white, #ffffff)` gibi yazımlar depoda yedeğe DAYANIYORDU
(token tanımlı değildi), yani yedek ölü değil CANLIYDI ve
`var(--token, hex)` deseninin ne zaman güvenli olduğunu ölçmeyi
imkânsız kılıyordu.
Bunlar yüzey rampasının parçası DEĞİLDİR — `--surface-container-lowest`
light'ta beyazdır ama dark'ta koyudur. Buradaki iki sabit marka
logosu / dış kaynaklı grafik gibi temadan BAĞIMSIZ olması gereken
yerler içindir (tek kullanıcı: `.provider-card` marka ön planı).
Yüzey ya da metin rengi için KULLANILMAZ — onlar tema token'ıdır. */
--white: #ffffff;
--black: #000000;
/* Radii — base scale defaults. Named radii (--btn/card/input/panel-radius)
are generated per-theme by tools/generate-theme-css.mjs. These scale tiers
are used directly by a handful of components; all three themes carry a
gentle corner softening per tools/tokens/{dark,light,mixed}.json. */
--radius-none: 0px;
--radius-sm: 0.25rem;
/* --radius-xs aliases --radius-sm so it tracks the per-theme
override in veraius-mixed.css instead of staying flat there. */
--radius-xs: var(--radius-sm);
--radius-md: 0.5rem;
--radius-lg: 0.625rem;
--radius-xl: 0.875rem;
--radius-2xl: 1.25rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
/* Pill shape for badges/chips/dots — fully round, intentional
exception to the 0px Monolith corner rule (a pill is a shape,
not a corner radius). */
--pill-radius: 9999px;
--transition-fast: 150ms ease;
--transition-default: 300ms ease;
--transition-slow: 500ms ease;
--transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* --transition-btn, --ghost-border ve --shadow-opacity TEMA-YETKILI —
themes/{light,dark,mixed}.css'te tanimlanir. Burada YENIDEN TANIMLAMA:
`:root` ile `[data-theme="..."]` ayni ozgulluge sahip ve veraius-base.css
tema dosyasindan SONRA yuklendigi icin buradaki bir :root bildirimi
temayi ezer.
Golge OLCEGI (--shadow-xs..2xl) burada tanimli ve tema-bagimsiz; tema
farki yalniz --shadow-opacity carpanindan gelir (koyu zeminde siyah
golge gorunmez, carpan artar). Boylece alti golge tek yerden yonetilir. */
/* Z-Index Scale — Layering hierarchy */
--z-base: 1;
--z-sticky: 10;
--z-dropdown: 100;
--z-overlay: 200;
--z-toast: 400;
--z-topbar: 500;
/* MODAL KABUĞUN ÜSTÜNDE. ÖLÇÜLDÜ 2026-09-18, /agents/configuration canlı DOM:
.vdrawer z-index 300 (--z-modal)
header.app-topbar z-index 500 (--z-topbar)
Çekmece açıkken üst bar onun BAŞLIĞINI örtüyordu — ajan adı arama
kutusunun altında kalıyor, kapatma düğmesi erişilemiyordu (ölçüldü:
başlık üst=17px, üst barın altı=64px, çakışma gerçek).
Kusur bileşende değil ÖLÇEKTEYDİ: bir modal tanımı gereği kabuğu
örter. 29 kullanım var (VDrawer, VDialog ve 27 sayfa modalı) —
token'ı düzeltmek hepsini birden onarır.
Atlama bağlantısının (600) ALTINDA bırakıldı: klavye kullanıcısının
ilk durağı her şeyin üstünde kalmalı (aynı dosyada ölçülmüş karar). */
--z-modal: 550;
/* Atlama bağlantısı ölçeğin EN ÜSTÜNDE olmalı: klavye kullanıcısının ilk
durağıdır ve odaklandığında hiçbir katman onu örtmemeli.
ÖLÇÜLDÜ 2026-09-02, /home canlı DOM:
a.skip-to-content z-index 400 (--z-toast)
header.app-topbar z-index 500 (--z-topbar)
yani atlama bağlantısı başlık çubuğunun ALTINDA kalıyordu.
Ayrıca skip-to-content depoda DÖRT ayrı yerde farklı değerle tanımlıydı
(9999, 10000, --z-toast) — hangisinin kazandığı yükleme sırasına bağlıydı. */
--z-skip-link: 600;
/* SİSTEM KATMANLARI — kabuğun ÜSTÜNDE duran, uygulamanın tamamını
ilgilendiren yüzeyler. Ölçek burada bitiyordu ve bu yüzeyler kendi
değerlerini uyduruyordu:
.pwa-install-banner 18950
.cookie-consent-banner 19000
.session-idle-backdrop 19500 / dialog 19501
#blazor-error-ui 20000
#veraius-lightbox 20000 ← hata bandıyla ÇAKIŞIYOR
#components-reconnect 25000
.oto-overlay/panel 30000 / 30001
.toast-stack 30000 ← onboarding ile ÇAKIŞIYOR
ÖLÇÜLDÜ 2026-09-03: 33 bildirim 1000+ değerde, 46 farklı ham z-index.
İki çakışma gerçek: aynı değerde iki farklı yüzey → hangisi üstte
kalacağı DOM sırasına düşüyor, tasarım kararına değil. */
--z-banner: 700; /* PWA kurulum, çerez onayı — bilgilendirme */
--z-session: 800; /* oturum zaman aşımı — eylem gerektirir */
--z-lightbox: 900; /* tam ekran görsel */
--z-notify: 950; /* toast yığını — kabuğun üstünde, tur/hatanın altında */
--z-onboarding: 1000; /* tur — her şeyin üstünde ama hatanın altında */
--z-error: 1100; /* Blazor hata bandı, devre kopması — SON SÖZ */
/* Spacing Scale — 8px grid */
--space-0: 0;
--space-1: 0.25rem;
/* İNCE KADEME. Ölçek 0'dan doğrudan 4px'e sıçrıyordu ve aradaki boşluk
kod tarafından SABİT PİKSELLE dolduruluyordu: ölçüldü 2026-09-11,
131 `gap: 1-2px` kullanımı var — rozet grupları, ikon dizileri, sıkı
satır aralıkları. Bunlar kasıtlı; sıfırlamak öğeleri birbirine
yapıştırır, 4px'e çıkarmak grupları dağıtır.
Ölçeğin kendisi eksikti, kullanımlar değil. */
--space-px: 1px;
--space-0-5: 2px;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 2.5rem; /* 40px */
--space-8: 3rem; /* 48px */
--space-9: 4rem; /* 64px */
--space-10: 5rem; /* 80px */
--space-12: 6rem; /* 96px */
--space-16: 8rem;
--space-11: 5.5rem;
--space-13: 6.5rem;
--space-14: 7rem;
--space-15: 7.5rem;
--space-17: 9rem; /* 128px */
/* --spacing-* aliases — many scoped stylesheets reference the
longer name. Alias onto the canonical --space-* scale so those
padding/gap/margin declarations resolve instead of being dropped. */
--spacing-0: var(--space-0);
--spacing-1: var(--space-1);
--spacing-2: var(--space-2);
--spacing-3: var(--space-3);
--spacing-4: var(--space-4);
--spacing-5: var(--space-5);
--spacing-6: var(--space-6);
--spacing-7: var(--space-7);
--spacing-8: var(--space-8);
--spacing-9: var(--space-9);
--spacing-10: var(--space-10);
--spacing-12: var(--space-12);
--spacing-16: var(--space-16);
/* Icon Size Scale — use on Material Symbols, svg, img.
Consumed by the primitive (Components/UI/VIcon.razor) via
the .vicon-* utility classes defined later in this file. */
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;
/* Layout — caps for the main content surface so 4K / ultra-wide
monitors don't stretch typography to unreadable line lengths. The
cap sits above the 1440 design grid so 2K/QHD monitors fill out the
usable area instead of stranding a narrow column in empty space;
readability is preserved by the fluid surface padding (see
--content-pad-x) rather than by an aggressively low width cap.
AppShell centers content above this threshold via margin-inline:auto. */
--content-max-width: 2040px;
/* Fluid horizontal padding for the content surface — scales smoothly
with the viewport so the gutter grows on wide monitors and tightens
on laptops, instead of a fixed value that looks cramped or wasteful
across resolutions. */
--content-pad-x: clamp(1rem, 2.4vw, 3rem);
/* DİKEY PAY GENİŞLİĞE BAĞLI OLMAMALI. ÖLÇÜLDÜ 2026-09-11 (1920x909):
`1.6vw` geniş monitörde 30.72px üretiyordu ve bu pay üstte+altta, TÜM
uygulamada ödeniyor (app-content-surface tek layout'tan gelir —
AppShellChromeBody). Yatay boşluk genişlikle ölçeklenmeli (satır uzunluğu
okunabilirliği), dikey boşluk ise EKRAN YÜKSEKLİĞİNİN maliyetidir: geniş
ama kısa bir ekranda (1920x909) vw büyüdükçe görünür iş alanı daralıyordu.
Koşular ekranında ÖLÇÜLEN etki: ilk iş satırı 576 → 558px; ilk ekranda görünen
koşu sayısı 4 → 5. */
--content-pad-y: clamp(0.75rem, 1.2vh, 1.25rem);
/* Chat-Specific Tokens */
--chat-message-max-width: 48rem;
/* Height of the floating command dock (mode tabs + tools row + composer +
status bar). Used as bottom padding / scroll padding so messages are never
hidden behind the absolutely-positioned input dock. */
--chat-input-bar-height: 14rem;
/* Responsive conversation width (shared by the message thread + composer so they
stay aligned). Fills ~94% of the available content column on small/medium
screens (so it grows rightward instead of leaving a big void), but caps at
72rem on very wide screens so lines stay comfortably readable. */
--chat-input-max-width: min(94%, 72rem);
--chat-sidebar-width: 20rem;
--chat-sidebar-collapsed: 0rem;
--chat-topbar-height: 3.5rem;
--chat-statusbar-height: 2rem;
--chat-hud-height: 2.5rem;
/* Easing Curves */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
/* Animation Duration Scale */
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-cinematic: 800ms;
/* Aliases for older token names referenced by scoped stylesheets. */
--font-heading: var(--font-headline);
--duration-default: var(--duration-normal);
--transition-base: var(--ease-in-out);
/* Focus Ring */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--primary);
--focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
/* Touch Target Tokens (WCAG 2.5.5 AAA / 2.5.8 AA, Apple HIG, Material).
Use these instead of hard-coded pixel values on any clickable surface
(buttons, links, icon-only triggers, chips). The audit script
`tools/audit-touch-targets.mjs` enforces the AA minimum on common
interactive selectors and reports violations.
--touch-target-min : 44px — WCAG 2.5.5 AAA (recommended baseline)
--touch-target-min-aa : 24px — WCAG 2.5.8 AA (regulatory floor; only
acceptable when surrounded by enough spacing
that adjacent targets are not co-clickable). */
--touch-target-min: 44px;
--touch-target-min-aa: 24px;
/* Button Shadow Tokens — overridable per-theme via tools/generate-theme-css.mjs */
--btn-shadow: 0 2px 4px rgba(var(--overlay-scrim-rgb), 0.1);
--btn-shadow-hover: 0 4px 12px rgba(var(--overlay-scrim-rgb), 0.2), 0 0 0 1px rgba(255,255,255,0.1);
--btn-shadow-active: 0 1px 2px rgba(var(--overlay-scrim-rgb), 0.2);
/* Material Design system color aliases — route md-sys-color-* through
the active Veraius theme so skeleton, badge, skip-link, and the
consolidated focus-visible block pick up the right palette in every
theme (not just dark). */
--md-sys-color-primary: var(--primary);
--md-sys-color-on-primary: var(--on-primary);
--md-sys-color-primary-container: var(--primary-container);
--md-sys-color-on-primary-container: var(--on-primary-container);
--md-sys-color-surface: var(--surface);
--md-sys-color-on-surface: var(--on-surface);
--md-sys-color-surface-container: var(--surface-container);
--md-sys-color-surface-container-high: var(--surface-container-high);
--md-sys-color-outline: var(--outline);
/* ---- PRIMITIVE: notr rampa (13 kademe) ----
Tema-BAGIMSIZ ham rampa. Semantik token'lar (--surface,
--surface-container-*) buna REFERANS verir; bilesen CSS'inde
DOGRUDAN kullanilmaz — o zaman tema degistirmek imkansizlasir.
Kademe yogunlugu VOIT DS Gray rampasindan olculdu: acik ucta dar
(1.07-1.13), koyu uca dogru genis (1.38-1.62). Insan gozu acik
tonlarda kucuk farki daha iyi ayirt ediyor.
OLCULDU 2026-09-12: onceki 6 kademeli yuzey seti light temada
5 degerin TAMAMINI tek bir rampa noktasina sikistiriyordu
(~Slate 25); iki yuzey arasina ara kademe sikistirmak imkansizdi.
Zemin ile kart arasi 1.044 kontrast kaliyor, goz ayirt edemiyordu. */
/* NOTR RAMPA ARTIK TEMA DOSYALARINDA (2026-09-15).
Burada tema-BAGIMSIZ tek bir rampa vardi ve SIFIR kez tuketiliyordu:
24 yuzeyin 24'u elle hex yazilmisti. Baglamaya calisinca ölçüldü ki
tek rampa calismaz — mavi biasli (sat~0.28) oldugu icin light temanin
notr limestone yuzeylerini maviye boyuyordu (tarayicida govde zemini
#f9f9f9 yerine rgb(224,230,237) cikti) ve koyu ucu kaba oldugu icin
5 dark yuzeyi 3 basamaga cokertiyordu.
Simdi her tema KENDI 13 basamakli rampasini tasiyor; capalar o temanin
olculmus yuzey degerleri. Bu dosya artik --neutral-* TANIMLAMAZ:
tanimlarsa temadan SONRA yuklendigi icin onu ezer. */
/* ---- GOLGE OLCEGI (VOIT DS Shadow Notes'tan olculdu) ----
Alti kademe; her biri iki katmanli (yakin + uzak) — tek buyuk
bulanik golge yerine iki katman daha gercek bir yukselti verir.
xs kucuk buton/ikon · sm ikincil buton, input · md birincil buton,
kart · lg modal, dropdown, popover · xl drawer, buyuk overlay ·
2xl en yuksek yukselti. */
/* Tema-basina golge yogunlugu: koyu zeminde siyah golge gorunmez,
carpan artar. Alti golge de bu TEK degiskeni kullanir. */
--shadow-opacity: 1;
--shadow-xs: 0px 1px 2px 0px rgba(0,0,0,calc(0.05 * var(--shadow-opacity)));
--shadow-sm: 0px 1px 3px 0px rgba(0,0,0,calc(0.10 * var(--shadow-opacity))), 0px 1px 2px 0px rgba(0,0,0,calc(0.06 * var(--shadow-opacity)));
--shadow-md: 0px 4px 8px -2px rgba(0,0,0,calc(0.10 * var(--shadow-opacity))), 0px 2px 4px -2px rgba(0,0,0,calc(0.06 * var(--shadow-opacity)));
--shadow-lg: 0px 12px 16px -4px rgba(0,0,0,calc(0.12 * var(--shadow-opacity))), 0px 4px 6px -2px rgba(0,0,0,calc(0.03 * var(--shadow-opacity)));
--shadow-xl: 0px 12px 24px -4px rgba(0,0,0,calc(0.12 * var(--shadow-opacity))), 0px 2px 8px -4px rgba(0,0,0,calc(0.03 * var(--shadow-opacity)));
--shadow-2xl: 0px 24px 48px -12px rgba(0,0,0,calc(0.40 * var(--shadow-opacity)));
/* ---- BACKDROP BLUR OLCEGI (VOIT DS Background Blur Notes) ----
xs kucuk overlay · sm tooltip/kucuk modal · md buyuk modal/popup ·
lg navigasyon menusu, tam-sayfa dialog · xl+ ambient efekt.
VOIT Best Practices: buyuk deger dusuk-uclu cihazda maliyetli. */
--blur-xs: 8px;
--blur-sm: 16px;
--blur-md: 32px;
--blur-lg: 64px;
--blur-xl: 128px;
--blur-2xl: 256px;
--shadow-inset: inset 0px 1px 2px 0px rgba(0,0,0,calc(0.05 * var(--shadow-opacity)));
/* Aksan renkli parlama — dikkat cekmesi gereken tek ogeye. */
--shadow-glow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
/* ---- GRADIENT OLCEGI ----
OLCULDU 2026-09-12: 596 elle yazilmis gradient alti role dusuyordu
(scrim %56, aksan %11, yuzey %8, ayirici %7, aksan-tint %6, altin %2).
Her rol icin BIR token; yenisini yazmak yerine buradan sec.
Tumu tema token'i uzerinden — sabit renk yok, tema degistirince izler. */
--gradient-accent: linear-gradient(135deg, var(--primary), var(--primary-container));
--gradient-accent-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent);
--gradient-scrim: linear-gradient(to bottom, transparent, var(--surface-container));
--gradient-scrim-up: linear-gradient(to top, transparent, var(--surface-container));
--gradient-surface: linear-gradient(90deg, var(--surface-container), var(--surface-container-high), var(--surface-container));
--gradient-rule: linear-gradient(90deg, transparent, var(--outline-variant), transparent);
--gradient-secondary: linear-gradient(135deg, var(--brand-gold), color-mix(in srgb, var(--brand-gold) 80%, var(--surface)));
--gradient-ambient: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 55%);
/* ---- EASING OLCEGI (VOIT DS Motion, easing.dev egrileri) ----
Secim kurali: out-* kullanicinin BASLATTIGI hareket (hizli baslar,
yumusak durur) · in-* sistemin baslattigi · in-out-* iki uclu gecis.
overshoot/spring yalniz onay/basari ani icin — veri ekraninda degil. */
--ease-linear: cubic-bezier(0, 0, 1, 1);
--ease-in: cubic-bezier(0.42, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.58, 1);
--ease-quick-out: cubic-bezier(0, 0, 0.2, 1);
--ease-swift-out: cubic-bezier(0.17, 0.89, 0.32, 1.10);
--ease-snappy-out: cubic-bezier(0.19, 1.00, 0.22, 1.00);
--ease-overshoot-out: cubic-bezier(0.17, 0.89, 0.32, 1.27);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.21, 0.61, 0.35, 1);
--ease-out-quart: cubic-bezier(0.17, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-circ: cubic-bezier(0.07, 0.82, 0.17, 1.00);
--ease-in-quad: cubic-bezier(0.55, 0.09, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.06, 0.68, 0.19);
--ease-in-quart: cubic-bezier(0.9, 0.03, 0.69, 0.22);
--ease-in-quint: cubic-bezier(0.76, 0.05, 0.85, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.8, 0.04);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
--ease-in-out-quad: cubic-bezier(0.46, 0.03, 0.52, 0.95);
--ease-in-out-cubic: cubic-bezier(0.65, 0.04, 0.35, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.17, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
--ease-in-out-base: cubic-bezier(0.25, 0.10, 0.25, 1);
--ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
/* ---- YAY SURELERI (VOIT Motion) ----
transition-timing-function: linear ile kullanilir; yay egrisi surenin
ICINDE. Ornek: transition: transform var(--spring-snap) linear; */
--spring-swift: 154ms;
--spring-snap: 184ms;
--spring-stern: 368ms;
--spring-bob: 400ms;
--spring-slow: 449ms;
--spring-fling: 461ms;
--spring-elegant: 582ms;
--spring-bouyant: 1151ms;
--spring-float: 1228ms;
/* ---- TIPOGRAFI ROLLERI (VOIT DS Type Scales) ----
Her rol boyut + satir yuksekligi + harf araligi + agirligi BIRLIKTE tasir.
Ayri leading/tracking listeleri "hangi boyutla hangisi" sorusunu cevapsiz
birakiyordu. Kullanim: font: var(--type-h2); letter-spacing: var(--type-h2-ls);
Kural: display/heading NEGATIF tracking (buyuk punto sikilasir),
caption/note POZITIF (kucuk punto acilir). */
--type-display-1: 800 3.5rem/1.179 var(--font-headline);
--type-display-1-ls: -0.036em;
--type-display-2: 800 3.0rem/1.208 var(--font-headline);
--type-display-2-ls: -0.031em;
--type-display-3: 700 2.5rem/1.2 var(--font-headline);
--type-display-3-ls: -0.025em;
--type-h1: 700 2.25rem/1.194 var(--font-headline);
--type-h1-ls: -0.028em;
--type-h2: 700 2.0rem/1.25 var(--font-headline);
--type-h2-ls: -0.025em;
--type-h3: 700 1.875rem/1.233 var(--font-headline);
--type-h3-ls: -0.023em;
--type-title-1: 700 1.5rem/1.25 var(--font-headline);
--type-title-1-ls: -0.021em;
--type-title-2: 600 1.25rem/1.25 var(--font-headline);
--type-title-2-ls: -0.02em;
--type-title-3: 600 1.125rem/1.278 var(--font-headline);
--type-title-3-ls: -0.018em;
--type-body-l: 400 1.0rem/1.312 var(--font-headline);
--type-body-l-ls: -0.013em;
--type-body-m: 400 0.875rem/1.286 var(--font-headline);
--type-body-m-ls: -0.007em;
--type-body-s: 400 0.8125rem/1.308 var(--font-headline);
--type-body-s-ls: 0em;
--type-caption: 400 0.75rem/1.333 var(--font-headline);
--type-caption-ls: 0em;
--type-subhead: 600 0.6875rem/1.364 var(--font-headline);
--type-subhead-ls: 0.001em;
--type-note: 600 0.625rem/1.3 var(--font-headline);
--type-note-ls: 0.001em;
/* ---- IKON KABI (VOIT Utilities > Icon shell) ----
Ikonun icinde durdugu KARE kap -- glyph'in KENDI boyutu degil.
Kabin ICINE gelen glyph tek kanonik olcekten alinir (--icon-*):
vtile--sm 32px kap + --icon-sm, --md 40px + --icon-md,
--lg 48px + --icon-lg. Ucu de kabin tam %50'si (olculdu).
BURAYA IKINCI BIR GLYPH OLCEGI EKLEME. Daha once --icon-glyph-*
diye paralel bir aile vardi ve ayni kademe adi farkli boyut
demekti (-md biri 20px biri 18px); hangisinin secilecegi
belirsizdi. Kaldirildi -- glyph icin tek adres --icon-*. */
--icon-shell-2xs: 1.25rem;
--icon-shell-xs: 1.5rem;
--icon-shell-sm: 2rem;
--icon-shell-md: 2.5rem;
--icon-shell-lg: 3rem;
--icon-shell-xl: 3.5rem;
--icon-shell-2xl: 4rem;
/* ---- CIZGI KALINLIGI (VOIT Spacing Notes > Stroke) ----
No-Line kurali geregi BOLUCU degil: odak halkasi, secim isareti,
grafik cizgisi. Bolme isi yuzey kaymasinin. */
--stroke-none: 0;
--stroke-thinnest: 0.5px;
--stroke-thin: 1px;
--stroke-regular: 1.5px;
--stroke-thick: 2px;
--stroke-thicker: 3px;
--stroke-thickest: 4px;
/* ---- KAYDIRMA CUBUGU (VOIT Utilities > Scroll bar) ----
Rengi yuzeyden turer, kendi rengi yok; hover'da bir kademe belirginlesir. */
--scrollbar-width: 0.5rem;
--scrollbar-thumb-radius: 9999px;
--scrollbar-thumb-inset: 0.125rem;
/* ---- YUKLEME GOSTERGESI (VOIT Utilities > Loading) ----
Boyutlar icon-shell ile ayni ailede: bir satirda ikon neredeyse
spinner da orada durur. Sure alginin isi: kisa bekleyis HIZLI doner
("takildi" hissini onler), uzun bekleyis YAVAS (telas yaratmaz). */
--loading-size-xs: 0.875rem;
--loading-size-sm: 1rem;
--loading-size-md: 1.5rem;
--loading-size-lg: 2rem;
--loading-size-xl: 3rem;
--loading-spin-fast: 700ms;
--loading-spin: 1000ms;
--loading-spin-slow: 1400ms;
--loading-shimmer: 1500ms;
--loading-dot: 1400ms;
/* Durum belirteçleri — eskiden dosyanın sonunda ikinci bir :root bloğundaydı (ortak durum dili, aşağıdaki yorum). */
--state-disabled-opacity: 0.45;
--state-focus-ring: 2px solid var(--primary);
--state-focus-offset: 2px;
--state-active-shift: var(--surface-container-low);
}
@media (max-width: 767px) {
:root {
--chat-input-bar-height: 11.5rem;
}
}
@media (max-height: 720px) {
:root {
--chat-input-bar-height: 10rem;
}
}
/* ============================
Reset & Base
============================ */
/* Tailwind uyumu (2026-10-19): evrensel sıfırlama @layer base içinde. Katmansız
kalsaydı katmanlı Tailwind yardımcılarını (p-*, m-*, border…) yenerdi — ölçüldü:
`border` sınıfı 0px kaldı. Katman sırası: theme, base, components, utilities;
katmansız sınıf kurallarımız hepsini yenmeye devam eder. */
@layer base {
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
}
html {
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
background-color: var(--surface);
color: var(--on-surface);
display: flex;
flex-direction: column;
min-height: 100vh;
line-height: 1.5;
overflow-x: hidden;
}
/* ============================
Typography Scale
============================ */
/* SATIR YÜKSEKLİĞİ HER TİPOGRAFİ SINIFINDA TANIMLI OLMALI.
ÖLÇÜLDÜ 2026-09-02: .headline-*, .title-* ve .label-* (10 sınıf) line-height
vermiyordu; değer tarayıcının ETİKET varsayılanından geliyordu. Sonuç: AYNI
sınıf farklı etikette farklı görünüyor —
→ line-height 18.2px
→ line-height 19.6px
Bu, bir başlığın semantik düzeyi değiştiğinde (h3 → h2, erişilebilirlik
düzeltmesi) görünümün de sessizce kaymasına yol açıyordu. Sınıf görünümü
belirler, etiket yalnız anlamı; ikisi birbirine karışmamalı. */
.display-lg { font-family: var(--font-headline); font-size: var(--font-size-9xl); font-weight: 800; letter-spacing: var(--tracking-tightest); line-height: var(--leading-tight); }
.display-md { font-family: var(--font-headline); font-size: var(--font-size-7xl); font-weight: 800; letter-spacing: var(--tracking-tightest); line-height: 1.15; }
.display-sm { font-family: var(--font-headline); font-size: var(--font-size-5xl); font-weight: 700; letter-spacing: var(--tracking-tighter); line-height: var(--leading-snug); }
.headline-lg { font-family: var(--font-headline); font-size: var(--font-size-5xl); font-weight: 700; letter-spacing: var(--tracking-tighter); line-height: var(--leading-snug); }
.headline-md { font-family: var(--font-headline); font-size: var(--font-size-3xl); font-weight: 700; line-height: var(--leading-snug); }
.headline-sm { font-family: var(--font-headline); font-size: var(--font-size-2xl); font-weight: 700; line-height: var(--leading-snug); }
.title-lg { font-family: var(--font-headline); font-size: var(--font-size-xl); font-weight: 700; line-height: var(--leading-snug); }
.title-md { font-family: var(--font-headline); font-size: var(--font-size-lg); font-weight: 600; line-height: var(--leading-snug); }
.title-sm { font-family: var(--font-headline); font-size: var(--font-size-base); font-weight: 600; line-height: var(--leading-snug); }
.body-lg { font-family: var(--font-body); font-size: var(--font-size-lg); line-height: var(--leading-relaxed); }
.body-md { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--leading-normal); }
.body-sm { font-family: var(--font-body); font-size: var(--font-size-sm); line-height: var(--leading-normal); }
.label-lg { font-family: var(--font-label); font-size: var(--font-size-base); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: var(--leading-snug); }
.label-md { font-family: var(--font-label); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: var(--leading-snug); }
.label-sm { font-family: var(--font-label); font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: var(--leading-label); }
.label-xs { font-family: var(--font-label); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--tracking-max); text-transform: uppercase; line-height: var(--leading-label); }
/* ============================
Material Symbols Configuration
============================ */
/* VIcon size buckets — keep in sync with the Size enum in
Components/UI/VIcon.razor. font-size drives Material Symbols glyph size,
line-height: 1 collapses the line-box so icons can sit in flex rows
without injecting extra vertical space. */
.vicon-xs { font-size: var(--icon-xs); line-height: 1; }
.vicon-sm { font-size: var(--icon-sm); line-height: 1; }
.vicon-md { font-size: var(--icon-md); line-height: 1; }
.vicon-lg { font-size: var(--icon-lg); line-height: 1; }
.vicon-xl { font-size: var(--icon-xl); line-height: 1; }
.vicon-2xl { font-size: var(--icon-2xl); line-height: 1; }
/* ============================
Glass & Effects — DESIGN.md: "Glass & Gradient" Rule
80% opacity with 20px backdrop-blur for floating panels
============================ */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid var(--ghost-border, transparent);
border-radius: var(--panel-radius);
}
.glass-panel-light {
background: var(--glass-bg-light);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid var(--ghost-border, transparent);
border-radius: var(--panel-radius);
}
/* ============================
Gradient Utilities
============================ */
.gradient-primary {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
}
.gradient-text {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================
Neumorphism
============================ */
.neu-raised {
box-shadow: var(--shadow-md);
}
.neu-inset {
box-shadow: var(--shadow-inset);
}
.neu-flat {
box-shadow: var(--shadow-sm);
}
/* ============================
Button System
============================ */
/* GEÇİŞLER SAYILI ÖZELLİK TAŞIR — `transition: all` DEĞİL.
ÖLÇÜLDÜ 2026-09-15, tarayıcıda tek sayfa: 1306 öğenin 951'i (%73) `all`
taşıyordu ve kaynağı buradaki paylaşılan bileşen kurallarıydı (.btn-*,
.input-field). Tarayıcı iki özellik için düzinelerce özelliği izliyordu.
Aşağıdaki listeler :hover/:focus kurallarından ÖLÇÜLDÜ.
SÖZDİZİMİ TUZAĞI: kısayolda virgül TAM geçişleri ayırır. `transition:
transform, box-shadow 50ms` yazmak transform'u 0s (animasyonsuz) bırakır —
her özellik KENDİ süresini taşımalı. `transition-duration` da kullanılamaz:
--transition-btn bir "50ms ease" ÇİFTİDİR, tek süre değil. */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
/* ref-34 (2026-09-25): duz dolgu, gradyan degil. Renk tema basina --action-fill'ten (2026-10-26): light'ta gece
mavisi #30475E (beyaz 9.60:1), dark/mixed'de onceki --primary ile ayni deger. */
background: var(--action-fill);
color: var(--on-action-fill);
font-family: var(--font-label);
font-weight: 700;
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
transition: transform var(--transition-btn), box-shadow var(--transition-btn), border-radius var(--transition-btn), outline-color var(--transition-btn);
box-shadow: var(--btn-shadow);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--btn-shadow-hover);
}
.btn-primary:active {
transform: translateY(1px) scale(0.98);
box-shadow: var(--btn-shadow-active);
}
.btn-primary:focus-visible {
outline: none;
box-shadow: var(--focus-ring), var(--btn-shadow-hover);
}
/* Secondary/Ghost — DESIGN.md: outline-variant border at 20% opacity */
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: var(--surface-container-high);
color: var(--on-surface);
font-family: var(--font-label);
font-weight: 700;
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: 1px solid var(--ghost-border);
border-radius: var(--btn-radius);
cursor: pointer;
transition: transform var(--transition-btn), background-color var(--transition-btn), border-radius var(--transition-btn), outline-color var(--transition-btn);
}
.btn-secondary:hover {
background: var(--surface-bright);
/* DESIGN.md: hover zemini surface-bright'a kaydırır — kenarlık "hissedilen" ghost
seviyesinde KALIR. --outline-variant opaktır ve hover'da 1px görünür çerçeve
üretiyordu (ÖLÇÜLDÜ 2026-08-26 taraması). Ghost border korunuyor. */
transform: translateY(-1px);
}
.btn-secondary:active {
transform: translateY(1px) scale(0.98);
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--on-surface-variant);
font-family: var(--font-label);
font-weight: 600;
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
transition: transform var(--transition-btn), background-color var(--transition-btn), color var(--transition-btn);
}
.btn-ghost:hover {
color: var(--primary);
background: var(--primary-glow);
}
/* Tertiary — text button with primary accent. Used for low-emphasis actions
(e.g. "Cancel", inline "Edit"). No background; underline-on-hover affordance
keeps the link semantics readable in dense lists. */
.btn-tertiary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: transparent;
color: var(--primary);
font-family: var(--font-label);
font-weight: 600;
font-size: var(--font-size-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
transition: transform var(--transition-btn), background-color var(--transition-btn), color var(--transition-btn);
}
.btn-tertiary:hover { color: var(--on-surface); background: var(--primary-glow); }
.btn-tertiary:active { transform: translateY(1px); }
/* Danger — yıkıcı eylem. KANONİK TANIM `veraius-components.css`'tedir;
buradaki yalnız GEOMETRİ verir (dolgu, hizalama). Renk orada, tek yerde.
ÖLÇÜLDÜ 2026-09-16: iki dosya farklı RENK yazıyordu (dolu vs yumuşak) ve
kaynak sırası kararı veriyordu — bir tasarım kararı kaynak sırasına
bırakılamaz. Eski yorum "no harsh red blocks, per the design manifesto"
diyordu; DESIGN.md'de öyle bir kural yok (ölçüldü). */
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
font-family: var(--font-label);
font-weight: 700;
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
transition: transform var(--transition-btn), box-shadow var(--transition-btn), outline-color var(--transition-btn);
box-shadow: var(--btn-shadow);
}
/* DURUM BUTONLARI — .btn-danger ile aynı iskelet, yalnız renk farklı.
ÖLÇÜLDÜ 2026-09-03, /home içinde AYNI kapsamda buton sınıflarını ölçerek:
btn h=42 p=10/20 fs=14 fw=600
btn-primary h=34 p=8/20 fs=11 fw=700
btn-secondary h=36 p=8/20 fs=11 fw=700
btn-ghost h=34 p=8/16 fs=11 fw=600
btn-danger h=33 p=6/16 fs=12 fw=700
btn-outline h=26 p=0/0 fs=16 fw=400 ← HİÇ stil almıyor
btn-info h=26 p=0/0 fs=16 fw=400 ← HİÇ stil almıyor
btn-warning h=26 p=0/0 fs=16 fw=400 ← HİÇ stil almıyor
Üçünün de CSS tanımı VARDI ama hepsi SAYFAYA ÖZELDİ (.dp-screen ::deep
.btn-info gibi) — her sayfa kendi sürümünü yazmış, kabuk kapsamında hiçbiri
yok. 24 + 19 + 11 = 54 kullanım tarayıcı varsayılanına düşüyordu.
Kurumsal UX kaynağı: "buttons should function identically throughout the
platform". Bir uyarı butonu bir ekranda sarı çerçeveli, diğerinde çıplak
metin olamaz. */
.btn-info,
.btn-warning,
.btn-success,
.btn-outline,
.btn-outline-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
font-family: var(--font-label);
font-weight: 700;
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border: none;
border-radius: var(--btn-radius);
cursor: pointer;
white-space: nowrap;
}
/* Renk yalnız DURUMU taşır — süs değil. Zemin state-*-bg (yumuşak), metin
state-* (canlı): tasarım sisteminin .va-status ailesiyle aynı dil. */
.btn-info { background: var(--state-info-bg); color: var(--state-info-text-on-fill); }
.btn-warning { background: var(--state-warning-bg); color: var(--state-warning-text-on-fill); }
.btn-success { background: var(--state-success-bg); color: var(--state-success-text-on-fill); }
/* Outline: zemin yok, "hissedilen" ghost çerçeve — 1px opak kenarlık YOK
(CLAUDE.md sert kuralı). */
.btn-outline,
.btn-outline-secondary {
background: transparent;
color: var(--on-surface);
box-shadow: inset 0 0 0 1px var(--ghost-border);
}
.btn-info:hover { background: var(--state-info); color: var(--surface); }
.btn-warning:hover { background: var(--state-warning); color: var(--surface); }
.btn-success:hover { background: var(--state-success); color: var(--surface); }
.btn-outline:hover,
.btn-outline-secondary:hover { background: var(--surface-container-high); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
.btn-danger:active { transform: translateY(1px) scale(0.98); }
.btn-danger:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--btn-shadow-hover); }
/* Link — pure text affordance with underline on hover; matches body text size
so it can sit inline in paragraphs. Useful for inline "details" or "view"
anchors that should not look like buttons. */
.btn-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0;
background: transparent;
color: var(--primary);
font-family: inherit;
font-weight: 500;
font-size: inherit;
letter-spacing: 0;
text-transform: none;
border: none;
cursor: pointer;
transition: color var(--transition-btn);
}
.btn-link:hover { color: var(--on-surface); text-decoration: underline; }
/* Size modifiers — keep the variant base CSS untouched, override padding /
font-size only. Apply with .btn-primary.btn-sm etc. */
.btn-sm { padding: 0.375rem 0.875rem; font-size: var(--font-size-xs); }
.btn-md { /* default */ }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); }
/* Icon-only buttons — square footprint, gap collapsed. Pair with VIcon. */
.btn-icon-only { padding: 0.5rem; gap: 0; aspect-ratio: 1 / 1; }
.btn-icon-only.btn-sm { padding: 0.375rem; }
.btn-icon-only.btn-lg { padding: 0.75rem; }
/* Loading state — spinner overrides text content. Animation respects
prefers-reduced-motion via the global override later in this file. */
.btn-loading { position: relative; pointer-events: none; opacity: 0.85; }
.btn-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
background: var(--glass-bg, var(--surface-container-high));
color: var(--on-surface);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
border: 1px solid var(--ghost-border, transparent);
border-radius: var(--chip-radius, var(--radius-full));
cursor: pointer;
transition: transform var(--transition-btn), background-color var(--transition-btn), border-color var(--transition-btn), color var(--transition-btn);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
}
.btn-chip:hover {
background: var(--surface-container-highest);
color: var(--primary);
/* Aynı gerekçe: --ghost-border-hover tanımsız, hover kenarlığı görünmüyordu. */
border-color: var(--ghost-border);
}
.btn-chip.active {
background: var(--primary-glow);
color: var(--primary);
border-color: var(--primary);
}
/* ============================
Input System — DESIGN.md: "Modern Input"
No bottom line or full border. Use surface-container-low with sm radius.
On focus: background shifts to surface-container-highest with primary "Ghost Border"
============================ */
.input-field {
width: 100%;
background: var(--surface-container-low);
color: var(--on-surface);
border: none;
padding: 1rem;
font-family: var(--font-body);
font-size: var(--font-size-base);
border-radius: var(--radius-sm);
transition: background-color var(--transition-default), box-shadow var(--transition-default), outline-color var(--transition-default);
}
.input-field::placeholder {
color: var(--outline-text);
opacity: 0.5;
}
.input-field:focus {
outline: none;
background: var(--surface-container-highest);
box-shadow: inset 0 0 0 1px var(--focus-ring-color);
}
.input-field:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.input-field:disabled,
.input-field[aria-disabled="true"] {
background: var(--surface-container-lowest);
color: var(--on-surface-variant);
cursor: not-allowed;
opacity: 0.6;
}
.input-field:user-invalid,
.input-field[aria-invalid="true"] {
box-shadow: inset 0 0 0 1px var(--error);
}
.input-field:user-valid {
box-shadow: inset 0 0 0 1px var(--state-success);
}
.input-label {
display: block;
font-family: var(--font-label);
font-size: var(--font-size-sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
/* --outline metin olarak AA'yı geçmiyor (yüksek katmanda 3.6:1) — bkz. .text-outline
yanındaki ölçüm notu. Bu 0.75rem büyük-harfli etiket gövde metni sayılır. */
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
/* ============================
Card System — DESIGN.md: "No-Line" Rule
Boundaries defined solely through background color shifts
Use surface-container-low for large areas, surface-container-high for interactive zones
============================ */
.card {
background: var(--surface-container);
border-radius: var(--card-radius);
padding: 1.5rem;
/* Kartta yalnız gölge değişir (ölçüldü: .card:hover -> box-shadow). */
transition: box-shadow var(--transition-default);
box-shadow: var(--shadow-md);
}
.card-elevated {
/* `container-high` KUYU tonudur; yukseltilmis bir kart onu basmaz. */
background: var(--surface-container-lowest);
/* "Raised Interactive State" — kit 27'nin degeri birebir. Bu varyant
ADI GEREGI yukselen duzlemdir, dolayisiyla golgeyi KORUR; gorunur
karttan ayrilmasinin tek yolu budur. */
box-shadow:
0 12px 32px -4px rgba(var(--overlay-scrim-rgb), 0.06),
0 4px 12px -2px rgba(var(--overlay-scrim-rgb), 0.04);
border-radius: var(--card-radius);
}
/* KART BAŞLIĞI / GÖVDESİ — TANIMSIZDI. ÖLÇÜLDÜ 2026-09-04: depoda 30 .card-header
ve 21 .card-body kullanımı var ama hiçbir kanonik tanımı YOKTU (Bootstrap'tan
kalma adlar, Bootstrap yüklü değil). Sonuç: ikisi de sıfır dolgu ve şeffaf
zemin alıyordu — /admin/rules/create'te ölçüldü — yani başlık ile gövde
arasında hiçbir ayrım kalmıyordu.
VCard'ın slot mantığıyla hizalandı: başlık altına boşluk, gövde akışta. */
.card-header {
margin-block-end: var(--space-3);
font-family: var(--font-label);
font-weight: 700;
color: var(--on-surface);
}
.card-body {
display: block;
}
.card-interactive {
cursor: pointer;
}
.card-interactive:hover {
background: var(--surface-container-highest);
box-shadow: 0 20px 40px rgba(var(--overlay-scrim-rgb), 0.4);
transform: translateY(-2px);
}
/* AI Insight Cards — DESIGN.md: secondary left-accent bar for machine-generated content */
.card-accent-left {
position: relative;
overflow: hidden;
background: var(--surface-container-high);
}
.card-accent-left::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--secondary);
opacity: 0.9;
}
/* ============================
Bento Grid Layout System
============================ */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.bento-hero { grid-column: span 8; }
.bento-widget { grid-column: span 4; }
.bento-half { grid-column: span 6; }
.bento-third { grid-column: span 4; }
.bento-full { grid-column: span 12; }
@media (max-width: 767px) {
.bento-hero, .bento-widget, .bento-half, .bento-third { grid-column: span 12; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.bento-hero { grid-column: span 12; }
.bento-widget { grid-column: span 6; }
}
/* ============================
Layout Utilities
============================ */
.flex { display: flex; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { flex-direction: column; display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.flex-wrap { flex-wrap: wrap; }
/* ARALIK UTILITY'LERİ — tema paketinin parçası; değerler TOKEN'dan gelir.
ÖLÇÜLDÜ 2026-09-15: bu ailenin tamamı HAM REM yazıyordu, yani
`--space-*` ölçeğini atlıyordu. Token değiştiğinde utility'ler eski
değerde kalırdı ve hiçbir test kırmızıya dönmezdi.
ADLANDIRMA ÇELİŞKİSİ (bilinçli olarak KORUNDU): utility soneki ile
token numarası aynı DEĞİL —
.gap-6 / .mb-6 / .p-6 = 1.5rem = var(--space-5)
.gap-8 / .mb-8 / .p-8 = 2rem = var(--space-6)
Yani `.mb-8` yazan 2rem alır, `--space-8` (3rem) değil. Sonek
Tailwind/Bootstrap alışkanlığından (4px çarpanı) geliyor, token ise
8px ızgarasının kademe numarası. 186 markup kullanımını yeniden
adlandırmak yerine EŞLEME burada açıkça yazıldı: değer artık tek
kaynaktan (token) geliyor, sonek yalnızca bir takma ad. */
/* SIFIRLAMA ÖNCE GELİR. ÖLÇÜLDÜ 2026-09-15: `.m-0` bu blokun SONUNDA
duruyordu ve aynı özgüllükteki `.mt-*`/`.mb-*` kurallarını kaynak sırasıyla
yeniyordu — `class="m-0 mt-2"` yazan eleman tarayıcıda 0px alıyordu, 8px değil.
Niyet "tüm marjları sıfırla, sonra tek kenara boşluk ver"; bunun çalışması için
sıfırlama ÖNCE tanımlanmalı. */
.m-0 { margin: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-5); } /* 1.5rem */
.gap-8 { gap: var(--space-6); } /* 2rem */
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-5); }
.p-8 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-8 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* `-1` kademesi ÖLÇÜLDÜ 2026-09-19: `.ml-1` ve `.gap-1` zaten `--space-1`
kullaniyor, yani kademe olcekte VAR — eksik olan yalniz `mb-1`'di.
9 kullanim (3 sayfa) sessizce hicbir sey yapmiyordu; `/decisions/command`
tarayicida olculdu: `d-block mb-1` tasiyan 6 etiketin 6'si da
`margin-bottom: 0px`. `d-block` komsulugu niyeti kanitliyor. */
/* `-0` kademesi de dizide VAR (`.m-0` zaten yazili); eksik olan ayaklariydi.
ÖLÇÜLDÜ 2026-09-19: `mb-0` 3, `p-0` 1 kullanim. Bugun DOGRU degeri
KAZAYLA aliyorlar (tanimsiz sinif = 0px), ama niyet dayatilmiyor:
bir ata `margin-bottom` verdigi an sifirlama sessizce kaybolur. */
.mb-0 { margin-bottom: var(--space-0); }
.mt-0 { margin-top: var(--space-0); }
.p-0 { padding: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-5); }
.mb-8 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-5); }
.mt-8 { margin-top: var(--space-6); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }
/* ÖLÇÜLDÜ 2026-09-15: markup'ta 33 kez kullanılıyordu ama HİÇ TANIMLI
DEĞİLDİ — sessizce hiçbir şey yapmıyordu. */
.d-block { display: block; }
.ms-2 { margin-inline-start: var(--space-2); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.hidden { display: none; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* DESIGN.md: Line-clamp with standard property */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all var(--transition-default); }
.transition-colors { transition: color var(--transition-fast), background-color var(--transition-fast); }
/* Bootstrap-compatible aliases (legacy markup) */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.text-muted { color: var(--on-surface-variant); }
/* Inline Style Replacement Utilities
----------------------------------
OLCULDU 2026-09-15: bu ailenin kullaniminin %95'i IKON glifi
(503 ikon / 548 kullanim) -- adi tipografik olsa da pratikte bir
ikon olcegi. Ham piksel yaziliyken 18/22/28px hicbir olcekte yoktu
ve bu, --icon-* ile yarisan UCUNCU bir olcek anlamina geliyordu.
Cozum call-site'lari degil TANIMI duzeltmek: ikon araligindaki
kademeler --icon-*'a baglandi, boylece 548 kullanimin tamami tek
kaynaktan beslenir ve markup'a dokunmaya gerek kalmaz.
11 ve 13, kucuk METIN kademeleridir (zaman damgasi, ikincil etiket).
OLCULDU: --font-size-xs 10px, --font-size-sm 12px -- yani tipografik
olcege baglamak bu ikisini KUCULTURDU. Bu yuzden 11/13 ham degerinde
birakildi; ikon olceginde karsiliklari yok, metin olceginde de tam
karsiligi yok. 14 ise agirlikla ikon (87 ikon / 91 kullanim), o yuzden
--icon-sm'e baglandi. */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: var(--icon-xs); }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: var(--icon-sm); }
.fs-16 { font-size: var(--icon-sm); }
.fs-18 { font-size: var(--icon-md); }
.fs-20 { font-size: var(--icon-md); }
.fs-22 { font-size: var(--icon-lg); }
.fs-28 { font-size: var(--icon-xl); }
.fs-32 { font-size: var(--icon-xl); }
.fs-48 { font-size: var(--icon-2xl); }
.fs-1-5r { font-size: var(--font-size-3xl); }
.fs-3r { font-size: 3rem; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.content-auto { content-visibility: auto; }
.flex-col-gap-75 { display: flex; flex-direction: column; gap: 0.75rem; }
.flex-col-gap-1 { display: flex; flex-direction: column; gap: 1rem; }
.grid-auto-1fr { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.color-primary { color: var(--primary); }
.color-primary-container { color: var(--primary-container-text); }
.color-secondary { color: var(--secondary); }
.color-tertiary { color: var(--tertiary); }
.color-outline-variant { color: var(--outline-variant); }
.color-on-surface-variant { color: var(--on-surface-variant); }
.color-outline { color: var(--on-surface-variant); }
.icon-empty { font-size: var(--icon-2xl); color: var(--outline-variant); }
.icon-hero { font-size: 48px; color: var(--on-surface-variant); }
.icon-hero-primary { font-size: 32px; color: var(--primary); }
.icon-accent { font-size: var(--font-size-3xl); color: var(--primary); }
.icon-accent-container { font-size: var(--font-size-3xl); color: var(--primary-container-text); }
.font-mono { font-family: var(--font-mono); }
.opacity-70 { opacity: 0.7; }
/* ============================
Color Utilities
============================ */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-tertiary { color: var(--tertiary); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-primary { color: var(--on-primary); }
.text-error { color: var(--error); }
/* --outline (#8a9293) bir KENARLIK tokenıdır, metin rengi değil. Metin olarak
kullanıldığında yükselen yüzey katmanlarında WCAG AA'nın altına düşüyordu — ÖLÇÜLDÜ
2026-08-26 (633 sayfalık tarama, 13 bulgu): --surface üzerinde 5.8:1 ama
surface-container-high (#252f3f) üzerinde 4.2:1, en yüksek katmanda (#2f3a4a) 3.6:1.
AA gövde metni için 4.5:1 ister. --on-surface-variant aynı "ikincil metin" niyetini
taşır ve her katmanda >= 6.7:1 verir. Sınıf adı 27 Razor dosyasında kullanımda
olduğu için korundu; yalnız çözdüğü token düzeltildi. */
.text-outline { color: var(--on-surface-variant); }
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-low { background-color: var(--surface-container-low); }
.bg-surface-container-high { background-color: var(--surface-container-high); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
.bg-primary { background-color: var(--primary); }
.bg-primary-container { background-color: var(--primary-container); }
/* ============================
Scrollbar Styling — premium "floating thumb"
Slim, track-less rails with a tonal thumb that lifts to brand teal on
hover. The transparent border + background-clip insets the thumb so it
reads as a floating pill rather than a filled gutter.
============================ */
::-webkit-scrollbar-thumb:hover {
background-color: color-mix(in srgb, var(--primary) 55%, var(--on-surface));
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
background-color: var(--primary);
background-clip: padding-box;
}
/* Corner where vertical + horizontal rails meet. */
::-webkit-scrollbar-corner {
background: transparent;
}
/* ============================
AI Pulse Component — DESIGN.md: "Pulse" Component
Breathing animation for AI processing states
============================ */
.ai-pulse {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.ai-pulse-indicator {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--surface-tint);
animation: ai-pulse-breathe 2s ease-in-out infinite;
}
.ai-pulse-indicator::before,
.ai-pulse-indicator::after {
content: '';
position: absolute;
border-radius: var(--radius-full);
background: var(--surface-tint);
opacity: 0.5;
animation: ai-pulse-ring 2s ease-out infinite;
}
.ai-pulse-indicator::before {
width: 16px;
height: 16px;
top: -4px;
left: -4px;
animation-delay: 0s;
}
.ai-pulse-indicator::after {
width: 24px;
height: 24px;
top: -8px;
left: -8px;
animation-delay: 0.5s;
}
@keyframes ai-pulse-breathe {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
@keyframes ai-pulse-ring {
0% { transform: scale(0.5); opacity: 0.5; }
100% { transform: scale(2); opacity: 0; }
}
.ai-pulse-text {
font-family: var(--font-label);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--on-surface-variant);
}
/* ============================
Animations
============================ */
@keyframes pulse-glow {
0%, 100% { opacity: 0.8; transform: scale(1); filter: drop-shadow(0 0 20px var(--primary-glow)); }
50% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 40px var(--primary-glow-hover)); }
}
@keyframes pulse-opacity {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.3; }
}
/* Canonical fade-in vocabulary lives in veraius-animations.css.
`.animate-fade-in` is kept here as a backwards-compatible alias that
maps to `fade-in-up` (opacity + translateY). */
@keyframes slide-in-left {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slide-in-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.animate-fade-in { animation: fade-in-up var(--motion-base, 180ms) var(--ease-decelerate, ease-out); }
.animate-pulse-glow { animation: pulse-glow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-pulse-opacity { animation: pulse-opacity 4s ease-in-out infinite; }
/* ============================
Responsive Breakpoints
============================ */
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:hidden { display: none; }
.md\:block { display: block; }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:hidden { display: none; }
.lg\:block { display: block; }
}
@media (max-width: 767px) {
.mobile-hidden { display: none !important; }
}
/* ============================================================
DEPRECATED — "Round 3–14" Utility Sprawl (M3, frozen 2026-04-15)
------------------------------------------------------------
The block between this banner and "RTL / Logical Property
Aliases" below is FROZEN. Do not add new .round-*, .uN-*,
or ad-hoc utility classes here.
Why frozen: 400+ classes with inconsistent naming
(.flex-col-gap-50, .u11-117, .py-12 ≠ Tailwind's .py-12)
accreted via grep-first authoring, causing duplicates (M2)
and blocking a unified utility vocabulary. See:
.ui-design/reviews/veraius-base_20260414.md — Issue M3.
Enforcement: .stylelintrc.json `selector-class-pattern`
rejects new `round-N` / `uN-M` selectors at lint time.
What to use instead:
• Foundation tokens (var(--space-*), var(--font-size-*))
directly in scoped .razor.css — preferred
• `.va-*` utility namespace in veraius-components.css
• Logical aliases (.ms-*, .me-*, .ps-*, .pe-*, .text-start,
.text-end) — see RTL section below
Migration plan: existing consumers stay; removal happens
when docs/design-system/foundations.md's utility vocabulary
ships and a codemod can safely rewrite call sites.
All selectors below wrapped in :where() (s3) so their
specificity is 0,0,0 — scoped component CSS always wins.
============================================================ */
/* stylelint-disable selector-class-pattern -- dondurulmuş eski blok (yukarıdaki DEPRECATED başlığı): mevcut tanımlar
tüketicileri (87 Razor dosyası) codemod ile taşınana kadar kalır; kural bu bloğun DIŞINDAKİ yeni round-N/uN-* sınıflarını yakalar. */
/* Round 3 Utility Classes */
:where(.py-12) { padding-top: 3rem; padding-bottom: 3rem; }
:where(.p-5) { padding: 1.25rem; }
:where(.mt-1) { margin-top: var(--space-1); }
/* `:where(.my-2)` KALDIRILDI 2026-09-19 — olu kopyaydi. Kanonik ikizi
(`.ah-risk-desc, .my-2`, ozgulluk 0,1,0) `:where()`in 0 ozgullugunu her
zaman yener; tarayicida 114 kullanimin ornegi olculdu (/settings/sector,
/collaboration/data-sharing): 4 ogenin 4'u de 4px aliyordu, bu kuralin
8px'i HIC uygulanmiyordu. Iki celisen deger birakmak `.btn-danger`
vakasinin aynisiydi. */
:where(.my-section) { margin: 1.5rem 0 1rem; }
:where(.w-40) { width: 40%; }
:where(.fs-2r) { font-size: 2rem; }
:where(.d-block) { display: block; }
:where(.flex-row-center-gap) { display: flex; align-items: center; gap: 0.5rem; }
:where(.flex-between) { display: flex; justify-content: space-between; }
:where(.flex-between-center) { display: flex; justify-content: space-between; align-items: center; }
:where(.flex-col-gap-50) { display: flex; flex-direction: column; gap: 0.5rem; }
:where(.flex-col-gap-2) { display: flex; flex-direction: column; gap: 2rem; }
:where(.icon-filled) { font-variation-settings: 'FILL' 1; }
:where(.icon-accent-secondary) { font-size: var(--font-size-3xl); color: var(--secondary); }
:where(.icon-accent-tertiary) { font-size: var(--font-size-3xl); color: var(--tertiary); }
:where(.color-primary-dim) { color: var(--primary-fixed-dim); }
:where(.tracking-wide) { letter-spacing: 0.15em; }
/* Round 4 Utility Classes */
:where(.flex-col-gap-6) { display: flex; flex-direction: column; gap: 1.5rem; }
:where(.flex-row-center-gap-4) { display: flex; align-items: center; gap: 1rem; }
:where(.self-end) { align-self: flex-end; }
:where(.p-2) { padding: var(--space-2); }
:where(.color-error) { color: var(--error); }
:where(.tracking-tight) { letter-spacing: -0.04em; }
/* Consolidated from 52+ scoped CSS files */
:where(.table-wrap) { overflow-x: auto; }
:where(.badge) { padding: 0.25rem 0.75rem; border-radius: var(--card-radius); font-size: 0.8rem; font-weight: 500; }
:where(.badge-success) { background: var(--state-success-bg); color: var(--state-success-text-on-fill); }
:where(.badge-warning) { background: var(--state-warning-bg); color: var(--state-warning-text-on-fill); }
:where(.badge-error) { background: var(--state-error-bg); color: var(--state-error-text-on-fill); }
:where(.badge-info) { background: var(--state-info-bg); color: var(--state-info-text-on-fill); }
:where(.form-field) { display: flex; flex-direction: column; gap: 0.25rem; }
:where(.empty-state-hint) { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem; color: var(--outline-variant); font-size: 0.95rem; }
/* Round 5 Utility Classes */
:where(.fs-xs) { font-size: var(--font-size-sm); }
:where(.fs-24) { font-size: 24px; }
:where(.p-4) { padding: var(--space-4); }
:where(.p-8) { padding: var(--space-6); }
:where(.flex-row-center-gap-6) { display: flex; align-items: center; gap: 1.5rem; }
:where(.my-section-sm) { margin: 1rem 0 0.5rem; }
/* Mini Chart Styles */
:where(.mini-chart) { width: 100%; max-width: 400px; height: auto; }
:where(.chart-bar) { fill: var(--primary); opacity: 0.8; transition: opacity var(--transition-modal); }
.chart-bar:hover { opacity: 1; }
:where(.chart-container) { padding: 1rem; }
/* Round 6 Utility Classes */
/* .flex-between duplicate removed (was silently centering items); use .flex-between-center for vertical alignment */
:where(.flex-between-start) { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
:where(.flex-col-center) { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
:where(.flex-start-gap-75) { display: flex; align-items: flex-start; gap: 0.75rem; }
:where(.flex-center-gap-75) { display: flex; align-items: center; gap: 0.75rem; }
:where(.flex-center-gap-50) { display: flex; align-items: center; gap: 0.5rem; }
:where(.flex-gap-1) { display: flex; gap: 1rem; }
:where(.text-center-p-8) { text-align: center; padding: 2rem; }
:where(.section-padded) { padding: 2rem; position: relative; overflow: hidden; }
:where(.divider-v) { width: 2px; height: 2rem; background: var(--outline-variant); }
:where(.w-full-p-4) { width: 100%; padding: 1rem; }
:where(.p-6) { padding: var(--space-5); }
:where(.mt-6-rel) { margin-top: 1.5rem; position: relative; }
:where(.m-0) { margin: 0; }
:where(.color-secondary) { color: var(--secondary); }
:where(.icon-accent-xl) { font-size: var(--icon-xl); color: var(--outline-variant); }
:where(.icon-primary-xl) { font-size: var(--icon-xl); color: var(--primary); }
:where(.icon-secondary-xl) { font-size: var(--icon-xl); color: var(--secondary); }
:where(.color-primary-block) { color: var(--primary); display: block; margin-bottom: 1rem; }
:where(.bg-primary) { background: var(--primary); }
:where(.pill-sm) { padding: 0.35rem 1rem; font-size: 0.8rem; }
:where(.clickable-row) { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--surface-container-lowest); cursor: pointer; }
:where(.full-textarea) { width: 100%; background: var(--surface-container-low); border: none; padding: 1rem; font-size: var(--font-size-base); }
/* Round 7 Utility Classes */
:where(.icon-primary-container-sm) { font-size: var(--icon-sm); color: var(--primary-container-text); }
:where(.icon-outline-xxl) { font-size: 48px; color: var(--outline-variant); }
:where(.icon-outline-xxl-alt) { font-size: 48px; color: var(--outline-text); }
:where(.display-block-mb) { margin-bottom: 0.75rem; display: block; }
:where(.tracking-widest) { letter-spacing: 0.2em; }
:where(.tracking-wider) { letter-spacing: 0.1em; }
:where(.label-tracked-primary) { letter-spacing: 0.15em; color: var(--primary); display: block; margin-bottom: 1rem; }
:where(.label-tracked-outline) { letter-spacing: 0.15em; color: var(--on-surface-variant); margin-bottom: 0.25rem; }
:where(.label-xs-muted) { font-size: var(--font-size-sm); color: var(--on-surface-variant); margin-bottom: 0.25rem; }
:where(.h-full) { height: 100%; }
:where(.h-1) { height: 1rem; }
:where(.fs-12) { font-size: 12px; }
:where(.fs-20) { font-size: 20px; }
/* Round 8 Utility Classes */
:where(.flex-between-mb-6) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
:where(.flex-gap-50) { display: flex; gap: 0.5rem; }
:where(.flex-col-gap-4) { display: flex; flex-direction: column; gap: 1rem; }
:where(.flex-center-gap-75-mb) { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
:where(.flex-center-gap-50-mb) { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
:where(.d-block-mb) { display: block; margin-bottom: 1rem; }
:where(.content-auto-rel) { content-visibility: auto; position: relative; }
:where(.icon-primary-md) { color: var(--primary); font-size: 20px; }
:where(.icon-tertiary-lg) { font-size: 24px; color: var(--tertiary); }
:where(.icon-filled-sm) { font-size: var(--icon-sm); font-variation-settings: 'FILL' 1; }
:where(.icon-secondary-sm) { font-size: var(--icon-sm); color: var(--secondary); }
:where(.icon-valign-sm) { font-size: 16px; vertical-align: middle; }
:where(.icon-valign-md) { font-size: 20px; vertical-align: middle; }
:where(.icon-secondary-xs) { font-size: var(--icon-xs); color: var(--secondary); }
:where(.h-75) { height: 75%; }
:where(.h-50) { height: 50%; }
/* Round 9 Utility Classes */
:where(.text-right) { text-align: right; }
:where(.rel-hidden) { position: relative; overflow: hidden; }
:where(.pos-rel) { position: relative; }
:where(.opacity-50) { opacity: 0.5; }
:where(.opacity-40) { opacity: 0.4; }
:where(.opacity-70) { opacity: 0.7; }
:where(.max-w-300) { max-width: 300px; }
:where(.mt-small) { margin: 0.25rem 0 0; }
:where(.mt-8) { margin-top: 2rem; }
:where(.mt-8-padded) { margin-top: 2rem; padding: 1.25rem; }
:where(.mt-2-fade) { margin-top: 0.5rem; opacity: 0.7; }
:where(.ml-auto) { margin-left: auto; }
:where(.mb-10) { margin-bottom: 2.5rem; }
:where(.tracking-neg) { letter-spacing: -0.02em; }
:where(.label-tracked-block) { letter-spacing: 0.15em; display: block; margin-bottom: 0.5rem; }
:where(.label-tracked-outline-block) { letter-spacing: 0.15em; color: var(--on-surface-variant); display: block; margin-bottom: 1rem; }
:where(.toolbar-row) { padding: 1rem; background: var(--surface-container-low); display: flex; justify-content: space-between; align-items: center; }
:where(.header-bar) { padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; }
:where(.dot-indicator) { width: 1rem; height: 1rem; background: var(--primary); border-radius: 50%; }
:where(.form-input-alt) { width: 100%; background: var(--surface-container-low); border: none; padding: 0.75rem; font-size: var(--font-size-base); }
/* Inline form validation — field-level error text, shown directly under the
offending input. Pairs with aria-invalid + aria-describedby on the control.
Single source of truth so the ~15 create-form components stay consistent. */
:where(.form-field-error) {
color: var(--error);
font-size: var(--font-size-sm);
margin-top: 0.25rem;
line-height: 1.3;
}
:where(.form-input[aria-invalid="true"]) {
box-shadow: inset 0 -2px 0 0 var(--error);
}
:where(.px-3) { padding: 0.75rem 1rem; }
/* Round 10 Utility Classes */
:where(.fw-600-mb) { font-weight: 600; margin-bottom: 0.5rem; }
:where(.fw-light) { font-weight: 300; }
:where(.icon-secondary-2rem) { font-size: 2rem; color: var(--secondary); }
:where(.icon-primary-container-2rem) { font-size: 2rem; color: var(--primary-container-text); }
:where(.icon-primary-md-alt) { font-size: 20px; color: var(--primary); }
:where(.fs-14-fade) { font-size: 14px; opacity: 0.6; }
:where(.icon-48-fade) { font-size: 48px; opacity: 0.3; }
:where(.icon-secondary-lg) { font-size: 24px; color: var(--secondary); }
:where(.icon-tertiary-sm) { font-size: 16px; color: var(--tertiary); }
:where(.h-80) { height: 80%; }
:where(.h-70) { height: 70%; }
:where(.w-94) { width: 94%; }
:where(.w-92) { width: 92%; }
:where(.fs-2rem) { font-size: 2rem; }
/* Round 11 Utility Classes */
:where(.w-80px) { width: 80px; }
:where(.w-100px) { width: 100px; }
:where(.w-160px) { width: 160px; }
:where(.fs-16-error) { font-size: 16px; color: var(--error); }
:where(.fs-07rem) { font-size: 0.7rem; }
:where(.mono-08rem) { font-family: monospace; font-size: 0.8rem; }
:where(.flex-2) { flex: 2; }
:where(.flex-1-pad) { flex: 1; padding: 1rem; }
:where(.flex-1-fw600) { flex: 1; font-weight: 600; }
:where(.flex-between-mb025) { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
:where(.flex-between-top-mb15) { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
:where(.flex-between-end-border-dim) { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--surface-dim); padding-bottom: 0.5rem; }
:where(.flex-between-end-border-container) { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--surface-container); padding-bottom: 0.5rem; }
:where(.flex-between-center-mb1) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
:where(.flex-gap05-mb1) { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
:where(.flex-gap05) { display: flex; gap: 0.5rem; }
:where(.flex-col-gap3) { display: flex; flex-direction: column; gap: 3rem; }
:where(.flex-center-gap1-rel) { display: flex; align-items: center; gap: 1rem; position: relative; }
:where(.flex-center-gap075-mb075) { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
:where(.flex-center-gap05-outline) { display: flex; align-items: center; gap: 0.5rem; color: var(--on-surface-variant); }
:where(.flex-baseline-gap05-mt-auto) { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; }
:where(.flex-between-spaced) { display: flex; justify-content: space-between; }
:where(.flex-between-mb05) { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
:where(.flex-col-gap05) { display: flex; flex-direction: column; gap: 0.5rem; }
:where(.block-mb05-outline) { display: block; margin-bottom: 0.5rem; color: var(--on-surface-variant); }
:where(.primary-bold) { color: var(--primary); font-weight: 700; }
:where(.outline-mt05) { color: var(--on-surface-variant); margin-top: 0.5rem; }
:where(.outline-mb025) { color: var(--on-surface-variant); margin-bottom: 0.25rem; }
:where(.on-primary-color) { color: var(--on-primary); }
:where(.border-left-primary) { border-left: 4px solid var(--primary); padding-left: 2rem; }
:where(.bg-tertiary) { background: var(--tertiary); }
:where(.input-lowest) { background: var(--surface-container-lowest); border: none; padding: 0.75rem 1rem; }
/* Round 11 Extra Utility Classes */
:where(.u11-2) { width:120px; }
:where(.u11-13) { width: 100%; background: var(--surface-container-lowest); border: none; height: 3rem; padding: 0 1rem; }
:where(.u11-14) { text-align:center; padding: 1rem; }
:where(.u11-26) { padding:0.25rem 0.5rem;font-size: var(--font-size-sm); }
:where(.u11-31) { padding: 1.5rem; max-width: 600px; content-visibility: auto; }
:where(.u11-32) { padding: 1.25rem; margin-bottom: 1.5rem; }
:where(.u11-33) { padding: 0.875rem; }
:where(.u11-36) { opacity:0.6; }
:where(.u11-37) { opacity: 0.7; }
:where(.u11-42) { max-width: 200px; }
:where(.u11-43) { max-width: 180px; }
:where(.u11-44) { margin: 1rem 0 0.5rem; }
:where(.u11-45) { margin: 0.75rem 0 0.5rem; }
:where(.u11-46) { margin: 0.35rem 0 0; }
:where(.u11-47) { margin-top:auto; }
:where(.u11-48) { margin-top:3rem; }
:where(.u11-54) { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
:where(.u11-55) { margin-top: 0.5rem; display: block; }
:where(.u11-56) { margin-top: 0.25rem; display: block; }
:where(.u11-57) { margin-right: 0.5rem; }
:where(.u11-59) { margin-bottom:0.5rem; }
:where(.u11-60) { margin-bottom:0.25rem; }
:where(.u11-61) { margin-bottom: 1rem; max-width: 400px; }
:where(.u11-62) { margin-bottom: 1rem; display: block; }
:where(.u11-63) { margin-bottom: 1.25rem; }
:where(.u11-64) { margin-bottom: 0.25rem; }
:where(.u11-77) { height:95%; }
:where(.u11-78) { height:92%; }
:where(.u11-79) { height:90%; }
:where(.u11-80) { height:88%;opacity:0.4; }
:where(.u11-81) { height:85%;opacity:0.4; }
:where(.u11-82) { height:85%; }
:where(.u11-83) { height:80%;opacity:0.4; }
:where(.u11-84) { height:80%; }
:where(.u11-85) { height:75%;opacity:0.4; }
:where(.u11-86) { height:75%; }
:where(.u11-87) { height:70%;opacity:0.4; }
:where(.u11-88) { height:65%;opacity:0.4; }
:where(.u11-89) { height:50%; }
:where(.u11-90) { height:45%;opacity:0.4; }
:where(.u11-91) { height:30%;opacity:0.4; }
:where(.u11-92) { height:280px;align-items:flex-end;gap:2px; }
:where(.u11-93) { height:100%;opacity:0.6; }
:where(.u11-99) { font-weight:300; }
:where(.u11-100) { font-weight: 600; margin-bottom: 0.75rem; }
:where(.u11-104) { font-size:20px;color:var(--primary-container-text); }
:where(.u11-105) { font-size:20px;color:var(--primary); }
:where(.u11-106) { font-size:20px;color:var(--outline-text); }
:where(.u11-107) { font-size:16px; vertical-align:middle; margin-right:0.3rem; }
:where(.u11-108) { font-size:16px; color:var(--primary-container-text); }
:where(.u11-109) { font-size:16px; color:var(--on-surface-variant); }
:where(.u11-110) { font-size:14px;color:var(--primary); }
:where(.u11-113) { font-size: var(--font-size-2xl);color:var(--primary); }
:where(.u11-114) { font-size:0.8rem;color:var(--on-surface-variant); }
:where(.u11-115) { font-size:0.8rem; }
:where(.u11-116) { font-size: var(--font-size-sm); padding:0.3rem 0.6rem; }
:where(.u11-120) { font-size: 28px; color: var(--secondary); }
:where(.u11-121) { font-size: 24px; }
:where(.u11-122) { font-size: 24px; color: var(--primary-container-text); }
:where(.u11-123) { font-size: 20px; color: var(--tertiary); }
:where(.u11-124) { font-size: 20px; color: var(--primary-container-text); }
:where(.u11-125) { font-size: 18px; color: var(--outline-variant); }
:where(.u11-127) { font-size: 16px; color: var(--on-surface-variant); }
:where(.u11-129) { font-size: 14px; color: var(--primary); }
:where(.u11-131) { font-size: var(--font-size-3xl); color: var(--tertiary); }
:where(.u11-132) { font-size: var(--font-size-sm); color: var(--on-surface-variant); }
:where(.u11-135) { flex: 1; background: var(--surface-container-lowest); border: none; height: 3rem; padding: 0 1rem; }
:where(.u11-141) { display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem; }
:where(.u11-142) { display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem; }
:where(.u11-150) { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
:where(.u11-151) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
:where(.u11-152) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
:where(.u11-154) { display: flex; gap: 0.5rem; flex-wrap: wrap; }
:where(.u11-159) { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--outline-variant); }
:where(.u11-160) { cursor:pointer; }
:where(.u11-162) { color:var(--secondary); }
:where(.u11-163) { color:var(--primary-container-text);font-weight:600; }
:where(.u11-171) { color: var(--tertiary); font-size: 20px; }
:where(.u11-172) { color: var(--primary-container-text); margin-left: 1rem; }
:where(.u11-173) { color: var(--primary); margin-bottom: 0.75rem; }
:where(.u11-175) { color: var(--on-surface-variant); }
:where(.u11-177) { color: var(--on-surface-variant); margin-bottom: 1.5rem; }
:where(.u13-1) { font-size:28px;color:var(--primary); }
:where(.u13-15) { font-weight:900; }
:where(.u13-16) { font-size:20px;color:var(--secondary); }
:where(.u13-17) { font-size:2.5rem;color:var(--primary); }
:where(.u13-18) { font-size:16px;vertical-align:middle; }
:where(.u13-19) { font-size:16px;color:var(--secondary); }
:where(.u13-20) { font-size:16px;color:var(--primary); }
:where(.u13-21) { font-size:14px;font-variation-settings:'FILL' 1; }
:where(.u13-24) { display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem; }
:where(.u13-26) { display:flex;gap:0.5rem;margin-top:0.5rem; }
:where(.u13-27) { display:flex;align-items:center;gap:1rem;margin-bottom:1rem; }
:where(.u13-29) { display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap; }
:where(.u13-32) { color:var(--on-surface); }
:where(.u13-33) { background:var(--surface-container-low); }
/* Breadcrumb navigation */
:where(.breadcrumb-nav) { padding: 0.5rem 1rem; font-size: var(--font-size-base); }
.breadcrumb-nav .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; align-items: center; }
.breadcrumb-nav .breadcrumb li { display: inline-flex; align-items: center; color: var(--on-surface-variant); }
/* ref-37: ayirici ">" ve ilk halka ev ikonu. */
.breadcrumb-nav .breadcrumb li + li::before { content: "chevron_right"; font-family: "Material Symbols Outlined"; font-size: 18px; margin: 0 0.5rem; color: var(--on-surface-variant); font-weight: 400; }
.breadcrumb-nav .breadcrumb li:first-child a::before { content: "home"; font-family: "Material Symbols Outlined"; font-size: 18px; margin-right: 0.25rem; vertical-align: -3px; font-weight: 400; }
/* WCAG 2.5.8 (Target Size, Minimum) 24x24 CSS px ister. 0.875rem metin ~22px'lik bir
satır kutusu üretiyordu — ÖLÇÜLDÜ 2026-08-26 taramasında "Ana Sayfa 64x22".
inline-flex + min-height dokunma alanını büyütür, YAZI BOYUTUNU değiştirmez; dikey
padding yerine min-height kullanıldı ki breadcrumb satırı yükselmesin. */
/* ref-nav #1: ara halkalar KOYU metin, bulunulan sayfa teal. */
.breadcrumb-nav .breadcrumb li a {
color: var(--on-surface);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 24px;
}
.breadcrumb-nav .breadcrumb li a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-nav .breadcrumb li[aria-current="page"] { color: var(--primary); font-weight: 500; }
/* === Mobile Responsive Enhancements === */
@media (max-width: 768px) {
/* Headers: smaller fonts, stacked */
:where(.page-header) { padding: 0.75rem 1rem; }
.page-header h1, .page-header .page-title { font-size: var(--font-size-2xl); line-height: 1.3; }
.page-header h2 { font-size: 1.1rem; }
:where(.header-row) { flex-direction: column; align-items: stretch; gap: 0.5rem; }
/* Grids collapse to single column (grid-cols-4 -> 2 cols) */
:where(.grid) { gap: 0.75rem; }
.grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
:where(.grid-cols-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Flex rows stack vertically */
.flex-between, .flex-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
/* Cards: reduced padding */
:where(.card) { padding: 0.75rem; border-radius: 10px; }
:where(.card-header) { padding: 0.5rem 0.75rem; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.card-header h2, .card-header h3 { font-size: var(--font-size-lg); }
/* Stats / toolbars stack */
:where(.stats-row) { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.stats-row > * { width: 100%; }
:where(.toolbar-row) { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.toolbar-row > * { width: 100%; }
/* Buttons full-width on mobile */
.btn, .button, .btn-primary, .btn-secondary, .btn-outline { width: 100%; display: inline-flex; justify-content: center; }
.header-row .btn, .toolbar-row .btn, .card-header .btn { width: 100%; }
/* Hide secondary/auxiliary columns */
.col-secondary, .hide-on-mobile, .secondary-col, .aux-col { display: none !important; }
/* Breadcrumbs denser */
:where(.breadcrumb-nav) { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
}
@media (max-width: 480px) {
/* Even tighter for small phones */
:where(.page-header) { padding: 0.5rem 0.75rem; }
.page-header h1, .page-header .page-title { font-size: 1.1rem; }
.page-header h2 { font-size: var(--font-size-lg); }
/* All multi-column grids collapse to single column */
.grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
:where(.grid) { gap: 0.5rem; }
/* Cards: minimal padding */
:where(.card) { padding: 0.5rem; border-radius: 8px; }
:where(.card-header) { padding: 0.4rem 0.5rem; }
.card-header h2, .card-header h3 { font-size: 0.95rem; }
/* Font shrink for dense data */
body { font-size: 0.9rem; }
/* Hide tertiary info */
.hide-on-small, .col-tertiary, .desc-secondary { display: none !important; }
/* Buttons stay full-width, smaller padding */
.btn, .button, .btn-primary, .btn-secondary, .btn-outline { padding: 0.5rem 0.75rem; font-size: var(--font-size-base); }
:where(.breadcrumb-nav) { padding: 0.25rem 0.5rem; font-size: var(--font-size-sm); }
.breadcrumb-nav .breadcrumb li + li::before { margin: 0 0.3rem; }
}
/* Dark mode: --md-sys-color-* aliases now defined at :root so they work
in every theme (not just prefers-color-scheme: dark). Removed in the
2026-04-14 design review — see .ui-design/reviews/veraius-base_20260414.md */
/* === Skeleton Loaders === */
:where(.skeleton) {
background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-high) 50%, var(--surface-container) 75%);
background-size: 200% 100%;
animation: skeleton-pulse 1.5s ease-in-out infinite;
border-radius: 4px;
}
:where(.skeleton-line) { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
:where(.skeleton-title) { height: 1.5rem; width: 40%; margin-bottom: 1rem; }
:where(.skeleton-card) { padding: var(--space-4); border-radius: 8px; }
@keyframes skeleton-pulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* === Focus-visible Accessibility === */
.btn:focus-visible,
.button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-error:focus-visible,
.btn-icon:focus-visible,
.btn-sm:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
border-radius: 4px;
}
.clickable-row:focus-visible,
.card-interactive:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: -2px;
}
/* Skip link for screen readers */
:where(.skip-link) {
position: absolute;
left: -9999px;
top: 0;
background: var(--primary);
color: var(--on-primary);
padding: 0.75rem 1rem;
z-index: var(--z-skip-link);
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
/* Visually-hidden utility — content remains available to assistive tech.
Used for sr-only instructions, live regions, and hidden labels. */
/* `.visually-hidden` Bootstrap adı; 8 sayfada kullanılıyordu ve TANIMI YOKTU —
yani ekran-okuyucu metni GÖRÜNÜR haldeydi (ölçüldü 2026-09-04). Sınıfı silmek
erişilebilirlik metnini yok ederdi; kanonik .sr-only'ye bağlandı. */
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Print Styles === */
@media print {
/* Hide chrome only. Semantic buttons stay in printed output; mark chrome-only controls with .no-print on the element. */
.no-print, nav, aside, .sidebar, .toolbar, .header-actions { display: none !important; }
body { background: white !important; color: black !important; font-size: 11pt; }
.page-container, main { max-width: 100% !important; padding: 0 !important; }
.card, .card-elevated { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
a { color: black !important; text-decoration: underline !important; }
a::after { content: " (" attr(href) ")"; font-size: 9pt; }
h1, h2, h3 { break-after: avoid; }
table { break-inside: auto; }
tr { break-inside: avoid; break-after: auto; }
:where(.page-break) { break-before: page; }
}
/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
:where(.skeleton) { animation: none !important; }
/* Suppress hover transform cues for vestibular-sensitive users */
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-chip:hover,
.card-interactive:hover,
.clickable-row:hover {
transform: none !important;
}
}
/* === High Contrast === */
@media (prefers-contrast: more) {
:root {
--md-sys-color-outline: #000;
--md-sys-color-on-surface: #000;
--on-surface: #000;
--on-surface-variant: #000;
--outline: #000;
--outline-variant: #000;
--focus-ring-color: #000;
--focus-ring: 0 0 0 var(--focus-ring-width) #000;
}
.btn, .card, .card-elevated, .card-interactive { border: 2px solid currentColor !important; }
:where(.input-field) { border: 2px solid currentColor !important; }
}
/* === Tab Count Badge === */
:where(.badge-count) {
display: inline-block;
padding: 0.125rem 0.5rem;
margin-left: 0.25rem;
font-size: var(--font-size-sm);
background: var(--primary-container);
color: var(--on-primary-container);
border-radius: var(--chip-radius);
font-weight: 500;
}
/* Round 14 Utility Classes */
:where(.u14-mb-1) { margin-bottom: 1rem; }
:where(.u14-mb-075) { margin-bottom: 0.75rem; }
/* stylelint-enable selector-class-pattern */
/* ============================
RTL / Logical Property Aliases (M4 bridge)
----
These are additive — physical utilities (.ml-auto, .text-right, etc.)
remain unchanged for backwards compatibility. New Razor templates should
prefer the logical variants below so RTL locales (Arabic, Hebrew, Farsi,
Urdu) render correctly without per-component flips. Full migration to
logical properties is tracked as M4 in .ui-design/reviews/veraius-base_20260414.md
============================ */
/* Margin — logical */
:where(.ms-auto) { margin-inline-start: auto; }
:where(.me-auto) { margin-inline-end: auto; }
:where(.ms-0) { margin-inline-start: 0; }
:where(.me-0) { margin-inline-end: 0; }
:where(.ms-1) { margin-inline-start: 0.25rem; }
:where(.me-1) { margin-inline-end: 0.25rem; }
:where(.ms-2) { margin-inline-start: 0.5rem; }
:where(.me-2) { margin-inline-end: 0.5rem; }
:where(.ms-3) { margin-inline-start: 0.75rem; }
:where(.me-3) { margin-inline-end: 0.75rem; }
:where(.ms-4) { margin-inline-start: 1rem; }
:where(.me-4) { margin-inline-end: 1rem; }
/* Padding — logical */
:where(.ps-0) { padding-inline-start: 0; }
:where(.pe-0) { padding-inline-end: 0; }
:where(.ps-1) { padding-inline-start: 0.25rem; }
:where(.pe-1) { padding-inline-end: 0.25rem; }
:where(.ps-2) { padding-inline-start: 0.5rem; }
:where(.pe-2) { padding-inline-end: 0.5rem; }
:where(.ps-3) { padding-inline-start: 0.75rem; }
:where(.pe-3) { padding-inline-end: 0.75rem; }
:where(.ps-4) { padding-inline-start: 1rem; }
:where(.pe-4) { padding-inline-end: 1rem; }
/* Text alignment — logical */
:where(.text-start) { text-align: start; }
:where(.text-end) { text-align: end; }
/* Border — logical */
:where(.border-s) { border-inline-start: 1px solid var(--outline-variant); }
:where(.border-e) { border-inline-end: 1px solid var(--outline-variant); }
/* Icon mirroring for direction-aware glyphs (chevrons, arrows, back buttons).
Add the .rtl-mirror class on Material Symbols that should flip in RTL. */
[dir="rtl"] .rtl-mirror,
[dir="rtl"] .material-symbols-outlined.rtl-mirror {
transform: scaleX(-1);
}
/* ── Token burn-down consumption (consolidated; data-bound custom-props) ──
Grouped selectors keep veraius-base.css under the initial-paint budget.
Child components (no own scoped CSS) rely on these global rules. */
/* width := --bar-w */
.confidence-fill, .kg-similarity-fill, .confidence-bar-fill, .meter-fill, .metric-fill,
.telemetry-bar-fill, .dag-node-progress-fill, .wcp-status-progress, .wcp-range-track-fill,
.tm-bar-fill, .run-progress-fill, .risk-score-fill, .bias-bar-fill, .shap-bar-fill-primary,
.shap-bar-fill-error, .past-bar-fill, .impact-bar-fill, .drift-bar-fill, .resource-bar-fill,
.pie-bar, .progress-bar-fill, .bar-tinted, .step-bar-fill, .cpr-mini-fill, .cpr-res-fill,
.trace-bar-fill, .ebp-budget-fill, .sla-budget-fill, .metric-bar, .bui-progress-fill,
.abr-timeline-progress, .abt-epoch-fill, .agm-progress-fill, .amc-bar-fill, .apa-bar-fill,
.ast-bar-fill, .ase-prog-fill, .rcal-avail-fill, .okr-progress-fill, .okr-kr-fill,
.risk-bar-fill, .perf-bar-fill, .health-bar-fill, .dv-dist-bar-fill, .hierarchy-bar-fill,
.tr-run-progress-fill, .category-bar-fill, .vote-yes, .reason-bar, .sla-fill, .usage-bar-fill,
.dq-bar-fill, .rs-progress-fill, .eh-score-fill, .ev-score-fill, .he-completion-fill,
.pt-score-fill, .rate-bar-fill, .mini-bar-fill, .performance-fill, .oto-progress-fill,
.hud-progress-fill, .splash-progress-bar, .ts-bar-fill, .dsc-scenario-btn { width: var(--bar-w, 0%); }
/* height := --bar-h */
.attack-bar, .dot-bar, .chart-bar-baseline, .chart-bar-actual, .chart-bar, .bar-chart-bar,
.rag-spark-bar, .telemetry-bar, .sx-trend-bars--h80 { height: var(--bar-h, 0%); }
/* background := --bar-c */
.cat-badge, .color-swatch, .bar-accent, .dot-tinted, .confidence-bar-fill, .risk-score-fill,
.attack-bar, .dot-bar, .pie-bar, .progress-bar-fill, .drift-bar-fill, .journey-feed-bar,
.bar-tinted, .cpr-mini-fill, .cpr-res-fill, .ebp-budget-fill, .icon-bg-tinted,
.timeline-dot--tinted, .sentiment-pct--tinted, .dsrm-cell, .atl-sev-active, .atl-card-accent,
.color-preview, .nc-template-icon, .file-card-icon, .notif-icon-wrap, .category-tag,
.apd-palette-dot, .apd-node-dot, .legend-dot, .provider-badge, .step-indicator, .matrix-cell,
.emb-sim-cell, .theme-swatch, .ga-sev-active { background: var(--bar-c, var(--surface-container-highest)); }
/* color := --txt-c */
.preview-sector-chip, .icon-tinted, .sentiment-pct__text, .text-tinted-600,
.icon-on-surface-variant { color: var(--txt-c, currentColor); }
/* node position := --node-x / --node-y */
.dag-node, .oc-node { left: var(--node-x, 0); top: var(--node-y, 0); }
.suggestion-marker { top: var(--node-y, 0); }
.he-scale-marker { left: var(--node-x, 0); }
/* opacity := --cell-opacity
`.heatmap-bar` listeden ÇIKARILDI (2026-10-02): tek tüketicisi /agents/logs'un uydurma gecikme
ısı haritasıydı; o bileşen silinince sınıfın ne markup'ı ne zemini kaldı. */
.heatmap-cell--val, .dsrm-cell { opacity: var(--cell-opacity, 1); }
/* `--val` ZEMINSIZDI. ÖLÇÜLDÜ 2026-09-19 /ai-strategy/digital-adaptation:
20 hucrenin 20'si de `rgba(0,0,0,0)` — `opacity`nin solduracagi bir renk yok,
yani yogunluk hic gorunmuyordu. Kardeslerinin hepsi zeminini bir yerden
aliyor (`--op` barindiran sayfadan,
`--hsl` ve `fraud-heat-cell` kendi satirindan) — eksik olan tek bu.
Zemin `--primary` uzerinden gelir, ham hex degil; yogunlugu `--cell-opacity`
tasimaya DEVAM eder, cunku hucreyi surukleyen deger odur.
Halka: en dusuk kademe beyaz kartta okunur kalmali. Bu depoda olculdu — %20
teal 1.34:1 verir ve WCAG 1.4.11 anlam tasiyan metin-disi gostergeden 3:1
ister. Opaklik 0'a kadar inebildigi icin dolgunun kendisi hicbir tabani
garanti edemez; ayrimi halka tasir (emsal: `.aih-legend-dot`). */
.heatmap-cell--val {
background: var(--primary);
box-shadow: inset 0 0 0 1px var(--outline);
}
/* icon color tokens */
.icon-secondary { color: var(--secondary); }
.icon-primary { color: var(--primary); }
.icon-primary-container { color: var(--primary-container-text); }
.icon-error { color: var(--error); }
.icon-transparent { color: transparent; }
/* font sizes */
.fs-1-125r { font-size: var(--font-size-xl); }
.fs-1-25r { font-size: var(--font-size-2xl); }
.fs-2-5r { font-size: 2.5rem; }
/* weight */
.fw-400 { font-weight: 400; }
/* multi-prop / structural consumers */
.confidence-fill { height: 100%; transition: width var(--transition-toast); }
.confidence-fill--high { background: var(--bar-c, var(--primary)); }
.confidence-fill--medium { background: var(--bar-c, var(--secondary)); }
.confidence-fill--low { background: var(--bar-c, var(--tertiary)); }
.legend-dot--a { background: var(--tertiary); }
.legend-dot--b { background: var(--primary); }
.legend-dot--c { background: var(--secondary); }
.tag-filter-chip.active { border-color: var(--tag-border, var(--primary)); }
.compare-grid.comparison-matrix { grid-template-columns: var(--grid-cols, 180px 1fr); }
.zoom-scale { transform: scale(var(--zoom, 1)); transition: transform var(--transition-card); }
.kpi-card--accent-top { border-top: 2px solid var(--accent-c, var(--primary)); }
.heatmap-cell--hsl { background: hsl(var(--cell-hue, 200), 70%, 45%); opacity: var(--cell-opacity, 1); }
.fraud-heat-cell { background: rgba(255, 179, 175, var(--cell-opacity, 0.5)); }
.asv-node { margin-left: var(--indent, 0); }
.stagger-item[style*="--stagger-delay"] { animation-delay: var(--stagger-delay, 0ms); }
.analytics-donut-wrap, .analytics-sparkline, .analytics-timeseries { height: var(--chart-h, auto); }
.chart-bar[style*="--bar-c"] { background: var(--bar-c); }
/* static layout/typography utilities */
.approval-num-input, .dv-color-input, .w-120 { max-width: 120px; width: 120px; }
.clra-step-header-row, .aisb-row-between, .dsm-header-row { display: flex; align-items: center; justify-content: space-between; }
.clra-step-header-row { margin-bottom: 0.375rem; }
.aisb-row-between { margin-bottom: 0.5rem; }
.dsm-header-row { margin-bottom: 2rem; }
.scenario-reset-confirm-text { font-size: var(--font-size-md); color: var(--on-surface); }
.compare-hint-centered { align-self: center; }
.gvz-section-header--spaced { margin-top: var(--space-5); }
.gradient-text--bold { font-weight: 800; }
.range-full { width: 100%; accent-color: var(--primary); }
.sentiment-pct__text { font-weight: 900; font-size: 1.1rem; }
.okg-metric-hint { display: block; margin-top: 0.25rem; }
.nowrap { white-space: nowrap; }
.text-prewrap { white-space: pre-wrap; }
.lh-17 { line-height: 1.7; }
.decision-badge--lg { font-size: 0.9rem; padding: 0.4rem 1rem; }
.mip-model-name, .sl-log-msg { flex: 1; }
.mip-model-name { font-weight: 700; }
.sl-log-msg { font-weight: 500; }
.journey-funnel-icon { opacity: 0.4; }
.shap-bar-fill-error--right { margin-left: auto; }
.dsc-scenario-btn { padding: 0.75rem 1rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; border: none; cursor: pointer; }
.ah-risk-card { padding: var(--space-4); }
.ah-risk-desc, .my-2 { margin: var(--space-1) 0; }
.crb-review-desc { margin: 1rem 0; }
.dsm-skeleton { height: 180px; }
.rm-role-desc { margin: 0.5rem 0 0; }
.break-all { word-break: break-all; }
.cii-persona-icon { margin-right: var(--space-1); }
.strike { text-decoration: line-through; }
.font-mono-upper, .font-mono-dim, .font-mono-xs { font-family: var(--font-mono); }
.font-mono-upper { text-transform: uppercase; }
.font-mono-dim { opacity: 0.5; }
.font-mono-xs { font-size: var(--font-size-2xs); }
.mde-edit-input { padding: 0.25rem 0.5rem; border: none; box-shadow: 0 0 0 1px var(--primary); border-radius: var(--btn-radius); font-size: 0.85rem; width: 100%; }
.zkp-audit-card { padding: var(--space-5); }
.valign-mid { vertical-align: middle; }
.np-section-title { margin: 1.5rem 0 1.25rem; }
/* content-visibility: auto ETKİLEŞİMLİ İÇERİĞE UYGULANMAZ.
ÖLÇÜLDÜ 2026-09-06 /data-fabric/quality: sayfanın kök kabında .content-auto
vardı ve içindeki form KLAVYEYLE ERİŞİLEMEZ hale gelmişti — 60 Tab sonra
forma hiç ulaşılamadı. Tarayıcı görünüm dışındaki içeriğin render'ını
atlıyor; düzen hesaplansa bile öğe etkileşim için yok sayılıyor
(Playwright'ın boundingBox'ı 0×0 dönüyordu, getBoundingClientRect ise
246×44 — fark tam olarak bu).
Uzun LİSTELER için doğru bir performans deseni; form, düğme ya da bağlantı
taşıyan kaplarda kullanılmaz. */
/* ---- METIN SECIMI (VOIT Utilities > Text Selection) ----
OLCULDU 2026-09-12: ::selection hic tanimli degildi; tarayici varsayilani
sistem mavisi kullaniliyordu ve secim rengi TEMA DEGISINCE IZLEMIYORDU.
Aksan uzerinden turetilir; okunabilirlik icin metin rengi acikca verilir. */
::selection {
background: color-mix(in srgb, var(--primary) 26%, transparent);
color: var(--on-surface);
}
::-moz-selection {
background: color-mix(in srgb, var(--primary) 26%, transparent);
color: var(--on-surface);
}
/* Imlec aksan renginde — "sistem burada yaziyor" sinyali. */
input, textarea, [contenteditable] { caret-color: var(--primary); }
/* ---- KAYDIRMA CUBUGU ----
Rengi yuzeyden turer; hover'da BIR kademe belirginlesir. */
* {
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}
::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--on-surface) 20%, transparent);
transition: background-color var(--transition-card);
background: var(--outline-variant);
border-radius: var(--scrollbar-thumb-radius);
border: var(--scrollbar-thumb-inset) solid transparent;
background-clip: content-box;
}
/* stylelint-disable-next-line no-duplicate-selectors -- tema kaydırma çubuğu katmanı ilk tanımı bilinçli ezer; ilk tanımın background-color'ı arada okunur */
::-webkit-scrollbar-thumb:hover { background: var(--on-surface-variant); background-clip: content-box; }
/* ---- DURUM SOZLESMESI (VOIT DS bilesen matrisinden) ----
OLCULDU 2026-09-12: 20 V* bileseninin ortalama durum kapsami 1/4 idi;
HICBIRINDE disabled yoktu. Sonuc: 366 sayfa kendi 'unu yazdi —
bilesen kullanilabilir durumda degildi.
Her etkilesimli bilesen bu degiskenleri kullanir; kendi degerini
UYDURMAZ. Boylece disabled her yerde ayni, focus her yerde ayni. */
/* Ortak disabled davranisi — bilesen sinifina degil, ATTRIBUTE'a bagli,
boylece