/* =========================================================================
   İlkevim CRM — Tasarım sistemi
   Tasarım dili: "Autonomous Kinetic Precision"
   - Sakin, açık mavi-beyaz zemin; beyaz ve ince kenarlı çalışma yüzeyleri
   - Başlık / etiket / sayı: Geist, metin: Inter, ikon: Material Symbols
   - Siyah birincil eylem, nane yeşili "canlı" durum, lavanta "otomasyon" vurgusu
   Bootstrap 5.3 ızgara, yardımcı sınıflar ve JS bileşenleri için kullanılır;
   renk, tipografi ve bileşen görünümü bu dosyadan gelir.
   ========================================================================= */

/* ------------------------------------------------------------------ 1. Tasarım belirteçleri */
:root {
    /* Yüzeyler */
    --c-surface: #f8f9ff;
    --c-surface-lowest: #ffffff;
    --c-surface-low: #eff4ff;
    --c-surface-container: #e5eeff;
    --c-surface-high: #dce9ff;
    --c-surface-highest: #d3e4fe;
    --c-surface-tint: #565e74;

    /* Metin */
    --c-on-surface: #0b1c30;
    --c-on-surface-variant: #45464d;
    --c-muted: #64748b;
    --c-placeholder: #94a3b8;

    /* Çizgiler */
    --c-outline: #76777d;
    --c-outline-variant: #c6c6cd;
    --c-border: #e2e8f0;
    --c-border-strong: #cbd5e1;
    --c-divider: #edf1f8;
    --c-surface-disabled: #f3f6fb;

    /* Birincil (siyah) */
    --c-primary: #000000;
    --c-primary-hover: #1e293b;
    --c-on-primary: #ffffff;
    --c-primary-container: #131b2e;

    /* İkincil: canlı / başarılı (zümrüt) */
    --c-secondary: #006c49;
    --c-secondary-container: #6cf8bb;
    --c-on-secondary-container: #00714d;
    --c-emerald: #10b981;
    --c-emerald-soft: #ecfdf5;

    /* Üçüncül: otomasyon / bot (çivit - lavanta) */
    --c-tertiary-container: #07006c;
    --c-tertiary-fixed: #e1e0ff;
    --c-on-tertiary-fixed: #07006c;
    --c-on-tertiary-container: #7073ff;
    --c-indigo: #6366f1;
    --c-violet: #8b5cf6;

    /* Uyarı ve hata */
    --c-warning: #b45309;
    --c-warning-container: #fef3c7;
    --c-on-warning-container: #92400e;
    --c-error: #ba1a1a;
    --c-error-container: #ffdad6;
    --c-on-error-container: #93000a;

    /* Bilgi / beklemede (mavi) */
    --c-info-container: #dce9ff;
    --c-on-info-container: #0b1c30;

    /* Tipografi */
    --f-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'Geist Mono', 'Geist', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Köşe yarıçapları */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px;

    /* Gölgeler (katmanlar) */
    --sh-1: 0 1px 2px 0 rgba(11, 28, 48, 0.05);
    --sh-1-hover: 0 4px 12px -2px rgba(11, 28, 48, 0.08), 0 1px 2px rgba(11, 28, 48, 0.04);
    --sh-2: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --sh-3: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --sh-bar: 0 1px 8px rgba(0, 0, 0, 0.04);
    --sh-live: 0 0 0 3px rgba(16, 185, 129, 0.15);
    --ring: 0 0 0 3px rgba(11, 28, 48, 0.10);

    /* Kabuk ölçüleri */
    --sidebar-w: 272px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;

    /* Bootstrap değişkenleri */
    --bs-body-font-family: var(--f-body);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5715;
    --bs-body-color: var(--c-on-surface);
    --bs-body-color-rgb: 11, 28, 48;
    --bs-body-bg: var(--c-surface);
    --bs-body-bg-rgb: 248, 249, 255;
    --bs-emphasis-color: var(--c-on-surface);
    --bs-secondary-color: var(--c-muted);
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-tertiary-color: var(--c-placeholder);
    --bs-secondary-bg: var(--c-surface-low);
    --bs-tertiary-bg: var(--c-surface-low);
    --bs-heading-color: var(--c-on-surface);
    --bs-link-color: var(--c-on-surface);
    --bs-link-color-rgb: 11, 28, 48;
    --bs-link-hover-color: var(--c-surface-tint);
    --bs-link-hover-color-rgb: 86, 94, 116;
    --bs-link-decoration: none;
    --bs-border-color: var(--c-border);
    --bs-border-color-translucent: rgba(11, 28, 48, 0.08);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-border-radius-xxl: 20px;
    --bs-border-radius-pill: var(--r-full);
    --bs-box-shadow-sm: var(--sh-1);
    --bs-box-shadow: var(--sh-2);
    --bs-box-shadow-lg: var(--sh-3);
    --bs-focus-ring-color: rgba(11, 28, 48, 0.12);

    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-secondary: #45464d;
    --bs-secondary-rgb: 69, 70, 77;
    --bs-success: #006c49;
    --bs-success-rgb: 0, 108, 73;
    --bs-info: #6366f1;
    --bs-info-rgb: 99, 102, 241;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: #ba1a1a;
    --bs-danger-rgb: 186, 26, 26;
    --bs-light: #eff4ff;
    --bs-light-rgb: 239, 244, 255;
    --bs-dark: #0b1c30;
    --bs-dark-rgb: 11, 28, 48;

    --bs-primary-text-emphasis: #0b1c30;
    --bs-primary-bg-subtle: #e5eeff;
    --bs-primary-border-subtle: #c9d8f5;
    --bs-success-text-emphasis: #00714d;
    --bs-success-bg-subtle: #e3fcef;
    --bs-success-border-subtle: #a7f3d0;
    --bs-info-text-emphasis: #3730a3;
    --bs-info-bg-subtle: #eef2ff;
    --bs-info-border-subtle: #c7d2fe;
    --bs-warning-text-emphasis: #92400e;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-border-subtle: #fde68a;
    --bs-danger-text-emphasis: #93000a;
    --bs-danger-bg-subtle: #fff1f0;
    --bs-danger-border-subtle: #ffdad6;
    --bs-secondary-text-emphasis: #45464d;
    --bs-secondary-bg-subtle: #eff4ff;
    --bs-secondary-border-subtle: #dce3ef;
    --bs-light-text-emphasis: #45464d;
    --bs-light-bg-subtle: #f8f9ff;
    --bs-light-border-subtle: #e2e8f0;
    --bs-dark-text-emphasis: #0b1c30;
    --bs-dark-bg-subtle: #dce9ff;
    --bs-dark-border-subtle: #c6c6cd;
}

/* ------------------------------------------------------------------ 2. Temel */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--c-surface);
    color: var(--c-on-surface);
    font-family: var(--f-body);
    font-size: 0.875rem;
    line-height: 1.5715;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--c-on-surface);
    letter-spacing: -0.02em;
}
h1, .h1 { font-size: 2rem; line-height: 2.5rem; letter-spacing: -0.025em; }
h2, .h2 { font-size: 1.5rem; line-height: 2rem; }
h3, .h3 { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em; }
h4, .h4 { font-size: 1.125rem; line-height: 1.625rem; letter-spacing: -0.012em; }
h5, .h5 { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; }
h6, .h6 { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: -0.01em; }
a { color: var(--c-on-surface); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-surface-tint); }
::selection { background: var(--c-surface-highest); color: var(--c-on-surface); }
hr { border-color: var(--c-border); opacity: 1; }
code, kbd, pre, samp, .font-monospace { font-family: var(--f-mono); }
.small, small { font-size: 0.8125rem; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 600 !important; }
.fw-bolder { font-weight: 700 !important; }
.vr { background-color: var(--c-border); opacity: 1; }

/* Kaydırma çubuğu: ince, sakin */
* { scrollbar-width: thin; scrollbar-color: #c9d3e3 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c9d3e3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ 3. İkonlar (Material Symbols) */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    overflow: hidden;
    max-width: 1.2em;
}
.icon-12 { font-size: 12px !important; }
.icon-14 { font-size: 14px !important; }
.icon-16 { font-size: 16px !important; }
.icon-18 { font-size: 18px !important; }
.icon-20 { font-size: 20px !important; }
.icon-22 { font-size: 22px !important; }
.icon-24 { font-size: 24px !important; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-32 { font-size: 32px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; }
.icon-40 { font-size: 40px !important; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; }
.icon-spin { animation: ui-spin 0.9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ 4. Tipografi ölçeği */
.t-headline-xl { font-family: var(--f-display); font-size: 2.5rem; line-height: 3rem; font-weight: 600; letter-spacing: -0.03em; }
.t-headline-lg { font-family: var(--f-display); font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.025em; }
.t-headline-md { font-family: var(--f-display); font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.t-headline-sm { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.015em; }
.t-title-md { font-family: var(--f-display); font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.t-title-sm { font-family: var(--f-display); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.t-body-lg { font-family: var(--f-body); font-size: 1rem; line-height: 1.625rem; letter-spacing: -0.011em; }
.t-body-md { font-family: var(--f-body); font-size: 0.875rem; line-height: 1.375rem; letter-spacing: -0.006em; }
.t-body-sm { font-family: var(--f-body); font-size: 0.8125rem; line-height: 1.125rem; letter-spacing: 0; }
.t-label-md { font-family: var(--f-display); font-size: 0.75rem; line-height: 1rem; font-weight: 500; letter-spacing: 0.01em; }
.t-label-sm { font-family: var(--f-display); font-size: 0.6875rem; line-height: 0.875rem; font-weight: 600; letter-spacing: 0.025em; }
.t-overline { font-family: var(--f-display); font-size: 0.6875rem; line-height: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-on-surface-variant); }
.t-code { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1rem; }
.tnum, .t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'cv05' on; }
.text-variant { color: var(--c-on-surface-variant) !important; }
.text-muted { color: var(--c-muted) !important; }
.text-strong { color: var(--c-on-surface) !important; }
.text-live { color: var(--c-secondary) !important; }
.text-ai { color: var(--c-tertiary-container) !important; }
.text-ai-soft { color: var(--c-on-tertiary-container) !important; }
.text-danger { color: var(--c-error) !important; }
.text-success { color: var(--c-secondary) !important; }
.text-warning { color: var(--c-warning) !important; }
.text-info { color: var(--c-indigo) !important; }
.text-primary { color: var(--c-on-surface) !important; }
.text-secondary { color: var(--c-on-surface-variant) !important; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.mono:not([class*="t-"]) { font-size: .85em; }
.truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ 5. Uygulama kabuğu */
.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--sidebar-w);
    background: var(--c-surface-lowest);
    box-shadow: var(--sh-bar);
    display: flex; flex-direction: column;
    transition: width .2s ease, transform .25s ease;
}
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--topbar-h);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.5rem;
    background: rgba(248, 249, 255, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    backdrop-filter: saturate(160%) blur(20px);
    box-shadow: var(--sh-bar);
}
.app-content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 2rem; flex: 1 0 auto; }
.app-content > * + * { margin-top: 1.5rem; }
.app-content > * + .row { margin-top: calc(1.5rem - var(--bs-gutter-y, 0px)); }
.app-content > .alert { margin-bottom: 0; }
[id] { scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.app-footer {
    width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 2rem 1.5rem;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
    color: var(--c-muted);
}

/* Kenar çubuğu */
.sb-brand { height: var(--topbar-h); padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sb-logo { display: flex; align-items: center; gap: .625rem; color: var(--c-on-surface); min-width: 0; }
.sb-logo:hover { color: var(--c-on-surface); }
.sb-logo-mark {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    background: var(--c-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-logo-mark .material-symbols-outlined { font-size: 19px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.sb-logo-text { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.sb-logo-text small { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: var(--c-on-surface-variant); margin-top: 3px; }
.sb-icon-btn {
    width: 32px; height: 32px; border-radius: var(--r-md); border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: var(--c-on-surface-variant);
    transition: background .15s, color .15s;
}
.sb-icon-btn:hover { background: var(--c-surface-low); color: var(--c-on-surface); }
.sb-workspace {
    margin: .25rem .75rem .5rem; padding: .5rem .625rem;
    background: var(--c-surface-low); border-radius: var(--r-lg);
    display: flex; align-items: center; gap: .625rem; min-width: 0;
}
.sb-workspace-mark {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--c-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; font-size: .8125rem;
}
.sb-workspace-name { font-family: var(--f-display); font-size: .75rem; font-weight: 600; line-height: 1rem; color: var(--c-on-surface); }
.sb-workspace-meta { font-family: var(--f-display); font-size: .6875rem; line-height: .875rem; color: var(--c-on-surface-variant); }
.sb-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-bottom: .75rem; }
.sb-section { padding: 1rem 1.5rem .375rem; font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-surface-variant); white-space: nowrap; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 .75rem; margin: 0; list-style: none; }
.sb-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem; border-radius: var(--r-lg);
    color: var(--c-on-surface-variant);
    font-family: var(--f-display); font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25rem;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap; position: relative;
}
.sb-link .material-symbols-outlined { font-size: 20px; }
.sb-link:hover { background: var(--c-surface-low); color: var(--c-on-surface); }
.sb-link.active { background: var(--c-surface-high); color: var(--c-on-surface); font-weight: 600; }
.sb-link.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.sb-link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
    background: var(--c-primary); color: #fff;
    font-family: var(--f-display); font-size: .6875rem; font-weight: 700; line-height: 20px; text-align: center;
}
.sb-badge--alert { background: var(--c-error); }
.sb-badge--ai { background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); border-radius: 6px; font-weight: 600; }
.sb-footer { padding: .5rem .75rem .75rem; flex-shrink: 0; }
.sb-user {
    display: flex; align-items: center; gap: .625rem; padding: .5rem; border-radius: var(--r-lg);
    background: var(--c-surface-low); transition: background .15s;
}
.sb-user:hover { background: var(--c-surface-container); }
.sb-user-name { font-family: var(--f-display); font-size: .875rem; font-weight: 600; line-height: 1.1rem; color: var(--c-on-surface); }
.sb-user-role { font-family: var(--f-display); font-size: .6875rem; line-height: .875rem; color: var(--c-on-surface-variant); }
.sb-user .dropdown-toggle::after { display: none; }

/* Daraltılmış kenar çubuğu (masaüstü) */
@media (min-width: 992px) {
    .sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
    .sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
    .sidebar-collapsed .sb-logo-text,
    .sidebar-collapsed .sb-workspace > div,
    .sidebar-collapsed .sb-link-label,
    .sidebar-collapsed .sb-badge,
    .sidebar-collapsed .sb-user > div:not(.avatar),
    .sidebar-collapsed .sb-user > .dropdown { display: none !important; }
    .sidebar-collapsed .sb-section { visibility: hidden; height: 1rem; padding: .25rem 0; }
    .sidebar-collapsed .sb-brand { padding: 0; justify-content: center; flex-direction: column; height: auto; gap: .5rem; padding-top: .875rem; padding-bottom: .375rem; }
    .sidebar-collapsed .sb-workspace { justify-content: center; margin: .25rem .75rem; padding: .5rem 0; }
    .sidebar-collapsed .sb-link { justify-content: center; padding: .5rem 0; }
    .sidebar-collapsed .sb-link.has-count::after {
        content: ''; position: absolute; top: 6px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-error);
    }
    .sidebar-collapsed .sb-user { justify-content: center; background: transparent; }
    .sidebar-collapsed .sb-collapse-btn .material-symbols-outlined { transform: scaleX(-1); }
}

/* Üst çubuk */
.tb-left { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 auto; }
.tb-right { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.tb-icon-btn.tb-menu-btn { display: none; }
.tb-search { position: relative; width: 100%; max-width: 400px; }
.tb-search-box {
    display: flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 .5rem 0 .75rem;
    background: var(--c-surface-lowest); border-radius: var(--r-lg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); border: 1px solid transparent;
    transition: border-color .15s, box-shadow .15s;
}
.tb-search-box:focus-within { border-color: var(--c-border-strong); box-shadow: var(--ring); }
.tb-search-box .material-symbols-outlined { color: var(--c-on-surface-variant); }
.tb-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .8125rem; color: var(--c-on-surface); }
.tb-search-input::placeholder { color: var(--c-on-surface-variant); opacity: .85; }
.tb-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1060;
    background: #fff; border: 1px solid var(--c-border-strong); border-radius: var(--r-lg);
    box-shadow: var(--sh-2); padding: .375rem; max-height: 420px; overflow-y: auto;
}
.tb-search-group { padding: .5rem .625rem .25rem; }
.tb-search-item {
    display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--r-md);
    color: var(--c-on-surface); font-size: .8125rem;
}
.tb-search-item:hover, .tb-search-item.is-active { background: var(--c-surface-low); color: var(--c-on-surface); }
.tb-search-item .material-symbols-outlined { color: var(--c-on-surface-variant); font-size: 18px; }
.tb-search-empty { padding: .875rem; text-align: center; color: var(--c-muted); font-size: .8125rem; }
.kbd {
    display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px;
    background: var(--c-surface-low); color: var(--c-on-surface-variant);
    font-family: var(--f-display); font-size: .6875rem; font-weight: 500; white-space: nowrap;
}
.tb-pill {
    display: inline-flex; align-items: center; gap: .375rem; height: 36px; padding: 0 .75rem;
    border-radius: var(--r-full); background: var(--c-surface-lowest); color: var(--c-on-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    font-family: var(--f-display); font-size: .8125rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
    transition: background .15s;
}
.tb-pill:hover { background: var(--c-surface-low); color: var(--c-on-surface); }
.tb-pill .material-symbols-outlined { font-size: 18px; color: var(--c-on-surface-variant); }
.tb-pill-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--c-surface-highest); font-size: .6875rem; font-weight: 700; line-height: 20px; text-align: center; }
.tb-live {
    display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .875rem;
    border-radius: var(--r-full); background: var(--c-secondary-container); color: var(--c-on-secondary-container);
    font-family: var(--f-display); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.tb-live:hover { color: var(--c-on-secondary-container); filter: brightness(.98); }
.tb-cta.btn { height: 38px; border-radius: var(--r-lg); padding: 0 .875rem; }
.tb-icon-btn {
    position: relative; width: 38px; height: 38px; border-radius: var(--r-lg); border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: var(--c-on-surface-variant);
    transition: background .15s, color .15s;
}
.tb-icon-btn:hover { background: var(--c-surface-low); color: var(--c-on-surface); }
.tb-icon-btn .material-symbols-outlined { font-size: 22px; }
.tb-count {
    position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full);
    background: var(--c-error); color: #fff; font-family: var(--f-display); font-size: .625rem; font-weight: 700;
    line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--c-surface);
}

/* Mobil ve tablet */
.app-backdrop { display: none; }
@media (max-width: 1399.98px) {
    .tb-live { display: none; }
}
@media (max-width: 1199.98px) {
    .tb-pill-label { display: none; }
}
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); width: 280px; box-shadow: var(--sh-3); }
    .app-main { margin-left: 0; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-open .app-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1035;
        background: rgba(15, 23, 42, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    .tb-icon-btn.tb-menu-btn { display: inline-flex; }
    .sb-collapse-btn { display: none; }
    .app-topbar { padding: 0 1rem; }
    .app-content { padding: 1.5rem 1rem; }
    .app-footer { padding: 0 1rem 1rem; }
    .tb-search .kbd { display: none; }
}
@media (max-width: 575.98px) {
    .tb-cta-label { display: none; }
    .tb-cta.btn { width: 38px; padding: 0; justify-content: center; }
    .tb-pill { display: none; }
    .app-content { padding: 1.25rem .875rem; }
}

/* ------------------------------------------------------------------ 6. Sayfa başlığı */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.page-head-main { min-width: 0; flex: 1 1 420px; }
.page-eyebrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .375rem;
    font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--c-on-surface-variant);
}
.page-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-emerald); display: inline-block; }
.page-title {
    margin: 0; font-family: var(--f-display); font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.025em;
    color: var(--c-on-surface); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
}
.page-sub { margin: .375rem 0 0; color: var(--c-on-surface-variant); font-size: .875rem; line-height: 1.375rem; max-width: 760px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; flex: 0 0 auto; }
@media (max-width: 767.98px) { .page-actions { flex: 1 1 100%; } .page-actions > .filter-bar { width: 100%; } }
@media (max-width: 767.98px) {
    .page-title { font-size: 1.625rem; line-height: 2.125rem; letter-spacing: -0.02em; }
}

/* ------------------------------------------------------------------ 7. Yüzeyler: panel, kart, metrik */
.panel, .card {
    background: var(--c-surface-lowest);
    border: 1px solid rgba(11, 28, 48, 0.045);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
    --bs-card-border-color: rgba(11, 28, 48, 0.045);
    --bs-card-border-radius: var(--r-xl);
    --bs-card-inner-border-radius: calc(var(--r-xl) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}
.panel { position: relative; }
.panel-head, .card-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1.125rem 1.25rem; background: transparent; border-bottom: 1px solid var(--c-divider);
}
.card-header { display: block; }
.card-header.d-flex { display: flex !important; }
.panel-head--flush, .panel-head.border-0 { border-bottom: 0; padding-bottom: .25rem; }
.panel-title, .card-title {
    margin: 0; font-family: var(--f-display); font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--c-on-surface); display: flex; align-items: center; gap: .5rem;
}
.panel-sub { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.125rem; color: var(--c-on-surface-variant); }
.panel-body, .card-body { padding: 1.25rem; }
.panel-foot, .card-footer {
    padding: .875rem 1.25rem; background: color-mix(in srgb, var(--c-surface-low) 45%, transparent);
    border-top: 1px solid var(--c-divider);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.panel-tint { background: var(--c-surface-low); border-color: transparent; box-shadow: none; }
.panel-inset { background: var(--c-surface-low); border-radius: var(--r-lg); padding: 1rem; }
.panel-ai { background: linear-gradient(135deg, #ffffff 0%, var(--c-surface-low) 55%, rgba(225, 224, 255, 0.55) 100%); }
.panel-live { box-shadow: var(--sh-1), var(--sh-live); }
.panel-hover { transition: box-shadow .2s ease, transform .2s ease; }
.panel-hover:hover { box-shadow: var(--sh-1-hover); }
.card .card-header:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }

.icon-tile {
    width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-low); color: var(--c-on-surface-variant);
}
.icon-tile .material-symbols-outlined { font-size: 18px; }
.icon-tile-lg { width: 40px; height: 40px; border-radius: var(--r-lg); }
.icon-tile-lg .material-symbols-outlined { font-size: 22px; }
.icon-tile--dark { background: var(--c-primary); color: #fff; }
.icon-tile--live { background: var(--c-emerald-soft); color: var(--c-secondary); }
.icon-tile--ai { background: var(--c-tertiary-fixed); color: var(--c-tertiary-container); }
.icon-tile--danger { background: #fff1f0; color: var(--c-error); }
.icon-tile--warning { background: var(--c-warning-container); color: var(--c-on-warning-container); }
.icon-tile--info { background: var(--c-surface-high); color: var(--c-on-surface); }

/* Metrik kartı */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.metric-grid--fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
a.metric.is-active { box-shadow: var(--sh-1), 0 0 0 1px var(--c-on-surface); }
@media (max-width: 575.98px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric { min-height: 0; padding: .875rem; } .metric-value { font-size: 1.25rem; line-height: 1.75rem; } }
.metric {
    background: var(--c-surface-lowest); border: 1px solid rgba(11, 28, 48, 0.045); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
    min-height: 118px; transition: box-shadow .2s ease; color: var(--c-on-surface);
}
a.metric:hover { box-shadow: var(--sh-1-hover); color: var(--c-on-surface); }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.metric-label { font-family: var(--f-display); font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .01em; color: var(--c-on-surface-variant); }
.metric-label--caps { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.metric-value { font-family: var(--f-display); font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-on-surface); }
.metric-value small { font-size: .8125rem; font-weight: 500; color: var(--c-on-surface-variant); letter-spacing: 0; }
.metric-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; font-size: .75rem; color: var(--c-on-surface-variant); }
.metric--ai { background: linear-gradient(135deg, #ffffff 0%, var(--c-surface-low) 50%, rgba(225, 224, 255, 0.5) 100%); }
.metric--ai .metric-value { color: var(--c-tertiary-container); }
.metric--alert .metric-value { color: var(--c-error); }
.metric--live .metric-value { color: var(--c-secondary); }
.trend { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-display); font-size: .6875rem; font-weight: 600; }
.trend .material-symbols-outlined { font-size: 16px; }
.trend-up { color: var(--c-secondary); }
.trend-down { color: var(--c-error); }

/* Vurgu şeridi (ör. "Gece Mesaisi Raporu") */
.hero-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
    padding: .75rem 1rem; border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--c-primary-container) 0%, #3b4867 30%, var(--c-surface-high) 70%, var(--c-surface-container) 100%);
    color: var(--c-on-surface); box-shadow: var(--sh-1);
}
.hero-strip-title { color: #fff; font-family: var(--f-display); font-weight: 600; font-size: .875rem; }
.hero-strip .icon-tile { background: var(--c-tertiary-container); color: var(--c-tertiary-fixed); }

/* ------------------------------------------------------------------ 8. Butonlar */
.btn {
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-font-family: var(--f-display);
    --bs-btn-font-size: .8125rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-focus-box-shadow: var(--ring);
    --bs-btn-disabled-opacity: .45;
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    letter-spacing: -0.005em; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn-sm {
    --bs-btn-padding-x: .625rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: var(--r-sm); --bs-btn-line-height: 1.125rem;
}
.btn-sm .material-symbols-outlined { font-size: 16px; }
.btn-lg {
    --bs-btn-padding-x: 1.125rem; --bs-btn-padding-y: .625rem; --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--r-lg);
}
.btn-pill { --bs-btn-border-radius: var(--r-full); }
.btn-primary, .btn-dark {
    --bs-btn-color: #fff; --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-hover-border-color: var(--c-primary-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #334155;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary);
}
.btn-secondary, .btn-light, .btn-white, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-ghost {
    --bs-btn-color: var(--c-on-surface); --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border);
    --bs-btn-hover-color: var(--c-on-surface); --bs-btn-hover-bg: var(--c-surface); --bs-btn-hover-border-color: var(--c-border-strong);
    --bs-btn-active-color: var(--c-on-surface); --bs-btn-active-bg: var(--c-surface-low); --bs-btn-active-border-color: var(--c-border-strong);
    --bs-btn-disabled-color: var(--c-muted); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--c-border);
}
.btn-soft, .btn-tonal {
    --bs-btn-color: var(--c-on-surface); --bs-btn-bg: var(--c-surface-low); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--c-on-surface); --bs-btn-hover-bg: var(--c-surface-container); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--c-on-surface); --bs-btn-active-bg: var(--c-surface-high); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--c-muted); --bs-btn-disabled-bg: var(--c-surface-low); --bs-btn-disabled-border-color: transparent;
}
/* .btn-soft eski ekranlarda .btn sınıfı olmadan da kullanılabilir */
.btn-soft:not(.btn) {
    display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .875rem; border-radius: var(--r-md);
    background: var(--c-surface-low); color: var(--c-on-surface); border: 0;
    font-family: var(--f-display); font-size: .8125rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap;
    transition: background .15s ease;
}
.btn-soft:not(.btn):hover { background: var(--c-surface-container); color: var(--c-on-surface); }
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--c-secondary); --bs-btn-border-color: var(--c-secondary);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #005236; --bs-btn-hover-border-color: #005236;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #00452e; --bs-btn-active-border-color: #00452e;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--c-secondary); --bs-btn-disabled-border-color: var(--c-secondary);
}
.btn-live {
    --bs-btn-color: var(--c-on-secondary-container); --bs-btn-bg: var(--c-secondary-container); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #00452e; --bs-btn-hover-bg: #4edea3; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #00452e; --bs-btn-active-bg: #4edea3; --bs-btn-active-border-color: transparent;
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--c-error); --bs-btn-border-color: var(--c-error);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #93000a; --bs-btn-hover-border-color: #93000a;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #7a0008; --bs-btn-active-border-color: #7a0008;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--c-error); --bs-btn-disabled-border-color: var(--c-error);
}
.btn-warning {
    --bs-btn-color: var(--c-on-warning-container); --bs-btn-bg: var(--c-warning-container); --bs-btn-border-color: #fde68a;
    --bs-btn-hover-color: #78350f; --bs-btn-hover-bg: #fde68a; --bs-btn-hover-border-color: #fcd34d;
    --bs-btn-active-color: #78350f; --bs-btn-active-bg: #fcd34d; --bs-btn-active-border-color: #fcd34d;
}
.btn-info, .btn-ai {
    --bs-btn-color: #fff; --bs-btn-bg: var(--c-indigo); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--c-indigo); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #4f46e5; --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, var(--c-indigo), var(--c-violet));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-info:hover, .btn-ai:hover { filter: brightness(1.06); }
.btn-outline-danger, .btn-danger-ghost {
    --bs-btn-color: var(--c-error); --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border);
    --bs-btn-hover-color: var(--c-on-error-container); --bs-btn-hover-bg: #fff1f0; --bs-btn-hover-border-color: var(--c-error-container);
    --bs-btn-active-color: var(--c-on-error-container); --bs-btn-active-bg: var(--c-error-container); --bs-btn-active-border-color: var(--c-error-container);
    --bs-btn-disabled-color: var(--c-error); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--c-border);
}
.btn-outline-success {
    --bs-btn-color: var(--c-secondary); --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border);
    --bs-btn-hover-color: var(--c-on-secondary-container); --bs-btn-hover-bg: var(--c-emerald-soft); --bs-btn-hover-border-color: #a7f3d0;
    --bs-btn-active-color: var(--c-on-secondary-container); --bs-btn-active-bg: #d1fae5; --bs-btn-active-border-color: #a7f3d0;
}
.btn-outline-warning {
    --bs-btn-color: var(--c-warning); --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border);
    --bs-btn-hover-color: var(--c-on-warning-container); --bs-btn-hover-bg: #fffbeb; --bs-btn-hover-border-color: #fde68a;
    --bs-btn-active-color: var(--c-on-warning-container); --bs-btn-active-bg: var(--c-warning-container); --bs-btn-active-border-color: #fde68a;
}
.btn-outline-info {
    --bs-btn-color: #4338ca; --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border);
    --bs-btn-hover-color: #3730a3; --bs-btn-hover-bg: #eef2ff; --bs-btn-hover-border-color: #c7d2fe;
    --bs-btn-active-color: #3730a3; --bs-btn-active-bg: #e0e7ff; --bs-btn-active-border-color: #c7d2fe;
}
.btn-link { --bs-btn-color: var(--c-on-surface); --bs-btn-hover-color: var(--c-surface-tint); --bs-btn-font-weight: 600; text-decoration: none; }
/* Sadece ikon içeren satır işlemi düğmesi */
.btn-icon {
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: var(--c-on-surface-variant);
    transition: background .15s, color .15s; position: relative;
}
.btn-icon:hover { background: var(--c-surface-container); color: var(--c-on-surface); }
.btn-icon .material-symbols-outlined { font-size: 18px; }
.btn-icon--danger:hover { background: #fff1f0; color: var(--c-error); }
.btn-icon--live:hover { background: var(--c-emerald-soft); color: var(--c-secondary); }
.btn-icon.disabled, .btn-icon:disabled { opacity: .4; pointer-events: none; }
.btn .btn-icon { width: auto; height: auto; padding: 0; background: none; border-radius: 0; color: inherit; }
.btn .btn-icon:hover { background: none; color: inherit; }
.btn-icon-count {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--c-primary); color: #fff; font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center;
}
.btn-group > .btn { --bs-btn-border-radius: var(--r-md); }
.btn-close { --bs-btn-close-focus-shadow: var(--ring); opacity: .45; }

/* ------------------------------------------------------------------ 9. Etiketler (pill, tag, rozet) */
.pill {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .1875rem .625rem; border-radius: var(--r-full);
    font-family: var(--f-display); font-size: .6875rem; line-height: .875rem; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap; vertical-align: middle;
    background: var(--c-surface-low); color: var(--c-on-surface-variant);
}
.pill .material-symbols-outlined { font-size: 14px; }
.pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill-success, .pill-live { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.pill-success.pill-dot::before, .pill-live.pill-dot::before { background: var(--c-secondary); }
.pill-soft-success { background: var(--c-emerald-soft); color: #065f46; box-shadow: inset 0 0 0 1px #a7f3d0; }
.pill-warning { background: var(--c-warning-container); color: var(--c-on-warning-container); }
.pill-warning.pill-dot::before { background: #d97706; }
.pill-danger { background: var(--c-error-container); color: var(--c-on-error-container); }
.pill-danger.pill-dot::before { background: var(--c-error); }
.pill-info, .pill-pending { background: var(--c-surface-high); color: var(--c-on-surface); }
.pill-info.pill-dot::before { background: #2f4a7a; }
.pill-ai, .pill-bot { background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); }
.pill-ai.pill-dot::before { background: var(--c-indigo); }
.pill-dark, .pill-primary { background: var(--c-primary); color: #fff; }
.pill-neutral, .pill-secondary, .pill-light { background: var(--c-surface-low); color: var(--c-on-surface-variant); }
.pill-outline { background: #fff; color: var(--c-on-surface); box-shadow: inset 0 0 0 1px var(--c-border); }
.pill-lg { padding: .3125rem .75rem; font-size: .75rem; line-height: 1rem; }
/* Canlı nabız noktası */
.live-dot { position: relative; display: inline-flex; width: 8px; height: 8px; flex-shrink: 0; }
.live-dot::before, .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--c-secondary); }
.live-dot::before { animation: ui-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: .7; }
.live-dot--danger::before, .live-dot--danger::after { background: var(--c-error); }
@keyframes ui-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before, .icon-spin { animation: none; } }

/* Tag: kanal/tür göstergesi (köşeli) */
.tag {
    display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border-radius: var(--r-sm);
    background: var(--c-surface-low); color: var(--c-on-surface);
    font-family: var(--f-display); font-size: .6875rem; line-height: 1rem; font-weight: 500; white-space: nowrap;
}
.tag .material-symbols-outlined { font-size: 14px; color: var(--c-on-surface-variant); }
.tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-outline); flex-shrink: 0; }
.tag-code { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: 0; background: var(--c-surface-low); color: var(--c-on-surface); }
/* Kanal renkleri */
.ch-whatsapp { background: #25d366 !important; }
.ch-instagram { background: linear-gradient(45deg, #f59e0b, #e1306c, #8b5cf6) !important; }
.ch-messenger, .ch-facebook { background: #0084ff !important; }
.ch-telegram { background: #229ed9 !important; }
.ch-phone { background: #0b1c30 !important; }
.ch-website, .ch-web { background: #6366f1 !important; }
.ch-other { background: #94a3b8 !important; }
.ch-emlakjet { background: #16a34a !important; }
.dot-live { background: var(--c-emerald) !important; }
.dot-info { background: #7ea2e0 !important; }
.dot-ai { background: var(--c-indigo) !important; }
.dot-warning { background: #f59e0b !important; }
.dot-danger { background: var(--c-error) !important; }
.dot-dark { background: var(--c-primary) !important; }
.dot-neutral { background: var(--c-outline-variant) !important; }

/* Bootstrap rozetleri de aynı dile uyar */
.badge {
    --bs-badge-font-size: .6875rem; --bs-badge-font-weight: 600; --bs-badge-padding-x: .5625rem; --bs-badge-padding-y: .25rem;
    --bs-badge-border-radius: var(--r-full);
    font-family: var(--f-display); letter-spacing: .02em;
}

/* ------------------------------------------------------------------ 10. Avatar */
.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-high); color: var(--c-on-surface);
    font-family: var(--f-display); font-size: .8125rem; font-weight: 600; letter-spacing: 0;
    text-transform: uppercase;
}
.avatar-xs { width: 24px; height: 24px; font-size: .625rem; }
.avatar-sm { width: 30px; height: 30px; font-size: .6875rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-square { border-radius: var(--r-md); }
.avatar--dark { background: var(--c-primary); color: #fff; }
.avatar--live { background: var(--c-emerald-soft); color: var(--c-secondary); }
.avatar--ai { background: var(--c-tertiary-fixed); color: var(--c-tertiary-container); }
.avatar--warning { background: var(--c-warning-container); color: var(--c-on-warning-container); }
.avatar--danger { background: var(--c-error-container); color: var(--c-on-error-container); }
.avatar-status {
    position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-secondary); box-shadow: 0 0 0 2px #fff;
}
.avatar-badge {
    position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; color: #fff;
}
.avatar-badge .material-symbols-outlined { font-size: 10px; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20; }

/* ------------------------------------------------------------------ 11. Tablolar */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--c-on-surface);
    --bs-table-border-color: var(--c-divider);
    --bs-table-hover-bg: color-mix(in srgb, var(--c-surface-low) 70%, transparent);
    --bs-table-hover-color: var(--c-on-surface);
    --bs-table-striped-bg: color-mix(in srgb, var(--c-surface-low) 45%, transparent);
    --bs-table-active-bg: var(--c-surface-low);
    margin-bottom: 0; font-size: .875rem;
}
.table > :not(caption) > * > * { padding: .875rem 1rem; border-bottom-width: 1px; vertical-align: middle; }
.table > thead > tr > th, .table > thead > tr > td, .table thead th {
    background: var(--c-surface-low) !important;
    color: var(--c-on-surface-variant) !important;
    font-family: var(--f-display); font-size: .6875rem; line-height: 1rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    padding-top: .75rem; padding-bottom: .75rem; border-bottom: 0; border-top: 0;
}
.table > thead { text-transform: none; letter-spacing: normal; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table-hover > tbody > tr { transition: background-color .12s ease; }
.table-light, .table > thead.table-light > tr > th { --bs-table-bg: var(--c-surface-low); }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table .row-muted > * { color: var(--c-muted); }
.table-responsive { border-radius: inherit; }
.table-card { overflow: hidden; }
.table-card .table > thead > tr > th:first-child { border-top-left-radius: 0; }
.cell-title { font-family: var(--f-display); font-weight: 600; font-size: .875rem; letter-spacing: -0.01em; color: var(--c-on-surface); line-height: 1.25rem; }
.cell-sub { font-family: var(--f-display); font-size: .6875rem; line-height: 1rem; color: var(--c-on-surface-variant); letter-spacing: .01em; }
.cell-amount { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.row-actions form { margin: 0; display: inline-flex; }

/* ------------------------------------------------------------------ 12. Formlar */
.form-label, .col-form-label {
    margin-bottom: .375rem;
    font-family: var(--f-display); font-size: .6875rem; line-height: .875rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--c-on-surface-variant);
}
.form-text { font-size: .75rem; color: var(--c-muted); margin-top: .375rem; }
.form-control, .form-select {
    min-height: 40px; padding: .5rem .75rem;
    font-family: var(--f-body); font-size: .875rem; line-height: 1.375rem; color: var(--c-on-surface);
    background-color: var(--c-surface-low); border: 1px solid transparent; border-radius: 10px;
    box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--c-placeholder); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--c-border); }
.form-control:focus, .form-select:focus {
    background-color: #fff; border-color: var(--c-on-surface); box-shadow: 0 0 0 1px var(--c-on-surface); outline: 0; color: var(--c-on-surface);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--c-surface-disabled); color: var(--c-muted); border-color: transparent; cursor: not-allowed; }
.form-control[readonly]:not(:disabled) { cursor: default; }
.form-control-sm, .form-select-sm { min-height: 32px; padding: .25rem .625rem; font-size: .8125rem; border-radius: var(--r-md); }
.form-control-lg, .form-select-lg { min-height: 48px; font-size: 1rem; border-radius: var(--r-lg); }
textarea.form-control { min-height: 84px; }
.form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%2345464d' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3e%3c/svg%3e");
    background-size: 18px 18px; background-position: right .625rem center;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--c-error); background-color: #fff8f7; }
.invalid-feedback { color: var(--c-error); font-size: .75rem; }
.input-group { flex-wrap: nowrap; }
.input-group > .form-control, .input-group > .form-select { min-width: 0; }
.input-group-text {
    background: var(--c-surface-low); border: 1px solid transparent; color: var(--c-on-surface-variant);
    font-family: var(--f-display); font-size: .8125rem; font-weight: 500; border-radius: 10px; padding: 0 .75rem;
}
.input-group-text .material-symbols-outlined { font-size: 18px; }
.input-group:focus-within > .input-group-text { background: #fff; border-color: var(--c-on-surface); }
.input-group > .input-group-text:first-child + .form-control, .input-group > .input-group-text:first-child + .form-select { padding-left: .25rem; }
.input-group:focus-within > .input-group-text:first-child { box-shadow: -1px 0 0 0 var(--c-on-surface), 0 1px 0 0 var(--c-on-surface), 0 -1px 0 0 var(--c-on-surface); }
.input-group > .form-control:focus { z-index: 3; }
.input-group > .input-group-text:first-child + .form-control:focus { box-shadow: 1px 0 0 0 var(--c-on-surface), 0 1px 0 0 var(--c-on-surface), 0 -1px 0 0 var(--c-on-surface); border-left-color: transparent; }
.form-check-input {
    width: 1.05em; height: 1.05em; border-color: var(--c-border-strong); background-color: #fff;
}
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--c-on-surface); }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
.form-check-label { font-size: .875rem; color: var(--c-on-surface); }
.form-switch .form-check-input { width: 2.25em; height: 1.25em; border-color: var(--c-border-strong); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b1c30'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--c-secondary); border-color: var(--c-secondary); }
.form-range::-webkit-slider-thumb { background: var(--c-primary); }
/* Etiketli alan kutusu (Stitch giriş kutusu: ikon + alan) */
.field { display: flex; flex-direction: column; gap: .375rem; }
.field-box {
    display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 .75rem;
    background: var(--c-surface-low); border: 1px solid transparent; border-radius: 10px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.field-box:hover { border-color: var(--c-border); }
.field-box:focus-within { background: #fff; border-color: var(--c-on-surface); box-shadow: 0 0 0 1px var(--c-on-surface); }
.field-box > .material-symbols-outlined { color: var(--c-on-surface-variant); font-size: 18px; }
.field-box > input, .field-box > select, .field-box > textarea {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: .5rem 0; font-size: .875rem; color: var(--c-on-surface);
}
.form-section-title {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem;
    font-family: var(--f-display); font-size: .875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-on-surface);
}
.form-section-title .material-symbols-outlined { font-size: 18px; color: var(--c-on-surface-variant); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; padding-top: .5rem; }

/* Seçim kartları (radio/checkbox kartı) */
.choice {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--r-md);
    background: var(--c-surface-low); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s;
    font-family: var(--f-display); font-size: .8125rem; font-weight: 500;
}
.choice:hover { background: var(--c-surface-container); }
.btn-check:checked + .choice, .choice.is-active { background: var(--c-primary); color: #fff; }
.btn-check:focus-visible + .choice { box-shadow: var(--ring); }
.btn-check:checked + .choice .tag-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------ 13. Segment, sekme, filtre çubuğu */
.segmented {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-md);
    background: var(--c-surface-low); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented > a, .segmented > button, .segmented > label, .segmented .seg-item {
    display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 6px; border: 0;
    background: transparent; color: var(--c-on-surface-variant); white-space: nowrap; cursor: pointer;
    font-family: var(--f-display); font-size: .75rem; font-weight: 500; line-height: 1rem; letter-spacing: .01em;
    transition: background .15s, color .15s, box-shadow .15s;
}
.segmented > a:hover, .segmented > button:hover, .segmented > label:hover, .segmented .seg-item:hover { color: var(--c-on-surface); }
.segmented > .active, .segmented .seg-item.active, .segmented > .btn-check:checked + label {
    background: var(--c-surface-lowest); color: var(--c-on-surface); font-weight: 600; box-shadow: var(--sh-1);
}
.segmented .material-symbols-outlined { font-size: 16px; }
.segmented .seg-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--c-surface-highest); font-size: .625rem; font-weight: 700; line-height: 18px; text-align: center; color: var(--c-on-surface); }
.segmented > .active .seg-count { background: var(--c-primary); color: #fff; }
.segmented-lg > a, .segmented-lg > button, .segmented-lg .seg-item { padding: .5rem .875rem; font-size: .8125rem; }

.filter-bar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .375rem; padding: .375rem; max-width: 100%;
    background: var(--c-surface-lowest); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    border: 1px solid rgba(11, 28, 48, 0.045);
}
.filter-bar .form-control, .filter-bar .form-select { min-height: 34px; font-size: .8125rem; border-radius: var(--r-md); }
.filter-bar .btn { --bs-btn-padding-y: .375rem; }
.filter-bar > .field-box { flex: 1 1 auto; min-height: 34px; min-width: 260px; }
.filter-bar-wrap { flex-wrap: wrap; }
@media (max-width: 767.98px) { .filter-bar { flex-wrap: wrap; } .filter-bar > .field-box { flex: 1 1 160px; min-width: 0; } }
.filter-bar > .form-select, .filter-bar > .form-control { width: auto; flex: 1 1 140px; min-width: 0; }
.filter-bar > .field-box--compact { flex: 0 1 auto; min-width: 0; }
.filter-bar .divider { width: 1px; height: 20px; background: var(--c-border); margin: 0 .25rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .375rem .75rem; border-radius: var(--r-md);
    background: var(--c-surface-low); color: var(--c-on-surface); border: 0;
    font-family: var(--f-display); font-size: .75rem; font-weight: 500; white-space: nowrap; transition: background .15s;
}
.filter-chip:hover { background: var(--c-surface-container); color: var(--c-on-surface); }
.filter-chip.active { background: var(--c-primary); color: #fff; }
.filter-chip .material-symbols-outlined { font-size: 16px; color: inherit; opacity: .8; }

/* Bootstrap sekmeleri → segment görünümü */
.nav-tabs { --bs-nav-tabs-border-width: 0; gap: 2px; padding: 3px; background: var(--c-surface-low); border-radius: var(--r-md); display: inline-flex; flex-wrap: wrap; }
.nav-tabs .nav-link { border: 0; border-radius: 6px; padding: .375rem .75rem; color: var(--c-on-surface-variant); font-family: var(--f-display); font-size: .75rem; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--c-on-surface); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: #fff; color: var(--c-on-surface); font-weight: 600; box-shadow: var(--sh-1); }
.nav-pills { --bs-nav-pills-border-radius: var(--r-md); --bs-nav-pills-link-active-bg: var(--c-primary); --bs-nav-link-color: var(--c-on-surface-variant); --bs-nav-link-hover-color: var(--c-on-surface); }
.nav-pills .nav-link { font-family: var(--f-display); font-size: .8125rem; font-weight: 500; }

/* İlan alt menüsü (property_subnav) */
.sub-nav {
    display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-lg);
    background: var(--c-surface-lowest); box-shadow: var(--sh-1); border: 1px solid rgba(11, 28, 48, 0.045);
    overflow-x: auto; scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.btn-subnav {
    display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .75rem; border-radius: var(--r-md);
    color: var(--c-on-surface-variant); white-space: nowrap;
    font-family: var(--f-display); font-size: .8125rem; font-weight: 500; letter-spacing: -0.005em;
    transition: background .15s, color .15s;
}
.btn-subnav .material-symbols-outlined { font-size: 18px; }
.btn-subnav:hover { background: var(--c-surface-low); color: var(--c-on-surface); }
.btn-subnav.active { background: var(--c-surface-high); color: var(--c-on-surface); font-weight: 600; }
.btn-subnav.active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* ------------------------------------------------------------------ 14. Uyarılar */
.alert {
    --bs-alert-border-radius: var(--r-lg);
    --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .75rem;
    display: flex; align-items: flex-start; gap: .625rem;
    font-size: .8125rem; line-height: 1.25rem; border-width: 1px; box-shadow: none;
}
.alert > .material-symbols-outlined { font-size: 20px; margin-top: -1px; }
.alert-dismissible { padding-right: 2.75rem; }
.alert-dismissible .btn-close { padding: .95rem 1rem; }
.alert .alert-link { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alert ul { margin-bottom: 0; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-success { --bs-alert-color: #065f46; --bs-alert-bg: var(--c-emerald-soft); --bs-alert-border-color: #a7f3d0; --bs-alert-link-color: #065f46; }
.alert-danger { --bs-alert-color: var(--c-on-error-container); --bs-alert-bg: #fff4f3; --bs-alert-border-color: var(--c-error-container); --bs-alert-link-color: var(--c-on-error-container); }
.alert-warning { --bs-alert-color: var(--c-on-warning-container); --bs-alert-bg: #fffbeb; --bs-alert-border-color: #fde68a; --bs-alert-link-color: var(--c-on-warning-container); }
.alert-info { --bs-alert-color: #3730a3; --bs-alert-bg: #eef2ff; --bs-alert-border-color: #c7d2fe; --bs-alert-link-color: #3730a3; }
.alert-primary, .alert-secondary, .alert-light { --bs-alert-color: var(--c-on-surface); --bs-alert-bg: var(--c-surface-low); --bs-alert-border-color: var(--c-surface-high); --bs-alert-link-color: var(--c-on-surface); }
.alert-dark { --bs-alert-color: #fff; --bs-alert-bg: var(--c-primary-container); --bs-alert-border-color: var(--c-primary-container); --bs-alert-link-color: #fff; }

/* Boş durum */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5rem; padding: 2.5rem 1.25rem; color: var(--c-on-surface-variant); }
.empty-state-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--c-surface-low); color: var(--c-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .25rem; }
.empty-state-icon .material-symbols-outlined { font-size: 24px; }
.empty-state-title { font-family: var(--f-display); font-size: .9375rem; font-weight: 600; color: var(--c-on-surface); margin: 0; }
.empty-state-text { font-size: .8125rem; margin: 0; max-width: 420px; }

/* ------------------------------------------------------------------ 15. Liste satırları, zaman çizelgesi, bilgi listesi */
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--c-divider); }
.list-row:last-child { border-bottom: 0; }
a.list-row { color: var(--c-on-surface); transition: background .12s; }
a.list-row:hover { background: color-mix(in srgb, var(--c-surface-low) 70%, transparent); color: var(--c-on-surface); }
.list-row-main { flex: 1 1 auto; min-width: 0; }
.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: .5rem 1rem; margin: 0; }
.kv dt { font-family: var(--f-display); font-size: .75rem; font-weight: 500; color: var(--c-on-surface-variant); }
.kv dd { margin: 0; font-family: var(--f-display); font-size: .875rem; font-weight: 600; color: var(--c-on-surface); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.kv--left dd { text-align: left; }
.stat-tile { background: var(--c-surface-low); border-radius: var(--r-lg); padding: .75rem .875rem; }
.stat-tile-label { font-family: var(--f-display); font-size: .6875rem; font-weight: 500; letter-spacing: .02em; color: var(--c-on-surface-variant); }
.stat-tile-value { font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-on-surface); font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-item { position: relative; padding: 0 0 1rem 1.75rem; }
.timeline-item::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 1px; background: var(--c-border); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--c-outline-variant); }
.timeline-dot--live { box-shadow: inset 0 0 0 4px var(--c-secondary); }
.timeline-dot--danger { box-shadow: inset 0 0 0 4px var(--c-error); }
.timeline-dot--warning { box-shadow: inset 0 0 0 4px #d97706; }
.timeline-dot--ai { box-shadow: inset 0 0 0 4px var(--c-indigo); }
.timeline-dot--dark { box-shadow: inset 0 0 0 4px var(--c-primary); }
.timeline-dot--info { box-shadow: inset 0 0 0 4px #7ea2e0; }
.quote-box { background: var(--c-surface-low); border-radius: var(--r-lg); padding: .75rem .875rem; font-size: .8125rem; color: var(--c-on-surface); }
.quote-box--ai { background: #fff; border: 1px solid var(--c-border); border-left: 2px solid var(--c-indigo); }

/* İlerleme */
.progress, .progress-stacked {
    --bs-progress-height: 6px; --bs-progress-bg: var(--c-surface-highest); --bs-progress-border-radius: 99px;
    --bs-progress-bar-bg: var(--c-on-surface); --bs-progress-bar-transition: width .4s ease;
}
.progress-bar.bg-success { background-color: var(--c-secondary) !important; }
.progress-live .progress-bar { background: var(--c-secondary); }
.progress-ai .progress-bar { background: linear-gradient(90deg, var(--c-indigo), var(--c-violet)); }

/* Adımlı form (ilan ekleme) */
.form-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.form-steps .step-text { display: flex; flex-direction: column; min-width: 0; }
.form-steps .step-sub { font-size: .6875rem; font-weight: 500; color: var(--c-muted); }
.form-steps .step {
    flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: .625rem;
    padding: .625rem .875rem; background: var(--c-surface-lowest); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); border: 1px solid rgba(11, 28, 48, 0.045);
    color: var(--c-on-surface-variant); font-family: var(--f-display); font-weight: 500; font-size: .8125rem;
}
.form-steps .step .num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-low); color: var(--c-on-surface-variant); font-size: .75rem; font-weight: 700;
}
.form-steps .step.active { color: var(--c-on-surface); font-weight: 600; box-shadow: var(--sh-1), 0 0 0 1px var(--c-on-surface); }
.form-steps .step.active .num { background: var(--c-primary); color: #fff; }
.form-steps .step.done .num { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.form-step[hidden] { display: none !important; }

/* ------------------------------------------------------------------ 16. Açılır katmanlar: menü, arama sonuçları, modal, ipucu */
.dropdown-menu {
    --bs-dropdown-border-color: var(--c-border-strong);
    --bs-dropdown-border-radius: var(--r-lg);
    --bs-dropdown-box-shadow: var(--sh-2);
    --bs-dropdown-link-color: var(--c-on-surface);
    --bs-dropdown-link-hover-bg: var(--c-surface-low);
    --bs-dropdown-link-hover-color: var(--c-on-surface);
    --bs-dropdown-link-active-bg: var(--c-surface-high);
    --bs-dropdown-link-active-color: var(--c-on-surface);
    --bs-dropdown-item-padding-x: .625rem; --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-padding-x: .375rem; --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-font-size: .8125rem;
    --bs-dropdown-header-color: var(--c-on-surface-variant);
    --bs-dropdown-divider-bg: var(--c-divider);
    box-shadow: var(--sh-2);
}
.dropdown-item { display: flex; align-items: center; gap: .625rem; border-radius: var(--r-md); font-weight: 500; }
.dropdown-item .material-symbols-outlined { font-size: 18px; color: var(--c-on-surface-variant); }
.dropdown-item.text-danger .material-symbols-outlined { color: var(--c-error); }
.dropdown-header { font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.lookup-results, .js-lookup-results {
    max-height: 280px; overflow-y: auto; z-index: 1060; margin-top: 4px;
    background: #fff; border: 1px solid var(--c-border-strong) !important; border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-2) !important; padding: .25rem;
}
.lookup-results .list-group-item {
    padding: .5rem .625rem; font-size: .8125rem; border: 0; border-radius: var(--r-md) !important; color: var(--c-on-surface); margin: 0;
}
.lookup-results .list-group-item-action:hover, .lookup-results .list-group-item-action:focus { background: var(--c-surface-low); color: var(--c-on-surface); }
.lookup .js-lookup-clear { border: 1px solid transparent !important; background: var(--c-surface-low); color: var(--c-on-surface-variant); }
.lookup:focus-within .js-lookup-clear { background: #fff; border-color: var(--c-on-surface) !important; border-left-color: transparent !important; box-shadow: 0 1px 0 0 var(--c-on-surface), 0 -1px 0 0 var(--c-on-surface), 1px 0 0 0 var(--c-on-surface); }

.modal {
    --bs-modal-border-radius: var(--r-xl); --bs-modal-border-color: transparent; --bs-modal-box-shadow: var(--sh-3);
    --bs-modal-header-border-color: var(--c-divider); --bs-modal-footer-border-color: var(--c-divider);
    --bs-modal-padding: 1.25rem; --bs-modal-header-padding: 1rem 1.25rem;
}
.modal-content { box-shadow: var(--sh-3); }
.modal-title { font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.modal-backdrop { --bs-backdrop-bg: #0f172a; --bs-backdrop-opacity: .4; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tooltip { --bs-tooltip-bg: var(--c-primary-container); --bs-tooltip-border-radius: var(--r-md); --bs-tooltip-font-size: .75rem; --bs-tooltip-padding-x: .625rem; --bs-tooltip-padding-y: .375rem; }
.popover { --bs-popover-border-color: var(--c-border-strong); --bs-popover-border-radius: var(--r-lg); --bs-popover-box-shadow: var(--sh-2); }
.list-group { --bs-list-group-border-color: var(--c-divider); --bs-list-group-action-hover-bg: var(--c-surface-low); --bs-list-group-active-bg: var(--c-primary); --bs-list-group-active-border-color: var(--c-primary); }
.accordion { --bs-accordion-border-color: var(--c-divider); --bs-accordion-active-bg: var(--c-surface-low); --bs-accordion-active-color: var(--c-on-surface); --bs-accordion-btn-focus-box-shadow: var(--ring); --bs-accordion-border-radius: var(--r-lg); }

/* Sayfalama */
.pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1.25rem; border-top: 1px solid var(--c-divider);
    background: color-mix(in srgb, var(--c-surface-low) 35%, transparent);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.pager-info { font-family: var(--f-display); font-size: .75rem; font-weight: 500; color: var(--c-on-surface-variant); }
.pager-links { display: flex; align-items: center; gap: 4px; }
.pager-links > a, .pager-links > span {
    min-width: 32px; height: 30px; padding: 0 .625rem; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    font-family: var(--f-display); font-size: .75rem; font-weight: 500; color: var(--c-on-surface);
}
.pager-links a:hover { background: var(--c-surface-lowest); box-shadow: var(--sh-1); color: var(--c-on-surface); }
.pager-links .is-current { background: var(--c-primary); color: #fff; font-weight: 600; }
.pager-links .is-nav { background: var(--c-surface-lowest); box-shadow: var(--sh-1); }
.pager-links .is-disabled { opacity: .45; pointer-events: none; }
.pager-links .is-gap { min-width: 16px; padding: 0; color: var(--c-muted); }
.pagination { --bs-pagination-color: var(--c-on-surface); --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--c-border); --bs-pagination-hover-color: var(--c-on-surface); --bs-pagination-hover-bg: var(--c-surface-low); --bs-pagination-active-bg: var(--c-primary); --bs-pagination-active-border-color: var(--c-primary); --bs-pagination-focus-box-shadow: var(--ring); --bs-pagination-border-radius: var(--r-md); --bs-pagination-font-size: .8125rem; }

/* ------------------------------------------------------------------ 17. Bootstrap yardımcılarının yeni dile uyarlanması */
.bg-white { background-color: #fff !important; }
.bg-light { background-color: var(--c-surface-low) !important; }
.bg-body-tertiary, .bg-body-secondary { background-color: var(--c-surface-low) !important; }
.bg-primary { background-color: var(--c-primary) !important; }
.bg-dark { background-color: var(--c-primary-container) !important; }
.bg-success { background-color: var(--c-secondary) !important; }
.bg-danger { background-color: var(--c-error) !important; }
.bg-warning { background-color: #f59e0b !important; }
.bg-info { background-color: var(--c-indigo) !important; }
.bg-secondary { background-color: var(--c-on-surface-variant) !important; }
.bg-surface { background-color: var(--c-surface) !important; }
.bg-surface-low { background-color: var(--c-surface-low) !important; }
.bg-surface-high { background-color: var(--c-surface-high) !important; }
.bg-live-soft { background-color: var(--c-emerald-soft) !important; }
.bg-ai-soft { background-color: var(--c-tertiary-fixed) !important; }
.border { border-color: var(--c-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--c-divider) !important; }
.rounded { border-radius: var(--r-md) !important; }
.rounded-3 { border-radius: var(--r-lg) !important; }
.rounded-4 { border-radius: var(--r-xl) !important; }
.shadow-sm { box-shadow: var(--sh-1) !important; }
.shadow { box-shadow: var(--sh-2) !important; }
.shadow-lg { box-shadow: var(--sh-3) !important; }
.link-plain { color: inherit; }
.link-plain:hover { color: var(--c-surface-tint); }
.link-underline { text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
.link-underline:hover { text-decoration-color: currentColor; }
.gap-2xs { gap: 2px !important; }
.stack > * + * { margin-top: 1.5rem; }
.stack > * + .row { margin-top: calc(1.5rem - var(--bs-gutter-y, 0px)); }
.stack > .alert { margin-bottom: 0; }
.stack-sm > * + * { margin-top: .75rem; }
.divider-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-outline-variant); display: inline-block; flex-shrink: 0; }
.min-w-0 { min-width: 0 !important; }

/* ------------------------------------------------------------------ 18. Giriş ekranı */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--c-surface); }
.auth-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding: 2.5rem 3rem; color: #fff;
    background:
        radial-gradient(900px 480px at 110% 110%, rgba(108, 248, 187, 0.22), transparent 60%),
        radial-gradient(700px 420px at -10% -10%, rgba(112, 115, 255, 0.35), transparent 60%),
        linear-gradient(160deg, #0b1220 0%, var(--c-primary-container) 55%, #1f2a44 100%);
}
.auth-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .sb-logo-mark { background: #fff; color: var(--c-primary); }
.auth-hero-title { color: #fff; font-family: var(--f-display); font-size: 2.5rem; line-height: 3rem; font-weight: 600; letter-spacing: -0.03em; margin: 0; max-width: 520px; }
.auth-hero-text { color: rgba(234, 241, 255, 0.72); font-size: 1rem; line-height: 1.625rem; max-width: 480px; margin: 1rem 0 0; }
.auth-feature { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); font-size: .875rem; color: rgba(234, 241, 255, 0.9); }
.auth-feature .material-symbols-outlined { color: var(--c-secondary-container); }
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
}

/* ------------------------------------------------------------------ 19. Yazdırma */
@media print {
    .app-sidebar, .app-topbar, .app-footer, .page-actions, .no-print { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .app-content { padding: 0 !important; max-width: none; }
    body { background: #fff; }
    .panel, .card, .metric { box-shadow: none !important; border-color: #ddd !important; }
}

/* Etiketli alan kutusu: seçim, çok satırlı ve kilitli durumlar */
.field-box > select { appearance: none; -webkit-appearance: none; padding-right: 1.5rem; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%2345464d' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3e%3c/svg%3e") no-repeat right center / 18px 18px; }
.field-box--area { align-items: flex-start; }
.field-box--area > .material-symbols-outlined { margin-top: .6rem; }
.field-box > textarea { resize: vertical; min-height: 72px; line-height: 1.375rem; }
.field-box:has(input:disabled, select:disabled, textarea:disabled) { background: var(--c-surface-disabled); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.field-box:has(input:disabled, select:disabled, textarea:disabled) > * { color: var(--c-muted); cursor: not-allowed; }
.field-box > input::placeholder, .field-box > textarea::placeholder { color: var(--c-placeholder); }
.field-box > .btn-icon { margin-right: -.375rem; }
.req { color: var(--c-error); margin-left: 2px; }
.opt { color: var(--c-muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }

/* ------------------------------------------------------------------ 20. Sayfalardan ortaklaştırılan küçük bileşenler */
.field-suffix { font-family: var(--f-display); font-size: .8125rem; font-weight: 600; color: var(--c-on-surface-variant); white-space: nowrap; }
.lookup .input-group > .js-lookup-input:has(+ .js-lookup-clear.d-none) { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.field-box--computed { background: transparent; border: 1px dashed var(--c-border-strong); }
.field-box--computed:focus-within { box-shadow: none; border-color: var(--c-border-strong); background: transparent; }
@media (min-width: 1200px) { .sticky-xl { position: sticky; top: calc(var(--topbar-h) + 1rem); } }
.list-row.is-unread { background: color-mix(in srgb, var(--c-surface-low) 70%, transparent); box-shadow: inset 3px 0 0 var(--c-primary); }
.chart-box { position: relative; height: 210px; }
.chart-box--lg { height: 290px; }
.save-bar {
    position: sticky; bottom: 1rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1rem; background: var(--c-surface-lowest); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.setting-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem;
    background: var(--c-surface-low); border-radius: var(--r-lg); transition: background .15s;
}
.setting-row:hover { background: var(--c-surface-container); }
.setting-row:has(.form-check-input:checked) { background: var(--c-emerald-soft); }
.setting-row .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.setting-row-title { font-family: var(--f-display); font-size: .875rem; font-weight: 600; color: var(--c-on-surface); }
.setting-row-sub { font-size: .75rem; color: var(--c-on-surface-variant); }

/* ------------------------------------------------------------------ 21. Kullanım kolaylığı bileşenleri (rol bazlı sadeleştirme) */
/* Kısa ipucu: alanın ya da bölümün hemen altında tek satır yönlendirme */
.hint { display: flex; align-items: flex-start; gap: .375rem; margin: .375rem 0 0; font-size: .75rem; line-height: 1.125rem; color: var(--c-on-surface-variant); }
.hint > .material-symbols-outlined { font-size: 15px; margin-top: 1px; color: var(--c-muted); }
.hint--live > .material-symbols-outlined { color: var(--c-secondary); }
.hint--warning { color: var(--c-on-warning-container); }
.hint--warning > .material-symbols-outlined { color: #d97706; }
.hint strong { color: var(--c-on-surface); font-weight: 600; }

/* Sihirbaz: tıklanabilir adımlar ve alt gezinme çubuğu */
form[data-wizard] .form-steps .step { transition: box-shadow .15s ease, color .15s ease; }
form[data-wizard] .form-steps .step.done { color: var(--c-on-surface); }
.form-step { animation: step-in .18s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-step { animation: none; } }
.wizard-nav {
    position: sticky; bottom: 1rem; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: 1.25rem; padding: .625rem .75rem .625rem 1rem;
    background: var(--c-surface-lowest); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.wizard-nav [data-wizard-progress] { font-family: var(--f-display); font-size: .75rem; font-weight: 500; color: var(--c-on-surface-variant); text-align: center; flex: 1 1 auto; }
.wizard-nav .wizard-nav-end { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) { .wizard-nav [data-wizard-progress] { display: none; } .wizard-nav { bottom: .5rem; } }

/* Kontrol listesi (yayına hazırlık, ilk adımlar) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checklist > li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r-lg); background: var(--c-surface-low); }
.checklist-icon {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-outline-variant); color: transparent;
}
.checklist-icon .material-symbols-outlined { font-size: 16px; }
.checklist > li.is-done .checklist-icon { background: var(--c-secondary); box-shadow: none; color: #fff; }
.checklist > li.is-missing .checklist-icon { box-shadow: inset 0 0 0 1.5px var(--c-error); color: var(--c-error); }
.checklist-main { flex: 1 1 auto; min-width: 0; }
.checklist-title { font-family: var(--f-display); font-size: .8125rem; font-weight: 600; color: var(--c-on-surface); }
.checklist > li.is-done .checklist-title { color: var(--c-on-surface-variant); }
.checklist-sub { font-size: .75rem; color: var(--c-on-surface-variant); }

/* "Daha fazla seçenek" açma düğmesi (ikincil alanlar ancak gerekince görünür) */
.more-toggle {
    display: inline-flex; align-items: center; gap: .25rem; padding: .25rem 0; border: 0; background: none;
    font-family: var(--f-display); font-size: .8125rem; font-weight: 600; color: var(--c-on-surface);
}
.more-toggle .material-symbols-outlined { font-size: 18px; transition: transform .2s ease; }
.more-toggle[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.more-toggle:hover { color: var(--c-surface-tint); }

/* Karşılama / ilk adımlar kartı */
.welcome-card { background: linear-gradient(135deg, #ffffff 0%, var(--c-surface-low) 60%, rgba(108, 248, 187, 0.18) 100%); }
.welcome-card .t-headline-sm { margin-bottom: .25rem; }

/* Görev satırı (Sizi Bekleyenler): simge + başlık + alt satır + tek eylem */
.task-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--c-divider); }
.task-row:last-child { border-bottom: 0; }
.task-row-main { flex: 1 1 auto; min-width: 0; }
.task-group-title { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem .375rem; font-family: var(--f-display); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-surface-variant); }

/* ------------------------------------------------------------------ 22. Sayfalardan ortaklaştırılanlar (rol bazlı sadeleştirme turu) */
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-row .choice { min-width: 96px; justify-content: center; }
.choice-row.is-invalid .choice, .btn-check.is-invalid + .choice { box-shadow: inset 0 0 0 1px var(--c-error); }
.field-box:has(> .is-invalid) { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.metric--warning .metric-value { color: var(--c-warning); }
.money-suffix { flex: 0 0 auto; font-family: var(--f-display); font-weight: 600; font-size: .8125rem; color: var(--c-on-surface-variant); }
/* Bildirimden açılan (focus_id) satır vurgusu */
.table > tbody > tr.row-focus > * { --bs-table-bg: var(--c-surface-low); }
.table > tbody > tr.row-focus > :first-child { background-image: linear-gradient(var(--c-primary), var(--c-primary)); background-size: 3px 100%; background-repeat: no-repeat; }
/* Uzun (6 adımlı) sihirbaz adım çubuğu: dar ekranda yalnızca etkin adımın adı görünür */
.form-steps .step.is-upcoming { opacity: .6; cursor: default; }
a.step { text-decoration: none; }
a.step:hover { color: var(--c-on-surface); }
.form-steps--compact .step { min-width: 120px; }
@media (max-width: 1399.98px) { .form-steps--compact .step-sub { display: none; } }
@media (max-width: 1199.98px) {
    .form-steps--compact { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .form-steps--compact .step { min-width: 0; flex: 0 0 auto; }
    .form-steps--compact .step.active { flex: 1 1 auto; }
    .form-steps--compact .step:not(.active) .step-text { display: none; }
}
@media (max-width: 575.98px) {
    .form-steps--compact { gap: .25rem; }
    .form-steps--compact .step { padding: .375rem; gap: .375rem; }
    .form-steps--compact .step.active { flex: 1 1 0; padding-right: .625rem; }
    .form-steps--compact .step-text { overflow-wrap: anywhere; }
}