/* ============================================================
   MailFlow Pro — Ana Stil Dosyası
   Dark theme + Glassmorphism + Micro-animations
   ============================================================ */

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

/* ── Tasarım Tokenları ─────────────────────────────────────── */
:root {
  /* Renkler */
  --bg-base:        #070b14;
  --bg-surface:     #0d1426;
  --bg-elevated:    #111827;
  --bg-card:        rgba(255,255,255,0.035);
  --bg-card-hover:  rgba(255,255,255,0.065);
  --bg-input:       rgba(255,255,255,0.05);

  --border:         rgba(255,255,255,0.07);
  --border-active:  rgba(99,102,241,0.6);
  --border-focus:   rgba(99,102,241,0.8);

  --accent:         #6366f1;
  --accent-hover:   #4f46e5;
  --accent-glow:    rgba(99,102,241,0.3);
  --violet:         #8b5cf6;
  --cyan:           #06b6d4;
  --emerald:        #10b981;
  --amber:          #f59e0b;
  --rose:           #ef4444;
  --pink:           #ec4899;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-accent:    #818cf8;

  /* Boyutlar */
  --sidebar-w:      260px;
  --header-h:       64px;
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      14px;
  --radius-xl:      20px;

  /* Animasyon */
  --ease:           cubic-bezier(.16,1,.3,1);
  --duration:       200ms;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Layout ────────────────────────────────────────────────── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
  transition: transform var(--duration) var(--ease);
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.sidebar-logo {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px var(--accent-glow);
  flex-shrink: 0;
}

.logo-icon svg { width: 18px; height: 18px; color: #fff; }

.logo-text {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.3px;
}
.logo-version {
  font-size: .65rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.nav-section-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .75rem 1.5rem .4rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem .6rem 1.25rem;
  margin: 1px .75rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  width: calc(100% - 1.5rem);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  opacity: 0;
  transition: opacity var(--duration);
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.2));
  border: 1px solid rgba(99,102,241,.3);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--violet));
  border-radius: 0 2px 2px 0;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}

.nav-badge {
  margin-left: auto;
  background: var(--rose);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.user-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration);
}
.user-card:hover { background: var(--bg-card-hover); }

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }
.user-name  { font-size: .8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: .7rem; color: var(--text-muted); }

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--sidebar-w));
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  background: rgba(13,20,38,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.75rem;
  gap: 1rem;
}

.header-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.header-title svg { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lang-toggle {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang-btn {
  padding: .35rem .7rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration);
  text-decoration: none;
}
.lang-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #fff;
}
.lang-btn:hover:not(.active) { color: var(--text-primary); }

/* Page Content */
.page-content {
  flex: 1;
  padding: 1.75rem;
  overflow-x: hidden;
}

/* ── Kartlar ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  transition: border-color var(--duration), box-shadow var(--duration);
}

.card:hover { border-color: rgba(255,255,255,0.11); }

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

.card-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.card-title svg { color: var(--accent); width: 16px; height: 16px; }

.card-body { padding: 1.25rem; }

/* ── Stats Grid ─────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all .25s var(--ease);
  cursor: default;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: .7;
}

.stat-card.blue::before   { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.stat-card.violet::before { background: linear-gradient(90deg, var(--violet), var(--pink)); }
.stat-card.green::before  { background: linear-gradient(90deg, var(--emerald), var(--cyan)); }
.stat-card.amber::before  { background: linear-gradient(90deg, var(--amber), var(--rose)); }
.stat-card.rose::before   { background: linear-gradient(90deg, var(--rose), var(--pink)); }

.stat-card:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
}

.stat-icon svg { width: 18px; height: 18px; }

.stat-card.blue   .stat-icon { background: rgba(99,102,241,.15); color: var(--accent); }
.stat-card.violet .stat-icon { background: rgba(139,92,246,.15); color: var(--violet); }
.stat-card.green  .stat-icon { background: rgba(16,185,129,.15); color: var(--emerald); }
.stat-card.amber  .stat-icon { background: rgba(245,158,11,.15);  color: var(--amber); }
.stat-card.rose   .stat-icon { background: rgba(239,68,68,.15);   color: var(--rose); }

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: .3rem;
  letter-spacing: -.03em;
}

.stat-label {
  font-size: .75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-trend {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 9999px;
}

.trend-up   { background: rgba(16,185,129,.15); color: var(--emerald); }
.trend-down { background: rgba(239,68,68,.15);  color: var(--rose); }

/* ── Butonlar ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn svg { width: 14px; height: 14px; }

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--duration);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(99,102,241,.4); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { color: var(--text-primary); border-color: rgba(255,255,255,.15); }

.btn-success {
  background: linear-gradient(135deg, var(--emerald), #059669);
  color: #fff;
  box-shadow: 0 4px 14px rgba(16,185,129,.25);
}

.btn-danger {
  background: linear-gradient(135deg, var(--rose), #dc2626);
  color: #fff;
  box-shadow: 0 4px 14px rgba(239,68,68,.25);
}

.btn-amber {
  background: linear-gradient(135deg, var(--amber), #d97706);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }

.btn-sm {
  padding: .35rem .7rem;
  font-size: .75rem;
}

.btn-icon {
  padding: .5rem;
  border-radius: var(--radius-sm);
}

.btn-icon svg { margin: 0; }

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Formlar ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: .45rem;
}

.form-label .required {
  color: var(--rose);
  margin-left: .2rem;
}

.form-control {
  width: 100%;
  padding: .6rem .85rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: .85rem;
  transition: border-color var(--duration), box-shadow var(--duration);
  outline: none;
}

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

.form-control::placeholder { color: var(--text-muted); }

/* ── Özel Select Dropdown ─────────────────────────────────── */
/* Gerçek select gizlenir, JS ile özel dropdown oluşturulur */
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
  background-color: var(--bg-input);
  color: var(--text-primary);
}

/* Native select option renkleri (bazı tarayıcılarda çalışır) */
select.form-control option,
select.form-control optgroup {
  background-color: #111827;
  color: #f1f5f9;
}

/* Özel Select Wrapper */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.filter-bar .custom-select-wrapper {
  width: auto;
  min-width: 170px;
  flex-shrink: 0;
}

.custom-select-trigger {
  width: 100%;
  padding: .6rem .85rem;
  padding-right: 2.25rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  transition: border-color var(--duration), box-shadow var(--duration);
  outline: none;
  user-select: none;
  position: relative;
}

.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .2s;
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.custom-select-wrapper.open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #111827;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
  animation: selectDropIn .15s var(--ease) both;
}

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

.custom-select-search {
  padding: .5rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  background: #111827;
}

.custom-select-search input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: .35rem .65rem;
  color: #f1f5f9;
  font-size: .8rem;
  outline: none;
}

.custom-select-search input::placeholder { color: #475569; }

.custom-select-option {
  padding: .55rem .85rem;
  font-size: .84rem;
  color: #cbd5e1;
  cursor: pointer;
  transition: background .12s, color .12s;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.custom-select-option:hover {
  background: rgba(99,102,241,.15);
  color: #f1f5f9;
}

.custom-select-option.selected {
  background: rgba(99,102,241,.2);
  color: #818cf8;
  font-weight: 600;
}

.custom-select-option.selected::after {
  content: '✓';
  margin-left: auto;
  font-size: .7rem;
  color: #6366f1;
}

.custom-select-empty {
  padding: 1rem;
  text-align: center;
  font-size: .8rem;
  color: #475569;
}


textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-control:disabled {
  opacity: .5;
  cursor: not-allowed;
}

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

.form-error {
  font-size: .72rem;
  color: var(--rose);
  margin-top: .3rem;
}

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

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

/* ── Tablolar ────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

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

.table th {
  background: rgba(255,255,255,.02);
  padding: .7rem 1rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--duration);
}

.table tbody tr:hover { background: var(--bg-card-hover); }
.table tbody tr:last-child td { border-bottom: none; }

.table-check { width: 40px; }

.table input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Badge'ler ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge svg { width: 10px; height: 10px; }

.badge-gray   { background: rgba(255,255,255,.08); color: var(--text-secondary); }
.badge-blue   { background: rgba(99,102,241,.15);  color: #818cf8; }
.badge-violet { background: rgba(139,92,246,.15);  color: #a78bfa; }
.badge-green  { background: rgba(16,185,129,.15);  color: #34d399; }
.badge-amber  { background: rgba(245,158,11,.15);  color: #fbbf24; }
.badge-red    { background: rgba(239,68,68,.15);   color: #f87171; }
.badge-cyan   { background: rgba(6,182,212,.15);   color: #22d3ee; }
.badge-indigo { background: rgba(99,102,241,.2);   color: #c7d2fe; }
.badge-pink   { background: rgba(236,72,153,.15);  color: #f472b6; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  animation: slideUp .2s var(--ease);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-sm  { max-width: 420px; }
.modal-md  { max-width: 580px; }
.modal-lg  { max-width: 780px; }
.modal-xl  { max-width: 1000px; }

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

.modal-title {
  font-size: .95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.modal-title svg { color: var(--accent); }

.modal-close {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration);
}
.modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.modal-body   { padding: 1.5rem; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── Alert/Toast ─────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  backdrop-filter: blur(16px);
  font-size: .82rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: toastIn .25s var(--ease);
  cursor: pointer;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast-success { background: rgba(16,185,129,.15);  border-color: rgba(16,185,129,.3);  color: #34d399; }
.toast-error   { background: rgba(239,68,68,.15);   border-color: rgba(239,68,68,.3);   color: #f87171; }
.toast-info    { background: rgba(99,102,241,.15);  border-color: rgba(99,102,241,.3);  color: #818cf8; }
.toast-warning { background: rgba(245,158,11,.15);  border-color: rgba(245,158,11,.3);  color: #fbbf24; }

.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Alert Banner ────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: .82rem;
  margin-bottom: 1rem;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: rgba(99,102,241,.1);  border-color: rgba(99,102,241,.25); color: #c7d2fe; }
.alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #a7f3d0; }
.alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #fde68a; }
.alert-danger  { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.25);  color: #fca5a5; }

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

.tab-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration);
  font-family: inherit;
}

.tab-btn svg { width: 14px; height: 14px; }

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

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Wizard Steps ────────────────────────────────────────────── */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--text-muted);
  transition: all var(--duration);
}

.step-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--duration);
}

.wizard-step.active .step-num {
  background: linear-gradient(135deg, var(--accent), var(--violet));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow);
}

.wizard-step.active .step-label { color: var(--text-primary); }

.wizard-step.done .step-num {
  background: var(--emerald);
  border-color: transparent;
  color: #fff;
}

.wizard-step.done .step-label { color: var(--emerald); }

.wizard-connector {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 20px;
  max-width: 60px;
  transition: background var(--duration);
}

.wizard-connector.done { background: var(--emerald); }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress {
  height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width .5s var(--ease);
}

/* ── Loading Spinner ─────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}

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

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,11,20,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-icon {
  width: 56px; height: 56px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.empty-icon svg { width: 22px; height: 22px; color: var(--text-muted); }

.empty-state h3 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .4rem;
}

.empty-state p { font-size: .8rem; }

/* ── Arama & Filtre Çubuğu ───────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 340px;
}

.search-box svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: .55rem .85rem .55rem 2.25rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: .83rem;
  outline: none;
  transition: border-color var(--duration), box-shadow var(--duration);
}

.search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-actions { margin-left: auto; display: flex; gap: .5rem; }

/* ── Color Swatch Picker ────────────────────────────────────── */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--duration);
}

.swatch:hover, .swatch.selected {
  transform: scale(1.2);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 8px rgba(255,255,255,.2);
}

/* ── Sayfa Başlığı ──────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.page-header-left h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .2rem;
}

.page-header-left p {
  font-size: .8rem;
  color: var(--text-muted);
}

.page-header-right {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Quill Editor Override ──────────────────────────────────── */
.ql-toolbar.ql-snow {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.ql-container.ql-snow {
  background: var(--bg-input);
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  min-height: 200px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

.ql-editor { min-height: 200px; }

.ql-snow .ql-stroke { stroke: var(--text-secondary) !important; }
.ql-snow .ql-fill   { fill: var(--text-secondary) !important; }
.ql-snow .ql-picker-label { color: var(--text-secondary) !important; }

/* ── Login Page ──────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(99,102,241,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(139,92,246,.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 10%, rgba(6,182,212,.07) 0%, transparent 60%);
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: rgba(13,20,38,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 64px rgba(0,0,0,.4);
  position: relative;
  z-index: 1;
  animation: slideUp .3s var(--ease);
}

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

.login-logo-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px var(--accent-glow);
}

.login-logo-icon svg { width: 28px; height: 28px; color: #fff; }

.login-logo h1 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.03em;
}

.login-logo p {
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -.4rem;
}

/* ── Misc ────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-accent   { color: var(--accent); }
.text-success  { color: var(--emerald); }
.text-danger   { color: var(--rose); }
.text-amber    { color: var(--amber); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-sm  { font-size: .75rem; }
.fs-xs  { font-size: .7rem; }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-sm       { gap: .5rem; }
.gap          { gap: .75rem; }
.gap-lg       { gap: 1rem; }
.mt-1         { margin-top: .5rem; }
.mt-2         { margin-top: 1rem; }
.mt-3         { margin-top: 1.5rem; }
.mb-1         { margin-bottom: .5rem; }
.mb-2         { margin-bottom: 1rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;
  padding: 1rem;
}

.page-btn {
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: .78rem;
  cursor: pointer;
  transition: all var(--duration);
  font-family: inherit;
}

.page-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Fatura özel stiller */
.invoice-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.invoice-totals {
  margin-left: auto;
  min-width: 280px;
}

.invoice-total-row {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}

.invoice-total-row.grand {
  border-bottom: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  padding-top: .75rem;
}

/* Kategori renk dot */
.cat-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: .3rem;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; width: 100%; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .page-content { padding: 1rem; }
  .stats-grid   { grid-template-columns: 1fr; }
  .filter-bar   { flex-direction: column; align-items: stretch; }
  .search-box   { max-width: 100%; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}