/* RaportAI Liquid Glass — Component Overrides
   En son yüklenir; tüm Bootstrap + 3rd-party stilleri override eder. */

/* ── CSS Variables ── */
:root {
  --tile:       rgba(58, 139, 245, 0.10);   /* dark: hover tile rengi */
  --tile-border:rgba(255, 255, 255, 0.025); /* dark: tile kenar (çok ince) */
  --sidebar-bg: rgba(7, 12, 32, 0.82);      /* dark: yarı-opak cam sidebar */
}
[data-theme="light"] {
  --tile:       rgba(20, 96, 216, 0.08);
  --tile-border:rgba(20, 96, 216, 0.05);
  --sidebar-bg: rgba(232, 239, 253, 0.85);  /* light: yarı-opak cam sidebar */
}

/* ── Tile Grid Background ──
   z-index:-1 + pointer-events:none → her zaman içeriğin ARKASINDA kalır ve
   hiçbir tıklamayı engellemez. Hover, tiles.js'te document mousemove ile
   yakalanır; bu yüzden pointer-events gerekmez. */
#raportai-tiles {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  pointer-events: none;
  overflow: hidden;
  /* Perf: tile class değişimleri sayfanın geri kalanının layout/paint
     hesabını tetiklemesin diye izolasyon. */
  contain: strict;
}
.tiles-tile {
  width: 56px;
  height: 56px;
  border-right: 1px solid var(--tile-border);
  border-bottom: 1px solid var(--tile-border);
  background: transparent;
  transition: background-color 2.2s ease;
  contain: strict;
}
.tiles-tile.tiles-glow-hover {
  background-color: var(--tile) !important;
  transition: background-color 0s !important;
}
.tiles-tile.tiles-glow-ambient {
  background-color: rgba(58, 139, 245, 0.025);
  transition: background-color 1.8s ease;
}
[data-theme="light"] .tiles-tile.tiles-glow-ambient {
  background-color: rgba(20, 96, 216, 0.025);
}

/* Katman düzeni — içerik tile/orb'ların üstünde, sidebar fixed kalır */
.app-container { position: relative; z-index: 2; }
.main-content  { position: relative; z-index: 2; }
/* Modal backdrop'tan ÜSTTE olmalı (Bootstrap: modal 1055 > backdrop 1050).
   Aynı z-index olursa backdrop modalın üstüne binip tıklamaları yutar. */
.modal-backdrop { z-index: 1050 !important; }
.modal { z-index: 1055 !important; }
/* Sidebar fixed — position'a DOKUNMA, sadece z-index ver */
#sidebar-container, .sidebar { z-index: 100; }
/* Orb'lar da içeriğin arkasında (negatif z-index) */
.bg-scene { z-index: -1 !important; pointer-events: none !important; }

/* ── Glass Utilities ── */
.glass {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  transition: background 0.3s, border-color 0.3s;
}
.glass:hover { background: var(--glass-bg-hover) !important; }
.glass-strong {
  background: var(--glass-bg-active) !important;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--glass-border-hi) !important;
}

/* ── Background Orbs ── */
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(140px); animation: orb-drift 16s ease-in-out infinite; }
.orb-1 { width: 600px; height: 600px; top: -220px; left: -180px;
  background: radial-gradient(circle, rgba(58, 139, 245, 0.08), transparent 70%); }
.orb-2 { width: 460px; height: 460px; top: 35%; right: -160px;
  background: radial-gradient(circle, rgba(0, 204, 240, 0.05), transparent 70%);
  animation-duration: 13s; animation-delay: -4s; animation-direction: reverse; }
.orb-3 { width: 380px; height: 380px; bottom: 6%; left: 18%;
  background: radial-gradient(circle, rgba(160, 112, 224, 0.04), transparent 70%);
  animation-duration: 20s; animation-delay: -9s; }
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -32px) scale(1.04); }
  66%       { transform: translate(-16px, 18px) scale(0.97); }
}
[data-theme="light"] .orb-1 { background: radial-gradient(circle, rgba(20, 96, 216, 0.10), transparent 70%); }
[data-theme="light"] .orb-2 { background: radial-gradient(circle, rgba(0, 144, 192, 0.07), transparent 70%); }
[data-theme="light"] .orb-3 { background: radial-gradient(circle, rgba(160, 112, 224, 0.05), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* ── Page base ── */
html { background: var(--bg-primary); }
body { background: var(--bg-primary) !important; font-family: 'Outfit', sans-serif !important; }
h1, h2, h3, h4, .page-title, .card-title, .modal-title {
  font-family: 'Sora', sans-serif !important; letter-spacing: -0.02em !important;
}
.app-container { position: relative; z-index: 1; }

/* ── Sidebar ──
   ÖNEMLI: Sidebar'a backdrop-filter VERME. Aksi halde içindeki
   position:fixed flyout panelleri (sol menü açılır alt menüleri) sidebar'a
   göre konumlanıp overflow:auto ile kırpılır ve kaybolur.
   Cam görünümü yarı-opak arka plan ile sağlanır. */
#sidebar-container, .sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid var(--glass-border) !important;
  width: var(--sidebar-width) !important;
  box-shadow: none !important;
}
.sidebar-header { background: transparent !important; border-bottom: 1px solid var(--glass-border) !important; }
.logo-brand-card {
  background: rgba(58, 139, 245, 0.12) !important;
  border: 1px solid rgba(58, 139, 245, 0.20) !important;
  border-radius: 10px !important;
}
.logo-raport { color: var(--text-primary) !important; }
.logo-ai { color: var(--accent) !important; }
.logo-text h1 { font-family: 'Sora', sans-serif !important; font-weight: 800 !important; }
.sidebar .nav-section-title {
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--text-muted) !important; padding: 16px 20px 6px !important;
}
.sidebar .nav-link {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 16px !important; margin: 2px 10px !important;
  color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important; font-size: 14px !important;
  font-weight: 500 !important; transition: all 0.2s !important; text-decoration: none !important;
}
.sidebar .nav-link:hover { background: var(--glass-bg-hover) !important; color: var(--text-primary) !important; border-color: transparent !important; }
.sidebar .nav-link.active {
  background: rgba(var(--accent-rgb), 0.15) !important;
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  font-weight: 600 !important;
}
.sidebar .nav-link i { width: 18px !important; text-align: center !important; font-size: 15px !important; }
.user-avatar {
  background: linear-gradient(135deg, #3A8BF5, #00CCF0) !important;
  border: none !important; box-shadow: 0 0 18px rgba(58, 139, 245, 0.40) !important;
  color: #fff !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important;
}
.user-info h3 { color: var(--text-primary) !important; font-family: 'Sora', sans-serif !important; }
.user-info p  { color: var(--text-muted) !important; }
.main-content { margin-left: var(--sidebar-width) !important; background: transparent !important; }

/* ── Topbar / Page Header ──
 * Başlık kartları içerik kartlarıyla (.card) aynı görünmeli: tam kenarlık,
 * yuvarlak köşe ve iç boşluk. Eskiden yalnızca border-bottom + radius:0 +
 * padding:0 idi → "tam dikdörtgen, yazı kenara taşıyor" görünümü. */
.page-header, .topbar, .content-header, .welcome-banner {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere;
}
.page-header, .topbar, .content-header { position: sticky !important; top: 12px !important; z-index: 90 !important; }
.welcome-banner { border: 1px solid var(--glass-border) !important; border-radius: var(--radius-lg) !important; }
.welcome-greeting { font-family: 'Sora', sans-serif !important; font-weight: 700 !important; color: var(--text-primary) !important; }

/* ── Cards ── */
.card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(58, 139, 245, 0.28) !important;
  box-shadow: 0 6px 28px rgba(26, 94, 204, 0.18) !important;
}
.card-header {
  background: transparent !important; border-bottom: 1px solid var(--glass-border) !important;
  font-family: 'Sora', sans-serif !important; font-weight: 600 !important; font-size: 15px !important;
  padding: 18px 22px !important; color: var(--text-primary) !important;
}
.card-body  { padding: 22px !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--glass-border) !important; }

/* ── KPI / Metric Cards ── */
.kpi-card, .stat-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
}
.kpi-number, .stat-value, .metric-value, .stats-number {
  font-family: 'Sora', sans-serif !important; font-size: 34px !important; font-weight: 800 !important;
  background: linear-gradient(120deg, #3A8BF5, #00CCF0) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; line-height: 1 !important;
}
.kpi-label, .stat-label, .metric-label { font-size: 13px !important; color: var(--text-secondary) !important; margin-top: 4px !important; }
.kpi-icon, .stat-icon {
  width: 46px !important; height: 46px !important; border-radius: 13px !important;
  background: rgba(58, 139, 245, 0.12) !important; border: 1px solid rgba(58, 139, 245, 0.20) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--accent) !important; font-size: 18px !important;
}

/* ── Buttons ── */
.btn { font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; border-radius: 11px !important; transition: all 0.2s ease !important; }
.btn-primary {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
  box-shadow: 0 0 22px rgba(58, 139, 245, 0.32) !important;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.12) !important; transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(58, 139, 245, 0.45) !important;
}
.btn-primary:active { transform: translateY(0) !important; }
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-light, .btn-light, .btn-outline-dark {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important; backdrop-filter: blur(12px) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-light:hover, .btn-light:hover {
  background: var(--glass-bg-hover) !important; color: var(--text-primary) !important;
  border-color: var(--glass-border-hi) !important;
}
.btn-success { background: #1EC978 !important; border-color: #1EC978 !important; color: #fff !important; }
.btn-success:hover { filter: brightness(1.10) !important; }
.btn-danger  { background: #E83A3A !important; border-color: #E83A3A !important; color: #fff !important; }
.btn-danger:hover  { filter: brightness(1.10) !important; }
.btn-warning { background: #E8A020 !important; border-color: #E8A020 !important; color: #fff !important; }
.btn-warning:hover { filter: brightness(1.10) !important; }
.btn-info    { background: #3A8BF5 !important; border-color: #3A8BF5 !important; color: #fff !important; }

/* ── Tables ── */
.table { color: var(--text-primary) !important; border-color: var(--glass-border) !important; }
.table > thead > tr > th {
  font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: var(--text-muted) !important; border-bottom: 1px solid var(--glass-border) !important;
  padding: 12px 16px !important; background: transparent !important;
}
.table > tbody > tr > td {
  padding: 14px 16px !important; border-color: var(--glass-border) !important;
  font-size: 14px !important; vertical-align: middle !important; color: var(--text-primary) !important;
}
.table > tbody > tr:hover > td { background: var(--glass-bg-hover) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255,255,255,0.02) !important; }

/* ── Forms ── */
.form-control, .form-select {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important; color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important; font-size: 14px !important;
  backdrop-filter: blur(12px) !important; transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus, .form-select:focus {
  background: var(--glass-bg-hover) !important; border-color: rgba(58, 139, 245, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(58, 139, 245, 0.14) !important; color: var(--text-primary) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }
.form-label { font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-secondary) !important; margin-bottom: 6px !important; }
.input-group-text {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  color: var(--text-muted) !important; backdrop-filter: blur(12px) !important;
}
.form-check-input { background-color: var(--glass-bg) !important; border-color: var(--glass-border-hi) !important; }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }

/* ── Badges ── */
.badge { border-radius: 100px !important; font-family: 'Outfit', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 4px 10px !important; }
.badge.bg-success { background: rgba(30, 201, 120, 0.15) !important; color: #1EC978 !important; border: 1px solid rgba(30, 201, 120, 0.28) !important; }
.badge.bg-warning { background: rgba(232, 160, 32, 0.15) !important; color: #E8A020 !important; border: 1px solid rgba(232, 160, 32, 0.28) !important; }
.badge.bg-danger  { background: rgba(232, 58, 58, 0.15)  !important; color: #E83A3A !important; border: 1px solid rgba(232, 58, 58, 0.28)  !important; }
.badge.bg-primary { background: rgba(58, 139, 245, 0.15) !important; color: var(--accent) !important; border: 1px solid rgba(58, 139, 245, 0.28) !important; }
.badge.bg-secondary { background: var(--glass-bg) !important; color: var(--text-secondary) !important; border: 1px solid var(--glass-border) !important; }
.badge.bg-info    { background: rgba(58, 139, 245, 0.15) !important; color: #3A8BF5 !important; border: 1px solid rgba(58, 139, 245, 0.28) !important; }

/* ── Modals ── */
.modal-content {
  background: #060C22 !important; backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--glass-border) !important; border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
}
.modal-header { border-bottom: 1px solid var(--glass-border) !important; background: transparent !important; }
.modal-footer { border-top: 1px solid var(--glass-border) !important; background: transparent !important; }
.modal-title { color: var(--text-primary) !important; font-family: 'Sora', sans-serif !important; font-size: 17px !important; }
.modal-backdrop { background-color: rgba(3, 7, 26, 0.7) !important; }
.btn-close { filter: invert(1) opacity(0.6) !important; }
[data-theme="light"] .btn-close { filter: none !important; }

/* ── SweetAlert2 ── */
.swal2-popup {
  background: #060C22 !important; backdrop-filter: blur(32px) !important;
  border: 1px solid var(--glass-border) !important; border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
}
.swal2-title { font-family: 'Sora', sans-serif !important; color: var(--text-primary) !important; }
.swal2-html-container { color: var(--text-secondary) !important; font-family: 'Outfit', sans-serif !important; }
.swal2-icon { border-color: var(--glass-border) !important; }
[data-theme="light"] .swal2-popup { background: #DFE8FA !important; }

/* ── Toastr ── */
#toast-container .toast {
  background: #060C22 !important; backdrop-filter: blur(24px) !important;
  border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important; font-family: 'Outfit', sans-serif !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important; opacity: 1 !important;
}
#toast-container .toast-success { border-left: 3px solid #1EC978 !important; }
#toast-container .toast-error   { border-left: 3px solid #E83A3A !important; }
#toast-container .toast-warning { border-left: 3px solid #E8A020 !important; }
#toast-container .toast-info    { border-left: 3px solid #3A8BF5 !important; }
#toast-container .toast-message, #toast-container .toast-title { color: var(--text-primary) !important; font-family: 'Outfit', sans-serif !important; }
[data-theme="light"] #toast-container .toast { background: #E8EFFD !important; }

/* ── Select2 ── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important; min-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; line-height: 36px !important; padding-left: 12px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-container--default .select2-selection__placeholder { color: var(--text-muted) !important; }
.select2-dropdown {
  background: #060C22 !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important; backdrop-filter: blur(24px) !important; color: var(--text-primary) !important;
}
.select2-container--default .select2-results__option { color: var(--text-primary) !important; background: transparent !important; padding: 8px 14px !important; }
.select2-container--default .select2-results__option--highlighted { background: rgba(58, 139, 245, 0.15) !important; color: #3A8BF5 !important; }
.select2-search--dropdown .select2-search__field {
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important; border-radius: 8px !important; outline: none !important;
}
[data-theme="light"] .select2-dropdown { background: #DFE8FA !important; }

/* ── Flatpickr ── */
.flatpickr-calendar {
  background: #060C22 !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important; backdrop-filter: blur(24px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}
.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekday { background: transparent !important; color: var(--text-secondary) !important; fill: var(--text-secondary) !important; }
.flatpickr-day { color: var(--text-primary) !important; border-radius: 8px !important; }
.flatpickr-day:hover { background: rgba(58, 139, 245, 0.15) !important; color: #3A8BF5 !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #3A8BF5 !important; border-color: #3A8BF5 !important; color: #fff !important; }
.flatpickr-day.today:not(.selected) { border-color: #3A8BF5 !important; }
[data-theme="light"] .flatpickr-calendar { background: #E8EFFD !important; }

/* ── Dropdowns ── */
.dropdown-menu {
  background: #060C22 !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important; backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
.dropdown-item { color: var(--text-primary) !important; font-family: 'Outfit', sans-serif !important; padding: 9px 16px !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(58, 139, 245, 0.12) !important; color: #3A8BF5 !important; }
.dropdown-divider { border-color: var(--glass-border) !important; }
.dropdown-header { color: var(--text-muted) !important; font-family: 'Sora', sans-serif !important; font-size: 10.5px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; }
[data-theme="light"] .dropdown-menu { background: #DFE8FA !important; }

/* ── Alerts ── */
.alert {
  border-radius: var(--radius-md) !important; backdrop-filter: blur(12px) !important;
  background: var(--glass-bg) !important; color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
}
.alert-success { border-left: 3px solid #1EC978 !important; }
.alert-danger  { border-left: 3px solid #E83A3A !important; }
.alert-warning { border-left: 3px solid #E8A020 !important; }
.alert-info    { border-left: 3px solid #3A8BF5 !important; }

/* ── Nav Tabs ── */
.nav-tabs { border-bottom: 1px solid var(--glass-border) !important; }
.nav-tabs .nav-link {
  color: var(--text-secondary) !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  padding: 10px 18px !important; font-family: 'Outfit', sans-serif !important; margin: 0 !important; background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; background: transparent !important; }
.nav-tabs .nav-link.active { color: #3A8BF5 !important; border-bottom-color: #3A8BF5 !important; background: transparent !important; font-weight: 600 !important; }

/* ── Progress ── */
.progress { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 100px !important; }
.progress-bar { background: linear-gradient(90deg, #3A8BF5, #00CCF0) !important; border-radius: 100px !important; }

/* ── List Groups ── */
.list-group-item { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; color: var(--text-primary) !important; }
.list-group-item:hover { background: var(--glass-bg-hover) !important; }
.list-group-item.active { background: rgba(58, 139, 245, 0.15) !important; border-color: rgba(58, 139, 245, 0.25) !important; color: #3A8BF5 !important; }

/* ── Pagination ── */
.page-item .page-link { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; color: var(--text-secondary) !important; font-family: 'Outfit', sans-serif !important; }
.page-item .page-link:hover { background: var(--glass-bg-hover) !important; color: var(--text-primary) !important; }
.page-item.active .page-link { background: #3A8BF5 !important; border-color: #3A8BF5 !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: 0.4 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58, 139, 245, 0.25); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58, 139, 245, 0.5); }

/* ── Collapsible nav groups ── */
.nav-group-toggle { color: var(--text-secondary) !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; }
.nav-group-toggle:hover { color: var(--text-primary) !important; }
.nav-group.flyout-active .nav-group-toggle { color: var(--accent) !important; }
/* Flyout panel — yeni 260px sidebar genişliğine hizala, yeni palet */
.nav-group-items {
  background: #060C22 !important;
  border: 1px solid var(--glass-border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 14px 14px 14px !important;
  /* Flyout içerik üzerine açıldığında kesinlikle en üstte ve tam opak olmalı —
     aksi halde alttaki sekme çubuğuyla "üst üste binmiş / kırık" görünüyordu. */
  box-shadow: 6px 10px 40px rgba(0, 0, 0, 0.6) !important;
  z-index: 2000 !important;
}
.nav-group-items.flyout-open { left: calc(var(--sidebar-width) + 4px) !important; z-index: 2000 !important; }
.nav-group-items .nav-link { margin: 2px 4px !important; }
.nav-group.flyout-active .nav-group-toggle,
.nav-group.has-active > .nav-group-toggle { color: var(--accent) !important; }
.nav-group.has-active > .nav-group-toggle { border-left-color: var(--accent) !important; }
.flyout-header { color: var(--accent) !important; border-bottom-color: var(--glass-border) !important; }
[data-theme="light"] .nav-group-items { background: #E8EFFD !important; }

/* ── Light mode overrides ── */
[data-theme="light"] .logo-brand-card { background: rgba(20, 96, 216, 0.10) !important; border-color: rgba(20, 96, 216, 0.18) !important; }
[data-theme="light"] .logo-raport { color: #081428 !important; }
[data-theme="light"] .modal-content { background: #DFE8FA !important; }
[data-theme="light"] .swal2-popup { background: #DFE8FA !important; }
[data-theme="light"] #sidebar-container, [data-theme="light"] .sidebar { border-right-color: rgba(255,255,255,0.82) !important; }

/* ═══════════════════════════════════════════════════════════════════════
 * METİN GÖRÜNÜRLÜĞÜ — sayfa CSS'lerinin sabit (var(--dark)/white) renkleri
 * her temada okunur tona zorlanır. Gradient KPI rakamları text-fill ile
 * korunur (color !important onları etkilemez).
 * ═══════════════════════════════════════════════════════════════════════ */
.page-header h1, .page-header h2, .page-header h3,
.page-title, .page-heading, .section-title, .panel-title,
.card-title, .table-title, .widget-title, .block-title,
.stat-card .value, .stat-card .stat-title, .info-value, .detail-value,
.list-title, .item-title, .setting-title, .tab-title {
  color: var(--text-primary) !important;
}
.page-header-sub, .page-subtitle, .page-desc, .subtitle, .muted,
.text-muted, .help-text, .hint, .stat-card .label, .field-hint,
.section-subtitle, .card-subtitle, .description, .meta-text {
  color: var(--text-secondary) !important;
}
/* Genel: ana içerikteki sade metin koyu/açık temaya uysun */
.main-content { color: var(--text-primary); }
.main-content p, .main-content span:not([class*="badge"]):not([class*="text-"]),
.main-content li, .main-content td, .main-content label, .main-content small {
  color: inherit;
}
/* "white" sabiti kullanan başlıklar light temada görünür olsun */
[data-theme="light"] .page-header h1,
[data-theme="light"] .page-title,
[data-theme="light"] .section-title,
[data-theme="light"] .card-title { color: #081428 !important; }
/* Stat/KPI rakamlarının gradyanı korunsun */
.kpi-number, .stat-value, .metric-value, .stats-number {
  -webkit-text-fill-color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════════
 * TUBELIGHT NAVBAR — landing header menü pill'i (Liquid Glass)
 * ═══════════════════════════════════════════════════════════════════════ */
.tubelight-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 100px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-md);
}
.tubelight-nav .tubelight-item {
  position: relative;
  z-index: 1;
  padding: 8px 20px;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
  border: none !important;
  background: transparent !important;
}
.tubelight-nav .tubelight-item:hover { color: var(--text-primary); }
.tubelight-nav .tubelight-item.active { color: var(--accent); }

/* Kayan lamba göstergesi */
.tubelight-lamp {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.10);
  z-index: 0;
  pointer-events: none;
  will-change: transform, width;
}
/* Üstteki parlayan tüp */
.tubelight-bar {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}
.tubelight-glow {
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.35);
}
.tubelight-glow--1 { width: 48px; height: 24px; filter: blur(10px); top: -8px; left: -6px; }
.tubelight-glow--2 { width: 32px; height: 24px; filter: blur(10px); top: -4px; left: 2px; }
.tubelight-glow--3 { width: 16px; height: 16px; filter: blur(6px);  top: 0;    left: 10px; }

@media (max-width: 768px) {
  .tubelight-nav { gap: 2px; padding: 4px; }
  .tubelight-nav .tubelight-item { padding: 7px 12px; font-size: 13px; }
}


/* ── Tema pill — landing header varyantı ── */
.theme-pill-wrapper--landing {
  padding: 0;
  gap: 8px;
}
.theme-pill-wrapper--landing .theme-pill-label {
  color: var(--text-secondary, #3D5A8A);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
 * TEMA PILL — her sayfada (landing dahil) çalışsın diye buraya da kondu
 * (landing modern-theme.css yüklemiyor)
 * ═══════════════════════════════════════════════════════════════════════ */
.theme-pill-wrapper { display: flex; align-items: center; gap: 10px; }
.theme-pill { position: relative; width: 56px; height: 28px; border-radius: 100px;
  cursor: pointer; flex-shrink: 0; transition: background 0.3s cubic-bezier(0.4,0,0.2,1); outline: none; }
.theme-pill:focus-visible { box-shadow: 0 0 0 2px rgba(58,139,245,0.5); }
.theme-pill--dark  { background: #18181b; }
.theme-pill--light { background: #e4e4e7; }
.theme-pill--auto  { background: #27272a; }
.theme-pill__track { position: absolute; inset: 0; border-radius: 100px; border: 1px solid rgba(255,255,255,0.12); }
.theme-pill--light .theme-pill__track { border-color: rgba(0,0,0,0.10); }
.theme-pill__thumb { position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.theme-pill--dark  .theme-pill__thumb { transform: translateX(3px); }
.theme-pill--light .theme-pill__thumb { transform: translateX(31px); background: #1e293b; }
.theme-pill--auto  .theme-pill__thumb { transform: translateX(17px); }
.theme-pill__icon { font-size: 0.7rem; position: absolute; opacity: 0; transition: opacity 0.2s ease; }
.theme-pill__icon--moon   { color: #6366f1; }
.theme-pill__icon--sun    { color: #fbbf24; }
.theme-pill__icon--system { color: #94a3b8; }
.theme-pill--dark .theme-pill__icon--moon   { opacity: 1; }
.theme-pill--light .theme-pill__icon--sun    { opacity: 1; }
.theme-pill--auto .theme-pill__icon--system { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
 * LANDING DARK MODE — landing.css ışık-only; data-theme="dark" ile yeniden boya
 * ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-light: #060C22;
  --bg-white: #0D1638;
  --text-main: #EDF3FF;
  --text-muted: #7A99CC;
  --secondary: #EDF3FF;
  --border: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(58,139,245,0.14), transparent 24%),
    radial-gradient(circle at bottom right, rgba(0,204,240,0.10), transparent 18%),
    linear-gradient(180deg, #03071A 0%, #060C22 100%) !important;
  color: var(--text-main) !important;
}
[data-theme="dark"] header {
  background: rgba(6, 12, 34, 0.88) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .logo, [data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text-main) !important; }
/* Landing dark: beyaz section arka planlarını (u-* utility'lerden) şeffaf yap
   ki dark body görünsün; aksi halde beyaz section + beyaz başlık = görünmez. */
html[data-theme="dark"] section[class],
html[data-theme="dark"] .premium-section,
html[data-theme="dark"] .u-d56f9 {
  background: transparent !important;
}
/* Kartlar: çok soluk 0.045 yerine SOLID dark — beyaz section üstünde bile okunur */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .feature-card-featured,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .hero-trust span,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .docs-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .demo-card {
  background: #0D1638 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--text-main) !important;
}
[data-theme="dark"] .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-main) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .badge {
  background: rgba(58,139,245,0.15) !important;
  color: #6AABFF !important;
  border-color: rgba(58,139,245,0.25) !important;
}
[data-theme="dark"] .lang-trigger { background: rgba(255,255,255,0.06) !important; color: var(--text-main) !important; border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .lang-menu { background: #0D1638 !important; border-color: rgba(255,255,255,0.10) !important; }
[data-theme="dark"] .tubelight-nav { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] p, [data-theme="dark"] .hero-content p { color: var(--text-muted) !important; }


/* ── Bayrak görselleri (emoji yerine) ── */
.flag-img {
  width: 20px; height: 14px; border-radius: 2px;
  object-fit: cover; vertical-align: middle; display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.lang-item-flag .flag-img { width: 22px; height: 16px; }


/* ── Landing DARK mode: hero panel iç kartları (beyaz bg + beyaz metin = görünmez sorunu) ── */
[data-theme="dark"] .worklist-card,
[data-theme="dark"] .report-preview-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .premium-metric,
[data-theme="dark"] .hero-panel-top,
[data-theme="dark"] .stat-item {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] .worklist-row td,
[data-theme="dark"] .report-preview-title,
[data-theme="dark"] .premium-metric strong,
[data-theme="dark"] .hero-panel-top strong { color: #EDF3FF !important; }
[data-theme="dark"] .worklist-row.worklist-header td,
[data-theme="dark"] .panel-label,
[data-theme="dark"] .premium-metric p { color: #7A99CC !important; }


/* ═══════════════════════════════════════════════════════════════════════
 * LANDING/DOCS DARK MODE — kalan açık-zeminli bileşenler (tek seferde)
 * ═══════════════════════════════════════════════════════════════════════ */
/* Timeline: sadece pasif kartlar (accent/dark varyantları korunur) */
html[data-theme="dark"] .process-card:not(.accent-card):not(.dark-card) {
  background: #0D1638 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] .process-card:not(.accent-card):not(.dark-card) strong,
html[data-theme="dark"] .process-card:not(.accent-card):not(.dark-card) h3,
html[data-theme="dark"] .process-card:not(.accent-card):not(.dark-card) h4 { color: var(--text-main) !important; }

/* Docs step/rate kartları + collapsible */
html[data-theme="dark"] .docs-step-card,
html[data-theme="dark"] .docs-rate-card,
html[data-theme="dark"] .docs-collapsible-btn {
  background: #0D1638 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .docs-step-card strong,
html[data-theme="dark"] .docs-step-card h3,
html[data-theme="dark"] .docs-step-card h4,
html[data-theme="dark"] .docs-rate-card strong { color: var(--text-main) !important; }

/* Docs tab bar */
html[data-theme="dark"] .docs-tab-bar { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; }
html[data-theme="dark"] .docs-tab-btn { background: transparent !important; color: var(--text-secondary) !important; }
html[data-theme="dark"] .docs-tab-btn.active { background: rgba(58,139,245,0.18) !important; color: #6AABFF !important; }

/* Docs info/warn kutuları — semantik renk korunur */
html[data-theme="dark"] .docs-info-box { background: rgba(58,139,245,0.10) !important; border: 1px solid rgba(58,139,245,0.22) !important; color: var(--text-main) !important; }
html[data-theme="dark"] .docs-warn-box { background: rgba(232,160,32,0.10) !important; border: 1px solid rgba(232,160,32,0.25) !important; color: var(--text-main) !important; }

/* Docs inline code / endpoint */
html[data-theme="dark"] .docs-endpoint,
html[data-theme="dark"] code[class*="u-"] { background: rgba(255,255,255,0.06) !important; color: #9ec5ff !important; }

/* Docs tablolar */
html[data-theme="dark"] .docs-sut-table,
html[data-theme="dark"] .docs-meta-table { background: #0D1638 !important; color: var(--text-main) !important; }
html[data-theme="dark"] .docs-sut-table th,
html[data-theme="dark"] .docs-meta-table th { background: rgba(255,255,255,0.04) !important; color: var(--text-secondary) !important; border-color: rgba(255,255,255,0.10) !important; }
html[data-theme="dark"] .docs-sut-table td,
html[data-theme="dark"] .docs-meta-table td { border-color: rgba(255,255,255,0.08) !important; color: var(--text-main) !important; }

/* Footer: gri overlay (rgba white .45) kaldır */
html[data-theme="dark"] footer { background: transparent !important; }


/* Fiyat/Eye kartları: öne çıkan kartın scale(1.05)'i dikey kaymaya yol açıyordu.
   Kaldır — vurgu border-top + gölge + rozet ile zaten var, kartlar hizalı kalsın. */
.u-349e9 { transform: none !important; }


/* ── RaportAI SVG wordmark logo ── */
/* Tam yatay logo (ikon+wordmark+tagline) dar sidebar kartına ÖLÇEKLENEREK sığsın:
   width:100% kartın iç genişliğini alır, max-height taşmayı sınırlar → asla kırpılmaz. */
.logo-brand-card { display: block !important; overflow: visible !important; padding: 8px 12px !important; }
.sidebar-logo-img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 48px !important; display: block !important; }
.logo-wordmark { height: 30px !important; width: auto; max-width: 100%; }
.footer-logo-wordmark { height: 26px !important; width: auto; max-width: 100%; }
/* FİLTRE KALDIRILDI: yeni logo zaten koyu zemine göre doğru renkte (beyaz "RaPort" +
   mavi "AI"). Eski brightness/saturate filtresi bu renkleri bozuyordu. */
[data-theme="dark"] .sidebar-logo-img,
[data-theme="dark"] .logo-wordmark,
[data-theme="dark"] .footer-logo-wordmark { filter: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
 * REPORTING-AI sayfası DARK — açık-zeminli bileşenler
 * ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .category-pill {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .category-pill:hover,
[data-theme="dark"] .category-pill.active {
  background: rgba(58,139,245,0.15) !important;
  border-color: rgba(58,139,245,0.30) !important;
  color: #6AABFF !important;
}
[data-theme="dark"] .template-list,
[data-theme="dark"] .waveform-container,
[data-theme="dark"] .audio-preview,
[data-theme="dark"] .token-counter,
[data-theme="dark"] .token-display {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
}
/* Pipeline adımları — DURUM renklerini (active/completed/error) bozmadan default'u dark yap */
[data-theme="dark"] .ai-step:not(.active):not(.completed):not(.error) {
  background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .ai-step:not(.active):not(.completed):not(.error) .step-icon {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .ai-step .step-text strong { color: var(--text-primary) !important; }
[data-theme="dark"] .ai-step .step-text small { color: var(--text-muted) !important; }
/* Auto Template kartı (açık mint) — dark tonuna çek */
[data-theme="dark"] .auto-template-card,
[data-theme="dark"] [class*="auto-template"] {
  background: rgba(30,201,120,0.10) !important;
  border: 1px solid rgba(30,201,120,0.25) !important;
}


/* ── Rapor taslağı geri yüklendi bildirimi ── */
.report-restored-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 14px;
  background: rgba(58,139,245,0.12); border: 1px solid rgba(58,139,245,0.28);
  border-radius: 10px; color: var(--text-secondary, #3D5A8A);
  font-family: 'Outfit', sans-serif; font-size: 13px;
  transition: opacity 0.4s ease;
}
.report-restored-hint i { color: var(--accent, #3A8BF5); }
.report-restored-clear {
  margin-left: auto; background: rgba(58,139,245,0.18);
  border: 1px solid rgba(58,139,245,0.30); color: var(--accent, #3A8BF5);
  border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.report-restored-clear:hover { background: rgba(58,139,245,0.28); }


/* ═══════════════════════════════════════════════════════════════════════
 * İYİLEŞTİRMELER — yumuşak hover + tablo başlığı + sidebar kontrast
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1) Kart hover'ı yumuşat — daha az hareket, yumuşak easing */
.card, .kpi-card, .stat-card, .feature-card, .process-card,
.feature-card-featured, .docs-step-card, .docs-rate-card {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s ease, box-shadow 0.35s ease !important;
}
.card:hover { transform: translateY(-2px) !important; }
.feature-card:hover { transform: translateY(-2px) !important; }
.kpi-card:hover, .stat-card:hover, .process-card:hover { transform: translateY(-2px) !important; }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .feature-card:hover, .kpi-card:hover,
  .stat-card:hover, .process-card:hover { transform: none !important; }
}

/* 2) "Kayıtlı Raporlarım" tablo başlığı — dark modda açık zemin sorunu */
[data-theme="dark"] #reportsTable thead tr,
[data-theme="dark"] .u-bddf9 {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] #reportsTable thead th,
[data-theme="dark"] .u-bddf9 th {
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* 3) Sidebar — yazılar biraz büyük + kontrast (mavi üstüne mavi giderildi) */
.sidebar .nav-link {
  font-size: 14.5px !important;
  color: #AEC6EC !important;          /* pasif: daha okunur açık mavi-gri */
}
.sidebar .nav-link:hover {
  color: #EDF3FF !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.sidebar .nav-link.active {
  color: #EAF2FF !important;          /* aktif: açık metin (mavi üstüne mavi değil) */
  background: rgba(58, 139, 245, 0.26) !important;
  border-color: rgba(58, 139, 245, 0.45) !important;
  font-weight: 600 !important;
}
.sidebar .nav-link.active i { color: #8FC0FF !important; }
.sidebar .nav-section-title {
  font-size: 11px !important;
  color: #8AA6D4 !important;          /* bölüm etiketi: biraz daha okunur */
}


/* ═══════════════════════════════════════════════════════════════════════
 * SIDEBAR KAYAN İNDİKATÖR + SAYFA GEÇİŞ YUMUŞATMA
 * ═══════════════════════════════════════════════════════════════════════ */
.sidebar-nav { position: relative; }
.sidebar-active-indicator {
  position: absolute;
  left: 3px; top: 0;
  width: 3px; height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3A8BF5, #00CCF0);
  box-shadow: 0 0 10px rgba(58,139,245,0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, height;
  transition: transform 0.38s cubic-bezier(0.22,0.61,0.36,1),
              height 0.38s cubic-bezier(0.22,0.61,0.36,1),
              opacity 0.3s ease;
}
.sidebar-active-indicator.is-ready { opacity: 1; }

/* Nav link hover/active geçişleri yumuşak */
.sidebar .nav-link {
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease !important;
}

/* Sayfa içeriği açılışta fade-in (geçişler akıcı hissedilir) */
@keyframes ra-page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content.ra-page-enter {
  animation: ra-page-enter 0.4s cubic-bezier(0.22,0.61,0.36,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .main-content.ra-page-enter { animation: none; }
  .sidebar-active-indicator { transition: opacity 0.2s ease; }
}


/* ── Reporting: mod butonları (dark tutarlılık) ──
   ÖNEMLİ: JS aktif/pasif geçişini inline style.cssText ile yapıyor. Eski kural
   #btnModeMulti/#btnModeMultiFile'ı ID + !important ile boyayınca inline AKTİF
   stili (mavi gradyan) eziliyor, tıklayınca buton değişmiyordu. Artık yalnızca
   :not(.mode-btn--active) PASİF butonlara uygulanır; aktif buton mavi kalır.
   Üç buton da kapsanır (Tekil pasifken dark'ta beyaz kalmasın diye). */
[data-theme="dark"] #btnModeSingle:not(.mode-btn--active),
[data-theme="dark"] #btnModeMulti:not(.mode-btn--active),
[data-theme="dark"] #btnModeMultiFile:not(.mode-btn--active) {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] #btnModeSingle:not(.mode-btn--active):hover,
[data-theme="dark"] #btnModeMulti:not(.mode-btn--active):hover,
[data-theme="dark"] #btnModeMultiFile:not(.mode-btn--active):hover {
  background: var(--glass-bg-hover) !important;
  color: var(--text-primary) !important;
}
/* Aktif mod butonu — her temada mavi gradyan (dark !important'ı yener) */
#reportModeCard .mode-btn--active,
[data-theme="dark"] #reportModeCard .mode-btn--active {
  background: linear-gradient(135deg, #0A4DA6, #1976D2) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(10, 77, 166, 0.3) !important;
}
/* Auto Template kartı — mint gradyan yerine dark yeşil cam */
[data-theme="dark"] #btnAutoTemplate {
  background: rgba(30, 201, 120, 0.10) !important;
  border: 1px solid rgba(30, 201, 120, 0.28) !important;
}
[data-theme="dark"] #btnAutoTemplate strong,
[data-theme="dark"] #btnAutoTemplate b { color: #6EE7B7 !important; }
[data-theme="dark"] #btnAutoTemplate small,
[data-theme="dark"] #btnAutoTemplate span,
[data-theme="dark"] #btnAutoTemplate div { color: #8FD9B6 !important; }
[data-theme="dark"] #btnAutoTemplate i { color: #34D399 !important; }


/* ═══════════════════════════════════════════════════════════════════════
 * SIDEBAR LIGHT MODE — nav renkleri açık zeminde okunur (koyu metin)
 * (dark mode sabit açık renkleri korur; burası sadece light'ı düzeltir)
 * ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .sidebar .nav-link {
  color: #3D5A8A !important;
}
[data-theme="light"] .sidebar .nav-link:hover {
  color: #081428 !important;
  background: rgba(20, 96, 216, 0.08) !important;
}
[data-theme="light"] .sidebar .nav-link.active {
  color: #1460D8 !important;
  background: rgba(20, 96, 216, 0.13) !important;
  border-color: rgba(20, 96, 216, 0.30) !important;
}
[data-theme="light"] .sidebar .nav-link.active i { color: #1460D8 !important; }
[data-theme="light"] .sidebar .nav-section-title { color: #5A7BB0 !important; }
[data-theme="light"] .user-info h3 { color: #081428 !important; }
[data-theme="light"] .user-info p  { color: #3D5A8A !important; }
[data-theme="light"] .logo-brand-card .logo-raport { color: #081428 !important; }
/* Light modda sidebar kayan indikatör — koyu mavi gradyan */
[data-theme="light"] .sidebar-active-indicator {
  background: linear-gradient(180deg, #1460D8, #0090C0) !important;
  box-shadow: 0 0 8px rgba(20, 96, 216, 0.45) !important;
}

/* --- Light modda LOGO: koyu-zemin (açık yazı) sürümü açık sidebar'da
   görünmez oluyordu → açık-zemin (koyu yazı) sürümüne çevir --- */
[data-theme="light"] .sidebar-logo-img {
  content: url("/img/raportai-logo-light.svg");
}

/* --- Light modda SÜRÜM etiketi (V2.0): gray-400 açık zeminde okunmuyordu --- */
[data-theme="light"] .sidebar-version {
  color: #5A7BB0 !important;
  opacity: 0.95 !important;
}

/* --- Light modda DİL SEÇİCİ: beyaz metin açık zeminde okunmuyordu --- */
[data-theme="light"] .sidebar .lang-trigger {
  background: rgba(20, 96, 216, 0.06) !important;
  border-color: rgba(20, 96, 216, 0.22) !important;
  color: #3D5A8A !important;
}
[data-theme="light"] .sidebar .lang-trigger:hover {
  background: rgba(20, 96, 216, 0.11) !important;
  border-color: rgba(20, 96, 216, 0.35) !important;
  color: #081428 !important;
}
[data-theme="light"] .sidebar .lang-code { color: inherit !important; }
[data-theme="light"] .sidebar .lang-chevron { color: #7A93BE !important; }
[data-theme="light"] .sidebar .lang-menu {
  background: #ffffff !important;
  border-color: rgba(20, 96, 216, 0.18) !important;
  box-shadow: 0 -8px 30px rgba(15, 36, 64, 0.18) !important;
}
[data-theme="light"] .sidebar .lang-menu-item { color: #3D5A8A !important; }
[data-theme="light"] .sidebar .lang-menu-item:hover {
  background: rgba(20, 96, 216, 0.08) !important;
  color: #081428 !important;
}
[data-theme="light"] .sidebar .lang-menu-item.active {
  background: rgba(20, 96, 216, 0.12) !important;
  color: #1460D8 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
 * DARK MODE REVİZYON — daha güçlü Liquid Glass, parlak renkler, büyük yazı
 * (light mode etkilenmez: dark/auto'ya scope'lu)
 * ═══════════════════════════════════════════════════════════════════════ */

/* 1) Token'lar — cam daha belirgin, metin daha parlak (yalnızca dark/auto) */
:root:not([data-theme="light"]),
[data-theme="dark"] {
  --glass-bg:        rgba(255, 255, 255, 0.075);
  --glass-bg-hover:  rgba(255, 255, 255, 0.11);
  --glass-bg-active: rgba(255, 255, 255, 0.15);
  --glass-border:    rgba(255, 255, 255, 0.15);
  --glass-border-hi: rgba(255, 255, 255, 0.26);
  --text-secondary:  #95B2E2;   /* sönük #7A99CC → daha parlak */
  --text-muted:      #6486BD;   /* #3E5880 → okunur */
}

/* 2) Kartlara cam derinliği — üst highlight + gradyan yüzey + gölge */
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .kpi-card,
:root:not([data-theme="light"]) .stat-card,
:root:not([data-theme="light"]) .welcome-banner,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .welcome-banner {
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}
:root:not([data-theme="light"]) .card:hover,
[data-theme="dark"] .card:hover {
  border-color: rgba(58,139,245,0.40) !important;
  box-shadow: 0 10px 34px rgba(26,94,204,0.28), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* 3) KPI / istatistik SAYILARI — parlak gradyan + büyük (görünmez sorunu) */
.kpi-card .value, .stat-card .value, .stat-value, .kpi-number,
.stats-number, .stat-number, .metric-value, .stats-value {
  font-family: 'Sora', sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  background: linear-gradient(120deg, #4D97FF, #1ED0FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 4) Etiketler / alt metinler — okunur + biraz büyük */
.kpi-card .label, .stat-card .label, .stat-label, .kpi-label, .metric-label {
  font-size: 14px !important; font-weight: 500 !important; color: var(--text-secondary) !important;
}
.kpi-card .sub, .stat-card .sub, .kpi-card .subtitle { font-size: 13px !important; color: var(--text-muted) !important; }

/* 5) Genel yazı boyutları — küçük yazılar büyütüldü */
.table { font-size: 14.5px !important; }
.table > tbody > tr > td { font-size: 14.5px !important; padding: 14px 16px !important; }
.table > thead > tr > th { font-size: 12px !important; }
.card-header, .card-title { font-size: 16px !important; }
.form-label { font-size: 13.5px !important; }
.form-control, .form-select { font-size: 14.5px !important; }
.subtitle, .page-subtitle, .page-header-sub { font-size: 14px !important; }
.badge { font-size: 12px !important; }

/* 6) Page header / başlık biraz daha belirgin */
.page-header h1, .page-title, h1 { letter-spacing: -0.02em !important; }


/* ── Admin detay modalı (kullanıcı/hesap) — dark modda görünür ── */
:root:not([data-theme="light"]) .admin-meta-row .meta-v,
[data-theme="dark"] .admin-meta-row .meta-v {
  color: var(--text-primary) !important;
}
:root:not([data-theme="light"]) .admin-meta-row .meta-k,
[data-theme="dark"] .admin-meta-row .meta-k {
  color: var(--text-secondary) !important;
}
:root:not([data-theme="light"]) .admin-meta-row,
[data-theme="dark"] .admin-meta-row {
  border-bottom: 1px solid var(--glass-border) !important;
}
/* Aktivite mini-stat kutuları — beyaz yerine dark glass */
:root:not([data-theme="light"]) .admin-mini-stat,
[data-theme="dark"] .admin-mini-stat {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
}
:root:not([data-theme="light"]) .admin-mini-stat .k,
[data-theme="dark"] .admin-mini-stat .k { color: var(--text-secondary) !important; }
:root:not([data-theme="light"]) .admin-mini-stat .v,
[data-theme="dark"] .admin-mini-stat .v { color: var(--text-primary) !important; font-weight: 600 !important; }
/* Modal içi başlıklar (Bilgiler / Demo Kota / Aktivite) */
:root:not([data-theme="light"]) .modal-content h6,
[data-theme="dark"] .modal-content h6 { color: var(--text-primary) !important; }


/* ── admin-registrations özet kartları (.sum-card) — dark glass ── */
:root:not([data-theme="light"]) .sum-card,
[data-theme="dark"] .sum-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
}
/* Renkli üst aksan kenarlıkları korunsun */
:root:not([data-theme="light"]) .sum-card.all,      [data-theme="dark"] .sum-card.all      { border-top: 3px solid #3A8BF5 !important; }
:root:not([data-theme="light"]) .sum-card.pending,  [data-theme="dark"] .sum-card.pending  { border-top: 3px solid #E8A020 !important; }
:root:not([data-theme="light"]) .sum-card.approved, [data-theme="dark"] .sum-card.approved { border-top: 3px solid #1EC978 !important; }
:root:not([data-theme="light"]) .sum-card.rejected, [data-theme="dark"] .sum-card.rejected { border-top: 3px solid #E83A3A !important; }
/* Sayı + etiket okunur */
:root:not([data-theme="light"]) .sum-card .val, [data-theme="dark"] .sum-card .val {
  color: var(--text-primary) !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important;
}
:root:not([data-theme="light"]) .sum-card .lbl, [data-theme="dark"] .sum-card .lbl {
  color: var(--text-secondary) !important;
}


/* ── Dark Mode Auto-Fix: JS ile işaretlenen açık-zeminli elementler ── */
[data-theme="dark"] .ra-df-bg,
:root:not([data-theme="light"]) .ra-df-bg {
  background-color: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .ra-df-text,
:root:not([data-theme="light"]) .ra-df-text {
  color: var(--text-primary) !important;
}


/* ── AI İşlem Merkezi pipeline adımları — sarıdan yeşile renk geçişi ── */
.ai-step[data-step="1"] .step-icon {
  background: linear-gradient(135deg, #F2C94C, #E8A020) !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(232,160,32,0.35) !important;
}
.ai-step[data-step="2"] .step-icon {
  background: linear-gradient(135deg, #D8CE3E, #A8C73A) !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(168,199,58,0.35) !important;
}
.ai-step[data-step="3"] .step-icon {
  background: linear-gradient(135deg, #7AC83C, #4CB95A) !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(76,185,90,0.35) !important;
}
.ai-step[data-step="4"] .step-icon {
  background: linear-gradient(135deg, #34D399, #1EC978) !important; color: #fff !important;
  box-shadow: 0 0 14px rgba(30,201,120,0.40) !important;
}
/* Adım metinleri okunur kalsın */
.ai-step[data-step] .step-text strong { color: var(--text-primary) !important; }
.ai-step[data-step] .step-text small  { color: var(--text-muted) !important; }


/* ── Dark mode: class'sız (bare) form elemanları da koyu olsun ── */
/* (.form-control override class'lılar için; bunlar tarayıcı varsayılanı beyaz kalanlar) */
:root:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--glass-border) !important;
}
:root:not([data-theme="light"]) select option,
[data-theme="dark"] select option {
  background: #0D1638 !important;
  color: var(--text-primary) !important;
}
:root:not([data-theme="light"]) input::placeholder,
:root:not([data-theme="light"]) textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}
:root:not([data-theme="light"]) input:focus,
:root:not([data-theme="light"]) select:focus,
:root:not([data-theme="light"]) textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: rgba(58,139,245,0.5) !important;
  box-shadow: 0 0 0 3px rgba(58,139,245,0.14) !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
 * CHATBOT WIDGET — opak (şeffaflık arka planla karışmasın) + mavi marka
 * ═══════════════════════════════════════════════════════════════════════ */
/* Marka rengi: teal -> mavi/cyan (her tema) */
.chatbot-trigger,
.chatbot-header,
.chat-msg.user {
  background: linear-gradient(135deg, #3A8BF5, #00CCF0) !important;
}
.chat-msg.bot strong { color: #1460D8 !important; }

/* Dark mode: OPAK arka planlar */
:root:not([data-theme="light"]) .chatbot-window,
[data-theme="dark"] .chatbot-window {
  background: #0D1638 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important;
}
:root:not([data-theme="light"]) .chatbot-messages,
[data-theme="dark"] .chatbot-messages {
  background: #060C22 !important;
}
:root:not([data-theme="light"]) .chat-msg.bot,
:root:not([data-theme="light"]) .chatbot-typing,
[data-theme="dark"] .chat-msg.bot,
[data-theme="dark"] .chatbot-typing {
  background: #18223F !important;
  color: #EDF3FF !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
:root:not([data-theme="light"]) .chat-msg.bot strong,
[data-theme="dark"] .chat-msg.bot strong { color: #6AABFF !important; }
/* Input / footer / hızlı cevap alanı */
:root:not([data-theme="light"]) .chatbot-input-area,
:root:not([data-theme="light"]) .chatbot-footer,
:root:not([data-theme="light"]) .chatbot-quick-replies,
[data-theme="dark"] .chatbot-input-area,
[data-theme="dark"] .chatbot-footer,
[data-theme="dark"] .chatbot-quick-replies {
  background: #0D1638 !important;
  border-top-color: rgba(255,255,255,0.10) !important;
}

/* ============================================================
   RAPOR ÖNİZLEME MODALI — dark mode metin görünürlüğü (2026-07)
   Modal her zaman beyaz "A4 kağıt" olarak çizilir (shared.js inline
   background:white/color:black). Ancak global dark-tema kuralları
   ([data-theme=dark] h1..h4 / p → açık renk !important) modal içindeki
   başlık, başlığı ve metni beyaz zemine açık renk yapıp GÖRÜNMEZ
   kılıyordu. Modal içeriğini temadan bağımsız koyu renge sabitliyoruz.
   ============================================================ */
#raportai-preview-modal h1,
#raportai-preview-modal h2,
#raportai-preview-modal h3,
#raportai-preview-modal h4,
#raportai-preview-modal h5,
#raportai-preview-modal h6,
#raportai-preview-modal .report-a4-content h1,
#raportai-preview-modal .report-a4-content h2,
#raportai-preview-modal .report-a4-content h3,
#raportai-preview-title {
  color: #0f172a !important;
}
#raportai-preview-modal .report-a4-content,
#raportai-preview-modal .report-a4-content p,
#raportai-preview-modal .report-a4-content span,
#raportai-preview-modal .report-a4-content strong,
#raportai-preview-modal .report-a4-content b,
#raportai-preview-modal .report-a4-content li,
#raportai-preview-modal .report-a4-content td,
#raportai-preview-modal .report-a4-content th,
#raportai-preview-modal .report-a4-content div {
  color: #1e293b !important;
}

/* ============================================================
   GÖNDER AÇILIR MENÜSÜ — OPAK dark zemin (2026-07)
   Menü yukarıda cam (yarı saydam --glass-bg) grubundaydı; arkadaki
   rapor metni menünün içinden görünüyordu. Popover menü opak olmalı.
   ============================================================ */
[data-theme="dark"] .send-dropdown {
  background: #111c34 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .send-dropdown-item {
  color: #e2e8f0 !important;
  background: transparent !important;
}
[data-theme="dark"] .send-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   GİRİŞ (auth) LOGO — tema-duyarlı (2026-07)
   Login/register kartı VARSAYILAN olarak beyaz (auth.css), yalnızca
   dark temada koyulaşır. Bu yüzden temel logo açık-zemin sürümü
   (koyu yazı) olmalı; dark temada koyu-zemin sürümüne (açık yazı)
   çevrilir. Böylece auto+açık (data-theme yok) durumunda da okunur.
   ============================================================ */
[data-theme="dark"] .card .logo img,
[data-theme="dark"] img.u-2a338,
[data-theme="dark"] img.auth-logo,
[data-theme="dark"] img.u-dcd74 {
  content: url("/img/raportai-logo.svg");
}

/* ============================================================
   GİRİŞ SAYFASI — açık temada kart-DIŞI alt metinler (2026-07)
   body arka planı açık temada --bg-primary (#DFE8FA, açık) oluyor
   (bkz. satır 103), ama footer linkleri / telif / SSL rozeti sabit
   BEYAZ (login.css koyu gradyan için ayarlanmış) → açık zeminde
   görünmez. Açık temada bu kart-dışı metinleri koyuya çekiyoruz.
   (Koyu/auto tema: body koyu (#03071A) → beyaz metin korunur.)
   ============================================================ */
[data-theme="light"] .footer-links { color: #2C4368 !important; }
[data-theme="light"] .footer-links a { color: #1460D8 !important; }
[data-theme="light"] .footer-links a:hover { color: #0D47A1 !important; }
[data-theme="light"] .u-e57db { color: rgba(20, 40, 72, 0.66) !important; }
[data-theme="light"] .security-badge,
[data-theme="light"] .u-2e91f { color: #2C4368 !important; }

/* ============================================================
   RAPORU PAYLAŞ MODALI — dark mode okunabilirlik (2026-07)
   4 seçenek butonu pastel arka plan + koyu renkli metinle tasarlanmış
   (light'ta okunur). Dark modda global açık-metin kuralı metni pastel
   zeminde görünmez kılıyordu. Dark'a özel: koyu translucent tint zemin
   + accent-uyumlu açık metin/ikon. Ayrıca başlık ikonu metne giriyordu.
   ============================================================ */
/* Başlık ikonu ile metin arası boşluk (me-2 bootstrap yoksa) */
#shareModal .u-0b7cd { display: flex; align-items: center; gap: 8px; }

/* DOCX (mavi) */
[data-theme="dark"] #shareModal .u-4dfef {
  background: rgba(59,130,246,.16) !important; color: #93c5fd !important;
  border: 1px solid rgba(59,130,246,.30) !important;
}
/* E-posta (yeşil) */
[data-theme="dark"] #shareModal .u-244fe {
  background: rgba(34,197,94,.15) !important; color: #86efac !important;
  border: 1px solid rgba(34,197,94,.30) !important;
}
/* WhatsApp (zümrüt) */
[data-theme="dark"] #shareModal .u-ff6be {
  background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important;
  border: 1px solid rgba(16,185,129,.30) !important;
}
/* Google Drive (kehribar) */
[data-theme="dark"] #shareModal .u-3b185 {
  background: rgba(245,158,11,.15) !important; color: #fcd34d !important;
  border: 1px solid rgba(245,158,11,.30) !important;
}
/* İkonlar buton metni rengini miras alsın (beyaz kalıp kaybolmasın) */
[data-theme="dark"] #shareModal .u-10a2b button .u-ea030 { color: inherit !important; }
/* Hover — biraz daha belirgin */
[data-theme="dark"] #shareModal .u-4dfef:hover { background: rgba(59,130,246,.26) !important; }
[data-theme="dark"] #shareModal .u-244fe:hover { background: rgba(34,197,94,.24) !important; }
[data-theme="dark"] #shareModal .u-ff6be:hover { background: rgba(16,185,129,.24) !important; }
[data-theme="dark"] #shareModal .u-3b185:hover { background: rgba(245,158,11,.24) !important; }

/* Sidebar avatar fotoğrafı — baş harf yerine yüklenen resim (2026-07) */
.user-avatar { overflow: hidden; }
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}