/* ==========================================================================
   Güllüler Tarım — Premium Tema
   Tek kaynak: tasarım tokenları. Açık + karanlık mod.
   Yükleme sırası: bootstrap.min.css → bootstrap-icons.min.css → style.css (Affan)
   → premium-theme.css (BU DOSYA EN SON, kaskadın kazananı)
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. KANONİK TASARIM TOKENLARI
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Marka mavisi (Affan'ın --primary-* ölçeğini kanonikleştirir) */
  --primary-50: #f2f6fe;
  --primary-100: #e5edfd;
  --primary-200: #c8d9fb;
  --primary-300: #9cbcf7;
  --primary-400: #6b98f2;
  --primary-500: #0d5afd;
  --primary-600: #0a4ede;
  --primary-700: #0c41bb;
  --primary-800: #0e358f;
  --primary-900: #0d2a6b;
  --primary-950: #0a1c4a;
  --primary-500-rgb: 13 90 253;

  /* Semantik renkler (üç ayrı paleti birleştirir) */
  --success-500: #10b981;
  --success-700: #059669;
  --success-50: #ecfdf5;
  --success-200: #a7f3d0;
  --success-500-rgb: 16 185 129;

  --danger-500: #ef4444;
  --danger-700: #dc2626;
  --danger-50: #fef2f2;
  --danger-200: #fecaca;
  --danger-500-rgb: 239 68 68;

  --warning-500: #f59e0b;
  --warning-700: #d97706;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-500-rgb: 245 158 11;

  --info-500: #0ea5e9;
  --info-50: #f0f9ff;
  --info-200: #bae6fd;
  --info-500-rgb: 14 165 233;

  /* Nötrler — açık tema */
  --color-bg: #f3f6fc;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafd;
  --color-heading: #0b1730;
  --color-body: #33415c;
  --color-muted: #64748b;
  --color-border: #e2e8f2;
  --color-border-strong: #cbd5e6;

  /* Nötrler — karanlık tema sabitleri */
  --color-heading-dark: #e8eefc;
  --color-body-dark: #9fb0cc;
  --color-muted-dark: #8ea0c0;
  --color-border-dark: rgba(148 163 184 / 0.16);

  /* Karanlık zeminler (Affan'ın dark bloğu bu değişkenleri tüketir) */
  --dark: #050a18;
  --dark-primary: #0a1020;
  --dark-secondary: #121b31;
  --dark-tertiary: #0e1730;

  /* Affan değişken kancaları (style.css içindeki kurallar bunları tüketir) */
  --secondary-500: #8696a7;
  --text: #33415c;
  --heading: #0b1730;
  --border: #e2e8f2;
  --white: #ffffff;

  /* Eski --app-* kancaları (StokSayimView vb. tüketiyor) */
  --app-primary: #0d5afd;
  --app-primary-dark: #0236a8;
  --app-bg: #f3f6fc;
  --app-card-bg: #ffffff;
  --app-text: #0b1730;
  --app-text-muted: #64748b;
  --app-success: #10b981;
  --app-danger: #ef4444;
  --app-warning: #f59e0b;

  /* Bootstrap 5.3 kök yeniden eşlemesi (text-/bg-/btn-* yardımcıları bunu izler) */
  --bs-primary: #0d5afd;
  --bs-primary-rgb: 13 90 253;
  --bs-success: #10b981;
  --bs-success-rgb: 16 185 129;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239 68 68;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245 158 11;
  --bs-info: #0ea5e9;
  --bs-info-rgb: 14 165 233;
  --bs-body-color: #33415c;
  --bs-body-bg: #f3f6fc;
  --bs-emphasis-color: #0b1730;
  --bs-secondary-color: #64748b;
  --bs-tertiary-color: rgba(100 116 139 / 0.6);
  --bs-border-color: #e2e8f2;
  --bs-light: #f8fafd;
  --bs-light-rgb: 248 250 253;
  --bs-light-text-emphasis: #33415c;
  --bs-link-color: #0d5afd;
  --bs-link-color-rgb: 13 90 253;
  --bs-link-hover-color: #0a4ede;
  --bs-link-hover-color-rgb: 10 78 222;

  /* Tipografi */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Yarıçaplar */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Gölgeler (katmanlı, soğuk mavi-gri) */
  --shadow-xs: 0 1px 2px rgba(13 22 48 / 0.05);
  --shadow-sm: 0 6px 16px -6px rgba(13 22 48 / 0.10);
  --shadow-md: 0 12px 28px -10px rgba(13 22 48 / 0.14);
  --shadow-lg: 0 24px 48px -12px rgba(13 22 48 / 0.22);
  --shadow-brand: 0 8px 20px -6px rgba(13 90 253 / 0.38);

  /* Gradyanlar */
  --grad-brand: linear-gradient(135deg, #0d5afd 0%, #0a4ede 48%, #0837a8 100%);
  --grad-hero: linear-gradient(140deg, #0d5afd 0%, #0a4ede 45%, #07297c 100%);

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. EKSİK / BOZUK YARDIMCI SINIFLAR (şablonda ~150 kez kullanılıyor)
   ────────────────────────────────────────────────────────────────────────── */
.fs-7 { font-size: 0.875rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.625rem !important; }
.fs-7-5 { font-size: 0.875rem !important; }
.fs-8-5 { font-size: 0.75rem !important; }
.cursor-pointer { cursor: pointer; }
.text-wrap-break { white-space: pre-wrap; word-break: break-word; }

/* "Masaüstü admin" kabuğu (Profil / Kullanıcılar / API Log) — şablonda tanımsızdı */
.main-content-wrapper { min-height: calc(100vh - 50px); padding: 1.25rem 1rem; }
.max-width-md { max-width: 720px; margin-inline: auto; }
.max-width-lg { max-width: 1120px; margin-inline: auto; }

/* ──────────────────────────────────────────────────────────────────────────
   3. TABAN & TİPOGRAFİ
   ────────────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  transition: background-color 0.18s ease, color 0.18s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

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

:focus-visible { outline: 2px solid rgba(13 90 253 / 0.45); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ──────────────────────────────────────────────────────────────────────────
   4. ÜST BAR (HEADER)
   ────────────────────────────────────────────────────────────────────────── */
.header-area {
  background-color: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border), 0 4px 14px -8px rgba(13 22 48 / 0.08);
}

.header-logo-chip {
  height: 34px;
  max-width: 44px;
  object-fit: contain;
  padding: 3px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
}

.navbar--toggler span { background-color: var(--color-heading); }
html[data-theme="dark"] .navbar--toggler span { background-color: var(--color-heading-dark); }

/* ──────────────────────────────────────────────────────────────────────────
   5. ALT GEZİNME (FOOTER NAV)
   ────────────────────────────────────────────────────────────────────────── */
.footer-nav {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  box-shadow: var(--shadow-md);
}

.footer-nav ul li a { color: var(--color-muted); }

.footer-nav ul li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  font-size: 1.15rem;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.footer-nav ul li a span {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
  color: var(--color-muted);
}

.footer-nav ul li.active a i {
  background: var(--grad-brand);
  color: #ffffff;
  box-shadow: var(--shadow-brand);
}

.footer-nav ul li.active a span { color: var(--primary-600); }
html[data-theme="dark"] .footer-nav ul li.active a span { color: var(--primary-300); }

/* ──────────────────────────────────────────────────────────────────────────
   6. YAN MENÜ (SIDENAV / OFFCANVAS)
   ────────────────────────────────────────────────────────────────────────── */
.sidenav-wrapper { min-height: 100%; }

.sidenav-profile {
  background: var(--grad-brand);
  position: relative;
  overflow: hidden;
}

.sidenav-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 100% at 90% 0%, rgba(255 255 255 / 0.22), transparent 55%);
  pointer-events: none;
}

.sidenav-profile .user-profile img {
  border: 2px solid rgba(255 255 255 / 0.35);
  box-shadow: 0 10px 24px -10px rgba(2 6 23 / 0.55);
}

.sidenav-profile .sidenav-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #ffffff;
  padding: 4px;
  border-radius: 50%;
}

.sidenav-nav li a {
  display: flex;
  align-items: center;
  color: var(--color-body);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.15rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidenav-nav li a i {
  color: var(--color-muted);
  width: 1.4rem;
  text-align: center;
  transition: color 0.15s ease;
}

.sidenav-nav li a:hover { background: var(--primary-50); color: var(--primary-700); }
.sidenav-nav li a:hover i { color: var(--primary-500); }
.sidenav-nav li a.text-danger:hover { background: var(--danger-50); color: var(--danger-700); }

html[data-theme="dark"] .sidenav-nav li a { color: var(--color-body-dark); }
html[data-theme="dark"] .sidenav-nav li a:hover { color: #cfe0ff; }

/* ──────────────────────────────────────────────────────────────────────────
   7. KARTLAR
   ────────────────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.card-header, .card-footer {
  background-color: transparent;
  border-color: var(--color-border);
}

/* Profil sayfası degrade başlık yardımcısı */
.bg-gradient-primary { background: var(--grad-brand) !important; }

.avatar-wrapper { box-shadow: var(--shadow-sm); }

/* ──────────────────────────────────────────────────────────────────────────
   8. BUTONLAR
   ────────────────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn:not(.btn-sm):not(.btn-link):not(.btn-close) { min-height: 42px; }

.btn-primary {
  background: var(--grad-brand);
  border-color: var(--primary-500);
  box-shadow: var(--shadow-brand);
}

.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  border-color: var(--primary-600);
}

.btn-success { box-shadow: 0 6px 16px -6px rgba(16 185 129 / 0.45); }
.btn-danger { box-shadow: 0 6px 16px -6px rgba(239 68 68 / 0.45); }

/* Amber buton üzerinde koyu, okunabilir metin */
.btn-warning {
  --bs-btn-color: #231a00;
  --bs-btn-hover-color: #231a00;
  --bs-btn-active-color: #231a00;
  box-shadow: 0 6px 16px -6px rgba(245 158 11 / 0.5);
}

.btn-outline-primary { --bs-btn-color: var(--primary-600); --bs-btn-border-color: var(--primary-400); --bs-btn-hover-bg: var(--primary-500); --bs-btn-hover-border-color: var(--primary-500); }
.btn-outline-success { --bs-btn-color: var(--success-700); --bs-btn-border-color: var(--success-500); --bs-btn-hover-bg: var(--success-500); --bs-btn-hover-border-color: var(--success-500); }
.btn-outline-danger { --bs-btn-color: var(--danger-700); --bs-btn-border-color: var(--danger-500); --bs-btn-hover-bg: var(--danger-500); --bs-btn-hover-border-color: var(--danger-500); }
.btn-outline-warning { --bs-btn-color: #a16207; --bs-btn-border-color: var(--warning-500); --bs-btn-hover-bg: var(--warning-500); --bs-btn-hover-border-color: var(--warning-500); --bs-btn-hover-color: #231a00; }

.btn-link { --bs-btn-color: var(--primary-600); --bs-btn-hover-color: var(--primary-700); }

/* ──────────────────────────────────────────────────────────────────────────
   9. FORMLAR
   ────────────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-body);
  font-size: 0.925rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px rgba(13 90 253 / 0.12);
  background-color: var(--color-surface);
  color: var(--color-body);
}

.form-label { font-weight: 600; color: var(--color-heading); font-size: 0.875rem; }

.input-group-text {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-muted);
}

.form-check-input:checked { background-color: var(--primary-500); border-color: var(--primary-500); }
.form-check-input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 0.2rem rgba(13 90 253 / 0.15); }

/* ──────────────────────────────────────────────────────────────────────────
   10. TABLOLAR
   ────────────────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  color: var(--color-body);
}

.table th {
  background-color: transparent;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  white-space: nowrap;
}

.table td {
  border-color: var(--color-border);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.table-hover { --bs-table-hover-bg: rgba(13 90 253 / 0.045); }

/* ──────────────────────────────────────────────────────────────────────────
   11. ROZETLER
   ────────────────────────────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: 0.01em; }

.badge-soft-primary { background-color: var(--primary-100); color: var(--primary-800); }
.badge-soft-success { background-color: var(--success-50); color: #065f46; }
.badge-soft-danger { background-color: var(--danger-50); color: #991b1b; }
.badge-soft-warning { background-color: var(--warning-50); color: #92400e; }
.badge-soft-info { background-color: var(--info-50); color: #075985; }
.badge-soft-secondary {
  background-color: var(--color-surface-2);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

html[data-theme="dark"] .badge-soft-primary { background-color: rgba(13 90 253 / 0.16); color: #93b4fd; }
html[data-theme="dark"] .badge-soft-success { background-color: rgba(16 185 129 / 0.16); color: #6ee7b7; }
html[data-theme="dark"] .badge-soft-danger { background-color: rgba(239 68 68 / 0.16); color: #fca5a5; }
html[data-theme="dark"] .badge-soft-warning { background-color: rgba(245 158 11 / 0.16); color: #fcd34d; }
html[data-theme="dark"] .badge-soft-info { background-color: rgba(14 165 233 / 0.16); color: #7dd3fc; }
html[data-theme="dark"] .badge-soft-secondary { background-color: rgba(148 163 184 / 0.12); color: var(--color-muted-dark); border-color: var(--color-border-dark); }

/* ──────────────────────────────────────────────────────────────────────────
   12. ÖZEL SEGMENT SEKMELERİ (nav-pills-custom)
   ────────────────────────────────────────────────────────────────────────── */
.nav-pills-custom {
  background-color: var(--color-border);
  padding: 4px;
  border-radius: var(--radius-lg);
}

.nav-pills-custom .nav-link {
  color: var(--color-muted);
  font-weight: 600;
  border-radius: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  transition: all 0.2s ease;
}

.nav-pills-custom .nav-link:hover { color: var(--color-heading); }

.nav-pills-custom .nav-link.active-primary {
  background: var(--grad-brand);
  color: #ffffff;
  box-shadow: var(--shadow-brand);
}

.nav-pills-custom .nav-link.active-success {
  background: linear-gradient(135deg, var(--success-500), var(--success-700));
  color: #ffffff;
  box-shadow: 0 4px 12px -4px rgba(16 185 129 / 0.5);
}

.nav-pills-custom .nav-link.active-danger {
  background: linear-gradient(135deg, var(--danger-500), var(--danger-700));
  color: #ffffff;
  box-shadow: 0 4px 12px -4px rgba(239 68 68 / 0.5);
}

/* ──────────────────────────────────────────────────────────────────────────
   13. KOYU İSTATİSTİK KARTLARI (stat-card-motorin / stat-card-emanet)
   ────────────────────────────────────────────────────────────────────────── */
.stat-card-motorin {
  background: linear-gradient(135deg, #0d1f4d 0%, #0a1633 100%);
  color: #ffffff;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}

.stat-card-motorin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(13 90 253 / 0.38), transparent 55%);
  pointer-events: none;
}

.stat-card-emanet {
  background: linear-gradient(135deg, #37306b 0%, #1e1b4b 100%);
  color: #ffffff;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}

.stat-card-emanet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(129 140 248 / 0.3), transparent 55%);
  pointer-events: none;
}

/* Koyu kart içindeki yardımcı renkler her iki temada da okunur kalsın */
.stat-card-motorin .text-warning, .stat-card-emanet .text-warning { color: #fbbf24 !important; }
.stat-card-motorin .text-success, .stat-card-emanet .text-success { color: #34d399 !important; }
.stat-card-motorin .text-danger, .stat-card-emanet .text-danger { color: #f87171 !important; }
.stat-card-motorin .border-secondary, .stat-card-emanet .border-secondary { border-color: rgba(148 163 184 / 0.28) !important; }

/* İstatistik kartı ikon rozetleri */
.stat-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 0.9rem;
  background: rgba(255 255 255 / 0.12);
  border: 1px solid rgba(255 255 255 / 0.16);
  font-size: 1.35rem;
  backdrop-filter: blur(4px);
}

.stat-icon-chip-sm { width: 32px; height: 32px; font-size: 0.95rem; border-radius: 0.7rem; }
.stat-card-motorin .stat-icon-chip { color: #fbbf24; }
.stat-card-emanet .stat-icon-chip { color: #fca5a5; }

/* ──────────────────────────────────────────────────────────────────────────
   14. HOŞ GELDİN HERO KARTI
   ────────────────────────────────────────────────────────────────────────── */
.welcome-hero {
  background: var(--grad-hero);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brand);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.welcome-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 85% 10%, rgba(255 255 255 / 0.18), transparent 55%);
  pointer-events: none;
}

.hero-logo {
  height: 48px;
  background: #ffffff;
  padding: 6px;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 6px 16px -6px rgba(2 6 23 / 0.35);
}

/* ──────────────────────────────────────────────────────────────────────────
   15. HIZLI İŞLEM KUTUCUKLARI (quick-tile)
   ────────────────────────────────────────────────────────────────────────── */
.quick-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-heading);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Üst ince parlama çizgisi */
.quick-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255 255 255 / 0.8), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.quick-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  color: var(--color-heading);
}

.quick-tile:hover::before { opacity: 1; }

.quick-tile:active { transform: translateY(-1px) scale(0.98); }

/* İkon çipi — degrade + renkli ışıma */
.quick-tile .tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
  font-size: 1.2rem;
  flex: 0 0 auto;
  color: #ffffff;
  transition: transform 0.18s ease;
}

.quick-tile:hover .tile-icon { transform: scale(1.08) rotate(-4deg); }

.quick-tile-success .tile-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 14px -6px rgba(16 185 129 / 0.55);
}
.quick-tile-danger .tile-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 6px 14px -6px rgba(239 68 68 / 0.55);
}
.quick-tile-primary .tile-icon {
  background: linear-gradient(135deg, #0d5afd, #0c41bb);
  box-shadow: 0 6px 14px -6px rgba(13 90 253 / 0.55);
}
.quick-tile-warning .tile-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 6px 14px -6px rgba(245 158 11 / 0.55);
}

/* Tonlu zeminler */
.quick-tile-success { background: linear-gradient(145deg, var(--success-50), var(--color-surface) 65%); border-color: var(--success-200); }
.quick-tile-danger { background: linear-gradient(145deg, var(--danger-50), var(--color-surface) 65%); border-color: var(--danger-200); }
.quick-tile-primary { background: linear-gradient(145deg, var(--primary-50), var(--color-surface) 65%); border-color: var(--primary-200); }
.quick-tile-warning { background: linear-gradient(145deg, var(--warning-50), var(--color-surface) 65%); border-color: var(--warning-200); }

/* Metin bloğu */
.quick-tile .tile-text { display: flex; flex-direction: column; min-width: 0; }
.quick-tile .tile-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-heading);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-tile .tile-sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dar telefon ekranları: kompakt kutucuk (2 sütun düzeninde) */
@media (max-width: 575.98px) {
  .quick-tile { gap: 0.6rem; padding: 0.7rem 0.75rem; }
  .quick-tile .tile-icon { width: 2.3rem; height: 2.3rem; font-size: 1.05rem; border-radius: 0.75rem; }
  .quick-tile .tile-title { font-size: 0.8rem; }
  .quick-tile .tile-sub { font-size: 0.64rem; }
}

/* Hover'da beliren ok */
.quick-tile .tile-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--color-border-strong);
  font-size: 0.8rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.18s ease;
}

.quick-tile:hover .tile-arrow { opacity: 1; transform: none; color: var(--color-muted); }

@media (max-width: 575.98px) {
  .quick-tile .tile-arrow { display: none; }
}

/* Tam degrade kutucuklar */
.quick-tile-grad-primary { background: var(--grad-brand); color: #ffffff; border: 0; }
.quick-tile-grad-primary:hover { color: #ffffff; box-shadow: var(--shadow-brand); border-color: transparent; }
.quick-tile-grad-primary .tile-icon { background: rgba(255 255 255 / 0.18); color: #ffffff; box-shadow: none; }
.quick-tile-grad-primary .tile-title { color: #ffffff; }
.quick-tile-grad-primary .tile-sub { color: rgba(255 255 255 / 0.75); }
.quick-tile-grad-primary .tile-arrow { color: rgba(255 255 255 / 0.7); }
.quick-tile-grad-primary:hover .tile-arrow { color: #ffffff; }

.quick-tile-grad-warning {
  background: linear-gradient(135deg, var(--warning-500), var(--warning-700));
  color: #231a00;
  border: 0;
}
.quick-tile-grad-warning:hover { color: #231a00; box-shadow: 0 8px 18px -6px rgba(245 158 11 / 0.5); border-color: transparent; }
.quick-tile-grad-warning .tile-icon { background: rgba(255 255 255 / 0.35); color: #78350f; box-shadow: none; }
.quick-tile-grad-warning .tile-title { color: #231a00; }
.quick-tile-grad-warning .tile-sub { color: rgba(35 26 0 / 0.65); }
.quick-tile-grad-warning .tile-arrow { color: rgba(35 26 0 / 0.5); }
.quick-tile-grad-warning:hover .tile-arrow { color: #231a00; }

/* ──────────────────────────────────────────────────────────────────────────
   16. GİRİŞ EKRANI
   ────────────────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--color-bg);
  background-image:
    radial-gradient(60% 50% at 15% 10%, rgba(13 90 253 / 0.14), transparent 60%),
    radial-gradient(50% 40% at 90% 85%, rgba(13 90 253 / 0.12), transparent 60%);
}

.login-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

html[data-theme="dark"] .login-page {
  background: var(--dark-primary);
  background-image:
    radial-gradient(60% 50% at 15% 10%, rgba(13 90 253 / 0.16), transparent 60%),
    radial-gradient(50% 40% at 90% 85%, rgba(13 90 253 / 0.14), transparent 60%);
}

/* ──────────────────────────────────────────────────────────────────────────
   17. MODALLAR
   ────────────────────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.modal-header, .modal-footer { border-color: var(--color-border); }
.modal-backdrop.show { opacity: 0.6; backdrop-filter: blur(2px); }

html[data-theme="dark"] .modal-content {
  background: var(--dark-secondary);
  border-color: var(--color-border-dark);
}

/* Onay modalı ikon dairesi */
.app-confirm-icon { width: 56px; height: 56px; }

/* ──────────────────────────────────────────────────────────────────────────
   18. TOASTLAR (helpers/toast.js ile birlikte çalışır)
   ────────────────────────────────────────────────────────────────────────── */
.app-toast-container {
  position: fixed;
  top: 66px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
}

@media (max-width: 575.98px) {
  .app-toast-container { left: 16px; right: 16px; margin-inline: auto; }
}

.app-toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  animation: app-toast-in 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-toast.app-toast-out {
  opacity: 0;
  transform: translateY(-12px);
  transition: all 0.25s ease;
}

.app-toast .app-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}

.app-toast .app-toast-msg {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-heading);
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.app-toast-success .app-toast-icon { background: var(--success-50); color: var(--success-500); }
.app-toast-danger .app-toast-icon { background: var(--danger-50); color: var(--danger-500); }
.app-toast-warning .app-toast-icon { background: var(--warning-50); color: var(--warning-700); }
.app-toast-info .app-toast-icon { background: var(--info-50); color: var(--info-500); }

@keyframes app-toast-in {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

html[data-theme="dark"] .app-toast {
  background: var(--dark-secondary);
  border-color: var(--color-border-dark);
}
html[data-theme="dark"] .app-toast .app-toast-msg { color: var(--color-heading-dark); }
html[data-theme="dark"] .app-toast-success .app-toast-icon { background: rgba(16 185 129 / 0.16); color: #6ee7b7; }
html[data-theme="dark"] .app-toast-danger .app-toast-icon { background: rgba(239 68 68 / 0.16); color: #fca5a5; }
html[data-theme="dark"] .app-toast-warning .app-toast-icon { background: rgba(245 158 11 / 0.16); color: #fcd34d; }
html[data-theme="dark"] .app-toast-info .app-toast-icon { background: rgba(14 165 233 / 0.16); color: #7dd3fc; }

/* ──────────────────────────────────────────────────────────────────────────
   19. KAMERA / BARKOD MODALI
   ────────────────────────────────────────────────────────────────────────── */
.camera-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5 10 25 / 0.72);
  z-index: 9999;
  padding: 15px;
  backdrop-filter: blur(4px);
}

.camera-card {
  max-width: 480px;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.camera-view {
  width: 100%;
  max-width: 420px;
  min-height: 250px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

html[data-theme="dark"] .camera-card { background: var(--dark-secondary); }

/* ──────────────────────────────────────────────────────────────────────────
   20. LOG KONSOLU (her iki temada koyu konsol)
   ────────────────────────────────────────────────────────────────────────── */
.log-entries-wrapper {
  background-color: #0f1420 !important;
  border-radius: var(--radius-md);
}

.log-entry-row {
  border-bottom: 1px solid #232c3c !important;
  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   21. SAYFALAMA & UYARILAR & ÇEŞİTLİ
   ────────────────────────────────────────────────────────────────────────── */
.pagination {
  --bs-pagination-color: var(--color-muted);
  --bs-pagination-bg: var(--color-surface);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-hover-color: var(--primary-600);
  --bs-pagination-hover-bg: var(--primary-50);
  --bs-pagination-hover-border-color: var(--color-border);
  --bs-pagination-active-bg: var(--primary-500);
  --bs-pagination-active-border-color: var(--primary-500);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(13 90 253 / 0.18);
  --bs-pagination-disabled-bg: var(--color-surface-2);
  --bs-pagination-disabled-border-color: var(--color-border);
}

.page-link { border-radius: var(--radius-sm) !important; }

.alert { border-radius: var(--radius-md); font-size: 0.875rem; }

.offcanvas { background: var(--color-surface); }

/* Tema değiştirme düğmesi (header) */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  color: var(--primary-500);
  border-color: var(--primary-300);
  transform: rotate(15deg);
}

/* ──────────────────────────────────────────────────────────────────────────
   22. KARANLIK MOD KATMANI
   Affan'ın [data-theme=dark] bloğu alt temeli kurar (html özniteliğini tüketir);
   biz yalnızca değişkenleri ve eksik yüzeyleri burada rafine ederiz.
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  /* Yüzeyler & metin */
  --color-bg: var(--dark-primary);
  --color-surface: var(--dark-secondary);
  --color-surface-2: var(--dark-tertiary);
  --color-heading: var(--color-heading-dark);
  --color-body: var(--color-body-dark);
  --color-muted: var(--color-muted-dark);
  --color-border: var(--color-border-dark);
  --color-border-strong: rgba(148 163 184 / 0.3);

  /* Semantik tonlar → alfa sürümleri (rozetler, kutucuklar, sayım satırları) */
  --primary-50: rgba(13 90 253 / 0.10);
  --primary-100: rgba(13 90 253 / 0.16);
  --primary-200: rgba(13 90 253 / 0.28);
  --primary-300: rgba(13 90 253 / 0.45);
  --success-50: rgba(16 185 129 / 0.12);
  --success-200: rgba(16 185 129 / 0.30);
  --warning-50: rgba(245 158 11 / 0.12);
  --warning-100: rgba(245 158 11 / 0.16);
  --warning-200: rgba(245 158 11 / 0.30);
  --danger-50: rgba(239 68 68 / 0.12);
  --danger-200: rgba(239 68 68 / 0.30);
  --info-50: rgba(14 165 233 / 0.12);
  --info-200: rgba(14 165 233 / 0.30);

  /* Bootstrap kök yeniden eşlemesi */
  --bs-body-bg: var(--dark-primary);
  --bs-body-color: var(--color-body-dark);
  --bs-emphasis-color: var(--color-heading-dark);
  --bs-secondary-color: var(--color-muted-dark);
  --bs-tertiary-color: rgba(142 160 192 / 0.6);
  --bs-border-color: var(--color-border-dark);
  --bs-light: var(--dark-secondary);
  --bs-light-rgb: 18 27 49;
  --bs-light-text-emphasis: var(--color-heading-dark);

  /* Gölgeler */
  --shadow-xs: 0 1px 2px rgba(0 0 0 / 0.4);
  --shadow-sm: 0 6px 16px -6px rgba(0 0 0 / 0.5);
  --shadow-md: 0 12px 28px -10px rgba(0 0 0 / 0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0 0 0 / 0.7);

  color-scheme: dark;
}

html[data-theme="dark"] .offcanvas { background: var(--dark-secondary); color: var(--color-body-dark); }

/* Koyu temada açık temaya ait kalan açık renkli yüzeyler */
html[data-theme="dark"] .header-area { background-color: var(--dark-secondary); }
html[data-theme="dark"] .footer-nav { background-color: var(--dark-secondary); }
html[data-theme="dark"] .footer-nav ul li a { color: var(--color-muted-dark); }
html[data-theme="dark"] .footer-nav ul li a span { color: var(--color-muted-dark); }
html[data-theme="dark"] .nav-pills-custom { background-color: #1a2338; }
html[data-theme="dark"] .nav-pills-custom .nav-link:hover { color: var(--color-heading-dark); }
html[data-theme="dark"] .quick-tile {
  background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface) 65%);
  border-color: var(--color-border-dark);
  color: var(--color-heading-dark);
}
html[data-theme="dark"] .quick-tile:hover { color: var(--color-heading-dark); border-color: var(--color-border-strong); }
html[data-theme="dark"] .quick-tile .tile-title { color: var(--color-heading-dark); }
html[data-theme="dark"] .quick-tile .tile-sub { color: var(--color-muted-dark); }
html[data-theme="dark"] .quick-tile-success { border-color: var(--success-200); }
html[data-theme="dark"] .quick-tile-danger { border-color: var(--danger-200); }
html[data-theme="dark"] .quick-tile-primary { border-color: var(--primary-200); }
html[data-theme="dark"] .quick-tile-warning { border-color: var(--warning-200); }
html[data-theme="dark"] .theme-toggle-btn { background: var(--dark-secondary); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background-color: var(--dark-tertiary);
  color: var(--color-body-dark);
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus {
  background-color: var(--dark-tertiary);
  color: var(--color-body-dark);
}
html[data-theme="dark"] .input-group-text { background-color: var(--dark-tertiary); color: var(--color-muted-dark); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--color-border-dark); }