/* ══════════════════════════════════════════════════════════════
   AURORA DESIGN SYSTEM — adaptif koyu/aydınlık tema
   :root = aydınlık varsayılan · [data-theme="dark"] = koyu override
   ══════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light;
    /* Marka + gradyan */
    --primary: #0075FD;
    --primary-dark: #005BEA;
    --primary-light: #EAF4FF;
    --primary-2: #00A8FF;
    --accent: #16C7F3;
    --grad-a: #0075FD;
    --grad-b: #009BFF;
    --grad-c: #19D2FF;
    /* Semantik */
    --success: #10B981;
    --success-light: #ECFDF5;
    --danger: #EF4444;
    --danger-light: #FEF2F2;
    --warning: #F59E0B;
    --warning-light: #FFFBEB;
    --info: #3B82F6;
    --info-light: #EFF6FF;
    /* Yüzeyler */
    --bg: #F1F5F9;
    --bg-2: #E2E8F0;
    --card: #FFFFFF;
    --surface-2: #F1F5F9;
    --modal-main-bg: #FFFFFF;
    --modal-side-bg: #F2F3F5;
    --modal-border: #E3E5E5;
    --modal-btn-bg: #F2F3F5;
    --modal-btn-hover: #E3E5E5;
    --modal-btn-text: #313338;
    --glass: rgba(255,255,255,.65);
    --glass-strong: rgba(255,255,255,.85);
    --glass-border: rgba(255,255,255,.4);
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    /* Metin */
    --text: #0F172A;
    --muted: #5B6478;
    --text-3: #94A3B8;
    /* Sidebar (her iki temada koyu app-shell) */
    --sidebar: #071B3A;
    --sidebar-hover: #0B3A78;
    --sidebar-bg1: #0B2B5E;
    --sidebar-bg2: #06142D;
    --sidebar-text: rgba(255,255,255,.74);
    --sidebar-dim: rgba(255,255,255,.42);
    --sidebar-active-bg: rgba(0,117,253,.22);
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: rgba(255,255,255,.08);
    /* Aurora arka plan blobları */
    --aurora-1: rgba(0,117,253,.42);
    --aurora-2: rgba(0,168,255,.34);
    --aurora-3: rgba(25,210,255,.26);
    --aurora-opacity: .5;
    /* Efektler */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 8px 24px -6px rgba(15,23,42,.14), 0 2px 6px -2px rgba(15,23,42,.08);
    --shadow-lg: 0 24px 60px -12px rgba(15,23,42,.22);
    --glow: 0 0 0 1px rgba(0,117,253,.12), 0 10px 40px -8px rgba(0,117,253,.30);
    --blur: 18px;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    /* Grafik (Chart.js) tema renkleri */
    --chart-grid: rgba(15,23,42,.08);
    --chart-tick: #64748B;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #2EA3FF;
    --primary-dark: #0075FD;
    --primary-light: rgba(46,163,255,.16);
    --primary-2: #19D2FF;
    --accent: #38D7FF;
    --grad-a: #0075FD;
    --grad-b: #00A8FF;
    --grad-c: #19D2FF;
    --success: #34D399;
    --success-light: rgba(52,211,153,.16);
    --danger: #F87171;
    --danger-light: rgba(248,113,113,.16);
    --warning: #FBBF24;
    --warning-light: rgba(251,191,36,.16);
    --info: #60A5FA;
    --info-light: rgba(96,165,250,.16);
    --bg: #080911;
    --bg-2: #0C0E1A;
    --card: #141726;
    --surface-2: #1A1E30;
    --modal-main-bg: #1E1F22;
    --modal-side-bg: #151618;
    --modal-border: #2B2D31;
    --modal-btn-bg: #2B2D31;
    --modal-btn-hover: #35373C;
    --modal-btn-text: #DBDEE1;
    --glass: rgba(20,23,38,.55);
    --glass-strong: rgba(20,23,38,.74);
    --glass-border: rgba(255,255,255,.08);
    --border: rgba(255,255,255,.09);
    --border-strong: rgba(255,255,255,.17);
    --text: #E8EBF5;
    --muted: #98A1B8;
    --text-3: #6A7288;
    --sidebar: #06142D;
    --sidebar-hover: #0B2B5E;
    --sidebar-bg1: #09214A;
    --sidebar-bg2: #030B1B;
    --sidebar-text: rgba(255,255,255,.72);
    --sidebar-dim: rgba(255,255,255,.40);
    --sidebar-active-bg: rgba(46,163,255,.24);
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: rgba(255,255,255,.07);
    --aurora-1: rgba(0,117,253,.48);
    --aurora-2: rgba(0,168,255,.36);
    --aurora-3: rgba(25,210,255,.30);
    --aurora-opacity: .8;
    --shadow: 0 2px 6px rgba(0,0,0,.42);
    --shadow-md: 0 12px 32px -8px rgba(0,0,0,.55);
    --shadow-lg: 0 30px 70px -14px rgba(0,0,0,.72);
    --glow: 0 0 0 1px rgba(46,163,255,.22), 0 12px 48px -8px rgba(46,163,255,.38);
    --chart-grid: rgba(255,255,255,.08);
    --chart-tick: #98A1B8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .4s ease, color .4s ease;
}

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

/* Tema geçişinde yüzeylerin yumuşak değişimi */
.card, .metric-card, .topbar, .sidebar, input, select, textarea, .btn, .badge, .user-badge {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .25s ease, transform .25s ease;
}

/* ── LOGIN ─────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(60% 60% at 15% 10%, color-mix(in srgb, var(--grad-a) 45%, transparent), transparent 60%),
        radial-gradient(55% 55% at 85% 20%, color-mix(in srgb, var(--grad-b) 40%, transparent), transparent 60%),
        radial-gradient(70% 70% at 70% 95%, color-mix(in srgb, var(--grad-c) 32%, transparent), transparent 60%),
        var(--bg);
}
.login-card {
    position: relative;
    background: var(--glass-strong);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    animation: loginIn .7s cubic-bezier(.22,.61,.36,1) both;
}
.login-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 55%, transparent), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}
.login-logo .logo-icon {
    width: 62px; height: 62px;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent);
    animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.login-logo h1 { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); letter-spacing: -.4px; }
.login-logo p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.login-theme-toggle { position: fixed !important; top: 20px; right: 20px; z-index: 5; }
.login-tab.active {
    background: white;
    color: var(--text);
    box-shadow: var(--shadow);
}

/* ── LAYOUT ─────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    background: linear-gradient(180deg, var(--sidebar-bg1) 0%, var(--sidebar-bg2) 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 4px 0 30px -12px rgba(0,0,0,.4);
    overflow: hidden;
}
/* Üstte marka gradyan glow */
.sidebar::before {
    content: '';
    position: absolute;
    top: -60px; left: -30px; right: -30px;
    height: 200px;
    background: radial-gradient(120% 80% at 30% 0%, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 70%);
    pointer-events: none;
    opacity: .8;
}
.sidebar-logo {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.sidebar-logo .app-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: white;
    letter-spacing: -.3px;
    line-height: 1.15;
}
.sidebar-logo .app-sub {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-top: 8px;
    letter-spacing: .3px;
}
.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; position: relative; }
.nav-section {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 12px 6px;
}
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13.5px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    margin-bottom: 2px;
    text-decoration: none;
    overflow: hidden;
}
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; transform: translateX(2px); }
.nav-item.active {
    background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 90%, #fff 0%), var(--primary-2));
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 75%, transparent);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px;
    background: #fff;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
}
.sidebar-footer .nav-item { color: rgba(255,255,255,.55); }
/* İnce özel kaydırma çubuğu */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.main { margin-left: 240px; min-height: 100vh; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.topbar {
    background: var(--glass-strong);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.2px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
}
.content { padding: 28px; flex: 1; position: relative; }

/* ── CARDS ─────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
/* Kartın üstünde ince ışık çizgisi (premium detay) */
.card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    opacity: .5;
    pointer-events: none;
}
:root[data-theme="dark"] .card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--text);
}
/* Kısıtlanmazsa satır içi SVG kendi viewBox'ı kadar (40px+) büyür ve başlığı
   alt satıra atar — v6'da üç bölüme ikon eklenince ortaya çıktı. */
.card-title svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.card-body { padding: 24px; }

/* ── METRIC CARDS ──────────────────────────────────── */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.metric-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Üstteki 3px gradyan şerit ve hover'daki radyal parlama KALDIRILDI.
   Dört kart birden renkli şerit taşıyınca hiçbiri öne çıkmıyordu; renk artık
   yalnızca etiketin yanındaki 6px noktada ve ANLAMI olan sayıda. */
.metric-card::before {
    content: '';
    position: absolute; top: 22px; left: 20px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--card-accent, var(--primary));
}
.metric-card .metric-label { padding-left: 14px; }
.metric-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

/* Geciken işler için yanıp sönen pulsasyon */
.metric-card.is-overdue {
    animation: overduePulse 2.5s infinite ease-in-out;
}
@keyframes overduePulse {
    0%, 100% {
        box-shadow: var(--shadow);
        border-color: var(--border);
    }
    50% {
        box-shadow: 0 0 16px -2px rgba(239, 68, 68, 0.25);
        border-color: rgba(239, 68, 68, 0.45);
    }
}
.metric-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    margin-bottom: 10px;
}
.metric-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}
.metric-value span { font-size: 14px; font-weight: 500; color: var(--muted); }

/* ── CHARTS GRID ────────────────────────────────────── */

/* ── REPORT LIST ────────────────────────────────────── */

/* ── TABLE ──────────────────────────────────────────── */
/* Yeniden kullanılabilir yatay-kaydırma sarmalayıcı (geniş tablolar mobilde taşmaz) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }
table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: var(--surface-2); }

/* ── FORMS ──────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.form-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ── Dosya Seçici Buton Özelleştirmesi ── */
input[type=file] {
    cursor: pointer;
    font-size: 13px;
    padding: 6px 0;
}
input[type=file]::file-selector-button {
    border: 1.5px solid var(--border);
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    margin-right: 12px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
input[type=file]::file-selector-button:hover {
    background: var(--bg-2);
    border-color: var(--border-strong);
}
input[type=file]::file-selector-button:active {
    transform: scale(0.96);
}

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.btn:active { transform: scale(.96); }
.btn-primary {
    background: linear-gradient(120deg, var(--grad-a), var(--primary-2) 90%);
    color: white;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 65%, transparent);
}
.btn-primary:hover { text-decoration: none; color: white; transform: translateY(-1px); box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary) 70%, transparent); filter: brightness(1.05); }
/* Sheen sweep */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}
.btn-primary:hover::after { left: 140%; }
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--border-strong); text-decoration: none; color: var(--text); transform: translateY(-1px); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ── ALERTS ─────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert { border: 1px solid transparent; }
.alert-success { background: var(--success-light); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-danger { background: var(--danger-light); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-warning { background: var(--warning-light); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-info { background: var(--info-light); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
:root:not([data-theme="dark"]) .alert-success { color: #065F46; }
:root:not([data-theme="dark"]) .alert-danger { color: #991B1B; }
:root:not([data-theme="dark"]) .alert-warning { color: #92400E; }
:root:not([data-theme="dark"]) .alert-info { color: #1E40AF; }

/* ── BADGE ──────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
/* Ayarlar → Kullanıcılar'daki rol rozetleri `badge-<?= admin ? primary : success ?>`
   ile basılıyor ama bu iki kural HİÇ YAZILMAMIŞTI: rozetler renksiz çıkıyordu.
   Sınıf adı şablonda dinamik üretildiği için kaynakta literal olarak geçmiyor. */
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: var(--success-light); color: var(--success); }

/* ── PAGE HEADER ────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.page-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); letter-spacing: -.4px; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ── COMPARISON TABLE ───────────────────────────────── */

/* ── WEEK SELECTOR ──────────────────────────────────── */
.week-btn.active { background: linear-gradient(120deg, var(--grad-a), var(--primary-2)); border-color: transparent; color: white; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent); }

/* ── EMPTY STATE ────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--muted);
}
.empty-state .icon {
    font-size: 52px;
    margin-bottom: 16px;
    display: inline-block;
    animation: floatY 3.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent));
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* ── HAMBURGER ──────────────────────────────────────── */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    transition: background .15s;
    flex-shrink: 0;
}
.hamburger:hover { background: var(--bg); }

/* ── SIDEBAR OVERLAY ────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
}

@media (max-width: 900px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .hamburger { display: flex; align-items: center; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .sidebar.is-open {
        transform: translateX(0);
    }
    .sidebar-overlay.is-open { display: block; }
    .main { margin-left: 0 !important; width: 100%; }
    /* Admin geniş tabloları (7–9 kolon, sarmalayıcısız) mobilde kaydırılabilir olsun —
       markup'a dokunmadan. Client rapor tabloları hariç (.table-scroll sarmalayıcıları var). */
    .main:not(.main-client) table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Admin inline grid'ler (repeat(3,1fr) vb.) mobilde tek/çift kolona insin */
    .main:not(.main-client) .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .topbar { padding: 0 14px; height: 52px; }
    .topbar-title { font-size: 14px; }
    .content { padding: 14px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    table { font-size: 12px; }
    table th, table td { padding: 8px 10px; }
    .card { border-radius: 10px; }
    .btn { font-size: 13px; padding: 7px 12px; }
    .login-card { padding: 28px 20px; margin: 12px; }
    /* Topbar: mobilde kullanıcı adı/e-postasını gizle, avatar/logo kalsın (uzun e-posta taşmasın) */
    .user-badge span { display: none; }
    .user-badge { padding: 5px; gap: 0; }
    .theme-toggle { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
    .content { padding: 10px; }
    .topbar { padding: 0 10px; }
}

/* ── SPLIT PANEL LAYOUT ────────────────────────────── */

/* ── WEEK NAV ───────────────────────────────────────── */
.week-nav-item.active {
    border-left-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

/* ── ADS REPORT KPI (shared tokens) ────────────────── */

/* ── SITE UPDATE SUMMARY (shared tokens) ────────────── */

/* Admin genel bakış: rapor tablosu + müşteri listesi 2 kolon (mobilde yığılır).
   minmax(0,..) şart: aksi halde track, içindeki geniş tablonun min-content'ine göre büyüyüp taşar. */

/* Client paneli — full-width içerik */

/* ══════════════════════════════════════════════════════════════
   AURORA BACKGROUND — süzülen gradyan bloblar
   ══════════════════════════════════════════════════════════════ */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--aurora-opacity);
    contain: strict;
}
.aurora::before, .aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}
.aurora::before {
    width: 46vw; height: 46vw;
    top: -12vw; left: -8vw;
    background: radial-gradient(circle at center, var(--aurora-1) 0%, transparent 68%);
    animation: auroraA 26s ease-in-out infinite;
}
.aurora::after {
    width: 42vw; height: 42vw;
    bottom: -14vw; right: -6vw;
    background: radial-gradient(circle at center, var(--aurora-2) 0%, transparent 68%);
    animation: auroraB 32s ease-in-out infinite;
}
.aurora-3rd {
    position: absolute;
    width: 34vw; height: 34vw;
    top: 30%; left: 40%;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle at center, var(--aurora-3) 0%, transparent 70%);
    animation: auroraA 38s ease-in-out infinite reverse;
    will-change: transform;
}
@keyframes auroraA {
    0%   { transform: translate(-8%, -6%) scale(1); }
    50%  { transform: translate(10%, 14%) scale(1.22); }
    100% { transform: translate(-8%, -6%) scale(1); }
}
@keyframes auroraB {
    0%   { transform: translate(8%, 8%) scale(1.12); }
    50%  { transform: translate(-12%, -8%) scale(1); }
    100% { transform: translate(8%, 8%) scale(1.12); }
}
/* İçerik aurora'nın üstünde kalsın */
.layout { position: relative; z-index: 1; }
.login-page { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   ENTRANCE REVEAL — sayfa açılışında sıralı beliriş
   ══════════════════════════════════════════════════════════════ */
/* GİZLEME `.js` KOŞULLU OLMAK ZORUNDA. Eskiden `.reveal` koşulsuz opacity:0'dı ve
   "JS yoksa görünür kalsın" kuralı `.no-js` sınıfına dayanıyordu — ama o sınıf
   HİÇBİR YERDE eklenmiyor (bootstrap yalnızca `js` ekliyor). Sonuç: JS kapalıysa
   giderler/odemeler/ozet KPI kartları kalıcı olarak görünmezdi. */
.js .reveal, .js .metric-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
    will-change: opacity, transform;
}
.js .reveal.in, .js .metric-card.in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE — topbar / login tema düğmesi
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    overflow: hidden;
}
.theme-toggle:hover { border-color: var(--primary); box-shadow: var(--glow); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; transition: transform .5s cubic-bezier(.5,1.6,.4,1), opacity .3s; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }

/* Cam yüzey yardımcı sınıfı */
@supports not (backdrop-filter: blur(1px)) {
    .glass, .topbar { background: var(--card); }
}

/* Gradyan metin (başlıklar için) */

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — hareket hassasiyeti
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .aurora, .aurora-3rd { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RIVA PANEL — Aurora üzerine eklentiler
   Bileşen kurallarında çıplak hex YOK; renkler yalnızca aşağıdaki
   token bloğunda tanımlanır (paletin yaşadığı yer burasıdır).
   ══════════════════════════════════════════════════════════════ */

/* ── Etiket / avatar / durum paleti (10 slug + primary) ─────────── */
:root {
    --c-gray:    #64748B;  --c-gray-bg:    #F1F5F9;
    --c-red:     #EF4444;  --c-red-bg:     #FEF2F2;
    --c-orange:  #F97316;  --c-orange-bg:  #FFF7ED;
    --c-yellow:  #EAB308;  --c-yellow-bg:  #FEFCE8;
    --c-lime:    #65A30D;  --c-lime-bg:    #F7FEE7;
    --c-green:   #10B981;  --c-green-bg:   #ECFDF5;
    --c-sky:     #0EA5E9;  --c-sky-bg:     #F0F9FF;
    --c-blue:    #3B82F6;  --c-blue-bg:    #EFF6FF;
    --c-purple:  #8B5CF6;  --c-purple-bg:  #F5F3FF;
    --c-pink:    #EC4899;  --c-pink-bg:    #FDF2F8;
    --c-primary: #0075FD;  --c-primary-bg: #EAF4FF;
}
:root[data-theme="dark"] {
    --c-gray:    #94A3B8;  --c-gray-bg:    rgba(148,163,184,.14);
    --c-red:     #F87171;  --c-red-bg:     rgba(248,113,113,.14);
    --c-orange:  #FB923C;  --c-orange-bg:  rgba(251,146,60,.14);
    --c-yellow:  #FACC15;  --c-yellow-bg:  rgba(250,204,21,.14);
    --c-lime:    #A3E635;  --c-lime-bg:    rgba(163,230,53,.14);
    --c-green:   #34D399;  --c-green-bg:   rgba(52,211,153,.14);
    --c-sky:     #38BDF8;  --c-sky-bg:     rgba(56,189,248,.14);
    --c-blue:    #60A5FA;  --c-blue-bg:    rgba(96,165,250,.14);
    --c-purple:  #A78BFA;  --c-purple-bg:  rgba(167,139,250,.14);
    --c-pink:    #F472B6;  --c-pink-bg:    rgba(244,114,182,.14);
    --c-primary: #2EA3FF;  --c-primary-bg: rgba(46,163,255,.14);
}

/* Slug → yerel --ac / --ac-bg. Tüm bileşenler bu ikisini okur. */
.c-gray    { --ac: var(--c-gray);    --ac-bg: var(--c-gray-bg); }
.c-red     { --ac: var(--c-red);     --ac-bg: var(--c-red-bg); }
.c-orange  { --ac: var(--c-orange);  --ac-bg: var(--c-orange-bg); }
.c-yellow  { --ac: var(--c-yellow);  --ac-bg: var(--c-yellow-bg); }
.c-lime    { --ac: var(--c-lime);    --ac-bg: var(--c-lime-bg); }
.c-green   { --ac: var(--c-green);   --ac-bg: var(--c-green-bg); }
.c-sky     { --ac: var(--c-sky);     --ac-bg: var(--c-sky-bg); }
.c-blue    { --ac: var(--c-blue);    --ac-bg: var(--c-blue-bg); }
.c-purple  { --ac: var(--c-purple);  --ac-bg: var(--c-purple-bg); }
.c-pink    { --ac: var(--c-pink);    --ac-bg: var(--c-pink-bg); }
.c-primary { --ac: var(--c-primary); --ac-bg: var(--c-primary-bg); }

/* ── Etiket çipi ───────────────────────────────────────────────── */
.lb {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6;
    color: var(--ac); background: var(--ac-bg);
    border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent);
    white-space: nowrap;
}

/* ── Avatar ────────────────────────────────────────────────────── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; letter-spacing: .02em;
    color: #fff; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--ac, var(--primary)),
                color-mix(in srgb, var(--ac, var(--primary)) 55%, #ffffff));
    box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--ac, var(--primary)) 62%, transparent);
}
.avatar.av-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.av-md { width: 34px; height: 34px; font-size: 13px; }
.avatar.av-lg { width: 44px; height: 44px; font-size: 16px; }
.avatar-stack .avatar + .avatar { margin-left: -8px; border: 2px solid var(--card); }

/* ── Sidebar: pano ağacı ───────────────────────────────────────── */
.nav-item.nav-sub { padding-left: 30px; font-size: 13.5px; }
.nav-item.nav-quiet { color: var(--sidebar-dim); }

/* ── Teşhis satırı (ayarlar.php) ───────────────────────────────── */
.diag { display: grid; gap: 1px; background: var(--border);
        border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.diag-row { display: flex; align-items: center; justify-content: space-between;
            gap: 14px; padding: 12px 16px; background: var(--card); font-size: 14px; }
.diag-row .k { color: var(--muted); }
.diag-row .v { font-weight: 650; font-family: var(--font-display); }
.diag-ok    { color: var(--success); }
.diag-warn  { color: var(--warning); }
.diag-bad   { color: var(--danger); }
.diag-pill  { display: inline-flex; align-items: center; gap: 6px;
              padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.diag-pill.ok   { background: var(--success-light); color: var(--success); }
.diag-pill.warn { background: var(--warning-light); color: var(--warning); }
.diag-pill.bad  { background: var(--danger-light);  color: var(--danger); }

/* ── Kopyalanabilir kod satırı (cron URL'i vb.) ────────────────── */

/* ── Müşteri satırı ────────────────────────────────────────────── */
.cl-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); position: relative; overflow: hidden;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1);
}
.cl-row::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--ac, var(--primary));
}
.cl-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md), 0 8px 24px -10px color-mix(in srgb, var(--ac, var(--primary)) 25%, transparent);
    border-color: color-mix(in srgb, var(--ac, var(--primary)) 45%, var(--border));
}
.cl-row:active { transform: scale(0.985) !important; }
.cl-row .cl-ico {
    width: 38px; height: 38px; border-radius: var(--radius-sm); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--ac-bg, var(--primary-light)); color: var(--ac, var(--primary));
    font-weight: 700; font-size: 14px; overflow: hidden;
}
.cl-row .cl-ico img { width: 22px; height: 22px; object-fit: contain; }
.cl-row .cl-main { flex: 1; min-width: 0; }
.cl-row .cl-name { font-weight: 650; }
.cl-row .cl-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cl-row .cl-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* ── Genel yardımcılar ─────────────────────────────────────────── */
.stack { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.muted-sm { font-size: 12.5px; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ── Kaynak projede olmayan, burada gereken form/buton parçaları ── */
.btn-block { display: flex; width: 100%; justify-content: center; }
.form-check {
    display: flex; align-items: center; gap: 9px;
    margin: -4px 0 18px; font-size: 13.5px; color: var(--muted);
    cursor: pointer; user-select: none;
}
.form-check input[type=checkbox] {
    width: 17px; height: 17px; accent-color: var(--primary);
    cursor: pointer; flex: 0 0 auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* REGRESYON DÜZELTMESİ: tek kolona düşüş 900px'te olmalı. Bu kural eskiden
   dosyanın başındaki 900px medya bloğundaydı ve buradaki kanonik iki-kolon
   tanımı onu eziyordu — 641-900px arasında datetime alanları sıkışıyordu. */
@media (max-width: 900px) { .form-row { grid-template-columns: 1fr; } }
input[type=datetime-local], input[type=url], input[type=time] {
    width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit;
    color: var(--text); background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .18s, box-shadow .18s;
}
input[type=datetime-local]:focus, input[type=url]:focus, input[type=time]:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ── Video kuyruğu satırı (videolar.php) ───────────────────────────── */
.vq {
    position: relative; overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 15px 17px 15px 20px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

/* ── Bildirim satırı (bildirimler.php) ─────────────────────────────── */
.nt {
    position: relative; display: flex; gap: 13px; align-items: flex-start;
    padding: 14px 16px 14px 19px; overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .18s, box-shadow .18s;
}

/* ── Kanban (pano.php) ─────────────────────────────────────────────── */
.kb {
    display: flex; gap: 14px; align-items: flex-start;
    overflow-x: auto; padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
}

/* ── Mail kaydı satırı (ayarlar.php) ───────────────────────────────── */
.ml-row {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); overflow: hidden;
}
.ml-row summary {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 10px 13px; cursor: pointer; user-select: none; list-style: none;
    font-size: 13px;
}
.ml-row summary::-webkit-details-marker { display: none; }
.ml-row summary:hover { background: var(--surface-2); }
.ml-row[open] summary { border-bottom: 1px solid var(--border); }
.ml-detail {
    margin: 0; padding: 12px 13px; background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; line-height: 1.55; color: var(--muted);
    white-space: pre-wrap; word-break: break-word;
    max-height: 300px; overflow: auto;
}

/* ── Para sayfaları: Giderler & Ödemeler ───────────────────────────── */

/* Bekleyen (ödenecek / alınacak) KPI kartı — kaynak projede sabit açık-tema
   hex'leriyle (#FEF2F2/#B91C1C) yazılmıştı ve koyu temada okunmuyordu. */
.metric-card.mn-pending {
    background: color-mix(in srgb, var(--danger) 8%, var(--card));
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}
.metric-card.mn-pending .metric-label { color: var(--danger); }
.metric-card.mn-pending .metric-value { color: var(--danger); }

/* Grafik satırı: geniş ekranda 2 kolon (trend daha geniş) */
.mn-charts {
    display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; margin-top: 18px;
    /* start ŞART: stretch ile kısa kart uzun komşusuna kadar geriliyor ve
       "Bekleyenler" tek satırlık içerikle 300px boş kutu oluyordu. */
    align-items: start;
}
@media (max-width: 900px) { .mn-charts { grid-template-columns: 1fr; } }

/* maintainAspectRatio:false ile sabit yükseklikli sarmalayıcı ŞART */
.mn-canvas { position: relative; height: 210px; }

/* Aylık özet satırı */
.mn-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.mn-row:last-of-type { border-bottom: none; }
.mn-row-val { font-family: var(--font-display); font-weight: 650; }
.mn-split {
    display: flex; gap: 26px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.mn-split > div { display: grid; gap: 2px; }
.mn-split strong { font-family: var(--font-display); font-size: 15px; }

/* Panel içi tek satırlık form (düzenli gider ekleme) */
.mn-inline-form {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.mn-inline-form .form-group { margin: 0; flex: 1 1 130px; min-width: 110px; }
.mn-inline-form .btn { flex: 0 0 auto; }

/* Etiket seçici — checkbox'ı gizle, etiketin kendisi tıklanabilir olsun */
.mn-tagpick { gap: 7px; }
.mn-tag {
    display: inline-flex; align-items: center; cursor: pointer; user-select: none;
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border);
    transition: color .15s, background .15s, border-color .15s;
}
.mn-tag input { position: absolute; opacity: 0; width: 0; height: 0; }
.mn-tag:hover { border-color: var(--ac); }
.mn-tag:has(input:checked) {
    color: var(--ac); background: var(--ac-bg);
    border-color: color-mix(in srgb, var(--ac) 40%, transparent);
}
.mn-tag input:focus-visible + span { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }

/* Bekleyen satır vurgusu (tabloda) */
.mn-tr-pending { background: color-mix(in srgb, var(--danger) 6%, transparent); }

/* ══════════════════════════════════════════════════════════════
   MARKA + MÜŞTERİ BİLEŞENLERİ
   ══════════════════════════════════════════════════════════════ */

/* Marka logolarının çoğu beyaz zeminli geliyor (LYT gibi). Koyu temada
   beyaz blok gibi durmasın diye logo kutusunun arkasına açık bir yüzey
   koyuyoruz — her iki temada kasıtlı görünür. */
:root            { --logo-chip: #FFFFFF; --logo-chip-border: rgba(15,23,42,.10); }
:root[data-theme="dark"] { --logo-chip: #F4F6FB; --logo-chip-border: rgba(255,255,255,.14); }

/* ── Sidebar markası ── */
.brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: auto; flex: 0 0 auto; display: block; }
.brand-word {
    font-family: var(--font-display); font-weight: 700; font-size: 20px;
    letter-spacing: -.4px; color: #fff; line-height: 1;
}
.brand-word em {
    font-style: normal; font-weight: 700;
    background: linear-gradient(92deg, var(--grad-a), var(--grad-c));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* Giriş / kurulum ekranında marka aydınlık kart üstünde → metin tema rengiyle */
.brand-word-lg { font-size: 27px; color: var(--text); }
.login-mark { display: block; margin: 0 auto 10px; height: auto; }

/* ── Müşteri madalyonu (logo veya baş harf) ── */
.cl-logo {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; border-radius: 9px; overflow: hidden;
    font-weight: 700; letter-spacing: .01em; line-height: 1;
    color: var(--ac, var(--primary));
    background: var(--ac-bg, var(--primary-light));
}
.cl-logo.has-img {
    background: var(--logo-chip);
    box-shadow: inset 0 0 0 1px var(--logo-chip-border);
    padding: 3px;
}
.cl-logo.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Sidebar müşteri satırı ── */
.nav-item.nav-client {
    display: flex; align-items: center; gap: 10px;
    padding-top: 8px; padding-bottom: 8px; font-size: 14px;
}
.nav-item.nav-client .cl-logo { border-radius: 7px; }
.nav-item.nav-client span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-item .avatar {
    flex: 0 0 auto; z-index: 2;
    border: 2px solid var(--card);
}
.fd-item.c-primary .avatar { box-shadow: 0 0 0 2px var(--c-primary); }
.fd-item.c-green .avatar   { box-shadow: 0 0 0 2px var(--c-green); }
.fd-item.c-blue .avatar    { box-shadow: 0 0 0 2px var(--c-blue); }
.fd-item.c-sky .avatar     { box-shadow: 0 0 0 2px var(--c-sky); }
.fd-item.c-purple .avatar  { box-shadow: 0 0 0 2px var(--c-purple); }
.fd-item.c-yellow .avatar  { box-shadow: 0 0 0 2px var(--c-yellow); }
.fd-item.c-gray .avatar    { box-shadow: 0 0 0 2px var(--c-gray); }

/* ── Müşteri sayfası başlığı ── */
@media (max-width: 700px) {
}

/* ══════════════════════════════════════════════════════════════
   GÖREV LİSTESİ — durum şeritleri (musteri.php)
   ══════════════════════════════════════════════════════════════ */
.mc-grid { display: grid; gap: 18px; grid-template-columns: 1fr 420px; margin-top: 20px; }

/* ══════════════════════════════════════════════════════════════
   GÖREV DETAYI (gorev.php)
   ══════════════════════════════════════════════════════════════ */
.gd-sep { color: var(--text-3); }

/* Video projesi satırı (videolar.php) */
.vp-row {
    display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit;
    padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); transition: border-color .16s, transform .16s;
}
.nt-assign input:focus-visible + .avatar { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   v6 — KART MODALI · ZENGİN METİN · TEPKİLER · ETİKETLER
   ══════════════════════════════════════════════════════════════ */

/* ── Modal ────────────────────────────────────────────────────────
   Görev satırı gerçek bir <a href="gorev.php?id=N">; modal.js üstüne biniyor.
   Overlay body'nin sonuna JS ile ekleniyor, bu yüzden burada sadece stili var.
   ─────────────────────────────────────────────────────────────── */
.md-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: color-mix(in srgb, #0B1120 62%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 34px 18px;
    animation: mdFade .2s ease-out;
}
@keyframes mdFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mdRise { from { transform: translateY(20px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

/* ── Biçimlendirme çubuğu ───────────────────────────────────────
   `hidden` niteliği JS'siz tarayıcıda kalsın diye duruyor; html.js
   (no-FOUC bootstrap'ın eklediği sınıf) varsa gösteriyoruz.
   ─────────────────────────────────────────────────────────────── */
html.js .rt-bar[hidden] { display: flex; }
@keyframes popShow {
    from { opacity: 0; transform: translateY(6px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pop button.is-on { background: var(--primary-light); color: var(--primary); font-weight: 650; }
.rx.is-on { background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 42%, transparent); }
.rx.is-on b { color: var(--primary); }
.gd-tick.is-on { color: var(--success); }
@keyframes gdFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 9px transparent; }
}

/* .gd = görev detayının kökü. Hem tam sayfada hem modalde aynı; modalde
   layout'un sayfa üstü boşluğu olmadığı için ilk uyarı kutusu yapışmasın. */
.gd > .alert:first-child { margin-top: 0; }

/* ── v6 düzeltmeleri: ikonlu düğmeler ve kalabalık görev satırı ────────────
   1) .btn içindeki satır içi SVG'lerin width/height NİTELİĞİ YOK (currentColor
      ile boyanmaları için bilinçli). Kural olmadığı için esnek kapsayıcıda
      sıfıra iniyor ve ikon-düğmeler BOŞ pil olarak görünüyordu (müşteri
      sayfası başlığındaki videolar/ödemeler/ayarlar kısayolları).
   2) Görev satırına etiket çipleri de eklenince .tl-meta bütün genişliği alıp
      başlığı "Uni…"ye eziyordu. Satır artık sarıyor, başlığın taban genişliği
      var ve kalabalıkta meta alt satıra geçiyor.
   ──────────────────────────────────────────────────────────────────────── */
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn-sm svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════
   v7 — DÜZ AKIŞ · DURUM ÇİPİ · KATLANAN YORUM GİRİŞİ · CİLA
   ══════════════════════════════════════════════════════════════
   Trello'nun kartında kutu yok: bölümler ince başlıklarla düz akıyor.
   Beş çerçeveli `.card` yerine `<section class="gd-sec">` + `.gd-sec-h`.
   ══════════════════════════════════════════════════════════════ */

/* ── Eksik SVG boyut kuralları ────────────────────────────────────
   İkonların width/height NİTELİĞİ yok (currentColor ile boyanmaları için
   bilinçli). Kural olmayan kapsayıcıda tarayıcı "intrinsic ratio var, intrinsic
   size yok" durumuna düşüp varsayılan 150×150 uyguluyor. Üç kapsayıcıda kural
   hiç yoktu; toplam 12 çağrı yeri bozuk görünüyordu.
   ──────────────────────────────────────────────────────────────── */
.empty-state .icon svg { width: 40px; height: 40px; color: var(--text-3); }
.page-title svg       { width: 20px; height: 20px; flex: 0 0 auto; }
.page-title           { display: inline-flex; align-items: center; gap: 9px; }
.lb svg               { width: 12px; height: 12px; flex: 0 0 auto; }
.gd-tick.is-on { color: var(--success); }
/* JS kapalıysa menü işe yaramaz → gizle ve beş faceti birden göster. */
html:not(.js) .gd-addfacet { display: none; }
html:not(.js) .gd-facet[hidden] { display: block; }
.gd-chipbtn .tt, .gd-chipbtn .lb {
    padding: 0; background: transparent; border: none; box-shadow: none;
}
.gd-mini.is-on { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent);
                 background: var(--success-light); }
.gd-sec-h .muted-sm, .gd-sec-h .lb, .gd-sec-h .due-chip { margin-left: auto; }
.gd-sec-h .muted-sm + .gd-linkbtn { margin-left: 0; }
@keyframes gdFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* Açıklama: gösterim ↔ düzenleme takası.
   html.js koşulu ŞART: JS yoksa .is-editing sınıfı hiç eklenmiyor ve form kalıcı
   olarak gizli kalıyordu — açıklama düzenlenemez hale geliyordu. */
html.js .gd-edit { display: none; }
html.js .gd-sec.is-editing .gd-edit { display: block; }
html.js .gd-sec.is-editing .gd-show { display: none; }
/* JS'SİZ GERİ DÜŞÜŞ: `hidden` niteliğini yalnızca JS kaldırıyor. JS olmadan
   bu üç şey kalıcı olarak erişilemez kalırdı — yorum düzenlenemez, yanıt
   yazılamaz, boş "Alt Maddeler"/"Ekler" bölümleri hiç açılamazdı. */
html:not(.js) .cm-editform[hidden],
html:not(.js) .cm-replyform[hidden],
html:not(.js) .gd-sec[hidden] { display: block; }
html:not(.js) .pop[hidden] { display: none; }

/* ── Durum çipi (lists.color yok, renk sıradan türetiliyor) ──── */
.st {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 8px; white-space: nowrap;
    font-size: 12px; font-weight: 650; line-height: 1.5;
    color: var(--ac); background: var(--ac-bg);
    border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
}
.tl-row.is-owner-bilal .tl-people .avatar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-blue) 16%, transparent),
                0 4px 10px -8px var(--c-blue);
}
.card.is-quiet { opacity: .78; }
.card.is-quiet:hover { opacity: 1; }
.tl-meta .lb, .tl-meta .tt, .tl-meta .vs, .tl-meta .due-chip, .tl-chip {
    min-height: 24px;
    border-radius: 7px;
    flex: 0 0 auto;
}
.tl-meta .lb {
    font-weight: 650;
    background: color-mix(in srgb, var(--ac-bg) 62%, var(--card));
    border-color: color-mix(in srgb, var(--ac) 22%, transparent);
}
.tl-meta .lb.c-red {
    color: color-mix(in srgb, var(--c-red) 78%, var(--text));
    background: color-mix(in srgb, var(--c-red-bg) 52%, var(--card));
}

/* Kişi seçici (isler.php) */
.pick {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    padding: 4px 12px 4px 5px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
    transition: color .15s, background .15s, border-color .15s;
}
.pick.is-on { color: var(--primary); background: var(--primary-light);
              border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* ── Katlanan yorum girişi ───────────────────────────────────
   html.js koşulu ŞART: JS yoksa .is-open hiç eklenmiyor ve çubuk/yükleme kutusu
   kalıcı gizli kalırdı. Bu haliyle JS'siz her şey açık — sadeleşmiyor, bozulmuyor.
   ──────────────────────────────────────────────────────────── */
.cm-form {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: var(--shadow);
}
html.js .cm-form:not(.is-open) .cm-more { display: none; }
html.js .cm-form:not(.is-open) textarea.cm-ta {
    min-height: 0; height: 44px; resize: none; overflow: hidden;
    transition: height .15s;
}
.cm-form.is-open textarea.cm-ta { min-height: 84px; }
.pop-form .form-group { margin-bottom: 10px; }
.pop-form .form-group:last-of-type { margin-bottom: 12px; }

/* JS kapalıysa ataç çalışmaz → ham dosya alanını göster.
   (Eski contenteditable kutu da JS'siz çalışmıyordu, bu bir iyileştirme.) */
html:not(.js) input[type=file][hidden] { display: block; margin-top: 8px; }

/* ── TEK ÇİP DİLİ ────────────────────────────────────────────
   Aynı satırda dört farklı çip yan yana geliyordu ve şekilleri farklıydı:
   .lb 999px pill · .tt 6px · .st 8px · .due-chip ayrı. Hepsi aynı yarıçap ve
   aynı yazı boyutuna çekildi — "ne ne değil" karışıklığının yarısı buydu. */
.lb, .tt, .st, .due-chip {
    border-radius: 7px;
    font-size: 11.5px;
    line-height: 1.55;
}
.lb, .tt { padding: 3px 9px; }

@media (min-width: 761px) and (max-width: 1280px) {
    .tl-meta .lb, .tl-meta .tt, .tl-meta .vs, .tl-meta .due-chip, .tl-chip {
        font-size: 11px;
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* ── Mobil (dosyanın SONUNDA olmak zorunda) ───────────────── */
@media (max-width: 760px) {
    .tl-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title status"
            "meta people";
        align-items: start;
        row-gap: 9px;
        padding: 12px;
    }
    .tl-titlebox { grid-area: title; }
    .tl-title  { white-space: normal; }
    .tl-copy { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .tl-meta { grid-area: meta; justify-content: flex-start; }
    .tl-people { grid-area: people; min-width: 38px; justify-content: flex-end; }
    .tl-status { grid-area: status; justify-self: end; margin-left: 0; }
    .tl-acts { margin-left: 0; }
    .st { min-width: 104px; }
    .gd-facets { gap: 18px; }
    .gd-title  { font-size: 20px; }
    .at-add    { flex-direction: column; align-items: stretch; }
    .at-add .gd-qbtn { justify-content: center; }
}
.gd-tick.is-on {
    border-color: var(--success) !important;
    background: var(--success) !important;
    color: #FFFFFF !important;
}

/* Mobil Uyumlar */
@media (max-width: 760px) {
    .gd-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .gd-side {
        border-left: none !important;
        border-top: 1px solid var(--modal-border);
        padding: 24px;
    }
}
.nt-card .card-body {
    padding: 18px 20px 20px;
}
.nt-head .card-title {
    font-size: 14px;
}
.nt-form .form-group {
    margin-bottom: 14px;
}

@media (max-width: 760px) {
    .nt-submit .btn {
        width: 100%;
        justify-content: center;
    }
}
.gd-tick.is-on {
    border-color: color-mix(in srgb, var(--success) 48%, transparent) !important;
    background: color-mix(in srgb, var(--success-light) 78%, var(--card)) !important;
    color: var(--success) !important;
}
.mc-side > .card {
    position: sticky;
    top: 82px;
    height: calc(100svh - 172px);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mc-side > .card > .card-header {
    flex: 0 0 auto;
}
.mc-side > .card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .mc-side > .card {
        position: static;
        height: min(720px, calc(100svh - 96px));
        min-height: 480px;
    }
}

@media (max-width: 760px) {
    .mc-side > .card {
        height: min(680px, calc(100svh - 40px));
        min-height: 420px;
    }
}
.gd-sec-h .muted-sm + .muted-sm {
    margin-left: 0;
}

/* ==========================================================================
   v14 — Baştan sona sadeleşme paketi
   ========================================================================== */
.settings-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.settings-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.settings-tabs a:hover {
    color: var(--text);
    border-color: var(--border-strong);
    text-decoration: none;
}
.settings-tabs a.is-on {
    color: var(--primary);
    background: var(--primary-light);
    border-color: color-mix(in srgb, var(--primary) 36%, transparent);
}
.settings-tabs svg { width: 15px; height: 15px; }
.settings-card { margin-top: 0; }
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    word-break: break-all;
}
.nt-card .card-header { padding-bottom: 12px; }
.vq-drawer .card-body {
    padding-top: 18px;
}
.vq .lb {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vq-actions .btn {
    min-height: 36px;
}

.metrics-grid .metric-card {
    box-shadow: none;
}
.empty-state {
    padding-block: 22px;
}

@media (max-width: 760px) {
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tabs a {
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .vq .lb { max-width: 180px; }
}
.mc-main > .card,
.mc-side > .card {
    border-radius: 14px;
}
.mc-main > .card > .card-header {
    min-height: 58px;
    padding: 16px 18px;
}
.mc-main > .card > .card-body {
    padding: 14px 16px 16px;
}
.tl-meta .lb,
.tl-meta .tt,
.tl-meta .vs,
.tl-meta .due-chip,
.tl-chip {
    min-height: 26px;
    max-width: 128px;
    padding: 4px 8px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
}
.tl-meta .tt.c-purple,
.tl-meta .lb.c-purple {
    color: #7C4DFF;
    background: color-mix(in srgb, #7C4DFF 13%, var(--card));
    border-color: color-mix(in srgb, #7C4DFF 28%, transparent);
}
.tl-meta .lb.c-red,
.tl-meta .due-chip.is-late,
.tl-meta .due-chip.is-overdue {
    color: #EF4444;
    background: color-mix(in srgb, #EF4444 11%, var(--card));
    border-color: color-mix(in srgb, #EF4444 30%, transparent);
}
.tl-meta .lb.c-orange {
    color: #F97316;
    background: color-mix(in srgb, #F97316 12%, var(--card));
    border-color: color-mix(in srgb, #F97316 28%, transparent);
}
.st.c-gray {
    color: #64748B;
    background: color-mix(in srgb, #64748B 10%, var(--card));
    border-color: color-mix(in srgb, #64748B 24%, transparent);
}
.st.c-blue,
.st.c-sky {
    color: #2563EB;
    background: color-mix(in srgb, #2563EB 11%, var(--card));
    border-color: color-mix(in srgb, #2563EB 30%, transparent);
}
.st.c-yellow,
.st.c-orange {
    color: #F59E0B;
    background: color-mix(in srgb, #F59E0B 12%, var(--card));
    border-color: color-mix(in srgb, #F59E0B 30%, transparent);
}
.mc-side > .card {
    height: calc(100svh - 160px);
}

@media (max-width: 1320px) {
    .tl-meta .lb,
    .tl-meta .tt,
    .tl-meta .vs,
    .tl-meta .due-chip,
    .tl-chip {
        max-width: 112px;
    }
}

@media (max-width: 1100px) {
    .mc-side > .card {
        height: min(720px, calc(100svh - 96px));
    }
}

@media (max-width: 760px) {
    .mc-main > .card > .card-body {
        padding: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   FİNANS (v8) — gelir / gider / ortak payı bileşenleri

   Kurallar: çıplak hex yok, renkler --c-<slug> token'larından; para daima
   sağa yaslı ve display fontuyla (rakamlar hizalansın); artı/eksi ANLAMI
   yalnızca renkle değil işaretle de veriliyor (renk körlüğü).
   Bu blok dosyanın SONUNDA duruyor — mobil medya sorguları da içinde.
   ══════════════════════════════════════════════════════════════════════════ */

.fin-pos { color: var(--c-green); }
.fin-neg { color: var(--c-red); }

/* Tutar ASLA satır bölmemeli: "14.800,07 ₺" ikinci satıra düşen bir "₺" ile
   iki satıra yayılıyordu ve sütun okunmuyordu. Para hücreleri tek parça. */
.fin-pos, .fin-neg, .table-scroll td strong { white-space: nowrap; }

/* KPI kartının altındaki açıklama satırı */
.metric-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Geniş grafik (12 aylık seri) daha yüksek olmalı, aylar sıkışmasın */
.mn-canvas-lg { height: 320px; }


/* ── Yüzde çubuğu (kaynak / ortak dağılımı) ────────────────────────────── */
.fin-bar-row { margin-bottom: 12px; }
.fin-bar-row:last-child { margin-bottom: 0; }
.fin-bar-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; margin-bottom: 5px;
}
.fin-bar-head strong { font-family: var(--font-display); font-size: 13.5px; }
.fin-bar {
    height: 7px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--text-3) 18%, transparent);
}
.fin-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--ac, var(--c-primary));
    transition: width .35s ease;
}


/* ── Karışık hareket / bekleyen satırı ─────────────────────────────────── */
.fin-line {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.fin-line:last-child { border-bottom: none; }
.fin-line-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ac, var(--c-gray));
}
.fin-line-note {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-line strong {
    font-family: var(--font-display); font-size: 13.5px; flex: 0 0 auto;
}



/* ── Filtre grupları (kaynak + kalem iki satır) ────────────────────────── */
.fin-filters { display: grid; gap: 8px; margin-bottom: 14px; }
.fin-filter-k { min-width: 52px; }

/* ── Kaynak listesi: logo + ad tek hücrede ─────────────────────────────── */
.fin-src { display: inline-flex; align-items: center; gap: 8px; }
.fin-logo-cur { display: inline-flex; align-items: center; }

@media (max-width: 760px) {
    .mn-canvas-lg { height: 260px; }
}

/* Sabit gider listesinin altındaki toplam satırı — liste ile aynı ızgarada
   durması için .fin-line ile aynı yatay hizada, ama üstten çizgili. */
.fin-total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
    font-size: 13px; color: var(--muted);
}
.fin-total-row strong { font-family: var(--font-display); font-size: 15px; }

/* Tablo satırındaki işlem düğmeleri alt satıra kaymasın: dar sütunda
   "Düzenle / Durdur Sil" diye ikiye bölünüp satır yüksekliğini iki katına
   çıkarıyordu. Taşma zaten .table-scroll ile yatay kaydırmaya düşüyor. */
.table-scroll td .chips { flex-wrap: nowrap; }
.table-scroll td .chips .btn { white-space: nowrap; }

/* Hareketler listesi: gelir/gider yön işareti. Renk TEK BAŞINA ayırt edici
   değil (renk körlüğü) — ok yönü ve tutardaki +/− işareti de aynı bilgiyi
   taşıyor, üç sinyal birden. */
.fin-kind {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 13px; font-weight: 700; line-height: 1;
}
.fin-kind-in  { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 14%, transparent); }
.fin-kind-out { color: var(--c-red);   background: color-mix(in srgb, var(--c-red) 14%, transparent); }

/* Tutar sütunu sağa yaslı: rakamlar alt alta hizalanınca liste okunuyor. */
.ta-r { text-align: right; }

/* Hareketler: "Ne" hücresi — etiket satırı + altında ince not. */
.fin-what { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-what-note { margin-top: 3px; max-width: 320px; }
.fin-catform { margin: 0; }
.fin-catform select { max-width: 240px; }

/* Tutar + para birimi tek satırda: iki ayrı form-group yapmak "232,85" ile "$"
   arasına boşluk koyup ikisinin aynı sayı olduğunu gizliyordu. */
.fin-amount { display: flex; gap: 6px; }
.fin-amount input { flex: 1 1 auto; min-width: 0; }
.fin-amount select { flex: 0 0 auto; width: auto; min-width: 64px; }

/* Listede TL tutarın altındaki orijinal döviz tutarı. */
.fin-orig { margin-top: 2px; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM GEÇİŞİ (18 Ağu 2026)

   Temel karar: RENK ANCAK ANLAM TAŞIYORSA. Önceki hâlde dört KPI kartı da
   renkliydi, her liste satırında renkli bir kategori hapı vardı ve göz hiçbir
   yere tutunamıyordu. Renk artık yalnızca (a) küçük bir nokta ve (b) işareti
   gerçekten önemli olan sayıda.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rakamlar hizalı olsun — orantılı rakamlarda alt alta tutarlar kayıyor. */
.metric-value, .fin-line strong, .fin-bar-head strong, .fin-total-row strong,
.table-scroll td strong, .mn-row-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* KPI: yalnızca "hero" kart renkli sayı taşır, diğerleri nötr.
   Gelir yeşil + gider kırmızı + kâr yeşil aynı anda yanınca hiyerarşi yoktu. */
.metric-card .metric-value { color: var(--text); letter-spacing: -.02em; }
.metric-card.is-hero .metric-value.fin-pos { color: var(--success); }
.metric-card.is-hero .metric-value.fin-neg { color: var(--danger); }
.metric-card.is-hero { border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.metric-sub { color: var(--text-3); font-size: 12px; margin-top: 4px; }

/* Liste satırı — kategori hapı yerine sakin metin + küçük renk noktası.
   "Son Hareketler"de sekiz tane dolgulu hap yan yana gelince liste okunmuyordu. */
.fin-line { gap: 10px; }
.fin-line-note { color: var(--text-3); }
.fin-line .fin-name { font-weight: 600; color: var(--text); }
.fin-line .fin-meta { color: var(--text-3); font-size: 12.5px; }

/* Kart başlığı: biraz daha ferah, alt çizgi daha ince */
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 15px; letter-spacing: -.01em; }
.card-body  { padding: 18px 20px; }

/* Boş durum artık kutuyu şişirmiyor */
.card-body > .empty-state { padding: 22px 0; }
.card-body > .empty-state p { margin: 0; color: var(--text-3); font-size: 13.5px; }


/* İki bağımsız sütun (satır eşlemesi değil) — kısa kart uzun komşusunun
   yanında boşluk bırakmasın diye. Kartlar kendi sütununda üst üste yığılır. */
.fin-cols {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 16px; align-items: start; margin-top: 18px;
}
.fin-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .fin-cols { grid-template-columns: 1fr; } }

/* Hareketler tablosu — "Ne" sütununda ad ile rozet aynı satırda kalsın.
   Sarınca satır yüksekliği ikiye katlanıyor ve liste tırtıklı görünüyordu. */
.fin-what { white-space: nowrap; }
.fin-what strong, .fin-what .lb { vertical-align: middle; }

/* "sabit" rozeti bilgi taşıyor ama satırın kahramanı değil — sessizleştirildi. */
.table-scroll .lb.lb-quiet {
    background: transparent; color: var(--text-3);
    border: 1px solid var(--border); font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   Daire grafik kartları (fin_donut_card)
   ══════════════════════════════════════════════════════════════════════════ */

/* Gelir ve gider daireleri EŞİT genişlikte — biri diğerinden önemli değil. */
.fin-donuts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; align-items: start; margin-top: 18px;
}
@media (max-width: 1100px) { .fin-donuts { grid-template-columns: 1fr; } }

/* Solda halka, sağda rakamlı liste.

   KIRILMA NOKTASI KAP GENİŞLİĞİNE BAĞLI, pencereye değil. Pencere tabanlı
   kuralla 1101–1320px arasında kart ~380px'e düşüyor, ad sütunu 1-2 harfe
   iniyordu ("Gö…"); kart "kim" sorusunu cevaplayamaz hâle geliyordu. Kartın
   kendi genişliği ölçülünce bu bant tamamen kapanıyor.

   @container desteklemeyen tarayıcı için altta pencere tabanlı yedek var. */
.fin-donuts > .card { container-type: inline-size; }

.fin-donut {
    display: grid; grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px; align-items: center;
}
/* min-width:0 ŞART: canvas kendi genişliğini ızgara rayının tabanı yapıp
   dar ekranda sayfayı yatay kaydırmaya sokuyordu. */
.fin-donut .mn-canvas { height: 180px; min-width: 0; }

/* 520px: yan yana düzenin gerçek maliyeti — halka 180 + boşluk 20 + ad ~140
   + yüzde 34 + tutar ~110. Bunun altında ad sütunu "Göç…" hâline geliyor,
   yani kart bilgi taşımayı bırakıyor. Ölçülerek bulundu, tahminle değil. */
@container (max-width: 520px) {
    .fin-donut { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
    .fin-donut .mn-canvas { width: 100%; max-width: 260px; height: 200px; }
    .fin-legend { width: 100%; }
}
/* Yedek (container query yoksa): dar pencerede tek sütun */
@supports not (container-type: inline-size) {
    /* Kap sorgusu yoksa pencereden hesapla: içerik = W − 240 (kenar çubuğu)
       − ~56 (dolgu); kart = (içerik − 16) / 2. Kart 520'nin altına 1360px
       civarında düşüyor. */
    @media (max-width: 1360px) {
        .fin-donut { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
        .fin-donut .mn-canvas { width: 100%; max-width: 260px; }
    }
}

.fin-legend { display: flex; flex-direction: column; min-width: 0; }
.fin-legend-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.fin-legend-row:last-child { border-bottom: 0; }
.fin-legend-dot {
    width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto;
    background: var(--ac, var(--text-3));
}
.fin-legend-name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
}
/* Kontrast: --text-3 açık temada 2.56:1 veriyordu, 12px sayısal veri için
   WCAG AA sınırının (4.5:1) çok altında. --muted okunur seviyeye çıkarıyor.
   Ayrıca sabit genişlik: yüzde sütunu satırdan satıra kaymasın. */
.fin-legend-pct {
    color: var(--muted); font-size: 12px;
    flex: 0 0 auto; min-width: 34px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.fin-legend-val {
    flex: 0 0 auto; white-space: nowrap;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}