/* ================================================
 * BankaTeklifi Admin Panel — Filament v3 Default Theme
 * Sürüm: v2.0 · 14 Mayıs 2026 — ölü sidebar CSS kaldırıldı, dinamik form component stilleri eklendi
 * Amber primary + white sidebar + sticky header
 * ================================================ */

/* ─── Reset + Base ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }

body { background: var(--gray-50); color: var(--gray-900); line-height: 1.5; }

a { color: inherit; text-decoration: none; }

button { font: inherit; border: 0; cursor: pointer; background: none; }

input, select, textarea { font: inherit; }

/* ─── CSS Variables (Filament v3 Blue) ─── */
:root {
  /* Primary - Blue (Tailwind blue-500) */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;

  /* Gray */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* Status */
  --success-500: #10b981;
  --success-100: #d1fae5;
  --success-700: #047857;
  --warning-500: #f59e0b;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-700: #b45309;
  --danger-500: #ef4444;
  --danger-100: #fee2e2;
  --danger-700: #b91c1c;
  --info-500: #3b82f6;
  --info-100: #dbeafe;
  --info-700: #1d4ed8;

  /* Layout */
  --sidebar-width: 16rem;
  --header-height: 4rem;
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Body backgrounds */
  --bg-body: var(--gray-50);
  --bg-card: #fff;
  --bg-sidebar: #fff;
  --bg-header: #fff;
  /* --surface: kart/panel/dropdown yüzeyleri için ortak takma ad (--bg-card'a bağlı,
     dark mode dahil tema-duyarlı). topnav-dropdown ve sayfa içi panel stilleri bunu kullanır. */
  --surface: var(--bg-card);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-tertiary: var(--gray-500);
  --border: var(--gray-200);
  --border-focus: var(--primary-500);
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-body: var(--gray-950);
  --bg-card: var(--gray-900);
  --bg-sidebar: var(--gray-900);
  --bg-header: var(--gray-900);
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);
  --border: var(--gray-800);
}

[data-theme="dark"] body { background: var(--bg-body); color: var(--text-primary); }

/* ════════════════════════════════════════════
 * LAYOUT — Header + Sidebar + Main
 * ════════════════════════════════════════════ */

.admin-app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main";
}

/* Sidebar artık kullanılmıyor — top nav var */
.admin-sidebar { display: none; }
.admin-sidebar-backdrop { display: none; }

/* ─── TOP HEADER ─── */
.admin-header {
  grid-area: header;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
}

.admin-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-header__logo {
  width: 2rem;
  height: 2rem;
  background: var(--primary-500);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
}

.admin-header__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-header__search {
  flex: 1;
  max-width: 32rem;
  margin: 0 2rem;
  position: relative;
}

.admin-header__search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-body);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.admin-header__search input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-100); }

.admin-header__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.admin-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-header__icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.admin-header__icon-btn:hover { background: var(--gray-100); color: var(--text-primary); }

[data-theme="dark"] .admin-header__icon-btn:hover { background: var(--gray-800); }

.admin-header__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

.admin-header__user:hover { background: var(--gray-100); }
[data-theme="dark"] .admin-header__user:hover { background: var(--gray-800); }

.admin-header__user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--primary-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.75rem;
}

.admin-header__user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.admin-header__user-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── MAIN CONTENT ─── */
.admin-main {
  grid-area: main;
  padding: 1.5rem 2rem;
  overflow-x: hidden;
}

.admin-page-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.admin-page-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.admin-page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════
 * COMPONENTS
 * ════════════════════════════════════════════ */

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

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

.btn-primary:hover { background: var(--primary-600); }

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

.btn-secondary:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .btn-secondary:hover { background: var(--gray-800); }

.btn-danger {
  background: var(--danger-500);
  color: #fff;
}

.btn-danger:hover { background: var(--danger-700); }

.btn-ghost {
  color: var(--text-secondary);
  padding: 0.375rem 0.625rem;
}

.btn-ghost:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .btn-ghost:hover { background: var(--gray-800); }

.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.btn-icon { padding: 0.5rem; }

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* ─── Forms ─── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.form-label-required::after { content: " *"; color: var(--danger-500); }

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.form-textarea { min-height: 6rem; resize: vertical; }

.form-input.error, .form-select.error, .form-textarea.error {
  border-color: var(--danger-500);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--danger-500);
  margin-top: 0.375rem;
}

.form-radio-group, .form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-radio, .form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.form-radio:hover, .form-checkbox:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

[data-theme="dark"] .form-radio:hover, [data-theme="dark"] .form-checkbox:hover {
  background: rgba(59, 130, 246, 0.08);
}

.form-radio input, .form-checkbox input { margin-top: 0.125rem; cursor: pointer; }

.form-radio-content, .form-checkbox-content { flex: 1; }

.form-radio-title, .form-checkbox-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-radio-desc, .form-checkbox-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* ─── Tables ─── */
.table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}

.table-toolbar__filters {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Diğer filter wrapper'ları aynı davranış — parametre-yonetimi vs */
.param-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Filtre bar içindeki input/select'ler tek satırda yan yana
   ─ global .form-input { width: 100% } override edilir
   ─ search input mevcut alanı doldurur, diğer select'ler min-width'lerine kalır
   ─ Tüm filtreler tek satıra sığsın diye base flex-basis düşürüldü */
.table-toolbar__filters .form-input,
.table-toolbar__filters .form-select,
.filter-bar .form-input,
.filter-bar .form-select,
.param-toolbar .form-input,
.param-toolbar .form-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.table-toolbar__filters .form-input[type="search"],
.filter-bar .form-input[type="search"],
.param-toolbar .form-input[type="search"] {
  flex: 1 1 10rem;
  min-width: 9rem;
}
/* Date inputs in toolbar compact */
.table-toolbar__filters .form-input[type="date"],
.filter-bar .form-input[type="date"] {
  flex: 0 1 9.5rem;
  min-width: 8.5rem;
}

.table-toolbar__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.table th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="dark"] .table th { background: var(--gray-800); }

.table tbody tr { transition: background 0.15s; }

.table tbody tr:hover { background: var(--gray-50); }

[data-theme="dark"] .table tbody tr:hover { background: var(--gray-800); }

.table tbody tr:last-child td { border-bottom: 0; }

.table__checkbox { width: 1rem; }

.table__actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  gap: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.table-footer__info {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.table-footer__info strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.table-footer__size {
  margin-left: auto;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.pagination__btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.pagination__btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--primary-300);
  color: var(--primary-700);
  background: var(--primary-50);
}

[data-theme="dark"] .pagination__btn:hover:not(:disabled):not(.is-active) {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-300);
}

.pagination__btn.is-active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: #fff;
  cursor: default;
}

.pagination__btn:disabled:not(.is-active) {
  opacity: 0.4;
  cursor: default;
}

.pagination__ellipsis {
  padding: 0 0.375rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-success { background: var(--success-100); color: var(--success-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger { background: var(--danger-100); color: var(--danger-700); }
.badge-info { background: var(--info-100); color: var(--info-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-700); }
.badge-primary { background: var(--primary-100); color: var(--primary-700); }

[data-theme="dark"] .badge-success { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
[data-theme="dark"] .badge-warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
[data-theme="dark"] .badge-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
[data-theme="dark"] .badge-info { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
[data-theme="dark"] .badge-gray { background: var(--gray-800); color: var(--gray-300); }
[data-theme="dark"] .badge-primary { background: rgba(59, 130, 246, 0.18); color: var(--primary-300); }

.badge-dot::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ─── Stats Card (Dashboard) ─── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.stat-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card__value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.5rem;
  line-height: 1.2;
}

.stat-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.375rem;
}

.stat-card__delta-positive { color: var(--success-700); }
.stat-card__delta-negative { color: var(--danger-700); }

[data-theme="dark"] .stat-card__delta-positive { color: #6ee7b7; }
[data-theme="dark"] .stat-card__delta-negative { color: #fca5a5; }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}

.modal-overlay.show {
  display: flex;
}

.modal-overlay--stacked {
  z-index: 110;
  background: rgba(0, 0, 0, 0.55);
}

[x-cloak] {
  display: none !important;
}

/* Modal açıkken sayfa scroll'unu kilitle — çift scrollbar önle.
   admin-app.js MutationObserver ile html.modal-open class'ı toggle eder
   ve body'ye dinamik padding-right ekleyerek layout shift'i önler. */
html.modal-open {
  overflow: hidden;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  width: 100%;
  max-width: 80rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sticky başlık: .modal kendi scroll container'ı; başlık üstte sabit kalır.
     Negatif margin .modal'ın üst+yan padding'ini kaplar (tam genişlik, üste yapışık),
     padding görsel iç boşluğu geri verir. Tüm modal yapılarında çalışır. */
  position: sticky;
  top: -1.75rem;
  z-index: 5;
  background: var(--bg-card);
  margin: -1.75rem -2rem 1rem;
  padding: 1.75rem 2rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  /* Sticky buton çubuğu (İptal/Kaydet): .modal scroll ederken altta sabit kalır.
     bottom:-1.75rem + negatif alt/yan margin .modal'ın alt+yan padding'ini kaplar
     → altında içerik görünmez; padding görsel iç boşluğu geri verir.
     position:sticky en yakın scroll atasına (.modal) göre çözülür; footer ister
     <form> içinde ister doğrudan .modal child'ı olsun çalışır. */
  position: sticky;
  bottom: -1.75rem;
  z-index: 5;
  background: var(--bg-card);
  margin: 1.5rem -2rem -1.75rem;
  padding: 1rem 2rem 1.75rem;
  border-top: 1px solid var(--border);
}

/* ─── Alerts / Notifications ─── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  border-left: 4px solid;
}

.alert-success { background: var(--success-100); color: var(--success-700); border-color: var(--success-500); }
.alert-warning { background: var(--warning-100); color: var(--warning-700); border-color: var(--warning-500); }
.alert-danger { background: var(--danger-100); color: var(--danger-700); border-color: var(--danger-500); }
.alert-info { background: var(--info-100); color: var(--info-700); border-color: var(--info-500); }

[data-theme="dark"] .alert-success { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }
[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
[data-theme="dark"] .alert-info { background: rgba(59, 130, 246, 0.1); color: #93c5fd; }

/* ─── Toast ─── */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + 1rem);
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary-500);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-lg);
  min-width: 18rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: toastSlideIn 0.2s ease-out;
}

.toast.toast-success { border-left-color: var(--success-500); }
.toast.toast-warning { border-left-color: var(--warning-500); }
.toast.toast-danger { border-left-color: var(--danger-500); }

.toast-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.toast-msg { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.125rem; }

@keyframes toastSlideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── Dropdown Menu ─── */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem;
  box-shadow: var(--shadow-lg);
  min-width: 12rem;
  z-index: 30;
  display: none;
}

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

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background: var(--gray-800); }

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

/* ─── Tabs ─── */
.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.tab {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text-primary); }

.tab.active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-500);
}

[data-theme="dark"] .tab.active { color: var(--primary-300); }

/* ─── Empty State ─── */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state__icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  color: var(--gray-300);
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.empty-state__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════
 * LOGIN PAGE (özel layout)
 * ════════════════════════════════════════════ */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 100%);
  padding: 1.5rem;
}

[data-theme="dark"] .login-page {
  background: linear-gradient(135deg, var(--gray-950) 0%, rgba(59, 130, 246, 0.08) 100%);
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 26rem;
  box-shadow: var(--shadow-lg);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.login-brand__logo {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary-500);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.login-brand__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.login-brand__subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.login-demo-accounts {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.login-demo-accounts__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}

.login-demo-account {
  display: block;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.login-demo-account:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

[data-theme="dark"] .login-demo-account:hover {
  background: rgba(59, 130, 246, 0.08);
}

.login-demo-account__role {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-700);
}

[data-theme="dark"] .login-demo-account__role { color: var(--primary-300); }

.login-demo-account__email {
  font-size: 0.8125rem;
  color: var(--text-primary);
  margin-top: 0.125rem;
}

/* ════════════════════════════════════════════
 * UTILITY CLASSES
 * ════════════════════════════════════════════ */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════ */

@media (max-width: 768px) {
  .admin-app {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }

  .admin-sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.2s;
    z-index: 40;
    box-shadow: var(--shadow-lg);
  }

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

  .admin-header__search { display: none; }

  .admin-main { padding: 1rem; }

  .admin-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
    grid-template-columns: 1fr;
  }
}

/* Mobile menu trigger button */
.admin-header__menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .admin-header__menu-toggle { display: grid; }
}

/* Tablet breakpoint — 5/6 sütunlu grid'ler orta ekranda 3 sütuna düşer */
@media (min-width: 769px) and (max-width: 1100px) {
  .grid-cols-5, .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAVBAR — Kategori dropdown menüleri (sidebar yerine)
   ═══════════════════════════════════════════════════════════════ */

.admin-topnav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
  margin: 0 0.5rem;
  overflow: visible;
}

.topnav-item {
  position: relative;
  flex-shrink: 0;
}

.topnav-link,
.topnav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.topnav-link:hover,
.topnav-trigger:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}
[data-theme="dark"] .topnav-link:hover,
[data-theme="dark"] .topnav-trigger:hover {
  background: var(--gray-800);
}

.topnav-link.active,
.topnav-trigger.active {
  background: var(--primary-50);
  color: var(--primary-700);
}
[data-theme="dark"] .topnav-link.active,
[data-theme="dark"] .topnav-trigger.active {
  background: rgba(59,130,246,0.15);
  color: var(--primary-300);
}

.topnav-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
  opacity: 0.7;
}

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

.topnav-item.open .topnav-trigger {
  background: var(--gray-100);
  color: var(--text-primary);
}
[data-theme="dark"] .topnav-item.open .topnav-trigger {
  background: var(--gray-800);
}

.topnav-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 16rem;
  max-width: 22rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.04);
  padding: 0.5rem;
  z-index: 100;
  display: none;
  max-height: calc(100vh - var(--header-height) - 2rem);
  overflow-y: auto;
}
[data-theme="dark"] .topnav-dropdown {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
}

.topnav-item.open .topnav-dropdown {
  display: block;
  animation: dropdownFade 0.12s ease-out;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.topnav-dropdown__header {
  padding: 0.375rem 0.625rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}
.topnav-dropdown__header:first-child {
  margin-top: 0;
}

.topnav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: 0.1s;
  position: relative;
}

.topnav-dropdown__item:hover {
  background: var(--gray-50);
  color: var(--text-primary);
}
[data-theme="dark"] .topnav-dropdown__item:hover {
  background: var(--gray-800);
}

.topnav-dropdown__item.active {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}
[data-theme="dark"] .topnav-dropdown__item.active {
  background: rgba(59,130,246,0.15);
  color: var(--primary-300);
}

.topnav-dropdown__item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.topnav-dropdown__item-badge {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.375rem;
  background: var(--danger-500);
  color: white;
  border-radius: 9999px;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topnav-dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0.5rem;
}

/* Mobile hamburger */
.topnav-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0.375rem;
}

.topnav-mobile-toggle:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

@media (max-width: 960px) {
  .admin-header {
    position: sticky;
    z-index: 60;
  }

  .admin-topnav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    display: none;
    z-index: 55;
  }

  .admin-topnav.open {
    display: flex;
  }

  .topnav-item {
    width: 100%;
  }

  .topnav-link,
  .topnav-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .topnav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--gray-50);
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    max-height: none;
  }

  [data-theme="dark"] .topnav-dropdown {
    background: var(--gray-900);
  }

  .topnav-mobile-toggle {
    display: inline-flex;
    align-items: center;
  }

  /* Eski admin-header__menu-toggle gizle (sidebar artık yok) */
  .admin-header__menu-toggle {
    display: none !important;
  }

  /* Header'da arama gizle (mobile) */
  .admin-header__search {
    display: none;
  }

  .admin-header__title {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .admin-header__user-name,
  .admin-header__user-role {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   DİNAMİK FORM COMPONENT'LERİ
   Kaynak: ADMIN_DINAMIK_ALANLAR.md — admin-app.js AdminApp.components.*
   ve AdminApp.ui.* tarafından üretilen ortak parçaların stilleri.
   Mevcut Blue tema değişkenleriyle uyumludur; görsel dil korunur.
   ═══════════════════════════════════════════════════════════════ */

/* ─── formSection — collapsible Filament Section ─── */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.form-section__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.form-section__head:hover { background: var(--gray-50); }
[data-theme="dark"] .form-section__head:hover { background: var(--gray-800); }
.form-section__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.form-section__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.18s;
}
.form-section.is-collapsed .form-section__chevron { transform: rotate(-90deg); }
.form-section__body {
  padding: 0.25rem 1.125rem 1.125rem;
  border-top: 1px solid var(--border);
}
.form-section.is-collapsed .form-section__body { display: none; }
.form-section__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.75rem 0 0;
}

/* ─── subTable — inline alt tablo editörü (LoanRate/DepositRate/commission_rates/UmoBullet) ─── */
.subtable {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.5rem;
}
.subtable .table--compact { margin: 0; }
.table--compact th,
.table--compact td {
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}
.subtable__cell {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.subtable__suffix {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.form-input--sm {
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
}
.subtable__action { width: 2.75rem; text-align: center; }
.subtable__add { margin: 0.5rem; }
.subtable__note {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 0.5rem 0.5rem;
  margin: 0;
}

/* ─── offerTagsGroup — offer_tags CheckboxList ─── */
.offer-tags {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.offer-tag {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.offer-tag:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}
[data-theme="dark"] .offer-tag:hover { background: rgba(59, 130, 246, 0.08); }
.offer-tag.is-checked {
  border-color: var(--primary-500);
  background: var(--primary-50);
}
.offer-tag.is-excluded {
  display: none;
}
[data-theme="dark"] .offer-tag.is-checked { background: rgba(59, 130, 246, 0.12); }
.offer-tag input { margin-top: 0.1875rem; cursor: pointer; flex-shrink: 0; }
.offer-tag__main { flex: 1; min-width: 0; }
.offer-tag__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
.offer-tag__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* ─── kvkkCheckboxes — 3-Checkbox KVKK bloğu (Açık Rıza / Aydınlatma / TEİ) ─── */
.kvkk-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kvkk-block .form-checkbox span { font-size: 0.8125rem; line-height: 1.5; }
.kvkk-block .form-checkbox a { color: var(--primary-700); text-decoration: underline; }
[data-theme="dark"] .kvkk-block .form-checkbox a { color: var(--primary-300); }
.form-checkbox--required { border-left: 3px solid var(--danger-500); }
.form-checkbox--optional { border-left: 3px solid var(--gray-300); }

/* ─── kvkkColumns — liste satırında kompakt ✓ ✓ ○ göstergesi ─── */
.kvkk-cols { display: inline-flex; gap: 0.25rem; }
.kvkk-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: help;
}
.kvkk-tick--yes { background: var(--success-100); color: var(--success-700); }
.kvkk-tick--no { background: var(--danger-100); color: var(--danger-700); }
.kvkk-tick--neutral { background: var(--gray-100); color: var(--gray-700); }
[data-theme="dark"] .kvkk-tick--yes { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
[data-theme="dark"] .kvkk-tick--no { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
[data-theme="dark"] .kvkk-tick--neutral { background: var(--gray-800); color: var(--gray-300); }

/* ═══════════════════════════════════════════════════════════════════
   RICH TEXT EDITOR (Quill.js) + SEO CHARACTER COUNTER
   2026-05-17 — admin-app.js richtext + formatInput.attachSeoCounter
   ═══════════════════════════════════════════════════════════════════ */


/* ─── RICH TEXT EDITOR (CKEditor 5) ─── */
/* CKEditor 5 kendi UI CSS'ini JS bundle içinde yükler. */
/* Admin tema entegrasyonu (border, dark mode, içerik stilleri) admin-app.js içindeki */
/* _injectCKEditorOverrideStyles() fonksiyonu tarafından runtime'da inject edilir. */
/* Bu sayede CKEditor CDN CSS'i bizim admin-styles.css'imizden sonra yüklense bile override eder. */

/* ─── SEO Character Counter ─── */
.seo-counter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-soft);
  border-radius: 0.25rem;
  border-left: 3px solid var(--gray-300);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.seo-counter__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.seo-counter__sep,
.seo-counter__unit {
  color: var(--text-muted);
}
.seo-counter__ideal {
  font-weight: 500;
  color: var(--text-secondary);
}
.seo-counter__hint {
  flex: 1;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Renk durumları: yeşil (ideal) → sarı (uyarı) → kırmızı (limit aşımı) */
.seo-counter--green {
  border-left-color: var(--success-500);
  background: var(--success-50);
}
.seo-counter--green .seo-counter__count {
  color: var(--success-700);
}
.seo-counter--yellow {
  border-left-color: var(--warning-500);
  background: var(--warning-50);
}
.seo-counter--yellow .seo-counter__count {
  color: var(--warning-700);
}
.seo-counter--red {
  border-left-color: var(--danger-500);
  background: var(--danger-50);
}
.seo-counter--red .seo-counter__count {
  color: var(--danger-700);
  animation: seo-counter-pulse 0.4s ease-out;
}
@keyframes seo-counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Dark mode override */
[data-theme="dark"] .seo-counter--green {
  background: rgba(16, 185, 129, 0.08);
}
[data-theme="dark"] .seo-counter--yellow {
  background: rgba(245, 158, 11, 0.08);
}
[data-theme="dark"] .seo-counter--red {
  background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .seo-counter--green .seo-counter__count { color: #6ee7b7; }
[data-theme="dark"] .seo-counter--yellow .seo-counter__count { color: #fcd34d; }
[data-theme="dark"] .seo-counter--red .seo-counter__count { color: #fca5a5; }