/* HUB Platform - Ana CSS Dosyası */
/* THEME_CONFIG.md'deki tüm tasarım token'ları CSS değişkeni olarak tanımlanmıştır. */
/* Sabit renk kodu kullanılmaz, her yerde var() kullanılır. */

/* ─── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Dark Mode (Varsayılan) ────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Topbar blur arka planı */
    --topbar-bg: rgba(10, 11, 18, 0.92);

    /* Marka renkleri — dark mod için açık mavi tonları */
    --brand-primary:       #60A5FA;
    --brand-primary-hover: #3B82F6;
    --brand-primary-light: #93C5FD;
    --brand-primary-dark:  #2563EB;
    --brand-primary-50:    #EFF6FF;
    --brand-primary-900:   #1E3A5F;

    /* Durum renkleri */
    --color-success:       #10B981;
    --color-success-light: #D1FAE5;
    --color-warning:       #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-danger:        #EF4444;
    --color-danger-light:  #FEE2E2;
    --color-info:          #6366F1;
    --color-info-light:    #E0E7FF;

    /* Severity renkleri */
    --severity-low:      #10B981;
    --severity-medium:   #F59E0B;
    --severity-high:     #F97316;
    --severity-critical: #EF4444;

    /* Arka plan — nötr gri-siyah tonları */
    --bg-primary:   #1C1C1C;
    --bg-secondary: #222222;
    --bg-tertiary:  #282828;
    --bg-sidebar:   #181818;
    --bg-hover:     #303030;
    --bg-active:    #363636;

    /* Kenarlık */
    --border-primary:   #272B3D;
    --border-secondary: #303550;
    --border-focus:     #60A5FA;

    /* Metin */
    --text-primary:   #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary:  #94A3B8;
    --text-muted:     #64748B;
    --text-inverse:   #0B1120;

    /* Gölgeler */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.6);
}

/* ─── Light Mode ────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Topbar blur arka planı */
    --topbar-bg: rgba(255, 255, 255, 0.88);

    --bg-primary:   #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary:  #F1F5F9;
    --bg-sidebar:   #FFFFFF;
    --bg-hover:     #F1F5F9;
    --bg-active:    #EFF6FF;

    --border-primary:   #E2E8F0;
    --border-secondary: #CBD5E1;
    --border-focus:     #3B82F6;

    /* Light modda okunabilir metin renkleri */
    --text-primary:   #0F172A;
    --text-secondary: #334155;
    --text-tertiary:  #475569;
    --text-muted:     #64748B;
    --text-inverse:   #FFFFFF;

    /* Light modda marka renk tonu */
    --brand-primary-light: #1D4ED8;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

/* ─── Tipografi ─────────────────────────────────────────────────────────────── */
:root {
    --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Boşluklar */
    --space-1:   0.25rem;
    --space-1-5: 0.375rem;
    --space-2:   0.5rem;
    --space-2-5: 0.625rem;
    --space-3:   0.75rem;
    --space-3-5: 0.875rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;

    /* Border */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;
    --border-width: 1px;

    /* Sidebar */
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 72px;
    --sidebar-transition:      0.2s ease;

    /* Animasyonlar */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;
}

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

html {
    font-size: 16px;
    overflow-x: hidden;  /* yatay taşmayı kökten engelle */
}

body {
    font-family: var(--font-family);
    background:  var(--bg-primary);
    color:       var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;  /* yatay scroll çubuğunu engelle */
    max-width:   100vw;
    margin:      0;
    padding:     0;
    transition:  background var(--transition-normal), color var(--transition-normal);
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); }

/* ─── Layout: Sidebar + İçerik ─────────────────────────────────────────────── */
.hub-layout {
    display: flex;
    min-height: 100vh;
}

.hub-sidebar {
    width:      var(--sidebar-width);
    min-height: 100vh;
    background: var(--bg-sidebar);
    border-right: var(--border-width) solid var(--border-primary);
    display:    flex;
    flex-direction: column;
    position:   fixed;
    top:        0;
    left:       0;
    bottom:     0;
    z-index:    100;
    transition: width var(--sidebar-transition);
    overflow:   hidden;
}

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

.hub-content {
    flex:        1;
    margin-left: var(--sidebar-width);
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
    transition:  margin-left var(--sidebar-transition);
}

.hub-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }

/* ─── Sidebar İçeriği ───────────────────────────────────────────────────────── */
.sidebar-header {
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sidebar-brand {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-brand span {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--brand-primary-light);
    font-weight: var(--font-weight-medium);
}

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

.nav-section {
    margin-bottom: var(--space-1);
}

.nav-section + .nav-section {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-width) solid var(--border-primary);
}

.nav-section-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-3) var(--space-4) var(--space-1);
    white-space: nowrap;
    overflow: hidden;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border-radius: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    position: relative;
}

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

.nav-item.active {
    background: var(--bg-active);
    color: var(--brand-primary);
    border-left: 2px solid var(--brand-primary);
}

.nav-item .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item .nav-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

.sidebar-footer {
    border-top: var(--border-width) solid var(--border-primary);
    padding: var(--space-3) 0;
}

/* ─── Topbar ────────────────────────────────────────────────────────────────── */
.hub-topbar {
    height: 64px;
    background: var(--bg-secondary);
    border-bottom: var(--border-width) solid var(--border-primary);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    flex: 1;
}

/* ─── Kart ──────────────────────────────────────────────────────────────────── */
.card {
    background:    var(--bg-secondary);
    border:        var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-md);
    padding:       var(--space-5);
}

/* ─── Butonlar ──────────────────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    cursor:        pointer;
    border:        none;
    transition:    background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--brand-primary-hover); color: #fff; }

.btn-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: var(--border-width) solid var(--brand-primary);
}
.btn-secondary:hover { background: var(--bg-hover); }

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

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover { opacity: 0.9; }

.btn-full { width: 100%; justify-content: center; }

.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); }

/* ─── Input ─────────────────────────────────────────────────────────────────── */
.form-input {
    width:         100%;
    background:    var(--bg-tertiary);
    border:        var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-md);
    color:         var(--text-primary);
    font-size:     var(--font-size-base);
    font-family:   var(--font-family);
    padding:       var(--space-3) var(--space-4);
    outline:       none;
    transition:    border-color var(--transition-fast);
}

.form-input::placeholder { color: var(--text-tertiary); }

.form-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.form-label {
    display:       block;
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--text-secondary);
    margin-bottom: var(--space-2);
}

.form-group { margin-bottom: var(--space-5); }

/* ─── Badge / Severity ──────────────────────────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
}

.badge-low      { background: rgba(16,185,129,0.15); color: var(--severity-low); }
.badge-medium   { background: rgba(245,158,11,0.15); color: var(--severity-medium); }
.badge-high     { background: rgba(249,115,22,0.15); color: var(--severity-high); }
.badge-critical { background: rgba(239,68,68,0.15);  color: var(--severity-critical); }

/* ─── Alert ─────────────────────────────────────────────────────────────────── */
.alert {
    padding:       var(--space-4);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.alert-error   { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3);   color: #FCA5A5; }
.alert-success { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3);  color: #6EE7B7; }
.alert-info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3);  color: #93C5FD; }
.alert-warning { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.3);  color: #FCD34D; }

/* ─── Separator ─────────────────────────────────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hub-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .hub-sidebar.mobile-open {
        transform: translateX(0);
    }

    .hub-content {
        margin-left: 0 !important;
    }
}

/* ─── Yükleniyor ────────────────────────────────────────────────────────────── */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-secondary);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Auth Layout ────────────────────────────────────────────────────────────── */
.auth-body {
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0.5rem 0 0.25rem;
}

.auth-logo-sub {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

.btn-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-oauth:hover {
    background: var(--bg-hover);
    border-color: var(--border-focus);
}

.auth-code-info {
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: 1.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.code-input-wrapper {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin: 1rem 0;
}

.code-digit {
    width: 32px;
    height: 44px;
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-align: center;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-mono);
}

.code-digit:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-error {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    margin-top: var(--space-2);
}

.form-input.is-invalid {
    border-color: var(--color-danger);
}

.auth-link {
    color: var(--brand-primary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-link:hover { color: var(--brand-primary-hover); text-decoration: underline; }

.auth-footer {
    margin-top: 2rem;
    text-align: center;
    border-top: var(--border-width) solid var(--border-primary);
    padding-top: 1.25rem;
}

.auth-footer p {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ─── App Layout ─────────────────────────────────────────────────────────────── */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
}

.main-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--sidebar-transition);
    display: flex;
    flex-direction: column;
}

.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

.page-content {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
}

/* ─── Sidebar (yeni) ─────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: var(--border-width) solid var(--border-primary);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    transition: width var(--sidebar-transition), transform var(--sidebar-transition);
    overflow: hidden;
}

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

.sidebar.collapsed .sidebar-nav-label,
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-nav-badge,
.sidebar.collapsed .sidebar-nav-soon,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-collapse-btn span { display: none; }

.sidebar.collapsed .sidebar-logo { justify-content: center; }
.sidebar.collapsed .sidebar-nav-item { justify-content: center; padding: var(--space-3); }
.sidebar.collapsed .sidebar-footer-btn { justify-content: center; }
.sidebar.collapsed .sidebar-user { justify-content: center; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-primary);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow: hidden;
}

.sidebar-logo-icon { font-size: 1.5rem; flex-shrink: 0; }

.sidebar-logo-text { overflow: hidden; }

.sidebar-logo-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
}

.sidebar-logo-sub {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--brand-primary-light);
    font-weight: var(--font-weight-medium);
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.sidebar-collapse-btn:hover { color: var(--text-primary); }

/* Daraltılmış sidebar'da chevron ters döner → genişlet yönünü gösterir */
.sidebar.collapsed .sidebar-collapse-btn {
    transform: rotate(180deg);
}

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

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

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

.sidebar-nav-item.active {
    background: var(--bg-hover);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
}

.sidebar-nav-item.coming-soon { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.sidebar-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-1) var(--space-4);
}

.sidebar-nav-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }

.sidebar-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.sidebar-nav-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

.sidebar-nav-soon {
    font-size: 10px;
    color: var(--color-warning);
    background: rgba(245,158,11,0.1);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.sidebar-footer {
    border-top: var(--border-width) solid var(--border-primary);
    padding: var(--space-2) 0;
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-primary);
    margin-bottom: var(--space-2);
    overflow: hidden;
}

.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-user-avatar-placeholder {
    background: var(--brand-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.sidebar-user-info { overflow: hidden; }

.sidebar-user-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-plan {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

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

.sidebar-logout:hover { color: var(--color-danger) !important; }

/* ─── Sidebar Footer: Kompakt ikon butonlar ──────────────────────────────── */
.sidebar-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-primary);
}

.sidebar-footer-action {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-footer-action:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-footer-action.sidebar-logout:hover { color: var(--color-danger) !important; }

/* Daraltılmış sidebar → ikon butonları ortaya al */
.sidebar.collapsed .sidebar-footer-actions { justify-content: center; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
}

.sidebar-overlay.active { display: block; }

/* ─── Topbar (yeni) ──────────────────────────────────────────────────────────── */
.topbar {
    height: 64px;
    background: var(--topbar-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: var(--border-width) solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
}

.topbar-hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.topbar-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
}

.topbar-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast);
}

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

.topbar-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-danger);
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    padding: 0 4px;
    border-radius: var(--radius-full);
    min-width: 16px;
    text-align: center;
    line-height: 16px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    user-select: none;
}

.topbar-user:hover { background: var(--bg-hover); }

.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.topbar-avatar-placeholder {
    background: var(--brand-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.topbar-user-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* ─── Dropdown ───────────────────────────────────────────────────────────────── */
.dropdown-menu {
    display: none;
    position: absolute;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    overflow: hidden;
}

.dropdown-menu.open { display: block; }

.dropdown-item {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

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

.dropdown-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-1) 0;
}

/* ─── Dashboard: İstatistik Kartları ─────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stat-card-icon { font-size: 1.1rem; }

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.stat-card-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.stat-card-sub { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.stat-card-link {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

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

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

/* ─── Kart (genişletilmiş) ───────────────────────────────────────────────────── */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--border-primary);
}

.card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.card-header-link {
    font-size: var(--font-size-xs);
    color: var(--brand-primary);
    text-decoration: none;
}

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

.card-body { /* içerik alanı, boş */ }

/* ─── Boş Durum ──────────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    gap: var(--space-3);
}

.empty-state-icon { font-size: 2.5rem; opacity: 0.4; }

.empty-state-text {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin: 0;
    text-align: center;
}

/* ─── Bildirim Listesi ───────────────────────────────────────────────────────── */
.notification-list { display: flex; flex-direction: column; }

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border-primary);
    position: relative;
}

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

.notification-item.unread { background: transparent; }

.notification-icon { font-size: 1.2rem; flex-shrink: 0; padding-top: 2px; }

.notification-content { flex: 1; min-width: 0; }

.notification-title {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-medium);
}

.notification-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin: 0;
}

.notification-dot {
    width: 8px;
    height: 8px;
    background: var(--brand-primary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ─── Badge (ek renkler) ─────────────────────────────────────────────────────── */
.badge-success { background: rgba(16,185,129,0.15); color: var(--color-success); }
.badge-info    { background: rgba(99,102,241,0.15);  color: var(--color-info); }
.badge-warning { background: rgba(245,158,11,0.15);  color: var(--color-warning); }
.badge-danger  { background: rgba(239,68,68,0.15);   color: var(--color-danger); }

/* ─── Alert (ek) ─────────────────────────────────────────────────────────────── */
.alert-danger { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #FCA5A5; }

.alert-link { color: inherit; font-weight: var(--font-weight-semibold); text-decoration: underline; }

/* ─── Yardımcı ───────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Onboarding Wizard (ob-*) ──────────────────────────────────────────────── */

/* Arka plan */
.ob-bg {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: var(--bg-primary);
}

/* Marka şeridi (kart üstünde) */
.ob-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.ob-brand-icon {
    width: 26px;
    height: 26px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ob-brand-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.ob-brand-sep { color: var(--text-muted); font-size: var(--font-size-sm); }

.ob-brand-hub {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
}

/* Ana kart */
.ob-card {
    width: 100%;
    max-width: 500px;
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Kart üst aksan çizgisi */
.ob-card-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary), var(--brand-primary-light));
}

.ob-card-body {
    padding: var(--space-8);
}

/* ─── Step Indicator ─────────────────────────────────────────── */
.ob-stepper {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-8);
}

/* Adım dairesi */
.ob-s {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-secondary);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.ob-s .ob-s-check { display: none; font-size: 0.7rem; }

/* Mevcut adım */
.ob-s-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
}

/* Tamamlanan adım */
.ob-s-done {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.35);
    color: var(--color-success);
}

.ob-s-done .ob-s-num   { display: none; }
.ob-s-done .ob-s-check { display: flex; align-items: center; }

/* Bağlayıcı çizgi */
.ob-sep {
    flex: 1;
    height: 1.5px;
    background: var(--border-primary);
    transition: background var(--transition-normal);
}

.ob-sep-done { background: var(--brand-primary); }

/* ─── Adım içeriği ───────────────────────────────────────────── */
.ob-content { animation: ob-fade-in 0.22s ease; }

@keyframes ob-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ana ikon dairesi */
.ob-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.ob-icon-circle {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-icon-blue  { background: rgba(96,165,250,0.12); color: var(--brand-primary); }
.ob-icon-green { background: rgba(16,185,129,0.12); color: var(--color-success); }

/* Başlık ve açıklama */
.ob-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}

.ob-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.75;
    margin: 0 0 var(--space-6);
}

/* ─── Özellik listesi (Tur adımı) ───────────────────────────── */
.ob-features {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ob-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.ob-feature:hover { border-color: var(--border-secondary); }

.ob-feat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ob-feat-i-blue   { background: rgba(96,165,250,0.12); color: var(--brand-primary); }
.ob-feat-i-violet { background: rgba(99,102,241,0.12); color: var(--color-info); }
.ob-feat-i-amber  { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.ob-feat-i-green  { background: rgba(16,185,129,0.12); color: var(--color-success); }
.ob-feat-i-gray   { background: var(--bg-hover);       color: var(--text-secondary); }

.ob-feat-body { flex: 1; min-width: 0; }

.ob-feat-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ob-feat-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Adım 3: Bilgi adımları ────────────────────────────────── */
.ob-info-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ob-info-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.ob-info-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ob-info-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Eylemler ───────────────────────────────────────────────── */
.ob-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ob-actions form { width: 100%; }

.ob-skip-btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    padding: var(--space-2) 0;
    text-align: center;
    transition: color var(--transition-fast);
}

.ob-skip-btn:hover { color: var(--text-secondary); }

/* ─── Tamamlanma badge ───────────────────────────────────────── */
.ob-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(16,185,129,0.1);
    color: var(--color-success);
    border: var(--border-width) solid rgba(16,185,129,0.25);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* ─── İsim input ─────────────────────────────────────────────── */
.ob-name-input-wrap {
    margin: var(--space-5) 0;
}
.ob-name-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-align: center;
}
.ob-name-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.ob-name-input::placeholder { color: var(--text-muted); }
.ob-name-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: var(--space-2);
    min-height: 1.25rem;
}

/* ─── Canlı tur overlay ──────────────────────────────────────── */
.ob-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    animation: ob-fade-in 0.3s ease;
}
.ob-tour-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 860px;
    margin-bottom: var(--space-5);
}
.ob-tour-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.ob-tour-close-btn {
    background: rgba(255,255,255,0.08);
    border: var(--border-width) solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.ob-tour-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-primary); }

/* tur içerik alanı */
.ob-tour-body {
    width: 100%;
    max-width: 860px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    align-items: center;
}
.ob-tour-mockup {
    background: var(--bg-card);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    min-height: 320px;
    position: relative;
}
.ob-tour-mockup-bar {
    background: var(--bg-secondary);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ob-tm-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.ob-tm-dot-r { background: #ff5f57; }
.ob-tm-dot-y { background: #febc2e; }
.ob-tm-dot-g { background: #28c840; }
.ob-tm-url {
    flex: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    height: 20px;
    margin-left: var(--space-2);
}
.ob-tour-mockup-content {
    padding: var(--space-5);
}

/* Dashboard mockup */
.ob-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ob-mock-stat {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.ob-mock-stat-val {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.ob-mock-stat-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ob-mock-chart {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    height: 80px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow: hidden;
}
.ob-mock-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(59,130,246,0.3);
    transition: height 0.3s ease;
}
.ob-mock-bar.active { background: var(--brand-primary); }

/* Bildirimler mockup */
.ob-mock-notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-mock-notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.ob-mock-notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.ob-mock-notif-dot.red  { background: var(--color-danger); }
.ob-mock-notif-dot.amber { background: var(--color-warning); }
.ob-mock-notif-dot.green { background: var(--color-success); }
.ob-mock-notif-line {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    margin-bottom: 4px;
}
.ob-mock-notif-line.wide  { width: 80%; }
.ob-mock-notif-line.narrow { width: 50%; }
.ob-mock-badge {
    margin-left: auto;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: rgba(239,68,68,0.15);
    color: var(--color-danger);
    white-space: nowrap;
}
.ob-mock-badge.amber-badge {
    background: rgba(245,158,11,0.15);
    color: var(--color-warning);
}

/* Dijital varlıklar mockup */
.ob-mock-asset-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-mock-asset-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.ob-mock-asset-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: rgba(59,130,246,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ob-mock-asset-body { flex: 1; }
.ob-mock-asset-pill {
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
}
.ob-mock-asset-pill.verified {
    background: rgba(16,185,129,0.12);
    color: var(--color-success);
}
.ob-mock-asset-pill.pending {
    background: rgba(245,158,11,0.12);
    color: var(--color-warning);
}

/* tur sağ panel */
.ob-tour-text { color: var(--text-primary); }
.ob-tour-slide-num {
    font-size: var(--font-size-xs);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}
.ob-tour-slide-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: 1.2;
}
.ob-tour-slide-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-6);
}
.ob-tour-actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* tur alt göstergesi */
.ob-tour-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    width: 100%;
    max-width: 860px;
}
.ob-tour-dots { display: flex; gap: 6px; }
.ob-tour-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.ob-tour-dot.active {
    background: var(--brand-primary);
    transform: scale(1.3);
}
.ob-tour-dot.done { background: rgba(255,255,255,0.45); }

/* ─── Onboarding asset adımı özel stiller ────────────────────── */
.ob-auto-email-box {
    background: rgba(16,185,129,0.07);
    border: var(--border-width) solid rgba(16,185,129,0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    text-align: left;
}
.ob-auto-email-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}
.ob-auto-email-val {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    word-break: break-all;
}
.ob-verify-info {
    background: rgba(59,130,246,0.06);
    border: var(--border-width) solid rgba(59,130,246,0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}
.ob-add-more-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-3);
}
.ob-asset-form-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.ob-asset-form-row input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    outline: none;
    transition: border-color var(--transition-fast);
}
.ob-asset-form-row input:focus { border-color: var(--brand-primary); }
.ob-asset-form-row input::placeholder { color: var(--text-muted); }
.ob-asset-error {
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-2);
    min-height: 1rem;
}
.ob-asset-flash-msg {
    background: rgba(16,185,129,0.1);
    border: var(--border-width) solid rgba(16,185,129,0.2);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ─── Dot Stepper (6 nokta) ──────────────────────────────────── */
.ob-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}
.ob-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-secondary);
    transition: width var(--transition-normal), background var(--transition-normal), opacity var(--transition-normal);
    flex-shrink: 0;
}
.ob-dot-active {
    width: 22px;
    background: var(--brand-primary);
}
.ob-dot-done {
    background: rgba(16,185,129,0.5);
}

/* ─── Adım 1: Dil Seçimi ─────────────────────────────────────── */
.ob-lang-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-6);
}
.ob-lang-logo {
    width: 60px;
    height: 60px;
    background: var(--brand-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 24px rgba(59,130,246,0.35);
}
/* Dönen karşılama metni */
.ob-lang-cycle-wrap {
    height: 2.4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}
.ob-lang-cycle-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-align: center;
    animation: ob-lang-fade 0.5s ease;
}
@keyframes ob-lang-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ob-lang-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}
/* Dil seçim ızgarası */
.ob-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}
.ob-lang-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    color: var(--text-primary);
    font-family: var(--font-family);
    text-align: left;
}
.ob-lang-btn:hover {
    border-color: var(--brand-primary);
    background: var(--bg-hover);
}
.ob-lang-btn.ob-lang-selected {
    border-color: var(--brand-primary);
    background: rgba(59,130,246,0.08);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.ob-lang-flag {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}
.ob-lang-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}
.ob-lang-native {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: block;
    margin-top: 1px;
}

/* ─── Adım 2: Tema Seçimi ────────────────────────────────────── */
.ob-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}
.ob-theme-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 0;
    font-family: var(--font-family);
}
.ob-theme-card:hover {
    border-color: var(--brand-primary);
}
.ob-theme-card.ob-theme-selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
/* Mini önizleme alanı */
.ob-theme-preview {
    height: 90px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
/* Koyu tema önizleme */
.ob-theme-preview-dark {
    background: #0B1120;
}
.ob-theme-preview-dark .ob-tp-sidebar {
    width: 30%;
    height: 100%;
    background: #0F172A;
    border-right: 1px solid #1F2937;
    display: flex;
    flex-direction: column;
    padding: 6px 4px;
    gap: 3px;
}
.ob-theme-preview-dark .ob-tp-item {
    height: 6px;
    border-radius: 3px;
    background: #1E293B;
}
.ob-theme-preview-dark .ob-tp-item.active {
    background: #3B82F6;
    width: 70%;
}
.ob-theme-preview-dark .ob-tp-main {
    flex: 1;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ob-theme-preview-dark .ob-tp-card {
    height: 20px;
    border-radius: 4px;
    background: #111827;
    border: 1px solid #1F2937;
}
.ob-theme-preview-dark .ob-tp-card.tall {
    height: 30px;
}
/* Açık tema önizleme */
.ob-theme-preview-light {
    background: #F8FAFC;
}
.ob-theme-preview-light .ob-tp-sidebar {
    width: 30%;
    height: 100%;
    background: #FFFFFF;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    padding: 6px 4px;
    gap: 3px;
}
.ob-theme-preview-light .ob-tp-item {
    height: 6px;
    border-radius: 3px;
    background: #F1F5F9;
}
.ob-theme-preview-light .ob-tp-item.active {
    background: #3B82F6;
    width: 70%;
}
.ob-theme-preview-light .ob-tp-main {
    flex: 1;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ob-theme-preview-light .ob-tp-card {
    height: 20px;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
}
.ob-theme-preview-light .ob-tp-card.tall {
    height: 30px;
}
/* Tema etiket alanı */
.ob-theme-label-wrap {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border-top: var(--border-width) solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ob-theme-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.ob-theme-label-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: block;
    margin-top: 1px;
    line-height: 1.3;
}
.ob-theme-check {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ob-theme-card.ob-theme-selected .ob-theme-check {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* ─── Adım 4: iframe Tur Overlay ─────────────────────────────── */
.ob-iframe-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(7,10,20,0.97);
    display: flex;
    flex-direction: column;
    animation: ob-fade-in 0.3s ease;
}
.ob-iframe-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.3);
}
.ob-iframe-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Overlay her zaman koyu — tema bağımsız */
    color: rgba(255,255,255,0.65);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.ob-iframe-logo span {
    color: var(--brand-primary-light);
    font-size: var(--font-size-xs);
}
.ob-iframe-step-ind {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.08);
}
.ob-iframe-close-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.65);
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    font-family: var(--font-family);
}
.ob-iframe-close-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #F1F5F9;
}
/* iframe alanı */
.ob-iframe-screen {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.ob-iframe-screen iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* iframe üzerine tıklamayı engelle (tur boyunca navigasyon olmasın) */
.ob-iframe-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
}
/* Alt panel */
.ob-iframe-panel {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    min-height: 90px;
}
.ob-iframe-panel-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ob-iframe-panel-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.2);
    transition: background var(--transition-fast), width var(--transition-fast);
}
.ob-iframe-panel-dot.active {
    background: var(--brand-primary);
    width: 16px;
}
.ob-iframe-panel-dot.done {
    background: rgba(16,185,129,0.6);
}
.ob-iframe-panel-text {
    flex: 1;
    min-width: 0;
}
.ob-iframe-panel-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    /* Overlay her zaman koyu arka plan — tema bağımsız açık renk */
    color: #F1F5F9;
    margin: 0 0 4px;
    line-height: 1.3;
}
.ob-iframe-panel-desc {
    font-size: var(--font-size-sm);
    /* Overlay her zaman koyu arka plan — tema bağımsız açık gri */
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    line-height: 1.55;
}
.ob-iframe-panel-actions {
    flex-shrink: 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ob-card-body      { padding: var(--space-6) var(--space-5); }
    .ob-title          { font-size: var(--font-size-xl); }
    .ob-dots           { margin-bottom: var(--space-6); }
    .ob-lang-grid      { grid-template-columns: 1fr; }
    .ob-theme-grid     { grid-template-columns: 1fr; }
    .ob-iframe-panel   { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
}
@media (max-width: 860px) {
    .ob-tour-body {
        grid-template-columns: 1fr;
        max-height: 85vh;
        overflow-y: auto;
    }
    .ob-tour-mockup { display: none; }
    .ob-tour-slide-title { font-size: var(--font-size-xl); }
}

.tour-highlight {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
    position: relative;
    z-index: 10;
}

/* ─── Mobil ──────────────────────────────────────────────────────────────────── */
.sidebar.mobile-hidden {
    transform: translateX(-100%);
}

.sidebar.mobile-open {
    transform: translateX(0);
}

@media (max-width: 1023px) {
    .main-content {
        margin-left: 0 !important;
    }

    .topbar-hamburger {
        display: flex;
    }

    .topbar-user-name {
        display: none;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-content {
        padding: var(--space-4) var(--space-3);
    }

    .topbar {
        padding: 0 var(--space-3);
    }

    .auth-card {
        padding: 1.75rem 1.25rem;
    }

    .code-digit {
        width: 28px;
        height: 38px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: var(--space-3) var(--space-3);
    }
}

/* ─── Login Split Layout ─────────────────────────────────────────────────────── */
.login-split {
    display: flex;
    min-height: 100vh;
}

.login-panel-left {
    flex: 1;
    min-width: 0;
    background: #060D1A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 4rem;
    position: relative;
    overflow: hidden;
}

/* Nokta grid dekorasyonu */
.login-panel-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(59, 130, 246, 0.13) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Sağ kenarda geçiş */
.login-panel-left::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 140px;
    background: linear-gradient(to right, transparent, #060D1A);
    pointer-events: none;
}

.login-panel-left-content {
    position: relative;
    z-index: 1;
    max-width: 540px;
}

.login-panel-right {
    width: 460px;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-left: var(--border-width) solid var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    min-height: 100vh;
    overflow-y: auto;
}

.login-panel-right-inner {
    width: 100%;
    max-width: 380px;
}

/* Özellik satırı */
.login-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.login-feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60A5FA;
    flex-shrink: 0;
    margin-top: 1px;
}

.login-feature-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #F1F5F9;
    margin-bottom: 0.2rem;
}

.login-feature-desc {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.5;
}

/* Mobil: sol panel gizlenir */
@media (max-width: 900px) {
    .login-panel-left {
        display: none;
    }
    .login-panel-right {
        width: 100%;
        border-left: none;
    }
}

/* ─── Login: HUBOne/HUBCorp Tab Seçici ──────────────────────────────────────── */
.hub-console-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 1.75rem;
}

.hub-console-tab {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: var(--font-family);
}

.hub-console-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.hub-console-tab.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.hub-console-tab-soon {
    font-size: 0.6rem;
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Login: Header gradient bölümü ─────────────────────────────────────────── */
.login-header {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(99, 102, 241, 0.04) 100%
    );
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin: -2.5rem -2rem 1.75rem;
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
    border-bottom: var(--border-width) solid var(--border-primary);
}

.login-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--brand-primary);
    border-radius: var(--radius-lg);
    color: white;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

/* ─── Coming Soon sayfası ────────────────────────────────────────────────────── */
.coming-soon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: var(--space-8);
    text-align: center;
}

.coming-soon-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    margin: 0 auto 1.5rem;
}

.coming-soon-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.coming-soon-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 2rem;
    max-width: 400px;
    line-height: 1.6;
}

/* ─── Sidebar: SVG ikon hizalaması ──────────────────────────────────────────── */
.sidebar-nav-icon svg,
.sidebar-footer-btn svg,
.sidebar-footer-action svg {
    flex-shrink: 0;
}

/* ─── Dashboard: Stat kart ikon sarmalayıcısı ────────────────────────────────── */
.stat-card-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Dashboard: Bildirim öğesi ikon sarmalayıcısı ───────────────────────────── */
.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── Dashboard: Boş durum ikon sarmalayıcısı ────────────────────────────────── */
.empty-state-icon {
    width: 52px;
    height: 52px;
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin: 0 auto 1rem;
}

/* ─── Login: Centered Card Layout ─────────────────────────────────────────── */

/* Sayfa arka planı — her zaman siyah */
.login-body {
    background: #000;
    margin: 0;
}

/* Kart merkezleyen sarmalayıcı */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* İki parçalı merkezi kart */
.login-split {
    display: flex;
    width: 100%;
    max-width: 1240px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 96px rgba(0, 0, 0, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sol panel — duvar kağıdı görseli */
.login-panel-left {
    flex: 1;
    min-width: 0;
    background-image: url('/images/intelligence_wallpaper.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* Görsel üzeri okunabilirlik için koyu gradyan */
.login-panel-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(3, 7, 20, 0.91) 0%, rgba(3, 7, 20, 0.72) 100%);
    z-index: 0;
}

.login-panel-left::after { display: none; }

/* Sol panel iç içerik */
.login-panel-left-inner {
    position: relative;
    z-index: 1;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

/* Marka / logo alanı */
.login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.login-brand-icon {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    flex-shrink: 0;
}

.login-brand-name {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}

/* Başlık */
.login-panel-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.login-panel-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 1.25rem;
    line-height: 1.65;
    max-width: 380px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Özellik maddeleri */
.login-features {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0;
}

.login-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.login-feature-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.85;
}

.login-feature-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.login-feature-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.55;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* İstatistik bloğu */
.login-stats {
    display: flex;
    gap: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.login-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.04em;
}

/* Sağ panel — her zaman koyu */
.login-panel-right {
    width: 460px;
    flex-shrink: 0;
    background: #0C1220;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.login-panel-right-inner {
    width: 100%;
    max-width: 380px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Dil seçici — sağ panel üstü */
.login-panel-lang {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2.5rem;
}

.login-panel-lang .lang-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    font-family: var(--font-family);
}

.login-panel-lang .lang-select option {
    background: #0C1220;
    color: rgba(255, 255, 255, 0.85);
}

/* Form başlık alanı */
.login-form-header {
    margin-bottom: 1.75rem;
}

.login-form-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.375rem;
}

.login-form-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* Footer */
.login-panel-right-inner .auth-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
}

/* Mobil: sol panel gizlenir, sağ panel tam genişlik */
@media (max-width: 900px) {
    .login-page {
        padding: 0;
        align-items: stretch;
    }
    .login-split {
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
        border: none;
    }
    .login-panel-left {
        display: none;
    }
    .login-panel-right {
        width: 100%;
        border-left: none;
    }
    .login-panel-right-inner {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }
}

/* ─── Legal Pages ────────────────────────────────────────────────────────── */

.legal-body {
    background: #000;
    margin: 0;
}

.legal-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 2rem 4rem;
}

.legal-card {
    width: 100%;
    max-width: 780px;
    background: #0C1220;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.legal-header {
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.legal-back {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    white-space: nowrap;
}

.legal-back:hover { color: rgba(255, 255, 255, 0.75); }

.legal-nav {
    display: flex;
    gap: 0.25rem;
}

.legal-nav-link {
    font-size: 0.8125rem;
    padding: 0.35rem 0.875rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.legal-nav-link:hover    { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.05); }
.legal-nav-link.active   { color: rgba(255, 255, 255, 0.9);  background: rgba(255, 255, 255, 0.08); }

.legal-content {
    padding: 2.5rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.8;
}

.legal-content h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}

.legal-content .legal-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.28);
    margin: 0 0 2.5rem;
}

.legal-content h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 2rem 0 0.625rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.legal-content h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content p  { margin: 0 0 0.75rem; }
.legal-content ul,
.legal-content ol { padding-left: 1.5rem; margin: 0.375rem 0 0.75rem; }
.legal-content li { margin-bottom: 0.3rem; }

.legal-content strong { color: rgba(255, 255, 255, 0.88); font-weight: 600; }
.legal-content a      { color: #60a5fa; }
.legal-content a:hover { color: #93c5fd; }

.legal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.legal-footer a {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.legal-footer a:hover { color: rgba(255, 255, 255, 0.6); }

/* Mobil */
@media (max-width: 600px) {
    .legal-page    { padding: 0; }
    .legal-card    { border-radius: 0; min-height: 100vh; border: none; }
    .legal-content { padding: 1.5rem; }
    .legal-header  { padding: 1rem 1.5rem; }
}

/* ─── Dashboard v2: Kurumsal Tasarım ─────────────────────────────────────── */

.db-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: var(--border-width) solid var(--border-primary);
    gap: 1rem;
}

.db-welcome-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.db-welcome-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.db-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

.db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.db-kpi-card {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.125rem 1rem;
    display: flex;
    flex-direction: column;
}

.db-kpi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.db-kpi-label {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-top: 0.125rem;
}

.db-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-kpi-num {
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.875rem;
    letter-spacing: -0.02em;
}

.db-kpi-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: var(--border-width) solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
}

.db-kpi-link {
    font-size: var(--font-size-xs);
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.db-kpi-link:hover { text-decoration: underline; }

.db-content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}

.db-panel {
    background: var(--bg-secondary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.db-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem;
    border-bottom: var(--border-width) solid var(--border-primary);
}

.db-panel-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.db-panel-link {
    font-size: var(--font-size-xs);
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

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

.db-activity-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-bottom: var(--border-width) solid var(--border-primary);
    transition: background var(--transition-fast);
}

.db-activity-row:last-child { border-bottom: none; }
.db-activity-row:hover { background: var(--bg-hover); }

.db-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-activity-info { flex: 1; min-width: 0; }

.db-activity-title {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.db-activity-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.db-activity-unread {
    width: 7px;
    height: 7px;
    background: var(--brand-primary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.db-info-section {
    padding: 1rem 1.125rem;
    border-bottom: var(--border-width) solid var(--border-primary);
}

.db-info-section:last-child { border-bottom: none; }

.db-info-section-label {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.625rem;
}

.db-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.db-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.db-status-dot--success { background: var(--color-success); }
.db-status-dot--warning { background: var(--color-warning); }
.db-status-dot--danger  { background: var(--color-danger); }

.db-quick-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-bottom: 0.0625rem;
}

.db-quick-link:hover { background: var(--bg-hover); color: var(--text-primary); }

@media (max-width: 1200px) {
    .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .db-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .db-welcome { flex-direction: column; align-items: flex-start; }
}

/* ─── Dashboard v3: dash-* yardımcı sınıfları ───────────────────────────── */

.dash-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-kpi-card {
    transition: border-color var(--transition-fast);
}

.dash-kpi-card:hover {
    border-color: var(--border-secondary);
}

.dash-kpi-link {
    font-size: var(--font-size-xs);
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.dash-kpi-link:hover { text-decoration: underline; }

.dash-notif-row {
    transition: background var(--transition-fast);
}

.dash-notif-row:hover { background: var(--bg-hover); }

@media (max-width: 1200px) {
    .dash-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
    .dash-kpi-row { grid-template-columns: 1fr 1fr !important; }
}

/* ─── Slim Sidebar (220px, her zaman açık, etiketli) ────────────────────── */

.sidebar-slim {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 220px;
    z-index: 200;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Logo alanı */
.slim-logo {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.slim-logo-icon {
    width: 34px;
    height: 34px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.slim-logo-text { overflow: hidden; }

.slim-logo-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.slim-logo-sub {
    display: block;
    font-size: 0.6875rem;
    color: var(--brand-primary-light);
    font-weight: 500;
}

/* Navigasyon */
.slim-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
}

.slim-nav::-webkit-scrollbar { display: none; }

.slim-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 6px 0;
}

/* Navigasyon grup etiketi */
.slim-group {
    display: block;
    padding: 0.75rem 1.25rem 0.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
    flex-shrink: 0;
}
.slim-group:first-child { padding-top: 0.25rem; }

/* Nav öğesi */
.slim-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 18px;
    height: 40px;
    border-radius: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.slim-item:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.slim-item.active {
    background: var(--bg-active);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.slim-item-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.slim-item-icon { flex-shrink: 0; display: flex; align-items: center; }

.slim-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Bildirim badge */
.slim-badge {
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* Yakında etiketi */
.slim-soon {
    font-size: 10px;
    color: var(--color-warning);
    background: rgba(245,158,11,0.1);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    margin-left: auto;
    flex-shrink: 0;
}

/* Alt alan */
.slim-footer {
    border-top: 1px solid var(--border-primary);
    padding: 8px 0 6px;
    flex-shrink: 0;
}

/* Kullanıcı satırı */
.slim-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 8px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 4px;
    overflow: hidden;
}

.slim-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.slim-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.slim-user-info { overflow: hidden; }

.slim-user-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slim-user-plan {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Eylem buton satırı */
.slim-actions-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
}

/* Eylem butonu */
.slim-action {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.slim-action:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.slim-logout:hover { color: var(--color-danger) !important; }

/* Main content boşluğu */
#main-content { margin-left: 220px !important; }

@media (max-width: 1023px) {
    .sidebar-slim {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }
    .sidebar-slim.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }
    #main-content { margin-left: 0 !important; }
}

/* ─── Dashboard v4: Aktivite Çubuk Grafiği Animasyonları ────────────────── */

/* Çubukların aşağıdan yukarı scaleY ile yükselmesi */
@keyframes dash-bar-rise {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

.dash-bar-col {
    transform-origin: bottom center;
    animation: dash-bar-rise 0.5s cubic-bezier(.22,.68,0,1.2) both;
}

/* Durum noktası nabız animasyonu */
@keyframes dash-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.dash-status-dot {
    animation: dash-pulse 2s ease-in-out infinite;
}

/* Responsive: 900px altında ana grid tek sütuna düşer */
@media (max-width: 900px) {
    .dash-main-grid { grid-template-columns: 1fr !important; }
}

/* ─── Dashboard v5: Yeni tasarım yardımcı sınıfları ─────────────────────── */

/* Hoş geldin header */
.dv5-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    flex-wrap: wrap;
}

.dv5-welcome-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.dv5-welcome-sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.dv5-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 999px;
    padding: 0.3rem 0.875rem;
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.dv5-date-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* KPI kart grid */
.dv5-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* KPI kart */
.dv5-kpi {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.dv5-kpi:hover {
    border-color: var(--border-secondary);
    transform: translateY(-1px);
}

/* Kart üst çizgi aksanı */
.dv5-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--dv5-accent, var(--brand-primary));
    opacity: 0.5;
    border-radius: 1rem 1rem 0 0;
}

.dv5-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    gap: 0.5rem;
}

.dv5-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 2px;
}

.dv5-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--dv5-icon-bg, rgba(59,130,246,0.1));
    color: var(--dv5-accent, var(--brand-primary));
}

.dv5-kpi-num {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.dv5-kpi-foot {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-primary);
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv5-kpi-link {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dv5-kpi-link:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* Ana içerik grid */
.dv5-main-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

/* Panel (kart sarmalayıcı) */
.dv5-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    overflow: hidden;
}

.dv5-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
}

.dv5-panel-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dv5-panel-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.dv5-panel-link {
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 500;
    text-decoration: none;
}

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

.dv5-panel-body { padding: 1.25rem; }

/* Çubuk grafik */
.dv5-chart-area {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 96px;
    padding-bottom: 0;
}

.dv5-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.dv5-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transform-origin: bottom center;
    animation: dv5-bar-in 0.5s cubic-bezier(.22,.68,0,1.2) both;
    position: relative;
    overflow: hidden;
}

/* Gradient fill simülasyonu */
.dv5-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.dv5-bar-label {
    font-size: 0.5625rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.01em;
}

@keyframes dv5-bar-in {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Platform istatistikleri */
.dv5-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-primary);
}

.dv5-stat-row:last-child { border-bottom: none; }

.dv5-stat-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dv5-stat-val {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Tehdit satırı */
.dv5-threat-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.dv5-threat-row:last-child { margin-bottom: 0; }

.dv5-threat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dv5-threat-dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
}

.dv5-threat-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dv5-threat-count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.dv5-progress {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.dv5-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Durum göstergesi */
.dv5-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-primary);
}

.dv5-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dash-pulse 2s ease-in-out infinite;
}

/* Bildirim satırı */
.dv5-notif-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-primary);
    transition: background var(--transition-fast);
}

.dv5-notif-row:last-child { border-bottom: none; }
.dv5-notif-row:hover { background: var(--bg-hover); }

.dv5-notif-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dv5-notif-info { flex: 1; min-width: 0; }

.dv5-notif-title {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.dv5-notif-time {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.dv5-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
    flex-shrink: 0;
}

/* Demo badge */
.dv5-demo-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
    padding: 2px 7px;
    border-radius: 4px;
}

/* Boş durum */
.dv5-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    gap: 0.75rem;
}

.dv5-empty-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.dv5-empty-text {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
    text-align: center;
}

/* ── Dashboard Hero kartı — Cyber / Blueprint tasarım ────────────────────── */
.dv5-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #1a3560 0%, #122544 55%, #0f1d38 100%);
    border: 1px solid rgba(147,197,253,0.2);
    border-top: 2px solid rgba(147,197,253,0.65);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.08),
        0 8px 40px rgba(10,20,45,0.4),
        inset 0 1px 0 rgba(147,197,253,0.15);
}

/* Çok ince cross-hatch (noktasız) */
.dv5-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

/* Köşe ışıması + yatay scan çizgileri */
.dv5-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 90% 0%, rgba(147,197,253,0.18) 0%, transparent 45%),
        repeating-linear-gradient(
            180deg,
            transparent 0px, transparent 2px,
            rgba(147,197,253,0.02) 2px, rgba(147,197,253,0.02) 3px
        );
    pointer-events: none;
    z-index: 0;
}

/* Canvas animasyonu — içerik altında kalacak */
.dv5-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Canvas ve cyber-img hariç içerik elemanları öne */
.dv5-hero > *:not(.dv5-hero-canvas):not(.dv5-hero-cyber-img) { position: relative; z-index: 2; }

/* Sağ arkaplan cyber görseli — card boyutunda, sağa yaslanmış */
.dv5-hero-cyber-img {
    position: absolute !important;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-height: 100%;
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 50%);
}

@media (max-width: 640px) {
    .dv5-hero-cyber-img { display: none; }
}

.dv5-hero-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.dv5-hero-icon-wrap {
    width: 40px;
    height: 40px;
    background: rgba(147,197,253,0.12);
    border: 1px solid rgba(147,197,253,0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DD3FC;
    flex-shrink: 0;
}

.dv5-hero-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #E2E8F0;
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}

.dv5-hero-desc {
    font-size: 0.8125rem;
    color: #7EA8C9;
    margin: 0;
}

.dv5-hero-link {
    margin-left: auto;
    font-size: 0.8125rem;
    color: #7DD3FC;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.dv5-hero-link:hover { color: #BAE6FD; text-decoration: underline; }

.dv5-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-top: 1.125rem;
    border-top: 1px solid rgba(147,197,253,0.16);
}

.dv5-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dv5-hero-stat-val {
    font-size: 1.875rem;
    font-weight: 700;
    color: #BAE6FD;
    letter-spacing: -0.04em;
    line-height: 1;
}

.dv5-hero-stat-sub {
    font-size: 0.6875rem;
    color: #93C5FD;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-top: 0.1rem;
}

.dv5-hero-stat-val--live {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6EE7B7;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dv5-hero-stat-lbl {
    font-size: 0.625rem;
    color: #4E7A9E;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.25rem;
}

/* ── Dashboard Trio (3 tıklanabilir kart) ────────────────────────────────── */
.dv5-trio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dv5-trio-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dv5-trio-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--trio-accent, var(--brand-primary));
    opacity: 0.55;
    border-radius: 1rem 1rem 0 0;
}

.dv5-trio-card:hover {
    border-color: var(--border-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dv5-trio-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.dv5-trio-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--trio-icon-bg, rgba(59,130,246,0.1));
    color: var(--trio-accent, var(--brand-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dv5-trio-arrow {
    font-size: 1rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
    line-height: 1;
    padding-top: 2px;
}

.dv5-trio-card:hover .dv5-trio-arrow {
    transform: translateX(3px);
    color: var(--trio-accent, var(--brand-primary));
}

.dv5-trio-num {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.2rem;
}

.dv5-trio-denom {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.dv5-trio-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.dv5-trio-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 1200px) {
    .dv5-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .dv5-main-grid  { grid-template-columns: 1fr !important; }
    .dv5-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .dv5-trio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dv5-kpi-grid   { grid-template-columns: 1fr 1fr; }
    .dv5-welcome    { flex-direction: column; align-items: flex-start; }
    .dv5-hero-head  { flex-wrap: wrap; }
    .dv5-hero-link  { margin-left: 0; }
    .dv5-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Dijital Varlıklar Sayfası (asset-*)
   ========================================================================== */

/* Limit badge (başlık yanındaki "1/3 varlık") */
.asset-limit-badge {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    padding: 3px 10px;
}

/* Sayfa tanıtım metni */
.asset-intro {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

/* Ekleme formu */
.asset-add-form { display: flex; flex-direction: column; gap: 0.5rem; }

.asset-form-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.asset-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.asset-input-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.asset-input {
    width: 100%;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 9px;
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 0 12px 0 36px;
    outline: none;
    transition: border-color 0.15s;
}
.asset-input:focus { border-color: var(--border-focus); }
.asset-input.has-error { border-color: var(--color-danger); }
.asset-input::placeholder { color: var(--text-muted); }

.asset-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.asset-add-btn:hover { opacity: 0.88; }

.asset-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.asset-field-error {
    font-size: 0.8rem;
    color: var(--color-danger);
    margin: 0;
}

/* Limit dolunca bilgi kutusu */
.asset-limit-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 9px;
    padding: 10px 14px;
}

/* Varlık listesi */
.asset-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.asset-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    transition: border-color 0.15s;
}
.asset-row:hover { border-color: var(--border-secondary); }

/* Sol: ikon çember + bilgi */
.asset-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.asset-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(59,130,246,0.1);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.asset-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.asset-row-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-row-type {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Orta: durum badge'leri */
.asset-row-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.asset-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.asset-badge-verified {
    background: rgba(16,185,129,0.1);
    color: var(--color-success);
    border: 1px solid rgba(16,185,129,0.2);
}

.asset-badge-pending {
    background: rgba(245,158,11,0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245,158,11,0.2);
}

.asset-badge-monitoring {
    background: rgba(59,130,246,0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(59,130,246,0.2);
}

.asset-badge-breach {
    background: rgba(239,68,68,0.1);
    color: var(--color-danger);
    border: 1px solid rgba(239,68,68,0.2);
}

/* İzleniyor noktası (nabız animasyonu) */
.asset-monitor-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
    animation: dash-pulse 2s ease-in-out infinite;
}

/* Sağ: eylem butonları */
.asset-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.asset-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.775rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.asset-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.asset-delete-btn { padding: 0 10px; }
.asset-delete-btn:hover { background: rgba(239,68,68,0.1); color: var(--color-danger); border-color: rgba(239,68,68,0.2); }

/* Yakında kartları (telefon, domain) */
.asset-soon-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    opacity: 0.65;
}

.asset-soon-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 700px) {
    .asset-form-row { flex-direction: column; align-items: stretch; }
    .asset-add-btn { justify-content: center; }
    .asset-row { flex-wrap: wrap; }
    .asset-row-badges { order: 3; width: 100%; }
    .asset-row-actions { margin-left: auto; }
}

/* ==========================================================================
   Assets Tablo Tasarımı (ast-*)
   ========================================================================== */

.ast-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
}

/* Tablo başlık satırı */
.ast-head {
    display: grid;
    grid-template-columns: 1fr 160px 140px 100px;
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Varlık satırı */
.ast-row {
    display: grid;
    grid-template-columns: 1fr 160px 140px 100px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-primary);
    transition: background 0.12s;
}
.ast-row:last-child { border-bottom: none; }
.ast-row:hover { background: var(--bg-hover); }

/* Sol kenarda ince renk çizgisi */
.ast-row-ok     { border-left: 3px solid var(--color-success); }
.ast-row-pending { border-left: 3px solid var(--color-warning); }

/* Hücre */
.ast-cell { display: flex; align-items: center; gap: 10px; }

/* E-posta hücresi: renkli nokta + adres */
.ast-cell-email { gap: 12px; min-width: 0; }

.ast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ast-dot-green  { background: var(--color-success); }
.ast-dot-yellow { background: var(--color-warning); }

.ast-email {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ast-breach-note {
    font-size: 0.72rem;
    color: var(--color-danger);
    display: block;
    margin-top: 2px;
}

/* Durum metni */
.ast-status {
    font-size: 0.8rem;
}
.ast-status-ok      { color: var(--color-success); }
.ast-status-pending { color: var(--color-warning); }
.ast-status-off     { color: var(--text-muted); }

/* Eylem butonları */
.ast-cell-actions { justify-content: flex-end; gap: 6px; }

.ast-btn {
    height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 0.775rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.ast-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.ast-btn-delete { padding: 0 9px; }
.ast-btn-delete:hover { background: rgba(239,68,68,0.08); color: var(--color-danger); border-color: rgba(239,68,68,0.25); }

/* Responsive: 700px altında dikey düzen */
@media (max-width: 700px) {
    .ast-head { display: none; }
    .ast-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px;
    }
    .ast-cell-email { grid-column: 1; }
    .ast-cell-actions { grid-column: 2; grid-row: 1 / 3; }
    .ast-cell:nth-child(2),
    .ast-cell:nth-child(3) {
        grid-column: 1;
        font-size: 0.775rem;
        padding-left: 20px;
    }

    /* Zengin tablo satırları (ast-row-rich) mobil: flex ile sağ hizalama */
    .ast-head-rich { display: none; }
    .ast-row-rich {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    /* Adres + meta: esner, sola yasla */
    .ast-cell-main {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    /* Eylem butonları: sağ kenara yasla, 1. satırda */
    .ast-row-rich .ast-cell-actions {
        order: 2;
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 5px;
        padding-left: 12px;
        align-self: flex-start;
    }
    /* Durum rozetleri: 2. satırda, adresin altında hizalı */
    .ast-row-rich .ast-cell:nth-child(2) {
        order: 3;
        flex: 0 0 100%;
        padding-left: 38px;
        font-size: 0.775rem;
        padding-top: 4px;
    }
    /* Son tarama: gizle */
    .ast-row-rich .ast-cell:nth-child(3) { display: none !important; }
}

/* ============================================================
   Varlıklar sayfası: üst başlık + plan widget
   ============================================================ */

.ast-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.ast-page-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 5px;
}

.ast-page-sub {
    font-size: 0.8375rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 480px;
    line-height: 1.55;
}

/* Plan kullanım widget'ı (sağ üst) */
.ast-plan-widget {
    flex-shrink: 0;
    min-width: 190px;
    max-width: 230px;
}

.ast-plan-widget-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Plan rozeti */
.ast-plan-badge {
    font-size: 0.675rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 20px;
}

.ast-plan-badge-basic {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
}

.ast-plan-badge-pro {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.28);
    color: var(--color-info);
}

.ast-plan-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ============================================================
   Pro upgrade kartı
   ============================================================ */

.ast-upgrade-card {
    margin-top: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    overflow: hidden;
}

.ast-upgrade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
    background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, transparent 60%);
}

.ast-upgrade-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px;
}

.ast-upgrade-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.ast-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.ast-upgrade-btn:hover { opacity: 0.85; color: #fff; text-decoration: none; }

/* Özellik grid'i */
.ast-upgrade-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ast-upgrade-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--border-primary);
}

.ast-upgrade-feature:last-child { border-right: none; }

.ast-feature-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ast-feature-title {
    font-size: 0.8375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px;
}

.ast-feature-desc {
    font-size: 0.775rem;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
}

/* Responsive: 700px altında upgrade kartı tek sütun */
@media (max-width: 700px) {
    .ast-header-row { flex-direction: column; }
    .ast-plan-widget { min-width: 0; max-width: 100%; width: 100%; }
    .ast-upgrade-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ast-upgrade-features { grid-template-columns: 1fr; }
    .ast-upgrade-feature { border-right: none; border-bottom: 1px solid var(--border-primary); }
    .ast-upgrade-feature:last-child { border-bottom: none; }
}

/* ============================================================
   Varlıklar sayfası: 2 kolonlu layout (ana içerik + sidebar)
   ============================================================ */

.ast-layout {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 1.25rem;
    align-items: start;
}

.ast-main {}

.ast-sidebar {}

/* Plan rozeti (panel başlığında) */
.ast-plan-badge {
    font-size: 0.675rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 20px;
}

.ast-plan-badge-basic {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
}

.ast-plan-badge-pro {
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.28);
    color: var(--color-info);
}

/* Sidebar özellik listesi */
.ast-pro-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}

.ast-pro-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.ast-pro-feature:last-of-type { margin-bottom: 0; }

.ast-pro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.ast-pro-dot-active { background: var(--brand-primary); }
.ast-pro-dot-soon   { background: var(--border-secondary); }

.ast-pro-feat-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.ast-pro-feat-note {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.45;
}

/* Upgrade butonu (sidebar versiyonu) */
.ast-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.ast-upgrade-btn:hover { opacity: 0.85; color: #fff; text-decoration: none; }

/* ============================================================
   Genel mobil overflow koruması (ast-* bileşenleri)
   ============================================================ */

.ast-layout,
.ast-main,
.ast-sidebar,
.ast-table,
.ast-filter-bar,
.ast-type-tabs,
.dv5-panel,
.dv5-kpi-grid,
.dv5-main-grid {
    max-width: 100%;
    min-width: 0;
}

/* Responsive: 900px altında sidebar alta geçer */
@media (max-width: 900px) {
    .ast-layout { grid-template-columns: 1fr; }
}

/* Çok küçük ekranlarda (420px altı) tab metinleri kısalt */
@media (max-width: 420px) {
    .ast-type-tab span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ast-tab-soon, .ast-tab-pro { display: none; }
}

/* ============================================================
   Varlık tipi sekmeler
   ============================================================ */

.ast-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 1.125rem;
    flex-wrap: wrap;
}

.ast-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.15s;
    min-width: 0;
    max-width: 100%;
}

.ast-type-tab-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.ast-type-tab-inactive:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* "Yakında" rozeti sekme üzerinde */
.ast-tab-soon {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(245,158,11,0.15);
    color: var(--color-warning);
    border: 1px solid rgba(245,158,11,0.25);
}

/* "Pro" rozeti sekme üzerinde */
.ast-tab-pro {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99,102,241,0.12);
    color: var(--color-info);
    border: 1px solid rgba(99,102,241,0.22);
}

/* ============================================================
   Tip seçimi: mesaj kutusu (telefon/domain)
   ============================================================ */

.ast-soon-msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1rem 1.125rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

.ast-soon-msg-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ast-soon-msg-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.ast-soon-msg-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   Arama + filtre çubuğu
   ============================================================ */

.ast-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.ast-search-wrap {
    position: relative;
    flex: 1;
}

.ast-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
}

.ast-search-input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 7px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

.ast-search-input:focus { border-color: var(--border-focus); }
.ast-search-input::placeholder { color: var(--text-muted); }

.ast-filter-select {
    height: 34px;
    padding: 0 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 7px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}

.ast-filter-select:focus { border-color: var(--border-focus); }

/* Mobil: filter bar dikey sırala */
@media (max-width: 600px) {
    .ast-filter-bar { flex-wrap: wrap; }
    .ast-search-wrap { flex: 1 1 100%; }
    .ast-filter-select { flex: 1 1 auto; width: 100%; }
}

/* ============================================================
   Zengin tablo satırları (ast-row-rich)
   ============================================================ */

.ast-head-rich {
    grid-template-columns: 1fr 130px 110px 80px !important;
}

.ast-row-rich {
    grid-template-columns: 1fr 130px 110px 80px !important;
}

/* Ana hücre: tür ikon + adres + meta bilgi */
.ast-cell-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Tür ikonu (renkli küçük kare) */
.ast-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ast-type-icon-email  { background: rgba(59,130,246,0.1);  color: var(--brand-primary); }
.ast-type-icon-phone  { background: rgba(99,102,241,0.1);  color: var(--color-info); }
.ast-type-icon-domain { background: rgba(245,158,11,0.1);  color: var(--color-warning); }

/* Meta bilgi satırı (ekleme tarihi · sızıntı sayısı) */
.ast-row-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.ast-meta-sep { opacity: 0.4; }

.ast-meta-breach {
    color: var(--color-danger);
    font-weight: 500;
}

/* ============================================================
   Hesap Ayarları Sayfası (acc-*)
   ============================================================ */

/* ─── Ana layout: 2 sütun ───────────────────────────────────── */
.acc-layout {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: var(--space-6);
    align-items: start;
}

.acc-main  { min-width: 0; }
.acc-sidebar { min-width: 0; }

/* Panel başlığı */
.acc-panel-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-5) 0;
}

/* ─── Profil: Avatar + Ad formu ─────────────────────────────── */
.acc-avatar-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.acc-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    overflow: hidden;
    margin-top: 1.45rem; /* form-label yüksekliği ile hizalama */
}

.acc-name-form {
    display: flex;
    gap: var(--space-3);
    flex: 1;
    align-items: flex-start;
}

/* ─── E-posta satırı ─────────────────────────────────────────── */
.acc-email-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-top: var(--border-width) solid var(--border-primary);
    padding-top: var(--space-5);
}

.acc-email-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: block;
    margin-top: var(--space-1);
}

/* ─── OAuth hesap listesi ────────────────────────────────────── */
.acc-oauth-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acc-oauth-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border-primary);
}

.acc-oauth-row:last-child { border-bottom: none; }

/* Provider rozeti (32px kare, renkli harf) */
.acc-provider-badge {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
}

.acc-provider-google    { background: #4285F4; }
.acc-provider-microsoft { background: #00A4EF; }
.acc-provider-github    { background: #24292E; }
.acc-provider-apple     { background: #000000; }

.acc-oauth-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.acc-oauth-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.acc-oauth-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bağlı / Bağlı değil etiketleri */
.acc-connected {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.acc-not-connected {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Yakında badge */
.acc-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: var(--border-width) solid var(--border-primary);
}

/* ─── Giriş geçmişi listesi ──────────────────────────────────── */
.acc-login-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acc-login-row {
    display: grid;
    grid-template-columns: 120px 100px 1fr 80px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--border-primary);
    font-size: var(--font-size-sm);
}

.acc-login-row:last-child { border-bottom: none; }

.acc-login-date {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.acc-login-device {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Giriş yöntemi badge */
.acc-method-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.acc-method-magic  { background: rgba(99,102,241,0.12); color: var(--color-info); }
.acc-method-google { background: rgba(66,133,244,0.12); color: #4285F4; }
.acc-method-oauth  { background: var(--bg-tertiary);     color: var(--text-secondary); }

/* Giriş durumu */
.acc-login-status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

.acc-status-ok   { color: var(--color-success); }
.acc-status-fail { color: var(--color-danger); }

/* ─── Hesap Özeti (sidebar) ──────────────────────────────────── */
.acc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.acc-summary-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: block;
    margin-bottom: var(--space-1);
}

.acc-summary-val {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    text-align: right;
}

/* Plan badge */
.acc-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.acc-plan-basic {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-secondary);
}

.acc-plan-pro {
    background: rgba(96,165,250,0.12);
    color: var(--brand-primary);
    border: var(--border-width) solid rgba(96,165,250,0.3);
}

/* ─── E-posta bildirim toggle ────────────────────────────────── */
.acc-notif-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
    padding: 0;
}

.acc-notif-on  { background: var(--color-success); }
.acc-notif-off { background: var(--border-secondary); }

.acc-notif-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: #fff;
    transition: left var(--transition-fast);
    display: block;
}

.acc-notif-on .acc-notif-knob  { left: 21px; }
.acc-notif-off .acc-notif-knob { left: 3px; }

/* ─── Hesap silme paneli ─────────────────────────────────────── */
.acc-danger-panel {
    border-color: rgba(239,68,68,0.3) !important;
}

/* ─── Responsive: 900px altında tek sütun ───────────────────── */
@media (max-width: 900px) {
    .acc-layout {
        grid-template-columns: 1fr;
    }

    .acc-sidebar {
        order: -1; /* Mobilede özetin üstte görünmesi için */
    }

    .acc-login-row {
        grid-template-columns: 100px 90px 1fr 70px;
        gap: var(--space-2);
    }
}

@media (max-width: 600px) {
    .acc-avatar-wrap { flex-direction: column; align-items: stretch; }
    .acc-avatar { margin-top: 0; }
    .acc-name-form { flex-direction: column; }

    .acc-login-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .acc-login-date   { grid-column: 1; }
    .acc-login-status { grid-column: 2; }
    .acc-method-badge { grid-column: 1; }
    .acc-login-device { grid-column: 2; font-size: var(--font-size-xs); }
}

/* ─── Bildirimler Sayfası ───────────────────────────────────────────────── */

/* ─── Index: 2 kolonlu düzen */
.nf-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}

.nf-main { min-width: 0; }

/* ─── Sidebar */
.nf-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: var(--space-4);
}

.nf-sidebar-badge {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    padding: 2px 9px;
}

.nf-sidebar-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
}

.nf-sidebar-usage-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.nf-sidebar-soon {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-top: var(--space-4);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.nf-sidebar-upgrade {
    padding: var(--space-4);
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: var(--radius-lg);
}

.nf-sidebar-upgrade-btn {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
}

.nf-sidebar-upgrade-btn:hover { text-decoration: underline; }

/* ─── Index: Başlık / Filtreler */
.nf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.nf-filters {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.nf-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: var(--border-width) solid transparent;
}

.nf-filter:hover { color: var(--text-primary); background: var(--bg-hover); }

.nf-filter-active {
    color: var(--text-primary);
    background: var(--bg-active);
    border-color: var(--border-focus);
}

.nf-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.nf-filter-count-blue  { background: rgba(96,165,250,0.15);  color: var(--brand-primary); }
.nf-filter-count-warn  { background: rgba(245,158,11,0.15);  color: var(--color-warning); }
.nf-filter-count-green { background: rgba(16,185,129,0.15);  color: var(--color-success); }

/* ─── Tablo ─────────────────────────────────────────────────── */

.nf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.nf-table thead tr {
    border-bottom: var(--border-width) solid var(--border-primary);
}

.nf-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.nf-th-chevron { width: 36px; }

/* Satırlar */
.nf-row {
    border-bottom: var(--border-width) solid var(--border-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.nf-row:hover { background: var(--bg-hover); }
.nf-row:last-of-type { border-bottom: none; }

/* Okunmamış satır — sol accent çizgisi + hafif vurgu */
.nf-row-unread {
    background: rgba(96,165,250,0.03);
    box-shadow: inset 3px 0 0 rgba(96,165,250,0.5);
}

.nf-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.nf-td-chevron { width: 36px; text-align: right; }
.nf-td-date    { white-space: nowrap; color: var(--text-muted); }
.nf-td-empty   { color: var(--text-muted); opacity: 0.5; }

/* Source chip */
.nf-source-chip {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asset değer */
.nf-asset-val {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Status badge */
.nf-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.nf-status-unread   { background: rgba(96,165,250,0.12);  color: var(--brand-primary); }
.nf-status-read     { background: var(--bg-tertiary);      color: var(--text-muted); }
.nf-status-in-review { background: rgba(245,158,11,0.12);  color: var(--color-warning); }
.nf-status-resolved  { background: rgba(16,185,129,0.12);  color: var(--color-success); }
.nf-status-dismissed { background: var(--bg-secondary);   color: var(--text-muted); opacity: 0.7; }

/* Chevron */
.nf-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.nf-chevron-open { transform: rotate(180deg); }

/* ─── Detay satırı ──────────────────────────────────────────── */

.nf-detail-row {
    border-bottom: var(--border-width) solid var(--border-primary);
}

.nf-detail-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--bg-secondary);
}

.nf-detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nf-detail-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.5;
}

.nf-detail-msg {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.nf-detail-lbl {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Şifre satırı ──────────────────────────────────────────── */

.nf-pw-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nf-pw-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2-5);
    letter-spacing: 0.05em;
    user-select: all;
}

.nf-pw-toggle {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.nf-pw-toggle:hover { opacity: 0.75; }

/* ─── Durum pills ───────────────────────────────────────────── */

.nf-detail-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.nf-status-pills {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
}

.nf-spill {
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--bg-tertiary);
    border: var(--border-width) solid var(--border-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.5;
}

.nf-spill:hover { border-color: var(--border-focus); color: var(--text-primary); }

.nf-spill-unread.nf-spill-active    { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.35); color: var(--brand-primary); }
.nf-spill-read.nf-spill-active      { background: var(--bg-hover);       border-color: var(--border-secondary); color: var(--text-secondary); }
.nf-spill-in_review.nf-spill-active { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: var(--color-warning); }
.nf-spill-resolved.nf-spill-active  { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: var(--color-success); }
.nf-spill-dismissed.nf-spill-active { background: var(--bg-secondary);   border-color: var(--border-secondary); color: var(--text-muted); }

/* ─── Argus butonu ──────────────────────────────────────────── */

.nf-argus-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: transparent;
    border: var(--border-width) solid var(--border-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.nf-soon-pill {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    background: rgba(99,102,241,0.15);
    color: var(--color-info);
    letter-spacing: 0.02em;
}

/* ─── Boş durum ─────────────────────────────────────────────── */

.nf-empty {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--text-muted);
}

.nf-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.nf-empty-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-2); }
.nf-empty-desc  { font-size: var(--font-size-sm); color: var(--text-muted); }

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .nf-table th.nf-col-asset,
    .nf-table td.nf-td-asset  { display: none; }
    .nf-source-chip { max-width: 100px; }
}

@media (max-width: 640px) {
    .nf-header           { flex-direction: column; align-items: flex-start; }
    .nf-filters          { flex-wrap: wrap; }
    .nf-table th.nf-col-date,
    .nf-table td.nf-td-date   { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* ─── Bildirim Detay Sayfası — Ticket Düzeni (nfs-*) ───────────────────── */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Geri butonu */
.nfs-back-bar { margin-bottom: var(--space-4); }

.nfs-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.nfs-back-link:hover { color: var(--text-primary); }

/* ─── Ticket başlık alanı ─────────────────────────────────── */

.nfs-ticket-head {
    margin-bottom: var(--space-5);
}

.nfs-ticket-id-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.nfs-ticket-id {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    letter-spacing: 0.05em;
}

.nfs-tbadge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
}

.nfs-tbadge-unread {
    background: rgba(96,165,250,0.12);
    border: 1px solid rgba(96,165,250,0.35);
    color: var(--brand-primary);
}

.nfs-tbadge-read {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    color: var(--text-muted);
}

.nfs-ticket-title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
}

/* ─── İki kolonlu düzen ───────────────────────────────────── */

.nfs-ticket-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

.nfs-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ─── Olay özeti kartı ────────────────────────────────────── */

.nfs-body-card { padding: var(--space-5); }

.nfs-body-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
}

.nfs-body-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.nfs-icon-danger {
    background: rgba(239,68,68,0.1);
    color: var(--color-danger);
}

.nfs-body-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

/* ─── Argus AI kartı ──────────────────────────────────────── */

.nfs-argus-card {
    padding: var(--space-5);
    background: rgba(37,99,235,0.05);
    border: 1px solid rgba(96,165,250,0.22);
    border-radius: var(--radius-xl);
}

[data-theme="light"] .nfs-argus-card {
    background: rgba(37,99,235,0.04);
    border-color: rgba(37,99,235,0.18);
}

.nfs-argus-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.nfs-argus-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(96,165,250,0.12);
    color: var(--brand-primary);
    border: 1px solid rgba(96,165,250,0.2);
    flex-shrink: 0;
}

.nfs-argus-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nfs-argus-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.nfs-argus-card-sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.nfs-argus-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(96,165,250,0.12);
}

.nfs-argus-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.nfs-argus-card-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
}
.nfs-argus-card-btn:hover { opacity: .85; color: #fff; }
.nfs-argus-card-btn[disabled],
.nfs-argus-card-btn-off { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.nfs-argus-card-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.nfs-soon-pill-dark {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Sidebar ─────────────────────────────────────────────── */

.nfs-ticket-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: var(--space-4);
}

/* Sidebar kart */
.nfs-sc { padding: 0; overflow: hidden; }

.nfs-sc-head {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.nfs-sc-body {
    padding: var(--space-4);
}

/* Properties listesi */
.nfs-props { padding: var(--space-2) 0; }

.nfs-prop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
}

.nfs-prop:last-child { border-bottom: none; }

.nfs-prop-lbl {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    padding-top: 2px;
}

.nfs-prop-val {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: right;
}

.nfs-prop-asset {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Status toggle (sidebar içinde) ─────────────────────── */

.nfs-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2-5);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.nfs-status-unread {
    background: rgba(96,165,250,0.08);
    border-color: rgba(96,165,250,0.3);
    color: var(--brand-primary);
}

.nfs-status-unread:hover { background: rgba(96,165,250,0.15); }

.nfs-status-read {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.nfs-status-read:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* ─── Argus kota (sidebar) ────────────────────────────────── */

.nfs-quota-sc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.nfs-quota-sc-lbl { font-size: var(--font-size-xs); color: var(--text-muted); }
.nfs-quota-sc-num { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* ─── Şifre ───────────────────────────────────────────────── */

.nfs-pw-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.nfs-pw-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-1-5) var(--space-3);
    letter-spacing: 0.06em;
    user-select: all;
}

.nfs-pw-partial { letter-spacing: 0.08em; color: var(--text-secondary); }

.nfs-pw-lock {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}

.nf-pw-toggle {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.nf-pw-toggle:hover { opacity: 0.75; }

/* ─── Linkler ─────────────────────────────────────────────── */

.nfs-upgrade-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
    text-decoration: none;
}

.nfs-upgrade-link:hover { opacity: 0.8; }

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 960px) {
    .nfs-ticket-layout { grid-template-columns: 1fr 250px; }
}

@media (max-width: 768px) {
    .nfs-ticket-layout  { grid-template-columns: 1fr; }
    .nfs-ticket-sidebar { position: static; }
    .nf-layout          { grid-template-columns: 1fr; }
    .nf-sidebar         { position: static; }
    .nf-table th:nth-child(2),
    .nf-table td.nf-td-asset { display: none; }
}

@media (max-width: 640px) {
    .nfs-ticket-title  { font-size: 1.125rem; }
    .nfs-ticket-layout { gap: var(--space-4); }
    .nf-table th:nth-child(3),
    .nf-table td.nf-td-date { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Argus AI Sayfaları (ag-* prefix)
   - index: konuşma listesi + kota sidebar
   - show:  chat kabı + typewriter animasyonu
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Index: Sayfa başlığı ──────────────────────────────────────────────────── */
.ag-page-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
}
.ag-page-head-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: rgba(37,99,235,0.12);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ag-page-head-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}
.ag-page-head-desc {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* ─── Index: Boş durum ──────────────────────────────────────────────────────── */
.ag-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-16) var(--space-6);
    gap: var(--space-3);
}
.ag-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(37,99,235,0.10);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}
.ag-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.ag-empty-desc {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    max-width: 380px;
    line-height: 1.55;
    margin: 0;
}
.ag-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: opacity .15s;
}
.ag-empty-btn:hover { opacity: .85; }

/* ─── Index: Bölüm başlığı ──────────────────────────────────────────────────── */
.ag-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.ag-section-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-tertiary);
}
.ag-section-count {
    font-size: var(--font-size-xs);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 99px;
    padding: 0 var(--space-2);
    line-height: 1.8;
}

/* ─── Index: Konuşma listesi ─────────────────────────────────────────────────── */
.ag-list { display: flex; flex-direction: column; gap: var(--space-2); }

.ag-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.ag-item:hover {
    border-color: var(--brand-primary);
    background: var(--bg-tertiary);
}
.ag-item-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: rgba(37,99,235,0.10);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ag-item-body { flex: 1; min-width: 0; }
.ag-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.ag-item-source {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-item-date {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-2);
}
.ag-item-bottom {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ag-item-asset {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.ag-item-arrow {
    color: var(--text-quaternary);
    flex-shrink: 0;
}

/* ─── Güç rozetleri ──────────────────────────────────────────────────────────── */
.ag-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 6px;
    border-radius: 99px;
}
.ag-badge-weak   { background: rgba(239,68,68,.15);  color: var(--color-danger); }
.ag-badge-medium { background: rgba(245,158,11,.15); color: var(--color-warning); }
.ag-badge-strong { background: rgba(34,197,94,.15);  color: var(--color-success); }
.ag-badge-nopw   { background: var(--bg-tertiary);   color: var(--text-tertiary); }

/* ─── Index: Kota sidebar ────────────────────────────────────────────────────── */
.nf-sidebar-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}
.nf-sidebar-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: var(--space-3);
}
.ag-quota-nums {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--space-2);
}
.ag-quota-used { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.ag-quota-sep  { font-size: var(--font-size-base); color: var(--text-quaternary); margin: 0 2px; }
.ag-quota-limit { font-size: var(--font-size-base); color: var(--text-tertiary); }

.ag-quota-bar-wrap {
    height: 6px;
    border-radius: 99px;
    background: var(--bg-tertiary);
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.ag-quota-bar {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}
.ag-bar-ok     { background: var(--brand-primary); }
.ag-bar-warn   { background: var(--color-warning); }
.ag-bar-danger { background: var(--color-danger); }

.ag-quota-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.ag-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.ag-plan-label { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.ag-plan-val   { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: 500; }
.ag-plan-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 99px;
}
.ag-plan-basic { background: var(--bg-tertiary); color: var(--text-secondary); }
.ag-plan-pro   { background: rgba(37,99,235,.15); color: var(--brand-primary); }

.ag-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-2) 0;
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
}
.ag-upgrade-btn:hover { opacity: .85; }

/* ─── Show: Geri bar ────────────────────────────────────────────────────────── */
.ag-back-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}
.ag-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s;
}
.ag-back-link:hover { color: var(--text-primary); }
.ag-back-notif-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color .15s;
}
.ag-back-notif-link:hover { color: var(--brand-primary); }

/* ─── Show: Chat kabı ────────────────────────────────────────────────────────── */
.ag-chat-wrap {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Kullanıcı balonu (sağ) */
.ag-bubble-user {
    display: flex;
    justify-content: flex-end;
}
.ag-bubble-user-body {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--brand-primary);
    color: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
    font-size: var(--font-size-sm);
    max-width: 85%;
}
.ag-bubble-user-label  { opacity: .75; font-size: var(--font-size-xs); }
.ag-bubble-user-source { font-weight: 600; }
.ag-bubble-user-sep    { opacity: .4; }
.ag-bubble-user-asset  { opacity: .85; font-size: var(--font-size-xs); }

/* Argus balonu (sol) */
.ag-bubble-argus {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-xl);
    overflow: hidden;
}
.ag-bubble-argus-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}
.ag-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(37,99,235,0.15);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ag-avatar-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.ag-analyzed-at {
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
}

/* Argus içerik gövdesi */
.ag-bubble-argus-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 80px;
}

/* Genel metin */
.ag-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
.ag-text-analysis { color: var(--text-primary); }
.ag-text-nopw     { color: var(--text-tertiary); font-style: italic; }

/* Şifre gücü bloğu */
.ag-pw-block {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ag-strength-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 99px;
    width: fit-content;
}
.ag-strength-weak   { background: rgba(239,68,68,.12);  color: var(--color-danger); }
.ag-strength-medium { background: rgba(245,158,11,.12); color: var(--color-warning); }
.ag-strength-strong { background: rgba(34,197,94,.12);  color: var(--color-success); }

/* Öneriler */
.ag-recs-block { display: flex; flex-direction: column; gap: var(--space-3); }
.ag-recs-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-tertiary);
    margin: 0;
}
.ag-recs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ag-rec-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}
.ag-rec-item svg { flex-shrink: 0; margin-top: 2px; color: var(--color-success); }

/* ─── Show: Düşünüyor animasyonu ─────────────────────────────────────────────── */
.ag-thinking {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.ag-thinking-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ag-thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
    animation: ag-dot-bounce 1.2s infinite ease-in-out;
    opacity: .7;
}
.ag-thinking-dots span:nth-child(2) { animation-delay: .2s; }
.ag-thinking-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ag-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .7; }
    40%            { transform: translateY(-6px); opacity: 1; }
}
.ag-thinking-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-style: italic;
}

/* ─── Show: Alt kota çubuğu ──────────────────────────────────────────────────── */
.ag-footer-quota {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-primary);
    max-width: 760px;
}
.ag-upgrade-inline {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}
.ag-upgrade-inline:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ag-chat-wrap { max-width: 100%; }
    .ag-footer-quota { max-width: 100%; }
}
@media (max-width: 580px) {
    .ag-bubble-user-body { max-width: 95%; }
    .ag-bubble-argus-body { padding: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Argus AI — Rapor Görünümü
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Action Bar ──────────────────────────────────────────────────────────────── */
.ag-report-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.ag-action-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ag-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    background: none;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.ag-action-btn-ghost {
    border-color: var(--border-primary);
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
.ag-action-btn-ghost:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}
.ag-action-btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.ag-action-btn-primary:hover { opacity: .88; }

/* ─── Rapor Kapsayıcı ────────────────────────────────────────────────────────── */
.ag-report {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-5);
}

/* Rapor içi arka plan görseli — alt sağa yaslanmış, üstten alta beliren */
.ag-report-cyber-img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 65%;
    width: auto;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
}

/* Rapor içeriği görselin üstünde kalır */
.ag-report > *:not(.ag-report-cyber-img) {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .ag-report-cyber-img { display: none; }
}

/* ─── Rapor Başlığı ──────────────────────────────────────────────────────────── */
.ag-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(37,99,235,.14) 0%, rgba(59,130,246,.07) 100%);
    border-bottom: 1px solid var(--border-primary);
    flex-wrap: wrap;
}
.ag-report-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ag-report-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: rgba(37,99,235,.18);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ag-report-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.ag-report-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin: 0;
}
.ag-report-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ag-report-source-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(239,68,68,.12);
    color: var(--color-danger);
    border-radius: 99px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.ag-report-asset-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(37,99,235,.10);
    color: var(--brand-primary);
    border-radius: 99px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* ─── Rapor Bölümleri ────────────────────────────────────────────────────────── */
.ag-report-section {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-primary);
}
.ag-report-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ag-report-section-num {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--brand-primary);
    opacity: .6;
    letter-spacing: .05em;
    min-width: 22px;
}
.ag-report-section-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}
.ag-report-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}
.ag-text-muted {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ─── Şifre Güç Satırı: rozet + 5-çubuk metre ───────────────────────────────── */
.ag-strength-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.ag-strength-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.ag-strength-badge.ag-strength-weak   { background: rgba(239,68,68,.12);  color: var(--color-danger); }
.ag-strength-badge.ag-strength-medium { background: rgba(245,158,11,.12); color: var(--color-warning); }
.ag-strength-badge.ag-strength-strong { background: rgba(34,197,94,.12);  color: var(--color-success); }
.ag-strength-meter {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ag-sm-bar {
    width: 20px;
    height: 6px;
    border-radius: 99px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.ag-sm-bar-fill {
    width: 100%;
    height: 100%;
    border-radius: 99px;
    background: var(--bg-tertiary);
}
.ag-sm-bar-fill.ag-strength-weak   { background: var(--color-danger); }
.ag-sm-bar-fill.ag-strength-medium { background: var(--color-warning); }
.ag-sm-bar-fill.ag-strength-strong { background: var(--color-success); }

/* ─── Öneriler Listesi ───────────────────────────────────────────────────────── */
.ag-report-recs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ag-report-rec {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.ag-report-rec-num {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--brand-primary);
    opacity: .65;
    min-width: 22px;
    padding-top: 2px;
    flex-shrink: 0;
}
.ag-report-rec-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ─── Rapor Altlık ───────────────────────────────────────────────────────────── */
.ag-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
    flex-wrap: wrap;
}
.ag-report-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--brand-primary);
}
.ag-report-footer-text {
    font-size: var(--font-size-xs);
    color: var(--text-quaternary);
}

/* ─── Rapor Sorumluluk Reddi ─────────────────────────────────────────────────── */
.ag-report-disclaimer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-primary);
}
.ag-report-disclaimer-meta {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.6;
}
.ag-report-disclaimer-text {
    font-size: 0.7rem;
    color: var(--text-quaternary);
    line-height: 1.7;
    margin: 0;
    max-width: 820px;
}

@media (max-width: 640px) {
    .ag-report-disclaimer { padding: var(--space-3) var(--space-4); }
}

/* ─── Loading Overlay ────────────────────────────────────────────────────────── */
.ag-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s ease;
}
.ag-loading-out {
    opacity: 0;
    pointer-events: none;
}
.ag-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 340px;
    max-width: 90vw;
}
.ag-loading-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(37,99,235,.12);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ag-pulse 1.8s ease-in-out infinite;
}
@keyframes ag-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.08); opacity: .8; }
}
.ag-loading-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}
.ag-loading-bar-wrap {
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.ag-loading-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--brand-primary);
    transition: width .5s ease;
}
.ag-loading-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ag-loading-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-quaternary);
    transition: color .3s;
}
.ag-ls-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    transition: background .3s;
}
.ag-loading-step.ag-ls-done { color: var(--text-secondary); }
.ag-loading-step.ag-ls-done .ag-ls-dot { background: var(--brand-primary); }

/* ─── Live Stream Sayfası v2 (ls-* prefix) ───────────────────────────────── */

/* Animasyonlar */
@keyframes ls-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.75); }
}
@keyframes ls-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ls-spin {
    to { transform: rotate(360deg); }
}

/* ── Argus Engine Bilgi Kartı — turuncu cyber banner ─────────────────────── */
.ls-argus-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #341400 0%, #200e00 55%, #160a00 100%);
    border: 1px solid rgba(249,115,22,0.30);
    border-radius: var(--radius-xl);
    padding: 1.375rem 1.75rem;
    margin-bottom: var(--space-5);
}
/* Grid desen */
.ls-argus-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(249,115,22,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,115,22,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
/* Sol turuncu ışıma */
.ls-argus-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 120% at 0% 50%, rgba(249,115,22,0.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
/* Dönen küre canvas — arka planda, içerik önünde */
.ls-argus-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
/* İçerik elemanları öne (canvas ve görsel hariç) */
.ls-argus-banner > *:not(.ls-argus-banner-img):not(.ls-argus-canvas) { position: relative; z-index: 2; }
/* Sağ cyber görsel */
.ls-argus-banner-img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
    opacity: 0.28;
    pointer-events: none;
    z-index: 1;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 50%);
}
@media (max-width: 640px) { .ls-argus-banner-img { display: none; } }
.ls-argus-banner-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.ls-argus-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FB923C;
    flex-shrink: 0;
}
.ls-argus-banner-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FED7AA;
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.01em;
}
.ls-argus-banner-desc {
    font-size: 0.8125rem;
    color: #C2824B;
    margin: 0;
    line-height: 1.5;
}
/* Aksiyon butonları satırı */
.ls-argus-banner-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* Tek buton */
.ls-argus-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md);
    background: rgba(249,115,22,0.10);
    border: 1px solid rgba(249,115,22,0.30);
    color: #FB923C;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s;
    white-space: nowrap;
    cursor: pointer;
}
.ls-argus-btn:hover {
    background: rgba(249,115,22,0.20);
    border-color: rgba(249,115,22,0.55);
    color: #FED7AA;
}
/* Docs butonu: kesik kenarlık */
.ls-argus-btn--docs {
    background: rgba(249,115,22,0.05);
    border-style: dashed;
}
@media (max-width: 540px) {
    .ls-argus-banner-btns { gap: 0.375rem; }
    .ls-argus-btn { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
}

/* ── Üst çubuk ───────────────────────────────────────────────────────────── */
.ls-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    gap: var(--space-4);
    flex-wrap: wrap;
}
.ls-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.ls-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ls-topbar-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.ls-topbar-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ── LIVE rozeti + nokta ─────────────────────────────────────────────────── */
.ls-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ls-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    animation: ls-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
.ls-live-dot--sm {
    width: 6px;
    height: 6px;
}

/* ── Bilgi kutusu (intro) ────────────────────────────────────────────────── */
.ls-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.ls-intro-icon {
    color: var(--brand-primary);
    flex-shrink: 0;
    margin-top: 1px;
}
.ls-intro-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Yenile butonu + son güncelleme ──────────────────────────────────────── */
.ls-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ls-refresh-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.ls-last-updated {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Hero kartlar (4 kolon grid) ─────────────────────────────────────────── */
.ls-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.ls-hero-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color .25s, transform .2s;
}
.ls-hero-card:hover { border-color: var(--border-secondary); transform: translateY(-1px); }

/* Renk varyantları — üst kenarlık çizgisi */
.ls-hero-card--ulp   { border-top: 2px solid rgba(96, 165, 250, 0.55); }
.ls-hero-card--smtp  { border-top: 2px solid rgba(99, 102, 241, 0.55); }
.ls-hero-card--total { border-top: 2px solid rgba(52, 211, 153, 0.55); }
.ls-hero-card--src   { border-top: 2px solid rgba(251, 191, 36,  0.55); }

/* Parlama (glow) efektleri */
.ls-hero-glow {
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    opacity: 0.22;
}
.ls-hero-glow--ulp   { background: #60A5FA; }
.ls-hero-glow--smtp  { background: #6366F1; }
.ls-hero-glow--total { background: #34D399; }
.ls-hero-glow--src   { background: #FBBF24; }

/* Kart üst satırı: ikon + etiket */
.ls-hero-top {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ls-hero-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.ls-hero-icon--ulp   { background: rgba(96, 165, 250, 0.15); color: #60A5FA; }
.ls-hero-icon--smtp  { background: rgba(99, 102, 241, 0.15); color: #6366F1; }
.ls-hero-icon--total { background: rgba(52, 211, 153, 0.15); color: #34D399; }
.ls-hero-icon--src   { background: rgba(251, 191, 36,  0.15); color: #FBBF24; }

.ls-hero-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ls-hero-num {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.ls-hero-sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: var(--space-1);
}

/* ── Ana aktivite grafik paneli ──────────────────────────────────────────── */
.ls-chart-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.ls-chart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
    gap: var(--space-3);
}
.ls-chart-panel-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ls-chart-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.ls-chart-panel-sub {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
}
.ls-chart-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.ls-chart-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ls-legend-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.ls-legend-dot--ulp  { background: #60A5FA; }
.ls-legend-dot--smtp { background: #6366F1; }
.ls-legend-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.ls-chart-canvas-wrap {
    position: relative;
    height: 260px;
    padding: var(--space-3) var(--space-4) var(--space-2);
}
.ls-chart-canvas-wrap canvas { display: block; }
.ls-chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    background: var(--bg-secondary);
}
.ls-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--border-secondary);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ls-spin 0.7s linear infinite;
}

/* ── Özet kartlar satırı (4 kolon) ──────────────────────────────────────── */
.ls-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.ls-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color .25s;
}
.ls-summary-card:hover { border-color: var(--border-secondary); }
.ls-summary-card--peak { border-color: rgba(251, 191, 36, 0.3); }
.ls-summary-card-head {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ls-summary-card-num {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ls-summary-chart-wrap {
    height: 48px;
    width: 100%;
}
.ls-mini-chart { display: block; }
.ls-summary-card-sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Canlı feed paneli ───────────────────────────────────────────────────── */
.ls-feed-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.ls-feed-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}
.ls-feed-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.ls-feed-panel-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.ls-feed-panel-sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-primary);
}
.ls-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.ls-feed-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.4rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Feed grid — 2 sütunlu liste */
.ls-feed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Feed satırları (slide-in animasyonlu) */
.ls-feed-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
    opacity: 0;
    animation: ls-slide-in 0.3s ease forwards;
    transition: background var(--transition-fast);
}
.ls-feed-item:nth-child(odd)  { border-right: 1px solid var(--border-primary); }
.ls-feed-item:last-child,
.ls-feed-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.ls-feed-item:hover { background: var(--bg-hover); }

/* Tip rozeti */
.ls-fi-type {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ls-fi-type--ulp  { background: rgba(96, 165, 250, 0.15); color: #60A5FA; }
.ls-fi-type--smtp { background: rgba(99, 102, 241, 0.15); color: #818CF8; }

.ls-fi-identity {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.ls-fi-host {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.ls-fi-source {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ls-fi-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.ls-feed-placeholder {
    grid-column: 1 / -1;
    padding: var(--space-8) var(--space-5);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ls-hero        { grid-template-columns: repeat(2, 1fr); }
    .ls-summary-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ls-topbar             { flex-direction: column; align-items: flex-start; }
    .ls-hero               { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .ls-hero-num           { font-size: var(--font-size-2xl); }
    .ls-chart-canvas-wrap  { height: 180px; }
    .ls-summary-row        { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .ls-feed-grid          { grid-template-columns: 1fr; }
    .ls-feed-item:nth-child(odd) { border-right: none; }
}
@media (max-width: 480px) {
    .ls-hero        { grid-template-columns: 1fr; }
    .ls-summary-row { grid-template-columns: 1fr; }
}

/* ─── Abonelik Sayfası (sub-* prefix) ────────────────────────────────────── */

/* Rozetler */
.sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.sub-badge--current {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: #34D399;
}
.sub-badge--soon {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #FBBF24;
}
.sub-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ls-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Öne çıkan özellik listesi (Pro panel için) ───────────────────────────── */
.sub-hl-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}
.sub-hl-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.sub-hl-item--pro {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}
.sub-hl-item--muted { color: var(--text-muted); }
.sub-hl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.sub-hl-icon--ok  { background: rgba(52, 211, 153, 0.12); color: #34D399; }
.sub-hl-icon--pro { background: rgba(99, 102, 241, 0.12); color: #818CF8; }
.sub-hl-icon--no  { background: var(--bg-tertiary); color: var(--text-muted); }

/* ── CTA butonları ───────────────────────────────────────────────────────── */
.sub-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border: none;
    transition: opacity .2s, transform .15s;
}
.sub-cta--current {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: default;
    border: 1px solid var(--border-primary);
}
.sub-cta--pro {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #FFF;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.28);
}
.sub-cta--pro:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.sub-cta--loading { opacity: 0.6; cursor: wait; }

/* CTA notu */
.sub-cta-note {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    margin: var(--space-2) 0 0;
}

/* KPI kart dipnot metni */
.sub-kpi-foot-muted {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Plan karşılaştırma kartları (Basic | Pro) ───────────────────────────── */
.sub-cards-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    max-width: 700px;
    margin: var(--space-6) auto 0;
}

.sub-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sub-card--pro {
    border-color: rgba(99, 102, 241, 0.28);
    background: linear-gradient(160deg, rgba(99,102,241,0.05) 0%, var(--bg-secondary) 55%);
    border-top: 2px solid rgba(99, 102, 241, 0.55);
}

.sub-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.sub-card-plan {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.sub-card-plan--pro {
    background: linear-gradient(135deg, #818CF8, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sub-card-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    flex: 1;
}

.sub-card-feat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

.sub-card-feat::before {
    content: '\2713';
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.sub-card--basic .sub-card-feat::before { color: var(--text-muted); }
.sub-card--pro   .sub-card-feat::before { color: #818CF8; }

.sub-card-feat--muted { color: var(--text-muted); }
.sub-card-feat--muted::before { content: '\2014'; color: var(--text-muted); }

.sub-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(99, 102, 241, 0.12);
}

.sub-card-joined {
    font-size: var(--font-size-sm);
    color: #34D399;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 0.4rem 0;
}

.sub-card-license-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 0.5rem var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    width: 100%;
}

.sub-card-license-btn:hover,
.sub-card-license-btn.is-active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Karşılaştırma tablosu ───────────────────────────────────────────────── */
.sub-compare {
    margin-top: var(--space-5);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sub-compare-table {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-secondary);
}

.sub-mrow {
    display: grid;
    grid-template-columns: 1fr 150px 200px;
    border-bottom: 1px solid var(--border-primary);
    align-items: center;
    min-height: 2.5rem;
}

.sub-mrow:last-child { border-bottom: none; }
.sub-mrow:has(+ .sub-compare-footer) { border-bottom: none; }

.sub-mrow--head {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-secondary);
    min-height: 2.75rem;
}

.sub-mrow--cat {
    background: rgba(99, 102, 241, 0.04);
    min-height: 2rem;
}

.sub-mc-feat {
    padding: 0.5rem var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.sub-mrow--head .sub-mc-feat {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sub-mc-cat {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sub-mc-basic,
.sub-mc-pro {
    padding: 0.5rem var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.sub-mrow--head .sub-mc-basic {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.sub-mrow--head .sub-mc-pro {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: rgba(99, 102, 241, 0.10);
    color: #818CF8;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-mc-yes       { color: var(--text-muted); }
.sub-mc-yes--pro  { color: #818CF8; }
.sub-mc-no        { color: var(--border-secondary); }

/* ── Karşılaştırma tablosu — Footer CTA ─────────────────────────────────── */
.sub-compare-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: rgba(99, 102, 241, 0.04);
    border-top: 1px solid rgba(99, 102, 241, 0.18);
}

.sub-compare-footer-left {
    flex: 1;
    min-width: 0;
}

.sub-compare-footer-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.sub-compare-footer-desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.sub-compare-footer-right {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    align-items: center;
}

.sub-compare-joined {
    font-size: var(--font-size-xs);
    color: #34D399;
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

.sub-cta-compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.sub-cta-compare:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.sub-cta-compare--license {
    background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30);
}

.sub-cta-compare--license:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.sub-cta-compare--license.is-active {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    box-shadow: none;
    transform: none;
}

.sub-cta-compare:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ── Inline lisans paneli ───────────────────────────────────────────────── */
.sub-compare-license-panel {
    display: none;
    margin-top: 0.75rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sub-compare-license-panel.is-open {
    display: block;
    animation: sub-lp-in 0.25s ease;
}

.sub-compare-license-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
}

.sub-compare-license-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-4);
}

@keyframes sub-lp-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lisans formu: input + buton yan yana */
.sub-license-form {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    margin-bottom: var(--space-3);
}

/* Lisans kodu input */
.sub-license-input {
    flex: 1;
    padding: 0.625rem var(--space-3);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    transition: border-color .2s;
    min-width: 0;
}
.sub-license-input::placeholder { color: var(--text-muted); }
.sub-license-input:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Inline buton (form içi, genişlik otomatik) */
.sub-cta--inline {
    width: auto;
    flex-shrink: 0;
    padding: 0.625rem var(--space-4);
}

/* Lisans mesajı */
.sub-license-msg {
    font-size: var(--font-size-sm);
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-md);
    line-height: 1.5;
}
.sub-license-msg--success {
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: #34D399;
}
.sub-license-msg--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--color-danger);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sub-mrow { grid-template-columns: 1fr 120px 150px; }
}

@media (max-width: 640px) {
    .sub-cards-wrap              { grid-template-columns: 1fr; max-width: 100%; margin-top: var(--space-4); }
    .sub-mrow                    { grid-template-columns: 1fr 90px 110px; }
    .sub-compare-footer          { flex-direction: column; align-items: flex-start; }
    .sub-compare-footer-right    { flex-wrap: wrap; }
    .sub-license-form            { flex-direction: column; }
    .sub-cta--inline             { width: 100%; }
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar,
    .topbar,
    .ag-report-action-bar,
    .ag-footer-quota,
    .ag-loading-overlay { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .ag-report { border: none; border-radius: 0; box-shadow: none; }
}

/* ─── Responsive (Rapor) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ag-report-header  { flex-direction: column; align-items: flex-start; }
    .ag-report-section { padding: var(--space-5) var(--space-4); }
    .ag-report-footer  { padding: var(--space-3) var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Öngörüler Sayfası (ins-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Düzen ──────────────────────────────────────────────────────────────────── */
.ins-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-6);
    align-items: start;
}

.ins-main   { min-width: 0; }
.ins-sidebar { position: sticky; top: calc(var(--topbar-height, 56px) + var(--space-4)); }

/* ── Başlık + Sekmeler ──────────────────────────────────────────────────────── */
.ins-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.ins-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 3px;
}

.ins-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem var(--space-3);
    border-radius: calc(var(--radius-lg) - 2px);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ins-tab:hover { color: var(--text-primary); background: var(--bg-hover); }

.ins-tab-active {
    background: var(--bg-active);
    color: var(--brand-primary);
    font-weight: 600;
}

.ins-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--brand-primary);
    color: var(--bg-primary);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

.ins-tab-pro-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-warning);
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 999px;
    padding: 1px 6px;
    letter-spacing: 0.03em;
}

/* ── Alt filtre pill'leri ────────────────────────────────────────────────────── */
.ins-subfilter {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ins-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem var(--space-3);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    text-decoration: none;
    transition: all 0.15s;
}

.ins-pill:hover { border-color: var(--border-secondary); color: var(--text-primary); }

.ins-pill-active {
    background: var(--bg-active);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
}

/* ── Kart Listesi ────────────────────────────────────────────────────────────── */
.ins-list { display: flex; flex-direction: column; gap: var(--space-2); }

.ins-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.ins-card:hover {
    border-color: var(--border-secondary);
    background: var(--bg-hover);
    transform: translateX(2px);
}

/* Okunmamış vurgusu */
.ins-card--unread { border-left: 3px solid var(--brand-primary); }

/* ── Öncelik renkli sol çizgi ─────────────────────────────────────────────── */
.ins-card-priority-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px 0 0 2px;
}

.ins-card--info .ins-card-priority-bar            { background: var(--color-info); }
.ins-card--warning .ins-card-priority-bar         { background: var(--color-warning); }
.ins-card--action_required .ins-card-priority-bar { background: var(--color-danger); }

.ins-card--info            { padding-left: calc(var(--space-4) + 3px); }
.ins-card--warning         { padding-left: calc(var(--space-4) + 3px); }
.ins-card--action_required { padding-left: calc(var(--space-4) + 3px); }

/* ── Kart İçeriği ────────────────────────────────────────────────────────────── */
.ins-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ins-card--info .ins-card-icon            { background: var(--color-info-light); color: var(--color-info); }
.ins-card--warning .ins-card-icon         { background: var(--color-warning-light); color: var(--color-warning); }
.ins-card--action_required .ins-card-icon { background: var(--color-danger-light); color: var(--color-danger); }

.ins-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ins-card-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ins-card-excerpt {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ins-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ins-card-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.ins-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
    flex-shrink: 0;
}

.ins-card-arrow { flex-shrink: 0; color: var(--text-muted); }

/* ── Boş durumlar ────────────────────────────────────────────────────────────── */
.ins-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.ins-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.ins-empty-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ins-empty-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 340px;
}

/* ── Pro CTA ─────────────────────────────────────────────────────────────────── */
.ins-pro-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-10) var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
}

.ins-pro-cta-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-xl);
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-warning);
    margin-bottom: var(--space-4);
}

.ins-pro-cta-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ins-pro-cta-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 360px;
    margin-bottom: var(--space-5);
}

.ins-pro-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem var(--space-5);
    background: var(--color-warning);
    color: #0f172a;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: opacity 0.15s;
}

.ins-pro-cta-btn:hover { opacity: 0.88; }

/* ── Sidebar stat section label ──────────────────────────────────────────────── */
.ins-stat-section-lbl {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
    margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Öngörüler Detay Sayfası (ins-ticket-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Geri butonu ─────────────────────────────────────────────────────────────── */
.ins-back-bar { margin-bottom: var(--space-4); }

.ins-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.ins-back-link:hover { color: var(--text-primary); }

/* ── Ticket başlık ───────────────────────────────────────────────────────────── */
.ins-ticket-head {
    margin-bottom: var(--space-5);
}

.ins-ticket-id-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.ins-ticket-id {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.ins-ticket-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ── Tip badge ───────────────────────────────────────────────────────────────── */
.ins-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.ins-type-developer {
    background: rgba(99,102,241,0.12);
    color: var(--color-info);
    border: 1px solid rgba(99,102,241,0.25);
}

.ins-type-ai_report {
    background: rgba(245,158,11,0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245,158,11,0.25);
}

/* ── Öncelik badge ───────────────────────────────────────────────────────────── */
.ins-priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.ins-priority-info            { background: rgba(99,102,241,0.1);   color: var(--color-info); }
.ins-priority-warning         { background: rgba(245,158,11,0.1);   color: var(--color-warning); }
.ins-priority-action_required { background: rgba(239,68,68,0.1);    color: var(--color-danger); }

/* ── Okundu badge ────────────────────────────────────────────────────────────── */
.ins-read-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.ins-read-badge-unread { background: rgba(96,165,250,0.1);  color: var(--brand-primary); border: 1px solid rgba(96,165,250,0.25); }
.ins-read-badge-read   { background: rgba(16,185,129,0.1);  color: var(--color-success); border: 1px solid rgba(16,185,129,0.25); }

/* ── İki kolonlu ticket düzeni ───────────────────────────────────────────────── */
.ins-ticket-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-6);
    align-items: start;
}

/* ── Sol: İçerik ─────────────────────────────────────────────────────────────── */
.ins-ticket-body { min-width: 0; }

/* Rapor kartı: arka plan görseline yer açmak için relative */
.ins-content-card { position: relative; }

/* Arka plan görseli — sağ alt, silik (Argus rapor stiliyle aynı) */
.ins-content-cyber-img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 34%;
    width: auto;
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}

/* İçerik görselin üzerinde kalır */
.ins-content-card > *:not(.ins-content-cyber-img) {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .ins-content-cyber-img { display: none; }
}

/* Özel Öngörüler — alt kategori başlığı */
.ins-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: var(--space-2) 0 var(--space-3) 0;
}

.ins-content-body {
    padding: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.75;
}

.ins-content-body h2,
.ins-content-body h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.ins-content-body h3 { font-size: 0.9rem; }

.ins-content-body h2:first-child,
.ins-content-body h3:first-child { margin-top: 0; }

.ins-content-body p  { margin-bottom: var(--space-3); }
.ins-content-body ul,
.ins-content-body ol { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.ins-content-body li { margin-bottom: var(--space-1); }

/* ── Sağ: Sidebar ────────────────────────────────────────────────────────────── */
.ins-ticket-sidebar {
    position: sticky;
    top: calc(var(--topbar-height, 56px) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ins-sc         { }
.ins-sc-head    { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-primary); }
.ins-sc-body    { padding: var(--space-3) var(--space-4); }

.ins-props      { display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-3) var(--space-4); }

.ins-prop       { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 24px; }
.ins-prop-lbl   { font-size: var(--font-size-xs); color: var(--text-muted); flex-shrink: 0; }
.ins-prop-val   { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: 500; text-align: right; }

/* ── Okundu toggle butonu ────────────────────────────────────────────────────── */
.ins-status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.ins-status-unread { background: rgba(96,165,250,0.1); color: var(--brand-primary); border-color: rgba(96,165,250,0.25); }
.ins-status-read   { background: rgba(16,185,129,0.1); color: var(--color-success); border-color: rgba(16,185,129,0.25); }

.ins-status-unread:hover { background: rgba(96,165,250,0.18); }
.ins-status-read:hover   { background: rgba(16,185,129,0.18); }

/* ── Not alanı ───────────────────────────────────────────────────────────────── */
.ins-note-textarea {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    line-height: 1.5;
    resize: vertical;
    margin-bottom: var(--space-2);
    transition: border-color 0.15s;
    display: block;
}

.ins-note-textarea:focus  { outline: none; border-color: var(--border-focus); }
.ins-note-textarea::placeholder { color: var(--text-muted); }

.ins-note-save-btn {
    width: 100%;
    padding: 0.5rem var(--space-3);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ins-note-save-btn:hover { background: var(--bg-hover); border-color: var(--border-secondary); }

/* ── Cevap listesi ───────────────────────────────────────────────────────────── */
.ins-replies-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ins-reply-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2-5) var(--space-3);
}

.ins-reply-body {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: var(--space-1);
    white-space: pre-wrap;
    word-break: break-word;
}

.ins-reply-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Pro lock ─────────────────────────────────────────────────────────────────── */
.ins-reply-pro-lock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.ins-reply-upgrade-link {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    margin-top: var(--space-1);
}

.ins-reply-upgrade-link:hover { text-decoration: underline; }

/* ── Health Check Argus Footer ───────────────────────────────────────────────── */
.ins-argus-footer {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

.ins-argus-footer-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── Soru Bölümü (içerik altında, ai_report) ─────────────────────────────────── */
.ins-reply-section {
    margin-top: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
}

.ins-reply-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
}

.ins-reply-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    background: rgba(96,165,250,0.06);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: var(--radius-md);
}

.ins-reply-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    line-height: 1.6;
    resize: vertical;
    margin-bottom: var(--space-3);
    transition: border-color 0.15s;
    display: block;
}

.ins-reply-textarea:focus     { outline: none; border-color: var(--border-focus); }
.ins-reply-textarea::placeholder { color: var(--text-muted); }

.ins-reply-send-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem var(--space-4);
    background: var(--brand-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ins-reply-send-btn:hover   { opacity: 0.88; }
.ins-reply-send-btn:disabled { cursor: not-allowed; }

/* "Alındı" kutusu */
.ins-reply-sent-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(16,185,129,0.07);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.ins-reply-sent-icon {
    flex-shrink: 0;
    color: var(--color-success);
    margin-top: 1px;
}

.ins-reply-sent-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-success);
    margin-bottom: var(--space-1);
}

.ins-reply-sent-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Gönderilen sorunun önizlemesi */
.ins-reply-preview {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--brand-primary);
}

.ins-reply-preview-lbl {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.ins-reply-preview-body {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: var(--space-2);
}

.ins-reply-preview-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ins-layout { grid-template-columns: 1fr; }
    .ins-sidebar { position: static; }
}

@media (max-width: 768px) {
    .ins-ticket-layout { grid-template-columns: 1fr; }
    .ins-ticket-sidebar { position: static; }
}

@media (max-width: 540px) {
    .ins-tabs { flex-wrap: wrap; }
    .ins-header { flex-direction: column; align-items: flex-start; }
}