/* =================================================================
   ArtıRadar - Orijinal Next.js CSS & Tema Sistemi (Dark & Light)
   ================================================================= */

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

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

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
}

/* ================= DARK THEME ================= */
html.dark body {
  background-color: #0a0a0f !important;
  color: #f1f5f9 !important;
}

html.dark aside#desktopSidebar {
  background-color: #12121a !important;
  border-color: #1e293b !important;
}

html.dark .card-dark,
html.dark .card-theme {
  background: linear-gradient(145deg, rgba(26, 26, 46, 0.85) 0%, rgba(18, 18, 26, 0.95) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.1) !important;
  border-radius: 16px;
  color: #f1f5f9 !important;
}
html.dark .card-dark:hover,
html.dark .card-theme:hover {
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.08);
}

html.dark .item-card,
html.dark .bg-surface-box {
  background-color: #1c1c2e !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1c1c2e !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html.dark .sidebar-link {
  color: #94a3b8;
}
html.dark .sidebar-link:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #f1f5f9;
}
html.dark .sidebar-link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  font-weight: 600;
}

html.dark .mobile-topbar,
html.dark .mobile-bottombar {
  background-color: rgba(10, 10, 15, 0.95) !important;
  border-color: #1e293b !important;
}

html.dark .modal-content-box {
  background-color: #141422 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

/* ================= LIGHT THEME ================= */
html:not(.dark) body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html:not(.dark) aside#desktopSidebar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .card-dark,
html:not(.dark) .card-theme {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}
html:not(.dark) .card-dark:hover,
html:not(.dark) .card-theme:hover {
  border-color: #c7d2fe !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.06) !important;
}

html:not(.dark) .item-card,
html:not(.dark) .bg-surface-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) .page-title,
html:not(.dark) .sidebar-title,
html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-200 {
  color: #334155 !important;
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-border-dark {
  border-color: #e2e8f0 !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) .sidebar-link {
  color: #64748b;
}
html:not(.dark) .sidebar-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
html:not(.dark) .sidebar-link.active {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid #e0e7ff !important;
  font-weight: 600;
}

html:not(.dark) .mobile-topbar,
html:not(.dark) .mobile-bottombar {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .modal-content-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* ================= ORTAK BİLEŞENLER ================= */
.gradient-accent {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.98); }

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  cursor: pointer;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  cursor: pointer;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 2px;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.active { display: flex; }

/* Toast */
.toast {
  position: fixed; bottom: 80px; right: 20px; z-index: 100;
  padding: 12px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  color: white; transform: translateY(100px); opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast.success { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
.toast.error { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }