/* core_app/static/css/custom-theme.css */
/* ------------------------------------------------------------------
 * 360Donusum Design Tokens (Light / Dark) + Global Tema
 * ------------------------------------------------------------------ */
:root {
  /* BRAND / PALETTE ------------------------------------------------- */
  /* Ana platform mavisi */
  --primary: #2563EB;
  /* Royal Blue */
  --brand-blue: #2563EB;

  /* Accent / mor - Platform vurgu rengi */
  --accent: #7c3aed;
  /* Violet 500 */
  --brand-violet: #7c3aed;
  /* Navbar, hover, interaktif vurgular */
  --accent-fill: #7c3aed;
  --accent-fill-hover: #6d28d9;

  /* Logo turuncu aksanı (SVG'den) */
  --brand-orange: #f59e0b;
  /* Amber 500 — footer, sosyal medya, ikonlar */

  /* Logo koyu lacivert (SVG'den) */
  --brand-navy: #172554;

  /* 2026 PASTEL PALETTE (Minimal & Airy) */
  --pastel-green: #ECFDF5;
  /* Emerald 50 */
  --pastel-green-text: #047857;
  /* Emerald 600 */

  --pastel-blue: #EFF6FF;
  /* Blue 50 */
  --pastel-blue-text: #1D4ED8;
  /* Blue 600 */

  --pastel-pink: #FFF1F2;
  /* Rose 50 */
  --pastel-pink-text: #BE123C;
  /* Rose 600 */

  --pastel-yellow: #FFFBEB;
  /* Amber 50 */
  --pastel-yellow-text: #92400E;
  /* Amber 600 */

  --pastel-purple: #F5F3FF;
  /* Violet 50 */
  --pastel-purple-text: #6D28D9;
  /* Violet 600 */

  /* SKY BLUE (Mevcut, koruyoruz) */
  --sky-blue: #38bdf8;

  /* SURFACE & TEXT (Minimalist Light) */
  --text-primary: #1e293b;
  /* Slate 800 */
  --text-secondary: #64748b;
  /* Slate 500 */
  --text-muted: #667085;
  /* Slate 400 */

  --bg-primary: #F8FAFC;
  /* Slate 50 (Ultra Light Gray) */
  --bg-surface: #FFFFFF;
  /* Pure White */
  --bg-glass: rgba(255, 255, 255, 0.7);
  /* Glassmorphism */

  --border-color: #E2E8F0;
  /* Slate 100 (Very Subtle) */
  --border-soft: #CBD5E1;
  /* Slate 200 */

  /* SHADOWS (Soft / Diffused) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-soft: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

  /* Footer özel tonları */
  --dp-footer-bg: #0f172a;
  --dp-footer-surface: #111827;
  --dp-footer-border: #1f2937;
  --dp-footer-text: #e5e7eb;
  --dp-footer-text-muted: #9ca3af;
  --dp-footer-accent: #8b5cf6;
  --dp-footer-accent-soft: rgba(139, 92, 246, 0.12);

  /* Fonts */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* TYPOGRAPHY SCALE — Platform genelinde tutarlı boyutlar */
  --fs-xs: 0.75rem;     /* 12px — badge, metadata */
  --fs-sm: 0.875rem;    /* 14px — küçük metin, etiket */
  --fs-base: 1rem;      /* 16px — gövde metni */
  --fs-md: 1.125rem;    /* 18px — bölüm başlıkları */
  --fs-lg: 1.25rem;     /* 20px — kart başlıkları */
  --fs-xl: 1.5rem;      /* 24px — sayfa başlıkları */
  --fs-2xl: 2rem;       /* 32px — hero başlıklar */

  /* Spacing */
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* NAVBAR — Üst çubuğun zemini. Tek karar noktası: navbar.css, base_core.css,
     lazy-loading.css, custom-layout.css ve identity_shell.css bu değeri okur.
     Ağustos 2026'ya kadar aynı bileşen dört dosyada üç farklı değerle
     tanımlıydı ve hangisinin kazandığı sayfanın yüklediği CSS'e bağlıydı. */
  --navbar-bg: #0F172A;

  /* BUTTON — Tutarlı buton stillemesi için */
  --btn-radius: 8px;
  /* Onaylanan yeni tasarımın kompakt aksiyon yüksekliği. Projenin geneli için
     zorunlu bir standart DEĞİLDİR; bu tasarıma taşınmış ekranlar (giriş, magic
     link, ziyaretçi karşılama) yüksekliği buradan okur. */
  --btn-height-compact: 36px;
  --btn-font-weight: 500;
  --btn-transition: background-color 0.2s ease, border-color 0.2s ease,
                    transform 0.15s ease, box-shadow 0.2s ease;
}

html[data-theme='dark'] {
  /* DARK MODE - Modern Deep */
  --primary: #60A5FA;
  /* Blue 400 */
  --accent: #a78bfa;
  /* Violet 400 */
  /* Açık accent koyu zeminde metin/outline içindir. Beyaz yazılı dolgular,
     erişilebilir kontrastı koruyan ayrı ve daha koyu bir token kullanır. */
  --accent-fill: #6d28d9;
  --accent-fill-hover: #5b21b6;

  --text-primary: #F1F5F9;
  /* Slate 100 */
  --text-secondary: #94A3B8;
  /* Slate 400 */
  --text-muted: #64748B;
  /* Slate 500 */

  --bg-primary: #0F172A;
  /* Slate 900 */
  --bg-surface: #1E293B;
  /* Slate 800 */
  --bg-glass: rgba(30, 41, 59, 0.7);

  --border-color: #334155;
  /* Slate 700 */
  --border-soft: #475569;
  /* Slate 600 */

  --dp-footer-bg: #020617;
  --dp-footer-surface: #020617;
  --dp-footer-border: #1f2937;
  --dp-footer-text: #e5e7eb;
  --dp-footer-text-muted: #94a3b8;
  --dp-footer-accent: #a78bfa;
  --dp-footer-accent-soft: rgba(139, 92, 246, 0.18);

  /* Pastel Mappings for Dark Mode (Slightly muted) */
  --pastel-green: rgba(5, 150, 105, 0.2);
  --pastel-green-text: #6EE7B7;

  --pastel-blue: rgba(37, 99, 235, 0.2);
  --pastel-blue-text: #93C5FD;

  --pastel-pink: rgba(225, 29, 72, 0.2);
  --pastel-pink-text: #FDA4AF;

  --pastel-yellow: rgba(217, 119, 6, 0.2);
  --pastel-yellow-text: #FCD34D;

  --pastel-purple: rgba(124, 58, 237, 0.2);
  --pastel-purple-text: #C4B5FD;

  /* Dark mode ek değişkenler */
  --card-bg: #1e293b;
  --input-bg: #23313b;
  --input-border: #475569;
  --hover-bg: #334155;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   * DARK MODE - Global Element Overrides
   * ============================================ */
html[data-theme='dark'] body {
  background-color: #23313b !important;
  color: #e2e8f0;
}

html[data-theme='dark'] main {
  background-color: #23313b !important;
}

/* Cards */
html[data-theme='dark'] .card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0;
}

html[data-theme='dark'] .card-header {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .card-body {
  background-color: #1e293b !important;
}

/* Forms */
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select {
  background-color: #23313b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .form-control:focus,
html[data-theme='dark'] .form-select:focus {
  background-color: #1e293b !important;
  border-color: #7b6fb0 !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .form-control::placeholder {
  color: #64748b !important;
}

/* List Groups */
html[data-theme='dark'] .list-group-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .list-group-item-action:hover,
html[data-theme='dark'] .list-group-item-action:focus {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme='dark'] .list-group-item-action.active {
  background-color: #8ecae6 !important;
  border-color: #8ecae6 !important;
}

/* Backgrounds */
html[data-theme='dark'] .bg-white {
  background-color: #1e293b !important;
}

html[data-theme='dark'] .bg-light {
  background-color: #334155 !important;
}

/* Text Colors */
html[data-theme='dark'] .text-dark {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .text-muted {
  color: #94a3b8 !important;
}

html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
  color: #f1f5f9 !important;
}

/* Borders */
html[data-theme='dark'] .border {
  border-color: #334155 !important;
}

html[data-theme='dark'] .border-bottom {
  border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .border-top {
  border-top-color: #334155 !important;
}

/* Dropdowns */
html[data-theme='dark'] .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] .dropdown-item {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .dropdown-item:hover,
html[data-theme='dark'] .dropdown-item:focus {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Modals */
html[data-theme='dark'] .modal-content {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0;
}

html[data-theme='dark'] .modal-header {
  border-bottom-color: #334155 !important;
}

html[data-theme='dark'] .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  background: #1e293b !important;
}

/* Tables */
html[data-theme='dark'] .table {
  color: #e2e8f0;
}

html[data-theme='dark'] .table> :not(caption)>*>* {
  background-color: #1e293b;
  border-bottom-color: #334155;
  color: #e2e8f0;
}

html[data-theme='dark'] .table-hover>tbody>tr:hover>* {
  background-color: #334155 !important;
}

/* Alerts */
html[data-theme='dark'] .alert-info {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

/* Settings page dark mode: now handled by profile_manage.css (pm-* classes) */

/* Navbar - koyu modda aynı kalsın */
html[data-theme='dark'] .navbar-custom {
  background-color: #23313b !important;
}

/* Container Backgrounds */
html[data-theme='dark'] .container {
  color: #e2e8f0;
}

/* Shadow adjustments for dark mode */
html[data-theme='dark'] .shadow-sm {
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03)) !important;
}

html[data-theme='dark'] .shadow {
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03)) !important;
}

html[data-theme='dark'] .shadow-lg {
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03)) !important;
}

body {
  font-family: var(--font-main);
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Sayfa gövdesi için ortak shell
   * NOT: Merkezi layout kuralları custom-layout.css'de tanımlı (1600px)
   * Bu dosyadaki page-shell kuralları geriye dönük uyumluluk için korunuyor
   * ancak custom-layout.css tarafından override ediliyor.
   */

/* ------------------------------------------------------------------
   * Flash Messages + Bazı Global Elemanlar
   * ------------------------------------------------------------------ */
.messages {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-tabs .nav-link {
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--primary);
}

.nav-tabs .nav-link.active {
  color: var(--primary);
  font-weight: 600;
}

/* Tarih popup (flatpickr) input görünümü */
.flatpickr-input {
  background-color: var(--bg-surface) !important;
  cursor: pointer;
}

/* ==================================================================
   * BOOTSTRAP OVERRIDES & CUSTOM UTILITIES (Global)
   * ================================================================== */

/* ==================================================================
 * GLOBAL BUTTON SYSTEM — Platform genelinde tutarlı buton stilleri
 * ================================================================== */

/* Ana Eylem Butonu (Accent Mor) */
.btn-primary {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #ffffff;
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  transition: var(--btn-transition);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* İkincil Buton (Outline) */
.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  transition: var(--btn-transition);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #ffffff;
}

/* Başarı Butonu (Pastel yeşil) */
.btn-success {
  background-color: #059669;
  border-color: #059669;
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  transition: var(--btn-transition);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #047857;
  border-color: #047857;
}

/* Tehlike Butonu */
.btn-danger {
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  transition: var(--btn-transition);
}

/* Tüm butonların ortak özellikleri */
.btn {
  border-radius: var(--btn-radius);
  font-family: var(--font-main);
  transition: var(--btn-transition);
}

/* ==================================================================
 * GLOBAL FORM OVERRIDES — Bootstrap #0d6efd → Platform renkleri
 * 27 dosyada hardcoded olan Bootstrap mavisi yerine merkezi override
 * ================================================================== */

/* Checkbox / Radio — Platform mor aksanı */
.form-check-input:checked {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.2);
}

/* Range input */
.form-range::-webkit-slider-thumb {
  background-color: var(--accent);
}

/* Form switch */
.form-switch .form-check-input:checked {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
}

/* Link rengi — Platform ile uyumlu */
a {
  color: var(--primary);
}

a:hover {
  color: #285d77;
}

/* Renk Yardımcı Sınıfları */
.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* Yumuşak Renkli Uyarı Kutuları */
.alert-success-soft {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.alert-success-soft h5,
.alert-success-soft .h5 {
  color: currentColor;
}

.alert-warning-soft {
  background-color: #fefce8;
  border: 1px solid #fde68a;
  color: #92400e;
}

.alert-warning-soft .icon {
  color: var(--accent);
}

/* ==================================================================
 * UNIFIED NOTIFICATION SYSTEM — Tüm uyarılar aynı karakterde
 * Alertler, toast'lar, banner'lar tutarlı pastel görünüm
 * ================================================================== */

/* --- Base Alert: Tüm .alert elementlerine tutarlı stil --- */
.alert {
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-family: var(--font-main);
  padding: 0.875rem 1.25rem;
  border-width: 1px;
  border-style: solid;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.alert .bi,
.alert .fas,
.alert .far,
.alert i:first-child {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert .btn-close {
  padding: 0.75rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}

.alert-heading {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Alert Variants — Pastel tonlar, tutarlı border/bg/text */
.alert-success {
  background-color: var(--pastel-green);
  border-color: #bbf7d0;
  color: #166534;
}

.alert-success .bi,
.alert-success i:first-child {
  color: #059669;
}

.alert-danger {
  background-color: var(--pastel-pink);
  border-color: #fecdd3;
  color: #9f1239;
}

.alert-danger .bi,
.alert-danger i:first-child {
  color: #e11d48;
}

.alert-warning {
  background-color: var(--pastel-yellow);
  border-color: #fde68a;
  color: #92400e;
}

.alert-warning .bi,
.alert-warning i:first-child {
  color: #d97706;
}

.alert-info {
  background-color: var(--pastel-blue);
  border-color: #bfdbfe;
  color: #285d77;
}

.alert-info .bi,
.alert-info i:first-child {
  color: #285d77;
}

/* --- Toast Override: Bootstrap toast'ları da pastel yap --- */
.toast {
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03)) !important;
  font-family: var(--font-main);
  font-size: var(--fs-sm);
  overflow: hidden;
}

.toast .toast-body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  font-weight: 500;
}

.toast .toast-body .bi {
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Toast Renkleri — Alert'lerle aynı pastel palette */
.toast.bg-success {
  background-color: var(--pastel-green) !important;
  color: #166534 !important;
}

.toast.bg-success .btn-close-white {
  filter: none;
}

.toast.bg-danger {
  background-color: var(--pastel-pink) !important;
  color: #9f1239 !important;
}

.toast.bg-danger .btn-close-white {
  filter: none;
}

.toast.bg-warning {
  background-color: var(--pastel-yellow) !important;
  color: #92400e !important;
}

.toast.bg-primary,
.toast.bg-info {
  background-color: var(--pastel-blue) !important;
  color: #285d77 !important;
}

.toast.bg-primary .btn-close-white,
.toast.bg-info .btn-close-white,
.toast.bg-success .btn-close-white,
.toast.bg-danger .btn-close-white {
  filter: brightness(0) saturate(100%) invert(30%);
}

/* Toast Container — Navbar altında, tutarlı konum */
.toast-container {
  padding-top: 0.75rem !important;
}

/* --- Moderation/Restriction Banner — Alert ile tutarlı --- */
.alert .spinner-grow {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* --- Tablet uyumluluk (< 992px) --- */
@media (max-width: 991.98px) {
  /* Toast container: Navbar altında, safe-area ile uyumlu */
  .toast-container {
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    padding-top: 0.5rem !important;
  }

  /* Gamification toast da aynı üst konumda */
  .gm-toast-container {
    top: calc(72px + env(safe-area-inset-top, 0px));
    right: 12px;
  }

  /* Klavye açıkken toast/alert gizle */
  html.mobile-keyboard-open .toast-container,
  html.mobile-keyboard-open .gm-toast-container {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
  }
}

/* --- Mobil uyumluluk (< 576px) --- */
@media (max-width: 575.98px) {
  /* Alert: Kompakt, tam genişlik */
  .alert {
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-left: -1px;
    margin-right: -1px;
  }

  .alert-heading {
    font-size: var(--fs-sm);
  }

  .alert .bi,
  .alert i:first-child {
    font-size: 1rem;
  }

  .alert .btn-close {
    padding: 0.625rem;
  }

  /* Alert içindeki butonlar — dokunma dostu */
  .alert .btn-sm {
    min-height: 36px;
    font-size: 0.8125rem;
    touch-action: manipulation;
  }

  /* Toast: Tam genişlik, üstten kayarak gelsin */
  .toast-container {
    left: 0 !important;
    right: 0 !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
  }

  .toast {
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-md) !important;
  }

  .toast .toast-body {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
  }

  .toast .btn-close {
    padding: 0.625rem !important;
  }

  /* Gamification toast: Tam genişlik */
  .gm-toast-container {
    left: 0.75rem;
    right: 0.75rem;
    top: calc(72px + env(safe-area-inset-top, 0px));
  }

  .gm-toast {
    min-width: 100%;
    max-width: 100%;
  }

  /* App message stack: Page wrapper dışına taşma düzelt */
  .app-message-stack {
    padding-left: 0;
    padding-right: 0;
  }

  .app-message-stack .alert {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
  }
}

/* Yumuşak Kart (Dashboard'dan) */
.card-soft {
  border-radius: var(--radius-2026, 20px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
  background-color: var(--bg-surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-soft:hover {
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}

.card-soft .card-header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
}

/* Formların ana fontu miras almasını sağla */
.form-control,
.form-select {
  font-family: var(--font-main);
}

/* Form odak rengi — mavi (primary) daha profesyonel */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* Devre dışı select görünümü */
.form-select:disabled {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  background-color: #e9ecef !important;
}

/* Popover stilleri */
.popover-header {
  font-weight: 600;
}

.popover-body {
  font-size: 0.9rem;
}

/* Accent metin (marka rengi) */
.text-brand {
  color: var(--accent);
}

/* ==================================================================
   * EK KÜÇÜK DOKUNUŞLAR
   * ================================================================== */

/* Newsletter status text */
#newsletter-status {
  font-size: 0.8rem;
}

/* Küresel datepicker sınıfı (GG.AA.YYYY görünümlü Türk flatpickr) */
input.datepicker {
  cursor: pointer;
}

/* ==================================================================
 * YENİ EKLENENLER: YETKİNLİK KARTI & MESAJLAŞMA & LINKEDIN LAYOUT
 * ================================================================== */

/* --- 1. Competence ve Profil Kartı Stilleri (Sol Sütun) --- */
.merit-card .merit-score-big {
  font-size: 2.5rem;
  /* LinkedIn sol sütununa uygun boyut */
  font-weight: 800;
  line-height: 1;
  color: var(--brand-blue);
  /* Tema değişkeni kullanıldı */
}

.merit-card .merit-total-small {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.merit-card .badge-guven {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Güven Rozeti Renkleri */
.badge-platin {
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.badge-altin {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-gumus {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.badge-bronz {
  background-color: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}

.merit-card hr {
  margin: 1rem 0;
  opacity: 0.15;
}

/* --- 2. Sağ Alt Mesajlaşma Kutusu (LinkedIn Tarzı) --- */
.chat-widget-container {
  position: fixed;
  bottom: 0;
  right: 24px;
  z-index: 1050;
  /* Navbar'ın altında, diğer her şeyin üstünde */
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.chat-widget {
  width: 300px;
  background-color: var(--bg-surface);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
  border: 1px solid var(--border-color);
  border-bottom: none;
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
  max-height: 400px;
  /* Açık haldeki maksimum yükseklik */
  display: flex;
  flex-direction: column;
}

.chat-widget.collapsed {
  height: 48px;
  /* Sadece başlık yüksekliği */
  overflow: hidden;
}

.chat-widget-header {
  padding: 12px 16px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.chat-widget-header:hover {
  background-color: var(--bg-primary);
  /* LinkedIn hover rengi */
}

.chat-widget-body {
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--bg-primary);
  /* İçerik örneği için */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 20px;
}

/* --- 3. 3 Sütunlu Yapı için Genişlik Ayarları ---
 * NOT: Merkezi layout kuralları custom-layout.css'de tanımlı
 * Flex layout: 320px/flex/350px sütunlar (feed dışı sayfalar)
 * Feed sayfası CSS Grid ile 1:3:1 oran kullanır (feed_home.css)
 */
@media (min-width: 1200px) {

  /* xl ekranlar — flex layout (feed dışı sayfalar) */
  .layout-linkedin .col-sidebar-left {
    flex: 0 0 320px;
    max-width: 320px;
  }

  .layout-linkedin .col-main-feed {
    flex: 1;
    min-width: 0;
  }

  .layout-linkedin .col-sidebar-right {
    flex: 0 0 350px;
    max-width: 350px;
  }

  /* [FIX 2026-02-23] Feed grid kullanıldığında flex sabitleri devre dışı */
  .layout-linkedin .feed-layout-grid .col-sidebar-left,
  .layout-linkedin .feed-layout-grid .col-main-feed,
  .layout-linkedin .feed-layout-grid .col-sidebar-right {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }

  .layout-linkedin .container-xl,
  .layout-linkedin .container {
    max-width: var(--app-shell-max, 1400px);
    /* Feed ile tutarlı */
  }

  /* Sütunlar arası boşlukları ayarlamak için */
  .layout-linkedin .row.g-4 {
    --bs-gutter-x: 24px;
  }
}

/* ==================================================================
 * PLATFORM TUTARLILIK — Tüm sayfalar aynı bütünün parçası hissini verir
 * ================================================================== */

/* --- Tipografi Ölçeği: Tutarlı başlık hiyerarşisi --- */
h1, .h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: 0; }
h2, .h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: 0; }
h3, .h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
h4, .h4 { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
h5, .h5 { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
h6, .h6 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }

/* --- Kart Tutarlılığı: Tüm kartlar aynı radius ve gölge --- */
.card {
  border-radius: var(--radius-lg);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  border-bottom-color: var(--border-color);
  background-color: var(--bg-surface);
  font-weight: 600;
}

/* --- Pastel Durum Renkleri: Tüm sayfada tutarlı --- */
.badge.bg-success,
.badge.badge-success { background-color: var(--pastel-green) !important; color: var(--pastel-green-text) !important; border: 1px solid #bbf7d0; }
.badge.bg-danger,
.badge.badge-danger { background-color: var(--pastel-pink) !important; color: var(--pastel-pink-text) !important; border: 1px solid #fecdd3; }
.badge.bg-warning,
.badge.badge-warning { background-color: var(--pastel-yellow) !important; color: var(--pastel-yellow-text) !important; border: 1px solid #fde68a; }
.badge.bg-info,
.badge.badge-info { background-color: var(--pastel-blue) !important; color: var(--pastel-blue-text) !important; border: 1px solid #bfdbfe; }
.badge.bg-primary,
.badge.badge-primary { background-color: var(--pastel-purple) !important; color: var(--pastel-purple-text) !important; border: 1px solid #ddd6fe; }

/* --- Alert Kutuları: Pastel tonlarda tutarlı --- */
.alert-success { background-color: var(--pastel-green); border-color: #bbf7d0; color: #166534; }
.alert-danger { background-color: var(--pastel-pink); border-color: #fecdd3; color: #9f1239; }
.alert-warning { background-color: var(--pastel-yellow); border-color: #fde68a; color: #92400e; }
.alert-info { background-color: var(--pastel-blue); border-color: #bfdbfe; color: #285d77; }

/* --- Tablo Tutarlılığı --- */
.table th {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-bottom-color: var(--border-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table td {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
  vertical-align: middle;
}

/* --- Mobil Uyumluluk: Platform genelinde tutarlı --- */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: var(--fs-xl); }
  h2, .h2 { font-size: var(--fs-lg); }
  h3, .h3 { font-size: var(--fs-md); }

  .card {
    border-radius: var(--radius-md);
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: var(--fs-sm);
  }

  /* Mobilde tablo yazı boyutlarını küçült */
  .table th,
  .table td {
    font-size: var(--fs-sm);
    padding: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  h1, .h1 { font-size: var(--fs-lg); }
  h2, .h2 { font-size: var(--fs-md); }

  body {
    font-size: var(--fs-sm);
  }

  .card-body {
    padding: 1rem;
  }
}

/* --- Brand Vurgu Utility Sınıfları --- */
.text-brand-orange { color: var(--brand-orange) !important; }
.text-brand-violet { color: var(--brand-violet, var(--accent)) !important; }
.bg-brand-orange-soft { background-color: var(--pastel-yellow) !important; }
.bg-brand-violet-soft { background-color: var(--pastel-purple) !important; }

/* ==================================================================
 * PLATFORM PROFESYONELLİK KATMANI — 2026 Standartları
 * Tüm uygulamalarda ortak sorunları tek noktadan çözer
 * ================================================================== */

/* --- 1. GLOBAL FOCUS STATES — Erişilebilirlik + Modern Görünüm --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

/* --- 2. DISABLED BUTTON STATES — Tüm butonlar için --- */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(30%);
}

/* --- 3. SKELETON / SHIMMER LOADING — Async içerik placeholder --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--border-color) 25%,
    var(--bg-primary) 37%,
    var(--border-color) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton * { visibility: hidden; }

/* Skeleton varyantları */
.skeleton-text {
  height: 0.875rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-25 { width: 25%; }

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-md);
}

.skeleton-btn {
  height: 38px;
  width: 100px;
  border-radius: var(--btn-radius);
}

html[data-theme='dark'] .skeleton {
  background: linear-gradient(90deg,
    #334155 25%,
    #475569 37%,
    #334155 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* --- 4. BACKDROP BLUR — Modal ve overlay'ler için --- */
.modal-backdrop.show {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: rgba(15, 23, 42, 0.5);
}

.offcanvas-backdrop.show {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: rgba(15, 23, 42, 0.4);
}

/* --- 5. KART DERİNLİĞİ — Hover lift + border glow --- */
.card {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-soft);
}

/* Kart içi link'ler — kartın tamamı tıklanabilir hissini ver */
.card[onclick],
.card[data-href],
a.card {
  cursor: pointer;
}

/* --- 6. TABLO MODERNLEŞTİRME — Sticky header, zebra, hover --- */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bg-surface);
  box-shadow: inset 0 -1px 0 var(--border-soft);
}

.table-hover tbody tr {
  transition: background-color 0.15s ease;
}

.table-hover tbody tr:hover {
  background-color: rgba(139, 92, 246, 0.04) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(248, 250, 252, 0.5);
}

html[data-theme='dark'] .table thead th {
  background-color: var(--bg-surface);
}

html[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(30, 41, 59, 0.5);
}

/* --- 7. FORM ANİMASYONLARI — Focus glow + error shake --- */
.form-control,
.form-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Error state shake */
@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.is-invalid,
.was-validated :invalid {
  animation: form-shake 0.4s ease;
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
}

/* Success checkmark glow */
.is-valid,
.was-validated :valid:not(:placeholder-shown) {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1) !important;
}

/* --- 8. BADGE MODERNLEŞTİRME — Glow + rounded-pill --- */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-2026-btn, 14px);
  font-size: 0.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Status badge pulse animasyonu */
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 4px transparent; }
}

.badge-pulse {
  animation: status-pulse 2s ease-in-out infinite;
}

/* --- 9. SCROLL ENTRANCE ANİMASYONU --- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fade-in-up 0.4s ease-out both;
}

/* Staggered entrance — ardışık kartlar için */
.animate-in:nth-child(1) { animation-delay: 0ms; }
.animate-in:nth-child(2) { animation-delay: 50ms; }
.animate-in:nth-child(3) { animation-delay: 100ms; }
.animate-in:nth-child(4) { animation-delay: 150ms; }
.animate-in:nth-child(5) { animation-delay: 200ms; }
.animate-in:nth-child(6) { animation-delay: 250ms; }

/* Reduced motion tercih eden kullanıcılar */
@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .skeleton,
  .badge-pulse,
  .is-invalid {
    animation: none !important;
  }

  .card,
  .btn,
  .badge {
    transition: none !important;
  }
}

/* --- 10. BUTON LOADING STATE --- */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  top: 50%;
  left: 50%;
  margin-top: -0.55em;
  margin-left: -0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  opacity: 0.7;
  color: #fff;
}

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

/* --- 11. SCROLLBAR — Merkezi, ince, modern --- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-2026-btn, 14px);
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

html[data-theme='dark'] * {
  scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

/* --- 12. NAV-TABS / NAV-PILLS — Animated active indicator --- */
.nav-tabs .nav-link {
  position: relative;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  padding-bottom: 0.65rem;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  background: transparent;
}

.nav-tabs .nav-link:hover:not(.active) {
  border-bottom-color: var(--border-soft);
  color: var(--text-primary);
  background: transparent;
}

.nav-pills .nav-link {
  border-radius: var(--radius-2026-btn, 14px);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--accent-fill);
  box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}

/* ==================================================================
 * MOBİL UYUMLULUK — Profesyonellik katmanının mobil adaptasyonu
 * ================================================================== */

/* --- Tablet (< 992px) --- */
@media (max-width: 991.98px) {
  /* Kart hover: Mobilde transform yok (scroll sırasında titreme engeli) */
  .card:hover {
    transform: none;
  }

  /* Skeleton: Mobilde daha yavaş shimmer (pil tasarrufu) */
  .skeleton {
    animation-duration: 2s;
  }

  /* Nav-tabs: Yatay scroll, kompakt */
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar { display: none; }

  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* --- Mobil (< 576px) --- */
@media (max-width: 575.98px) {
  /* Focus ring: Mobilde daha ince */
  :focus-visible {
    outline-width: 1.5px;
    outline-offset: 1px;
  }

  /* Badge: Mobilde daha kompakt */
  .badge {
    font-size: 0.6875rem;
    padding: 0.25em 0.6em;
  }

  /* Skeleton: Mobilde köşeler daha yumuşak */
  .skeleton-card {
    height: 100px;
    border-radius: var(--radius-sm);
  }

  /* Loading buton: Spinner boyutu küçült */
  .btn-loading::after {
    width: 0.9em;
    height: 0.9em;
    margin-top: -0.45em;
    margin-left: -0.45em;
  }

  /* Tablo sticky header: Mobilde off (scroll UX'i bozabilir) */
  .table thead th {
    position: static;
    box-shadow: none;
  }

  /* Nav-pills: Kompakt mobil versiyon */
  .nav-pills .nav-link {
    font-size: var(--fs-sm);
    padding: 0.4rem 0.85rem;
  }

  /* Modal backdrop blur: Mobilde hafiflet (performans) */
  .modal-backdrop.show {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* Scrollbar: Mobilde gizle (dokunmatik scroll yeterli) */
  *::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none; }

  /* İstisna: Açıkça scrollbar istenen container'lar */
  .scroll-visible::-webkit-scrollbar { width: 4px; }
  .scroll-visible { scrollbar-width: thin; }
}

/* --- Dokunmatik cihazlar --- */
@media (hover: none) and (pointer: coarse) {
  /* Hover efektlerini kaldır — ghost hover engeli */
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
  }

  .badge:hover {
    transform: none;
  }

  /* Tab/pill active: Daha belirgin (hover yok, active önemli) */
  .nav-tabs .nav-link.active {
    border-bottom-width: 3px;
  }

  .nav-pills .nav-link.active {
    box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
  }
}