/* ============================================
   KASA YÖNETİM SİSTEMİ — v6.0
   Seven Creative Design
   Premium SaaS Design System
   ============================================ */

/* ---- Design Tokens ---- */
:root {
  /* Primary */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-light: #EEF2FF;
  --color-primary-50: rgba(79, 70, 229, 0.08);
  --color-primary-100: rgba(79, 70, 229, 0.12);

  /* Semantic */
  --color-success: #16A34A;
  --color-success-light: #F0FDF4;
  --color-warning: #F59E0B;
  --color-warning-light: #FFFBEB;
  --color-danger: #EF4444;
  --color-danger-light: #FEF2F2;

  /* Legacy (backward compatibility) */
  --brand-primary: #4F46E5;
  --brand-dark: #0F172A;
  --color-income: #16A34A;
  --color-expense: #EF4444;
  --color-net: #4F46E5;
  --color-transfer: #8B5CF6;

  /* Surfaces */
  --color-bg: #F7F8FC;
  --color-surface: #FFFFFF;
  --color-sidebar: #0F172A;
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);
  --color-sidebar-active: rgba(79, 70, 229, 0.15);
  --color-sidebar-border: rgba(255, 255, 255, 0.08);

  /* Text */
  --color-text: #111827;
  --color-text-secondary: #64748B;
  --color-text-tertiary: #94A3B8;
  --color-text-inverse: #F8FAFC;
  --color-text-secondary-inverse: #94A3B8;

  /* Border */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Transitions */
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--color-bg);
  font-family: var(--font-sans);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

::selection { background: var(--color-primary-50); color: var(--color-primary); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F172A;
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
  top: -200px; right: -100px;
}

.login-page::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
  bottom: -150px; left: -100px;
}

.login-box {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.1);
}

.login-logo { text-align: center; margin-bottom: 32px; }

.login-logo .brand {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
}

.login-logo .brand span { color: var(--color-primary); }

.login-logo .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 1px;
}

.login-box h2 {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
}

.login-box .form-group { margin-bottom: 20px; }

.login-box label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}

.login-box input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.login-box input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

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

.login-box button {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-box button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.login-box button:active { transform: translateY(0); }

/* ============================================
   TO PARBAR (app-header)
   ============================================ */
.app-header {
  background: var(--color-surface);
  color: var(--color-text);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
  border-bottom: 1px solid var(--color-border);
}

.app-header .title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}

.app-header .title i { color: var(--color-text-secondary); font-size: 18px; }

.app-header .title .safe-badge {
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.app-header .actions { display: flex; gap: 8px; }

.app-header .actions a {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-header .actions a:hover {
  background: var(--color-border-light);
  color: var(--color-text);
}

.app-header .actions .btn-settings {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.app-header .actions .btn-settings:hover {
  background: var(--color-border-light);
  border-color: var(--color-text-tertiary);
}

.app-header .actions .btn-logout {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-border);
}

.app-header .actions .btn-logout:hover {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}

/* ============================================
   LAYOUT (sidebar + content)
   ============================================ */
.app-body {
  display: flex;
  min-height: calc(100vh - 57px);
}

.app-sidebar {
  width: 240px;
  background: var(--color-sidebar);
  padding: 16px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--color-text-secondary-inverse);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  position: relative;
}

.app-sidebar a:hover {
  color: #fff;
  background: var(--color-sidebar-hover);
}

.app-sidebar a.active {
  color: #fff;
  background: var(--color-sidebar-active);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.app-sidebar a.active i { color: #A5B4FC; }

.app-sidebar a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--color-text-secondary-inverse);
  transition: color var(--transition-fast);
}

.app-sidebar a:hover i { color: #fff; }

.app-sidebar .sidebar-header {
  padding: 8px 12px 4px;
  margin: 8px 0 4px;
  border-top: 1px solid var(--color-sidebar-border);
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.app-sidebar .sidebar-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

/* User info at sidebar bottom */
.sidebar-user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--color-sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { color: var(--color-text-tertiary); font-size: 11px; }

.app-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  max-width: 100%;
}

/* ============================================
   FOOTER
   ============================================ */
.app-footer {
  padding: 16px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.app-footer .brand {
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 24px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i { color: var(--color-text-secondary); font-size: 15px; }

/* ============================================
   STAT CARDS (KPI)
   ============================================ */
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 20px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.stat-card.income::before { background: var(--color-success); }
.stat-card.expense::before { background: var(--color-danger); }
.stat-card.net::before { background: var(--color-primary); }
.stat-card.transfer::before { background: var(--color-transfer); }

.stat-card .label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-card .label i { font-size: 12px; }

.stat-card .value {
  font-size: 24px;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.stat-card.income .value { color: var(--color-success); }
.stat-card.expense .value { color: var(--color-danger); }
.stat-card.net .value { color: var(--color-primary); }

/* ---- Branch Cards ---- */
.branch-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 20px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.branch-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

.branch-card .branch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.branch-card .branch-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.branch-card .branch-name i { color: var(--color-text-secondary); font-size: 14px; }

.branch-card .branch-total {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.branch-card .progress-bar {
  height: 6px;
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 4px 0;
}

.branch-card .progress-bar .fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.branch-card .progress-bar.income .fill { background: var(--color-success); }
.branch-card .progress-bar.expense .fill { background: var(--color-danger); }

.branch-card .progress-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

.branch-card .branch-footer {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   GRIDS
   ============================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom: 16px; }

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}

.form-group small {
  color: var(--color-text-secondary);
  font-size: 11px;
  margin-top: 4px;
  display: block;
}

.form-control, select, input[type="text"], input[type="number"],
input[type="date"], input[type="password"], input[type="email"], input[type="file"], textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  height: 42px;
}

textarea { height: auto; min-height: 80px; resize: vertical; padding-top: 10px; }

.form-control:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
  outline: none;
}

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

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

input[type="date"] {
  cursor: pointer;
}

input[type="file"] {
  padding: 8px 12px;
  height: auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

/* ---- Checkbox ---- */
input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 4px 12px rgba(79,70,229,0.25); }

.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover { background: #15803D; box-shadow: 0 4px 12px rgba(22,163,74,0.25); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #DC2626; box-shadow: 0 4px 12px rgba(239,68,68,0.25); }

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

.btn-warning { background: var(--color-warning); color: #fff; }
.btn-warning:hover { background: #D97706; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border-light);
  color: var(--color-text);
  border-color: var(--color-text-tertiary);
}

.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-income { background: var(--color-success-light); color: var(--color-success); }
.badge-expense { background: var(--color-danger-light); color: var(--color-danger); }
.badge-transfer { background: #F5F3FF; color: #8B5CF6; }
.badge-admin { background: #FEF2F2; color: #DC2626; }
.badge-active { background: var(--color-success-light); color: var(--color-success); }
.badge-passive { background: #F1F5F9; color: #64748B; }
.badge-expired { background: var(--color-danger-light); color: var(--color-danger); }
.badge-pending { background: var(--color-warning-light); color: var(--color-warning); }
.badge-draft { background: #F1F5F9; color: #64748B; }
.badge-sent { background: var(--color-primary-light); color: var(--color-primary); }
.badge-accepted { background: var(--color-success-light); color: var(--color-success); }
.badge-rejected { background: var(--color-danger-light); color: var(--color-danger); }
.badge-completed { background: var(--color-success-light); color: var(--color-success); }
.badge-cancelled { background: var(--color-danger-light); color: var(--color-danger); }

/* ============================================
   ALERTS
   ============================================ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.alert-success { background: var(--color-success-light); color: #15803D; border-color: #BBF7D0; }
.alert-error { background: var(--color-danger-light); color: #DC2626; border-color: #FECACA; }
.alert-warning { background: var(--color-warning-light); color: #D97706; border-color: #FDE68A; }
.alert-info { background: var(--color-primary-light); color: var(--color-primary); border-color: #C7D2FE; }

/* ============================================
   TABLES
   ============================================ */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.data-table th {
  background: transparent;
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

table.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  vertical-align: middle;
}

table.data-table tr:last-child td { border-bottom: none; }

table.data-table tr:hover { background: var(--color-border-light); }

table.data-table .amount-in { color: var(--color-success); font-weight: 600; font-variant-numeric: tabular-nums; }
table.data-table .amount-out { color: var(--color-danger); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Empty State ---- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-tertiary);
  font-size: 14px;
}

.empty-state i { font-size: 36px; margin-bottom: 12px; display: block; color: var(--color-border); }

/* ============================================
   PROGRESS (budget)
   ============================================ */
.progress-track {
  height: 8px;
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-fill.green { background: var(--color-success); }
.progress-fill.red { background: var(--color-danger); }
.progress-fill.orange { background: var(--color-warning); }

/* ============================================
   CHARTS
   ============================================ */
.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
}

/* ============================================
   TRANSFER BOX
   ============================================ */
.transfer-box { padding: 0; }

.transfer-box h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================
   CARI AUTOCOMPLETE
   ============================================ */
.cari-search-container { position: relative; }

.cari-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
  margin-top: 4px;
}

.cari-dropdown.show { display: block; }

.cari-dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-fast);
}

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

.cari-dropdown-item:hover, .cari-dropdown-item.active {
  background: var(--color-primary-light);
}

.cari-item-name { font-weight: 500; font-size: 13.5px; color: var(--color-text); display: block; }

.cari-item-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.cari-item-meta span { display: flex; align-items: center; gap: 4px; }

.cari-no-results { padding: 16px; text-align: center; color: var(--color-text-tertiary); font-size: 13px; }

.cari-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

.cari-remove {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.cari-remove:hover { opacity: 1; }

.cari-search-container input.loading {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%234F46E5' stroke-width='2' stroke-dasharray='24' stroke-dashoffset='8'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ============================================
   CODE / MISC
   ============================================ */
code {
  background: var(--color-border-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .app-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: left var(--transition);
    width: 260px;
    overflow-y: auto;
  }

  .app-sidebar.open { left: 0; }

  .app-content { padding: 16px; }

  .app-header { padding: 12px 16px; }
  .app-header .title { font-size: 14px; }
  .app-header .actions a span { display: none; }
  .app-header .actions a { padding: 8px 10px; }

  .card { padding: 16px; }
  .stat-card { padding: 16px; }
  .stat-card .value { font-size: 20px; }

  .mobile-menu-toggle {
    display: flex !important;
  }
}

.mobile-menu-toggle {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform var(--transition);
}

.mobile-menu-toggle:hover { transform: scale(1.05); }

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

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

/* ---- Utility ---- */
.text-muted { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.font-mono { font-variant-numeric: tabular-nums; }

/* ============================================
   UTILITY ADDITIONS (v6.0)
   ============================================ */

/* 3-column form row */
.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .form-row-3 { grid-template-columns: 1fr; }
}

/* Stat card without colored border */
.stat-card.plain::before { background: var(--color-warning); }

/* Card with left accent */
.card-accent {
  border-left: 3px solid var(--color-primary);
}

/* Info card */
.card-info {
  background: #EFF6FF;
  border-left: 3px solid var(--color-primary);
}
.card-info .card-title { border-bottom: none; margin-bottom: 8px; }

/* Section heading */
.section-heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 24px;
}

/* Tooltip on hover */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #0F172A;
  color: #F8FAFC;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  white-space: nowrap;
  margin-bottom: 6px;
  z-index: 1000;
  pointer-events: none;
}

/* Clean empty space after app-header */
.app-header + .alert { margin-top: 20px; }

/* Responsive form-row override support */
.form-row[style*="grid-template-columns: 1fr 1fr 1fr"] {
  grid-template-columns: 1fr 1fr 1fr !important;
}
@media (max-width: 640px) {
  .form-row[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   ENTERPRISE UI LAYER — v6.1
   Mevcut bileşen sınıflarını bozmadan premium görünüm katmanı.
   ============================================ */
:root {
  --color-bg: #F5F7FB;
  --color-sidebar: #0B1220;
  --color-sidebar-hover: rgba(255,255,255,.055);
  --color-sidebar-active: rgba(99,102,241,.15);
  --color-border: #E6EAF0;
  --color-border-light: #F0F3F7;
  --color-text: #101828;
  --color-text-secondary: #667085;
  --color-text-tertiary: #98A2B3;
  --shadow-card: 0 1px 2px rgba(16,24,40,.035), 0 1px 3px rgba(16,24,40,.05);
  --shadow-card-hover: 0 12px 28px rgba(16,24,40,.08), 0 3px 8px rgba(16,24,40,.04);
}

body { background: linear-gradient(180deg, #F8FAFD 0, var(--color-bg) 320px); }
.app-body { min-height: 100vh; }
.app-sidebar {
  width: 264px;
  min-height: 100vh;
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 0;
  gap: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.16), transparent 28%),
    var(--color-sidebar);
  border-right: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
}

.sidebar-brand { padding: 20px 18px 14px; }
.app-sidebar .sidebar-brand-link {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  gap: 11px;
  color: #fff;
}
.app-sidebar .sidebar-brand-link:hover { background: transparent; color: #fff; }
.sidebar-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #6366F1, #4F46E5);
  box-shadow: 0 8px 24px rgba(79,70,229,.28), inset 0 1px 0 rgba(255,255,255,.2);
  flex: 0 0 auto;
}
.app-sidebar .sidebar-brand-mark i { width: auto; color: #fff; font-size: 15px; }
.sidebar-brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sidebar-brand-copy strong { font-size: 14px; letter-spacing: -.15px; font-weight: 700; color: #fff; }
.sidebar-brand-copy small { margin-top: 5px; font-size: 9px; letter-spacing: 1.45px; text-transform: uppercase; color: #77839A; font-weight: 700; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.app-sidebar .sidebar-header {
  margin: 17px 10px 7px;
  padding: 0;
  border: 0;
  color: #66738A;
  font-size: 9px;
  letter-spacing: 1.55px;
  font-weight: 700;
}
.app-sidebar .sidebar-header:first-child { padding: 0; margin-top: 8px; }
.app-sidebar .sidebar-scroll > a {
  min-height: 42px;
  margin-bottom: 2px;
  padding: 9px 11px;
  border-left: 0;
  border-radius: 9px;
  gap: 11px;
  font-size: 12.5px;
  color: #98A5BA;
}
.app-sidebar .sidebar-scroll > a i { width: 19px; font-size: 13.5px; color: #718096; }
.app-sidebar .sidebar-scroll > a:hover { background: rgba(255,255,255,.055); color: #E6EAF2; }
.app-sidebar .sidebar-scroll > a:hover i { color: #C9D1DF; }
.app-sidebar .sidebar-scroll > a.active {
  color: #F5F7FF;
  background: linear-gradient(90deg, rgba(99,102,241,.19), rgba(99,102,241,.09));
  box-shadow: inset 3px 0 0 #818CF8;
}
.app-sidebar .sidebar-scroll > a.active i { color: #A5B4FC; }

.sidebar-user { margin-top: 0; padding: 14px 16px 16px; border-top-color: rgba(255,255,255,.07); background: rgba(0,0,0,.08); }
.sidebar-user-avatar { width: 36px; height: 36px; background: linear-gradient(145deg, #334155, #1E293B); border: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.sidebar-user-name { font-size: 12.5px; font-weight: 600; color: #E8ECF3; }
.sidebar-user-role { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 10px; color: #7E8BA1; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 2px rgba(52,211,153,.09); }
.app-sidebar .sidebar-user-logout { width: 30px; height: 30px; padding: 0; border: 0; justify-content: center; color: #718096; border-radius: 8px; }
.app-sidebar .sidebar-user-logout:hover { background: rgba(244,63,94,.09); color: #FDA4AF; }
.app-sidebar .sidebar-user-logout i { width: auto; font-size: 12px; color: inherit; }

.app-content { padding: 0 30px 36px; overflow: visible; min-width: 0; }
.app-header {
  margin: 0 -30px;
  padding: 18px 30px;
  min-height: 72px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(226,232,240,.8);
  box-shadow: none;
}
.dashboard-title-wrap { display: block !important; line-height: 1; }
.page-eyebrow { margin-bottom: 7px; color: var(--color-text-tertiary); font-size: 9px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.25px; }
.page-title-row { display: flex; align-items: center; gap: 10px; }
.page-title { font-size: 17px; font-weight: 700; color: var(--color-text); letter-spacing: -.3px; }
.app-header .title .safe-badge {
  margin: 0;
  padding: 4px 8px;
  background: #ECFDF3;
  color: #027A48;
  border: 1px solid #D1FADF;
  font-size: 9px;
  letter-spacing: .35px;
}
.app-header .title .safe-badge i { color: #12B76A; font-size: 8px; }
.app-header .actions a { height: 36px; padding: 0 12px; border-radius: 9px; font-size: 11.5px; font-weight: 600; }
.app-header .actions .topbar-primary-action { background: #4F46E5; color: #fff; border-color: #4F46E5; box-shadow: 0 3px 8px rgba(79,70,229,.18); }
.app-header .actions .topbar-primary-action:hover { background: #4338CA; color: #fff; }

.dashboard-shell { max-width: 1540px; margin: 0 auto; padding-top: 26px; }
.dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.dashboard-welcome-kicker { margin-bottom: 6px; color: #4F46E5; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; text-transform: uppercase; }
.dashboard-welcome h1 { margin: 0; color: #101828; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.75px; font-weight: 750; }
.dashboard-welcome-text { max-width: 690px; margin-top: 7px; color: #667085; font-size: 12.5px; line-height: 1.6; }
.period-chip { min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(255,255,255,.72); border: 1px solid #E6EAF0; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.period-chip > i { width: 30px; height: 30px; display: grid; place-items: center; background: #F2F4F7; color: #475467; border-radius: 8px; }
.period-chip span { display: flex; flex-direction: column; min-width: 0; }
.period-chip small { color: #98A2B3; font-size: 8px; text-transform: uppercase; font-weight: 700; letter-spacing: .75px; }
.period-chip strong { margin-top: 3px; color: #344054; font-size: 10.5px; white-space: nowrap; font-weight: 650; }
.dashboard-alert { border-radius: 12px; align-items: flex-start; }
.dashboard-alert > div { display: flex; flex-direction: column; gap: 2px; }
.dashboard-alert span { font-size: 11.5px; font-weight: 450; opacity: .9; }

.dashboard-kpi-grid { gap: 16px; margin-bottom: 30px !important; }
.premium-stat-card { min-height: 174px; padding: 19px 20px 18px; border-color: #EAECF0; border-radius: 15px; box-shadow: var(--shadow-card); overflow: hidden; }
.premium-stat-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; border-radius: 15px 15px 0 0; opacity: .92; }
.premium-stat-card:hover { transform: translateY(-2px); }
.stat-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.stat-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 13px; }
.income .stat-icon { background: #ECFDF3; color: #039855; }
.expense .stat-icon { background: #FFF1F3; color: #E11D48; }
.net .stat-icon { background: #EEF2FF; color: #4F46E5; }
.stat-context { padding: 3px 8px; background: #F8FAFC; border: 1px solid #EEF2F6; border-radius: 999px; color: #98A2B3; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.premium-stat-card .label { color: #667085; font-size: 9.5px; letter-spacing: .85px; }
.premium-stat-card .value { margin-top: 7px; color: #101828; font-size: clamp(22px, 2.15vw, 29px); line-height: 1.15; font-weight: 750; letter-spacing: -1px; }
.premium-stat-card.income .value, .premium-stat-card.expense .value, .premium-stat-card.net .value { color: #101828; }
.stat-caption { margin-top: 9px; color: #98A2B3; font-size: 10.5px; }

.dashboard-section { margin-top: 30px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.section-kicker { display: block; margin-bottom: 3px; color: #98A2B3; font-size: 8.5px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; }
.section-head h2, .filter-card-head h2 { margin: 0; color: #1D2939; font-size: 14px; font-weight: 700; letter-spacing: -.18px; }
.section-meta { color: #98A2B3; font-size: 10.5px; }
.section-link, .filter-reset { display: inline-flex; align-items: center; gap: 6px; color: #4F46E5; font-size: 10.5px; font-weight: 650; text-decoration: none; }
.section-link:hover, .filter-reset:hover { color: #4338CA; }

.dashboard-branch-grid { gap: 14px; }
.premium-branch-card { padding: 17px; border-color: #EAECF0; border-radius: 14px; box-shadow: var(--shadow-card); }
.premium-branch-card .branch-header { margin-bottom: 14px; min-height: 30px; }
.premium-branch-card .branch-name { gap: 8px; font-size: 11.5px; }
.branch-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #F2F4F7; }
.premium-branch-card .branch-name .branch-icon i { color: #667085; font-size: 11px; }
.branch-central-badge { padding: 3px 7px; font-size: 8px; letter-spacing: .5px; }
.branch-balance-label { color: #98A2B3; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .75px; }
.premium-branch-card .branch-total { margin-top: 3px; font-size: 18px; color: #101828; }
.positive { color: #039855 !important; }
.negative { color: #E11D48 !important; }
.branch-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px 0; margin: 13px 0 10px; border-top: 1px solid #F0F2F5; border-bottom: 1px solid #F0F2F5; }
.branch-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.branch-metrics span { color: #98A2B3; font-size: 8.5px; }
.branch-metrics strong { font-size: 9.5px; font-weight: 650; }
.branch-progress-group { display: grid; gap: 4px; }
.premium-branch-card .progress-label { margin-top: 2px; font-size: 8.5px; }
.premium-branch-card .progress-label strong { color: #667085; font-size: 8.5px; }
.premium-branch-card .progress-bar { height: 4px; margin: 0 0 3px; background: #F2F4F7; }
.dashboard-empty-card { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 110px; color: #98A2B3; font-size: 11px; }

.dashboard-chart-grid { gap: 16px; margin-bottom: 0; }
.chart-card { margin-bottom: 0; padding: 19px; border-color: #EAECF0; border-radius: 15px; box-shadow: var(--shadow-card); }
.chart-card-title { margin-bottom: 10px; padding-bottom: 14px; }
.chart-card-title > div { display: flex; align-items: center; gap: 10px; }
.card-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: 11px; }
.card-icon-indigo { color: #4F46E5; background: #EEF2FF; }
.card-icon-violet { color: #7C3AED; background: #F5F3FF; }
.chart-card-title span:last-child { display: flex; flex-direction: column; gap: 2px; }
.chart-card-title strong { color: #344054; font-size: 11.5px; font-weight: 700; }
.chart-card-title small { color: #98A2B3; font-size: 9.5px; font-weight: 450; }
.chart-container { height: 300px; }

.filter-card { padding: 20px; border-color: #EAECF0; border-radius: 15px; box-shadow: var(--shadow-card); }
.filter-card-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 15px; margin-bottom: 17px; border-bottom: 1px solid #F0F2F5; }
.filter-grid { display: grid; gap: 14px; }
.filter-grid-3 { grid-template-columns: repeat(3, 1fr); }
.filter-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dashboard-filter-form .form-group { margin-bottom: 13px; }
.dashboard-filter-form label { font-size: 10.5px; color: #475467; font-weight: 600; }
.dashboard-filter-form input, .dashboard-filter-form select { height: 40px; padding-left: 12px; border: 1px solid #DDE2E8; border-radius: 9px; background-color: #FCFCFD; font-size: 11.5px; }
.dashboard-filter-form input:focus, .dashboard-filter-form select:focus { background-color: #fff; }
.filter-actions { display: flex; gap: 8px; padding-top: 2px; }
.filter-actions .btn { min-height: 36px; padding: 0 13px; border-radius: 9px; font-size: 10.5px; }
.export-action i { color: #039855; }

.transactions-card { padding: 0; overflow: hidden; border-color: #EAECF0; border-radius: 15px; box-shadow: var(--shadow-card); }
.dashboard-table-wrap { overflow-x: auto; }
.dashboard-table { font-size: 11px !important; }
.dashboard-table th { padding: 11px 14px; background: #FCFCFD; color: #98A2B3; border-bottom-color: #EAECF0; font-size: 8.5px; letter-spacing: .75px; }
.dashboard-table td { padding: 12px 14px; color: #475467; border-bottom-color: #F2F4F7; white-space: nowrap; }
.dashboard-table tbody tr { transition: background var(--transition-fast); }
.dashboard-table tbody tr:hover { background: #FAFBFC; }
.text-right { text-align: right !important; }
.table-date { color: #667085; font-variant-numeric: tabular-nums; }
.table-branch { display: inline-flex; align-items: center; gap: 6px; color: #344054; font-weight: 600; }
.table-branch i { color: #98A2B3; font-size: 9px; }
.table-muted { color: #98A2B3; }
.table-description { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.dashboard-table .badge { padding: 3px 7px; font-size: 8.5px; }
.dashboard-table .amount-in, .dashboard-table .amount-out { color: inherit; }
.amount-pill { display: inline-flex; padding: 4px 7px; border-radius: 7px; font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.amount-pill.income { color: #027A48; background: #ECFDF3; }
.amount-pill.expense { color: #C01048; background: #FFF1F3; }
.table-action { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 7px; }

.mobile-menu-toggle { width: 44px; height: 44px; right: 18px; bottom: 18px; font-size: 16px; box-shadow: 0 10px 28px rgba(79,70,229,.26); }

@media (min-width: 1440px) {
  .app-content { padding-left: 36px; padding-right: 36px; }
  .app-header { margin-left: -36px; margin-right: -36px; padding-left: 36px; padding-right: 36px; }
}

@media (max-width: 1200px) {
  .app-sidebar { width: 238px; }
  .dashboard-branch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .app-content { padding-left: 20px; padding-right: 20px; }
  .app-header { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .dashboard-welcome { align-items: flex-start; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .premium-stat-card { min-height: 145px; }
  .filter-grid-3, .filter-grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .app-sidebar { width: 270px; left: -286px; position: fixed; }
  .app-content { padding: 0 15px 28px; }
  .app-header { margin: 0 -15px; padding: 13px 15px; min-height: 62px; }
  .page-eyebrow, .app-header .title .safe-badge { display: none; }
  .page-title { font-size: 15px; }
  .dashboard-shell { padding-top: 20px; }
  .dashboard-welcome { flex-direction: column; gap: 14px; }
  .dashboard-welcome-text { font-size: 11.5px; }
  .period-chip { min-width: 0; width: 100%; }
  .dashboard-branch-grid { grid-template-columns: 1fr 1fr; }
  .chart-container { height: 260px; }
}

@media (max-width: 640px) {
  .dashboard-welcome h1 { font-size: 22px; }
  .dashboard-branch-grid, .filter-grid-3, .filter-grid-2 { grid-template-columns: 1fr; }
  .filter-card-head { align-items: flex-start; }
  .filter-actions { flex-direction: column; }
  .filter-actions .btn { justify-content: center; width: 100%; }
  .section-head { align-items: center; }
  .section-meta { display: none; }
  .chart-container { height: 245px; }
  .dashboard-table-wrap { overflow: visible; }
  .dashboard-table thead { display: none; }
  .dashboard-table, .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; }
  .dashboard-table tbody tr { padding: 12px 14px; border-bottom: 1px solid #EAECF0; }
  .dashboard-table tbody tr:last-child { border-bottom: 0; }
  .dashboard-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; border: 0; white-space: normal; text-align: right !important; }
  .dashboard-table td::before { content: attr(data-label); flex: 0 0 94px; color: #98A2B3; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; text-align: left; }
  .dashboard-table .empty-state { display: block; padding: 35px 10px; text-align: center !important; }
  .dashboard-table .empty-state::before { display: none; }
  .table-description { max-width: 190px; text-align: right; }
  .app-footer { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================
   ENTERPRISE UI v6.2 — Uygulama Geneli
   Dashboard dışındaki operasyon ve yönetim ekranları.
   İş mantığı / form isimleri / endpoint yapısı değiştirilmez.
   ============================================ */

.app-content:not(.page-dashboard) {
  --page-card-radius: 15px;
  --page-control-radius: 9px;
  --page-border: #EAECF0;
  --page-muted-border: #F2F4F7;
  --page-control-bg: #FCFCFD;
}

.app-content:not(.page-dashboard) > .alert:first-of-type,
.app-content:not(.page-dashboard) > .app-header + .alert {
  margin-top: 20px;
}

/* Sayfa üst barı */
.app-content:not(.page-dashboard) .app-header {
  margin: 0 -30px 26px;
  padding: 17px 30px;
  min-height: 72px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,232,240,.8);
  box-shadow: none;
}

.app-content:not(.page-dashboard) .app-header .title {
  gap: 11px;
  color: #101828;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.28px;
}

.app-content:not(.page-dashboard) .app-header .title > i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #EEF2FF;
  color: #4F46E5;
  font-size: 13px;
}

.app-content:not(.page-dashboard) .app-header .actions {
  align-items: center;
  gap: 7px;
}

.app-content:not(.page-dashboard) .app-header .actions a {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 650;
}

.app-content:not(.page-dashboard) .app-header .actions .btn-settings {
  background: #fff;
  border-color: #E4E7EC;
  color: #475467;
}

.app-content:not(.page-dashboard) .app-header .actions .btn-settings:hover {
  border-color: #D0D5DD;
  background: #F9FAFB;
  color: #1D2939;
}

/* Alert */
.app-content:not(.page-dashboard) .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 550;
}

/* Kart sistemi */
.app-content:not(.page-dashboard) .card {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--page-border);
  border-radius: var(--page-card-radius);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.app-content:not(.page-dashboard) .card:hover {
  border-color: #E4E7EC;
}

.app-content:not(.page-dashboard) .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: -2px 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid #F0F2F5;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.08px;
}

.app-content:not(.page-dashboard) .card-title > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #F2F4F7;
  color: #667085;
  font-size: 11px;
}

/* KPI / özet kartları */
.app-content:not(.page-dashboard) .grid-3 > .stat-card,
.app-content:not(.page-dashboard) .grid-4 > .stat-card {
  min-height: 118px;
  padding: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid #EAECF0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.app-content:not(.page-dashboard) .stat-card::after {
  content: '';
  position: absolute;
  inset: auto -25px -34px auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(79,70,229,.035);
  pointer-events: none;
}

.app-content:not(.page-dashboard) .stat-card .label {
  color: #667085;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
}

.app-content:not(.page-dashboard) .stat-card .value {
  margin-top: 8px;
  color: #101828;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.8px;
}

/* Formlar */
.app-content:not(.page-dashboard) .form-group {
  margin-bottom: 16px;
}

.app-content:not(.page-dashboard) .form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #475467;
  font-size: 10.5px;
  font-weight: 650;
}

.app-content:not(.page-dashboard) .form-group label i {
  color: #98A2B3;
  font-size: 10px;
}

.app-content:not(.page-dashboard) input:not([type="checkbox"]):not([type="radio"]),
.app-content:not(.page-dashboard) select,
.app-content:not(.page-dashboard) textarea {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #DDE2E8;
  border-radius: var(--page-control-radius);
  background: var(--page-control-bg);
  color: #344054;
  font-family: var(--font-sans);
  font-size: 11.5px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.app-content:not(.page-dashboard) input:not([type="checkbox"]):not([type="radio"]):hover,
.app-content:not(.page-dashboard) select:hover,
.app-content:not(.page-dashboard) textarea:hover {
  border-color: #C9CED6;
  background: #fff;
}

.app-content:not(.page-dashboard) input:not([type="checkbox"]):not([type="radio"]):focus,
.app-content:not(.page-dashboard) select:focus,
.app-content:not(.page-dashboard) textarea:focus {
  outline: none;
  border-color: #818CF8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.09);
}

.app-content:not(.page-dashboard) input::placeholder,
.app-content:not(.page-dashboard) textarea::placeholder { color: #B1B8C4; }

.app-content:not(.page-dashboard) .form-group small {
  display: block;
  margin-top: 5px;
  color: #98A2B3 !important;
  font-size: 9.5px !important;
  line-height: 1.5;
}

.app-content:not(.page-dashboard) .form-row {
  gap: 14px;
}

/* Butonlar */
.app-content:not(.page-dashboard) .btn {
  min-height: 36px;
  padding: 0 13px;
  gap: 7px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 650;
  box-shadow: none;
}

.app-content:not(.page-dashboard) .btn-primary {
  background: #4F46E5;
  border-color: #4F46E5;
}

.app-content:not(.page-dashboard) .btn-primary:hover {
  background: #4338CA;
  border-color: #4338CA;
  transform: translateY(-1px);
}

.app-content:not(.page-dashboard) .btn-secondary {
  background: #fff;
  border-color: #E4E7EC;
  color: #475467;
}

.app-content:not(.page-dashboard) .btn-secondary:hover {
  background: #F9FAFB;
  border-color: #D0D5DD;
  color: #344054;
}

.app-content:not(.page-dashboard) .btn-danger {
  background: #fff;
  border-color: #FECDD3;
  color: #E11D48;
}

.app-content:not(.page-dashboard) .btn-danger:hover {
  background: #FFF1F3;
  border-color: #FDA4AF;
  color: #BE123C;
}

.app-content:not(.page-dashboard) .btn-success {
  background: #fff;
  border-color: #ABEFC6;
  color: #027A48;
}

.app-content:not(.page-dashboard) .btn-success:hover {
  background: #ECFDF3;
  border-color: #75E0A7;
}

/* Veri tabloları */
.app-content:not(.page-dashboard) .table-wrap {
  overflow-x: auto;
  margin: 0 -20px -20px;
  border-radius: 0 0 var(--page-card-radius) var(--page-card-radius);
}

.app-content:not(.page-dashboard) .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}

.app-content:not(.page-dashboard) .data-table thead th {
  padding: 11px 13px;
  border-bottom: 1px solid #EAECF0;
  background: #FCFCFD;
  color: #98A2B3;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-content:not(.page-dashboard) .data-table tbody td {
  padding: 12px 13px;
  border-bottom: 1px solid #F2F4F7;
  color: #475467;
  vertical-align: middle;
}

.app-content:not(.page-dashboard) .data-table tbody tr:last-child td { border-bottom: 0; }
.app-content:not(.page-dashboard) .data-table tbody tr:hover { background: #FAFBFC; }
.app-content:not(.page-dashboard) .data-table .amount-in,
.app-content:not(.page-dashboard) .data-table .amount-out { font-weight: 700; font-variant-numeric: tabular-nums; }
.app-content:not(.page-dashboard) .data-table .badge { padding: 4px 7px; border-radius: 7px; font-size: 8.5px; font-weight: 700; }

/* Boş durum */
.app-content:not(.page-dashboard) .empty-state {
  padding: 42px 20px !important;
  color: #98A2B3;
  font-size: 11px;
  text-align: center;
}
.app-content:not(.page-dashboard) .empty-state > i,
.app-content:not(.page-dashboard) td.empty-state > i { margin-bottom: 8px; color: #C7CDD6; font-size: 22px; }

/* Sayfalama */
.app-content:not(.page-dashboard) .pagination,
.app-content:not(.page-dashboard) [style*="justify-content: center"][style*="margin-top: 20px"] {
  gap: 5px !important;
  align-items: center;
}

/* Hareket ekleme */
.page-transaction-add > div[style*="max-width: 700px"] { max-width: 780px !important; }
.page-transaction-add .card { padding: 24px; }
.page-transaction-add .cari-search-container { position: relative; }
.page-transaction-add form > [style*="display: flex"][style*="margin-top: 24px"] {
  padding-top: 18px;
  border-top: 1px solid #F2F4F7;
}

/* Hareketler */
.page-transactions > .grid-3 { gap: 14px; }
.page-transactions > .card:first-of-type form {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
}
.page-transactions > .card:first-of-type form > [style*="grid-column: 1 / -1"] { grid-column: 1 / -1 !important; }
.page-transactions .data-table td:nth-last-child(1) { white-space: nowrap; }

/* Transfer */
.page-transfer .grid-2 { gap: 18px; align-items: start; }
.page-transfer .transfer-box {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-transfer .transfer-box h3 {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #E0E7FF;
  border-radius: 10px;
  background: #F5F7FF;
  color: #4338CA;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .65px;
}

/* Raporlar */
.page-reports > .card:first-of-type form {
  gap: 12px !important;
  padding: 0;
}
.page-reports .grid-2 { gap: 18px; }
.page-reports .chart-container { min-height: 300px; }
.page-reports canvas { max-width: 100%; }

/* Bütçe */
.page-budget > .card:first-of-type { padding-bottom: 5px; }
.page-budget .progress-track { background: #F2F4F7 !important; }
.page-budget .progress-fill { border-radius: 999px !important; }
.page-budget .card-info {
  border-color: #DDE7FF;
  background: linear-gradient(145deg,#F8FAFF,#FFFFFF);
}
.page-budget .card-info ul { color: #667085 !important; font-size: 11px !important; line-height: 1.75 !important; }

/* Ayarlar */
.app-content[class*="page-settings-"] > .grid-4 { gap: 12px; }
.app-content[class*="page-settings-"] > .grid-4 .stat-card { min-height: 104px; }
.app-content[class*="page-settings-"] .card { max-width: none; }
.app-content[class*="page-settings-"] .card > form[style*="margin-bottom: 20px"] {
  padding-bottom: 18px;
  border-bottom: 1px solid #F2F4F7;
}
.page-settings-general .card:last-of-type > div[style*="grid-template-columns"] {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid #EAECF0;
  border-radius: 10px;
}
.page-settings-general .card:last-of-type > div[style*="grid-template-columns"] > div {
  padding: 12px 14px;
  border-bottom: 1px solid #F2F4F7;
}
.page-settings-audit .data-table td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Autocomplete */
.app-content:not(.page-dashboard) .cari-dropdown {
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid #E4E7EC;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(16,24,40,.12);
}
.app-content:not(.page-dashboard) .cari-dropdown-item { padding: 10px 12px; }
.app-content:not(.page-dashboard) .cari-dropdown-item:hover,
.app-content:not(.page-dashboard) .cari-dropdown-item.active { background: #F5F7FF; }

/* Klavye erişilebilirliği */
.app-content:not(.page-dashboard) a:focus-visible,
.app-content:not(.page-dashboard) button:focus-visible,
.app-content:not(.page-dashboard) input:focus-visible,
.app-content:not(.page-dashboard) select:focus-visible,
.app-content:not(.page-dashboard) textarea:focus-visible {
  outline: 2px solid #818CF8;
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .page-transactions > .card:first-of-type form { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .page-budget .form-row[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 900px) {
  .app-content:not(.page-dashboard) .app-header { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .app-content:not(.page-dashboard) .grid-3,
  .app-content:not(.page-dashboard) .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-transfer .grid-2,
  .page-reports .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app-content:not(.page-dashboard) .app-header {
    margin: 0 -15px 20px;
    padding: 12px 70px 12px 15px;
    min-height: 62px;
  }
  .app-content:not(.page-dashboard) .app-header .title { font-size: 14px; }
  .app-content:not(.page-dashboard) .app-header .title > i { width: 31px; height: 31px; font-size: 11px; }
  .app-content:not(.page-dashboard) .app-header .actions { display: none; }
  .app-content:not(.page-dashboard) .card { padding: 17px; border-radius: 13px; }
  .app-content:not(.page-dashboard) .table-wrap { margin-left: -17px; margin-right: -17px; margin-bottom: -17px; }
  .page-transactions > .card:first-of-type form,
  .page-budget .form-row[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .page-transaction-add .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-content:not(.page-dashboard) .grid-3,
  .app-content:not(.page-dashboard) .grid-4 { grid-template-columns: 1fr; }

  /* Bütün standart tabloları mobil bilgi kartına dönüştür. JS başlıklardan data-label üretir. */
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready thead { display: none; }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready,
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready tbody,
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready tr,
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready td { display: block; width: 100%; }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready tbody tr {
    padding: 11px 14px;
    border-bottom: 1px solid #EAECF0;
  }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready tbody tr:last-child { border-bottom: 0; }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready td::before {
    content: attr(data-label);
    flex: 0 0 105px;
    color: #98A2B3;
    font-size: 7.5px;
    font-weight: 750;
    letter-spacing: .55px;
    text-align: left;
    text-transform: uppercase;
  }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready td.empty-state { display: block; text-align: center; }
  .app-content:not(.page-dashboard) .data-table.is-mobile-ready td.empty-state::before { display: none; }
  .app-content:not(.page-dashboard) .table-wrap { overflow: visible; }
  .page-transaction-add form > [style*="display: flex"][style*="margin-top: 24px"] { flex-direction: column; }
  .page-transaction-add form > [style*="display: flex"][style*="margin-top: 24px"] .btn { width: 100%; justify-content: center; }
}

/* ============================================
   Enterprise UI v6.3 — Ayarlar Merkezi & Yetki Matrisi
   ============================================ */
.settings-hero {
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:28px 30px !important;
  background:linear-gradient(135deg,#0F172A 0%,#172554 58%,#1E3A8A 100%) !important;
  border:0 !important; color:#fff;
}
.settings-hero h2 { margin:7px 0 8px; color:#fff; font-size:22px; letter-spacing:-.45px; }
.settings-hero p { margin:0; max-width:760px; color:rgba(255,255,255,.7); line-height:1.65; font-size:12px; }
.settings-eyebrow { color:#A5B4FC; font-size:9px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }
.settings-hero-metric { min-width:120px; padding-left:24px; border-left:1px solid rgba(255,255,255,.14); text-align:center; }
.settings-hero-metric strong { display:block; font-size:30px; line-height:1; }
.settings-hero-metric span { display:block; margin-top:7px; color:rgba(255,255,255,.6); font-size:9px; text-transform:uppercase; letter-spacing:.8px; }
.settings-section { margin:24px 0; }
.settings-section-title { margin-bottom:10px; }
.settings-section-title h2 { margin:0; color:#344054; font-size:11px; letter-spacing:.75px; text-transform:uppercase; }
.settings-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.settings-module-card { display:flex; align-items:center; gap:13px; min-height:92px; padding:17px; border:1px solid #EAECF0; border-radius:14px; background:#fff; text-decoration:none !important; box-shadow:0 1px 2px rgba(16,24,40,.03); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.settings-module-card:hover { transform:translateY(-2px); border-color:#C7D2FE; box-shadow:0 10px 24px rgba(16,24,40,.07); }
.settings-module-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:11px; background:#F4F6FF; color:#4F46E5; }
.settings-module-copy { min-width:0; flex:1; }
.settings-module-copy strong { display:block; margin-bottom:5px; color:#101828; font-size:12px; }
.settings-module-copy small { display:block; color:#667085; font-size:9.5px; line-height:1.5; }
.settings-module-arrow { color:#C5CAD3; font-size:9px; }

.permission-context { display:flex; gap:8px; align-items:center; min-height:38px; }
.permission-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; padding:14px 15px; border:1px solid #EAECF0; border-radius:12px; background:#F9FAFB; }
.permission-toolbar strong { display:block; color:#101828; font-size:11px; }
.permission-toolbar small { display:block; margin-top:3px; color:#667085; font-size:9px; }
.permission-toolbar-actions { display:flex; flex-wrap:wrap; gap:7px; }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.permission-group { overflow:hidden; border:1px solid #EAECF0; border-radius:14px; background:#fff; }
.permission-group-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #EAECF0; background:#F9FAFB; }
.permission-group-head h3 { margin:0; color:#344054; font-size:10px; letter-spacing:.55px; text-transform:uppercase; }
.permission-group-toggle { display:flex; align-items:center; gap:6px; margin:0 !important; color:#667085; font-size:9px !important; cursor:pointer; }
.permission-item { display:flex !important; align-items:flex-start; gap:10px; margin:0 !important; padding:11px 14px; border-bottom:1px solid #F2F4F7; cursor:pointer; transition:background .15s ease; }
.permission-item:last-child { border-bottom:0; }
.permission-item:hover { background:#FAFBFF; }
.permission-item input { width:16px !important; height:16px !important; margin-top:1px; accent-color:#4F46E5; }
.permission-item span { min-width:0; }
.permission-item strong { display:block; color:#344054; font-size:10px; font-weight:650; }
.permission-item small { display:block; margin-top:3px; color:#98A2B3; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:7.5px; }
.permission-savebar { position:sticky; bottom:12px; z-index:4; display:flex; justify-content:flex-end; margin-top:16px; padding:10px; border:1px solid #E4E7EC; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 8px 28px rgba(16,24,40,.1); backdrop-filter:blur(12px); }
.integration-token { display:block; margin-top:8px; padding:10px 12px; border-radius:8px; background:rgba(16,24,40,.08); word-break:break-all; user-select:all; }
.integration-create-form { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #EAECF0; }
.table-subtext { display:block; max-width:300px; margin-top:3px; color:#98A2B3; font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:1100px) { .settings-module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .permission-grid { grid-template-columns:1fr; } .permission-toolbar { align-items:flex-start; flex-direction:column; } }
@media (max-width:640px) {
  .settings-hero { align-items:flex-start; flex-direction:column; padding:22px !important; }
  .settings-hero-metric { width:100%; padding:14px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.14); text-align:left; }
  .settings-module-grid { grid-template-columns:1fr; }
  .permission-toolbar-actions { width:100%; }
  .permission-toolbar-actions .btn { flex:1; justify-content:center; }
}

/* ============================================
   ENTERPRISE UI v6.4.0 — Dashboard Zaman Katmanları
   Günlük / haftalık / aylık operasyon görünümü.
   Mevcut rapor filtreleri yalnızca detay raporlama alanında tutulur.
   ============================================ */
.dashboard-layer {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.dashboard-layer-daily { border-top: 3px solid #4F46E5; }
.dashboard-layer-weekly { border-top: 3px solid #0EA5E9; }
.dashboard-layer-monthly { border-top: 3px solid #7C3AED; }
.layer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}
.layer-heading > div:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }
.layer-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #F2F4F7;
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
}
.dashboard-layer-daily .layer-number { background: #EEF2FF; color: #4F46E5; }
.dashboard-layer-weekly .layer-number { background: #F0F9FF; color: #0284C7; }
.dashboard-layer-monthly .layer-number { background: #F5F3FF; color: #7C3AED; }
.layer-heading h2 { margin: 0; color: #1D2939; font-size: 15px; font-weight: 750; letter-spacing: -.22px; }
.layer-heading h2 small { color: #667085; font-size: 10.5px; font-weight: 600; }
.layer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #EAECF0;
  border-radius: 999px;
  background: #FCFCFD;
  color: #667085;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}
.layer-status.live { color: #027A48; background: #ECFDF3; border-color: #D1FADF; }
.layer-status.live i { font-size: 6px; color: #12B76A; }
.dashboard-layer .dashboard-kpi-grid { margin-bottom: 22px !important; }
.layer-subhead { margin-top: 4px; }

.period-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.period-summary-card {
  padding: 15px;
  border: 1px solid #EAECF0;
  border-radius: 13px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
  min-width: 0;
}
.period-summary-card:hover { border-color: #D0D5DD; }
.period-summary-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #344054; font-size: 10.5px; font-weight: 700; }
.period-summary-title > span:first-child { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.period-summary-title i { color: #98A2B3; font-size: 9px; }
.period-summary-net { margin-top: 14px; color: #101828; font-size: 19px; line-height: 1.15; font-weight: 760; letter-spacing: -.55px; }
.period-summary-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #F2F4F7; }
.period-summary-metrics span { display: flex; flex-direction: column; gap: 3px; color: #98A2B3; font-size: 8.5px; }
.period-summary-metrics strong { font-size: 9.5px; font-weight: 700; }
.period-summary-total {
  border-color: #C7D2FE;
  background: linear-gradient(145deg, #F8FAFF, #FFFFFF);
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.025), 0 1px 2px rgba(16,24,40,.025);
}
.period-summary-total .period-summary-title > span:first-child i { color: #4F46E5; }
.period-total-badge { padding: 3px 6px; border-radius: 6px; background: #EEF2FF; color: #4F46E5; font-size: 7.5px; font-weight: 800; letter-spacing: .45px; }
.live-period-chip { border-color: #D1FADF; background: #F6FEF9; }
.live-period-chip > i { background: #ECFDF3; color: #039855; }

.dashboard-reporting-zone {
  margin-top: 32px;
  padding: 18px;
  border: 1px solid #DDE4FF;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(238,242,255,.52), rgba(248,250,252,.75));
}
.reporting-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 4px;
}
.reporting-zone-head h2 { margin: 0; color: #1D2939; font-size: 15px; font-weight: 750; letter-spacing: -.2px; }
.reporting-zone-head p { max-width: 770px; margin: 6px 0 0; color: #667085; font-size: 10.5px; line-height: 1.5; }
.reporting-period-chip {
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid #DDE4FF;
  border-radius: 11px;
  background: #FFFFFF;
}
.reporting-period-chip > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #EEF2FF; color: #4F46E5; font-size: 11px; }
.reporting-period-chip span { display: flex; flex-direction: column; gap: 2px; }
.reporting-period-chip small { color: #98A2B3; font-size: 7.5px; font-weight: 750; letter-spacing: .65px; text-transform: uppercase; }
.reporting-period-chip strong { color: #344054; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.dashboard-reporting-zone .filter-section { margin-top: 14px; }
.dashboard-reporting-zone > .dashboard-section:last-child { margin-top: 18px; }

@media (max-width: 900px) {
  .dashboard-layer { padding: 16px; }
  .period-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reporting-zone-head { align-items: flex-start; }
}

@media (max-width: 640px) {
  .dashboard-layer { padding: 14px; border-radius: 14px; }
  .layer-heading { align-items: flex-start; }
  .layer-heading h2 small { display: block; margin-top: 3px; }
  .layer-status { display: none; }
  .period-summary-grid { grid-template-columns: 1fr; }
  .dashboard-reporting-zone { padding: 12px; border-radius: 15px; }
  .reporting-zone-head { flex-direction: column; }
  .reporting-period-chip { width: 100%; min-width: 0; }
}

/* ============================================
   ENTERPRISE UI v6.5.2 — Kurumsal Giriş Ekranı
   Referansın bilgi hiyerarşisi korunarak mevcut ERP kimliğine uyarlandı.
   Bu bölüm yalnızca giriş ekranını etkiler.
   ============================================ */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(480px, .92fr);
  background: #F8FAFC;
  color: #101828;
  overflow: hidden;
}

.login-showcase {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #FFFFFF;
  background:
    radial-gradient(circle at 16% 14%, rgba(99,102,241,.30), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(14,165,233,.14), transparent 30%),
    linear-gradient(145deg, #07111F 0%, #0D1930 48%, #14234A 100%);
}

.login-showcase::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  right: -210px;
  top: -160px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012);
}

.login-showcase::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,11,24,.28));
}

.login-showcase-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 96px, 690px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 58px 0 42px;
  display: flex;
  flex-direction: column;
}

.login-showcase-brand,
.login-mobile-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.login-showcase-mark {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  color: #C7D2FE;
  font-size: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.login-showcase-brand strong,
.login-mobile-brand strong {
  display: block;
  max-width: 450px;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-showcase-brand span,
.login-mobile-brand span {
  display: block;
  margin-top: 3px;
  color: #A5B4FC;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.login-showcase-copy {
  margin: auto 0;
  padding: 72px 0;
}

.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #A5B4FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.login-showcase-copy h1 {
  margin: 20px 0 20px;
  color: #FFFFFF;
  font-size: clamp(36px, 4vw, 59px);
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -2.1px;
}

.login-showcase-copy h1 span { color: #A5B4FC; }

.login-showcase-copy > p {
  max-width: 590px;
  margin: 0;
  color: #B8C4D8;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 430;
  line-height: 1.8;
}

.login-feature-list {
  max-width: 630px;
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-feature-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: #D5DDF0;
  font-size: 9.5px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.login-feature-list i { color: #A5B4FC; font-size: 9px; }

.login-showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.login-showcase-footer span {
  max-width: 55%;
  overflow: hidden;
  color: #D9E2F2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-showcase-footer small {
  color: #8290A8;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}

.login-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  padding: 48px clamp(30px, 5vw, 74px);
  background:
    radial-gradient(circle at 92% 7%, rgba(99,102,241,.06), transparent 25%),
    #F8FAFC;
}

.login-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#CBD5E1 .55px, transparent .55px);
  background-size: 24px 24px;
  opacity: .25;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.login-box {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  max-width: 470px;
  margin: 0;
  padding: 44px 42px 38px;
  border: 1px solid #E4E7EC;
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 26px 72px rgba(15,23,42,.09), 0 2px 7px rgba(15,23,42,.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.login-mobile-brand { display: none; }

.login-form-heading { margin-bottom: 28px; }
.login-eyebrow-dark { color: #4F46E5; }

.login-form-heading h2 {
  margin: 11px 0 7px;
  color: #101828;
  font-size: 25px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -.8px;
  text-align: left;
}

.login-form-heading p {
  margin: 0;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.6;
}

.login-box .form-group { margin-bottom: 18px; }

.login-box label {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-size: 11.5px;
  font-weight: 680;
}

.login-input-wrap { position: relative; }

.login-input-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: #98A2B3;
  font-size: 11px;
  pointer-events: none;
}

.login-box input {
  width: 100%;
  min-height: 49px;
  padding: 12px 14px 12px 40px;
  border: 1px solid #D0D5DD;
  border-radius: 11px;
  outline: none;
  background: #FFFFFF;
  color: #101828;
  font-family: var(--font-sans);
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.login-box input:hover { border-color: #B9C0CB; }

.login-box input:focus {
  border-color: #6366F1;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10), 0 1px 2px rgba(16,24,40,.03);
}

.login-box input:focus + i,
.login-input-wrap:focus-within > i { color: #4F46E5; }
.login-box input::placeholder { color: #98A2B3; }

.login-box button {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 740;
  cursor: pointer;
  box-shadow: 0 9px 19px rgba(79,70,229,.20);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-box button i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.13);
  font-size: 9px;
}

.login-box button:hover {
  background: linear-gradient(135deg, #4338CA 0%, #3730A3 100%);
  box-shadow: 0 12px 24px rgba(79,70,229,.25);
  transform: translateY(-1px);
}
.login-box button:active { transform: translateY(0); }

.login-box .alert {
  margin: 0 0 18px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.55;
}

.login-support-note {
  margin-top: 23px;
  padding-top: 19px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-top: 1px solid #EAECF0;
  color: #98A2B3;
  font-size: 9.5px;
  line-height: 1.6;
}
.login-support-note i { margin-top: 2px; color: #667085; }

@media (max-width: 1080px) {
  .login-page { grid-template-columns: minmax(360px, .8fr) minmax(470px, 1.2fr); }
  .login-showcase-inner { width: min(100% - 64px, 620px); }
  .login-showcase-copy h1 { font-size: clamp(32px, 4vw, 46px); }
  .login-showcase-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .login-showcase-footer span { max-width: 100%; }
}

@media (max-width: 820px) {
  .login-page {
    display: block;
    min-height: 100vh;
    overflow: auto;
    background:
      radial-gradient(circle at 12% 5%, rgba(99,102,241,.10), transparent 28%),
      #F8FAFC;
  }
  .login-showcase { display: none; }
  .login-panel {
    min-height: 100vh;
    padding: 28px 18px;
  }
  .login-box {
    width: min(100%, 490px);
    padding: 34px 27px 30px;
  }
  .login-mobile-brand {
    display: flex;
    margin-bottom: 31px;
    padding-bottom: 22px;
    border-bottom: 1px solid #EAECF0;
  }
  .login-mobile-brand .login-showcase-mark {
    border-color: #E0E7FF;
    background: #EEF2FF;
    color: #4F46E5;
  }
  .login-mobile-brand strong { color: #101828; }
  .login-mobile-brand span { color: #6366F1; }
}

@media (max-width: 430px) {
  .login-panel { padding: 16px 12px; }
  .login-box { padding: 28px 19px 24px; border-radius: 16px; }
  .login-form-heading h2 { font-size: 22px; }
  .login-mobile-brand strong { max-width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-box input,
  .login-box button { transition: none; }
}