/* ==========================================================================
   Nymagro Ticaret Paneli — Görsel Tasarım Sistemi
   --------------------------------------------------------------------------
   Mobile-first. Koyu tema varsayılan, açık tema body[data-theme="acik"] ile.
   Renkler HER ZAMAN değişken üzerinden kullanılır; bileşen CSS'ine ham hex
   yazılmaz (istisna: anlam taşıyan success/danger/warning sabitleri).
   ========================================================================== */

/* ── 1. Tema değişkenleri ────────────────────────────────────────────── */
:root {
  --surface: #0d0d1a;
  --surface-2: rgba(255, 255, 255, .035);   /* tablo başlığı / satır hover gibi hafif yükselti */
  --ink: #1a1a2e;
  --card-bg: rgba(255, 255, 255, .045);
  --input-bg: rgba(255, 255, 255, .055);
  --border: rgba(255, 255, 255, .08);
  --border2: rgba(255, 255, 255, .14);

  --accent: #e94560;
  --accent2: #c73652;
  --glow: rgba(233, 69, 96, .4);
  --accent-soft: rgba(233, 69, 96, .14);

  --brand: #0d623a;          /* kurumsal yeşil — yalnızca logo/marka alanında */
  --brand2: #d97a0c;

  --gold: #f5a623;
  --mint: #0f9b8e;
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #f39c12;
  --info: #3b82f6;

  --text: #e8e8f0;
  --text2: #b0b0c8;
  --muted: #9797bd;   /* eskisi #7a7a9a; kart yüzeylerinde ~4.2:1 kontrastla WCAG AA'yı geçmiyordu, okunmuyordu */

  --sidebar-w: 230px;
  --topbar-h: 60px;
  --bnav-h: 68px;
  --bnav-bg: #12121e;

  --radius: 14px;
  --rsm: 9px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body[data-theme="acik"] {
  --surface: #f0f2f5;
  --surface-2: #f8fafc;
  --ink: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --border: rgba(0, 0, 0, .08);
  --border2: rgba(0, 0, 0, .15);
  --text: #1a1a2e;
  --text2: #4a5568;
  --muted: #64748b;
  --bnav-bg: #ffffff;
}

/* ── 2. Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--surface);
  color: var(--text);
  min-height: 100dvh;
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

h1, .h1, .page-title, .modal-title, .brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}
h1, .h1 { font-weight: 900; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── 3. Animasyonlar ─────────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse    { from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.25); } }
@keyframes tapPop   { 0% { transform: scale(1); } 40% { transform: scale(.91); } 100% { transform: scale(1); } }
@keyframes slideUp  { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4. Sayfa iskeleti ───────────────────────────────────────────────── */
.app-shell { min-height: 100dvh; }

.main-wrap {
  margin-left: var(--sidebar-w);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-content { padding: 24px 28px; flex: 1; }

/* ── 4.1 Masaüstü kenar çubuğu ───────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: rgba(20, 20, 36, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
  padding: 22px 13px;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
body[data-theme="acik"] .sidebar {
  background: rgba(255, 255, 255, .97);
  box-shadow: 1px 0 14px rgba(0, 0, 0, .06);
}

.brand-icon {
  width: 38px; height: 38px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(160deg, var(--brand), var(--brand2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  box-shadow: 0 4px 14px rgba(13, 98, 58, .38);
}
.brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  margin: 0 -6px; padding: 0 6px;
}
.sidebar-nav ul { list-style: none; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--rsm);
  color: var(--text2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s;
  border: none; background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--card-bg); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--accent);
}
.nav-item i.nav-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.nav-item .nav-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-caret { font-size: 10px; opacity: .6; transition: transform .25s; }
.nav-item[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-group { list-style: none; overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.22,1,.36,1); }
.nav-group.open { max-height: 560px; }
/* Alt başlıklar üst menünün ikonuyla aynı hizada başlar: ana öğe de 12px
   padding ile ikonunu oraya koyuyor. Akışta yer kaplayan bir madde işareti
   metni sağa iteceği için aktif göstergesi .nav-item.active ile aynı
   şekilde konumdan bağımsız (absolute) sol çubuk olarak veriliyor. */
.nav-sub {
  position: relative;
  display: flex; align-items: center;
  padding: 8px 12px; margin-bottom: 1px;
  border-radius: var(--rsm);
  color: var(--muted); font-size: 12.5px;
  transition: background .15s, color .15s;
}
.nav-sub:hover { background: var(--card-bg); color: var(--text2); }
.nav-sub.active { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.nav-sub.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--accent);
}

.nav-sub.is-highlight {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 700;
  margin: 6px 0 8px; padding: 9px 12px;
  box-shadow: 0 6px 16px rgba(13, 98, 58, .3);
}
.nav-sub.is-highlight:hover { color: #fff; }

.nav-divider { height: 1px; background: var(--border); margin: 8px 6px; }

/* Aktif şirket / dönem kutusu */
.tenant-box {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--rsm);
  background: var(--card-bg); border: 1px solid var(--border);
  margin-bottom: 8px;
}
.tenant-box-top { margin-bottom: 18px; }
.tenant-mark { width: 3px; align-self: stretch; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.tenant-info { min-width: 0; flex: 1; }
.tenant-company {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.tenant-period {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); margin-top: 2px; min-width: 0;
}
.tenant-period span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-menu-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--text2);
  transition: all .18s; cursor: pointer;
}
.tenant-menu-btn:hover, .tenant-menu-btn[aria-expanded="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ── 4.2 Masaüstü üst bar ────────────────────────────────────────────── */
.top-bar {
  height: var(--topbar-h);
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 28px;
  background: rgba(13, 13, 26, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
body[data-theme="acik"] .top-bar { background: rgba(255, 255, 255, .88); }

.top-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 19px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.top-title i { color: var(--accent); font-size: 16px; }
.top-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 38px; height: 38px; border-radius: var(--rsm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text2); font-size: 15px; cursor: pointer;
  transition: all .18s; position: relative;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn:active { animation: tapPop .2s ease; }
.icon-btn .dot-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 17px; text-align: center;
}

/* Profil menüsü */
.profile-wrap { position: relative; }
.profile-btn {
  display: flex; align-items: center; gap: 9px; max-width: 220px;
  padding: 4px 10px 4px 4px; border-radius: var(--rsm);
  background: var(--card-bg); border: 1px solid var(--border);
  cursor: pointer; transition: all .18s;
}
.profile-btn:hover { border-color: var(--accent); }
.profile-avatar {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-meta { text-align: left; min-width: 0; overflow: hidden; }
.profile-name, .profile-role {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2; }
.profile-role { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.profile-caret { font-size: 10px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.profile-btn[aria-expanded="true"] .profile-caret { transform: rotate(180deg); }

.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 250px;
  background: var(--ink); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  display: none; z-index: 999;
  animation: modalPop .2s cubic-bezier(.22,1,.36,1);
}
body[data-theme="acik"] .profile-menu { box-shadow: 0 14px 38px rgba(0, 0, 0, .16); }
.profile-menu.show { display: block; }
.pm-head {
  display: flex; align-items: center; gap: 11px; padding: 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  min-width: 0;
}
.pm-head .profile-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; flex-shrink: 0; }
.pm-head-meta { min-width: 0; overflow: hidden; }
.pm-head-name, .pm-head-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-head-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pm-head-role { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pm-item {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  transition: background .14s, color .14s; min-height: 44px;
}
.pm-item:hover { background: var(--card-bg); color: var(--text); }
.pm-item i { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--card-bg); flex-shrink: 0; }
.pm-item.is-danger { border-top: 1px solid var(--border); color: var(--danger); }
.pm-item.is-danger i { background: rgba(231, 76, 60, .14); color: var(--danger); }

/* ── 4.3 Mobil üst bar ───────────────────────────────────────────────── */
.mobile-topbar {
  display: none;
  position: sticky; top: 0; z-index: 150;
  align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--safe-top) + 9px) 14px 9px;
  background: rgba(13, 13, 26, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
body[data-theme="acik"] .mobile-topbar { background: rgba(255, 255, 255, .92); }
.mt-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mt-brand .brand-icon { width: 32px; height: 32px; border-radius: 9px; }
.mt-titles { min-width: 0; }
.mt-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-sub { font-size: 10px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.mt-actions .icon-btn { width: 40px; height: 40px; }

/* ── 4b. Yatay kaydırılabilir sekme şeridi ───────────────────────────────
 *
 * KÖK NEDEN — "mobilde alt bar alta kayıyor"
 * -----------------------------------------
 * Satışlar sayfasındaki belge tipi sekmeleri (Faturalar / İrsaliyeler /
 * Perakende / Numuneler) tek satırda ~412px yer kaplıyordu. 360px genişliğinde
 * bir telefonda bu YATAY TAŞMA yaratır; taşma olduğunda tarayıcının yerleşim
 * görünümü (layout viewport) ekrandan geniş olur ve `position:fixed; left:0;
 * right:0` olan .bottom-nav bu geniş alana yayılıp ekranın dışına kayar —
 * kullanıcı alt navigasyonu göremez.
 *
 * Çözüm: sekme şeridi tek satırda kalır ama KENDİ İÇİNDE yatay kaydırılır;
 * böylece sayfa gövdesi asla ekrandan geniş olmaz. (Sekmeleri alt satıra
 * sarmak yerine kaydırmak tercih edildi: sekme çubuğunun yüksekliği sabit
 * kalır ve sıralama korunur.)                                              */
.tab-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  max-width: 100%;
}
.tab-scroll::-webkit-scrollbar { display: none; }   /* WebKit/Blink */
.tab-scroll > * { flex: 0 0 auto; white-space: nowrap; }

/* ── 5. Mobil alt navigasyon ─────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  height: calc(var(--bnav-h) + var(--safe-bottom));
  background: var(--bnav-bg);
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, .6);
}
body[data-theme="acik"] .bottom-nav { box-shadow: 0 -2px 20px rgba(0, 0, 0, .12); }

.bottom-nav-inner {
  display: flex; align-items: center; justify-content: space-around;
  height: var(--bnav-h);
  padding: 0 4px calc(var(--safe-bottom) + 4px);
  max-width: 520px; margin: 0 auto; width: 100%;
}
.bnav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: .25px;
  border: none; background: transparent; cursor: pointer;
  transition: color .2s; -webkit-tap-highlight-color: transparent;
  text-decoration: none; padding: 6px 2px; min-width: 0;
}
.bnav-item:active { animation: tapPop .2s ease; }
.bnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bnav-icon-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  background: transparent;
}
.bnav-icon { font-size: 20px; line-height: 1; transition: font-size .3s; }

.bnav-item.active { color: var(--text); }
.bnav-icon-wrap.active {
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  box-shadow:
    0 4px 18px var(--glow),
    0 0 0 3px var(--bnav-bg),
    0 0 0 5px var(--accent-soft);
  transform: translateY(-8px) scale(1.08);
}
.bnav-item.active .bnav-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .4));
}

/* "Daha" paneli */
.bnav-more-panel {
  display: none; position: fixed;
  bottom: calc(var(--bnav-h) + var(--safe-bottom) + 12px);
  left: 16px; right: 16px;
  background: var(--ink);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border2); border-radius: 20px; padding: 14px;
  z-index: 300;
  animation: slideUp .25s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .6);
  max-height: 62dvh; overflow-y: auto;
}
body[data-theme="acik"] .bnav-more-panel { box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); }
.bnav-more-panel.open { display: block; }
.bnav-more-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 4px 4px 10px;
}
.bnav-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bnav-more-item {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; min-height: 44px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text2);
  font-size: 12.5px; font-weight: 500;
  transition: all .16s;
}
.bnav-more-item:active { animation: tapPop .2s ease; }
.bnav-more-item:hover { color: var(--text); border-color: var(--border2); }
.bnav-more-item.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bnav-more-item i { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }

.bnav-overlay {
  display: none; position: fixed; inset: 0; z-index: 250;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.bnav-overlay.open { display: block; }

/* ── 6. Bileşenler ───────────────────────────────────────────────────── */

/* Butonlar */
.btn, .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: var(--rsm);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none; transition: all .18s;
  min-height: 44px; text-decoration: none;
}
.btn:active, .ui-btn:active { transform: scale(.95); }

.btn-primary, .ui-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; box-shadow: 0 4px 14px var(--glow);
}
.btn-primary:hover, .ui-btn-primary:hover {
  box-shadow: 0 6px 22px var(--glow); transform: translateY(-1px); color: #fff;
}
.btn-ghost, .ui-btn-ghost {
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border);
}
.btn-ghost:hover, .ui-btn-ghost:hover { border-color: var(--border2); color: var(--text); }
.btn-success, .ui-btn-success { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }
.btn-danger, .ui-btn-danger {
  background: rgba(231, 76, 60, .14); color: var(--danger); border: 1px solid rgba(231, 76, 60, .28);
}
.btn-sm, .ui-btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 7px; min-height: 34px; }

/* Kartlar */
.card, .ui-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px;
  animation: fadeUp .35s cubic-bezier(.22, 1, .36, 1) both;
}
.card-head, .ui-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3, .ui-card-head h2, .ui-card-head h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}

/* İstatistik kartları */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-bottom: 18px; }
.stat-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 15px;
  animation: fadeUp .35s cubic-bezier(.22, 1, .36, 1) both;
}
.stat-label {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.25; margin-top: 4px; }
@media (min-width: 992px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* Form elemanları */
.input, .ui-input {
  width: 100%;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 12px 14px;
  color: var(--text); font-family: inherit;
  font-size: 16px;  /* iOS otomatik zoom'unu engeller */
  outline: none; transition: border-color .18s, background .18s;
}
.input:focus, .ui-input:focus { border-color: var(--accent); background: var(--accent-soft); }
.input::placeholder, .ui-input::placeholder { color: var(--muted); }
.form-group { margin-bottom: 14px; }
.form-group label, .ui-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* Rozetler */
.badge, .ui-badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.badge-success, .ui-badge-success { background: rgba(46, 204, 113, .15); color: var(--success); }
.badge-warning, .ui-badge-warning { background: rgba(243, 156, 18, .15); color: var(--warning); }
.badge-danger,  .ui-badge-danger  { background: rgba(231, 76, 60, .15); color: var(--danger); }
.badge-info,    .ui-badge-info    { background: rgba(59, 130, 246, .15); color: var(--info); }
.badge-muted,   .ui-badge-muted   { background: var(--card-bg); color: var(--muted); }

/* Tablolar */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-table th {
  background: var(--surface-2); color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ui-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text2); }
.ui-table tr:hover td { background: var(--surface-2); }
.ui-table tr:last-child td { border-bottom: none; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-box {
  background: var(--ink); border: 1px solid var(--border2);
  border-radius: 20px; max-width: 600px; width: 100%;
  animation: modalPop .25s cubic-bezier(.22, 1, .36, 1);
  max-height: calc(100dvh - 40px); overflow-y: auto;
}

/* Bildirim çubuğu */
.flash {
  padding: 12px 16px; border-radius: var(--rsm); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px; font-weight: 500;
  animation: fadeUp .3s ease;
  border: 1px solid transparent;
}
.flash-success { background: rgba(46, 204, 113, .13); color: var(--success); border-color: rgba(46, 204, 113, .26); }
.flash-error, .flash-danger { background: rgba(231, 76, 60, .13); color: var(--danger); border-color: rgba(231, 76, 60, .26); }
.flash-warning { background: rgba(243, 156, 18, .13); color: var(--warning); border-color: rgba(243, 156, 18, .26); }
.flash-info { background: rgba(59, 130, 246, .13); color: var(--info); border-color: rgba(59, 130, 246, .26); }

/* İlerleme çubuğu */
.progress-bar-wrap { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--success), var(--mint));
  border-radius: 6px; transition: width .7s cubic-bezier(.22, 1, .36, 1);
}

/* Boş durum */
.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-state i { display: block; font-size: 30px; color: var(--accent); margin-bottom: 12px; opacity: .7; }

/* ── 7. Bootstrap köprüsü ────────────────────────────────────────────────
   Panel sayfaları Bootstrap 5 kullanıyor; onun açık tema varsayılanları
   koyu zeminde okunmaz hâle geliyor. Aşağıdaki eşlemeler Bootstrap'ı tema
   değişkenlerine bağlar.                                                  */
.table { color: var(--text2); --bs-table-color: var(--text2); --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text2); border-bottom-color: var(--border); box-shadow: none; }
.table thead th, .table > thead > tr > th { color: var(--muted); border-bottom-color: var(--border); }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--surface-2); background-color: var(--surface-2) !important; color: var(--muted) !important; }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-2); color: var(--text); }

.form-control, .form-select {
  background: var(--input-bg); border-color: var(--border); color: var(--text);
  font-size: 16px; min-height: 44px;
}
.form-control:focus, .form-select:focus {
  background: var(--input-bg); border-color: var(--accent); color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control::placeholder { color: var(--muted); }
.form-select option { background: var(--ink); color: var(--text); }
.form-label { color: var(--text2); font-size: 12px; font-weight: 600; }
.form-check-input { background-color: var(--input-bg); border-color: var(--border2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.input-group-text { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* ============================================================
   PANEL GENELİ "KUTU İÇİ" GÜVENLİK AĞI
   Onlarca view kendi input/select/textarea class'ını tanımlıyor ve
   çoğu background veya color'dan birini unutuyor (koyu zeminde
   görünmeyen açık metin ya da açık zeminde görünmeyen soluk metin).
   Sayfa sayfa avlamak yerine tüm panel için tek zorunlu varsayılan:
   hangi yerel class ne derse desin bu kural üzerine yazar.
   ============================================================ */
.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.page-content select,
.page-content textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
}
/* Açılır listenin İÇİ ayrı bir katman: option ve optgroup tek tek boyanmazsa
   tarayıcı varsayılanında (açık zemin) kalır. optgroup uzun süre atlanmıştı;
   koyu listenin ortasında beyaz zeminli, soluk gri yazılı okunmaz bir grup
   başlığı şeridi olarak görünüyordu (bkz. Masraf → Yeni Masraf Gir).
   color-scheme, açılır listeyi çizen native katmanın (zemin, kaydırma çubuğu,
   vurgu rengi) da tema ile aynı tarafta kalmasını sağlar. */
.page-content select {
  color-scheme: dark;
}
body[data-theme="acik"] .page-content select {
  color-scheme: light;
}
.page-content select option,
.page-content select optgroup {
  background: var(--ink);
  color: var(--text);
}
.page-content select optgroup {
  color: var(--text2);
  font-weight: 700;
}
.page-content select optgroup option {
  color: var(--text);
  font-weight: 400;
}
.page-content input::placeholder,
.page-content textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}
/* Koyu temada native tarih/saat seçici ikonu, artık garanti koyu olan
   zemin üzerinde görünür kalsın diye tersine çevriliyor. */
body:not([data-theme="acik"]) .page-content input[type="date"]::-webkit-calendar-picker-indicator,
body:not([data-theme="acik"]) .page-content input[type="time"]::-webkit-calendar-picker-indicator,
body:not([data-theme="acik"]) .page-content input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(.7);
}

/* Varsayılan gizlilik Bootstrap'tan gelir; CDN erişilemezse menü kalıcı açık
   kalmasın diye burada da tanımlıyoruz (zarif bozulma). */
.dropdown-menu {
  display: none;
  background: var(--ink); border-color: var(--border2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .46); border-radius: var(--radius); padding: 6px;
}
.dropdown-menu.show { display: block; }
body[data-theme="acik"] .dropdown-menu { box-shadow: 0 14px 34px rgba(0, 0, 0, .14); }
.dropdown-item { color: var(--text2); border-radius: 7px; font-size: 13px; padding: 9px 11px; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--card-bg); color: var(--text); }
.dropdown-divider { border-color: var(--border); }

.modal-content { background: var(--ink); border: 1px solid var(--border2); border-radius: 20px; color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
body[data-theme="acik"] .btn-close { filter: none; }

.alert { border-radius: var(--rsm); border-width: 1px; }
.alert-success { background: rgba(46, 204, 113, .13); color: var(--success); border-color: rgba(46, 204, 113, .26); }
.alert-danger  { background: rgba(231, 76, 60, .13); color: var(--danger); border-color: rgba(231, 76, 60, .26); }
.alert-warning { background: rgba(243, 156, 18, .13); color: var(--warning); border-color: rgba(243, 156, 18, .26); }
.alert-info    { background: rgba(59, 130, 246, .13); color: var(--info); border-color: rgba(59, 130, 246, .26); }
.alert-secondary { background: var(--card-bg); color: var(--text2); border-color: var(--border); }

.text-muted { color: var(--muted) !important; }
.bg-white { background: var(--card-bg) !important; }
.border { border-color: var(--border) !important; }
.list-group-item { background: var(--card-bg); border-color: var(--border); color: var(--text2); }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); border-color: transparent; }
.nav-tabs .nav-link.active { background: var(--card-bg); border-color: var(--border) var(--border) var(--card-bg); color: var(--accent); }
.page-link { background: var(--card-bg); border-color: var(--border); color: var(--text2); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Bootstrap kart bileşeni tema değişkenlerine bağlanır */
.card { --bs-card-bg: var(--card-bg); --bs-card-border-color: var(--border); --bs-card-color: var(--text); }
.card-header, .card-footer { background: var(--surface-2); border-color: var(--border); color: var(--text); }

/* ── 8. Mobil kuralları ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .sidebar { display: none !important; }
  .top-bar { display: none !important; }
  .mobile-topbar { display: flex !important; }
  .bottom-nav { display: block !important; }

  .main-wrap {
    margin-left: 0 !important;
    padding-bottom: calc(var(--bnav-h) + var(--safe-bottom) + 60px) !important;
  }
  .page-content { padding: 12px 14px; }

  /* Dokunmatik hedefler en az 44px */
  .btn-sm, .ui-btn-sm { min-height: 44px; padding: 6px 14px; }
  .filter-tab { min-height: 44px; padding: 7px 16px; }
  .icon-btn { min-width: 44px; min-height: 44px; }

  /* GÜVENLİK AĞI — dokunma hedefi asgarisi.
     Onlarca view kendi buton class'ını tanımlıyor (.btn-action, .bt-paragir,
     .top-btn, .btn-donem, .btn-period …) ve çoğu masaüstü için ~28px yükseklik
     veriyor. Parmakla bu boyut ıskalanıyor. Sınıf sınıf peşinden koşmak yerine
     panel içindeki TÜM buton/seçim kontrollerine tek bir asgari yükseklik
     verilir; yerel class'lar bunu büyütebilir ama küçültemez.
     row-toggle gibi tablo içi kompakt açma/kapama düğmeleri hariç tutulur —
     onlar satır yüksekliğini belirler; yine de rahat basılabilir bir boyuta
     çekilir (aşağıda). */
  .page-content button:not(.row-toggle):not(.cd-plus):not(.bnav-item),
  .page-content select,
  .page-content a.btn-action,
  .page-content .top-btn,
  .page-content .btn-det { min-height: 44px; }

  /* Dar ikon/caret düğmeleri genişlikte de basılabilir olmalı (16-26px parmakla
     ıskalanıyor). TÜM butonlara min-width VERİLMEZ: dar ekranda sığmayan filtre
     satırları yatay taşmaya yol açıyor (Teklifler @320px'de ölçüldü). Bu yüzden
     yalnızca ikon-only/dar düğmeler hedeflenir. */
  .page-content .btn-add-caret,
  .page-content .musteri-ac-btn { min-width: 44px; }

  /* Tablo içi kompakt aç/kapa düğmeleri: satırı şişirmeden basılabilir olsun */
  .page-content .row-toggle,
  .page-content .cd-plus { min-width: 32px; min-height: 32px; }

  /* Onay kutusu/radyo satırları: kutunun KENDİSİ küçüktür (16px) ama etiketine
     basmak da onu seçer — gerçek dokunma alanı etikettir. Etiketi rahat
     basılabilir yükseklikte tut; kutunun görsel boyutu değişmez. */
  .page-content .form-check-label,
  .page-content .check-label,
  .page-content label:has(input[type="checkbox"]),
  .page-content label:has(input[type="radio"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Çok sütunlu düzenler tek sütuna iner */
  .form-grid, .two-col, .row-2col { grid-template-columns: 1fr !important; }

  /* Fatura giriş/düzenleme ekranlarının iki panelli düzeni (sol: belge
     bilgileri, sağ: ürün kalemleri) mobilde ALT ALTA iner.
     Aksi halde iki panel yan yana kalır ve sayfa 360px'lik bir telefonda
     ~740px genişler: yatay taşma yüzünden sabit alt navigasyon ekran
     dışına kayar ve ürün arama kutusuna ulaşılamaz.
     Kullanan ekranlar: satis/alis → ekle, duzenle, detay. */
  .panels-container { flex-direction: column !important; gap: 14px !important; }
  .panels-container > .panel { width: 100% !important; max-width: 100% !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tablolar yatay kaydırılır */
  .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sayfa içi geniş tablolar taşmasın */
  .page-content table { font-size: 12.5px; }
}

@media (max-width: 389.98px) {
  .stat-value { font-size: 15px; }
  .bnav-icon { font-size: 18px; }
  .bnav-item.active .bnav-icon { font-size: 20px; }
  .bnav-label { font-size: 8.5px; }
  .page-content { padding: 10px 11px; }
}

/* ── 9. Yazdırma ─────────────────────────────────────────────────────── */
/*
 * KÖK NEDEN VE ÇÖZÜM — "koyu temada yazdır" beyaz/okunmaz metin hatası
 * --------------------------------------------------------------------
 * Koyu tema VARSAYILANDIR (bu dosyanın en üstündeki :root bloğuna bakın);
 * açık tema yalnızca body[data-theme="acik"] ile devreye girer. Koyu temada
 * --text/--text2/--muted neredeyse beyaza yakın renklerdir (kart üzerinde
 * okunsun diye), --card-bg ise neredeyse saydam bir katmandır (arkasındaki
 * koyu --surface'i gösterir).
 *
 * Uygulamadaki HER "yazdır" ekranı (alış/satış detayı, ekstre, raporlar,
 * takvim) kendi @media print bloğunda "html,body{background:var(--card-bg)}"
 * ve içerikte "color:var(--text2)" gibi TEMA DEĞİŞKENLERİNİ kullanıyor.
 * Bu, ekranda doğru görünse de yazdırmada tam olarak ters teper: kağıt
 * arka planı efektif olarak beyaza döner (saydam --card-bg kağıdı gösterir)
 * ve metin de neredeyse-beyaz kalır → beyaz kağıtta beyaz yazı, okunmaz.
 *
 * Onlarca dosyadaki her var(--...) kullanımını tek tek "gerçek" renklere
 * çevirmek yerine, kökten (TEK yerden) çözüm: yazdırma anında bu değişkenlerin
 * KENDİSİNİ print-safe (koyu metin/açık zemin) değerlere sabitlemek. Özel
 * ürün/gayret harcanmadan, var(--text) / var(--card-bg) / var(--border) vb.
 * kullanan HER mevcut ve gelecekteki sayfa otomatik olarak düzelir.
 *
 * :root VE body ikisi de hedeflenir: :root (varsayılan/koyu durum) ile
 * body[data-theme="acik"] (zaten print-safe olsa da tutarlılık için) arasında
 * özel özellik kademesi elemente göre değişir — ikisini de kapsamak, hangi
 * tema aktifken yazdırma tetiklenirse tetiklensin aynı sonucu garantiler.
 */
@media print {
  :root, body {
    color-scheme: light !important;
    --surface: #ffffff !important;
    --surface-2: #f1f5f9 !important;
    --ink: #ffffff !important;
    --card-bg: #ffffff !important;
    --input-bg: #ffffff !important;
    --border: #d7dce3 !important;
    --border2: #c1c8d1 !important;
    --text: #111827 !important;
    --text2: #374151 !important;
    --muted: #64748b !important;
    --bnav-bg: #ffffff !important;
  }

  /* Ekranda tema ile birlikte koyuya alınan native katman, kağıtta açık kalsın. */
  .page-content select { color-scheme: light !important; }

  .sidebar, .top-bar, .mobile-topbar, .bottom-nav,
  .bnav-more-panel, .bnav-overlay, .modal-overlay,
  .toolbar, .no-print { display: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 12px; }
  .main-wrap { margin-left: 0 !important; padding-bottom: 0 !important; }
  .page-content { padding: 0 !important; }
  .card, .ui-card, .stat-card {
    background: #fff !important; border: 1px solid #ddd !important;
    box-shadow: none !important; break-inside: avoid; animation: none !important;
  }
  .ui-table th, .table th {
    background: #222 !important; color: #fff !important;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .ui-table td, .table td { color: #000 !important; }
}

/* HTML "hidden" niteliği her zaman gizler.
   Bazı formlarda .fg gibi kapsayıcılara display:flex verildiği için tarayıcının
   varsayılan [hidden]{display:none} kuralı eziliyordu; bu da JS ile gizlenen
   alanların (ör. hizmet kartında stok alanları) ekranda kalmasına yol açıyordu. */
[hidden] { display: none !important; }