/* ══════════════════════════════════════════════════════════════
   BAAF ERP — Ana CSS  ·  Otofix-kalitesi tasarım sistemi
   Marka: Turuncu (#ff6030) + Altın (#f5b133)  ·  3 tema: Dark · Dim · Light
   ══════════════════════════════════════════════════════════════ */

/* ════ TEMA-BAĞIMSIZ SABİTLER ════════════════════════════════ */
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --transition-fast: 180ms cubic-bezier(.4,0,.2,1);
  --transition-normal: 380ms cubic-bezier(.16,1,.3,1);
  --sidebar-width: 264px;
  --topbar-height: 60px;
  --bottom-nav-height: 0px;

  /* Akışkan tipografi */
  --fs-xs:   clamp(0.625rem, 0.55rem + 0.25vw, 0.72rem);
  --fs-sm:   clamp(0.75rem, 0.68rem + 0.25vw, 0.84rem);
  --fs-base: clamp(0.8125rem, 0.74rem + 0.3vw, 0.92rem);
  --fs-md:   clamp(0.9rem, 0.8rem + 0.35vw, 1.05rem);
  --fs-lg:   clamp(1rem, 0.88rem + 0.4vw, 1.22rem);
  --fs-xl:   clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  --fs-2xl:  clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
}

/* ════ TEMA: KARANLIK (varsayılan) ═══════════════════════════ */
[data-theme="dark"], :root {
  --bg-primary:   #06070f;
  --bg-secondary: #0d0f19;
  --bg-tertiary:  #141728;
  --bg-elevated:  #1c2034;
  --text-primary:   #eef0f8;
  --text-secondary: #98a1bd;
  --text-muted:     #59617e;
  --border:        rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.12);
  --glass:         rgba(255,255,255,.03);
  --card-bg:   var(--bg-secondary);
  --input-bg:  var(--bg-tertiary);
  --modal-backdrop: rgba(3,4,10,.78);
  --shadow-card:  0 8px 30px rgba(0,0,0,.55);
  --shadow-hover: 0 20px 52px rgba(0,0,0,.62);

  --accent:       #ff6030;
  --accent-light: #ff8a5c;
  --accent-dark:  #e64a1c;
  --accent-soft:  rgba(255,96,48,.14);
  --accent-faint: rgba(255,96,48,.06);
  --gold:        #f5b133;
  --gold-soft:   rgba(245,177,51,.14);
  --green:  #16c784;
  --red:    #f4475e;
  --blue:   #4da8ff;
  --purple: #a872ff;
  --logo-text-fill: #f5f7ff;
  --topbar-bg: rgba(8,9,18,.72);
  --grid-line: rgba(255,255,255,.018);
}

/* ════ TEMA: DIM (göz dostu orta) ════════════════════════════ */
[data-theme="dim"] {
  --bg-primary:   #181b29;
  --bg-secondary: #1f2336;
  --bg-tertiary:  #272c44;
  --bg-elevated:  #313754;
  --text-primary:   #e4e8f3;
  --text-secondary: #97a0bd;
  --text-muted:     #626b8c;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.15);
  --glass:         rgba(255,255,255,.04);
  --card-bg:   var(--bg-secondary);
  --input-bg:  var(--bg-tertiary);
  --modal-backdrop: rgba(12,14,28,.8);
  --shadow-card:  0 8px 28px rgba(0,0,0,.4);
  --shadow-hover: 0 18px 44px rgba(0,0,0,.5);

  --accent:       #ff7142;
  --accent-light: #ff9468;
  --accent-dark:  #ef5a28;
  --accent-soft:  rgba(255,113,66,.16);
  --accent-faint: rgba(255,113,66,.07);
  --gold:        #f5bb4a;
  --gold-soft:   rgba(245,187,74,.15);
  --green:  #1ed197;
  --red:    #f55570;
  --blue:   #5ab4ff;
  --purple: #b585ff;
  --logo-text-fill: #f5f7ff;
  --topbar-bg: rgba(31,35,54,.78);
  --grid-line: rgba(255,255,255,.025);
}

/* ════ TEMA: AYDINLIK ════════════════════════════════════════ */
[data-theme="light"] {
  --bg-primary:   #eef1f7;
  --bg-secondary: #ffffff;
  --bg-tertiary:  #f4f6fb;
  --bg-elevated:  #e8ecf5;
  --text-primary:   #121527;
  --text-secondary: #515b73;
  --text-muted:     #93a0b8;
  --border:        rgba(18,21,39,.09);
  --border-strong: rgba(18,21,39,.16);
  --glass:         rgba(18,21,39,.025);
  --card-bg:   #ffffff;
  --input-bg:  #f4f6fb;
  --modal-backdrop: rgba(18,21,39,.45);
  --shadow-card:  0 1px 3px rgba(18,21,39,.05), 0 8px 28px rgba(18,21,39,.07);
  --shadow-hover: 0 12px 36px rgba(18,21,39,.12);

  --accent:       #e85520;
  --accent-light: #f57240;
  --accent-dark:  #c8430f;
  --accent-soft:  rgba(232,85,32,.11);
  --accent-faint: rgba(232,85,32,.05);
  --gold:        #c98a0e;
  --gold-soft:   rgba(201,138,14,.12);
  --green:  #0ca678;
  --red:    #e11d48;
  --blue:   #1a6fb5;
  --purple: #8b3fd1;
  --logo-text-fill: #1a1a2e;
  --topbar-bg: rgba(255,255,255,.78);
  --grid-line: rgba(18,21,39,.025);
}

/* ════ RESET ═════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg-primary);
}
html, body { overscroll-behavior: none; }
body {
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-size: var(--fs-base);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .35s ease;
}
button, .nav-item, .bottom-nav-item, .mobile-more-item, .topbar, .sidebar-header {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Boot anında splash kapatana kadar arka plan akışları gizli değil — splash üstte örtüyor */

/* ── Scrollbar ── */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ════ ARKA PLAN DOKUSU: GRID + ORB'LAR ══════════════════════ */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
}
.orb { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.orb1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,96,48,.07), transparent 70%); top: -200px; right: -140px; animation: orbA 34s ease-in-out infinite; }
.orb2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(77,168,255,.045), transparent 70%); bottom: -160px; left: -100px; animation: orbB 28s ease-in-out infinite; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(245,177,51,.04), transparent 70%); top: 42%; left: 36%; animation: orbC 42s ease-in-out infinite; }
[data-theme="light"] .orb1 { background: radial-gradient(circle, rgba(232,85,32,.05), transparent 70%); }
[data-theme="light"] .orb2, [data-theme="light"] .orb3 { opacity: .5; }
@keyframes orbA { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-70px,60px)} 66%{transform:translate(50px,-45px)} }
@keyframes orbB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(90px,-80px)} }
@keyframes orbC { 0%,100%{transform:translate(0,0)} 50%{transform:translate(55px,-55px) scale(1.12)} }

/* App içeriği grid/orb üstünde kalsın */
.app-shell, #login-screen, .topbar, .sidebar, .modal-container, .bottom-nav, #cmd-palette, .qa-sheet { position: relative; z-index: 1; }

/* ════ SPLASH ════════════════════════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 100000;
  background: radial-gradient(ellipse at 50% 40%, #0c0e1a, #050609 70%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#splash.out { animation: splashOut .65s ease forwards; pointer-events: none; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
.sp-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,96,48,.08); animation: spRing 3.4s ease-in-out infinite; }
.sp-ring:nth-child(1){ width: 320px; height: 320px; }
.sp-ring:nth-child(2){ width: 500px; height: 500px; animation-delay: .4s; border-color: rgba(255,96,48,.05); }
.sp-ring:nth-child(3){ width: 700px; height: 700px; animation-delay: .8s; border-color: rgba(255,96,48,.03); }
@keyframes spRing { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.05);opacity:1} }
.sp-orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(50px);
  background: radial-gradient(circle, rgba(255,96,48,.2), rgba(245,177,51,.05) 50%, transparent 70%); animation: spOrb 2.8s ease-in-out infinite; }
@keyframes spOrb { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.15);opacity:1} }
.sp-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.sp-logo { width: 96px; height: 96px; margin-bottom: 18px; filter: drop-shadow(0 8px 30px rgba(255,96,48,.4)); animation: spPop .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes spPop { from{opacity:0;transform:translateY(20px) scale(.85)} to{opacity:1;transform:none} }
.sp-wordmark {
  font-family: 'Bebas Neue','Outfit',sans-serif; font-size: clamp(54px,13vw,88px); letter-spacing: 7px;
  line-height: 1; color: #fff; animation: spWord .9s cubic-bezier(.16,1,.3,1) .2s both; margin-bottom: 4px;
}
.sp-wordmark .sp-accent { background: linear-gradient(135deg,#ff6030,#f5b133); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes spWord { from{opacity:0;transform:translateY(22px);filter:blur(10px)} to{opacity:1;transform:none;filter:blur(0)} }
.sp-tagline { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.32); font-weight: 500; margin-bottom: 26px; animation: spTag .5s ease .8s both; }
@keyframes spTag { from{opacity:0;letter-spacing:11px} to{opacity:1;letter-spacing:5px} }
.sp-track { width: 220px; height: 3px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; position: relative; animation: spTag .3s ease 1s both; }
.sp-track::after { content: ''; position: absolute; inset: 0; border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg,#ff6030,#f5b133); animation: spFill 2.2s cubic-bezier(.4,0,.2,1) .9s forwards; }
@keyframes spFill { 0%{transform:scaleX(0);opacity:0} 8%{opacity:1} 100%{transform:scaleX(1);opacity:1} }
.sp-ver { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.16); animation: spTag .4s ease 1.4s both; }

/* ════ BUTONLAR ══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff; box-shadow: 0 4px 16px -2px var(--accent-soft);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(255,96,48,.5); }
.btn-full { width: 100%; }
.btn-sm { padding: 8px 15px; font-size: var(--fs-xs); }
.btn-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); background: var(--glass); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-faint); }
.btn-g { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-g:hover { color: var(--text-primary); border-color: var(--border-strong); }
.btn-icon {
  padding: 9px; border-radius: var(--radius-sm); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast); border: 1px solid transparent;
}
.btn-icon:hover { background: var(--glass); color: var(--text-primary); border-color: var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-success { background: var(--green); color: #fff; }

/* ════ LOGIN — Çift panel ════════════════════════════════════ */
.login-screen {
  display: flex; align-items: stretch; justify-content: center;
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(ellipse at 25% 15%, var(--accent-faint), transparent 55%),
              radial-gradient(ellipse at 80% 85%, rgba(77,168,255,.05), transparent 55%),
              var(--bg-primary);
}
.login-shell {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  width: 100%; max-width: 1080px; margin: auto; min-height: min(640px, 92vh);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-secondary);
  box-shadow: var(--shadow-hover);
}
/* Sol görsel panel */
.login-visual {
  position: relative; padding: 38px 40px; overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255,96,48,.16), transparent 55%),
    radial-gradient(ellipse at 20% 90%, rgba(245,177,51,.08), transparent 55%),
    linear-gradient(155deg, #0c0e1a, #06070f);
  display: flex; flex-direction: column;
  color: #eef0f8;
}
.login-visual::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 80%);
}
.lv-corner { position: absolute; width: 26px; height: 26px; border: 1.5px solid rgba(255,96,48,.4); }
.lv-corner.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.lv-corner.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.lv-corner.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.lv-corner.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.lv-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.lv-brand { display: flex; align-items: center; gap: 11px; }
.lv-clock { font-family: 'Bebas Neue',sans-serif; font-size: 19px; letter-spacing: 2px; color: var(--accent-light); }
.lv-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.5); position: relative; z-index: 2; }
.lv-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22,199,132,.6); animation: lvPulse 2s infinite; }
@keyframes lvPulse { 0%{box-shadow:0 0 0 0 rgba(22,199,132,.5)} 70%{box-shadow:0 0 0 8px rgba(22,199,132,0)} 100%{box-shadow:0 0 0 0 rgba(22,199,132,0)} }
.lv-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; position: relative; z-index: 2; padding: 24px 0; }
.lv-scan-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); }
.lv-graphic { position: relative; width: 100%; max-width: 320px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.lv-graphic svg { width: 100%; height: 100%; overflow: visible; }
.lv-scan-beam { position: absolute; top: 0; bottom: 0; width: 2px; left: 0;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px 3px rgba(255,96,48,.5); animation: lvSweep 3.4s ease-in-out infinite; }
@keyframes lvSweep { 0%,100%{left:6%;opacity:.3} 50%{left:94%;opacity:1} }
.lv-scan-ok { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.lv-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; position: relative; z-index: 2; }
.lv-stat { text-align: center; padding: 10px 4px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.lv-stat-val { font-family: 'Bebas Neue',sans-serif; font-size: 24px; letter-spacing: 1px; color: #fff; line-height: 1; }
.lv-stat-lbl { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: 4px; }
.lv-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.3); position: relative; z-index: 2; }
.lv-foot-sec { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }

/* Sağ form paneli (mevcut #login-card içeriğini sarar) */
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px 38px; background: var(--bg-secondary); }
.login-card { width: 100%; max-width: 360px; }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-icon { margin-bottom: 14px; display: flex; justify-content: center; }
.login-logo-icon .baaf-logo { filter: drop-shadow(0 6px 22px rgba(255,96,48,.32)); transition: transform .4s ease; }
.login-logo-icon .baaf-logo:hover { transform: scale(1.04); }
.login-title { font-size: var(--fs-xl); }
.login-subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 6px; }
.accent { color: var(--accent); }
.login-form { display: flex; flex-direction: column; }
.login-error {
  color: var(--red); font-size: var(--fs-sm); margin-bottom: var(--space-sm); text-align: center;
  background: rgba(244,71,94,.08); border: 1px solid rgba(244,71,94,.2); border-radius: var(--radius-sm); padding: 9px 12px;
}

/* ════ FORMLAR ═══════════════════════════════════════════════ */
.form-group { position: relative; margin-bottom: var(--space-md); }
.form-input {
  width: 100%; padding: 13px 15px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); background: var(--bg-secondary); }
.form-label {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: var(--fs-sm);
  transition: all var(--transition-fast); pointer-events: none;
}
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -8px; font-size: var(--fs-xs);
  background: var(--bg-secondary); padding: 0 6px; color: var(--accent);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-md); }
.form-group-sm { margin-bottom: var(--space-sm); }
.form-help { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 5px; display: block; }
.form-label-static { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
select.form-input option { background: var(--bg-secondary); color: var(--text-primary); }

/* ════ APP SHELL + SIDEBAR ═══════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform var(--transition-normal);
}
.sidebar-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--space-md);
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { display: flex; align-items: center; }
.sidebar-logo .baaf-logo-sm { filter: drop-shadow(0 2px 10px rgba(255,96,48,.22)); transition: transform .3s ease; }
.sidebar-logo .baaf-logo-sm:hover { transform: scale(1.05); }
.sidebar-brand { line-height: 1.15; }
.sidebar-brand-name { font-family: 'Outfit',sans-serif; font-weight: 800; font-size: var(--fs-md); letter-spacing: .04em; }
.sidebar-brand-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }

.sidebar-nav { flex: 1; padding: 10px 10px; overflow-y: auto; }
.nav-group-label {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted); padding: 12px 12px 6px; opacity: .8;
}
.nav-group-label:first-child { padding-top: 2px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500;
  transition: all var(--transition-fast); margin-bottom: 2px;
}
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; transition: stroke var(--transition-fast), transform var(--transition-fast); }
.nav-item:hover { background: var(--glass); color: var(--text-primary); }
.nav-item:hover svg { transform: translateX(1px); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  color: var(--accent); font-weight: 600;
}
.nav-item.active svg { stroke: var(--accent); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--gold));
  box-shadow: 0 0 12px var(--accent);
}
.nav-badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 10px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
}
.nav-badge--gold { background: var(--gold); color: #1a1305; }
.nav-badge--mute { background: var(--bg-elevated); color: var(--text-secondary); }
.nav-badge[hidden] { display: none; }

.sidebar-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-name { font-size: var(--fs-sm); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: var(--fs-xs); color: var(--text-muted); display: block; }

.avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #1a1305; flex-shrink: 0;
}
.avatar-sm { width: 34px; height: 34px; font-size: var(--fs-xs); border-radius: 10px; }

/* ── Tema toggle (segmented) ── */
.theme-toggle-area { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border); }
.theme-toggle { display: flex; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 22px; padding: 3px; gap: 2px; }
.theme-toggle-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 7px 0; border-radius: 18px; color: var(--text-muted);
  transition: all var(--transition-fast); cursor: pointer;
}
.theme-toggle-btn:hover { color: var(--text-secondary); }
.theme-toggle-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 3px 10px -2px var(--accent-soft); }
.theme-toggle-btn svg { width: 15px; height: 15px; }

/* ════ MAIN + TOPBAR ═════════════════════════════════════════ */
.main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-width); min-height: 100vh; min-height: 100dvh; }
.topbar {
  height: var(--topbar-height);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: var(--fs-lg); font-weight: 700; }
.topbar-clock { font-family: 'Bebas Neue','Outfit',sans-serif; font-size: 16px; letter-spacing: 1.5px; color: var(--text-muted); padding: 3px 9px; border: 1px solid var(--border); border-radius: 8px; }
.topbar-spacer { flex: 1; }
/* Topbar arama tetikleyici (komut paletini açar) */
.topbar-search {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 12px; min-width: 220px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: var(--fs-sm); cursor: text; transition: all var(--transition-fast);
}
.topbar-search:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.topbar-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar-search-text { flex: 1; }
.topbar-search-kbd {
  font-family: 'Outfit',sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 5px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--red); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-secondary);
}
.sidebar-toggle { display: none; }

.page-content { padding: var(--space-lg); }
.page { display: none; }
.page.active { display: block; animation: pageIn 360ms cubic-bezier(.16,1,.3,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ════ DASHBOARD — Hero kartları ═════════════════════════════ */
.dash-hero-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); margin-bottom: var(--space-md); }
.dash-hero-card {
  position: relative; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  display: flex; align-items: center; gap: 15px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.dash-hero-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px; }
.dash-hero-card::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%); opacity: .05; pointer-events: none;
}
.dash-hero-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.dash-hero--alacak::before { background: linear-gradient(180deg,var(--green),#0e9e69); }
.dash-hero--alacak:hover { box-shadow: 0 16px 36px -10px rgba(22,199,132,.3); }
.dash-hero--verecek::before { background: linear-gradient(180deg,var(--red),#c41338); }
.dash-hero--verecek:hover { box-shadow: 0 16px 36px -10px rgba(244,71,94,.3); }
.dash-hero--senet::before { background: linear-gradient(180deg,var(--accent),var(--gold)); }
.dash-hero--senet:hover { box-shadow: 0 16px 36px -10px rgba(255,96,48,.3); }
.dash-hero--tahsilat::before { background: linear-gradient(180deg,var(--blue),#2563eb); }
.dash-hero--tahsilat:hover { box-shadow: 0 16px 36px -10px rgba(77,168,255,.3); }
.dash-hero-icon { width: 50px; height: 50px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-hero--alacak .dash-hero-icon { background: rgba(22,199,132,.12); color: var(--green); }
.dash-hero--verecek .dash-hero-icon { background: rgba(244,71,94,.12); color: var(--red); }
.dash-hero--senet .dash-hero-icon { background: var(--accent-soft); color: var(--accent); }
.dash-hero--tahsilat .dash-hero-icon { background: rgba(77,168,255,.12); color: var(--blue); }
.dash-hero-content { flex: 1; min-width: 0; }
.dash-hero-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; display: block; }
.dash-hero-value { font-family: 'Outfit',sans-serif; font-size: var(--fs-2xl); font-weight: 800; display: block; margin-top: 3px; line-height: 1.15; }
.dash-hero--alacak .dash-hero-value { color: var(--green); }
.dash-hero--verecek .dash-hero-value { color: var(--red); }
.dash-hero--senet .dash-hero-value { color: var(--accent); }
.dash-hero--tahsilat .dash-hero-value { color: var(--blue); }
.dash-hero-sub { font-size: var(--fs-xs); color: var(--text-muted); display: block; margin-top: 2px; }
.dash-hero-badge { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; }
.dash-hero-badge--green { background: rgba(22,199,132,.15); color: var(--green); }
.dash-hero-badge--red { background: rgba(244,71,94,.15); color: var(--red); }
.dash-hero-ring { width: 48px; height: 48px; flex-shrink: 0; }
.dash-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-ring-progress { transition: stroke-dasharray 1.2s cubic-bezier(.4,0,.2,1); }

/* ── Quick glance satırı ── */
.dash-glance-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-sm); margin-bottom: var(--space-lg); }
.dash-glance-card { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; cursor: pointer; box-shadow: var(--shadow-card); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.dash-glance-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.dash-glance-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.dash-glance-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.dash-glance-icon--purple { background: rgba(168,114,255,.12); color: var(--purple); }
.dash-glance-icon--amber { background: var(--gold-soft); color: var(--gold); }
.dash-glance-icon--blue { background: rgba(77,168,255,.12); color: var(--blue); }
.dash-glance-icon--green { background: rgba(22,199,132,.12); color: var(--green); }
.dash-glance-icon--red { background: rgba(244,71,94,.12); color: var(--red); }
.dash-glance-val { font-family: 'Outfit',sans-serif; font-size: var(--fs-xl); font-weight: 800; }
.dash-glance-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.dash-glance-sub { font-size: var(--fs-xs); color: var(--text-secondary); display: block; margin-top: 4px; }
.dash-glance-card--warn .dash-glance-val { color: var(--red); }
.dash-glance-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 8px; background: var(--bg-elevated); }
.dash-glance-bar-seg { height: 100%; transition: width var(--transition-normal); }
.dash-glance-alert { font-size: var(--fs-xs); font-weight: 700; margin-top: 4px; }

/* ── Alt panel grid ── */
.dash-bottom-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--space-md); }
.dash-chart-card .card-body { min-height: 180px; }

/* CSS bar chart */
.trend-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 8px; }
.trend-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.trend-bars { display: flex; gap: 3px; width: 100%; align-items: flex-end; height: 100%; justify-content: center; }
.trend-bar { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .8s cubic-bezier(.4,0,.2,1); }
.trend-bar--alacak { background: linear-gradient(180deg,var(--green),rgba(22,199,132,.35)); }
.trend-bar--verecek { background: linear-gradient(180deg,var(--red),rgba(244,71,94,.35)); }
.trend-label { font-size: 0.56rem; color: var(--text-muted); text-align: center; white-space: nowrap; }
.trend-legend { display: flex; gap: 16px; justify-content: center; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.trend-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.trend-legend-dot { width: 8px; height: 8px; border-radius: 2px; }

/* ════ KARTLAR ═══════════════════════════════════════════════ */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.card-title { padding: 14px var(--space-lg); font-size: var(--fs-md); font-weight: 700; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.card-title svg { flex-shrink: 0; }
.card-body { padding: var(--space-md) var(--space-lg); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px,1fr)); gap: var(--space-md); }
.empty-state { text-align: center; color: var(--text-muted); padding: var(--space-lg); font-size: var(--fs-sm); }

/* ── Due / activity ── */
.due-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.due-item:last-child { border-bottom: none; }
.due-name { font-weight: 600; font-size: var(--fs-sm); }
.due-date { font-size: var(--fs-xs); color: var(--text-muted); }
.due-amount { font-weight: 700; color: var(--accent); }
.activity-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.activity-icon { font-size: 1.2rem; }
.activity-msg { font-size: var(--fs-sm); flex: 1; }
.activity-time { font-size: var(--fs-xs); color: var(--text-muted); }

/* ════ TABLO ═════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 10px 12px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 700; }
.data-table td { padding: 12px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.data-table tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover td { background: var(--glass); }

/* ════ ETİKETLER ═════════════════════════════════════════════ */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 600; }
.tag-green { background: rgba(22,199,132,.15); color: var(--green); }
.tag-red { background: rgba(244,71,94,.15); color: var(--red); }
.tag-amber { background: var(--gold-soft); color: var(--gold); }
.tag-or { background: var(--accent-soft); color: var(--accent); }
.tag-blue { background: rgba(77,168,255,.15); color: var(--blue); }
.tag-purple { background: rgba(168,114,255,.15); color: var(--purple); }

/* ── Progress ── */
.progress-bar { width: 100%; height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg,var(--accent),var(--gold)); border-radius: 3px; transition: width var(--transition-normal); }

/* ════ KOMUT PALETİ (⌘K) ═════════════════════════════════════ */
#cmd-palette {
  position: fixed; inset: 0; z-index: 5000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  background: var(--modal-backdrop);
}
#cmd-palette.visible { display: flex; animation: cmdFade 180ms ease; }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-box {
  width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 80px -12px rgba(0,0,0,.7);
  animation: cmdPop 220ms cubic-bezier(.16,1,.3,1);
}
@keyframes cmdPop { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.cmd-search { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.cmd-search svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.cmd-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: var(--fs-md); }
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-kbd { font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.cmd-results { overflow-y: auto; padding: 8px; }
.cmd-section { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); padding: 12px 12px 5px; }
.cmd-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cmd-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.cmd-item .cmd-arr { margin-left: auto; opacity: 0; color: var(--accent); transition: opacity var(--transition-fast); }
.cmd-item:hover, .cmd-item.active { background: var(--accent-soft); color: var(--accent); }
.cmd-item.active svg, .cmd-item:hover svg { stroke: var(--accent); }
.cmd-item.active .cmd-arr, .cmd-item:hover .cmd-arr { opacity: 1; }
.cmd-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: var(--fs-sm); }
.cmd-footer { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg-tertiary); }
.cmd-hint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.cmd-hint kbd { font-family: inherit; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--bg-elevated); border: 1px solid var(--border); }

/* ════ HIZLI İŞLEMLER — FAB + Bottom-sheet ═══════════════════ */
.quick-fab-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.quick-fab {
  width: 52px; height: 52px; border-radius: 50%; margin-top: -22px;
  background: linear-gradient(135deg,var(--accent),var(--accent-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -4px rgba(255,96,48,.6); border: 3px solid var(--bg-secondary);
  transition: transform var(--transition-fast);
}
.quick-fab svg { width: 24px; height: 24px; transition: transform var(--transition-normal); }
.quick-fab:active { transform: scale(.92); }
.quick-fab.open svg { transform: rotate(135deg); }

.qa-backdrop { display: none; position: fixed; inset: 0; background: var(--modal-backdrop); z-index: 1300; }
.qa-backdrop.visible { display: block; animation: cmdFade 180ms ease; }
.qa-sheet {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1350;
  background: var(--bg-secondary); border-top: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom,0));
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.qa-sheet.visible { display: block; animation: sheetUp 320ms cubic-bezier(.16,1,.3,1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.qa-handle { width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 14px; }
.qa-title { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 12px; }
.qa-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.qa-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border-radius: var(--radius); background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; text-align: center;
  transition: all var(--transition-fast);
}
.qa-item:active { transform: scale(.95); }
.qa-item-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.qa-item-icon svg { width: 21px; height: 21px; }

/* ════ MOBİL BOTTOM NAV ══════════════════════════════════════ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0));
  background: var(--topbar-bg); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--border); z-index: 200;
  padding-bottom: env(safe-area-inset-bottom,0);
}
.bottom-nav-inner { display: flex; align-items: stretch; justify-content: space-around; height: var(--bottom-nav-height); max-width: 600px; margin: 0 auto; }
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 3px; padding: 6px 0;
  color: var(--text-muted); font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  transition: color var(--transition-fast); position: relative; min-height: 44px;
  border: none; background: none; cursor: pointer;
}
.bottom-nav-item svg { width: 22px; height: 22px; pointer-events: none; transition: all var(--transition-fast); }
.bottom-nav-item span { pointer-events: none; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active svg { stroke: var(--accent); }
.bottom-nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }

/* ── Sidebar overlay (mobil) ── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.58); z-index: 99; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
.sidebar-overlay.visible { display: block; opacity: 1; pointer-events: auto; }

/* ── "Diğer" sheet ── */
.more-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; }
.more-sheet-backdrop.visible { display: block; animation: cmdFade 150ms ease; }
.mobile-more-sheet {
  display: none; position: fixed; bottom: var(--bottom-nav-height); left: 0; right: 0;
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-md);
  z-index: 201; transform: translateY(100%); transition: transform 300ms cubic-bezier(.16,1,.3,1);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom,0));
  box-shadow: 0 -10px 36px rgba(0,0,0,.45);
}
.mobile-more-sheet.visible { display: block; transform: translateY(0); }
.mobile-more-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-sm); }
.mobile-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px;
  border-radius: var(--radius-sm); background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600;
  transition: all var(--transition-fast);
}
.mobile-more-item svg { width: 24px; height: 24px; pointer-events: none; }
.mobile-more-item span { pointer-events: none; }
.mobile-more-item.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.mobile-more-item:active { transform: scale(.95); }

/* ════ MODAL ═════════════════════════════════════════════════ */
.modal-container {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  z-index: 1500; padding: var(--space-md); pointer-events: none; animation: cmdFade 280ms ease;
}
.modal-container.visible { display: flex !important; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); }
.modal-content {
  background: var(--bg-secondary); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); width: 100%; max-width: 520px; position: relative; z-index: 1001;
  box-shadow: 0 30px 70px -12px rgba(0,0,0,.6); animation: cmdPop 280ms cubic-bezier(.16,1,.3,1);
}
.modal-header { padding: 16px var(--space-lg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: var(--fs-lg); }
.modal-body { padding: var(--space-lg); max-height: 80vh; overflow-y: auto; }

/* ════ ONAY DİYALOĞU ═════════════════════════════════════════ */
.confirm-overlay { position: fixed; inset: 0; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: var(--space-md); animation: cmdFade 200ms ease; }
.confirm-dialog { background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-lg); width: 100%; max-width: 400px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.6); animation: cmdPop 260ms cubic-bezier(.16,1,.3,1); }
.confirm-icon { font-size: 2.6rem; margin-bottom: var(--space-md); }
.confirm-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-xs); }
.confirm-msg { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-lg); line-height: 1.6; }
.confirm-actions { display: flex; gap: var(--space-sm); justify-content: center; }
.confirm-actions .btn { min-width: 100px; }

/* ════ ARAÇ ÇUBUĞU (sayfa-içi arama/filtre) ══════════════════ */
.toolbar { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.toolbar-search { flex: 1; min-width: 200px; position: relative; }
.toolbar-search .form-input { padding-left: 36px; height: 42px; font-size: var(--fs-sm); }
.toolbar-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.toolbar-filter .form-input { height: 42px; font-size: var(--fs-sm); min-width: 130px; }

/* ════ DOSYA YÜKLEME ═════════════════════════════════════════ */
.file-upload-area { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-lg); text-align: center; cursor: pointer; transition: all var(--transition-fast); position: relative; background: var(--bg-tertiary); }
.file-upload-area:hover { border-color: var(--accent); background: var(--accent-faint); }
.file-upload-area.has-file { border-color: var(--green); border-style: solid; }
.file-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-upload-icon { font-size: 2rem; margin-bottom: var(--space-xs); }
.file-upload-text { font-size: var(--fs-sm); color: var(--text-muted); }
.file-upload-name { font-size: var(--fs-sm); color: var(--green); font-weight: 600; margin-top: var(--space-xs); }

/* ════ TABLO İÇİ AKSİYON BUTONLARI ═══════════════════════════ */
.actions-cell { display: flex; gap: 4px; align-items: center; }
.btn-xs { padding: 5px 9px; font-size: var(--fs-xs); border-radius: 7px; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; transition: all var(--transition-fast); }
.btn-xs:active { transform: scale(.94); }
.btn-edit { background: rgba(77,168,255,.13); color: var(--blue); }
.btn-edit:hover { background: rgba(77,168,255,.26); }
.btn-delete { background: rgba(244,71,94,.1); color: var(--red); }
.btn-delete:hover { background: rgba(244,71,94,.24); }
.btn-detail { background: rgba(168,114,255,.1); color: var(--purple); }
.btn-detail:hover { background: rgba(168,114,255,.24); }
.btn-pay { background: rgba(22,199,132,.1); color: var(--green); }
.btn-pay:hover { background: rgba(22,199,132,.24); }
.btn-sell { background: var(--accent-soft); color: var(--accent); }
.btn-sell:hover { background: rgba(255,96,48,.28); }

/* ════ TOAST ═════════════════════════════════════════════════ */
.toast-container { position: fixed; top: var(--space-lg); right: var(--space-lg); z-index: 3000; display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; }
.toast {
  pointer-events: auto; background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); min-width: 280px; max-width: 420px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5); animation: toastIn 320ms cubic-bezier(.16,1,.3,1) forwards;
}
.toast-success { border-left: 3px solid var(--green); }
.toast-error { border-left: 3px solid var(--red); }
.toast-info { border-left: 3px solid var(--blue); }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast-msg { flex: 1; }
.toast-close { cursor: pointer; color: var(--text-muted); font-size: 1.2rem; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.toast.toast-out { animation: toastOut 300ms ease forwards; }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ════ DETAY PANELİ ══════════════════════════════════════════ */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.detail-item { padding: var(--space-sm); background: var(--glass); border-radius: var(--radius-sm); }
.detail-label { font-size: var(--fs-xs); text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.detail-value { font-size: var(--fs-base); font-weight: 600; margin-top: 3px; }
.detail-full { grid-column: 1 / -1; }

/* ════ BOM / STOK UYARI ══════════════════════════════════════ */
.bom-section { margin-top: var(--space-md); }
.bom-section h4 { font-size: var(--fs-sm); margin-bottom: var(--space-sm); color: var(--accent); }
.bom-add-row { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); align-items: flex-end; }
.bom-add-row .form-input { height: 38px; font-size: var(--fs-sm); }
.bom-add-row .btn-xs { height: 38px; }
.stock-alert { background: rgba(244,71,94,.08); border: 1px solid rgba(244,71,94,.2); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); }
.stock-alert-item { font-size: var(--fs-sm); padding: 4px 0; display: flex; justify-content: space-between; }
.stock-alert-item .need { color: var(--red); font-weight: 600; }
.stock-alert-item .have { color: var(--text-muted); }

/* ════ CARİ / SENET-ÇEK BİLEŞENLERİ ══════════════════════════ */
.ledger-type-alacak { color: var(--green); }
.ledger-type-verecek { color: var(--red); }

.note-dir-help { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; background: var(--accent-faint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm); margin-bottom: var(--space-md); }
.note-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-sm); margin-bottom: var(--space-md); }
.note-sum-card { background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); box-shadow: var(--shadow-card); }
.note-sum-card--alacak { border-top-color: var(--green); }
.note-sum-card--borc { border-top-color: var(--red); }
.note-sum-card--risk { border-top-color: var(--accent); }
.note-sum-card--warn { border-top-color: var(--red); background: rgba(244,71,94,.06); }
.note-sum-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.note-sum-val { font-size: var(--fs-lg); font-weight: 700; margin-top: 4px; }
.note-sum-card--alacak .note-sum-val { color: var(--green); }
.note-sum-card--borc .note-sum-val { color: var(--red); }
.note-sum-card--risk .note-sum-val { color: var(--accent); }
.note-sum-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.note-seg { display: inline-flex; gap: 4px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; margin-bottom: var(--space-md); }
.note-seg-btn { padding: 7px 16px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); transition: all var(--transition-fast); }
.note-seg-btn.active { background: linear-gradient(135deg,var(--accent),var(--accent-dark)); color: #fff; }
.holder-self { color: var(--green); font-weight: 600; }
.cell-overdue { color: var(--red); font-weight: 600; }
.note-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.note-detail-amount { font-size: var(--fs-xl); font-weight: 700; color: var(--accent); }
.note-stepper { display: flex; align-items: flex-start; margin: var(--space-md) 0 var(--space-lg); }
.note-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 auto; min-width: 84px; }
.note-step-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; border: 2px solid var(--border); color: var(--text-muted); background: var(--bg-elevated); transition: all var(--transition-fast); }
.note-step-label { font-size: var(--fs-sm); font-weight: 600; margin-top: 6px; color: var(--text-secondary); }
.note-step-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; max-width: 96px; line-height: 1.3; }
.note-step-line { flex: 1 1 auto; height: 2px; background: var(--border); margin-top: 17px; min-width: 18px; }
.note-step-line--done { background: var(--green); opacity: .55; }
.note-step-line--pending { background: var(--border); }
.note-step--done .note-step-dot, .note-step--success .note-step-dot { background: rgba(22,199,132,.15); border-color: var(--green); color: var(--green); }
.note-step--active .note-step-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint); }
.note-step--active .note-step-label, .note-step--active .note-step-sub { color: var(--accent); }
.note-step--done-blue .note-step-dot { background: rgba(77,168,255,.15); border-color: var(--blue); color: var(--blue); }
.note-step--error .note-step-dot { background: rgba(244,71,94,.15); border-color: var(--red); color: var(--red); }
.net-position { border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); border-left: 3px solid; }
.net-position-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.03em; }
.net-position-desc { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.net-position--green { background: rgba(22,199,132,.08); border-color: var(--green); }
.net-position--green .net-position-title { color: var(--green); }
.net-position--red { background: rgba(244,71,94,.08); border-color: var(--red); }
.net-position--red .net-position-title { color: var(--red); }
.net-position--amber { background: var(--accent-faint); border-color: var(--accent); }
.net-position--amber .net-position-title { color: var(--accent); }
.note-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-md) 0; }
.ciro-timeline { position: relative; }
.ciro-step { display: flex; gap: var(--space-sm); padding-bottom: var(--space-sm); position: relative; }
.ciro-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: var(--border); }
.ciro-step-marker { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: rgba(77,168,255,.15); color: var(--blue); border: 1px solid var(--blue); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; z-index: 1; }
.ciro-step-route { font-size: var(--fs-sm); }
.ciro-arrow { color: var(--accent); margin: 0 4px; }
.ciro-step-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cashflow-card { margin-bottom: var(--space-md); }
.cashflow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.cashflow-head h4 { font-size: var(--fs-md); color: var(--accent); }
.cashflow-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.cashflow-horizons { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-sm); }
.cf-h { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm); text-align: center; }
.cf-h--overdue { border-color: var(--red); background: rgba(244,71,94,.06); }
.cf-h-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 6px; }
.cf-h-row { font-size: var(--fs-sm); font-weight: 600; }
.cf-in { color: var(--green); }
.cf-out { color: var(--red); }
.cf-h-net { font-size: var(--fs-md); font-weight: 700; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.cf-net-pos { color: var(--green); }
.cf-net-neg { color: var(--red); }
.cf-h-count { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cashflow-upcoming-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: var(--space-md) 0 var(--space-sm); }
.cashflow-upcoming { display: flex; flex-direction: column; gap: 6px; }
.cf-item { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: var(--space-sm); padding: 8px 10px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.cf-item-date { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.cf-item-name { font-size: var(--fs-sm); }
.cf-item-amt { font-size: var(--fs-sm); font-weight: 700; text-align: right; }
.cf-chip { font-size: 0.56rem; padding: 2px 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cf-chip--late { background: rgba(244,71,94,.15); color: var(--red); }

/* ════ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .dash-hero-grid { grid-template-columns: repeat(2,1fr); }
  .dash-glance-grid { grid-template-columns: repeat(3,1fr); }
  .dash-bottom-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); z-index: 1200; box-shadow: none; width: 280px; }
  .sidebar.open { transform: translateX(0); box-shadow: 12px 0 40px rgba(0,0,0,.5); }
  .sidebar-toggle { display: inline-flex !important; }
  .main-content { margin-left: 0 !important; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .topbar-search { min-width: 150px; }
}

@media (max-width: 768px) {
  :root { --bottom-nav-height: 62px; }
  .sidebar { width: 280px; }
  .main-content { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0)); }
  .topbar { padding: 0 var(--space-md); gap: 10px; }
  .topbar-title { font-size: var(--fs-md); }
  .topbar-clock { display: none; }
  /* Mobilde arama → sadece ikon; "Ctrl K" ve uzun metin gizli */
  .topbar-search { min-width: 0; width: 40px; padding: 0; justify-content: center; flex: 0 0 auto; }
  .topbar-search-text, .topbar-search-kbd { display: none; }
  .page-content { padding: var(--space-md); }

  .bottom-nav.is-active { display: block; }

  .dash-hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .dash-hero-card { padding: 14px 15px; gap: 11px; }
  .dash-hero-icon { width: 42px; height: 42px; }
  .dash-hero-icon svg { width: 20px; height: 20px; }
  .dash-hero-value { font-size: var(--fs-lg); }
  .dash-glance-grid { grid-template-columns: repeat(3,1fr); gap: var(--space-xs); }
  .dash-glance-card { padding: 11px; }
  .dash-glance-icon { width: 30px; height: 30px; }
  .dash-glance-icon svg { width: 15px; height: 15px; }
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }

  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 520px; }
  .data-table th, .data-table td { padding: 9px; font-size: var(--fs-xs); white-space: nowrap; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-search { min-width: 100%; }
  .form-input, input, select, textarea { font-size: 16px; }

  .modal-container { align-items: flex-end; padding: 0; }
  .modal-content { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
  .modal-body { max-height: 76vh; }

  .toast-container { left: var(--space-sm); right: var(--space-sm); top: auto; bottom: calc(var(--bottom-nav-height) + var(--space-sm) + env(safe-area-inset-bottom,0)); }
  .toast { min-width: auto; width: 100%; max-width: 100%; }

  .note-summary { grid-template-columns: repeat(2,1fr); }
  .note-stepper { overflow-x: auto; }
  .cashflow-horizons { grid-template-columns: repeat(2,1fr); }
  .cf-item { grid-template-columns: 1fr auto; }
  .cf-item-name { display: none; }
  .detail-grid { grid-template-columns: 1fr 1fr; }

  /* Login — tek kolon, görsel paneli gizle */
  .login-screen { padding: 0; }
  .login-shell { grid-template-columns: 1fr; max-width: 460px; min-height: auto; margin: auto var(--space-sm); }
  .login-visual { display: none; }
  .login-form-panel { padding: 36px 26px; }
}

@media (max-width: 480px) {
  .dash-hero-grid { grid-template-columns: 1fr 1fr; }
  .dash-glance-grid { grid-template-columns: repeat(3,1fr); }
  .topbar-title { font-size: var(--fs-base); }
  .qa-grid { grid-template-columns: repeat(2,1fr); }
  .mobile-more-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── Aydınlık tema ince ayarlar ── */
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .avatar { color: #fff; }
[data-theme="light"] .nav-badge--gold { color: #fff; }
[data-theme="light"] .theme-toggle-btn.active { color: #fff; }

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

/* ════ PRINT ═════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .bottom-nav, .more-sheet-backdrop, .mobile-more-sheet,
  .sidebar-overlay, .toast-container, .orb, #cmd-palette, .qa-sheet, .qa-backdrop, #splash { display: none !important; }
  body::before { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
}