/* =========================================================
   Bilnet Talep · Modern UI
   Glass-morphism · gradient mesh · glow · micro-interactions
   ========================================================= */

/* ---------- 0. Açılış ekranı (PWA intro) ----------
   Android'in kendi açılış ekranı manifest background_color (#0a1e5c) +
   ikonu gösterir; ikon da lacivert zemin/beyaz logo olduğu için buraya
   kesintisiz geçilir. Kutu içinde beyaz logo görüntüsü böylece kalktı. */
.bn-acilis {
  /* Konum/zemin base.html'de satır içi verildi (CSS geç yüklenirse bir an
     beyaz çakıyordu); burada yalnızca hareket ve süsleme var. */
  overflow: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.bn-acilis::before {
  /* Zemine derinlik: merkezde hafif mavi hâle */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%,
              rgba(59, 130, 246, 0.28) 0%, rgba(10, 30, 92, 0) 62%);
}
.bn-acilis-kapaniyor { opacity: 0; visibility: hidden; }
/* Açılış açıkken arka plan kaymasın */
html.bn-acilis-acik, html.bn-acilis-acik body { overflow: hidden; }

.bn-acilis-sahne {
  position: relative;
  width: min(64vw, 260px);
  height: min(64vw, 260px);
  display: flex; align-items: center; justify-content: center;
}
.bn-acilis-logo {
  width: 62%;
  height: auto;
  /* Logo seffaf beyaz PNG; lacivert zeminde parlasin */
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.45));
  animation: bn-acilis-giris .9s cubic-bezier(.2, .8, .25, 1) both;
  position: relative; z-index: 2;
}
/* İki çember: farklı hız ve yönde döner, kesikli kenar hareketi belli etsin */
.bn-acilis-halka {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}
.bn-acilis-halka-1 {
  inset: 0;
  border-top-color: #ffffff;
  border-right-color: rgba(255, 255, 255, 0.35);
  animation: bn-acilis-don 1.5s linear infinite;
}
.bn-acilis-halka-2 {
  inset: 11%;
  border-bottom-color: var(--bn-accent, #f47920);
  border-left-color: rgba(244, 121, 32, 0.3);
  animation: bn-acilis-don 2.1s linear infinite reverse;
}
/* Dışa açılan nabız halkası */
.bn-acilis-nabiz {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: bn-acilis-nabiz 2s ease-out infinite;
}
/* Altta ilerleme çizgisi — "yükleniyor" hissi verir */
.bn-acilis-cizgi {
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  width: min(46vw, 190px); height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.bn-acilis-cizgi > span {
  display: block; height: 100%; width: 42%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff 40%,
              var(--bn-accent, #f47920) 100%);
  animation: bn-acilis-kaydir 1.25s ease-in-out infinite;
}

@keyframes bn-acilis-giris {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bn-acilis-don { to { transform: rotate(360deg); } }
@keyframes bn-acilis-nabiz {
  0%   { transform: scale(.86); opacity: .7; }
  70%  { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}
@keyframes bn-acilis-kaydir {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
/* Hareket azaltma tercihi: JS ekranı zaten hiç göstermiyor, yine de
   animasyonlar sustursun (ekran bir an görünürse titremesin). */
@media (prefers-reduced-motion: reduce) {
  .bn-acilis-logo, .bn-acilis-halka,
  .bn-acilis-nabiz, .bn-acilis-cizgi > span { animation: none !important; }
}

/* ---------- 1. Tipografi & Değişkenler ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bn-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Marka renkleri — Bilnet Okulları kurumsal palet
     Primary: koyu lacivert / navy (logodaki lacivert taban)
     Accent : sıcak turuncu (siteideki "Online Bilgi Sistemi" CTA rengi)
     Gold   : meşale altını (ikincil vurgu, isteğe bağlı) */
  --bn-primary: #0a1e5c;         /* koyu lacivert */
  --bn-primary-2: #1e40af;       /* orta mavi */
  --bn-primary-3: #3b82f6;       /* açık mavi (gradient bitişi) */
  --bn-accent: #f47920;          /* Bilnet turuncu */
  --bn-accent-2: #ff9800;        /* açık turuncu */
  --bn-gold: #fbbf24;            /* meşale altını */
  --bn-pink: #f472b6;            /* danger vurgu için tutuldu */
  --bn-orange: #f47920;          /* eski alias — geriye dönük uyum */
  --bn-green: #10b981;

  /* Gradient'ler — lacivert dominant + turuncu vurgu */
  --bn-grad-primary: linear-gradient(135deg, #0a1e5c 0%, #1e40af 55%, #3b82f6 100%);
  --bn-grad-accent:  linear-gradient(135deg, #f47920 0%, #ff9800 60%, #fbbf24 100%);
  --bn-grad-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --bn-grad-warning: linear-gradient(135deg, #f47920 0%, #ffa726 100%);
  --bn-grad-danger:  linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --bn-grad-info:    linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);

  /* Cam efekti */
  --bn-glass-bg: rgba(255, 255, 255, 0.72);
  --bn-glass-border: rgba(255, 255, 255, 0.4);
  --bn-glass-shadow: 0 8px 32px rgba(10, 30, 92, 0.10);
  --bn-glass-blur: 18px;

  /* Yüzey */
  --bn-surface: rgba(255, 255, 255, 0.8);
  --bn-surface-solid: #ffffff;
  --bn-text: #0f1a3a;
  --bn-text-muted: #5b6784;
  --bn-border: rgba(10, 30, 92, 0.12);

  /* Glow gölgeler */
  --bn-glow-primary: 0 10px 30px -8px rgba(30, 64, 175, 0.55);
  --bn-glow-accent:  0 10px 30px -8px rgba(244, 121, 32, 0.55);
  --bn-glow-info:    0 10px 30px -8px rgba(14, 165, 233, 0.5);
  --bn-glow-success: 0 10px 30px -8px rgba(16, 185, 129, 0.5);
  --bn-glow-warning: 0 10px 30px -8px rgba(244, 121, 32, 0.5);
  --bn-glow-danger:  0 10px 30px -8px rgba(239, 68, 68, 0.55);

  /* --- Bootstrap CSS variable override ---
     Menilo teması & Bootstrap 5'in `.btn-primary`, `.text-primary`,
     `.bg-primary`, `.nav-link.active` vb. sınıfları bu değişkenleri kullanır.
     Marka lacivertine hizalıyoruz ki tüm bileşenler kendiliğinden uyum sağlasın. */
  --bs-primary: #0a1e5c;
  --bs-primary-rgb: 10, 30, 92;
  --bs-link-color: #1e40af;
  --bs-link-color-rgb: 30, 64, 175;
  --bs-link-hover-color: #0a1e5c;
  --bs-link-hover-color-rgb: 10, 30, 92;
}

/* Bootstrap subtle/text sınıfları için de marka rengi */
.text-primary { color: var(--bn-primary) !important; }
.bg-primary { background-color: var(--bn-primary) !important; }
.bg-primary-subtle { background-color: rgba(30, 64, 175, 0.12) !important; }
.text-primary-emphasis { color: var(--bn-primary) !important; }
.border-primary { border-color: var(--bn-primary) !important; }
.link-primary { color: var(--bn-primary-2) !important; }

[data-bs-theme="dark"] {
  --bn-glass-bg: rgba(15, 26, 58, 0.6);
  --bn-glass-border: rgba(59, 130, 246, 0.18);
  --bn-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --bn-surface: rgba(15, 26, 58, 0.75);
  --bn-surface-solid: #0f1a3a;
  --bn-text: #e8edff;
  --bn-text-muted: #9aa8cc;
  --bn-border: rgba(59, 130, 246, 0.2);
}

/* ---------- 2. Genel gövde & arka plan ---------- */
html, body {
  font-family: var(--bn-font);
  font-feature-settings: "cv02", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  color: var(--bn-text);
}
body {
  background: #f4f7fb;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated gradient mesh (arkaplan blob'ları) */
.bn-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bn-bg::before,
.bn-bg::after,
.bn-bg span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.bn-bg::before {
  width: 520px; height: 520px;
  top: -180px; left: -160px;
  background: radial-gradient(circle at 30% 30%, #1e40af 0%, transparent 70%);
  opacity: 0.35;
  animation: bnFloatA 22s ease-in-out infinite;
}
.bn-bg::after {
  width: 620px; height: 620px;
  bottom: -220px; right: -180px;
  background: radial-gradient(circle at 60% 60%, #3b82f6 0%, transparent 70%);
  opacity: 0.32;
  animation: bnFloatB 26s ease-in-out infinite;
}
.bn-bg span {
  width: 440px; height: 440px;
  top: 40%; left: 55%;
  background: radial-gradient(circle at 40% 40%, #f47920 0%, transparent 70%);
  opacity: 0.28;
  animation: bnFloatC 30s ease-in-out infinite;
}

[data-bs-theme="dark"] body { background: #05102b; }
[data-bs-theme="dark"] .bn-bg::before { opacity: 0.35; }
[data-bs-theme="dark"] .bn-bg::after  { opacity: 0.30; }
[data-bs-theme="dark"] .bn-bg span    { opacity: 0.22; }

@keyframes bnFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes bnFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-140px, -80px) scale(1.1); }
}
@keyframes bnFloatC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-100px, 140px) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .bn-bg::before, .bn-bg::after, .bn-bg span { animation: none; }
}

/* ---------- 3. Sidebar (glass) — Bilnet lacivert ---------- */
.pe-app-sidebar {
  background: linear-gradient(180deg, rgba(10, 30, 92, 0.97) 0%, rgba(6, 22, 64, 0.97) 100%) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 4px 0 24px rgba(6, 22, 64, 0.18);
  color: #fff;
}
[data-bs-theme="dark"] .pe-app-sidebar {
  background: linear-gradient(180deg, rgba(10, 20, 55, 0.95) 0%, rgba(4, 12, 36, 0.98) 100%) !important;
  border-right-color: rgba(59, 130, 246, 0.12);
}

/* Sidebar üst logo bandı.
   Menilo bazı düzen varyantlarında bu banda açık gövde rengi veriyor;
   daraltılmış menüde sidebar'ın tepesinde açık renkli boş bir blok
   olarak görünüyordu. Her modda sidebar gradyanını devralsın. */
.pe-app-sidebar-logo {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  background: transparent !important;
  border-top: 0 !important;
  top: 0 !important;
}
/* Logo nefes payı: tema banda sabit yükseklik (header yüksekliği) veriyor,
   logo kenarlara yapışıyordu. Yükseklik serbest bırakılıp üstte ve altta
   ~30px ek boşluk açılır (şablondaki py-3 = 16px üzerine). */
.pe-app-sidebar .pe-app-sidebar-logo {
  height: auto !important;
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

/* --- Daraltılmış menüde logo bandı ---
   Tema bu bandı `position: fixed !important` yapıyor: banda akıştan
   çıkıyor, menü onun ALTINA kayıp ikonlar logonun üstüne biniyordu; geride
   de sidebar'ın tepesinde açık renkli boş bir blok kalıyordu. Bandı akışa
   geri alıyoruz. (`html` seçicisi spesifikliği tema kuralının üstüne
   çıkarmak için gerekli.) */
html[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo {
  position: relative !important;
  top: 0 !important;
  width: auto !important;
  border-right: 0 !important;
  background: transparent !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* --- Daraltılmış menü (html[data-sidebar="icon"]) ---
   Menilo teması kendi öğelerini daraltıyor ama bizim eklediğimiz logo alt
   yazısı ve kullanıcı rozeti kapsam dışıydı; ikon genişliğine sığmayıp
   satır satır taşıyorlardı. Bu bölüm onları da daraltır. */
.bn-sidebar-logo-icon { display: none; }

html[data-sidebar="icon"] .bn-sidebar-logo-full,
html[data-sidebar="icon"] .bn-sidebar-subtitle,
html[data-sidebar="icon"] .bn-sidebar-user-text {
  display: none !important;
}
html[data-sidebar="icon"] .bn-sidebar-logo-icon {
  display: block;
}
html[data-sidebar="icon"] .pe-app-sidebar-logo {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Kullanıcı rozeti: yalnızca ikon, ortalanmış */
html[data-sidebar="icon"] .bn-sidebar-user {
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}
html[data-sidebar="icon"] .bn-sidebar-user > div {
  justify-content: center;
  padding: .5rem !important;
  gap: 0 !important;
}
/* Menü başlıkları ("Menü", "Yönetim") daralınca anlamsız kalıyor */
html[data-sidebar="icon"] .pe-menu-title {
  font-size: 0;
  height: 1px;
  margin: .75rem .75rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* Menü bağlantıları: ikon ortalı, metin gizli */
html[data-sidebar="icon"] .pe-nav-link {
  justify-content: center;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}
html[data-sidebar="icon"] .pe-nav-link .pe-nav-content {
  display: none !important;
}
html[data-sidebar="icon"] .pe-nav-icon {
  margin-right: 0 !important;
}
.pe-app-sidebar-logo::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}

/* Menü başlıkları */
.pe-menu-title {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1.5rem 1.25rem 0.5rem;
}

/* Menü link */
.pe-nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  border-radius: 12px !important;
  margin: 2px 10px;
  padding: 0.7rem 0.95rem !important;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500;
}
.pe-nav-link .pe-nav-icon {
  transition: transform 0.25s ease;
  opacity: 0.9;
}
.pe-nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  padding-left: 1.15rem !important;
}
.pe-nav-link:hover .pe-nav-icon { transform: scale(1.15); }

.pe-nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)) !important;
  box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pe-nav-link.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 20%;
  width: 4px; height: 60%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(255,255,255,0.9);
}

/* ---------- 4. Topbar (glass) ---------- */
.app-header {
  background: var(--bn-glass-bg) !important;
  backdrop-filter: blur(var(--bn-glass-blur));
  -webkit-backdrop-filter: blur(var(--bn-glass-blur));
  border-bottom: 1px solid var(--bn-glass-border);
  box-shadow: 0 1px 12px rgba(30, 64, 175, 0.05);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.app-header.sticky-scroll {
  box-shadow: 0 8px 32px rgba(30, 64, 175, 0.10);
}
.app-header .btn.icon-btn {
  border-radius: 12px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.app-header .btn.icon-btn:hover {
  background: rgba(30, 64, 175, 0.10);
  color: var(--bn-primary);
  transform: translateY(-1px);
}

/* Kullanıcı avatarı */
.app-header .avatar-item.bg-primary-subtle {
  background: var(--bn-grad-primary) !important;
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
  border: 2px solid rgba(255,255,255,0.6);
}

/* ---------- 5. Kartlar (glass) ---------- */
.card {
  background: var(--bn-surface) !important;
  backdrop-filter: blur(var(--bn-glass-blur));
  -webkit-backdrop-filter: blur(var(--bn-glass-blur));
  border: 1px solid var(--bn-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--bn-glass-shadow);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.25s ease;
  overflow: hidden;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-bs-theme="dark"] .card::before {
  background: linear-gradient(135deg, rgba(59,130,246,0.25), transparent 45%);
}

.card:hover {
  border-color: rgba(30, 64, 175, 0.25) !important;
  box-shadow: 0 20px 45px -18px rgba(30, 64, 175, 0.30);
}
.hover-lift:hover { transform: translateY(-6px); }

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--bn-border) !important;
  padding: 1.15rem 1.35rem;
}
.card-body { padding: 1.35rem; }
.card-title { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- 6. Stat kartları ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card .card-body { padding: 1.5rem 1.35rem; }
.stat-card .avatar-item {
  width: 56px !important; height: 56px !important;
  border-radius: 16px !important;
  font-size: 1.5rem;
  position: relative;
  overflow: visible;
}
.stat-card .avatar-item::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: inherit;
  filter: blur(14px);
  opacity: 0.45;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.stat-card:hover .avatar-item::after { opacity: 0.75; }
.stat-card .counter {
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  background: var(--bn-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Renkli avatar arka planları — düz renk yerine gradient */
.avatar-title.bg-warning-subtle { background: var(--bn-grad-warning) !important; color: #fff !important; }
.avatar-title.bg-info-subtle    { background: var(--bn-grad-info)    !important; color: #fff !important; }
.avatar-title.bg-success-subtle { background: var(--bn-grad-success) !important; color: #fff !important; }
.avatar-title.bg-danger-subtle  { background: var(--bn-grad-danger)  !important; color: #fff !important; }
.avatar-title.bg-primary-subtle { background: var(--bn-grad-primary) !important; color: #fff !important; }
.avatar-title.bg-secondary-subtle { background: linear-gradient(135deg, #64748b, #94a3b8) !important; color: #fff !important; }

/* ---------- 7. Butonlar ---------- */
.btn {
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.5rem 1.1rem;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
  border-width: 1.5px;
}
.btn-sm { border-radius: 10px !important; padding: 0.35rem 0.85rem; }
.btn-lg { border-radius: 14px !important; padding: 0.75rem 1.5rem; }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--bn-grad-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
}
.btn-primary:hover {
  box-shadow: 0 14px 32px -8px rgba(30, 64, 175, 0.7);
  transform: translateY(-2px);
}
.btn-success {
  background: var(--bn-grad-success) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--bn-glow-success);
}
.btn-danger {
  background: var(--bn-grad-danger) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--bn-glow-danger);
}
.btn-info {
  background: var(--bn-grad-info) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--bn-glow-info);
}
.btn-warning {
  background: var(--bn-grad-warning) !important;
  border: none !important; color: #fff !important;
  box-shadow: var(--bn-glow-warning);
}

.btn-outline-primary { border-color: rgba(30,64,175,0.4) !important; color: var(--bn-primary) !important; }
.btn-outline-primary:hover {
  background: var(--bn-grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
}
.btn-outline-secondary { border-color: rgba(100,116,139,0.35) !important; color: #64748b !important; }
.btn-outline-secondary:hover { background: #64748b !important; border-color: transparent !important; color: #fff !important; }
.btn-outline-danger { border-color: rgba(239,68,68,0.4) !important; color: #ef4444 !important; }
.btn-outline-danger:hover { background: var(--bn-grad-danger) !important; border-color: transparent !important; color: #fff !important; }

.btn-light {
  background: rgba(30, 64, 175, 0.08) !important;
  border-color: transparent !important;
  color: var(--bn-primary) !important;
}
.btn-light:hover {
  background: rgba(30, 64, 175, 0.16) !important;
  color: var(--bn-primary) !important;
}

/* Yükleniyor spinner */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1.05rem; height: 1.05rem;
  top: calc(50% - 0.525rem); left: calc(50% - 0.525rem);
  border: 2px solid #fff; border-right-color: transparent;
  border-radius: 50%; animation: bnSpin 0.6s linear infinite;
}
@keyframes bnSpin { to { transform: rotate(360deg); } }

/* ---------- 8. Rozetler ---------- */
.badge {
  font-weight: 600;
  padding: 0.4em 0.75em;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease;
}
.badge:hover { transform: translateY(-1px); }
.bg-warning-subtle.text-warning { background: rgba(251,146,60,0.14) !important; color: #d97706 !important; }
.bg-info-subtle.text-info       { background: rgba(34,211,238,0.14)  !important; color: #0891b2 !important; }
.bg-success-subtle.text-success { background: rgba(52,211,153,0.14)  !important; color: #059669 !important; }
.bg-danger-subtle.text-danger   { background: rgba(244,114,182,0.14) !important; color: #db2777 !important; }
.bg-secondary-subtle.text-secondary { background: rgba(100,116,139,0.14) !important; color: #475569 !important; }
.bg-primary-subtle.text-primary { background: rgba(30,64,175,0.14)  !important; color: var(--bn-primary) !important; }

/* ---------- 9. Tablolar ---------- */
.table {
  color: var(--bn-text);
  border-color: var(--bn-border) !important;
}
.table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-text-muted);
  border-bottom: 1px solid var(--bn-border) !important;
  padding: 0.9rem 0.85rem;
  background: transparent;
}
.table tbody td {
  padding: 0.9rem 0.85rem;
  border-color: var(--bn-border) !important;
  vertical-align: middle;
}
.table-hover tbody tr {
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.table-hover tbody tr:hover {
  background: rgba(30, 64, 175, 0.06) !important;
}

/* ---------- 10. Formlar ---------- */
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--bn-text); margin-bottom: 0.4rem; }
.form-control, .form-select {
  border-radius: 12px !important;
  border: 1.5px solid var(--bn-border) !important;
  background: var(--bn-surface) !important;
  padding: 0.55rem 0.9rem;
  color: var(--bn-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bn-primary) !important;
  box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.14) !important;
}
.form-control::placeholder { color: var(--bn-text-muted); opacity: 0.65; }

/* ---------- 11. Uyarı (alert) kutuları ---------- */
.alert {
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 1rem 1.2rem;
  backdrop-filter: blur(10px);
  animation: bnSlideDown 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.alert-success { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); color: #047857; }
.alert-info    { background: rgba(34,211,238,0.12); border-color: rgba(34,211,238,0.3); color: #0e7490; }
.alert-warning { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.3); color: #b45309; }
.alert-danger  { background: rgba(244,114,182,0.12); border-color: rgba(244,114,182,0.3); color: #9d174d; }
.alert-light   { background: rgba(30,64,175,0.06); border-color: var(--bn-border); color: var(--bn-text); }
.alert-secondary { background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.25); color: #475569; }

@keyframes bnSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 12. Breadcrumb (page-title) ---------- */
.main-breadcrumb {
  background: var(--bn-glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--bn-glass-border);
  border-radius: 16px;
  padding: 0.9rem 1.25rem;
  margin: 1rem 0 1.35rem !important;
  box-shadow: 0 4px 18px rgba(30,64,175,0.06);
}
.breadcrumb-title {
  font-weight: 700;
  font-size: 1.05rem !important;
  letter-spacing: -0.015em;
  background: var(--bn-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.breadcrumb {
  --bs-breadcrumb-divider: '›';
  font-size: 0.85rem;
  margin: 0;
}
.breadcrumb a { color: var(--bn-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--bn-primary); }
.breadcrumb-item.active { color: var(--bn-primary); font-weight: 600; }

/* ---------- 13. Sayfa girişi & reveal ---------- */
.app-wrapper .container-fluid { animation: bnFadeIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes bnFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Sayaç */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- 14. Nav pills (sekmeler) ---------- */
.nav-pills .nav-link {
  border-radius: 10px;
  color: var(--bn-text-muted);
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
.nav-pills .nav-link:hover { color: var(--bn-primary); background: rgba(30,64,175,0.08); }
.nav-pills .nav-link.active {
  background: var(--bn-grad-primary) !important;
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
}

.btn-group .btn-outline-secondary.active {
  background: var(--bn-grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---------- 15. Login sayfası özel ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
}
.auth-card {
  max-width: 440px;
  width: 100%;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 30px 60px -20px rgba(30, 64, 175, 0.35);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bn-grad-primary);
}
[data-bs-theme="dark"] .auth-card {
  background: rgba(24, 27, 52, 0.75);
  border-color: rgba(59, 130, 246, 0.2);
}

/* ---------- 16. Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(30,64,175,0.4), rgba(59,130,246,0.35));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(30,64,175,0.7), rgba(59,130,246,0.6));
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Sidebar için beyaz scrollbar */
.simplebar-scrollbar::before { background: rgba(255,255,255,0.35) !important; }

/* ---------- 17. Zaman çizelgesi (timeline) ---------- */
.card ul.list-unstyled li .avatar-item {
  border-radius: 12px !important;
  background: var(--bn-grad-primary) !important;
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
}

/* ---------- 18. Metin renkleri (dark mode uyumu) ---------- */
[data-bs-theme="dark"] body { color: var(--bn-text); }
[data-bs-theme="dark"] .text-muted { color: var(--bn-text-muted) !important; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: rgba(59,130,246,0.08) !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
  background: rgba(15, 12, 40, 0.5) !important;
  color: var(--bn-text);
}
[data-bs-theme="dark"] .btn-light {
  background: rgba(59,130,246,0.12) !important;
  color: var(--bn-primary-2) !important;
}
[data-bs-theme="dark"] .btn-light:hover {
  background: rgba(59,130,246,0.22) !important;
  color: var(--bn-primary-2) !important;
}
[data-bs-theme="dark"] .alert-light { background: rgba(59,130,246,0.08); color: var(--bn-text); }
[data-bs-theme="dark"] .dropdown-menu {
  background: rgba(24,27,52,0.95);
  border-color: var(--bn-border);
  backdrop-filter: blur(16px);
}
[data-bs-theme="dark"] .dropdown-item { color: var(--bn-text); }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(59,130,246,0.1); color: var(--bn-primary-2); }

/* Dropdown genel modernizasyon */
.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid var(--bn-border);
  box-shadow: 0 20px 40px -10px rgba(30,64,175,0.2);
  padding: 0.5rem;
  animation: bnDropIn 0.2s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.dropdown-item {
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.dropdown-item:hover { background: rgba(30,64,175,0.08); color: var(--bn-primary); }
@keyframes bnDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 19. Footer ---------- */


/* Makbuz başlığındaki kurum logosu */
.bn-makbuz-logo { height: 54px !important; width: auto !important; max-width: 150px; }

/* Ekranda ikinci nüsha gereksiz gürültü — yalnızca kâğıda basılır.
   (Yazdırma kuralları @media print içinde onu geri açar.) */
.bn-makbuz > .bn-nusha:nth-child(n+2),
.bn-makbuz > .bn-kesme { display: none; }
.bn-nusha-etiket { display: none; }

/* ---------- Süreç şeridi (talep detayı) ----------
   Onay → Satın Alma → Ödeme → Teslim. Kullanıcı "şu an ne oluyor" sorusunu
   tek bakışta cevaplayabilmeli; eskiden bu bilgi tabloya dağılmıştı. */
.bn-surec {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.bn-surec-adim {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 120px;
  position: relative;
  padding: 0.35rem 0;
}
/* Adımlar arası bağlantı çizgisi */
.bn-surec-adim:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--bn-border, #e5e7eb);
  margin: 0 0.5rem;
}
.bn-surec-nokta {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  background: var(--bn-border, #e5e7eb);
  color: var(--bn-text-muted, #6b7280);
}
.bn-surec-etiket { font-size: 0.82rem; color: var(--bn-text-muted, #6b7280); }

.bn-surec-done .bn-surec-nokta { background: #16a34a; color: #fff; }
.bn-surec-done .bn-surec-etiket { color: #16a34a; font-weight: 600; }
.bn-surec-done:not(:last-child)::after { background: #16a34a; }

.bn-surec-active .bn-surec-nokta {
  background: var(--bn-primary, #0a1e5c);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(10, 30, 92, 0.15);
}
.bn-surec-active .bn-surec-etiket {
  color: var(--bn-primary, #0a1e5c);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .bn-surec-adim { min-width: 50%; }
  .bn-surec-adim::after { display: none !important; }
}

/* Modal her zaman en üstte olsun.
   Modal, sayfa düzeninin (flex/position:relative olan .app-wrapper) içinde
   yer aldığı için kendi yığın bağlamına takılıp karartma katmanının ALTINDA
   kalabiliyordu: pencere açılıyor ama soluk görünüyor ve tıklanamıyordu.
   bilnet-ui.js modalleri <body> altına taşır; bu kurallar da sırayı garanti
   altına alır. */
.modal {
  z-index: 1200 !important;
  /* Konumlandırma da zorlanır: tema/düzen kuralları modalı sayfa akışına
     düşürünce pencere karartma katmanı olmadan, yarı görünür açılıyordu. */
  position: fixed !important;
  inset: 0 !important;
}
.modal-backdrop {
  z-index: 1190 !important;
  /* Karartma her zaman görünür olsun: tema bu değişkeni açık renge
     çekerse pencere "açık ama arkası normal" gibi duruyordu. */
  background-color: #000 !important;
}
.modal-backdrop.show { opacity: 0.5 !important; }
.modal-dialog { z-index: 1201; }

/* Geçiş sadeleştirmesi.
   Bootstrap "fade" ile diyaloğu 50px yukarıdan indirir ve bunu "show"
   sınıfıyla yapar. Geçiş olayı bir sebeple gelmezse pencere YUKARIDA ve
   yarı görünür takılı kalıyordu — kullanıcı hiçbir şey yapamıyordu.
   Diyaloğu kaydırmıyoruz: açılışta doğrudan yerinde olur. */
.modal.fade .modal-dialog {
  transform: none !important;
  transition: opacity 0.15s linear !important;
}
/* Öğeye "show" hiç eklenemese bile pencere görünür ve kullanılabilir kalır */
.modal.fade .modal-dialog { opacity: 1 !important; }

/* Seçim kutucukları — varsayılan kenarlık açık zeminde neredeyse
   görünmüyordu, kullanıcı işaretleyecek kutuyu bulamıyordu. */
.bn-secim-kutu {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--bn-text-muted, #6b7280);
  cursor: pointer;
}
.bn-secim-kutu:hover { border-color: var(--bn-primary, #0a1e5c); }
.bn-secim-kutu:checked {
  background-color: var(--bn-primary, #0a1e5c);
  border-color: var(--bn-primary, #0a1e5c);
}
.bn-secim-kutu:focus {
  box-shadow: 0 0 0 0.2rem rgba(10, 30, 92, 0.25);
  border-color: var(--bn-primary, #0a1e5c);
}

/* ---------- Mobil: tabloları KART düzenine çevir ----------
   Telefonda 6-8 sütunlu tablo ekrana sığmıyordu; yatay kaydırma çubuğuyla
   gezmek gerekiyordu ve sağdaki "Detay" butonu görünmüyordu. Burada tablo
   satırları birer karta dönüşüyor: her hücre kendi başlığıyla (data-label)
   alt alta diziliyor, yatay kaydırma tamamen kalkıyor.

   Kullanımı: <td data-label="Başlık">. data-label'ı olmayan hücre (buton
   sütunu gibi) sadece etiketsiz basılır. */
@media (max-width: 767.98px) {
  .bn-table-cards .table-responsive { overflow-x: visible; }
  .bn-table-cards table,
  .bn-table-cards tbody,
  .bn-table-cards tr,
  .bn-table-cards td { display: block; width: 100%; }
  .bn-table-cards thead { display: none; }

  .bn-table-cards tbody tr {
    border: 1px solid var(--bn-border);
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--bn-surface, #fff);
  }
  .bn-table-cards tbody tr:last-child { margin-bottom: 0; }

  .bn-table-cards td {
    border: 0 !important;
    padding: 0.3rem 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: right;
    min-height: 0;
  }
  .bn-table-cards td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bn-text-muted);
    text-align: left;
    flex: 0 0 38%;
  }
  /* Etiketi olmayan hücre (işlem butonları) tam genişlik alsın */
  .bn-table-cards td:not([data-label]) {
    justify-content: stretch;
    text-align: left;
    padding-top: 0.6rem !important;
  }
  .bn-table-cards td:not([data-label]) > * { width: 100%; }
  .bn-table-cards td:not([data-label]) .btn { width: 100%; }
  .bn-table-cards td:not([data-label]) .d-inline-flex { display: flex !important; }

  /* Kartın ilk hücresi (kod) başlık gibi dursun */
  .bn-table-cards tbody tr td:first-child {
    font-size: 1rem;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.35rem;
    border-bottom: 1px dashed var(--bn-border) !important;
  }
  /* "Kayıt bulunamadı" gibi tek hücrelik satırlar kart olmasın */
  .bn-table-cards td[colspan] {
    display: block;
    text-align: center;
  }
  .bn-table-cards td[colspan]::before { content: none; }

  /* Sayaç kartı mobilde daralınca ok işareti yer kaplamasın */
  .bn-stat-arrow { display: none; }

  /* Sekme şeridi (Satın Alacaklarım / Ekibimin İşleri / …): beş düğme
     telefona sığmıyor, düğmeler eziliyor ya da kart taşıyordu. Şerit
     yatayda KENDİ İÇİNDE kaydırılır; sayfa yatay kaymaz. */
  .card-body > .btn-group[role="group"] {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .card-body > .btn-group[role="group"]::-webkit-scrollbar { display: none; }
  .card-body > .btn-group[role="group"] > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.bn-stat-link { color: inherit; }
.bn-stat-link:hover .bn-stat-arrow { transform: translateX(3px); }
.bn-stat-arrow { transition: transform 0.2s ease; }
.min-w-0 { min-width: 0; }

/* ---------- Mobil: metin taşmaları ----------
   Dar ekranda sayaç kartlarında etiket kelime ORTASINDAN bölünüyordu
   ("İnceleniyo / r", "Tamamlan / dı"). Sebep: ikon + ok yan yana durunca
   metne ~60px kalıyor ve "İnceleniyor" oraya sığmıyor. Çözüm etiketi tam
   genişliğe almak; kelime bölme de her yerde kapatılır. */
@media (max-width: 991.98px) {
  .stat-card .card-body {
    flex-wrap: wrap;
    padding: 1rem 1rem 0.9rem !important;
    gap: 0.65rem !important;
  }
  /* İkon ve sayı üstte yan yana, etiket altta tam genişlikte */
  .stat-card .card-body > .min-w-0 {
    flex: 1 1 100%;
    min-width: 100%;
    order: 2;
  }
  .stat-card .avatar-item { order: 1; flex: 0 0 auto; }
  .stat-card .counter { font-size: 1.6rem; margin-bottom: 0.15rem !important; }
}
/* Kelime ortasından bölme her ölçüde kapalı: Türkçe etiketlerde okunmaz
   parçalar oluşuyor. Sığmıyorsa kelimeler arasından alt satıra insin. */
.stat-card p, .bn-stat-link p,
.bn-bottom-nav__item span,
.bn-hero-title, .bn-hero-eyebrow {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Alt bar her zaman sayfanın EN ALTINDA dursun (sticky footer).
   Sorun: içerik kısa olduğunda (tek satırlık talep listesi gibi) footer
   ekranın ortasında asılı kalıyor, altında boşluk oluyordu.
   Çözüm: .app-wrapper en az ekran yüksekliği kadar olur, içerik alanı
   esner ve footer aşağı itilir. İçerik uzunsa footer normal akışta sonda
   kalır — kaydırınca yine en altta görünür.

   Yükseklik hesabı: üst boşluk (sabit başlığın altına inmek için) margin
   ile veriliyor ve min-height ondan ARINDIRILMIŞ yükseklik alıyor —
   margin + min-height = tam 100vh. Temanın kendi kuralı min-height'tan
   footer yüksekliğini de düşüyordu; footer o kadar yukarıda kalıp altında
   boşluk bırakıyordu. Aynı değişken kullanıldığı için formül her ekran
   boyutunda tutar. */
.app-wrapper {
  display: flex !important;
  flex-direction: column !important;
  /* Tema "space-between" veriyor; iki çocuk arasında boşluk dağıtınca
     yükseklik hesabı öngörülemez oluyordu. Hizalamayı footer'ın
     margin-top:auto değeri yapsın. */
  justify-content: flex-start !important;
  margin-block-start: var(--pe-app-header-height, 74px) !important;
  min-height: calc(100vh - var(--pe-app-header-height, 74px)) !important;
  padding-block-start: 1rem;
  padding-block-end: 0 !important;
}
.app-wrapper > .container-fluid { flex: 1 0 auto; }
.app-wrapper > .footer { flex-shrink: 0; margin-top: auto !important; }

.footer {
  padding: 1.5rem 0;
  color: var(--bn-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--bn-border);
  margin-top: 2rem;
  /* Menilo, footer'ın .app-wrapper'ın KARDEŞİ olduğunu varsayıp ona da
     sidebar genişliği kadar margin veriyor. Bizim düzende footer
     .app-wrapper'ın İÇİNDE, dolayısıyla kayma iki kez uygulanıyor ve
     alt bar sağa kayıp baş tarafı boş kalıyordu. */
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0;
}

/* ---------- 20. Hero (dashboard karşılama) ---------- */
.bn-hero {
  background: var(--bn-grad-primary);
  color: #fff !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.35rem;
  border: none !important;
  box-shadow: 0 24px 50px -18px rgba(30,64,175,0.5);
}
.bn-hero::before,
.bn-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bn-hero::before {
  width: 260px; height: 260px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
  animation: bnPulse 6s ease-in-out infinite;
}
.bn-hero::after {
  width: 180px; height: 180px;
  bottom: -50px; left: 20%;
  background: radial-gradient(circle, rgba(244,121,32,0.45) 0%, transparent 60%);
  animation: bnPulse 8s ease-in-out infinite 1s;
}
@keyframes bnPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.bn-hero > * { position: relative; z-index: 1; }
.bn-hero .bn-hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 600;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.bn-hero .bn-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.35rem;
  line-height: 1.2;
  /* Menilo temasının h1 için verdiği koyu rengi yener; ayrıca herhangi bir
     gradient-text kuralı devreye girerse (heading gradient), transparent
     fill devre dışı bırakılır */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.bn-hero .bn-hero-lead {
  opacity: 0.92;
  max-width: 640px;
  margin: 0;
  color: #fff !important;
}
.bn-hero .btn-light {
  background: rgba(255,255,255,0.95) !important;
  color: var(--bn-primary) !important;
  font-weight: 700;
}
.bn-hero .btn-light:hover {
  background: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.bn-hero .btn-outline-light {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}
.bn-hero .btn-outline-light:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #fff !important;
}

/* ---------- 21. Erişilebilirlik ---------- */
*:focus-visible { outline: 2px solid var(--bn-primary); outline-offset: 2px; border-radius: 6px; }

/* ---------- 22. Toast merkezi ---------- */
.bn-toast-stack {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.bn-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bn-glass-bg);
  backdrop-filter: blur(var(--bn-glass-blur));
  -webkit-backdrop-filter: blur(var(--bn-glass-blur));
  border: 1px solid var(--bn-glass-border);
  box-shadow: var(--bn-glass-shadow), 0 2px 10px rgba(0,0,0,0.08);
  color: var(--bn-text);
  font-size: 14px;
  line-height: 1.4;
}
.bn-toast__icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.bn-toast__body { flex: 1; }
.bn-toast__close {
  background: transparent; border: 0; padding: 0 2px;
  color: var(--bn-text-muted); cursor: pointer; font-size: 18px;
}
.bn-toast__close:hover { color: var(--bn-text); }
.bn-toast--success { border-left: 4px solid #34d399; }
.bn-toast--success .bn-toast__icon { color: #10b981; }
.bn-toast--info { border-left: 4px solid #0ea5e9; }
.bn-toast--info .bn-toast__icon { color: #0ea5e9; }
.bn-toast--warning { border-left: 4px solid #fb923c; }
.bn-toast--warning .bn-toast__icon { color: #f59e0b; }
.bn-toast--danger { border-left: 4px solid #ef4444; }
.bn-toast--danger .bn-toast__icon { color: #ef4444; }

/* Alpine transition sınıfları */
.bn-toast-enter { transition: transform .3s ease, opacity .3s ease; }
.bn-toast-enter-start { transform: translateX(20px); opacity: 0; }
.bn-toast-enter-end { transform: translateX(0); opacity: 1; }
.bn-toast-leave { transition: transform .25s ease, opacity .25s ease; }
.bn-toast-leave-start { transform: translateX(0); opacity: 1; }
.bn-toast-leave-end { transform: translateX(20px); opacity: 0; }

/* ---------- 23. Skeleton loader ---------- */
.bn-skeleton {
  display: block;
  background: linear-gradient(90deg,
    rgba(30, 64, 175, 0.08) 0%,
    rgba(30, 64, 175, 0.18) 50%,
    rgba(30, 64, 175, 0.08) 100%);
  background-size: 200% 100%;
  animation: bn-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
[data-bs-theme="dark"] .bn-skeleton {
  background: linear-gradient(90deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(59, 130, 246, 0.20) 50%,
    rgba(59, 130, 246, 0.08) 100%);
  background-size: 200% 100%;
}
.bn-skeleton--line { height: 16px; width: 100%; }
.bn-skeleton-row td { padding: 14px 16px !important; }
.bn-skeleton-card { padding: 16px; }
@keyframes bn-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-skeleton { animation: none; }
}

/* HTMX indicator kısayolu — hx-indicator ile hedeflenen eleman görünür olur */
.htmx-indicator { opacity: 0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Tablo iskeleti: opacity yetmiyor — görünmez olsa bile satır yüksekliğini
   kaplamaya devam ediyor, liste boşken sayfada kocaman bir boşluk bırakıyordu.
   İstek sırasında görünür, dışında tamamen kaldırılır. */
#req-list-skel { display: none; }
#req-list-skel.htmx-request { display: table-row-group; opacity: 1; }

/* View Transitions API — HTMX hx-boost ile smooth sayfa geçişleri
   (Chrome/Edge 111+, Safari 18+; desteklemeyen tarayıcı bunu yok sayar) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
::view-transition-old(root) { animation-name: bn-vt-fade-out; }
::view-transition-new(root) { animation-name: bn-vt-fade-in; }
@keyframes bn-vt-fade-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px); } }
@keyframes bn-vt-fade-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Mobil bottom-nav ---------- */
.bn-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: var(--bn-glass-bg);
  backdrop-filter: blur(var(--bn-glass-blur));
  -webkit-backdrop-filter: blur(var(--bn-glass-blur));
  border-top: 1px solid var(--bn-glass-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: stretch;
  box-shadow: 0 -6px 24px rgba(30, 64, 175, 0.10);
}
@media (max-width: 991.98px) {
  .bn-bottom-nav { display: flex; }
  /* İçerik için alt padding — bottom-nav sayfayı örtmesin */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Menilo footer'ı mobilde bottom-nav ile çakışmasın */
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}
.bn-bottom-nav__item {
  /* flex-basis 0 + min-width 0 ŞART: "Talepler"/"Satın Al" gibi uzun
     etiketler öğeyi kendi genişliğine zorlayıp bar'ı taşırıyordu. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 56px;
  color: var(--bn-text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.bn-bottom-nav__item i { font-size: 22px; line-height: 1; }
.bn-bottom-nav__item:hover { color: var(--bn-primary); background: rgba(30, 64, 175, 0.06); }
.bn-bottom-nav__item.is-active {
  color: var(--bn-primary);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.10), rgba(30, 64, 175, 0));
}
.bn-bottom-nav__item.is-active i {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(30, 64, 175, 0.4));
}
/* Merkez "yeni talep" FAB butonu */
.bn-bottom-nav__item--fab { position: relative; }
.bn-bottom-nav__fab {
  width: 46px; height: 46px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bn-grad-primary);
  color: #fff !important;
  box-shadow: var(--bn-glow-primary);
  margin-top: -22px; /* üste taş */
  border: 4px solid var(--bn-surface-solid);
}
[data-bs-theme="dark"] .bn-bottom-nav__fab { border-color: #1a1e3a; }
.bn-bottom-nav__fab i { font-size: 24px; }
.bn-bottom-nav__item--fab { font-weight: 600; }
/* Etiket tek satırda kalsın; sığmıyorsa kısalt — alt satıra taşınca bar'ın
   yüksekliği değişiyor ve ikonlar hizasını kaybediyordu. */
.bn-bottom-nav__item > span:not(.bn-bottom-nav__fab) {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Çok dar telefonlarda (≤380px) beş sekme için ölçüler küçülür */
@media (max-width: 380px) {
  .bn-bottom-nav { padding-left: 0; padding-right: 0; }
  .bn-bottom-nav__item { font-size: 10px; padding: 6px 2px; gap: 1px; }
  .bn-bottom-nav__item i { font-size: 20px; }
  .bn-bottom-nav__fab { width: 42px; height: 42px; border-radius: 14px; }
}

/* ---------- 24. PWA safe-area (iOS notch, Android gesture bar) ---------- */
/* Notch bölgesi rengi sayfayla eş görünsün — display:standalone modunda önemli */
html { background: #f5f4ff; }
[data-bs-theme="dark"] { background: #0f1020; }

/* Genel yan boşluklar (landscape iPhone notch için) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Offline sayfa & login gibi kapak sayfalarında üst/alt notch payı.
   NOT: Yatay padding'i override etmiyoruz — 15. bölümdeki `.auth-page`
   `padding: 1.5rem` kural blogundan yatay değer korunsun ki flex merkezleme
   tutarlı çalışsın. Sadece dikeyi safe-area ile büyütüyoruz. */
.auth-page {
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}

/* ============================================================
   YAZDIRMA KURALLARI — DOSYANIN EN SONUNDA OLMALI
   Sticky-footer kuralları da !important kullanıyor; eşit
   özgüllükte sonra gelen kazanır. Bu blok yukarıdayken
   .app-wrapper min-height'i yazdırmada da etkili kalıyor ve
   arkada boş bir sayfa oluşuyordu.
   ============================================================ */
/* ---------- Yazdırma: yalnızca makbuz kâğıda çıksın ----------
   Menü, üst bar, alt bar ve buton çubuğu kâğıtta yer kaplamamalı; makbuz
   sayfanın tamamını kullanmalı. */
@media print {
  /* Sayfa çerçevesine ait ne varsa gizle. Tema sidebar için birden çok
     seçici kullanıyor; hepsini kapsamak gerekiyor, yoksa kâğıdın solunda
     boş bir sütun kalıyor ve makbuz ikinci sayfaya taşıyor. */
  .app-header, .app-sidebar, .pe-app-sidebar, #layout-wrapper > aside,
  .footer, .bn-bottom-nav, .d-print-none, .page-title-box,
  #sidebar-backdrop, .bn-toast-kutu, .breadcrumb, nav[aria-label] {
    display: none !important;
  }

  /* Sticky-footer kuralları yazdırmada geçersiz olmalı: min-height ve flex
     yüzünden makbuz bir tam sayfa yükseklik kaplıyor, arkasından ikinci
     boş sayfa çıkıyordu. */
  #layout-wrapper, .app-wrapper, .app-wrapper > .container-fluid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  .bn-makbuz {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    break-inside: auto;
  }
  .bn-makbuz .card-body { padding: 0 !important; }
  /* Logo kâğıtta soluk basılıyordu: tarayıcı arka plan/görsel renklerini
     "mürekkep tasarrufu" için açıyor. Görsele de exact vermek gerekiyor. */
  .bn-makbuz-logo {
    height: 38px !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .bn-makbuz img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Kâğıtta tipografi ekrandan küçük olmalı: A5 YATAY'a (210×148mm) tek
     parça sığmalı ki A4'e iki makbuz basılabilsin. Ekran ölçüleri
     basılınca hem iri duruyor hem ikinci sayfaya taşıyordu. */
  .bn-makbuz { font-size: 9pt; line-height: 1.25; }
  .bn-makbuz .fs-12, .bn-makbuz .fs-13 { font-size: 7pt !important; }
  .bn-makbuz .fw-bold, .bn-makbuz .fs-5 { font-size: 10pt !important; }
  .bn-makbuz table { font-size: 8pt; }
  .bn-makbuz th, .bn-makbuz td { padding: 0.15rem 0.3rem !important; }
  .bn-makbuz p { margin-bottom: 0.35rem !important; }
  .bn-makbuz .mb-2, .bn-makbuz .mb-3 { margin-bottom: 0.35rem !important; }
  .bn-makbuz .mt-2, .bn-makbuz .mt-3 { margin-top: 0.35rem !important; }
  .bn-makbuz .pb-2 { padding-bottom: 0.25rem !important; }
  .bn-makbuz .pt-2 { padding-top: 0.25rem !important; }
  .bn-makbuz .g-2 > *, .bn-makbuz .g-3 > * { padding-top: 0.25rem !important; }
  /* İmza boşluğu: ıslak imza için yeterli ama sayfayı taşırmayan yükseklik */
  .bn-makbuz .bn-imza { margin-top: 22px !important; }

  /* --- İKİ NÜSHA ---
     Belge her zaman iki kez basılır: biri muhasebede kalır, biri karşı
     tarafa verilir. Kısa listede ikisi aynı A4'e sığar ve ortadan yırtılır;
     uzun listede her nüsha kendi sayfasına geçer. Tek nüsha + boş sayfa
     kombinasyonu hiçbir durumda oluşmaz. */
  /* Ekranda gizlenen ikinci nüsha ve kesme çizgisi kâğıtta görünür.
     display değeri nüsha tipine göre AYRI verilir: tek sayfada iki nüsha
     flex kolonu OLMAK ZORUNDA (boşluk dikeyde dağıtılsın diye). Buraya
     block dayatmak alttaki nüshanın dağıtımını bozuyor, içerik üste
     yığılıp sayfanın altında boşluk bırakıyordu. */
  .bn-ayri-sayfa > .bn-nusha:nth-child(n+2) { display: block !important; }
  .bn-makbuz > .bn-kesme { display: block !important; }
  .bn-nusha-etiket { display: block !important; }

  .bn-nusha {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .bn-nusha .card-body { padding: 0 !important; }

  /* Kısa liste: sayfa TAM ORTADAN kesildiğinde her iki parça da kendi
     içinde eksiksiz bir makbuz olmalı. Bu yüzden her nüshaya sabit yarım
     sayfa yüksekliği verilir (A4 297mm − 2×10mm kenar = 277mm; 138+138).
     Artan boşluk üstte toplanmasın diye içerik dikeyde yayılır ve fazlalık
     ürün tablosuna verilir.
     display:flex burada !important ile veriliyor — yukarıdaki "ikinci
     nüshayı göster" kuralı daha spesifik olduğu için aksi hâlde alttaki
     nüsha block kalıp dağıtımı kaybediyor. */
  .bn-tek-sayfa > .bn-nusha {
    height: 138mm;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
  }
  /* Makas çizgisinin iki yanında ~1cm nefes payı: kesim payı ve yazıcı
     toleransı yüzünden çizgi metne değecek kadar yakın kalıyordu. */
  .bn-tek-sayfa > .bn-nusha:first-child { padding-bottom: 10mm !important; }
  .bn-tek-sayfa > .bn-nusha:last-child { padding-top: 10mm !important; }
  .bn-tek-sayfa .bn-nusha .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Boşluk ürün tablosunda kullanılsın: satırlar ferahlasın */
  .bn-tek-sayfa .bn-nusha .table-responsive { flex: 1 1 auto; }
  .bn-tek-sayfa .bn-nusha tbody td { padding: 0.45rem 0.3rem !important; }
  /* İmza bloğu her zaman alta yaslansın */
  .bn-tek-sayfa .bn-nusha .row.g-3 { margin-top: auto !important; }

  .bn-tek-sayfa { break-inside: avoid; page-break-inside: avoid; }

  /* Uzun liste: birinci nüshadan sonra sayfa atla, sonuncudan sonra ATLAMA
     (yoksa arkada boş bir sayfa kalıyor) */
  .bn-ayri-sayfa > .bn-nusha { break-after: page; page-break-after: always; }
  .bn-ayri-sayfa > .bn-nusha:last-child {
    break-after: auto; page-break-after: auto;
  }

  /* Kesme çizgisi — iki nüshanın tam ortasında, sayfa buradan ikiye ayrılır.
     Nüshalar sabit yükseklikte olduğu için çizgi kendiliğinden ortaya düşer;
     kendisi yer kaplamamalı (height:0). */
  .bn-kesme {
    border-top: 1px dashed #9ca3af;
    margin: 0;
    text-align: center;
    height: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bn-kesme span {
    position: relative;
    top: -7px;
    background: #fff;
    padding: 0 6px;
    font-size: 7pt;
    color: #9ca3af;
  }
  .bn-nusha-etiket {
    font-size: 7pt;
    letter-spacing: 0.08em;
    color: #9ca3af;
    text-align: right;
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  /* Üstteki nüshanın tepesinde fazla boşluk kalmasın: kart ve gövde
     dolgularının tamamı yazdırmada sıfırlanır. */
  .bn-makbuz, .bn-makbuz > .bn-nusha:first-child { margin-top: 0 !important; }
  .bn-makbuz .card-body:first-child { padding-top: 0 !important; }
  /* Kâğıtta arka plan renkleri basılsın (tablo başlıkları, toplam satırı) */
  .bn-makbuz, .bn-makbuz table, .bn-makbuz thead, .bn-makbuz tfoot,
  .bn-makbuz .table-light, .bn-makbuz .alert {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Satır ve imza bloğu sayfa arasında bölünmesin */
  .bn-makbuz tr, .bn-makbuz .row { break-inside: avoid; }
  .bn-makbuz .table-responsive { overflow: visible !important; }
  /* Makbuz şablonu bunu kendi <style>'ında aynı değerle tekrar tanımlar;
     ikisi ayrışırsa nüsha yükseklikleri (138mm) sayfaya sığmaz. */
  @page { margin: 10mm 14mm; }
}