.
============================ */
/* High/medium/low traffic-light, anchored so the WHOLE scale stays legible in every theme:
high = brand-teal (--primary-container is pale #b6ecef in Light → unreadable on white),
medium = brand-gold (--secondary is charcoal in Light),
low = tertiary salmon. */
.score-high { color: var(--brand-teal-text); }
.score-medium { color: var(--brand-gold-text); }
/* Low/danger tier = error red. --tertiary is salmon only in Dark (near-white in Mixed,
charcoal in Light), so the "bad" end of the scale was invisible/wrong off-Dark. */
.score-low { color: var(--error); }
/* Bar fill variants — for progress/bar elements using score classes as background */
.score-high.bar-fill-score,
[class*="bar-fill"].score-high,
[class*="-fill"].score-high,
[class*="progress-fill"].score-high,
.gauge-fill.score-high,
.bar.score-high { background: var(--primary-container); }
.score-medium.bar-fill-score,
[class*="bar-fill"].score-medium,
[class*="-fill"].score-medium,
[class*="progress-fill"].score-medium,
.gauge-fill.score-medium,
.bar.score-medium { background: var(--brand-gold); }
.score-low.bar-fill-score,
[class*="bar-fill"].score-low,
[class*="-fill"].score-low,
[class*="progress-fill"].score-low,
.gauge-fill.score-low,
.bar.score-low { background: var(--error); }
/* Bar fill with icon-accent (primary color) — multi-series neutral bars */
[class*="-fill"].icon-accent { background: var(--primary); }
/* Risk level aliases (DataPrivacyAnalyzerPage etc.) */
.risk-low { color: var(--brand-teal-text); }
.risk-medium { color: var(--brand-gold-text); }
.risk-high { color: var(--error); }
/* Binary pass/fail color shortcuts */
.value-ok { color: var(--brand-teal-text); font-weight: 600; }
.value-fail { color: var(--error); font-weight: 600; }
.value-warn { color: var(--brand-gold-text); font-weight: 600; }
/* Icon state colors — use on material-symbols icons */
.icon-active { color: var(--brand-teal-text); }
.icon-muted { color: var(--on-surface-variant); }
/* ============================
Empty State
============================ */
/* ÖLÇÜLDÜ 2026-09-15: boş durum sayfalarda TEK DÜZ yüzey olarak çiziliyordu —
tonal derinlik 2 (DESIGN.md en az 3 ister). İki ayrı kusur ölçüldü:
1) `.empty-state` hiç zemin yazmıyordu; kart düzlemi yoktu.
2) İkonun tonal çerçevesi `EmptyState.razor.css` içinde yazılıydı ama ikon
bir `VIcon` BİLEŞENİ — onun kök elemanı EmptyState'in `b-xxxxx` kapsam
özniteliğini TAŞIMAZ. Tarayıcıda ölçüldü: ikon kapsam özniteliği []
(boş), zemin `rgba(0,0,0,0)`, genişlik 40px (hedef 56px). Scoped CSS
başka bileşenin kök elemanına ulaşmaz; `::deep` de çözmez.
Çözüm ikisini de paylaşılana taşımak: boş durum kendi kart düzlemine oturur
(container-lowest), ikon onun İÇİNDE bir basamak daha (container-high) —
zemin → kart → ikon çerçevesi = üç tonal derinlik. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 12rem;
padding: 2.5rem 1.5rem;
text-align: center;
background: var(--surface-container-lowest);
border-radius: var(--card-radius);
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: var(--space-1, 0.25rem);
font-size: var(--icon-2xl);
color: var(--on-surface-variant);
background: var(--surface-container-high);
border-radius: var(--btn-radius);
box-shadow: inset 0 0 0 1px var(--ghost-border);
opacity: 0.85;
flex-shrink: 0;
}
/* Yardim/kisayol kartlarinin ikon cercevesi — `empty-state-icon` ile ayni
anatomi (3rem kap / 24px glif = %50 oran, tonal zemin + hayalet kenarlik).
PAYLASILAN katmanda durur cunku `VIcon` bir bilesendir: sayfa scoped CSS'i
onun kok elemanina ULASAMAZ (kapsam oznitelnigi tasimaz).
OLCULDU 2026-09-16: bu kartlar once ciplak 2rem glif tasiyordu ve bes kart
DORT ayri marka tonu kullaniyordu — `--tertiary` light temada KIRMIZI
(#ad3e38), yani "Destek Talepleri" ikonu tehlike rengindeydi. Renk ayrimi
kaldirildi; ayrimi ikonun KENDISI tasir. */
.help-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--icon-shell-lg);
height: var(--icon-shell-lg);
font-size: var(--icon-lg);
color: var(--primary);
background: var(--surface-container-high);
border-radius: var(--btn-radius);
box-shadow: inset 0 0 0 1px var(--ghost-border);
flex-shrink: 0;
transition: background var(--transition-btn);
}
.help-card:hover .help-card-icon {
background: var(--surface-container-highest);
}
/* Satir ici (inline/hint) varyant kart duzlemi ISTEMEZ — o zaten bir kabin
icinde yasiyor; kendi zemini ikinci bir kart gibi gorunurdu. */
.empty-state.empty-state-compact,
.empty-state-hint {
background: transparent;
border-radius: 0;
}
/* ÖLÇÜLDÜ 2026-09-15: `.empty-msg` 13 sayfa CSS'inde tanımlıydı ve 13'ü de
BİREBİR aynı gövdeyi yazıyordu — saf kopya. Kanonik tanım burada. */
.empty-msg {
padding: 3rem;
text-align: center;
color: var(--on-surface-variant);
font-size: 0.95rem;
}
/* Material symbol used as the primary empty-state icon.
ÖLÇÜLDÜ 2026-09-15: bu blok `.empty-state-icon`'u da listeliyordu ve
yukaridaki kanonik tonal cerceveyle AYNI ozgullukte (0,1,0) oldugu icin
kaynak sirasi bunu kazandiriyordu — font-size 56px yerine 40px'e,
opacity 0.85 yerine 0.5'e donuyordu. Takma ad korunur, kanonik sinif
listeden cikarildi. */
.empty-state .icon-empty {
font-size: var(--icon-2xl);
color: var(--outline-text);
opacity: 0.5;
flex-shrink: 0;
}
.empty-state-title {
font-family: var(--font-headline);
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--on-surface);
margin: 0;
}
.empty-state-message,
/* pages that place a directly inside .empty-state */
.empty-state > p {
font-size: var(--font-size-md);
color: var(--on-surface-variant);
max-width: 360px;
line-height: 1.5;
margin: 0;
}
/* Compact variant for inline use (e.g. inside a table cell) */
.empty-state.empty-state-compact {
min-height: 6rem;
padding: 1.5rem 1rem;
gap: 0.5rem;
}
.empty-state.empty-state-compact .icon-empty,
/* COMPACT varyant standart 48px'i KULLANMAZ: satir ici / tablo hucresi icin
kucultulmus surumdur (min-height 6rem). Bos-durum standardi --icon-2xl (48px)
ama bu varyant bilerek bir kademe asagida. */
.empty-state.empty-state-compact .empty-state-icon {
font-size: var(--icon-xl);
}
/* ============================
Error State
============================ */
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem 1.5rem;
text-align: center;
}
.error-state-icon {
font-size: var(--icon-2xl);
color: var(--error);
}
.error-state-message {
font-size: var(--font-size-md);
color: var(--on-surface-variant);
max-width: 320px;
}
/* ============================
Toast Container
============================ */
.toast-container {
position: fixed;
/* Ust bar (--z-topbar 500) 200'luk sabit z-index'i ortuyordu. Toast barin
UZERINDE durur: kanonik bildirim katmani (--z-notify 950). */
top: 1rem;
right: 1rem;
z-index: var(--z-notify);
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 400px;
pointer-events: none;
}
@media (max-width: 767px) {
.toast-container {
top: auto;
bottom: calc(64px + env(safe-area-inset-bottom, 0px));
left: 0.75rem;
right: 0.75rem;
max-width: none;
}
}
.toast {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--glass-bg, var(--surface-container-highest));
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border-radius: var(--panel-radius);
box-shadow: var(--shadow-xl);
pointer-events: auto;
border: 1px solid var(--glass-border, transparent);
border-left: 3px solid var(--primary);
}
.toast.toast-success { border-left-color: var(--state-success-text, var(--state-success)); background: var(--state-success-bg); }
.toast.toast-error { border-left-color: var(--state-error-text, var(--state-error)); background: var(--state-error-bg); }
.toast.toast-warning { border-left-color: var(--state-warning-text, var(--state-warning)); background: var(--state-warning-bg); }
.toast.toast-critical { border-left-color: var(--state-critical); background: var(--state-critical-bg); }
.toast.toast-info { border-left-color: var(--state-info-text, var(--state-info)); background: var(--state-info-bg); }
.toast-icon {
font-size: 20px;
flex-shrink: 0;
}
.toast-body {
flex: 1;
min-width: 0;
}
.toast-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--on-surface);
}
.toast-message {
font-size: var(--font-size-sm);
color: var(--on-surface-variant);
margin-top: 0.125rem;
}
/* DESIGN.md: Radius-full */
.toast-close {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target-min, 44px);
min-height: var(--touch-target-min, 44px);
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-full);
color: var(--on-surface-variant);
cursor: pointer;
flex-shrink: 0;
}
.toast-close:hover {
background: var(--surface-container);
}
/* Inline action button (undo-everywhere). Teal text button, flush right before the
close button — reads as the primary affordance on the toast without a filled bg. */
.toast-action {
display: inline-flex;
align-items: center;
min-height: var(--touch-target-min, 44px);
padding: 0 0.75rem;
background: transparent;
border: none;
color: var(--primary);
font: inherit;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: var(--label-sm-size, 0.6875rem);
cursor: pointer;
flex-shrink: 0;
border-radius: var(--btn-radius, 0);
}
.toast-action:hover {
background: var(--surface-container-high);
}
.toast-action:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ============================
Confirm Dialog
============================ */
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(var(--overlay-scrim-rgb), 0.5);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 150ms ease-out;
}
.dialog-panel {
background: var(--surface-container-high);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid var(--ghost-border, transparent);
border-radius: var(--radius-xl);
padding: var(--space-5);
width: 100%;
max-width: 420px;
animation: scale-in 200ms ease-out;
}
.dialog-title {
font-family: var(--font-headline);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--on-surface);
margin-bottom: 0.5rem;
}
.dialog-message {
font-size: var(--font-size-md);
color: var(--on-surface-variant);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* ============================
Bento Grid — Asymmetric card layout
============================ */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.bento-grid > .bento-8 { grid-column: span 8; }
.bento-grid > .bento-7 { grid-column: span 7; }
.bento-grid > .bento-6 { grid-column: span 6; }
.bento-grid > .bento-5 { grid-column: span 5; }
.bento-grid > .bento-4 { grid-column: span 4; }
.bento-grid > .bento-3 { grid-column: span 3; }
.bento-grid > .bento-12 { grid-column: span 12; }
@media (max-width: 767px) {
.bento-grid > [class*="bento-"] { grid-column: span 12; }
}
/* ============================
Metric Hero — Large hero metric with trend
============================ */
.metric-hero {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem;
background: var(--glass-bg, var(--surface-container));
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid var(--glass-border, transparent);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xl);
content-visibility: auto;
position: relative;
overflow: hidden;
}
.metric-hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--primary);
box-shadow: 2px 0 15px var(--primary-glow-hover);
}
.metric-hero-value {
font-family: var(--font-headline);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--on-surface);
letter-spacing: -0.02em;
}
.metric-hero-label {
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
}
.metric-hero-trend {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: var(--font-size-md);
font-weight: 600;
}
.metric-hero-trend.up { color: var(--secondary); }
.metric-hero-trend.down { color: var(--tertiary); }
/* ============================
Live Feed — Scrollable event log
============================ */
.live-feed {
display: flex;
flex-direction: column;
max-height: 400px;
overflow-y: auto;
padding: 1rem;
background: var(--glass-bg, var(--surface-container));
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border: 1px solid var(--glass-border, transparent);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xl);
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}
.live-feed-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--ghost-border);
}
.live-feed-item:last-child { border-bottom: none; }
.live-feed-timestamp {
font-size: var(--font-size-2xs);
font-family: var(--font-label);
color: var(--on-surface-variant);
white-space: nowrap;
min-width: 56px;
}
.live-feed-content {
font-size: var(--font-size-md);
line-height: 1.5;
color: var(--on-surface);
flex: 1;
min-width: 0;
}
/* ============================
Code Block — Dark bg code display with language tabs
============================ */
.code-block {
background: var(--surface-container-lowest);
border-radius: var(--card-radius);
border: 1px solid var(--glass-border, transparent);
overflow: hidden;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: var(--font-size-md);
line-height: 1.6;
}
.code-block-content {
padding: 1rem 1.25rem;
overflow-x: auto;
color: var(--on-surface);
white-space: pre;
}
/* ============================
Curator Tray — Glassmorphic floating filter panel
============================ */
.curator-tray {
position: fixed;
bottom: 5rem;
right: 1.5rem;
z-index: 50;
padding: 1.25rem;
min-width: 280px;
background: var(--glass-bg);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
border-radius: var(--panel-radius, var(--card-radius));
box-shadow: var(--shadow-xl);
border: 1px solid var(--ghost-border);
}
@media (max-width: 767px) {
.curator-tray {
position: fixed;
bottom: 4.5rem;
left: 1rem;
right: 1rem;
min-width: unset;
}
}
/* ============================
Monolith Hero — Full-width surface-dim + nested offset card
============================ */
.monolith-hero {
position: relative;
background: var(--surface-dim);
padding: 3rem 2rem;
margin: -1.5rem -1.5rem 1.5rem;
}
.monolith-hero-card {
background: var(--surface-bright, var(--surface-container));
padding: var(--space-6);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xl);
max-width: 720px;
}
/* ============================
Technical Rail — Vertical dark strip with icon buttons
============================ */
.technical-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.5rem;
background: var(--surface-container-lowest);
min-width: 48px;
}
.technical-rail-btn {
display: grid;
place-items: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
color: var(--on-surface-variant);
cursor: pointer;
border-radius: var(--btn-radius);
transition: background var(--transition-btn), color var(--transition-btn);
}
.technical-rail-btn:hover,
.technical-rail-btn.active {
background: var(--surface-container);
color: var(--primary);
}
/* ============================
Infrastructure Chip — Sharp corners, label-sm type
============================ */
.infrastructure-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
background: var(--surface-container-highest);
border-radius: var(--btn-radius);
font-size: var(--font-size-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--on-surface-variant);
}
/* ============================
Pulse Tint — AI processing breathing animation
============================ */
@keyframes pulse-tint {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.3; }
}
.pulse-tint {
position: relative;
}
.pulse-tint::after {
content: '';
position: absolute;
inset: 0;
background: var(--surface-tint, var(--primary));
border-radius: inherit;
animation: pulse-tint 2s ease-in-out infinite;
pointer-events: none;
}
/* ============================
Radar Chart — Concentric circle container
============================ */
.radar-chart {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 320px;
margin: 0 auto;
}
/* DESIGN.md: Radius-full */
.radar-chart-ring {
position: absolute;
inset: 0;
border: 1px solid var(--ghost-border);
border-radius: var(--radius-full);
}
.radar-chart-ring:nth-child(2) { inset: 15%; }
.radar-chart-ring:nth-child(3) { inset: 30%; }
.radar-chart-ring:nth-child(4) { inset: 45%; }
/* ============================
Heatmap Grid — Color-coded cells
============================ */
.heatmap-grid {
display: grid;
gap: 2px;
}
.heatmap-cell {
aspect-ratio: 1;
border-radius: var(--btn-radius);
min-width: 16px;
min-height: 16px;
transition: transform var(--transition-card);
}
.heatmap-cell:hover { transform: scale(1.2); }
.heatmap-cell.level-0 { background: var(--surface-container); }
.heatmap-cell.level-1 { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.heatmap-cell.level-2 { background: color-mix(in srgb, var(--primary) 40%, transparent); }
.heatmap-cell.level-3 { background: color-mix(in srgb, var(--primary) 60%, transparent); }
.heatmap-cell.level-4 { background: var(--primary); }
/* ============================
Ghost Button — No background, primary text
============================ */
.ghost-button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid var(--ghost-border);
border-radius: var(--btn-radius);
color: var(--primary);
font-size: var(--font-size-md);
font-weight: 600;
cursor: pointer;
transition: background var(--transition-btn), color var(--transition-btn);
}
.ghost-button:hover {
background: var(--surface-container-high);
}
/* ============================
Skeleton Pulse Animation
============================ */
@keyframes skeleton-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
.skeleton {
background: var(--surface-container-high);
border-radius: var(--btn-radius);
animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-text { height: 0.875rem; width: 100%; }
/* DESIGN.md: Radius-full */
.skeleton-circle { width: 40px; height: 40px; border-radius: var(--radius-full); }
.skeleton-card { height: 120px; width: 100%; border-radius: var(--card-radius); }
.skeleton-table-row { height: 2.5rem; width: 100%; margin-bottom: 0.5rem; }
.skeleton-chart { height: 200px; width: 100%; border-radius: var(--card-radius); }
/* ============================
Kbd Shortcut
============================ */
kbd {
display: inline-block;
/* ref-nav #8: beyaz tus kapagi, hayalet cerceve, koyu metin. */
min-width: 1.75rem;
text-align: center;
padding: 0.25rem 0.5rem;
background: var(--surface-container-lowest);
color: var(--on-surface);
box-shadow: 0 1px 0 var(--ghost-border);
font-family: var(--font-label);
font-size: var(--font-size-xs);
font-weight: 600;
border: 1px solid var(--ghost-border);
border-radius: var(--btn-radius);
line-height: 1.4;
vertical-align: middle;
}
/* ============================
Mini Chart (pure CSS)
============================ */
.mini-chart {
display: flex;
align-items: flex-end;
gap: 2px;
height: 48px;
min-width: 60px;
}
.mini-chart-bar {
flex: 1;
background: var(--primary);
opacity: 0.6;
border-radius: var(--btn-radius) var(--btn-radius) 0 0;
min-width: 4px;
transition: opacity var(--transition-card);
}
.mini-chart-bar:hover { opacity: 1; }
.mini-chart-sparkline {
display: flex;
align-items: flex-end;
gap: 1px;
height: 32px;
}
.mini-chart-sparkline .mini-chart-bar {
width: 2px;
border-radius: var(--btn-radius);
}
/* ══ EĞİLİM ÇUBUĞU — satır içi mikro grafik ══════════════════════════════
ÖLÇÜLDÜ 2026-09-16. Paket `.mini-chart-sparkline` sunuyordu ama iki eksiği
vardı: (a) rengi sabit `--primary` idi, yani bir DURUM eğilimini (düşen
başarı oranı) marka tonuyla çiziyordu; (b) son değer vurgusu yoktu, yedi
çubuk eşit ağırlıkta duruyor ve göz "bugün"ü bulamıyordu.
`.trend-spark` bu iki eksiği kapatır ve KPI kartında da tablo satırında da
aynı görünür. Durum rengi `--spark-tint` üzerinden gelir; markup
`style="--spark-tint: var(--state-error)"` yazar, ham hex DEĞİL.
Yükseklik yüzdeyle verilir (`--spark-h`), böylece kap yüksekliği değişse de
oran korunur — sabit px, kartta ve satırda farklı görünürdü.
ÖLÇÜLDÜ 2026-09-16 — **`--spark-h` SERİYE GÖRE normalize edilir, mutlak
değerle DEĞİL.** İlk sürüm ham metriği (0-100 yüzde) doğrudan yüksekliğe
çeviriyordu ve dar aralıklı seriler DÜMDÜZ görünüyordu:
seri [95,92,88,80,84,86,87] -> yükseklikler 21,20,19,18,18,19,19
aralık yalnız 3px, desen görünmez
Kap yüksekliğini artırmak çözmedi (22→32px, aralık 3→4px). Doğru okuma:
eğilim çubuğu mutlak düzeyi değil DEĞİŞİMİ anlatır. Seri kendi min-max
aralığında normalize edilince aynı veri 19px'lik bir desen üretir.
Markup şunu hesaplar (sunucu tarafı, tek satır):
h = 15 + (v - min) / (max - min) * 85 [min==max ise 50]
Mutlak düzey ZATEN yanındaki sayıda yazılıdır (%87,1); çubuğun işi onu
tekrar etmek değil, nereden gelindiğini göstermek. */
.trend-spark {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 24px;
flex-shrink: 0;
}
.trend-spark > * {
width: 4px;
min-height: 3px;
height: var(--spark-h, 50%);
border-radius: 2px;
/* Geçmiş çubuklar soluk: göz son değere gider. */
background: color-mix(in srgb, var(--spark-tint, var(--primary)) 28%, transparent);
}
/* SON değer tam renkte — "şu an" buradadır. */
.trend-spark > :last-child {
background: var(--spark-tint, var(--primary));
}
/* Delta rozeti — eğilimin YÖNÜ sözcükle de okunur (renk tek sinyal değil). */
.trend-delta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--on-surface-variant);
white-space: nowrap;
}
.trend-delta--up { color: var(--state-success-text); }
.trend-delta--down { color: var(--state-error-text); }
/* ============================
Timeline
============================ */
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background: var(--ghost-border);
}
.timeline-item {
position: relative;
padding-bottom: 1.25rem;
}
/* DESIGN.md: Radius-full */
.timeline-dot {
position: absolute;
left: -2rem;
top: 0.25rem;
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--primary);
border: 2px solid var(--surface);
z-index: 1;
}
.timeline-time {
font-size: var(--font-size-2xs);
color: var(--on-surface-variant);
margin-bottom: 0.125rem;
}
.timeline-title {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--on-surface);
}
.timeline-desc {
font-size: var(--font-size-sm);
color: var(--on-surface-variant);
line-height: 1.5;
}
/* ============================
Step Indicator
============================ */
.step-indicator {
display: flex;
align-items: center;
gap: 0;
width: 100%;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
/* DESIGN.md: Radius-full */
.step-circle {
width: 28px;
height: 28px;
border-radius: var(--radius-full);
display: grid;
place-items: center;
font-size: var(--font-size-2xs);
font-weight: 700;
z-index: 1;
}
.step-circle.completed {
background: var(--primary);
color: var(--on-primary);
}
.step-circle.active {
background: var(--primary);
color: var(--on-primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.step-circle.pending {
background: var(--surface-container-highest);
color: var(--on-surface-variant);
}
.step-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--on-surface-variant);
margin-top: 0.375rem;
text-align: center;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.step-connector {
position: absolute;
top: 14px;
left: 50%;
width: 100%;
height: 2px;
background: var(--ghost-border);
z-index: 0;
}
.step-connector.completed { background: var(--primary); }
/* ============================
Avatar
============================ */
/* DESIGN.md: Radius-full */
.avatar {
/* --avatar-size is provided via inline style by the Avatar primitive (per-instance). */
--avatar-size: 32px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--avatar-size);
height: var(--avatar-size);
font-size: calc(var(--avatar-size) * 0.4);
border-radius: var(--radius-full);
overflow: hidden;
background: var(--surface-container-highest);
color: var(--on-surface-variant);
font-family: var(--font-headline);
font-weight: 700;
flex-shrink: 0;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* DESIGN.md: Radius-full */
.avatar-status {
position: absolute;
bottom: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: var(--radius-full);
border: 2px solid var(--surface);
}
/* Durum renkleri Avatar.razor.css'te (status-*); buradaki .avatar-status.online ailesi hiç
eşleşmiyordu — bileşen "online" değil "status-online" basar. ÖLÇÜLDÜ 2026-10-01. */
/* ============================
Filter Bar
============================ */
.filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 0;
min-width: 0;
}
/* KANONİK GİRDİ AİLESİNE HİZALI. ÖLÇÜLDÜ 2026-09-03: bu kural min-height 40px
ve 0.5rem/0.75rem dolgu dayatıyordu; özgüllüğü (0-1-1) kanonik .filter-select
ailesinden (0-1-0) yüksek olduğu için onu EZİYORDU. Sonuç: aynı filtre
seçicisi bazı sayfalarda 40px, bazılarında 44px. 40px ayrıca WCAG 2.5.5
dokunma hedefi minimumunun (44px) ALTINDA.
Kural SİLİNMEDİ, kanoniğe hizalandı: 22 sınıfsız