/* core_app/static/css/navbar.css */

/*
  Navbar CSS (Mevcut tasarımı koruyan sürüm)
  ----------------------------------------
  NOT: Önceki sürümde eklenen global resetler (html, body / body padding-top)
  navbar üstünde kalıcı boş alan davranışını bozduğu için KALDIRILDI.
*/

/* --------------------------------------------------------- */
/* Navbar ölçü token'ları — TEK KARAR NOKTASI                  */
/* --------------------------------------------------------- */
/*
  Menü linkinin yazı boyutu bu iki değerden gelir. Daha önce aynı ölçü
  navbar.css (2 kural) ve custom-layout.css (1 kural) içinde ayrı ayrı
  yazılıydı; büyütmek için üç yeri birden değiştirmek gerekiyordu.

  Token burada tanımlı, custom-theme.css'te değil: ana sayfa custom-theme.css
  yüklemiyor, orada token çözülmez ve kural geçersiz kalırdı. Kullanım
  yerlerinde ayrıca fallback var.

  768px altında mobile_enhancements.css `.btn, .nav-link, [role=button]...`
  seçicisine 16px'i !important ile dayatıyor ve o kural buradan yönetilmiyor.
  Kapsamı navbar'dan çok daha geniş olduğu için bilinçli olarak dokunulmadı.
*/
:root {
  --navbar-link-size: 1rem;
  /* 1200-1536 arası dar masaüstü: menü sığsın diye bir tık küçük */
  --navbar-link-size-compact: 0.95rem;
}

/* 1200px altı: base_core.css kökü 16px'e döndürüyor, 1.15rem burada 18.4px
   olurdu. mobile_enhancements.css 768px altında zaten 16px dayatıyor;
   tablet ve mobilde aynı boyut kalsın diye token 1rem'e sabitlenir. */
@media (max-width: 1199.98px) {
  :root {
    --navbar-link-size: 1rem;
    --navbar-link-size-compact: 1rem;
  }
}

/* --------------------------------------------------------- */
/* Navbar base */
/* --------------------------------------------------------- */

.navbar-custom {
  /* Ana sayfa gibi custom-theme.css yüklemeyen şablonlar için fallback:
     token çözülmezse kural geçersiz olur ve navbar saydam kalır. */
  background: var(--navbar-bg, #0F172A);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* Slate / koyu tema - 2026 Glassmorphism upgrade */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  min-height: calc(64px + env(safe-area-inset-top)); /* iOS Notch destekli min/max yükseklik */

  /* Navbar'ın yukarıda başlaması için güvenli reset */
  top: 0;
  margin-top: 0;
  /* Padding y sıfır — içerik min-height (64px) içinde flex ile dikey OTOMATİK ortalanır.
     iOS notch için sadece üste safe-area ekle. Bootstrap default padding'ini de ez. */
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: 0 !important;
  /* GPU layer for smooth sticky rendering */
  will-change: transform, backdrop-filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Bootstrap sticky-top için */
.sticky-top {
  top: 0;
}

/* --------------------------------------------------------- */
/* Brand */
/* --------------------------------------------------------- */

.navbar-brand-icon img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
  /* Crisp rendering on retina */
  image-rendering: -webkit-optimize-contrast;
}

.navbar-brand-wordmark {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: min(100%, 186px);
  height: 44px;
  max-width: min(72vw, 186px);
  min-width: 0;
  overflow: visible;
  flex: 0 1 auto;
}

.navbar-brand-logo-full {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
  background-color: transparent;
}

.navbar-brand-icon {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 18px rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 18px rgba(0, 0, 0, 0.18);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.navbar-brand-icon img {
  box-shadow: none;
}

.brand-text {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 1.05rem;
}

.brand-360 {
  color: #8b5cf6;
  /* Accent Purple */
}

@media (max-width: 991.98px) {
  .navbar-brand-wordmark {
    height: 44px;
    width: min(100%, 186px);
    max-width: 186px;
  }
}

/* --------------------------------------------------------- */
/* Layout helpers */
/* --------------------------------------------------------- */

.vertical-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 14px;
}

.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------- */
/* Main links */
/* --------------------------------------------------------- */

.nav-main-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: var(--navbar-link-size, 0.92rem);
  padding: 10px 12px !important;
  border-radius: 8px;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.nav-main-link:hover {
  color: #60a5fa !important;
  background: rgba(255, 255, 255, 0.08);
}

/* Ev ikonu: Bildirim ziliyle aynı mavi (senin istediğin) */
/* Boyut, app launcher SVG'siyle (18px) aynı görsel ağırlıkta tutulur */
.home-icon {
  opacity: 0.95;
  color: #60a5fa !important;
  /* Tailwind blue-400 benzeri: “mavi” */
  font-size: 1.15rem;
  line-height: 1;
}

.app-launcher-icon {
  flex-shrink: 0;
}

/* --------------------------------------------------------- */
/* Glass button container */
/* --------------------------------------------------------- */

.nav-glass-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  -webkit-transition: all 0.18s ease;
  transition: all 0.18s ease;
}

.nav-glass-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}

.panel-btn-link {
  color: rgba(255, 255, 255, 0.90) !important;
  text-decoration: none;
  font-weight: 800;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  white-space: nowrap;
}

.panel-btn-link:hover {
  color: #8b5cf6 !important;
}

/* Comm links */
.comm-link {
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none;
  font-weight: 700;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  -webkit-transition: all 0.18s ease;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.comm-link:hover {
  color: #8b5cf6 !important;
}

/* --------------------------------------------------------- */
/* Notification */
/* --------------------------------------------------------- */

.notification-btn {
  position: relative;
  padding: 10px 12px !important;
  border-radius: 8px;
  -webkit-transition: all 0.18s ease;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.notification-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.notification-icon {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.90);
}

/* --------------------------------------------------------- */
/* Role switch button (Navbar) */
/* --------------------------------------------------------- */

.role-switch-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  font-size: 0.85rem;
  -webkit-transition: all 0.18s ease;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.role-switch-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  color: #8b5cf6;
}

.rs-mini-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.rs-mini-icon i {
  font-size: 1rem;
  opacity: 0.95;
}

.rs-mini-caret {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-left: 2px;
}

/* --------------------------------------------------------- */
/* Role switcher modal list items */
/* --------------------------------------------------------- */

.rs-role-item {
  padding: 14px 16px;
}

.rs-role-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.rs-role-icon i {
  font-size: 1.25rem;
}

/* Tonlar */
.tone-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #dbeafe !important;
}

.tone-green {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #dcfce7 !important;
}

.tone-purple {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border-color: #f3e8ff !important;
}

.tone-amber {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

.tone-gray {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

.tone-slate {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

.tone-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fee2e2 !important;
}

.tone-indigo {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border-color: #c7d2fe !important;
}

/* Switch buton loading helper */
.btn-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* --------------------------------------------------------- */
/* Dropdown menu polish */
/* --------------------------------------------------------- */

.dropdown-menu {
  border-radius: 16px;
}

.dropdown-item {
  font-weight: 600;
}

.nav-disabled-link {
  pointer-events: none;
  cursor: not-allowed;
}

/* Profil dropdown'ı Lila asistan pop-up'ının üstünde açılsın */
.navbar-custom .nav-item.dropdown .dropdown-menu {
  z-index: 10050 !important;
  /* Lila z-index: 10000-10002, bu onun üstünde */
}

/* Navbar modal backdrop'ın (z-index:1050) altında kalmalı;
   aksi hâlde açılan modallarda navbar içeriği üstte görünür. */
.navbar-custom {
  z-index: 1030;
}

/* Dropdown açıkken parent'ı yükselt — modal açık değilken geçerli */
.navbar-custom .nav-item.dropdown.show {
  z-index: 10051;
}

/* --------------------------------------------------------- */
/* Mobile adjustments */
/* --------------------------------------------------------- */

@media (max-width: 991.98px) {
  .vertical-divider {
    display: none;
  }

  .nav-group {
    display: block;
  }

  .nav-glass-btn {
    width: 100%;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  /* Prevent sticky hover on touch (iOS Safari) */
  .nav-main-link:hover,
  .comm-hub-btn:hover,
  .role-switch-btn:hover {
    -webkit-transform: none;
    transform: none;
  }
}

/* --- MINIMAL PATCH: SADECE KONUŞULAN NOKTALAR --- */

/* 1) Tüm pill butonlar rol seçimi ile aynı yükseklik */
:root {
  --nav-pill-height: 36px;
}

/* rol butonun mevcut yüksekliği 40px ise */

.nav-glass-btn,
.role-switch-btn {
  height: var(--nav-pill-height);
  display: inline-flex;
  align-items: center;
}

/* Müteahhit paneli linki cam buton içinde: aynı hizaya otursun */
.panel-btn-link {
  display: inline-flex;
  align-items: center;
}

/* 2) Notification zili mavi */
.notification-icon {
  color: #60a5fa !important;
}

/* 3) Hover efekti tüm linklerde de olsun (sadece var olan davranışı GENİŞLETİR)
   Not: Ölçek (font büyümesi) yapmıyoruz, sadece senin mevcut turuncu + hafif yukarı hissini yayar */
.navbar-custom a.comm-link:hover,
.navbar-custom a.panel-btn-link:hover {
  color: #8b5cf6 !important;
}

.navbar-custom a.nav-main-link:hover,
.navbar-custom a.comm-link:hover,
.navbar-custom a.panel-btn-link:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/* --- PATCH: Panel butonu padding + ikon turuncu + navbar yüksekliği --- */

/* 1) Navbar yüksekliği: sadece iç dikey boşluğu artır (layout bozulmaz) */
.navbar-custom {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 2) "Müteahhit Paneli" butonu: sağ/sol boşluk artsın */
.panel-btn-link {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Panel butonu içindeki ikon — mor aksan */
.panel-btn-link i,
.panel-btn-link .bi {
  color: var(--accent, #8b5cf6) !important;
}

/* 3) Cam buton konteynerleri de aynı yükseklikte merkezlensin (var olan karakteri bozmaz) */
.nav-glass-btn {
  align-items: center;
}

/* --- PATCH: Rol seçimi butonu role göre renklensin --- */

/* Ortak davranış (mevcut ölçülere dokunmaz) */
.role-switch-btn {
  border-width: 1px;
  border-radius: 8px !important;
  /* Dikdörtgene yakın yuvarlatma */
}

/* Ziyaretçi */
.role-switch-btn.tone-gray {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

/* Danışman */
.role-switch-btn.tone-purple {
  background: #faf5ff;
  border-color: #f3e8ff;
  color: #7e22ce;
}

/* Müteahhit */
.role-switch-btn.tone-blue {
  background: #eff6ff;
  border-color: #dbeafe;
  color: #1d4ed8;
}

/* Malik */
.role-switch-btn.tone-green {
  background: #f0fdf4;
  border-color: #dcfce7;
  color: #15803d;
}

/* Tedarikçi — TURUNCU/AMBER (YEŞİL DEĞİL!) */
.role-switch-btn.tone-amber {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

/* Eksper → gökyüzü mavi */
.role-switch-btn.tone-sky {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}

/* Belediye (Özel) */
.role-switch-btn.tone-municipality {
  background: #ff6b6b !important;
  border-color: #fa5252 !important;
  color: #ffffff !important;
}

.rs-role-icon.tone-municipality {
  background: #ffe3e3 !important;
  color: #e03131 !important;
  border-color: #ffc9c9 !important;
}

/* İç ikon da role göre uyumlu olsun */
.role-switch-btn .rs-mini-icon {
  background: transparent;
}

/* --------------------------------------------------------- */
/* Rol Değiştir Modal — tone-* ikon kutusu (API tone değerleri) */
/* API tone_for() .tone-* döndürür; rs-role-icon ile kombinasyon */
/* --------------------------------------------------------- */
.rs-role-icon.tone-blue {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

.rs-role-icon.tone-green {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}

.rs-role-icon.tone-purple {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border-color: #ddd6fe !important;
}

.rs-role-icon.tone-amber {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

.rs-role-icon.tone-gray {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

.rs-role-icon.tone-slate {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

.rs-role-icon.tone-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fee2e2 !important;
}

.rs-role-icon.tone-indigo {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border-color: #c7d2fe !important;
}

.rs-role-icon.tone-sky {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}


/* --------------------------------------------------------- */
/* Rol Değiştir Modal — rs-tone-* ikon kutusu renkleri       */
/* role-badge-* paletinden türetilmiş, ikon rengi dahil      */
/* --------------------------------------------------------- */

/* Rol tonları merkezi token'lardan gelir: shared/role_theme.css */

/* Müteahhit → mavi */
.rs-role-icon.rs-tone-blue {
  background: var(--role-contractor-bg) !important;
  color: var(--role-contractor-hover) !important;
  border-color: var(--role-contractor-border) !important;
}

/* Malik → yeşil */
.rs-role-icon.rs-tone-green {
  background: var(--role-owner-bg) !important;
  color: var(--role-owner-hover) !important;
  border-color: var(--role-owner-border) !important;
}

/* Danışman / Teknik Danışman → mor */
.rs-role-icon.rs-tone-purple {
  background: var(--role-consultant-bg) !important;
  color: var(--role-consultant-text) !important;
  border-color: var(--role-consultant-border) !important;
}

/* Tedarikçi → amber */
.rs-role-icon.rs-tone-orange {
  background: var(--role-supplier-bg) !important;
  color: var(--role-supplier-text) !important;
  border-color: var(--role-supplier-border) !important;
}

/* Kurumsal Hizmet → slate */
.rs-role-icon.rs-tone-slate {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

/* Eksper → gökyüzü mavi */
.rs-role-icon.rs-tone-sky {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}

/* Kamu Kurumu / Belediye → indigo */
.rs-role-icon.rs-tone-indigo {
  background: var(--role-municipality-bg) !important;
  color: var(--role-municipality-text) !important;
  border-color: var(--role-municipality-border) !important;
}

/* Saha Personeli → mavi pastel (field staff tonu) */
.rs-role-icon.rs-tone-fieldstaff {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

/* İç Personel → kırmızı */
.rs-role-icon.rs-tone-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fee2e2 !important;
}

/* Ziyaretçi / Emlakçı → gri */
.rs-role-icon.rs-tone-gray {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

/* --- FORCE PATCH: Mesajlar & Bağlantılarım ikonları --- */

/* Cam buton içindeki ikonlar */
.nav-glass-btn .comm-link i,
.nav-glass-btn .comm-link .bi,
.nav-glass-btn .comm-link svg {
  color: #60a5fa !important;
  fill: #60a5fa !important;
}

/* Hover'da da mavi kalsın (turuncuya dönmesin) */
.nav-glass-btn .comm-link:hover i,
.nav-glass-btn .comm-link:hover .bi,
.nav-glass-btn .comm-link:hover svg {
  color: #60a5fa !important;
  fill: #60a5fa !important;
}

/* --------------------------------------------------------- */
/* Notification Dropdown - Override Bootstrap Defaults */
/* --------------------------------------------------------- */

[id^="notifDropdownWrapper"] .dropdown-menu {
  padding: 0 !important;
  overflow: hidden !important;
  min-width: min(360px, calc(100vw - 16px)) !important;
  /* dar ekranlarda taşma engelle */
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

[id^="notifDropdownWrapper"] .dropdown-menu li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

[id^="notifDropdownWrapper"] .dropdown-menu a:not(.notif-mark-all-btn) {
  display: flex !important;
  padding: 0 !important;
  color: inherit !important;
  background: none !important;
}

[id^="notifDropdownWrapper"] .dropdown-menu a:hover:not(.notif-mark-all-btn) {
  background: none !important;
  color: inherit !important;
}

/* --- SUBSCRIPTION BADGES & RINGS (Option C) --- */

/* Avatar Ring Base */
.nav-profile-avatar-container {
  position: relative;
  display: inline-block;
  padding: 2px;
  /* Gap between avatar and ring */
  border-radius: 50%;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Global img { height: auto } kuralına karşı avatarı her zaman kare tut */
.nav-profile-avatar-container img {
  width: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Professional: Purple */
.avatar-ring-pro {
  box-shadow: 0 0 0 2px #8b5cf6;
  /* Tailwind Purple-500 */
}

/* Corporate: Pastel Blue */
.avatar-ring-corp {
  box-shadow: 0 0 0 2px #60a5fa;
  /* Tailwind Blue-400 (Pastel Blue tone) */
}

/* Badge Base */
.sub-status-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 4px;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid white;
}

/* Professional Badge */
.badge-pro-style {
  background-color: #8b5cf6;
  color: white;
}

/* Corporate Badge */
.badge-corp-style {
  background-color: #dbeafe;
  /* Light Blue */
  color: #1e40af;
  /* Dark Blue Text */
  border-color: #bfdbfe;
}

/* --------------------------------------------------------- */
/* İletişim Merkezi Hub Button                               */
/* --------------------------------------------------------- */

.comm-hub-btn {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 10px !important;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  -webkit-transition: all 0.18s ease;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.comm-hub-btn:hover {
  color: #8b5cf6 !important;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

.comm-hub-btn i {
  color: #60a5fa !important;
  -webkit-transition: color 0.18s ease;
  transition: color 0.18s ease;
}

.comm-hub-btn:hover i {
  color: #8b5cf6 !important;
}

.comm-hub-btn::after {
  /* Bootstrap dropdown caret: küçült */
  font-size: 0.7em;
  margin-left: 4px;
  opacity: 0.6;
}

/* --------------------------------------------------------- */
/* Takvim İkonu (Navbar standalone)                          */
/* --------------------------------------------------------- */

.calendar-nav-btn .notification-icon {
  color: #60a5fa !important;
  -webkit-transition: color 0.18s ease;
  transition: color 0.18s ease;
}

.calendar-nav-btn:hover .notification-icon {
  color: #8b5cf6 !important;
}

/* --------------------------------------------------------- */
/* Profil Dropdown Grup Başlıkları                           */
/* --------------------------------------------------------- */

.profile-section-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #94a3b8;
  text-transform: uppercase;
}

/* =============================================================
   MEGA DROPDOWN (Visitor Navbar)
   Her sayfada yüklenmeli — home.css'e bağımlılık kaldırıldı.

   IMPORTANT: Compound selector (.dropdown-menu.navbar-mega-dropdown)
   ensures specificity 0-2-0, beating Bootstrap's .dropdown-menu (0-1-0).
   This prevents CSS loading order race conditions where Bootstrap CDN
   could override min-width → collapsing the 2-column grid to 1 column.
   ============================================================= */
.dropdown-menu.navbar-mega-dropdown {
  /* Override Bootstrap CSS variable */
  --bs-dropdown-min-width: 480px;
  min-width: 480px;
  max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px);
  /* Notch + scrollbar hesaba katılır */
  padding: 1.25rem;
  border: none;
  border-radius: 16px;
  -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  /* Safari: GPU layer for smooth rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Ensure dropdown content is readable */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dropdown-menu.navbar-mega-dropdown:not(.show) {
  display: none;
  visibility: hidden;
}

.dropdown-menu.navbar-mega-dropdown.show {
  display: block;
  visibility: visible;
}

.navbar-mega-dropdown .mega-dropdown-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 6px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Mega dropdown içi grup başlığı — iki sütunu birden kaplar. */
.navbar-mega-dropdown .mega-dropdown-label {
  grid-column: 1 / -1;
  padding: 6px 12px 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.navbar-mega-dropdown .mega-dropdown-label:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.mega-dropdown-text {
  overflow: hidden;
  min-width: 0;
  -webkit-flex: 1;
  flex: 1;
}

.mega-dropdown-text p {
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mega-dropdown-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a2e;
  white-space: normal;
  -webkit-transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  /* Prevent item from stretching beyond grid cell */
  min-width: 0;
  overflow: hidden;
}

.mega-dropdown-item {
  position: relative;
  border: 1px solid transparent;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mega-dropdown-item:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(139, 92, 246, 0.05) 100%);
  border-color: rgba(139, 92, 246, 0.18);
  color: #1a1a2e;
  text-decoration: none;
  transform: translateY(-1px);
}

.mega-dropdown-item:hover .mega-dropdown-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.18);
}

.mega-dropdown-item:hover .mega-dropdown-text h6 {
  color: #6366f1;
}

.mega-dropdown-item:active {
  background: rgba(99, 102, 241, 0.1);
  transform: translateY(0);
}

.mega-dropdown-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  /* Prevent shrink on narrow screens */
  border-radius: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 1.05rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: #f8f9ff;
  color: #1e3a5f;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease;
}

.mega-dropdown-text h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: #1a1a2e;
  line-height: 1.3;
  /* Prevent text from overflowing */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mega-dropdown-text p {
  font-size: 0.75rem;
  margin: 2px 0 0;
  color: #64748b;
  line-height: 1.35;
}

/* Tablet: narrower dropdown */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dropdown-menu.navbar-mega-dropdown {
    --bs-dropdown-min-width: 420px;
    min-width: 420px;
    padding: 1rem;
  }

  .navbar-mega-dropdown .mega-dropdown-item {
    padding: 10px 12px;
    gap: 10px;
  }
}

@media (max-width: 1199.98px) {
  .dropdown-menu.navbar-mega-dropdown {
    --bs-dropdown-min-width: 0;
    min-width: auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    padding: 0.5rem;
    border-radius: 0;
    margin: 0;
    -webkit-animation: none;
    animation: none;
  }

  .navbar-mega-dropdown .mega-dropdown-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .navbar-mega-dropdown .mega-dropdown-item {
    padding: 10px 12px;
  }

  .navbar-custom .navbar-collapse {
    overflow-x: clip;
  }
}

@media (max-width: 991.98px) {
  .navbar-custom .navbar-nav .dropdown-menu.navbar-mega-dropdown {
    position: static;
    inset: auto;
    float: none;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 1199.98px) {
    .navbar-custom .navbar-collapse {
      overflow-x: hidden;
    }
  }
}

/* =============================================================
   NAVBAR VISITOR CTA (Desktop + Mobile)
   ============================================================= */
.navbar-visitor-cta {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.navbar-visitor-cta .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  font-size: var(--navbar-link-size, 0.92rem);
  padding: 8px 12px !important;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.navbar-visitor-cta .nav-link:hover {
  color: #8b5cf6 !important;
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 1200px) and (max-width: 1535.98px) and (pointer: fine) {
  .navbar-custom .container-fluid,
  .identity-navbar .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    column-gap: 0.5rem;
  }

  .navbar-custom .navbar-brand {
    margin-right: 1rem !important;
    padding-right: 0 !important;
    gap: 0.75rem !important;
  }

  .navbar-custom .navbar-brand-wordmark {
    height: 42px;
    max-width: 172px;
  }

  .navbar-custom .beta-badge {
    display: none;
  }

  .navbar-custom .nav-main-link {
    font-size: var(--navbar-link-size-compact, 0.875rem);
    padding: 10px 8px !important;
  }

  .navbar-custom .comm-hub-btn {
    font-size: 0.8rem;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .navbar-custom .navbar-nav.ms-auto {
    gap: 0.25rem;
  }

  .navbar-custom[data-navbar-authenticated="1"] .navbar-brand-wordmark {
    max-width: 165px;
  }
}

.btn-home-nav-cta {
  background: #7c3aed;
  border-color: #7c3aed;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-home-nav-cta:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.btn-home-nav-cta:active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Navbar CTA: sabit 35px yükseklik, metin dikey+yatay ortalı */
.navbar-visitor-cta .btn-home-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-height: 35px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* Mobile: CTA stays visible outside hamburger */
@media (max-width: 991.98px) {
  .navbar-visitor-cta {
    position: absolute;
    right: 60px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 5;
    /* Mobil menünün arkasına düşmesini engelle */
  }

  .navbar-visitor-cta .nav-link {
    display: none;
  }
}

@media (max-width: 370px) {
  .btn-home-nav-cta {
    font-size: 0.75rem !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =============================================================
   MOBİL TOUCH OPTİMİZASYONLARI - 2026
   ============================================================= */

@media (max-width: 991.98px) {
  /* Mobilde navbar yüksekliği masaüstüyle aynı (64px) — dikey padding sıfır,
     yalnız yatay 0.5rem ve iOS notch */
  .navbar-custom {
    min-height: 64px;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* position: static — açılan collapse paneli container'a değil sticky
     navbar'a göre konumlanır, böylece kenardan kenara (390px) uzanır.
     İçerideki rozetler kendi position-relative ebeveynine bağlı, etkilenmez. */
  .navbar-custom .container-fluid {
    position: static;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 0.5rem;
  }

  .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    margin-right: auto;
    max-width: calc(100% - 56px);
    padding-right: 0 !important;
    overflow: hidden;
  }

  .navbar-brand-wordmark {
    width: min(100%, 186px);
    max-width: 100%;
    height: 44px;
  }

  .navbar-custom .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* flex-wrap: nowrap nedeniyle collapse normal akışta alt satıra düşmez;
     açıldığında navbar'ın altına absolute olarak yerleştir */
  .navbar-custom .navbar-collapse.show,
  .navbar-custom .navbar-collapse.collapsing {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-top: 0;
    background: rgba(15, 23, 42, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

  .navbar-custom .beta-badge {
    display: none !important;
  }

  .navbar-custom .navbar-nav {
    gap: 0.25rem;
  }
  
  /* Touch-friendly links */
  .nav-main-link,
  .role-switch-btn,
  .notification-btn,
  .comm-link,
  .comm-hub-btn,
  .panel-btn-link,
  .dropdown-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Dropdown menü - mobilde tam genişlik */
  .dropdown-menu {
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 0 !important;
  }
  
  .dropdown-item {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  
  /* Navbar toggler */
  /* 56×48 → 44×44: ikon 1.5em olduğu için font-size 1rem ile 24px'e iner,
     WCAG 44px dokunma hedefi min-* ile korunur. Seçici iki sınıflı: base.html
     sayfalarında mobile_enhancements.css "button:not(.btn-close)" ile
     10px 16px !important veriyor, aynı ağırlıkta olduğu için burayı eziyordu. */
  .navbar-custom .navbar-toggler {
    flex: 0 0 auto;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 1rem !important;
    margin-left: auto;
  }
  
  /* Notification butonu */
  .notification-btn {
    position: relative;
  }
  
  .notification-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
  
  /* Search bar - mobilde tam genişlik */
  .navbar-search {
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  .navbar-search input {
    font-size: 16px !important;
    padding: 12px 16px !important;
  }

  .nav-menu-min-500 {
    min-width: 0;
  }

  .nav-menu-min-500 > .row {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }

  .nav-menu-min-500 .col-4 {
    width: 50%;
  }

  .nav-menu-min-500 .col-12 {
    width: 100%;
  }

  .nav-menu-min-500 .dropdown-item.flex-column {
    min-height: 138px;
    justify-content: center;
    padding: 12px !important;
  }

  .nav-menu-min-500 .dropdown-item.flex-column .x-small {
    white-space: normal;
    line-height: 1.3;
  }

  .nav-notif-dropdown-menu,
  .nav-profile-menu-min {
    /* [FIX] Yukarıdaki blanket ".dropdown-menu { min/max-width: 100% !important }"
       kuralı, absolute konumlu bu menülerde `100%`'i dar avatar toggle'a (~36px)
       çözüyor → menü 36px'lik dikey şeride sıkışıyordu (özellikle backoffice).
       Genişliği viewport'a dayandırıp blanket kuralı !important ile eziyoruz. */
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  .navbar-visitor-cta {
    right: 56px;
    max-width: calc(100vw - 176px);
  }

  .navbar-visitor-cta .btn-home-nav-cta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand {
    max-width: calc(100vw - 84px);
    gap: 0.625rem !important;
  }

  .navbar-brand-wordmark {
    height: 44px;
    width: min(100%, 186px);
    max-width: min(100%, 186px);
  }

  .beta-badge {
    display: none;
  }
}

@media (max-width: 359.98px) {
  .navbar-brand {
    max-width: calc(100vw - 78px);
  }

  .navbar-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .navbar-brand-wordmark {
    height: 34px;
    width: min(100%, 140px);
    max-width: min(100%, 140px);
  }

  .nav-menu-min-500 .col-4 {
    width: 100%;
  }

  .nav-menu-min-500 .dropdown-item.flex-column {
    min-height: auto;
  }

  .navbar-visitor-cta {
    right: 52px;
    max-width: calc(100vw - 148px);
  }
}

/* iOS Safari notch desteği */
@supports (padding-top: env(safe-area-inset-top)) {
  .navbar-custom {
    /* Yalnızca gerçek çentik payı eklenir. Buradaki eski `calc(0.5rem + ...)`
       her modern tarayıcıda (çentiği olmayan masaüstü dahil) üste sabit 8px
       koyuyordu; alt padding 0 olduğu için içerik 3.5px aşağı kayıyordu. */
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: calc(0.5rem + env(safe-area-inset-left)) !important;
    padding-right: calc(0.5rem + env(safe-area-inset-right)) !important;
  }
}

/* =============================================================
   CROSS-BROWSER HARDENING: Touch & GPU
   ============================================================= */

/* Touch: tüm navbar interaktif elementlerinde 300ms gecikme engelle */
.nav-main-link,
.role-switch-btn,
.notification-btn,
.comm-link,
.comm-hub-btn,
.panel-btn-link,
.btn-home-nav-cta,
.mega-dropdown-item,
.profile-button {
  touch-action: manipulation;
}

/* GPU layer: mega dropdown açılırken jank engelle */
.dropdown-menu.navbar-mega-dropdown {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* =============================================================
   INLINE STYLE MIGRATION UTILITIES (Navbar Template)
   ============================================================= */

.nav-divider-soft {
  height: 24px;
  opacity: 0.3;
}

.nav-menu-min-500 {
  min-width: min(500px, calc(100vw - 32px));
}

.nav-icon-box-48 {
  width: 48px;
  height: 48px;
}

.nav-app-brand-mark {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.nav-icon-box-cyan-bg {
  background-color: rgba(13, 202, 240, 0.1);
}

.nav-icon-box-purple-bg {
  background-color: rgba(111, 66, 193, 0.1);
}

.nav-talent-item-bg {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(27, 94, 32, 0.1) 100%);
}

.nav-talent-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

.nav-talent-badge {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  font-size: 0.65rem;
}

.nav-icon-fs-11 {
  font-size: 1.1rem;
}

.nav-notif-count-badge {
  font-size: 0.6rem;
  top: 4px;
  right: 4px;
  min-width: 16px;
  padding: 2px 5px;
}

.nav-notif-dropdown-menu {
  min-width: 360px;
  z-index: 10000 !important;
}

.nav-role-public-bg {
  background-color: #6610f2;
}

.nav-object-cover {
  object-fit: cover;
  aspect-ratio: 1;
}

.nav-avatar-38 {
  width: 38px;
  height: 38px;
  aspect-ratio: 1;
}

.nav-profile-menu-min {
  min-width: 260px;
}

.nav-plan-label {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.nav-plan-badge {
  font-size: 0.6rem;
}

.nav-talent-green {
  color: #2e7d32;
}

.nav-survey-icon {
  width: 26px;
  height: 26px;
}

.mega-icon-blue {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.mega-icon-orange {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.mega-icon-green {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.mega-icon-violet {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* =============================================================
   GAMIFICATION WALLET BADGE (2026 Modern Navbar Widget)
   Glass morphism + tuğla emoji + glow hover
   ============================================================= */

.gamif-wallet-badge {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 5px 10px;
  height: 34px;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
}

.gamif-wallet-badge:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(139, 92, 246, 0.12) 100%);
  border-color: rgba(59, 130, 246, 0.35);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
  color: #93c5fd !important;
  text-decoration: none;
}

.gamif-wallet-icon {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.gamif-wallet-amount {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  color: #93c5fd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   NAVBAR — MOBILE TOP QUICK ACTIONS (Tuğla · Bildirim · Mesaj)
   Hamburger yerine sadece <lg breakpoint'inde görünür.
   ============================================================ */
.navbar-mobile-actions {
  /* Grid sırası: brand sola, bu sağa (ms-auto ile) */
  --mobile-action-size: 40px;
  --mobile-action-icon: 1.15rem;
}

.navbar-mobile-actions .navbar-mobile-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-action-size);
  height: var(--mobile-action-size);
  min-width: var(--mobile-action-size);
  max-width: var(--mobile-action-size);
  flex: 0 0 var(--mobile-action-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.navbar-mobile-actions .navbar-mobile-icon-btn:hover,
.navbar-mobile-actions .navbar-mobile-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  outline: none;
}

.navbar-mobile-actions .navbar-mobile-icon-btn:active {
  transform: scale(0.94);
}

.navbar-mobile-actions .navbar-mobile-icon-btn > i {
  font-size: var(--mobile-action-icon);
  line-height: 1;
}

/* Bildirim/Mesaj sayaç rozetinin konumu (mobile-top) */
.navbar-mobile-actions .nav-notif-count-badge {
  top: -2px;
  right: -2px;
  font-size: 8px;
  line-height: 1;
  padding: 2px 4px;
  min-width: 14px;
  border: 1px solid #0b1220;
}

/* Tuğla cüzdan — kompakt mobil hâli */
.navbar-mobile-actions .navbar-mobile-action--wallet .gamif-wallet-badge {
  padding: 6px 10px 6px 8px;
  height: var(--mobile-action-size);
}

.navbar-mobile-actions .navbar-mobile-action--wallet .gamif-wallet-icon {
  font-size: 0.95rem;
}

.navbar-mobile-actions .navbar-mobile-action--wallet .gamif-wallet-amount {
  font-size: 0.78rem;
}

/* Bildirim dropdown — mobilde ekranı taşırmasın */
.navbar-mobile-notif-menu {
  max-width: min(92vw, 360px);
  width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
}

/* Mobile profil avatar butonu — diğer icon button'larla aynı boyutta yuvarlak */
.navbar-mobile-actions .navbar-mobile-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-action-size);
  height: var(--mobile-action-size);
  min-width: var(--mobile-action-size);
  max-width: var(--mobile-action-size);
  flex: 0 0 var(--mobile-action-size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.navbar-mobile-actions .navbar-mobile-profile-btn:active {
  transform: scale(0.94);
}

.navbar-mobile-actions .nav-profile-avatar-container--mobile {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1 / 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.navbar-mobile-actions .nav-profile-avatar-container--mobile img,
.navbar-mobile-actions .nav-profile-avatar-container--mobile .nav-avatar-32 {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px;
  object-fit: cover;
  font-size: 0.85rem;
  border-radius: 50%;
}

/* Mobile profil dropdown — bildirim menüsü gibi ekranı taşmasın */
.navbar-mobile-actions #profileDropdownWrapperMobile .dropdown-menu {
  max-width: min(92vw, 320px);
  width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
}

/* Mobilde navbar tek satırda kalsın — brand shrink olsun, actions shrink olmasın */
@media (max-width: 991.98px) {
  .navbar-custom > .container-fluid,
  .navbar-custom > .container {
    flex-wrap: nowrap !important;
    min-width: 0;
  }
  .navbar-custom .navbar-brand {
    min-width: 0;
    flex: 0 1 auto;
    margin-right: 0.5rem !important;
    overflow: hidden;
  }
  .navbar-custom .navbar-brand .navbar-brand-wordmark,
  .navbar-custom .navbar-brand .navbar-brand-logo-full {
    max-width: 100%;
    height: auto;
  }
  /* Beta rozetini mobilde gizle — yer açar */
  .navbar-custom .navbar-brand .beta-badge {
    display: none !important;
  }
  .navbar-mobile-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto !important;
  }
}

/* Çok küçük cihazlarda biraz daha sıkıştır */
@media (max-width: 575.98px) {
  .navbar-custom .navbar-brand .navbar-brand-logo-full {
    width: 186px !important; /* 760x180 viewBox → 44px yükseklik, masaüstüyle aynı */
    height: auto !important;
  }
  .navbar-mobile-actions {
    --mobile-action-size: 36px;
    --mobile-action-icon: 1.05rem;
    gap: 2px !important;
  }
  /* Wallet'i kompakt yap: küçük sayı + sıkı padding */
  .navbar-mobile-actions .navbar-mobile-action--wallet .gamif-wallet-badge {
    padding: 4px 8px 4px 6px;
    gap: 4px !important;
  }
  .navbar-mobile-actions .navbar-mobile-action--wallet .gamif-wallet-amount {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .navbar-custom .navbar-brand .navbar-brand-logo-full {
    width: 140px !important;
  }
  .navbar-mobile-actions {
    --mobile-action-size: 34px;
    --mobile-action-icon: 1rem;
  }
}

/* ===========================================================================
   VISITOR MOBILE MENU — collapse içinde iki bölümlü kart
   Hamburger Bootstrap collapse'u açar; içinde "Hesabınız var mı? → Giriş Yap"
   ve "Yeni misiniz? → Hemen Başlayın" bölümleri görünür. Navbar her temada
   koyu olduğundan yüzey/metin tonları bu dosyanın geri kalanındaki
   rgba(255,255,255,…) kalıbıyla; mor aksiyon global --accent-fill'den.
   =========================================================================== */

/* Panel kenardan kenara: collapse'ın kendi zemini/üst çizgisi var (.show
   kuralı), kart ayrıca zemin/kenarlık/yuvarlaklık taşımaz. Collapse'ın yatay
   padding'i sıfırlanır, iç boşluğu kart verir. */
.visitor-mobile-menu {
  position: relative;
  padding: 20px 16px 16px;
  margin: 0;
}

@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse:has(> .visitor-mobile-menu) {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
}

/* Hamburgere bakan küçük ok — panelin üst çizgisinde, hamburger merkezinde
   (390px'te buton merkezi sağdan ~51px ölçüldü; ok 12px geniş). */
.visitor-mobile-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 45px;
  width: 12px;
  height: 12px;
  background: rgba(15, 23, 42, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
}

.visitor-mobile-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.visitor-mobile-section-icon {
  flex: 0 0 auto;
  width: 28px;
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.visitor-mobile-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.visitor-mobile-section-desc {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.visitor-mobile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 18px 0;
}

/* Bölüm aksiyonu: tam genişlik, sol ikon + metin, sağda ok. 48px dokunma hedefi. */
.visitor-mobile-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.visitor-mobile-btn > i:first-child {
  flex: 0 0 auto;
  width: 22px;
  font-size: 1.25rem;
  text-align: center;
}

.visitor-mobile-btn > span {
  flex: 1 1 auto;
  min-width: 0;
}

.visitor-mobile-btn-chevron {
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.visitor-mobile-btn--secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.visitor-mobile-btn--secondary:hover,
.visitor-mobile-btn--secondary:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Ana sayfa (anasayfa_motion.html) custom-theme.css'i yüklemiyor; --accent-fill
   orada tanımsız kalır. Fallback değerleri bu dosyadaki .btn-home-nav-cta ile
   birebir aynı (#7c3aed / #6d28d9). */
.visitor-mobile-btn--primary {
  color: #fff;
  background: var(--accent-fill, #7c3aed);
  border: 1px solid var(--accent-fill, #7c3aed);
  border-radius: 999px;
}

.visitor-mobile-btn--primary:hover,
.visitor-mobile-btn--primary:active {
  color: #fff;
  background: var(--accent-fill-hover, #6d28d9);
  border-color: var(--accent-fill-hover, #6d28d9);
}

.visitor-mobile-btn:focus-visible {
  outline: 2px solid var(--accent, #a78bfa);
  outline-offset: 2px;
}

/* ===========================================================================
   MOBİL SCROLL-JANK: sticky navbar'da backdrop-filter:blur, altından feed
   kaydıkça her frame yeniden hesaplanır (en büyük takılma kaynağı). Mobilde
   blur yerine opak arka plan + will-change kapat. Görünüm koyu navbar ile aynı.
   =========================================================================== */
@media (max-width: 991.98px) {
  .navbar-custom {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.97) !important;
    will-change: auto !important;
  }
}

/* Mobil üst çubuk — rol paneli ikonu (desktop rol rozetinin karşılığı).
   Renkler rol paletinden gelir (.role-badge-* sınıfları custom.css'te); burada yalnız biçim ezilir. */
.navbar-mobile-actions .navbar-mobile-panel-btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.navbar-mobile-actions .navbar-mobile-panel-btn:hover,
.navbar-mobile-actions .navbar-mobile-panel-btn:focus-visible {
  filter: brightness(1.05);
  color: inherit;
}

/* Profil menüsü — "Panelim" satırı */
.nav-profile-menu-min .nav-profile-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-profile-menu-min .nav-profile-panel-icon {
  width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 8px !important;
  flex: 0 0 30px;
}
.nav-profile-menu-min .nav-profile-panel-icon i {
  font-size: 0.95rem;
}

/* Mobil panel ikonu: .navbar-mobile-icon-btn'in beyaz/şeffaf tabanını rol paletiyle ezer (3 sınıf > 2 sınıf). */
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-owner { background: var(--role-owner-bg); color: var(--role-owner-fg); border-color: var(--role-owner-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-contractor { background: var(--role-contractor-bg); color: var(--role-contractor-fg); border-color: var(--role-contractor-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-consultant { background: var(--role-consultant-bg); color: var(--role-consultant-fg); border-color: var(--role-consultant-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-supplier { background: var(--role-supplier-bg); color: var(--role-supplier-fg); border-color: var(--role-supplier-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-visitor { background: var(--role-visitor-bg); color: var(--role-visitor-fg); border-color: var(--role-visitor-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-public-entity { background: var(--role-public-entity-bg); color: var(--role-public-entity-fg); border-color: var(--role-public-entity-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-field-staff { background: var(--role-field-staff-bg); color: var(--role-field-staff-fg); border-color: var(--role-field-staff-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-technical-consultant { background: var(--role-consultant-bg); color: var(--role-consultant-fg); border-color: var(--role-consultant-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-real-estate { background: var(--role-real-estate-bg); color: var(--role-real-estate-fg); border-color: var(--role-real-estate-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-student { background: var(--role-education-bg); color: var(--role-education-fg); border-color: var(--role-education-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-academic { background: var(--role-education-bg); color: var(--role-education-fg); border-color: var(--role-education-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-regulated-expert { background: var(--role-expert-bg); color: var(--role-expert-fg); border-color: var(--role-expert-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-corporate { background: var(--role-corporate-bg); color: var(--role-corporate-fg); border-color: var(--role-corporate-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.role-badge-admin { background: var(--role-internal-staff-bg); color: var(--role-internal-staff-fg); border-color: var(--role-internal-staff-border); }
.navbar-mobile-actions .navbar-mobile-icon-btn.navbar-mobile-panel-btn.nav-role-public-bg { background: #6610f2; color: #fff; }

/* Dokunmatik cihaz (pointer: coarse) — base_core.css'in genel "a/button min 44x44" kuralı
   mobil üst çubuk ikonlarını yumurtaya çeviriyordu (genişlik 34-40px'e kilitli, yükseklik 44).
   Görsel daire sabit kalır; 44px WCAG dokunma alanı görünmez ::before ile korunur. */
@media (pointer: coarse) {
  .navbar-mobile-actions .navbar-mobile-icon-btn,
  .navbar-mobile-actions .navbar-mobile-profile-btn {
    min-height: var(--mobile-action-size);
    max-height: var(--mobile-action-size);
    min-width: var(--mobile-action-size);
    position: relative;
  }
  .navbar-mobile-actions .navbar-mobile-icon-btn::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

/* ===== Ziyaretçi "Araçlar" dropdown — logonun sağında (18 Eyl 2026) ===== */
.navbar-visitor-tools { flex-shrink: 0; white-space: nowrap; }
.navbar-visitor-tools .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  font-size: var(--navbar-link-size, 0.92rem);
  padding: 8px 12px !important;
  border-radius: 8px;
  transition: all 0.18s ease;
}
.navbar-visitor-tools .nav-link:hover,
.navbar-visitor-tools .show > .nav-link { color: #8b5cf6 !important; background: rgba(255, 255, 255, 0.08); }
.visitor-tools .dropdown-toggle::after { margin-left: 4px; opacity: .7; }
.visitor-tools__icon { font-size: .95rem; color: #A6CEE6; margin-right: 4px; }
.visitor-tools__menu { min-width: 400px; max-width: 440px; background: #fff; white-space: normal; }
.visitor-tool {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: #1C2740; transition: background .15s ease;
}
.visitor-tool:hover, .visitor-tool:focus-visible { background: #EAF3F7; color: #1C2740; }
.visitor-tool.is-active { background: #E6F1F5; }
.visitor-tool__icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.visitor-tool__icon--sky  { background: #DCEBF4; color: #2F5F7F; }
.visitor-tool__icon--navy { background: #1F2B47; color: #A6CEE6; }
.visitor-tool__icon--sage { background: #E3F2E9; color: #2F6F4F; }
.visitor-tool__icon--clay { background: #F6E9DC; color: #9B5A2F; }
.visitor-tool__icon--lav  { background: #EFEDF7; color: #5B4B9E; }
.visitor-tool__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.visitor-tool__text b { font-size: .92rem; font-weight: 700; line-height: 1.25; }
.visitor-tool__text small { font-size: .78rem; color: #5C6478; line-height: 1.35; margin-top: 2px; }
.visitor-tool__chev { font-size: .8rem; color: #8b93a7; flex: 0 0 auto; }
.visitor-tool:hover .visitor-tool__chev { color: #1F2B47; }

/* Mobil menü varyantı: koyu panel üstünde */
/* "Araçlar" akordeonu (21 Eyl 2026): başlık satırı <button>; varsayılan kapalı.
   Buton dış metin rengini miras almasın diye panelin saydam beyaz tonu açıkça verilir; gerisi currentColor. */
.visitor-mobile-tools-toggle {
  width: 100%;
  margin: -8px 0 0;            /* head'in 14px alt boşluğu + 8px padding = kapalıyken ~14px kalır */
  padding: 8px 6px 8px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6); /* panelin açıklama tonu (.visitor-mobile-section-desc); chevron + hover tintı buradan */
  text-align: left;
  cursor: pointer;
  align-items: center;         /* chevron başlık+açıklama bloğuna ortalanır */
  min-height: 48px;            /* dokunma hedefi */
}
.visitor-mobile-tools-toggle:hover,
.visitor-mobile-tools-toggle:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); }
.visitor-mobile-tools-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.visitor-mobile-tools-toggle .visitor-mobile-section-icon { margin-top: 0; }
.visitor-mobile-tools-toggle__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.visitor-mobile-tools-toggle .visitor-mobile-section-title,
.visitor-mobile-tools-toggle .visitor-mobile-section-desc { display: block; }
.visitor-mobile-tools-toggle__chev {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: .6;
  transition: transform .2s ease;
}
.visitor-mobile-tools-toggle[aria-expanded="true"] .visitor-mobile-tools-toggle__chev { transform: rotate(180deg); }
.visitor-mobile-section--tools .collapse.show .visitor-mobile-tools,
.visitor-mobile-section--tools .collapsing .visitor-mobile-tools { padding-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .visitor-mobile-tools-toggle__chev { transition: none; }
}
.visitor-mobile-tools { display: flex; flex-direction: column; gap: 4px; }
.visitor-tool--mobile { color: #fff; padding: 9px 10px; }
.visitor-tool--mobile:hover, .visitor-tool--mobile:focus-visible, .visitor-tool--mobile.is-active { background: rgba(255,255,255,.08); color: #fff; }
.visitor-tool--mobile .visitor-tool__text small { color: rgba(255,255,255,.6); }
.visitor-tool--mobile .visitor-tool__chev { color: rgba(255,255,255,.45); }
.visitor-tool--mobile .visitor-tool__icon { flex-basis: 34px; width: 34px; height: 34px; font-size: .95rem; }
.visitor-tool--mobile .visitor-tool__text small { display: none; } /* kompakt: yalnız başlık */
.visitor-tool--mobile .visitor-tool__text b { font-size: 1rem; }