/* app.css — derlenmiş SCSS çıktısı
   SCSS kaynak: wwwroot/scss/app.scss
   Üretmek için: npm install && npm run build:css */

/* ─── CSS Tokens ──────────────────────────────── */
:root {
    --text-primary:        #111827;
    --text-secondary:      #6B7280;
    --text-tertiary:       #9CA3AF;
    --bg-page:             #F0F2F5;
    --bg-surface:          #FFFFFF;
    --bg-elevated:         #FFFFFF;
    --bg-hover:            #F4F6F9;
    --accent:              #1D4ED8;
    --accent-bg:           #EFF6FF;
    --text-on-accent:      #FFFFFF;
    --border-color:        #E5E7EB;
    --border-info:         #1D4ED8;
    --text-info:           #1D4ED8;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sidebar-w:           220px;
    --sidebar-w-collapsed: 64px;
    --sidebar-bg:          #0F1B2D;
    --topbar-h:            46px;
    --page-header-h:       80px;
    --row-height:          40px;
}

[data-bs-theme="dark"] {
    --text-primary:   #E6EDF3;
    --text-secondary: #8B949E;
    --text-tertiary:  #484F58;
    --bg-page:        #0D1117;
    --bg-surface:     #161B22;
    --bg-elevated:    #1C2128;
    --bg-hover:       #1C2128;
    --accent:         #58A6FF;
    --accent-bg:      #1A3A5C;
    --text-on-accent: #FFFFFF;
    --border-color:   #30363D;
    --border-info:    #58A6FF;
    --text-info:      #58A6FF;
}

/* ─── Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    background: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Font ağırlığı: sadece 400 ve 500 — 600/700/bold YASAK */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
a { color: var(--accent); }

/* ─── Shell Layout ────────────────────────────── */
.shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ─── Sidebar ─────────────────────────────────── */
/* Her zaman koyu (#0F1B2D) — data-bs-theme değişse bile */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: #C9D1D9;
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: width 0.2s ease, min-width 0.2s ease;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sidebar.collapsed {
    width: var(--sidebar-w-collapsed);
    min-width: var(--sidebar-w-collapsed);
}

.sidebar.collapsed .sidebar-section-label {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
}

.sidebar.collapsed .sidebar-link-text,
.sidebar.collapsed .sidebar-brand-name {
    display: none;
}

.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    height: var(--topbar-h);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-brand-name {
    font-size: 15px;
    font-weight: 500;
    color: #E6EDF3;
    white-space: nowrap;
}


.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-2) 0;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.sidebar-section-label {
    font-size: 11px;
    font-weight: 500;
    color: #484F58;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--sp-3) var(--sp-4) var(--sp-1);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    height: var(--row-height);
    color: #8B949E;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.06);
    color: #E6EDF3;
    text-decoration: none;
}

.sidebar-link.active {
    background: rgba(88,166,255,0.1);
    color: #58A6FF;
    font-weight: 500;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #58A6FF;
    border-radius: 0 2px 2px 0;
}

.sidebar-link-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E1B35B; /* Rota — açık altın (deneme) */
}

.sidebar-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu ogesi sayaci — kapanis bekleyen is sayisini gosterir (orn. Odeme Mutabakati).
   Sidebar daraltildiginda metin gizlenir ama sayac GORUNUR kalir: daralttigi icin
   bekleyen isten habersiz kalinmamalidir. */
.sidebar-link-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #B45309;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.sidebar.collapsed .sidebar-link-badge {
    margin-left: 0;
    position: absolute;
    top: 4px;
    right: 4px;
}

.sidebar-chevron {
    margin-left: auto;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
    color: #484F58;
    flex-shrink: 0;
}
.sidebar-chevron.open {
    transform: rotate(180deg);
}
.sidebar.collapsed .sidebar-chevron {
    display: none;
}

.sidebar-submenu {
    display: flex;
    flex-direction: column;
}
.sidebar.collapsed .sidebar-submenu {
    display: none;
}

.sidebar-sublink {
    display: block;
    padding: 0 var(--sp-4) 0 calc(var(--sp-4) + 28px);
    height: 32px;
    line-height: 32px;
    color: #8B949E;
    text-decoration: none;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.sidebar-sublink:hover {
    background: rgba(255,255,255,0.06);
    color: #E6EDF3;
    text-decoration: none;
}
.sidebar-sublink.active {
    color: #58A6FF;
    font-weight: 500;
}
.sidebar-sublink.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #58A6FF;
    border-radius: 0 2px 2px 0;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid rgba(255,255,255,0.06);
    color: #484F58;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    transition: color 0.15s;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover { color: #8B949E; }

/* ─── Main Area ───────────────────────────────── */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ─── Topbar (46px sabit) ─────────────────────── */
.topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    flex-shrink: 0;
    /* İçerik alanındaki widget'ların (özellikle SfDashboardLayout panellerinin)
       oluşturduğu stacking context'lerin üstünde kalması için topbar'ı kendi
       stacking context'ine al. Modal/dialog (1210) altında kalır. */
    position: relative;
    z-index: 1030;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* ─── Kullanıcı Dropdown Menüsü ─────────────────── */
.topbar-user-menu {
    position: relative;
    margin-left: var(--sp-2);
}

.topbar-user-trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: 8px;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.topbar-user-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.topbar-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.topbar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.topbar-user-meta {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.2;
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: var(--sp-1) 0;
    z-index: 100;
}

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.topbar-dropdown-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ─── Impersonate Banner ──────────────────────── */
.impersonate-banner {
    background: #D97706;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-size: 13px;
    font-weight: 500;
    padding: var(--sp-2) var(--sp-4);
    flex-shrink: 0;
}

.impersonate-banner a { color: #FFFFFF; text-decoration: underline; }

/* ─── Sayfa Başlığı Bandı ───────── */
.page-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-4);
    flex-shrink: 0;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Liste sayfaları: geri butonu yanındaki title wrapper'ı column yap */
.page-header-left > .btn-back + div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Dashboard sayfaları: title/subtitle doğrudan span olarak varsa column yap */
.page-header-left:has(> .page-header-title) {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.page-header-help {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.4;
    margin-top: 2px;
}

.page-header-title {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

.page-header-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.2;
}

.page-header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ─── İçerik Alanı ────────────────────────────── */
.content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-page);
}

/* ─── Tam Yükseklik Sayfa Layout (grid sayfaları için) ── */
.page-fill {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
}

/* Trial banner aktifken (FirmaLayout'ta 34px) page-fill yüksekliğini düş —
   yoksa grid sayfa altına taşar. */
.shell:has(.trial-banner) .page-fill {
    height: calc(100vh - var(--topbar-h) - 34px);
}

.page-fill-content {
    flex: 1;
    padding: var(--sp-4);
    overflow: hidden;
}

/* ─── Panel Kartı ─────────────────────────────── */
.panel-card {
    background: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.panel-card-header {
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    gap: var(--sp-2);
}

.panel-card-body { padding: var(--sp-4); }

/* ─── İstatistik Kartı ────────────────────────── */
.stat-card {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: var(--sp-4);
    border: 1px solid var(--border-color);
    height: 100%;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}

.stat-card-value {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card-value.green  { color: #16A34A; }
.stat-card-value.blue   { color: var(--accent); }
.stat-card-value.orange { color: #D97706; }
.stat-card-value.red    { color: #DC2626; }

.stat-card-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}

/* ─── Panel Card Footer ──────────────────────── */
.panel-card-footer {
    display: flex;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-page);
}

.panel-card-footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}

.panel-card-footer-link:hover {
    text-decoration: underline;
}

.panel-card-footer-link svg {
    width: 14px;
    height: 14px;
}

/* ─── Dashboard Liste Öğeleri ────────────────── */
.dashboard-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.dashboard-list-item:hover {
    background: var(--bg-hover);
}

.dashboard-list-item:last-child {
    border-bottom: none;
}

.dashboard-list-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-list-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.dashboard-list-amount {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ─── Liste Filtre Barı ──────────────────────── */
.list-filter-bar {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.filter-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Paket Kartları ─────────────────────────── */
.pkg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

.pkg-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: border-color .15s;
}
.pkg-card:hover { border-color: var(--accent); }

.pkg-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
}

.pkg-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pkg-title-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pkg-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
}
.pkg-status--active  { color: #16A34A; }
.pkg-status--inactive { color: #DC2626; }
[data-bs-theme="dark"] .pkg-status--active  { color: #4ADE80; }
[data-bs-theme="dark"] .pkg-status--inactive { color: #F87171; }

/* Toggle switch */
.pkg-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: var(--bg-hover);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
    padding: 0;
}
.pkg-toggle--on { background: var(--accent); }

.pkg-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}
.pkg-toggle--on .pkg-toggle-knob { transform: translateX(20px); }

.pkg-card-body {
    padding: 0 var(--sp-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-elevated);
}

.pkg-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
.pkg-info-row + .pkg-info-row {
    border-top: 1px solid var(--border-color);
}

.pkg-info-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.pkg-info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.pkg-card-footer {
    padding: var(--sp-3) var(--sp-4);
}

.pkg-module-section {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-color);
    margin-top: var(--sp-2);
}

.pkg-module-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.pkg-module-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pkg-module-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.pkg-module-list-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkg-module-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.pkg-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.pkg-detail-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* ─── Skeleton Loading ────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-hover) 25%,
        var(--bg-elevated) 50%,
        var(--bg-hover) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text  { height: 13px; margin-bottom: var(--sp-2); width: 100%; }
.skeleton-value { height: 24px; width: 80px; }

/* ─── Badge / Pill ────────────────────────────── */
.badge-trial,
.badge-aktif,
.badge-yetkisiz,
.badge-askiya {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-trial    { background: #DBEAFE; color: #1D4ED8; }
.badge-aktif    { background: #DCFCE7; color: #16A34A; }
.badge-yetkisiz { background: #FEF3C7; color: #D97706; }
.badge-askiya   { background: #FEE2E2; color: #DC2626; }

[data-bs-theme="dark"] .badge-trial    { background: #1A3A5C; color: #58A6FF; }
[data-bs-theme="dark"] .badge-aktif    { background: #14532D; color: #4ADE80; }
[data-bs-theme="dark"] .badge-yetkisiz { background: #451A03; color: #FB923C; }
[data-bs-theme="dark"] .badge-askiya   { background: #450A0A; color: #F87171; }

/* ─── Giris Sayfası (Acik Tema — Landing Uyumlu) ─────── */
.giris-page { display:flex; min-height:100vh; background:#F8FAFC; font-family:'Plus Jakarta Sans',-apple-system,sans-serif; }

.giris-hero {
    flex: 0 0 55%;
    position: relative;
    background: #EEF2FF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.giris-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(79,70,229,0.12) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(14,165,233,0.08) 0%, transparent 50%),
        linear-gradient(160deg, #EEF2FF 0%, #E0E7FF 50%, #EEF2FF 100%);
    pointer-events: none;
}
.giris-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(79,70,229,0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, black 20%, transparent 70%);
}
@media (max-width: 959px) { .giris-hero { display: none; } }

.giris-hero-glow {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    filter: blur(120px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.giris-hero-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 36px;
    animation: giris-fadeDown 0.8s ease-out both;
}
.giris-hero-brand-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #4F46E5, #6366F1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.giris-hero-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.giris-hero-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 36px 48px;
}
.giris-hero-label {
    font-size: 11px;
    font-weight: 700;
    color: #4F46E5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
    animation: giris-fadeUp 0.7s 0.2s ease-out both;
}
.giris-hero-headline {
    font-size: 44px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    animation: giris-fadeUp 0.7s 0.35s ease-out both;
}
.giris-hero-headline .text-gradient {
    background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.giris-hero-sub {
    font-size: 15px;
    font-weight: 400;
    color: #334155;
    margin-bottom: 36px;
    line-height: 1.7;
    max-width: 420px;
    animation: giris-fadeUp 0.7s 0.5s ease-out both;
}
.giris-hero-badges { display:flex; gap:10px; flex-wrap:wrap; animation: giris-fadeUp 0.7s 0.65s ease-out both; }
.giris-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.giris-hero-badge svg { color: #4F46E5; }

/* Dekoratif yuzen sekiller */
.giris-hero-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.giris-hero-deco-1 {
    top: 14%; right: 10%;
    width: 100px; height: 100px;
    border: 2px solid rgba(79,70,229,0.1);
    border-radius: 50%;
    animation: giris-float 8s ease-in-out infinite;
}
.giris-hero-deco-2 {
    top: 38%; right: 22%;
    width: 56px; height: 56px;
    background: rgba(14,165,233,0.07);
    border-radius: 14px;
    transform: rotate(35deg);
    animation: giris-float 10s 2s ease-in-out infinite;
}
.giris-hero-deco-3 {
    bottom: 32%; right: 8%;
    width: 160px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(79,70,229,0.12), transparent);
    transform: rotate(-20deg);
    animation: giris-float 12s 1s ease-in-out infinite;
}
.giris-hero-deco-4 {
    top: 22%; left: 12%;
    width: 40px; height: 40px;
    border: 2px solid rgba(14,165,233,0.1);
    border-radius: 8px;
    transform: rotate(20deg);
    animation: giris-float 9s 3s ease-in-out infinite;
}

.giris-panel { flex:1; background:#FFFFFF; display:flex; flex-direction:column; min-width:0; border-left:1px solid #E2E8F0; }
.giris-panel-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px;
}
.giris-form-wrap { width:100%; max-width:380px; animation: giris-fadeUp 0.6s 0.15s ease-out both; }
.giris-welcome { font-size:28px; font-weight:700; color:#0F172A; letter-spacing:-0.02em; margin-bottom:6px; }
.giris-welcome-sub { font-size:14px; font-weight:400; color:#94A3B8; margin-bottom:36px; }
.giris-label { font-size:13px; font-weight:600; color:#334155; margin-bottom:6px; display:block; }
.giris-label-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.giris-forgot { font-size:12px; color:#4F46E5; text-decoration:none; font-weight:600; transition:color 0.2s; }
.giris-forgot:hover { color:#4338CA; }

.giris-input-wrap { position:relative; margin-bottom:20px; }
.giris-input-wrap .form-control {
    height: 44px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 400;
    background: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    color: #0F172A;
    padding-right: 42px;
}
.giris-input-wrap .form-control:focus {
    background: #FFFFFF;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12), 0 1px 2px rgba(15,23,42,0.05);
    color: #0F172A;
}
.giris-input-wrap .form-control::placeholder { font-size:13px; color:#94A3B8; font-weight:400; }
.giris-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.giris-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.2s;
}
.giris-pw-toggle:hover { color: #334155; }

.giris-submit-btn {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    box-shadow: 0 10px 20px -5px rgba(79,70,229,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.giris-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.giris-submit-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 15px 25px -5px rgba(79,70,229,0.5); }
.giris-submit-btn:hover:not(:disabled)::before { transform:translateX(100%); }
.giris-submit-btn:active:not(:disabled) { transform:translateY(0); box-shadow:0 10px 20px -5px rgba(79,70,229,0.4); }
.giris-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.giris-register-row { text-align:center; margin-top:28px; font-size:13px; color:#94A3B8; font-weight:400; }
.giris-register-row a { color:#4F46E5; text-decoration:none; font-weight:600; transition:color 0.2s; }
.giris-register-row a:hover { color:#4338CA; }

.giris-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 12px 16px;
    color: #B91C1C;
    font-size: 13px;
    margin-bottom: 20px;
}

.giris-footer {
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #E2E8F0;
}
.giris-footer-copy { font-size:12px; color:#94A3B8; font-weight:400; }
.giris-footer-links { display:flex; gap:20px; }
.giris-footer-links a { font-size:12px; color:#94A3B8; text-decoration:none; font-weight:500; transition:color 0.2s; }
.giris-footer-links a:hover { color:#4F46E5; }

@keyframes giris-fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes giris-fadeDown {
    from { opacity:0; transform:translateY(-12px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes giris-float {
    0%, 100% { transform:translateY(0) rotate(0deg); }
    50%      { transform:translateY(-12px) rotate(2deg); }
}
@media (max-width: 959px) {
    .giris-page { flex-direction:column; }
    .giris-panel { min-height:100vh; }
    .giris-panel-inner { padding:48px 24px; }
}
@media (max-width: 480px) {
    .giris-form-wrap { max-width:100%; }
    .giris-welcome { font-size:24px; }
}

/* ─── Login Sayfası ───────────────────────────── */
.login-page {
    min-height: 100vh;
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--sp-8);
    width: 100%;
    max-width: 400px;
}

.login-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--sp-6);
}

.login-form .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.login-form .form-control {
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-page);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.login-form .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    background: var(--bg-surface);
}

.login-form .form-control::placeholder {
    font-size: 11px;
    color: var(--text-tertiary);
}

.login-error {
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: var(--sp-3) var(--sp-4);
    color: #DC2626;
    font-size: 13px;
    margin-bottom: var(--sp-4);
}

[data-bs-theme="dark"] .login-error {
    background: #450A0A;
    border-color: #7F1D1D;
    color: #FCA5A5;
}

/* ─── Tenant Seçim Kartları ───────────────────── */
.tenant-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--sp-4);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    display: block;
    color: var(--text-primary);
    width: 100%;
    text-align: left;
}

.tenant-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    text-decoration: none;
    color: var(--text-primary);
}

.tenant-card.admin-card {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.tenant-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.tenant-card-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ─── Sağlık Göstergesi ───────────────────────── */
.health-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 13px;
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16A34A;
    flex-shrink: 0;
}

.health-dot.unhealthy { background: #DC2626; }
.health-dot.warning   { background: #D97706; }

/* ─── Syncfusion Overrides ────────────────────── */
.e-grid {
    font-family: system-ui, sans-serif !important;
    font-size: 13px !important;
    border-color: var(--border-color) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.e-grid .e-headercell {
    background: var(--bg-page) !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-color: var(--border-color) !important;
    height: var(--row-height) !important;
}

.e-grid .e-row { height: var(--row-height) !important; }

.e-grid .e-row:hover .e-rowcell {
    background: var(--bg-hover) !important;
}

.e-grid .e-rowcell {
    font-size: 13px !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0 var(--sp-2) !important;
}

.e-grid .e-altrow .e-rowcell { background: var(--bg-surface) !important; }
.e-grid .e-toolbar { background: var(--bg-surface) !important; border-color: var(--border-color) !important; }
.e-grid .e-pager { background: var(--bg-surface) !important; border-color: var(--border-color) !important; font-size: 13px !important; color: var(--text-secondary) !important; }

/* Hücre/başlık tıklamasında oluşan mavi odak çerçevesini kapat (proje genelinde).
   Syncfusion v20.3+ ile cell focus :focus/:focus-visible üzerinden box-shadow ile geliyor;
   eski docs'taki .e-focus.e-focused veya .e-active selectorları çalışmıyor. */
.e-grid.sf-grid :is(
    .e-groupdroparea,
    .e-groupdroparea .e-groupsort,
    .e-groupdroparea .e-ungroupbutton,
    .e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-headercontent td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-groupcaption:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordplusexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordpluscollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowcollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content th.e-detailcell:not(.e-menu-item):not(.e-editedbatchcell)
):is(:focus,:focus-visible) {
    box-shadow: none !important;
}

.e-toast-container .e-toast {
    font-family: system-ui, sans-serif !important;
    font-size: 13px !important;
}

/* Toast container'ı topbar'ın (46px, z-index 1030) altına it.
   Y="Top" ile Syncfusion top:0 verir; topbar arkasında kalmasın diye
   topbar yüksekliği + küçük bir boşluk kadar aşağı kaydırıyoruz.
   Topbar dropdown'lar (kullanıcı menüsü, bildirimler) topbar'ın stacking
   context'i içinde kaldığından otomatik olarak toast'ın üzerinde kalır. */
.e-toast-container {
    top: calc(var(--topbar-h) + 8px) !important;
}

/* .e-dialog'a SABİT z-index VERİLMEZ.
   Syncfusion her açılışta artan bir z-index üretir ve çifti hep şöyle kurar:
   overlay = N, dialog = N+1, container = N+1. Buraya "z-index: 1210 !important"
   yazmak diyaloğu 1210'a çiviliyordu; sayaç 1210'u aştığı anda (aynı sayfada
   birkaç modal açıldıktan sonra kaçınılmaz) overlay diyaloğun ÜSTÜNE çıkıyor,
   modal soluk görünüyor ve tıklamaları overlay yutuyordu. Sayfa yenilenince
   sayaç sıfırlandığı için sorun "bazen" oluyor gibi görünüyordu.
   Ölçüldü: dialog inline 1212, overlay 1211, hesaplanan dialog 1210;
   elementFromPoint diyaloğun ortasında .e-dlg-overlay döndürüyordu.
   MODAL diyaloglarda yükseltmeyi zaten .e-dlg-container yapıyor (position: fixed +
   kendi z-index'i, uygulama kabuğunun en üst değeri olan 1100'ün üstünde). */

/* NON-MODAL paneller (destek asistanı, geri bildirim) AYRI durumdur ve sabit z-index
   ALIR. Sebep: IsModal="false" olduğu için Syncfusion bunlara ne overlay ne de
   .e-dlg-container üretir — yükseltecek bir sarmalayıcı yoktur ve overlay olmadığı
   için yukarıdaki ters dönme de imkânsızdır.
   Ölçüldü: pin kaldırılınca bu paneller 1055'e düştü ve daraltılmış sidebar'ın uçan
   menüsü (.sb-flyout-panel, z-index 1100) panelin ÜSTÜNÜ kapattı — geri bildirim
   formunun başlık/açıklama alanları menünün altında kaldı. Eski global pin (1210)
   bu yükseltmeyi de sağlıyordu; burada yalnız bu iki panel için geri veriliyor.
   1150: flyout'un (1100) ve FAB butonlarının (1060) üstünde, eski davranışla aynı.
   !important ŞART: Syncfusion z-index'i elemana INLINE yazar (ölçüldü: 1055), sade bir
   kural inline stili geçemez. Bu, kaldırılan global pinden farklıdır — orada !important
   MODAL diyalogları da vurduğu için overlay/dialog çifti ters dönüyordu; burada kural
   yalnız overlay'i olmayan iki panele kapsamlı. */
.support-dialog.e-dialog,
.feedback-dialog.e-dialog { z-index: 1150 !important; }

.e-control { font-family: system-ui, sans-serif !important; font-size: 13px !important; }
.e-input-group { font-size: 13px !important; }

/* ─── Blazor Error UI ─────────────────────────── */
#blazor-error-ui {
    background: #FFFBEB;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: var(--sp-4);
    color: #DC2626;
    margin: var(--sp-4);
}

/* ─── Form Validasyon (Blazor varsayılan) ─────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #16A34A; }
.invalid { outline: 1px solid #DC2626; }
.validation-message { color: #DC2626; font-size: 11px; margin-top: 2px; }

/* ─── Buton Sistemi ───────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-3);
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;
    font-family: system-ui, sans-serif;
    line-height: 1;
    flex-shrink: 0;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.btn-sm { height: 28px; padding: 0 var(--sp-2); font-size: 12px; border-radius: 5px; }

.btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { opacity: 0.88; text-decoration: none; color: var(--text-on-accent); }

.btn-secondary { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-color); }
.btn-secondary:hover:not(:disabled) { background: var(--border-color); text-decoration: none; color: var(--text-primary); }

.btn-danger { background: #DC2626; color: #ffffff; border-color: #DC2626; }
.btn-danger:hover:not(:disabled) { opacity: 0.88; text-decoration: none; color: #fff; }

.btn-outline-success { background: transparent; color: #16a34a; border-color: #16a34a; }
.btn-outline-success:hover:not(:disabled) { background: #16a34a; color: #fff; text-decoration: none; }
.btn-outline-danger { background: transparent; color: #DC2626; border-color: #DC2626; }
.btn-outline-danger:hover:not(:disabled) { background: #DC2626; color: #fff; text-decoration: none; }
.btn-outline-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.btn-outline-secondary:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }

.btn-back { width: 32px; height: 32px; padding: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }

.btn-ghost-danger { background: transparent; color: var(--text-tertiary); border-color: transparent; }
.btn-ghost-danger:hover:not(:disabled) { background: #FEE2E2; color: #DC2626; }
[data-bs-theme="dark"] .btn-ghost-danger:hover:not(:disabled) { background: #450A0A; color: #F87171; }

/* ─── Form Kontrolleri ────────────────────────── */
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 0 var(--sp-3);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-family: system-ui, sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 34px;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-control::placeholder { color: var(--text-tertiary); font-size: 12px; }
.form-control:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-hover); }

textarea.form-control {
    height: auto;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 8px;
    resize: vertical;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}

.form-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: var(--sp-1);
}

.form-group { display: flex; flex-direction: column; }

/* ─── Ayarlar Sayfası Layout ──────────────────── */
.content-wrapper {
    display: flex;
    flex-direction: column;
    /*gap: var(--sp-4);*/
    padding: 12px;
}

.tab-content-pad { padding: var(--sp-4) 0; display: flex; flex-direction: column; gap: var(--sp-4); }

.settings-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--sp-4) var(--sp-4);
}

.settings-section-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--sp-4);
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-color);
}

.settings-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
}

.settings-form { max-width: 680px; }

.form-grid { display: flex; flex-direction: column; gap: var(--sp-3); }

.form-row { display: flex; gap: var(--sp-3); }
.form-row .form-group { flex: 1; min-width: 0; }

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-color);
}

.field-error-msg {
    font-size: 11px;
    color: #DC2626;
    margin-top: var(--sp-1);
}
[data-bs-theme="dark"] .field-error-msg { color: #F87171; }

/* ─── Modül Seçim Listesi ────────────────────── */
.module-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.module-check-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background .1s;
    margin: 0;
}
.module-check-item:hover { background: var(--bg-hover); }
.module-check-item + .module-check-item { border-top: 1px solid var(--border-color); }

.module-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.module-check-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.module-check-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--bg-elevated);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.module-check-name {
    font-size: 13px;
    color: var(--text-primary);
}

/* ─── Modül Transfer Paneli ──────────────────────── */
.module-transfer-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.module-transfer-header {
    padding: 8px 12px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.module-transfer-list {
    max-height: 280px;
    overflow-y: auto;
}

.module-transfer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background .1s;
}
.module-transfer-item:last-child { border-bottom: none; }
.module-transfer-item:hover { background: var(--bg-hover); }
.module-transfer-item--selected { background: rgba(34, 197, 94, 0.08); }
.module-transfer-item--selected:hover { background: rgba(34, 197, 94, 0.14); }

.module-transfer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.module-transfer-btn {
    flex-shrink: 0;
    padding: 2px 6px;
    line-height: 1;
}

.module-transfer-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.input-with-preview { display: flex; flex-direction: column; gap: var(--sp-1); }

.switch-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

/* ─── Menü Grubu Kartı ────────────────────────── */
.menu-group-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.menu-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-color);
}

.menu-item-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-color);
}
.menu-item-row:last-of-type { border-bottom: none; }

.menu-item-editor { margin-top: var(--sp-2); width: 100%; }

/* ─── Yasal Sayfalar ─────────────────────────── */
.legal-page-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-color);
    gap: var(--sp-2);
}
.legal-page-row:last-child { border-bottom: none; }
.legal-page-row:hover { background: var(--bg-hover); }

.legal-page-info {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    flex: 1;
}

.legal-page-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.legal-page-slug {
    font-size: 12px;
    color: var(--text-tertiary);
}

.legal-page-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-shrink: 0;
}

.badge-lock {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    width: 14px;
    height: 14px;
}

/* ─── Yardımcı ────────────────────────────────── */
.text-secondary { color: var(--text-secondary) !important; }
.me-1 { margin-right: var(--sp-1); }

/* ─── Syncfusion Boyut Override ───────────────── */
.sf-sm .e-input-group,
.sf-sm.e-input-group { height: 34px !important; font-size: 12px !important; min-height: 34px !important; }
.sf-sm .e-dropdownlist { font-size: 12px !important; }

/* ─── Tab Override ────────────────────────────── */
.e-tab .e-tab-header { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border-color) !important; }
.e-tab .e-toolbar-item .e-tab-text { font-size: 13px !important; font-family: system-ui, sans-serif !important; color: var(--text-secondary) !important; }
.e-tab .e-toolbar-item.e-active .e-tab-text { color: var(--accent) !important; font-weight: 500 !important; }
.e-tab .e-indicator { background: var(--accent) !important; }
.e-tab .e-content { background: var(--bg-page) !important; }

/* ─── Spinner ─────────────────────────────────── */
.spinner-border {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    vertical-align: -2px;
}
.spinner-border-sm { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Zorunlu Alan İşaretçisi ───────────────────────────────────────────────── */
.form-control.required {
    border-left: 3px solid #EF4444;
}
.req-star {
    color: #EF4444;
    font-weight: 700;
    margin-left: 1px;
}

/* ── Toast — error / success ────────────────────────────────────────────────── */
.toast-body-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast-body-row svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.e-toast.toast-success {
    background: #F0FDF4 !important;
    border-left: 4px solid #22C55E;
    color: #166534 !important;
}
.e-toast.toast-success .e-toast-message,
.e-toast.toast-success .e-toast-content {
    color: #166534 !important;
}
.e-toast.toast-success .toast-body-row svg {
    stroke: #16A34A;
}

.e-toast.toast-error {
    background: #FEF2F2 !important;
    border-left: 4px solid #EF4444;
    color: #991B1B !important;
}
.e-toast.toast-error .e-toast-message,
.e-toast.toast-error .e-toast-content {
    color: #991B1B !important;
}
.e-toast.toast-error .toast-body-row svg {
    stroke: #DC2626;
}

[data-bs-theme="dark"] .e-toast.toast-success {
    background: #052E16 !important;
    border-left-color: #22C55E;
    color: #86EFAC !important;
}
[data-bs-theme="dark"] .e-toast.toast-success .e-toast-message,
[data-bs-theme="dark"] .e-toast.toast-success .e-toast-content {
    color: #86EFAC !important;
}
[data-bs-theme="dark"] .e-toast.toast-success .toast-body-row svg {
    stroke: #4ADE80;
}

[data-bs-theme="dark"] .e-toast.toast-error {
    background: #450A0A !important;
    border-left-color: #EF4444;
    color: #FCA5A5 !important;
}
[data-bs-theme="dark"] .e-toast.toast-error .e-toast-message,
[data-bs-theme="dark"] .e-toast.toast-error .e-toast-content {
    color: #FCA5A5 !important;
}
[data-bs-theme="dark"] .e-toast.toast-error .toast-body-row svg {
    stroke: #F87171;
}

/* ─── Form Validation ────────────────────────── */
.form-control.is-invalid {
    border-color: #EF4444;
    outline: none;
}
.form-control.is-invalid:focus {
    border-color: #EF4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}
.field-error {
    margin-top: 4px;
    font-size: 11px;
    color: #EF4444;
    line-height: 1.4;
}
.req-star {
    color: #EF4444;
    margin-left: 2px;
}

/* ─── Upload Zone ─────────────────────────────── */
.upload-zone {
    position: relative;          /* InputFile absolute konumlandırması için zorunlu */
    overflow: hidden;            /* Taşmayı engelle */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 140px;
    text-align: center;
    user-select: none;
}

.upload-zone:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

/* Büyük ikon */
.upload-zone svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.7;
}

/* Ana metin */
.upload-zone-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

/* İpucu / format bilgisi */
.upload-zone-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: monospace;
}

/* Yükleme sırasında tıklamayı devre dışı bırak */
.upload-zone--loading {
    pointer-events: none;
    opacity: 0.65;
    cursor: default;
}

/* Küçük varyant (mobil platform satırları) */
.upload-zone--sm {
    padding: 14px 16px;
    min-height: 80px;
    border-radius: 8px;
}

.upload-zone--sm svg {
    width: 20px;
    height: 20px;
}

.upload-zone--sm .upload-zone-label {
    font-size: 12px;
}

/* Logo yükleme zonu — geniş alan, yatay ağırlıklı */
.upload-zone--logo {
    min-height: 110px;
    padding: 20px 24px;
}

/* Favicon yükleme zonu — küçük ikon için kompakt */
.upload-zone--favicon {
    min-height: 80px;
    padding: 14px 20px;
}

.upload-zone--favicon svg {
    width: 20px;
    height: 20px;
}

.upload-zone--favicon .upload-zone-label {
    font-size: 12px;
}

/* ─── Avatar Dropzone ────────────────────────── */

.avatar-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    gap: var(--sp-1);
    padding: var(--sp-3);
}

.avatar-dropzone:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.avatar-dropzone--busy {
    pointer-events: none;
    opacity: 0.6;
}

.avatar-dropzone input[type="file"] {
    display: none;
}

.avatar-dropzone > svg {
    width: 28px;
    height: 28px;
    color: var(--text-tertiary);
}

.avatar-dropzone-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.avatar-dropzone-hint {
    font-size: 11px;
    color: var(--text-tertiary);
}

.avatar-dropzone-img {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.avatar-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.avatar-remove-btn svg {
    width: 12px;
    height: 12px;
}

/* ─── Cari Detay Salt Okunur ────────────────────── */
.ro-value {
    font-size: 13px;
    color: var(--text-primary);
}

/* ─── Cari Logo ─────────────────────────────────── */
.cari-logo-dropzone {
    height: 100px;
    width: 220px;
}

.cari-logo-preview {
    border-radius: 6px;
    max-width: 200px;
    height: 80px;
    object-fit: contain;
    padding: 6px;
    border: 1px solid var(--border-color);
}

/* ─── Kargo Firma Kartları ───────────────────────── */
.kargo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-6);
}

.kargo-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, border-color .2s;
}
.kargo-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
[data-bs-theme="dark"] .kargo-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.kargo-card--pasif {
    opacity: .7;
}

.kargo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.kargo-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.kargo-card-avatar--aktif {
    background: var(--accent-bg);
    color: var(--accent);
    border: 1.5px solid var(--accent);
}
.kargo-card-avatar--pasif {
    background: var(--bg-hover);
    color: var(--text-tertiary);
    border: 1.5px solid var(--border-color);
}

.kargo-card-avatar--upload {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.kargo-card-avatar--upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.kargo-card-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.kargo-card-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    border-radius: 12px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.kargo-card-avatar-overlay svg {
    width: 20px;
    height: 20px;
    color: #fff;
}
.kargo-card-avatar--upload:hover .kargo-card-avatar-overlay {
    opacity: 1;
}
.kargo-card-avatar--busy {
    opacity: .5;
    pointer-events: none;
}
.kargo-card-avatar--busy::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    animation: kargo-spin .6s linear infinite;
}
@keyframes kargo-spin {
    to { transform: rotate(360deg); }
}

.kargo-card-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

/* Toggle switch */
.kargo-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}
.kargo-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.kargo-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--text-tertiary);
    border-radius: 24px;
    transition: background .25s;
}
.kargo-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}
.kargo-toggle input:checked + .kargo-toggle-slider {
    background: var(--accent);
}
.kargo-toggle input:checked + .kargo-toggle-slider::before {
    transform: translateX(20px);
}

/* Kart Orta */
.kargo-card-body {
    flex: 1;
    padding: 0 var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    border-top: 1px solid var(--border-color);
    margin: 0 var(--sp-3);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}

.kargo-card-detail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
}
.kargo-card-label {
    color: var(--text-secondary);
}
.kargo-card-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

/* Kart Alt */
.kargo-card-footer {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.kargo-card-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.kargo-card-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.kargo-card-btn--pasif:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FCA5A5;
}
[data-bs-theme="dark"] .kargo-card-btn--pasif:hover {
    background: #450A0A;
    color: #F87171;
    border-color: #7F1D1D;
}
.kargo-card-btn--aktif:hover {
    background: #DCFCE7;
    color: #16A34A;
    border-color: #86EFAC;
}
[data-bs-theme="dark"] .kargo-card-btn--aktif:hover {
    background: #14532D;
    color: #4ADE80;
    border-color: #166534;
}
.kargo-card-btn svg {
    width: 16px;
    height: 16px;
}

/* ─── Empty State (global) ─────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-8);
    color: var(--text-secondary);
}
.empty-state-icon { opacity: .4; }
.empty-state-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.empty-state-text {
    font-size: 13px;
    text-align: center;
    max-width: 300px;
    color: var(--text-secondary);
}

/* ─── Filtre Bandı ─────────────────────────────── */
.filter-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: var(--sp-2) var(--sp-4);
    flex-shrink: 0;
}

/* ─── Skeleton Loading (ek) ────────────────────── */
.skeleton-row {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    align-items: center;
}
.skeleton-badge {
    height: 20px;
    width: 56px;
    border-radius: 10px;
}

/* ─── Grid Özet Metni ──────────────────────────── */
.grid-summary-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ─── Badge Dot ────────────────────────────────── */
.badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ─── Cari Tip Badge'leri ──────────────────────── */
.badge-type-customer,
.badge-type-supplier,
.badge-type-both {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}
.badge-type-customer { background: #DBEAFE; color: #1D4ED8; }
.badge-type-supplier { background: #FEF3C7; color: #D97706; }
.badge-type-both     { background: #EDE9FE; color: #7C3AED; }

[data-bs-theme="dark"] .badge-type-customer { background: #1A3A5C; color: #58A6FF; }
[data-bs-theme="dark"] .badge-type-supplier { background: #451A03; color: #FB923C; }
[data-bs-theme="dark"] .badge-type-both     { background: #2E1065; color: #C4B5FD; }

/* ─── Badge Pasif ──────────────────────────────── */
.badge-pasif {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    background: #F1F5F9;
    color: #64748B;
}
[data-bs-theme="dark"] .badge-pasif { background: #1E293B; color: #94A3B8; }

/* ─── Taksit Modal Stilleri ─────────────────────────────────── */
/* Kart tipi tab'ları */
.kart-tipi-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--border-color);
}
.kart-tipi-tab {
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.kart-tipi-tab:hover { color: var(--text-primary); }
.kart-tipi-tab--aktif { color: var(--accent); border-bottom-color: var(--accent); }

/* Taksit kural listesi */
.taksit-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.taksit-kural {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, opacity 0.15s;
}
.taksit-kural:hover { border-color: var(--border-active); }
.taksit-kural--pasif { opacity: 0.5; }
.taksit-kural--acik { border-color: var(--accent); }

/* Kural satırı — tek yatay şerit */
.taksit-kural-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
}
.taksit-kural-banka { font-weight: 500; min-width: 120px; color: var(--text-primary); }
.taksit-kural-taksit { font-weight: 600; min-width: 72px; color: var(--text-primary); }
.taksit-kural-komisyon { color: var(--text-secondary); min-width: 58px; }
.taksit-kural-mintutar { color: var(--text-muted); font-size: 12px; min-width: 76px; }
.taksit-kural-durum { margin-left: auto; display: flex; align-items: center; }

/* Expand button */
.btn-expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; transition: transform 0.2s, color 0.15s;
    border-radius: 4px; padding: 0; flex-shrink: 0;
    transform: rotate(-90deg);
}
.btn-expand:hover { color: var(--accent); background: var(--bg-hover); }
.btn-expand--acik { transform: rotate(0deg); color: var(--accent); }
.btn-xs { height: 26px; padding: 0 8px; font-size: 11px; border-radius: 4px; }

/* Vade panel */
.vade-panel {
    background: var(--bg-hover);
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border-color);
}
.vade-baslik {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.vade-tablo { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.vade-tablo th {
    text-align: left; padding: 4px 8px;
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.vade-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.vade-tablo tr:last-child td { border-bottom: none; }
.vade-tablo code {
    font-family: monospace; font-size: 12px;
    background: var(--bg-page); padding: 1px 6px; border-radius: 3px;
}
.vade-ekle-row {
    display: flex; align-items: flex-end; gap: 8px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    flex-wrap: wrap;
}

/* Yeni kural form */
.yeni-kural-form {
    background: var(--bg-hover);
    border-radius: 8px; padding: 12px 14px;
    margin-top: 8px;
}
.yeni-kural-baslik {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-muted); margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.yeni-kural-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end; gap: 10px;
}
.yeni-kural-row--pay { grid-template-columns: 1.4fr 0.7fr 0.7fr 0.9fr auto; }
.yeni-kural-btn { height: 32px; white-space: nowrap; align-self: end; }
.empty-hint { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px 0; margin: 0; }

/* Pay modal bölümleri */
.pay-bolum { margin-bottom: 18px; }
.pay-bolum-baslik { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pay-bolum-baslik span:first-child { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pay-bolum-aciklama { font-size: 11px; color: var(--text-muted); }
.pay-ayrac { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
.banka-grubu { margin-bottom: 12px; }
.banka-grubu-baslik {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 4px 4px 6px; border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

/* btn-icon (taksit modal içi) */
.btn-icon {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-icon:hover:not(:disabled) { background: var(--bg-hover); }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger-ghost { color: #dc2626; border-color: transparent; }
.btn-danger-ghost:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }

/* alert-error (modal içi) */
.alert-error {
    padding: 8px 12px; border-radius: 6px; font-size: 13px;
    background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; margin-top: 8px;
}
[data-bs-theme="dark"] .alert-error { background: #450a0a; color: #f87171; border-color: #7f1d1d; }


/* ── Log SfTab (height fill + iç scroll) ─────────────────────────────────── */
.log-sftab { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log-sftab .e-tab-header { flex-shrink: 0; }
.log-sftab .e-content { flex: 1; min-height: 0; overflow: hidden !important; }
.log-sftab .e-content .e-item.e-active { height: 100%; display: flex; flex-direction: column; }

/* ── Log Listesi ─────────────────────────────────────────────────────────── */
.log-list .log-col-row:last-child { border-bottom: 0; }

.log-col-header {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px 9px 22px;     /* sol şerit alanı için ekstra */
    border-bottom: 1px solid var(--border);
    font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    opacity: .55;
}

.log-col-row {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 16px 10px 22px;   /* sol şerit alanı */
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.4;
}
.log-col-row--clickable { cursor: pointer; transition: background .1s; }
.log-col-row--clickable:hover { background: var(--bg-hover); }
.log-col-row--selected { background: rgba(124,58,237,.1) !important; }
.log-col-row--selected::before { width: 4px !important; opacity: 1 !important; }

/* Sol şerit — log seviyesine göre renk */
.log-col-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: width .12s ease, opacity .12s ease;
    opacity: .65;
}
.log-row--information::before { background: #3b82f6; }
.log-row--warning::before     { background: #f59e0b; }
.log-row--error::before       { background: #ef4444; }
.log-row--critical::before    { background: #a855f7; }
.log-row--debug::before,
.log-row--trace::before       { background: #94a3b8; opacity: .35; }

/* Zaman bloğu — göreli üstte, mutlak altta */
.log-ts-block { display: flex; flex-direction: column; flex-shrink: 0; }
.log-ts-rel   { font-size: 12.5px; font-weight: 500; color: var(--text-body-emphasis, inherit); }
.log-ts-abs   { font-size: 11px; font-family: monospace; opacity: .5; margin-top: 1px; }

/* Eski log-ts (yavaş sorgular tablosu hâlâ kullanıyor) */
.log-ts { font-family: monospace; font-size: 12.5px; opacity: .7; white-space: nowrap; flex-shrink: 0; }

/* Detay (mesaj + meta satırı) */
.log-detail { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.log-msg-line {
    display: flex; align-items: baseline; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; font-weight: 500;
}
.log-msg { overflow: hidden; text-overflow: ellipsis; }

/* Exception ipucu — küçük kırmızı tag */
.log-exc-tag {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 600;
    padding: 1px 7px;
    border-radius: 99px;
    background: rgba(239,68,68,.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.3);
    font-family: monospace;
    letter-spacing: .02em;
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis;
}

/* Meta (kategori · http · ip · user) */
.log-meta-line {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; opacity: .55;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-meta-line .log-category { font-size: 11px; opacity: 1; margin: 0; }
.log-meta-sep { opacity: .4; flex-shrink: 0; }
.log-method {
    font-family: monospace; font-size: 10.5px;
    font-weight: 600; letter-spacing: .04em;
    padding: 0 6px; border-radius: 3px;
    background: rgba(148,163,184,.15);
    color: var(--text-body-emphasis, inherit);
    flex-shrink: 0;
}
.log-method--inline { padding: 1px 6px; }
.log-path { font-family: monospace; opacity: .85; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.log-ip   { font-family: monospace; }
.log-user { font-family: monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* Tenant chip (sağ kolon) */
.log-tenant-chip {
    display: inline-block;
    font-family: monospace; font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.25);
    color: var(--text-body-emphasis, inherit);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-tenant-empty { opacity: .3; font-size: 12px; }

/* ── Log Detay Paneli ────────────────────────────────────────────────────── */
.log-detail-panel {
    position: fixed;
    top: 0; right: 0;
    width: 480px; max-width: 100vw;
    height: 100vh;
    z-index: 1050;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,.4);
    animation: log-panel-slide .18s ease-out;
}
@keyframes log-panel-slide {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.log-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.log-detail-rel { font-size: 13px; font-weight: 600; color: var(--text-body-emphasis, inherit); }
.log-detail-abs { font-size: 11px; opacity: .5; font-family: monospace; }

.log-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex; flex-direction: column;
    gap: 14px;
}
.log-detail-message {
    font-size: 14.5px; font-weight: 500;
    line-height: 1.55;
    color: var(--text-body-emphasis, inherit);
    margin: 0;
    word-break: break-word;
}

/* Log ID kopyalanabilir şerit */
.log-id-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: var(--bg-elevated, rgba(255,255,255,.03));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .12s, border-color .12s;
}
.log-id-strip:hover { background: var(--bg-hover); border-color: var(--accent); }
.log-id-strip:hover .log-id-label { color: var(--accent); }
.log-id-label { font-weight: 600; letter-spacing: .08em; opacity: .55; flex-shrink: 0; transition: color .12s; }
.log-id-value { flex: 1; font-family: monospace; font-size: 11.5px; opacity: .85; word-break: break-all; }
.log-id-strip svg { opacity: .5; flex-shrink: 0; }

/* Exception bloğu */
.log-exc-block {
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.28);
    border-left: 3px solid #ef4444;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
}
.log-exc-head {
    display: flex; align-items: center; gap: 6px;
    color: #f87171; font-weight: 600;
    margin-bottom: 5px;
}
.log-exc-type { font-family: monospace; word-break: break-all; }
.log-exc-msg { opacity: .82; line-height: 1.5; word-break: break-word; }

/* Stack trace ve kolaplı bölümler */
.log-section { margin: 0; }
.log-section > summary {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    opacity: .6;
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
}
.log-section > summary::-webkit-details-marker { display: none; }
.log-section > summary::before {
    content: '▸';
    font-size: 9px;
    opacity: .5;
    transition: transform .12s;
}
.log-section[open] > summary::before { transform: rotate(90deg); }
.log-section > summary:hover { opacity: .9; }
.log-section-copy {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    opacity: .5;
    transition: opacity .12s, background .12s;
}
.log-section-copy:hover { opacity: 1; background: var(--bg-hover); }

.log-stacktrace {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: rgba(0,0,0,.22);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
}

/* Bölüm başlığı */
.log-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    opacity: .5;
    margin: 4px 0 -4px;
}

/* Detay grid (2x2) */
.log-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Key-value list */
.log-kv-list {
    display: flex; flex-direction: column;
    gap: 0;
    margin-top: 4px;
}
.log-kv-row {
    display: flex; gap: 10px; justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148,163,184,.08);
    font-size: 12.5px;
}
.log-kv-row:last-child { border-bottom: none; }
.log-kv-key { opacity: .5; flex-shrink: 0; white-space: nowrap; font-size: 11.5px; }
.log-kv-val {
    text-align: right;
    font-family: monospace; font-size: 11.5px;
    word-break: break-all;
    color: var(--text-body-emphasis, inherit);
    display: inline-flex; align-items: center; gap: 6px;
    justify-content: flex-end;
}
.log-kv-val code { font-family: inherit; }
.log-kv-copyable {
    background: transparent;
    border: 0;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    transition: background .12s;
}
.log-kv-copyable:hover { background: var(--bg-hover); color: var(--accent); }
.log-kv-copyable svg { opacity: .5; }
.log-kv-copyable:hover svg { opacity: 1; }

/* Mobile responsive */
@media (max-width: 600px) {
    .log-detail-panel { width: 100%; }
    .log-col-row { flex-wrap: wrap; }
    .log-detail-grid { grid-template-columns: 1fr; }
}

/* Log sayfası SfGrid — hücre default'larını iki satırlı içerik için normalize et */
.log-page .e-grid .e-rowcell {
    white-space: normal !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    padding: 6px 12px !important;
}
.log-page .e-grid .e-rowcell .log-ts-block,
.log-page .e-grid .e-rowcell .log-detail {
    display: flex !important;
    flex-direction: column !important;
}
.log-page .e-grid .e-rowcell .log-msg-line,
.log-page .e-grid .e-rowcell .log-meta-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.log-page .e-grid .e-rowcell .log-msg-line { white-space: nowrap; text-overflow: ellipsis; }
.log-page .e-grid .e-rowcell .log-msg { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.log-page .e-grid .e-rowcell .log-exc-tag { flex-shrink: 0; }

/* Log satırı sol kenar şeridi (level rengine göre) */
.log-page .e-grid .e-row.log-row--information > td:first-child { border-left: 3px solid #3b82f6; }
.log-page .e-grid .e-row.log-row--warning     > td:first-child { border-left: 3px solid #f59e0b; }
.log-page .e-grid .e-row.log-row--error       > td:first-child { border-left: 3px solid #ef4444; }
.log-page .e-grid .e-row.log-row--critical    > td:first-child { border-left: 3px solid #a855f7; }

/* ── Sidebar daraltılmış: tooltip + flyout submenu (body portal) ─── */
/* JS sidebar-flyout.js bu elementleri body'e taşır; sidebar overflow'u
   etkilemez, sidebar-nav scroll'u korunur */
.sb-flyout-tip {
    position: fixed;
    transform: translateY(-50%);
    background: #1A2740;
    color: #E6EDF3;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
}
.sb-flyout-panel {
    position: fixed;
    min-width: 220px;
    background: #0F1B2D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 6px 6px 0;
    padding: 6px 0;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
}
.sb-flyout-panel a {
    display: block;
    padding: 0 var(--sp-4);
    height: 32px;
    line-height: 32px;
    color: #8B949E;
    text-decoration: none;
    font-size: 12.5px;
    white-space: nowrap;
}
.sb-flyout-panel a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #E6EDF3;
}
.sb-flyout-panel a.active {
    color: #58A6FF;
    font-weight: 500;
}

/* ── Scrollbar — Rota altın paleti (tüm uygulama) ─────────────── */
/* Firefox + Chromium 121+ standart desteği */
* {
    scrollbar-color: #C9962E rgba(0, 0, 0, 0.05);
    scrollbar-width: thin;
}
[data-bs-theme="dark"] * {
    scrollbar-color: #C9962E rgba(255, 255, 255, 0.05);
}

/* WebKit/Chromium — daha geniş tarayıcı desteği */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}
::-webkit-scrollbar-thumb {
    background: #C9962E;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #E1B35B;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAY SAYFA PATERNI — Kasa / Banka / Ortak / Kart / POS detay sayfaları
   Tek tutarli estetik: subtle aurora + gradient magazine baslik + summary
   kartlara fade-up cascade + accent hover (lift + border + glow + top strip).
   Accent: --dp-accent / --dp-accent-rgb / --dp-accent-2 her sayfa kendi seti.
   ═══════════════════════════════════════════════════════════════════════════ */
.detail-page { position: relative; isolation: isolate; }
.detail-page--kasa  { --dp-accent: #10b981; --dp-accent-rgb: 16,185,129;  --dp-accent-2: #34d399; }
.detail-page--banka { --dp-accent: #0ea5e9; --dp-accent-rgb: 14,165,233;  --dp-accent-2: #38bdf8; }
.detail-page--ortak { --dp-accent: #f59e0b; --dp-accent-rgb: 245,158,11;  --dp-accent-2: #fbbf24; }
.detail-page--kart  { --dp-accent: #e11d48; --dp-accent-rgb: 225,29,72;   --dp-accent-2: #f43f5e; }
.detail-page--pos   { --dp-accent: #8b5cf6; --dp-accent-rgb: 139,92,246;  --dp-accent-2: #a78bfa; }

.detail-page > .dp-aurora {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.detail-page .dp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
    animation: dpBlobFloat 22s ease-in-out infinite;
}
.detail-page .dp-blob--1 {
    width: 380px; height: 380px; top: -120px; left: -100px;
    background: radial-gradient(circle, var(--dp-accent) 0%, transparent 70%);
}
.detail-page .dp-blob--2 {
    width: 320px; height: 320px; top: -60px; right: -100px;
    background: radial-gradient(circle, var(--dp-accent-2) 0%, transparent 70%);
    animation-delay: -8s; animation-duration: 26s;
}
.detail-page .dp-blob--3 {
    width: 280px; height: 280px; top: 240px; left: 40%;
    background: radial-gradient(circle, var(--dp-accent) 0%, transparent 70%);
    animation-delay: -14s; animation-duration: 30s;
    opacity: .14;
}
[data-bs-theme="dark"] .detail-page .dp-blob { opacity: .14; }
[data-bs-theme="dark"] .detail-page .dp-blob--3 { opacity: .08; }
@keyframes dpBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(28px, 18px) scale(1.05); }
    66%      { transform: translate(-18px, 28px) scale(.95); }
}

.detail-page > *:not(.dp-aurora) { position: relative; z-index: 1; }

/* page-header z-index'i kartlardan yuksek — transfer dropdown'u kartlarin
   uzerinde acilsin. Kartlar transform yuzunden stacking context yaratiyor,
   page-header'a explicit z vermezsek dropdown arkalarinda kaliyor. */
.detail-page .page-header {
    z-index: 20;
    animation: dpFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
}
.detail-page .page-header-title {
    background: linear-gradient(135deg,
        var(--text-primary) 0%,
        var(--dp-accent) 60%,
        var(--dp-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: -.02em;
}
[data-bs-theme="dark"] .detail-page .page-header-title {
    background: linear-gradient(135deg,
        #f8fafc 0%,
        var(--dp-accent-2) 55%,
        var(--dp-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.detail-page .page-header-left .btn-ghost,
.detail-page .page-header-left .btn-link {
    transition: transform .2s ease, color .2s ease;
}
.detail-page .page-header-left .btn-ghost:hover,
.detail-page .page-header-left .btn-link:hover {
    color: var(--dp-accent) !important;
    transform: translateX(-2px);
}

/* KPI kart base — Cari sayfasiyla birebir */
.detail-page .acc-stat-card {
    position: relative;
    background: var(--bg-surface);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.04), 0 1px 2px -1px rgba(0,0,0,.03);
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    height: 100%;
    min-height: 58px;
    overflow: hidden;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.32) 0%, transparent 55%);
    animation: dpFadeUp 0.5s cubic-bezier(.22,1,.36,1) backwards;
}
[data-bs-theme="dark"] .detail-page .acc-stat-card {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.3);
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 55%);
}

.detail-page .acc-stat-lordicon {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    width: 30px;
    height: 30px;
    opacity: 0.85;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--dp-accent) 22%, transparent) 0%,
        transparent 65%);
    border: none;
    padding: 0;
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1),
                background 0.3s ease,
                opacity 0.25s ease;
}
.detail-page .acc-stat-card:hover .acc-stat-lordicon {
    opacity: 1;
    transform: scale(1.18);
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--dp-accent) 42%, transparent) 0%,
        transparent 72%);
}
.detail-page .acc-stat-card:has(.acc-stat-value.green) .acc-stat-lordicon {
    background: radial-gradient(circle at center,
        color-mix(in srgb, #10b981 22%, transparent) 0%,
        transparent 65%);
}
.detail-page .acc-stat-card:has(.acc-stat-value.green):hover .acc-stat-lordicon {
    background: radial-gradient(circle at center,
        color-mix(in srgb, #10b981 42%, transparent) 0%,
        transparent 72%);
}
.detail-page .acc-stat-card:has(.acc-stat-value.red) .acc-stat-lordicon {
    background: radial-gradient(circle at center,
        color-mix(in srgb, #ef4444 22%, transparent) 0%,
        transparent 65%);
}
.detail-page .acc-stat-card:has(.acc-stat-value.red):hover .acc-stat-lordicon {
    background: radial-gradient(circle at center,
        color-mix(in srgb, #ef4444 42%, transparent) 0%,
        transparent 72%);
}

.detail-page .acc-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-right: 32px;
    line-height: 1.2;
}
.detail-page .acc-stat-label::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    color: var(--dp-accent);
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    margin-right: 6px;
    transform: translateY(-1px);
    vertical-align: middle;
    animation: dpLivePulse 2.4s ease-in-out infinite;
}
.detail-page .acc-stat-card:has(.acc-stat-value.green) .acc-stat-label::before { color: #10b981; }
.detail-page .acc-stat-card:has(.acc-stat-value.red) .acc-stat-label::before   { color: #ef4444; }
.detail-page .acc-stat-card:has(.acc-stat-value.muted) .acc-stat-label::before {
    color: var(--text-tertiary);
    opacity: 0.45;
    animation: none;
}

.detail-page .acc-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.25px;
    transition: letter-spacing 0.3s ease;
    animation: dpValueIn 0.55s cubic-bezier(.22,1,.36,1) 0.35s backwards;
}
.detail-page .acc-stat-value.green { color: var(--bs-success) !important; }
.detail-page .acc-stat-value.red { color: var(--bs-danger) !important; }
.detail-page .acc-stat-value.muted { color: var(--text-tertiary) !important; }
.detail-page .acc-stat-card:hover .acc-stat-value { letter-spacing: -0.35px; }

.detail-page .acc-stat-sub {
    font-size: 0.68rem;
    color: var(--text-tertiary, var(--text-secondary));
    margin-top: 0.1rem;
    line-height: 1.2;
}

/* Alt kenar semantic accent şeridi */
.detail-page .acc-stat-card::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, transparent 0%, var(--dp-accent) 50%, transparent 100%);
    opacity: 0.4;
    transition: opacity 0.25s ease, height 0.25s ease;
}
.detail-page .acc-stat-card:has(.acc-stat-value.green)::after {
    background: linear-gradient(90deg, transparent, #10b981, transparent);
}
.detail-page .acc-stat-card:has(.acc-stat-value.red)::after {
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.detail-page .acc-stat-card:has(.acc-stat-value.muted)::after {
    background: linear-gradient(90deg, transparent, var(--text-tertiary), transparent);
    opacity: 0.25;
}
.detail-page .acc-stat-card:hover::after {
    opacity: 0.85;
    height: 3px;
}

/* Scanning beam */
.detail-page .acc-stat-card::before {
    content: "";
    position: absolute;
    left: -30%;
    bottom: -1px;
    width: 28%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.detail-page .acc-stat-card:hover::before {
    opacity: 1;
    animation: dpScanBeam 1.4s ease-in-out infinite;
}

/* Hover lift + semantic halo gölgesi */
.detail-page .acc-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--dp-accent);
    box-shadow:
        0 10px 24px -12px rgba(var(--dp-accent-rgb), .28),
        0 3px 6px -2px rgba(0,0,0,.05);
}
.detail-page .acc-stat-card:has(.acc-stat-value.green):hover {
    border-color: #10b981;
    box-shadow:
        0 10px 24px -12px rgba(16,185,129,.34),
        0 3px 6px -2px rgba(0,0,0,.05);
}
.detail-page .acc-stat-card:has(.acc-stat-value.red):hover {
    border-color: #ef4444;
    box-shadow:
        0 10px 24px -12px rgba(239,68,68,.34),
        0 3px 6px -2px rgba(0,0,0,.05);
}

/* Stagger — 5 karta kadar */
.detail-page .row > *:nth-child(1) .acc-stat-card { animation-delay: .04s; }
.detail-page .row > *:nth-child(2) .acc-stat-card { animation-delay: .10s; }
.detail-page .row > *:nth-child(3) .acc-stat-card { animation-delay: .16s; }
.detail-page .row > *:nth-child(4) .acc-stat-card { animation-delay: .22s; }
.detail-page .row > *:nth-child(5) .acc-stat-card { animation-delay: .28s; }

/* Period card (kart detay) — accent border'lı */
.detail-page .period-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,.32) 0%, transparent 55%),
        var(--bg-surface, var(--panel-bg));
    opacity: 0;
    transform: translateY(8px);
    animation: dpFadeUp .5s cubic-bezier(.22, 1, .36, 1) forwards;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .detail-page .period-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 55%),
        var(--bg-surface, var(--panel-bg));
}
.detail-page .period-card:hover {
    transform: translateY(-3px);
    border-color: var(--dp-accent) !important;
    box-shadow:
        0 10px 24px -12px rgba(var(--dp-accent-rgb), .34),
        0 3px 6px -2px rgba(0,0,0,.05);
}
.detail-page .period-card.current {
    border-color: var(--dp-accent) !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--dp-accent-rgb), .25),
        0 4px 12px -6px rgba(var(--dp-accent-rgb), .25);
}
.detail-page .period-row > *:nth-child(1) .period-card { animation-delay: .04s; }
.detail-page .period-row > *:nth-child(2) .period-card { animation-delay: .12s; }
.detail-page .period-row > *:nth-child(3) .period-card { animation-delay: .20s; }
.detail-page .period-row > *:nth-child(4) .period-card { animation-delay: .28s; }

.detail-page .page-fill-content {
    animation: dpFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .35s;
}

@keyframes dpFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dpLivePulse {
    0%, 100% { opacity: 0.5;  box-shadow: 0 0 3px currentColor; }
    50%      { opacity: 1;    box-shadow: 0 0 9px currentColor; }
}
@keyframes dpScanBeam {
    from { left: -30%; }
    to   { left: 105%; }
}
@keyframes dpValueIn {
    from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
    to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Header sağ aksiyon butonları — semantic glow + icon scale + lift
   Cari sayfasıyla aynı patern, tüm detay sayfalarında.
   ═══════════════════════════════════════════════════════════════════ */
.detail-page .page-header-right .btn {
    transition: transform 0.2s ease,
                box-shadow 0.25s ease,
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}
.detail-page .page-header-right .btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.detail-page .page-header-right .btn:hover svg {
    transform: scale(1.18);
}
.detail-page .page-header-right .btn:hover {
    transform: translateY(-1px);
}
.detail-page .page-header-right .btn:active {
    transform: scale(0.97);
}

/* Variant glow renkleri */
.detail-page .page-header-right .btn-primary {
    box-shadow: 0 2px 6px -2px rgba(var(--dp-accent-rgb), .35);
}
.detail-page .page-header-right .btn-primary:hover {
    box-shadow:
        0 12px 24px -10px rgba(var(--dp-accent-rgb), .55),
        0 4px 8px -2px rgba(var(--dp-accent-rgb), .28);
}
.detail-page .page-header-right .btn-outline-primary:hover {
    box-shadow: 0 8px 18px -8px rgba(var(--dp-accent-rgb), .42);
    border-color: var(--dp-accent) !important;
    color: var(--dp-accent) !important;
}
.detail-page .page-header-right .btn-outline-success:hover {
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .42);
}
.detail-page .page-header-right .btn-outline-danger:hover {
    box-shadow: 0 8px 18px -8px rgba(239, 68, 68, .42);
}
.detail-page .page-header-right .btn-outline-warning:hover {
    box-shadow: 0 8px 18px -8px rgba(245, 158, 11, .42);
}
.detail-page .page-header-right .btn-outline-info:hover {
    box-shadow: 0 8px 18px -8px rgba(14, 165, 233, .42);
}
.detail-page .page-header-right .btn-outline-secondary:hover {
    box-shadow: 0 8px 18px -8px rgba(100, 116, 139, .35);
    border-color: var(--dp-accent) !important;
    color: var(--dp-accent) !important;
}

/* Transfer dropdown menüsü — ürün kart hover/aktif renk */
.detail-page .transfer-menu-item {
    transition: background .15s ease, color .15s ease;
}
.detail-page .transfer-menu-item:hover {
    background: color-mix(in srgb, var(--dp-accent) 10%, var(--bg-page)) !important;
    color: var(--dp-accent);
}

@media (prefers-reduced-motion: reduce) {
    .detail-page .dp-blob,
    .detail-page .page-header,
    .detail-page .acc-stat-card,
    .detail-page .acc-stat-card::before,
    .detail-page .acc-stat-value,
    .detail-page .acc-stat-label::before,
    .detail-page .acc-stat-lordicon,
    .detail-page .period-card,
    .detail-page .page-fill-content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VAULT DESIGN SYSTEM — Global Compact Modal Pattern
   Tum detay sayfa modallari icin paylasilan markup + style sistemi.
   Markup:
     <SfDialog ... CssClass="vault-dialog vault-dialog--XXX">
       <DialogTemplates><Content>
         <div class="vault-modal vault-modal--action is-{accent}">
           <header class="vault-modal__head">
             <button class="vault-modal__close">...</button>
             <div class="vault-modal__head-text">
               <span class="vault-modal__eyebrow"><span class="vault-modal__eyebrow-dot"></span>EYEBROW</span>
               <h2 class="vault-modal__title">Title</h2>
               <p class="vault-modal__subtitle">Subtitle</p>
             </div>
           </header>
           <div class="vault-modal__body">
             <div class="vault-grid">
               <div class="vault-field vault-col-N" style="--i:0"> label + input </div>
               <div class="vault-amount vault-col-12" style="--i:N">...amount hero...</div>
             </div>
           </div>
           <footer class="vault-modal__foot">
             <button class="vault-btn vault-btn--ghost">Iptal</button>
             <button class="vault-btn vault-btn--primary">Kaydet</button>
           </footer>
         </div>
       </Content></DialogTemplates>
     </SfDialog>
   Accent variants: is-sky / is-emerald / is-amber / is-rose / is-violet / is-indigo
   ═══════════════════════════════════════════════════════════════════════════ */
.vault-dialog .e-dlg-content { padding: 0 !important; }
.vault-dialog .e-dlg-header-content { display: none !important; }
.vault-dialog.e-dialog {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 24px 56px -12px rgba(0,0,0,.28), 0 0 0 1px rgba(15,23,42,.06) !important;
}
[data-bs-theme="dark"] .vault-dialog.e-dialog {
    box-shadow: 0 24px 56px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) !important;
}

.vault-modal--action.is-emerald {
    --vm-accent: #047857;
    --vm-accent-light: #04845e;
    --vm-soft: rgba(5, 150, 105, .10);
    --vm-soft-2: rgba(5, 150, 105, .20);
    --vm-grad-from: #022c22;
    --vm-grad-to: #064e3b;
}
.vault-modal--action.is-sky {
    --vm-accent: #0369a1;
    --vm-accent-light: #027bba;
    --vm-soft: rgba(2, 132, 199, .10);
    --vm-soft-2: rgba(2, 132, 199, .20);
    --vm-grad-from: #082f49;
    --vm-grad-to: #0c4a6e;
}
.vault-modal--action.is-amber {
    --vm-accent: #b45309;
    --vm-accent-light: #ba5809;
    --vm-soft: rgba(217, 119, 6, .10);
    --vm-soft-2: rgba(217, 119, 6, .20);
    --vm-grad-from: #451a03;
    --vm-grad-to: #78350f;
}
.vault-modal--action.is-rose {
    --vm-accent: #be123c;
    --vm-accent-light: #e11d48;
    --vm-soft: rgba(225, 29, 72, .10);
    --vm-soft-2: rgba(225, 29, 72, .20);
    --vm-grad-from: #4c0519;
    --vm-grad-to: #881337;
}
.vault-modal--action.is-violet {
    --vm-accent: #6d28d9;
    --vm-accent-light: #7c3aed;
    --vm-soft: rgba(124, 58, 237, .10);
    --vm-soft-2: rgba(124, 58, 237, .20);
    --vm-grad-from: #2e1065;
    --vm-grad-to: #4c1d95;
}
.vault-modal--action.is-indigo {
    --vm-accent: #4338ca;
    --vm-accent-light: #4f46e5;
    --vm-soft: rgba(79, 70, 229, .10);
    --vm-soft-2: rgba(79, 70, 229, .20);
    --vm-grad-from: #1e1b4b;
    --vm-grad-to: #312e81;
}

.vault-modal {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    color: var(--text-primary);
}

.vault-modal__head {
    position: relative;
    padding: 16px 22px 18px;
    background:
        radial-gradient(circle at 100% 0%, var(--vm-soft-2), transparent 55%),
        linear-gradient(135deg, var(--vm-grad-from), var(--vm-grad-to));
    color: #fff;
}
.vault-modal__head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.vault-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .25s ease, background .2s ease;
}
.vault-modal__close:hover {
    background: rgba(255,255,255,.16);
    transform: rotate(90deg);
    color: #fff;
}
.vault-modal__head-text { padding-right: 40px; }
.vault-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.08);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
}
.vault-modal__eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--vm-accent-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-accent-light) 30%, transparent);
    animation: vaultDotPulse 1.8s ease-in-out infinite;
}
@keyframes vaultDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.85); }
}
.vault-modal__title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 8px 0 4px;
    color: #fff;
}
.vault-modal__subtitle {
    font-size: 12px;
    opacity: .68;
    margin: 0;
    color: #fff;
}

.vault-modal__body {
    padding: 18px 22px;
    max-height: 64vh;
    overflow-y: auto;
    background: var(--bg-surface);
}
.vault-modal__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 12px 0 0;
}
.vault-modal__hint svg { width: 14px; height: 14px; color: var(--vm-accent); }

.vault-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}
.vault-col-12 { grid-column: span 12; }
.vault-col-8 { grid-column: span 8; }
.vault-col-6 { grid-column: span 6; }
.vault-col-4 { grid-column: span 4; }
.vault-col-3 { grid-column: span 3; }
@media (max-width: 640px) {
    .vault-col-8, .vault-col-6, .vault-col-4, .vault-col-3 { grid-column: span 12; }
}

.vault-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    animation: vaultFieldIn .42s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay: calc(var(--i, 0) * 35ms + 80ms);
}
@keyframes vaultFieldIn {
    to { opacity: 1; transform: translateY(0); }
}
.vault-field__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}
.vault-field__req {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--vm-accent);
    background: var(--vm-soft);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--vm-soft-2);
}
.vault-field__opt {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--text-tertiary);
}
.vault-field__action {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 10.5px;
    color: var(--vm-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.vault-field__action:hover { text-decoration: underline; }
.vault-field__action svg { width: 12px; height: 12px; }

/* Syncfusion DropDownList / ComboBox açılır listesinde grup başlıklarını
   ortak görünüm: büyük harf, bold, opak alt çizgi. */
.e-popup .e-list-group-item {
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-page);
}

.vault-modal__body :is(.e-input-group, .e-control-wrapper, .e-textbox) {
    border-radius: 8px !important;
}
.vault-modal__body :is(.e-input-group.e-input-focus, .e-input-group:focus-within, .e-ddl.e-input-focus, .e-control-wrapper.e-input-focus) {
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 3px var(--vm-soft) !important;
}

.vault-amount {
    position: relative;
    background:
        radial-gradient(circle at 0% 100%, var(--vm-soft), transparent 60%),
        var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px 12px;
    opacity: 0;
    transform: translateY(6px);
    animation: vaultFieldIn .42s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay: calc(var(--i, 0) * 35ms + 80ms);
    overflow: hidden;
}
.vault-amount::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vm-accent), var(--vm-accent-light));
}
.vault-amount__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.vault-amount__input {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.vault-amount__currency {
    font-size: 22px;
    font-weight: 700;
    color: var(--vm-accent);
}

.vault-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, .08);
    border-left: 3px solid #ef4444;
    color: #b91c1c;
    font-size: 12.5px;
    padding: 9px 13px;
    border-radius: 9px;
    width: 100%;
}
[data-bs-theme="dark"] .vault-alert { color: #fca5a5; }
.vault-alert svg { width: 16px; height: 16px; flex-shrink: 0; }

.vault-modal__foot {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px 14px;
    background: var(--bg-page);
    border-top: 1px solid var(--border-color);
}
.vault-modal__foot::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vm-accent) 35%, transparent), transparent);
}
.vault-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .2s ease;
    background: transparent;
}
.vault-btn--sm { padding: 6px 12px; font-size: 12px; }
.vault-btn svg { width: 14px; height: 14px; }
.vault-btn--ghost {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.vault-btn--ghost:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-page);
    border-color: color-mix(in srgb, var(--text-secondary) 35%, var(--border-color));
}
.vault-btn--primary {
    background: linear-gradient(135deg, var(--vm-accent), var(--vm-accent-light));
    color: var(--vm-btn-ink, #fff);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 4px 12px -2px color-mix(in srgb, var(--vm-accent) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--vm-accent) 30%, transparent);
}
.vault-btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 8px 20px -4px color-mix(in srgb, var(--vm-accent) 55%, transparent),
        0 0 0 1px color-mix(in srgb, var(--vm-accent) 40%, transparent);
}
.vault-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Segmented control */
.vault-segment {
    display: inline-flex;
    width: 100%;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.vault-segment__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s ease;
}
.vault-segment__btn:hover { color: var(--text-primary); }
.vault-segment__btn.is-active {
    background: var(--bg-surface);
    color: var(--vm-accent);
    box-shadow: inset 0 0 0 1px var(--vm-soft-2);
}
.vault-segment__btn svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
    .vault-modal__eyebrow-dot,
    .vault-field,
    .vault-amount {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .vault-modal__close { transition: none; }
    .vault-modal__close:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEDARIKCI SAYFA PATERNI — Anasayfa.razor referansı, indigo aksent
   Tum tedarikci sayfalarinda paylasilir: aurora + magazine baslik + tablo polish
   Kullanim: <div class="page-fill tdr-page">  + <div class="tdr-aurora">3 blob</div>
   ═══════════════════════════════════════════════════════════════════════════ */
.tdr-page { position: relative; isolation: isolate; }

.tdr-page > .tdr-aurora {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.tdr-page .tdr-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
    animation: tdrBlobFloat 22s ease-in-out infinite;
}
.tdr-page .tdr-blob--1 {
    width: 380px; height: 380px; top: -120px; left: -100px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
}
.tdr-page .tdr-blob--2 {
    width: 340px; height: 340px; top: -60px; right: -100px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    animation-delay: -8s; animation-duration: 26s;
}
.tdr-page .tdr-blob--3 {
    width: 300px; height: 300px; top: 240px; left: 40%;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    animation-delay: -14s; animation-duration: 30s;
    opacity: .14;
}
[data-bs-theme="dark"] .tdr-page .tdr-blob { opacity: .14; }
[data-bs-theme="dark"] .tdr-page .tdr-blob--3 { opacity: .08; }
@keyframes tdrBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(28px, 18px) scale(1.05); }
    66%      { transform: translate(-18px, 28px) scale(.95); }
}

.tdr-page > *:not(.tdr-aurora) { position: relative; z-index: 1; }

/* Magazine baslik */
.tdr-page .page-header {
    z-index: 20;
    animation: tdrFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
}
.tdr-page .page-header-title {
    background: linear-gradient(135deg,
        var(--text-primary) 0%,
        #4f46e5 60%,
        #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: -.02em;
}
[data-bs-theme="dark"] .tdr-page .page-header-title {
    background: linear-gradient(135deg,
        #f8fafc 0%,
        #818cf8 55%,
        #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header sag aksiyonlar — hover lift + indigo glow */
.tdr-page .page-header-right .btn {
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s, color .2s;
}
.tdr-page .page-header-right .btn svg {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tdr-page .page-header-right .btn:hover { transform: translateY(-1px); }
.tdr-page .page-header-right .btn:hover svg { transform: scale(1.15); }
.tdr-page .page-header-right .btn:active { transform: scale(.97); }
.tdr-page .page-header-right .btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 6px -2px rgba(99, 102, 241, .35);
}
.tdr-page .page-header-right .btn-primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 10px 22px -8px rgba(99, 102, 241, .55),
        0 0 0 1px rgba(99, 102, 241, .35);
}
.tdr-page .page-header-right .btn-outline-secondary:hover {
    border-color: #6366f1 !important;
    color: #6366f1 !important;
    box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .35);
}
.tdr-page .page-header-right .btn-outline-success:hover {
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .42);
}

/* Filtre bandi / kart wrapper */
.tdr-page .bg-body-tertiary {
    animation: tdrFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .08s;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tdr-page .bg-body-tertiary:hover {
    border-color: color-mix(in srgb, #6366f1 35%, var(--bs-border-color));
}

/* Tablo polish */
.tdr-page .table {
    animation: tdrFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .12s;
}
.tdr-page .table tbody tr {
    transition: background .15s ease;
}
.tdr-page .table tbody tr:hover {
    background: color-mix(in srgb, #6366f1 6%, var(--bg-surface));
}

/* Tedarikci action-btn — indigo hover */
.tdr-page .action-btn { transition: all .15s ease; }
.tdr-page .action-btn:hover:not(.text-danger) {
    background: rgba(99, 102, 241, .1) !important;
    color: #6366f1 !important;
}
[data-bs-theme="dark"] .tdr-page .action-btn:hover:not(.text-danger) {
    background: rgba(129, 140, 248, .15) !important;
    color: #818cf8 !important;
}

/* Bos durum + Yukleniyor — fade-up */
.tdr-page .d-flex.flex-column.align-items-center.justify-content-center {
    animation: tdrFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .14s;
}
.tdr-page .d-flex.flex-column.align-items-center.justify-content-center svg {
    color: #6366f1 !important;
    opacity: .55 !important;
}

/* Search bar polish */
.tdr-page .form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
}

/* Card wrapper (kategoriler vb. col layout) */
.tdr-page .card {
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    animation: tdrFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
}
.tdr-page .card:hover {
    border-color: color-mix(in srgb, #6366f1 40%, var(--bs-border-color));
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .25);
}
.tdr-page .row > *:nth-child(1) .card { animation-delay: .08s; }
.tdr-page .row > *:nth-child(2) .card { animation-delay: .14s; }
.tdr-page .row > *:nth-child(3) .card { animation-delay: .20s; }

/* Bilgi alert -> banner */
.tdr-page .alert-info {
    background:
        linear-gradient(135deg, rgba(99, 102, 241, .06), rgba(99, 102, 241, .02)),
        var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid #6366f1;
    color: var(--text-primary);
    border-radius: 10px;
    animation: tdrFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .06s;
}
[data-bs-theme="dark"] .tdr-page .alert-info {
    background:
        linear-gradient(135deg, rgba(129, 140, 248, .08), rgba(129, 140, 248, .02)),
        var(--bg-surface);
}

@keyframes tdrFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tdr-page .tdr-blob,
    .tdr-page .page-header,
    .tdr-page .table,
    .tdr-page .card,
    .tdr-page .alert-info,
    .tdr-page .bg-body-tertiary,
    .tdr-page .d-flex.flex-column.align-items-center.justify-content-center {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BAYI SAYFA PATERNI — parametrik aksent (Vault dili, sayfa seviyesi)
   tdr-page ile aynı atmosfer ama aksent CSS değişkeniyle sürülür; her bayi
   sayfası amacına uygun bir aksent verir (amber/sky/rose/emerald/violet).
   Kullanım:
     <div class="page-fill bayi-page" style="--bp-accent:#d97706;--bp-accent-2:#f59e0b;">
       <div class="bayi-aurora">
         <span class="bayi-blob bayi-blob--1"></span>
         <span class="bayi-blob bayi-blob--2"></span>
         <span class="bayi-blob bayi-blob--3"></span>
       </div>
       ...
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.bayi-page {
    position: relative;
    isolation: isolate;
    --bp-accent: #d97706;
    --bp-accent-2: #f59e0b;
}

.bayi-page > .bayi-aurora {
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden;
}
.bayi-page .bayi-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .20;
    animation: bayiBlobFloat 24s ease-in-out infinite;
}
.bayi-page .bayi-blob--1 {
    width: 380px; height: 380px; top: -120px; left: -100px;
    background: radial-gradient(circle, var(--bp-accent) 0%, transparent 70%);
}
.bayi-page .bayi-blob--2 {
    width: 320px; height: 320px; top: -60px; right: -90px;
    background: radial-gradient(circle, var(--bp-accent-2, var(--bp-accent)) 0%, transparent 70%);
    animation-delay: -9s; animation-duration: 28s;
}
.bayi-page .bayi-blob--3 {
    width: 280px; height: 280px; top: 260px; left: 42%;
    background: radial-gradient(circle, var(--bp-accent) 0%, transparent 70%);
    opacity: .12; animation-delay: -15s; animation-duration: 32s;
}
[data-bs-theme="dark"] .bayi-page .bayi-blob { opacity: .13; }
[data-bs-theme="dark"] .bayi-page .bayi-blob--3 { opacity: .07; }
@keyframes bayiBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(26px, 16px) scale(1.05); }
    66%      { transform: translate(-16px, 26px) scale(.95); }
}

/* Atmosfer (.bayi-aurora) z-index:-1 ile en altta; içerik doğal akışta üstte
   kalır. Sayfa KENDİ stacking context'ini (isolation) korur ama çocuklara
   yüksek z-index VERMEZ — böylece HelpButton'ın fixed paneli (z-index:1050)
   hapsolmaz, içeriğin üstünde açılır. (cf-page paterniyle birebir.) */

/* Magazine başlık — aksent gradyan */
.bayi-page .page-header {
    animation: bayiFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
}
.bayi-page .page-header-title {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--bp-accent) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: -.02em;
}
[data-bs-theme="dark"] .bayi-page .page-header-title {
    background: linear-gradient(135deg, #f8fafc 0%, var(--bp-accent-2, var(--bp-accent)) 72%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header sağ aksiyonlar — hover lift + aksent glow */
.bayi-page .page-header-right .btn {
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s, color .2s;
}
.bayi-page .page-header-right .btn svg {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.bayi-page .page-header-right .btn:hover { transform: translateY(-1px); }
.bayi-page .page-header-right .btn:hover svg { transform: scale(1.12); }
.bayi-page .page-header-right .btn:active { transform: scale(.97); }
.bayi-page .page-header-right .btn-primary {
    background: linear-gradient(135deg, var(--bp-accent), var(--bp-accent-2, var(--bp-accent))) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--bp-accent) 40%, transparent);
}
.bayi-page .page-header-right .btn-primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 10px 22px -8px color-mix(in srgb, var(--bp-accent) 55%, transparent),
        0 0 0 1px color-mix(in srgb, var(--bp-accent) 35%, transparent);
}
.bayi-page .page-header-right .btn-outline-secondary:hover {
    border-color: var(--bp-accent) !important;
    color: var(--bp-accent) !important;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--bp-accent) 35%, transparent);
}

/* Arama / form alanları — aksent odak */
.bayi-page .form-control:focus,
.bayi-page .form-select:focus {
    border-color: var(--bp-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 16%, transparent) !important;
}

/* Filtre bandı / panel kartları */
.bayi-page .bg-body-tertiary,
.bayi-page .panel-card,
.bayi-page .card {
    animation: bayiFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bayi-page .panel-card:hover,
.bayi-page .card:hover {
    border-color: color-mix(in srgb, var(--bp-accent) 38%, var(--bs-border-color));
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--bp-accent) 28%, transparent);
}
.bayi-page .row > *:nth-child(1) .card { animation-delay: .06s; }
.bayi-page .row > *:nth-child(2) .card { animation-delay: .12s; }
.bayi-page .row > *:nth-child(3) .card { animation-delay: .18s; }
.bayi-page .row > *:nth-child(4) .card { animation-delay: .24s; }

/* Tablo polish */
.bayi-page .table,
.bayi-page .dealer-table {
    animation: bayiFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .12s;
}
.bayi-page .table tbody tr,
.bayi-page .dealer-table tbody tr { transition: background .15s ease; }
.bayi-page .table tbody tr:hover,
.bayi-page .dealer-table tbody tr:hover {
    background: color-mix(in srgb, var(--bp-accent) 6%, var(--bg-surface));
}

/* Boş durum + Yükleniyor — fade-up + aksent ikon */
.bayi-page .d-flex.flex-column.align-items-center.justify-content-center {
    animation: bayiFadeUp .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .14s;
}
.bayi-page .spinner-border { color: var(--bp-accent) !important; }

@keyframes bayiFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bayi-page .bayi-blob,
    .bayi-page .page-header,
    .bayi-page .table,
    .bayi-page .dealer-table,
    .bayi-page .panel-card,
    .bayi-page .card,
    .bayi-page .bg-body-tertiary,
    .bayi-page .d-flex.flex-column.align-items-center.justify-content-center {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   InfoTip — Hover/focus ile açılan yardım popover'ı
   Web/Components/Shared/InfoTip.razor component'i ile birlikte kullanılır.
   ═══════════════════════════════════════════════════════════════════════ */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.55;
    cursor: help;
    position: relative;
    vertical-align: middle;
    transition: opacity 140ms ease, color 140ms ease;
}
.info-tip:hover,
.info-tip:focus-visible {
    opacity: 1;
    color: var(--accent);
    outline: none;
}
.info-tip > span:first-of-type {
    font-size: 12px !important;
    line-height: 1;
}

.info-tip__pop {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    width: 300px;
    max-width: 90vw;
    padding: 12px 14px 12px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.10);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}
[data-bs-theme="dark"] .info-tip__pop {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
}
.info-tip:hover .info-tip__pop,
.info-tip:focus-visible .info-tip__pop,
.info-tip:focus-within .info-tip__pop {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.info-tip__pop::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bg-surface);
}

.info-tip--below .info-tip__pop {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
}
.info-tip--below:hover .info-tip__pop,
.info-tip--below:focus-visible .info-tip__pop,
.info-tip--below:focus-within .info-tip__pop {
    transform: translateX(-50%) translateY(0);
}
.info-tip--below .info-tip__pop::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bg-surface);
}

.info-tip__title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-body-emphasis, var(--text-primary));
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.info-tip__body {
    color: var(--text-secondary);
}
.info-tip__body strong {
    color: var(--text-body-emphasis, var(--text-primary));
    font-weight: 600;
}
.info-tip__divider {
    height: 1px;
    margin: 8px -14px 8px -16px;
    background: linear-gradient(to right,
            transparent,
            var(--border-color) 20%,
            var(--border-color) 80%,
            transparent);
}
.info-tip__rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.info-tip__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(127, 127, 127, 0.10);
}
.info-tip__row:last-child { border-bottom: 0; }
.info-tip__row-key { color: var(--text-secondary); }
.info-tip__row-val { color: var(--text-body-emphasis, var(--text-primary)); font-weight: 500; }
.info-tip__hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    font-style: italic;
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
}

/* Stat-card içinde otomatik konum — sağ üst köşede */
.stat-card { position: relative; }
.stat-card > .info-tip {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-left: 0;
}
.stat-card > .info-tip .info-tip__pop {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
    bottom: auto;
    top: calc(100% + 10px);
}
.stat-card > .info-tip:hover .info-tip__pop,
.stat-card > .info-tip:focus-visible .info-tip__pop,
.stat-card > .info-tip:focus-within .info-tip__pop {
    transform: translateX(0) translateY(0);
}
.stat-card > .info-tip .info-tip__pop::after {
    left: auto;
    right: 12px;
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bg-surface);
}

.panel-card-header .info-tip { margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
    .info-tip,
    .info-tip__pop { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Vault Modal — Yeniden kullanılabilir modal pattern (modül-bağımsız)
   ═══════════════════════════════════════════════════════════════════════ */
.vault-dialog .e-dlg-content { padding: 0 !important; }
.vault-dialog .e-dlg-header-content { display: none !important; }
.vault-dialog.e-dialog,
.vault-dialog .e-dialog {
    border-radius: 16px !important;
    border: 0 !important;
    overflow: hidden;
    box-shadow:
        0 24px 64px -16px rgba(0, 0, 0, 0.35),
        0 8px 24px -8px rgba(0, 0, 0, 0.22),
        0 0 0 1px var(--border-color);
}

.vault-modal {
    --vm-accent: #1d4ed8;
    --vm-accent-light: #2563eb;
    --vm-accent-200: #93c5fd;
    --vm-soft: rgba(37, 99, 235, 0.10);
    --vm-soft-2: rgba(37, 99, 235, 0.18);
    --vm-hero-1: #0c1d3a;
    --vm-hero-2: #1e3a8a;
    --vm-hero-3: #0b1024;
    --vm-hero-glow-1: rgba(96, 165, 250, 0.35);
    --vm-hero-glow-2: rgba(59, 130, 246, 0.18);
    --vm-hero-text-soft: #bfdbfe;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
}
.vault-modal--emerald {
    --vm-accent: #047857; --vm-accent-light: #04845e; --vm-accent-200: #6ee7b7;
    --vm-soft: rgba(5, 150, 105, 0.10); --vm-soft-2: rgba(5, 150, 105, 0.18);
    --vm-hero-1: #022c22; --vm-hero-2: #064e3b; --vm-hero-3: #052e16;
    --vm-hero-glow-1: rgba(52, 211, 153, 0.35);
    --vm-hero-glow-2: rgba(16, 185, 129, 0.18);
    --vm-hero-text-soft: #a7f3d0;
}
.vault-modal--violet {
    --vm-accent: #6d28d9; --vm-accent-light: #7c3aed; --vm-accent-200: #c4b5fd;
    --vm-soft: rgba(124, 58, 237, 0.10); --vm-soft-2: rgba(124, 58, 237, 0.18);
    --vm-hero-1: #1e1b4b; --vm-hero-2: #4c1d95; --vm-hero-3: #1a1230;
    --vm-hero-glow-1: rgba(167, 139, 250, 0.35);
    --vm-hero-glow-2: rgba(139, 92, 246, 0.18);
    --vm-hero-text-soft: #ddd6fe;
}
.vault-modal--amber {
    --vm-accent: #b45309; --vm-accent-light: #ba5809; --vm-accent-200: #fcd34d;
    --vm-soft: rgba(217, 119, 6, 0.10); --vm-soft-2: rgba(217, 119, 6, 0.18);
    --vm-hero-1: #451a03; --vm-hero-2: #78350f; --vm-hero-3: #1c0a02;
    --vm-hero-glow-1: rgba(252, 211, 77, 0.32);
    --vm-hero-glow-2: rgba(245, 158, 11, 0.18);
    --vm-hero-text-soft: #fde68a;
}
.vault-modal--rose {
    --vm-accent: #be123c; --vm-accent-light: #e11d48; --vm-accent-200: #fda4af;
    --vm-soft: rgba(225, 29, 72, 0.10); --vm-soft-2: rgba(225, 29, 72, 0.18);
    --vm-hero-1: #4c0519; --vm-hero-2: #881337; --vm-hero-3: #1f0210;
    --vm-hero-glow-1: rgba(251, 113, 133, 0.32);
    --vm-hero-glow-2: rgba(244, 63, 94, 0.18);
    --vm-hero-text-soft: #fecdd3;
}

.vault-modal__head {
    position: relative;
    padding: 20px 24px 22px;
    background:
        radial-gradient(circle at 100% 0%, var(--vm-hero-glow-1) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, var(--vm-hero-glow-2) 0%, transparent 55%),
        linear-gradient(135deg, var(--vm-hero-1) 0%, var(--vm-hero-2) 55%, var(--vm-hero-3) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.vault-modal__head::after {
    content: "";
    position: absolute;
    bottom: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vm-accent-200), transparent);
    opacity: 0.55;
}
.vault-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 0; border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.25s ease;
    z-index: 3;
    backdrop-filter: blur(4px);
}
.vault-modal__close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: rotate(90deg);
}
.vault-modal__close svg { width: 14px; height: 14px; }
.vault-modal__head-text {
    position: relative;
    max-width: calc(100% - 110px);
    z-index: 1;
}
.vault-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--vm-hero-text-soft);
    margin-bottom: 8px;
    padding: 3px 9px 3px 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.vault-modal__eyebrow-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--vm-accent-light);
    box-shadow: 0 0 0 3px var(--vm-hero-glow-2);
    animation: vaultPulse 2.4s ease-in-out infinite;
}
@keyframes vaultPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--vm-hero-glow-2); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.06); }
}
.vault-modal__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}
.vault-modal__subtitle {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}
.vault-modal__seal {
    position: absolute;
    top: 50%; right: 24px;
    transform: translateY(-50%);
    width: 78px; height: 78px;
    z-index: 1;
}
.vault-modal__seal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed var(--vm-accent-200);
    opacity: 0.45;
    animation: vaultRotate 22s linear infinite;
}
.vault-modal__seal-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1px solid var(--vm-accent-200);
    opacity: 0.22;
}
.vault-modal__seal-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--vm-accent-200);
    filter: drop-shadow(0 0 12px var(--vm-hero-glow-1));
}
.vault-modal__seal-icon svg { width: 26px; height: 26px; }
@keyframes vaultRotate { to { transform: rotate(360deg); } }

.vault-modal__body {
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-surface);
}

.vault-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    opacity: 0;
    transform: translateY(6px);
    animation: vaultFieldIn 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
@keyframes vaultFieldIn { to { opacity: 1; transform: translateY(0); } }

.vault-field__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--text-secondary);
}
.vault-field__req {
    color: var(--vm-accent);
    font-size: 9px;
    letter-spacing: 0.02em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--vm-soft);
    line-height: 1;
    text-transform: uppercase;
}
.vault-field__opt {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}
.vault-field__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
/*.vault-grid > .vault-field { grid-column: span 12; }*/
.vault-grid > .vault-field.col-6 { grid-column: span 6; }
.vault-grid > .vault-field.col-4 { grid-column: span 4; }
.vault-grid > .vault-field.col-8 { grid-column: span 8; }
@media (max-width: 640px) {
    .vault-grid > .vault-field.col-6,
    .vault-grid > .vault-field.col-4,
    .vault-grid > .vault-field.col-8 { grid-column: span 12; }
}

.vault-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: var(--vm-soft);
    color: var(--vm-accent);
    border-radius: 6px;
    font-family: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--vm-soft-2);
}
.vault-chip svg { width: 11px; height: 11px; }

.vault-amount {
    position: relative;
    padding: 14px 18px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, var(--vm-soft) 0%, transparent 60%),
        var(--bg-hover);
    border: 1px solid var(--border-color);
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    animation: vaultFieldIn 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.vault-amount::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vm-accent), transparent 70%);
}
.vault-amount__label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.vault-amount__hint {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vault-amount__hint svg { width: 12px; height: 12px; }

.vault-segment {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    gap: 2px;
    width: 100%;
}
.vault-segment__opt {
    flex: 1;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.vault-segment__opt svg { width: 13px; height: 13px; }
.vault-segment__opt:hover { color: var(--text-primary); }
.vault-segment__opt.is-active {
    background: var(--bg-surface);
    color: var(--vm-accent);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 0 0 1px var(--vm-soft-2);
}

.vault-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-left-width: 3px;
    border-radius: 9px;
    color: #b91c1c;
    font-size: 12.5px;
    line-height: 1.45;
}
[data-bs-theme="dark"] .vault-alert {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.34);
    color: #fca5a5;
}
.vault-alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

.vault-modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    position: relative;
}
.vault-modal__foot::before {
    content: "";
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}
.vault-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.18s ease, color 0.18s ease;
    font-family: inherit;
    letter-spacing: -0.005em;
}
.vault-btn svg { width: 14px; height: 14px; }
.vault-btn--ghost { background: transparent; color: var(--text-secondary); }
.vault-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.vault-btn--primary {
    background: linear-gradient(135deg, var(--vm-accent) 0%, var(--vm-accent-light) 100%);
    color: var(--vm-btn-ink, #fff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 6px 18px -6px var(--vm-soft-2),
        0 2px 6px -2px var(--vm-soft);
}
.vault-btn--primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.vault-btn--primary:active { transform: translateY(0); }
.vault-btn--primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; filter: none; }

.vault-modal__body .e-input-group,
.vault-modal__body .e-control-wrapper {
    border-radius: 8px !important;
    transition: border-color 0.18s ease, box-shadow 0.2s ease !important;
}
.vault-modal__body .e-input-group.e-input-focus,
.vault-modal__body .e-control-wrapper.e-input-focus {
    border-color: var(--vm-accent) !important;
    box-shadow: 0 0 0 3px var(--vm-soft) !important;
}

@media (prefers-reduced-motion: reduce) {
    .vault-field,
    .vault-amount,
    .vault-modal__eyebrow-dot,
    .vault-modal__seal-ring {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Vault sayfa KPI kartları — VaultInfoTooltip taşması için overflow visible ──
   KPI sayfa başlıklarında glassmorphic gradient overlay var,
   tooltip popover'ları KPI dışına taşması için overflow:hidden kaldırılır.
   Shimmer/gradient yine border-radius ile yuvarlanmış görünür. */
.lot-kpi, .cyc-kpi, .pt-kpi, .pa-kpi, .rp-kpi,
.wv-kpi, .sc-kpi, .wh-kpi, .ws-kpi, .tx-kpi {
    overflow: visible !important;
}
.lot-kpi-row, .cyc-kpi-row, .pt-kpi-row, .pa-kpi-row, .rp-kpi-row,
.wv-kpi-row, .sc-kpi-row, .wh-kpi-row, .ws-kpi-row, .tx-kpi-row {
    overflow: visible;
    /* z-index VERME — yardım paneli backdrop (z:2040) her şeyin üstünde kalmalı */
}

/* Sayfa aurora gradient'i için isolation kaldır — backdrop'ı izole etmesin.
   KRİTİK: Sayfa kök wrapper'ı (page-fill + XXX-page) `isolation: isolate` ile
   yeni stacking context yaratırsa, HelpButton'ın fixed yardım paneli
   (z-index:1050) bu context içine hapsolur ve global topbar'ın (z-index:1030)
   ALTINDA kalır → panel başlığı + Daralt/Kapat butonları görünmez/tıklanamaz.
   Aurora zaten `position:relative` ile bu kutuya sınırlı; izolasyona gerek yok.
   Bu nedenle stacking context yaratan tüm sayfa kökleri burada `auto`'ya çekilir
   (inline <style>'daki kuralı `!important` yener; app.css'teki .detail/.bayi/.tdr
   tanımlarını cascade sırası yener). */
.lot-page, .cyc-page, .pt-page, .pa-page, .rp-page,
.wv-page, .sc-page, .wh-page, .ws-page, .tx-page,
.lotd-page, .scd-page, .ptd-page, .pad-page, .rpd-page, .wvd-page,
.whstock-page,
/* Akü Yönetimi */
.aku-page, .aku-pending-page, .aku-list-page, .aku-loan-page, .aku-settings-page,
/* Hurda */
.hurda-page, .ubs-page, .scrap-settings-page,
/* Çek-Senet / Gelir-Gider (tekrarlayan ödemeler) */
.cek-senet-page, .gelir-gider-page,
/* Kart/Kasa detay · Bayiler · Tedarikçi paneli */
.detail-page, .bayi-page, .tdr-page {
    isolation: auto !important;
}

/* Tooltip popover sadece kendi z-index'i ile çıkar — KPI parent'ı yükseltme.
   HelpButton paneli z=2050, backdrop z=2040 → tooltip 1500 ALTINDA. */
.vault-info { position: relative; }
.vault-info .vault-tip { z-index: 1500; }

/* Tooltip için grid'i altta tut (SfGrid kendi içeriği için z-index üretirse karşı koymak için) */
.lot-grid-wrap, .cyc-grid-wrap, .pt-grid-wrap, .pa-grid-wrap, .rp-grid-wrap,
.wv-grid-wrap, .sc-grid-wrap, .wh-grid-wrap, .ws-grid-wrap, .tx-grid-wrap {
    position: relative;
    z-index: 0;
}

/* ── CRM lead durum chip'i — global palet (LeadListPage + LeadDetailModal ortak) ── */
.lead-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.lead-status-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.lead-status-chip--new { background: rgba(59, 130, 246, 0.14); color: #3B82F6; }
.lead-status-chip--new .lead-status-chip__dot { background: #3B82F6; }
.lead-status-chip--contacted { background: rgba(139, 92, 246, 0.14); color: #8B5CF6; }
.lead-status-chip--contacted .lead-status-chip__dot { background: #8B5CF6; }
.lead-status-chip--qualified { background: rgba(16, 185, 129, 0.14); color: #10B981; }
.lead-status-chip--qualified .lead-status-chip__dot { background: #10B981; }
.lead-status-chip--unqualified { background: rgba(100, 116, 139, 0.14); color: var(--text-secondary); }
.lead-status-chip--unqualified .lead-status-chip__dot { background: var(--text-secondary); }
.lead-status-chip--converted { background: rgba(245, 158, 11, 0.14); color: #D97706; }
.lead-status-chip--converted .lead-status-chip__dot { background: #D97706; }

/* Ziyaret türü rozeti — global palet (Saha Satış ziyaret modali + listesi).
   Renkler semantik (satış/tahsilat/demo/şikayet/genel); modalde hardcode hex yazılmaz. */
.visit-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.visit-type-chip svg { width: 12px; height: 12px; }
.visit-type-chip.visit-type-sales { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.visit-type-chip.visit-type-collection { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.visit-type-chip.visit-type-demo { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.visit-type-chip.visit-type-complaint { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.visit-type-chip.visit-type-general { background: rgba(100, 116, 139, 0.12); color: var(--text-secondary); }

/* ─── Harita pin isaretcileri (Leaflet divIcon — bayiMap.setMarkers) ─── */
.bs-map-pin-wrap { background: transparent; border: none; }
.bs-map-pin {
    width: 20px;
    height: 28px;
    position: relative;
}
.bs-map-pin::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    transform: rotate(-45deg);
}
.bs-map-pin::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.bs-map-pin--blue::before { background: #3b82f6; }
.bs-map-pin--green::before { background: #22c55e; }
.bs-map-pin--red::before { background: #ef4444; }
.bs-map-pin--yellow::before { background: #eab308; }
.bs-map-pin--gray::before { background: #6b7280; }
.bs-map-pin--violet::before { background: #8b5cf6; }
.bs-map-pin--indigo::before { background: #6366f1; }
.bs-map-pin--truck::before { background: #0ea5e9; }

/* ─── Canlı takip: pin üzerindeki kalıcı ad etiketi ───────────────────────────
   Leaflet tooltip'i harita panosuna eklenir, Blazor bilesenlerinin kapsamli CSS'i
   ona ulasmaz; bu yuzden kural global stil dosyasinda durur.
   PLAKA: pin'in ustunde AD + ince ayrac + "ne kadar oldu" okumasi durur. Tazelik yalnizca
   renkle (yesil/gri) anlatilirsa renk koru bir yonetici icin bilgi kaybolur ve "biraz
   gecikmis" ile "yarim saattir susuyor" ayirt edilemez; sure okumasi ikisini de cozer.

   BAYATTA VURGU YER DEGISTIRIR: ad geri cekilir, sure one cikar. O anda operasyonel olarak
   onemli olan kisinin kim oldugu degil, ne kadardir ses vermedigidir.

   Zemin uygulamanin kendi belirtecleriyle kurulur; boylece koyu tema kendiliginde doner ve
   harita, uygulamanin geri kalaniyla ayni malzemeden gorunur. */
.leaflet-tooltip.live-pin-label {
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .16), 0 4px 10px rgba(15, 23, 42, .10);
    padding: 2px var(--sp-2);
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease-out;
}

/* Plakalar yalnizca yeterince yakinlasilinca acilir (bkz. LIVE_LABEL_MIN_ZOOM):
   ulke olceginde on bes plaka ust uste biner, o olcekte anlamli olan noktalarin dagilimidir. */
.leaflet-container.live-labels-on .leaflet-tooltip.live-pin-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .leaflet-tooltip.live-pin-label { transition: none; }
}

/* Leaflet'in varsayilan ucgen ucu kaldirilir. Baglayici bir centik de DENENMEDI: plaka zaten
   kendi pin'inin 6px ustunde duruyor ve plakalar ancak yakin olcekte aciliyor, dolayisiyla
   hangi plakanin hangi pin'e ait oldugu belirsiz degil. Centik bilgi tasimayan bir sustu. */
.leaflet-tooltip.live-pin-label::before { display: none; }

.live-pin-label__text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}

.live-pin__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.live-pin__sep {
    width: 1px;
    height: 10px;
    background: var(--border-color);
}

/* Sure okumasi: rakamlar sabit genislikte, sayac ilerlerken plaka titremesin. */
.live-pin__age {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Bayat: ad geri cekilir, sure one cikar ve dikkat rengine doner. */
.live-pin-label__text.is-stale .live-pin__name {
    font-weight: 500;
    color: var(--text-secondary);
}

.live-pin-label__text.is-stale .live-pin__age {
    color: #B45309;
}

[data-bs-theme="dark"] .live-pin-label__text.is-stale .live-pin__age { color: #F0B429; }