/* =========================================================
   ParsTech Oto Servis — Panel Kabuğu
   Masaüstü uygulaması hissi veren sekmeli arayüz
   ========================================================= */

/* ---------------------------------------------------------
   1. TASARIM JETONLARI
   --------------------------------------------------------- */
:root{
  --sb-w: 262px;
  --sb-w-rail: 70px;
  --topbar-h: 58px;
  --tabstrip-h: 42px;
  --statusbar-h: 28px;

  --ui-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-font: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --mono-font: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* marka */
  --accent: #6d5efc;
  --accent-600: #5a49e8;
  --accent-ink: #6d5efc;
  --accent-soft: rgba(109,94,252,.10);
  --accent-soft-2: rgba(109,94,252,.18);
  --warn: #f59e0b;
  --danger: #e5484d;
  --ok: #16a34a;

  /* sidebar — her iki temada da koyu kalır */
  --sb-bg-a: #0c1222;
  --sb-bg-b: #090e1b;
  --sb-line: rgba(255,255,255,.065);
  --sb-text: #9aa7c2;
  --sb-text-dim: rgba(255,255,255,.38);
  --sb-text-strong: #f2f5fb;
  --sb-hover: rgba(255,255,255,.055);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
}

[data-bs-theme="light"]{
  --app-bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --border: rgba(16,24,40,.09);
  --border-strong: rgba(16,24,40,.15);
  --text: #121926;
  --text-soft: #3d485c;
  --text-muted: #6b7789;
  --strip-bg: #e2e7f0;

  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px -6px rgba(16,24,40,.10);
  --sh-3: 0 18px 44px -12px rgba(16,24,40,.26), 0 2px 8px rgba(16,24,40,.07);
  --ring: 0 0 0 3px rgba(109,94,252,.16);
}

[data-bs-theme="dark"]{
  --accent-ink: #a79bff;
  --accent-soft: rgba(167,155,255,.13);
  --accent-soft-2: rgba(167,155,255,.22);

  --app-bg: #070b14;
  --surface: #0f1524;
  --surface-2: #151d30;
  --surface-3: #1b243a;
  --border: rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.14);
  --text: #e7ecf7;
  --text-soft: #b9c3d8;
  --text-muted: #8491ac;
  --strip-bg: #121a2c;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.6);
  --sh-3: 0 22px 50px -14px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.4);
  --ring: 0 0 0 3px rgba(167,155,255,.22);
}

*{ -webkit-tap-highlight-color: transparent; }
*:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 6px; }

html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--ui-font);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: -.004em;
  background: var(--app-bg);
  color: var(--text);
  overflow: hidden;                 /* masaüstü uygulaması gibi: sayfa kaymaz */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

h1,h2,h3,h4,h5,h6,.display-font{
  font-family: var(--display-font);
  letter-spacing: -.02em;
  font-weight: 700;
}

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  border-radius: 99px; border:3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--text-muted) 52%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner{ background: transparent; }

::selection{ background: var(--accent-soft-2); color: var(--text); }

/* ---------------------------------------------------------
   2. BOOTSTRAP'I MARKAYA UYARLA
   --------------------------------------------------------- */
:root{
  --bs-body-font-family: var(--ui-font);
  --bs-body-font-size: 13.5px;
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-color: var(--border);
  --bs-primary: #6d5efc;
  --bs-primary-rgb: 109,94,252;
  --bs-link-color: var(--accent-ink);
  --bs-link-hover-color: var(--accent-600);
  --bs-primary-bg-subtle: var(--accent-soft);
  --bs-primary-border-subtle: var(--accent-soft-2);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color: var(--text);
}

/* --- butonlar --- */
.btn{
  --bs-btn-border-radius: 9px;
  font-weight: 550;
  letter-spacing: -.005em;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:active{ transform: translateY(.5px); }
.btn-sm{ --bs-btn-padding-y:.34rem; --bs-btn-padding-x:.72rem; --bs-btn-font-size:12.5px; --bs-btn-border-radius:8px; }
.btn i{ vertical-align:-.06em; }

.btn-primary{
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600);
  --bs-btn-active-bg: var(--accent-600); --bs-btn-active-border-color: var(--accent-600);
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{ box-shadow: 0 4px 14px -4px rgba(109,94,252,.6), inset 0 1px 0 rgba(255,255,255,.16); }

.btn-outline-secondary{
  --bs-btn-color: var(--text-soft);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border-strong);
  box-shadow: var(--sh-1);
}
.btn-outline-primary{
  --bs-btn-color: var(--accent-ink);
  --bs-btn-border-color: var(--accent-soft-2);
  --bs-btn-bg: var(--accent-soft);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-600);
  --bs-btn-active-border-color: var(--accent-600);
}
.btn-outline-warning{
  --bs-btn-color: var(--warn);
  --bs-btn-border-color: rgba(245,158,11,.3);
  --bs-btn-bg: rgba(245,158,11,.08);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn);
}
.btn-warning{ --bs-btn-bg: var(--warn); --bs-btn-border-color: var(--warn); --bs-btn-color:#fff;
  --bs-btn-hover-bg:#e08c06; --bs-btn-hover-border-color:#e08c06; --bs-btn-hover-color:#fff; }
.btn-link{ text-decoration:none; }

.btn-group > .btn{ box-shadow:none; }
.btn-group .btn-outline-secondary.active{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft-2); }

/* --- form alanları --- */
.form-control, .form-select{
  background-color: var(--surface);
  border-color: var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control::placeholder{ color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.form-control:focus, .form-select:focus{
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
  color: var(--text);
}
.form-control-sm, .form-select-sm{ font-size:12.5px; padding:.36rem .6rem; border-radius: var(--r-sm); }
.form-select{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7789' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label{
  font-size: 11px; font-weight: 600;
  letter-spacing: .035em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.form-text{ color: var(--text-muted); }
.form-check-input{ border-color: var(--border-strong); background-color: var(--surface); }
.form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus{ border-color: var(--accent); box-shadow: var(--ring); }
.form-check-label{ color: var(--text-soft); }
.input-group-text{
  background: var(--surface-2); border-color: var(--border-strong);
  color: var(--text-muted); font-size:12.5px; border-radius: var(--r-sm);
}
.input-group .btn{ border-color: var(--border-strong); }

/* --- açılır menüler --- */
.dropdown-menu{
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--r-lg);
  --bs-dropdown-link-color: var(--text-soft);
  --bs-dropdown-link-hover-bg: var(--accent-soft);
  --bs-dropdown-link-hover-color: var(--accent-ink);
  --bs-dropdown-link-active-bg: var(--accent-soft);
  --bs-dropdown-link-active-color: var(--accent-ink);
  --bs-dropdown-font-size: 13px;
  --bs-dropdown-padding-x: 5px;
  --bs-dropdown-padding-y: 5px;
  --bs-dropdown-item-padding-y: .42rem;
  box-shadow: var(--sh-3);
  backdrop-filter: blur(12px);
}
.dropdown-item{ border-radius: var(--r-sm); font-weight: 500; }
.dropdown-divider{ border-color: var(--border); }

kbd{
  font-family: var(--ui-font);
  font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--text-muted);
  line-height: 1;
}
code{ font-family: var(--mono-font); font-size: .88em; color: var(--accent-ink); }
hr{ border-color: var(--border); opacity:1; }

/* ---------------------------------------------------------
   3. KABUK
   --------------------------------------------------------- */
.app-shell{
  display:flex;
  height:100dvh;
  width:100%;
  overflow:hidden;
  background: var(--app-bg);
}
.app-main{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ---------------------------------------------------------
   4. SIDEBAR
   --------------------------------------------------------- */
.sidebar{
  position:relative;
  flex: 0 0 var(--sb-w);
  width: var(--sb-w);
  background:
    radial-gradient(130% 55% at 0% 0%, rgba(109,94,252,.16), transparent 62%),
    linear-gradient(180deg, var(--sb-bg-a), var(--sb-bg-b));
  color: var(--sb-text);
  display:flex; flex-direction:column; overflow:hidden;
  transition: flex-basis .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1);
  z-index: 1045;
}
.sidebar::after{
  content:""; position:absolute; inset:0 0 0 auto; width:1px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  pointer-events:none;
}
.app-shell.rail .sidebar{ flex-basis: var(--sb-w-rail); width: var(--sb-w-rail); }

.sidebar-brand{
  height: var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; gap:11px;
  padding:0 14px;
  border-bottom:1px solid var(--sb-line);
  position:relative;
}
.brand-mark{
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: linear-gradient(140deg, #9b8cff, var(--accent) 55%, #4a35c8);
  color:#fff; font-size:16px;
  box-shadow: 0 6px 16px -4px rgba(109,94,252,.65), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; overflow:hidden; }
.brand-text strong{
  font-family: var(--display-font);
  color: var(--sb-text-strong);
  font-size:13.5px; font-weight:800; letter-spacing:.1em;
}
.brand-text small{ color: var(--sb-text-dim); font-size:9px; font-weight:600; letter-spacing:.16em; }

.btn-rail{
  position:absolute; right:10px;
  width:22px; height:22px;
  border:1px solid var(--sb-line);
  background: rgba(255,255,255,.04);
  color: var(--sb-text);
  border-radius:7px;
  display:grid; place-items:center;
  font-size:10px; transition:.16s;
}
.btn-rail:hover{ background: rgba(255,255,255,.1); color:#fff; }
.app-shell.rail .btn-rail i{ transform: rotate(180deg); }

.sidebar-company{
  display:flex; align-items:center; gap:10px;
  margin:12px 12px 6px; padding:9px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--sb-line);
  border-radius: var(--r-md);
  cursor:pointer; transition:.16s;
}
.sidebar-company:hover{ border-color: rgba(255,255,255,.14); }
.company-avatar{
  width:29px; height:29px; flex:0 0 29px;
  border-radius:8px; display:grid; place-items:center;
  background: linear-gradient(140deg, rgba(167,155,255,.35), rgba(109,94,252,.18));
  color:#c3b8ff; font-weight:700; font-size:10.5px;
  border:1px solid rgba(255,255,255,.08);
}
.company-info{ display:flex; flex-direction:column; line-height:1.3; overflow:hidden; }
.company-name{ color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.company-period{ font-size:10.5px; color: var(--sb-text-dim); font-variant-numeric: tabular-nums; }

.sidebar-nav{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding: 6px 10px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
.sidebar-nav::-webkit-scrollbar{ width:8px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-width:2px; background-clip: padding-box; }

.nav-caption{
  font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color: var(--sb-text-dim);
  padding: 16px 10px 7px;
  white-space:nowrap;
}

.nav-item{ position:relative; }
.nav-link-x{
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:11px;
  padding: 8.5px 11px;
  border:0; background:transparent;
  color: var(--sb-text);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  text-align:left; white-space:nowrap;
  transition: background .15s, color .15s;
}
.nav-link-x > i:first-child{ font-size:15.5px; width:19px; flex:0 0 19px; text-align:center; opacity:.9; }
.nav-link-x .nav-label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.nav-link-x .caret{ font-size:9px; opacity:.45; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.nav-link-x:hover{ background: var(--sb-hover); color:#eef2fb; }

.nav-link-x.active{
  background: linear-gradient(90deg, rgba(109,94,252,.9), rgba(109,94,252,.65));
  color:#fff; font-weight:600;
  box-shadow: 0 6px 18px -8px rgba(109,94,252,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.nav-link-x.active > i:first-child{ opacity:1; }
.nav-link-x.active::before{
  content:""; position:absolute; left:-10px; top:50%; transform: translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:#fff;
}
.nav-item.open > .nav-link-x > .caret{ transform: rotate(90deg); opacity:.8; }
.nav-item.open > .nav-link-x{ color:#eef2fb; background: rgba(255,255,255,.035); }

.nav-badge{
  font-size:9.5px; font-weight:700; line-height:1.6;
  min-width:18px; text-align:center;
  padding:0 5px; border-radius:20px;
  background: var(--warn); color:#271603;
  font-variant-numeric: tabular-nums;
}

.nav-sub{
  display:none;
  margin: 3px 0 8px 22px;
  padding-left: 11px;
  border-left: 1px solid var(--sb-line);
}
.nav-item.open > .nav-sub{ display:block; animation: subIn .18s ease; }
@keyframes subIn{ from{ opacity:0; transform: translateY(-3px);} to{ opacity:1; transform:none; } }
.nav-sub .nav-link-x{ font-size:12.5px; padding:6.5px 10px; gap:10px; color: color-mix(in srgb, var(--sb-text) 88%, transparent); }
.nav-sub .nav-link-x > i:first-child{ font-size:5px; width:8px; flex:0 0 8px; opacity:.4; }
.nav-sub .nav-link-x:hover > i:first-child{ opacity:.9; }
.nav-sub .nav-link-x.active{
  background: var(--sb-hover); color:#fff; box-shadow:none;
}
.nav-sub .nav-link-x.active > i:first-child{ color: var(--accent-ink); opacity:1; }
.nav-sub .nav-link-x.active::before{ left:-12px; width:2px; height:14px; background: var(--accent-ink); }

.sidebar-foot{
  flex:0 0 auto;
  border-top:1px solid var(--sb-line);
  padding:9px 10px; display:flex; gap:7px;
}
.sf-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 8px; border:1px solid transparent; border-radius: var(--r-sm);
  background: rgba(255,255,255,.035); color: var(--sb-text);
  font-size:11.5px; font-weight:500; white-space:nowrap; transition:.15s;
}
.sf-btn:hover{ background: rgba(255,255,255,.08); color:#fff; border-color: var(--sb-line); }

/* --- daraltılmış (rail) mod --- */
.app-shell.rail .brand-text,
.app-shell.rail .company-info,
.app-shell.rail .nav-label,
.app-shell.rail .caret,
.app-shell.rail .nav-badge,
.app-shell.rail .sf-btn span{ display:none; }
.app-shell.rail .sidebar-brand{ padding:0 12px; justify-content:center; }
.app-shell.rail .btn-rail{ display:none; }
.app-shell.rail .sidebar-company{ justify-content:center; padding:8px; margin:12px 10px 6px; }
.app-shell.rail .nav-link-x{ justify-content:center; padding:10px 0; }
.app-shell.rail .nav-link-x.active::before{ display:none; }
.app-shell.rail .nav-caption{ height:1px; padding:0; margin:12px 14px; background: var(--sb-line); overflow:hidden; color:transparent; }
.app-shell.rail .nav-sub{ display:none !important; }
.app-shell.rail .sidebar-nav{ padding:6px 11px; }
.app-shell.rail .sidebar-foot{ flex-direction:column; }

.app-shell.rail .nav-link-x[data-title]::after{
  content: attr(data-title);
  position:absolute; left: calc(100% + 10px); top:50%;
  transform: translateY(-50%) translateX(-4px);
  background: #1a2238; color:#fff;
  padding:6px 11px; border-radius: var(--r-sm);
  font-size:12px; font-weight:500; white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--sh-3);
  opacity:0; pointer-events:none; transition:.14s; z-index:60;
}
.app-shell.rail .nav-link-x:hover::after{ opacity:1; transform: translateY(-50%) translateX(0); }

.sidebar-backdrop{ display:none; }

/* ---------------------------------------------------------
   5. ÜST BAR
   --------------------------------------------------------- */
.topbar{
  flex:0 0 var(--topbar-h); height: var(--topbar-h);
  display:flex; align-items:center; gap:10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

.icon-btn{
  position:relative;
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  border:1px solid transparent; border-radius: var(--r-sm);
  background:transparent; color: var(--text-muted);
  font-size:15px; transition:.15s;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn:active{ transform: translateY(.5px); }
.icon-btn .dot{
  position:absolute; top:6px; right:7px;
  width:7px; height:7px; border-radius:50%;
  background: var(--warn); border:2px solid var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 28%, transparent);
}

.global-search{
  flex: 1 1 400px; max-width: 480px;
  display:flex; align-items:center; gap:9px;
  height:36px; padding: 0 6px 0 11px;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.global-search:hover{ border-color: var(--border-strong); }
.global-search:focus-within{ background: var(--surface); border-color: var(--accent); box-shadow: var(--ring); }
.global-search > i{ font-size:14px; }
.global-search input{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  color: var(--text); font-size:12.8px; font-family: var(--ui-font);
}
.global-search input:focus{ box-shadow:none; }

.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:3px; }
.topbar-actions::before{
  content:""; width:1px; height:22px; margin:0 7px 0 3px;
  background: var(--border);
}

.user-chip{
  display:flex; align-items:center; gap:9px;
  padding:3px 10px 3px 3px;
  border:1px solid transparent; border-radius: 30px;
  background: var(--surface-2); color: var(--text);
  transition:.15s; margin-left:4px;
}
.user-chip:hover{ border-color: var(--border-strong); background: var(--surface-3); }
.user-chip > .bi-chevron-down{ font-size:9px; color: var(--text-muted); }
.user-avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(140deg, #9b8cff, var(--accent) 60%, #4a35c8);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.user-meta{ flex-direction:column; line-height:1.2; text-align:left; }
.user-name{ font-size:12.5px; font-weight:600; }
.user-role{ font-size:10.5px; color: var(--text-muted); }

/* ---------------------------------------------------------
   6. SEKME ŞERİDİ (tarayıcı sekmesi davranışı)
   --------------------------------------------------------- */
.tabstrip{
  position:relative;
  flex: 0 0 var(--tabstrip-h); height: var(--tabstrip-h);
  display:flex; align-items:flex-end;
  gap:2px; padding: 0 7px;
  background: var(--strip-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 60%, transparent);
  user-select:none; z-index: 15;
}

.strip-btn{
  flex:0 0 auto;
  width:27px; height:27px; margin-bottom:6px;
  display:grid; place-items:center;
  border:0; border-radius: 7px;
  background:transparent; color: var(--text-muted);
  font-size:12.5px; transition:.14s;
}
.strip-btn:hover{ background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.strip-btn:disabled{ opacity:.25; pointer-events:none; }
.strip-btn-accent{ color: var(--accent-ink); }
.strip-btn-accent:hover{ background: var(--accent-soft); }

.tabstrip-rail{
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; height:100%;
  display:flex; align-items:flex-end;
}
.tabstrip-rail::-webkit-scrollbar{ display:none; }
.tabstrip-list{ display:flex; align-items:flex-end; gap:1px; height:100%; padding-top:6px; }

.tab{
  position:relative;
  flex: 0 0 auto;
  display:flex; align-items:center; gap:8px;
  height: calc(var(--tabstrip-h) - 6px);
  max-width: 210px; min-width: 44px;
  padding: 0 7px 0 12px;
  border-radius: 11px 11px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.6px; font-weight: 500;
  cursor: default; white-space:nowrap;
  transition: background .14s, color .14s;
}
.tab:not(.active):hover{
  background: color-mix(in srgb, var(--app-bg) 55%, transparent);
  color: var(--text-soft);
}
/* sekmeler arası ince ayraç */
.tab:not(.active)::before{
  content:""; position:absolute; left:-1px; top:9px; bottom:9px; width:1px;
  background: color-mix(in srgb, var(--text-muted) 24%, transparent);
}
.tab:not(.active):first-child::before,
.tab:not(.active):hover::before,
.tab.active + .tab:not(.active)::before,
.tab:hover + .tab:not(.active)::before{ opacity:0; }

/* aktif sekme: içerik alanıyla birleşen chrome-tarzı omuzlar */
.tab.active{
  background: var(--app-bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--accent);
  z-index:2;
}
.tab.active::before,
.tab.active::after{
  content:""; position:absolute; bottom:0;
  width:12px; height:12px;
  background: var(--app-bg);
  opacity:1; pointer-events:none;
}
.tab.active::before{
  left:-12px; top:auto;
  -webkit-mask-image: radial-gradient(circle 12px at 0 0, transparent 0 12px, #000 12.2px);
          mask-image: radial-gradient(circle 12px at 0 0, transparent 0 12px, #000 12.2px);
}
.tab.active::after{
  right:-12px;
  -webkit-mask-image: radial-gradient(circle 12px at 100% 0, transparent 0 12px, #000 12.2px);
          mask-image: radial-gradient(circle 12px at 100% 0, transparent 0 12px, #000 12.2px);
}

.tab.dragging{ opacity:.4; }
.tab.drop-before{ box-shadow: inset 3px 0 0 var(--accent); }
.tab.drop-after{ box-shadow: inset -3px 0 0 var(--accent); }

.tab > i.tab-icon{ font-size:13.5px; flex:0 0 auto; opacity:.7; }
.tab.active > i.tab-icon{ color: var(--accent-ink); opacity:1; }
.tab .tab-title{ overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; }
.tab .tab-dirty{
  width:6px; height:6px; border-radius:50%; background: var(--warn); flex:0 0 auto; display:none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent);
}
.tab.dirty .tab-dirty{ display:block; }
.tab .tab-close{
  flex:0 0 auto;
  width:19px; height:19px; border:0; border-radius: 6px;
  background:transparent; color:inherit;
  display:grid; place-items:center; font-size:9.5px;
  opacity:.5; transition:.13s;
}
.tab .tab-close:hover{ background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); opacity:1; }
.tab.pinned .tab-close{ display:none; }
.tab.pinned{ padding-right:12px; }
.tab.pinned > i.tab-icon{ color: var(--accent-ink); opacity:.9; }

/* ---------------------------------------------------------
   7. SEKME İÇERİĞİ
   --------------------------------------------------------- */
.tab-content-area{
  flex:1 1 auto; position:relative; min-height:0;
  background: var(--app-bg);
}
.tab-pane-x{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  display:none;
  padding: 18px 20px 24px;
  background:
    radial-gradient(110% 40% at 50% 0%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%),
    var(--app-bg);
  -webkit-overflow-scrolling: touch;
}
.tab-pane-x.active{ display:block; animation: paneIn .18s ease; }
@keyframes paneIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

.tab-loading{ position:absolute; inset:0; display:grid; place-items:center; color: var(--text-muted); }

.tab-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color: var(--text-muted); text-align:center; padding:20px;
  background: var(--app-bg);
}
.tab-empty i{ font-size:44px; opacity:.22; margin-bottom:8px; }
.tab-empty h5{ margin:0; color: var(--text); font-size:16px; }
.tab-empty p{ margin:0 0 12px; font-size:13px; }

/* ---------------------------------------------------------
   8. DURUM ÇUBUĞU
   --------------------------------------------------------- */
.statusbar{
  flex:0 0 var(--statusbar-h); height: var(--statusbar-h);
  display:flex; align-items:center; gap:0;
  padding: 0 14px;
  background: var(--surface);
  border-top:1px solid var(--border);
  font-size:11px; color: var(--text-muted); font-weight:500;
}
.sb-item{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding: 0 11px; height:100%;
  border-right: 1px solid var(--border);
}
.sb-item:first-child{ padding-left:0; }
.sb-item:last-child{ border-right:0; padding-right:0; }
.sb-item .bi-circle-fill{ font-size:6px; }
.sb-item .bi{ opacity:.7; }
.sb-spacer{ flex:1 1 auto; }
#sbClock, #sbTabCount{ font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   9. SAĞ TIK MENÜSÜ + TOAST
   --------------------------------------------------------- */
.ctx-menu{
  position:fixed; z-index:2000;
  display:none; flex-direction:column;
  min-width:206px; padding:5px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.ctx-menu.show{ display:flex; animation: ctxIn .13s cubic-bezier(.4,0,.2,1); }
@keyframes ctxIn{ from{ opacity:0; transform: scale(.97) translateY(-3px);} to{ opacity:1; transform:none; } }
.ctx-menu button{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border:0; border-radius: var(--r-sm);
  background:transparent; color: var(--text-soft);
  font-size:12.8px; font-weight:500; text-align:left;
  transition:.12s;
}
.ctx-menu button:hover{ background: var(--accent-soft); color: var(--accent-ink); }
.ctx-menu button i{ width:15px; font-size:12.5px; opacity:.8; }
.ctx-sep{ height:1px; margin:4px 7px; background: var(--border); }

.toast-stack{
  position:fixed; right:18px; bottom: calc(var(--statusbar-h) + 16px);
  z-index:2100; display:flex; flex-direction:column; gap:9px;
}
.toast-x{
  display:flex; align-items:center; gap:11px;
  min-width:260px; max-width:360px;
  padding:12px 15px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size:12.8px; font-weight:500; color: var(--text);
  animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.toast-x.success{ border-left-color: var(--ok); }
.toast-x.success > i{ color: var(--ok); }
.toast-x.warn{ border-left-color: var(--warn); }
.toast-x.warn > i{ color: var(--warn); }
.toast-x.error{ border-left-color: var(--danger); }
.toast-x.error > i{ color: var(--danger); }
.toast-x.info > i{ color: var(--accent-ink); }
.toast-x i{ font-size:16px; flex:0 0 auto; }
@keyframes toastIn{ from{ opacity:0; transform: translateX(26px) scale(.96);} to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------
   10. SAYFA BİLEŞENLERİ
   --------------------------------------------------------- */
.page-head{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px;
  margin-bottom:16px;
}
.page-head h4{
  margin:0; font-size:18.5px; font-weight:700;
  font-family: var(--display-font); letter-spacing:-.025em;
  display:flex; align-items:center;
}
.page-head .ph-sub{ font-size:12.5px; color: var(--text-muted); margin-top:3px; font-weight:450; }
.page-head .ph-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.card-x{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow:hidden;
}
.card-x + .card-x{ margin-top:16px; }
.card-x-head{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent);
  font-weight:650; font-size:12.5px;
  letter-spacing:-.01em; color: var(--text);
}
.card-x-head > .bi{ font-size:14px; }
.card-x-head .cx-actions{ margin-left:auto; display:flex; gap:7px; }
.card-x-body{ padding:16px; }
.card-x-body.p-0{ padding:0; }

/* --- KPI --- */
.kpi{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:13px;
  padding:15px 16px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  height:100%;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kpi:hover{ border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-1px); }
.kpi::after{
  content:""; position:absolute; right:-28px; top:-28px;
  width:90px; height:90px; border-radius:50%;
  background: currentColor; opacity:.04; color: var(--accent);
}
.kpi-ico{
  width:42px; height:42px; flex:0 0 42px;
  display:grid; place-items:center;
  border-radius: 12px; font-size:18px;
  box-shadow: inset 0 0 0 1px currentColor;
}
.kpi-val{
  font-family: var(--display-font);
  font-size:20px; font-weight:700; line-height:1.15;
  letter-spacing:-.03em; font-variant-numeric: tabular-nums;
}
.kpi-lbl{ font-size:11.5px; color: var(--text-muted); font-weight:500; margin-top:1px; }
.kpi-trend{ font-size:11px; margin-top:3px; font-weight:550; }
.kpi-trend .bi{ font-size:9px; }

/* renk tonları */
.tone-blue  { background: rgba(59,110,246,.11);  color:#3b6ef6; }
.tone-green { background: rgba(22,163,74,.11);   color:#16a34a; }
.tone-orange{ background: rgba(245,158,11,.13);  color:#d97706; }
.tone-red   { background: rgba(229,72,77,.11);   color:#e5484d; }
.tone-purple{ background: rgba(139,92,246,.12);  color:#8b5cf6; }
.tone-cyan  { background: rgba(6,182,212,.12);   color:#0891b2; }
[data-bs-theme="dark"] .tone-blue  { color:#7ea4ff; }
[data-bs-theme="dark"] .tone-green { color:#4ade80; }
[data-bs-theme="dark"] .tone-orange{ color:#fbbf24; }
[data-bs-theme="dark"] .tone-red   { color:#ff7b7f; }
[data-bs-theme="dark"] .tone-purple{ color:#b79bff; }
[data-bs-theme="dark"] .tone-cyan  { color:#45c8e0; }
.kpi-ico.tone-blue, .kpi-ico.tone-green, .kpi-ico.tone-orange,
.kpi-ico.tone-red, .kpi-ico.tone-purple, .kpi-ico.tone-cyan{ box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* --- tablolar --- */
.table-wrap{ overflow-x:auto; }
.table-x{
  width:100%; margin:0;
  border-collapse: separate; border-spacing:0;
  font-size:12.8px;
}
.table-x thead th{
  position:sticky; top:0; z-index:2;
  background: var(--surface-2);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-muted);
  white-space:nowrap; user-select:none;
}
.table-x thead th[data-sort]{ cursor:pointer; transition: color .14s; }
.table-x thead th[data-sort]:hover{ color: var(--accent-ink); }
.table-x tbody td{
  padding:10px 14px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  white-space:nowrap; vertical-align:middle;
  color: var(--text-soft);
  transition: background .12s;
}
.table-x tbody tr:last-child td{ border-bottom:0; }
.table-x tbody tr:hover td{ background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.table-x tbody tr.selected td{ background: var(--accent-soft); color: var(--text); }
.table-x tbody tr.table-danger-soft td{ background: color-mix(in srgb, var(--danger) 5%, transparent); }
.table-x tbody tr.table-danger-soft:hover td{ background: color-mix(in srgb, var(--danger) 9%, transparent); }
.table-x .num{ text-align:right; font-variant-numeric: tabular-nums; }
.table-x .fw-semibold, .table-x .fw-bold{ color: var(--text); }
.table-x input.form-control, .table-x select.form-select{
  background: transparent; box-shadow:none; border-color: transparent;
}
.table-x input.form-control:hover, .table-x select.form-select:hover{ border-color: var(--border); }
.table-x input.form-control:focus, .table-x select.form-select:focus{
  background: var(--surface); border-color: var(--accent);
}

/* --- plaka rozeti --- */
.plate{
  display:inline-flex; align-items:stretch; gap:6px;
  overflow:hidden; padding-right:8px;
  border:1px solid var(--border-strong);
  border-radius: 5px;
  background: #fbfcfe;
  color:#0f172a;
  font-family: var(--mono-font);
  font-weight:700; font-size:11.5px; letter-spacing:.02em;
  line-height: 1.65;
  box-shadow: var(--sh-1);
}
.plate::before{
  content:"TR";
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #1e46b8, #122c7a);
  color:#fff; font-size:7px; font-weight:700; letter-spacing:.04em;
  padding: 0 3px; min-width:15px;
}
[data-bs-theme="dark"] .plate{ background:#e8ecf5; border-color: rgba(255,255,255,.22); }

/* --- rozetler --- */
.badge-x{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius: 7px;
  font-size:10.5px; font-weight:650; letter-spacing:.005em;
  line-height:1.5;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:60px 20px; text-align:center; color: var(--text-muted);
}
.empty-state i{ font-size:40px; opacity:.25; }
.empty-state h5{ font-family: var(--display-font); }

/* ---------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1199.98px){
  .tab-pane-x{ padding:16px; }
}

@media (max-width: 991.98px){
  .sidebar{
    position:fixed; top:0; bottom:0; left:0;
    width: 278px; flex-basis:278px;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh-3);
  }
  .app-shell.sidebar-open .sidebar{ transform:none; }
  .sidebar-backdrop{
    display:block; position:fixed; inset:0;
    background: rgba(6,10,20,.55);
    backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .22s;
    z-index: 1040;
  }
  .app-shell.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }

  /* mobilde rail modu devre dışı */
  .app-shell.rail .sidebar{ flex-basis:278px; width:278px; }
  .app-shell.rail .brand-text,
  .app-shell.rail .company-info,
  .app-shell.rail .nav-label,
  .app-shell.rail .caret,
  .app-shell.rail .nav-badge,
  .app-shell.rail .sf-btn span{ display:revert; }
  .app-shell.rail .sidebar-brand{ justify-content:flex-start; padding:0 14px; }
  .app-shell.rail .nav-link-x{ justify-content:flex-start; padding:8.5px 11px; }
  .app-shell.rail .nav-link-x.active::before{ display:block; }
  .app-shell.rail .nav-link-x[data-title]::after{ display:none; }
  .app-shell.rail .nav-caption{ height:auto; padding:16px 10px 7px; margin:0; background:none; color: var(--sb-text-dim); }
  .app-shell.rail .nav-item.open > .nav-sub{ display:block !important; }
  .app-shell.rail .sidebar-foot{ flex-direction:row; }

  .global-search kbd{ display:none; }
  .topbar-actions::before{ display:none; }
  .tab{ max-width:170px; }
}

@media (max-width: 767.98px){
  .page-head .ph-actions{ margin-left:0; width:100%; }
  .card-x-body{ padding:14px; }
}

@media (max-width: 575.98px){
  :root{ --topbar-h: 54px; --tabstrip-h: 40px; --statusbar-h: 26px; }
  body{ font-size:13px; }
  .topbar{ padding:0 10px; gap:7px; }
  .global-search{ flex-basis:auto; height:34px; padding-left:10px; }
  .user-chip{ padding:3px; }
  .tab{ max-width:142px; padding:0 5px 0 10px; font-size:12px; gap:6px; }
  .tab-pane-x{ padding:12px 12px 20px; }
  .page-head{ margin-bottom:13px; }
  .page-head h4{ font-size:16.5px; }
  .kpi{ padding:12px; gap:11px; }
  .kpi-ico{ width:36px; height:36px; flex-basis:36px; font-size:15px; border-radius:10px; }
  .kpi-val{ font-size:17px; }
  .kpi-lbl{ font-size:11px; }
  .card-x{ border-radius: 12px; }
  .table-x thead th, .table-x tbody td{ padding:9px 11px; }
  .sb-item{ padding:0 8px; }
  .toast-stack{ left:12px; right:12px; bottom: calc(var(--statusbar-h) + 12px); }
  .toast-x{ min-width:0; max-width:none; }
}

/* dokunmatik: kapat butonu daha rahat hedeflenir */
@media (hover: none){
  .tab .tab-close{ opacity:.85; width:22px; height:22px; }
  .kpi:hover{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* yazdırma */
@media print{
  .sidebar, .topbar, .tabstrip, .statusbar, .toast-stack, .ctx-menu{ display:none !important; }
  .tab-pane-x{ position:static; overflow:visible; padding:0; background:none; }
  .card-x{ box-shadow:none; border-color:#ddd; break-inside: avoid; }
  body{ overflow:visible; background:#fff; }
}

/* =========================================================
   12. BACKOFFICE'E ÖZEL BİLEŞENLER
   ========================================================= */

/* --- ortam rozeti (DEV / CANLI) --- */
.env-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:7px;
  font-size:10px; font-weight:700; letter-spacing:.09em;
  white-space:nowrap; flex:0 0 auto;
}
.env-badge .bi{ font-size:6px; }
.env-badge.env-dev{
  background: rgba(245,158,11,.12); color:#b45309;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,.3);
}
.env-badge.env-live{
  background: rgba(22,163,74,.12); color:#15803d;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.3);
}
[data-bs-theme="dark"] .env-badge.env-dev{ color:#fbbf24; }
[data-bs-theme="dark"] .env-badge.env-live{ color:#4ade80; }

/* --- kiracı (tenant) kimlik hücresi --- */
.tenant-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.tenant-logo{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  border-radius:9px;
  font-size:11px; font-weight:700;
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
.tenant-name{ font-weight:600; color: var(--text); line-height:1.25; }
.tenant-domain{
  font-family: var(--mono-font);
  font-size:10.5px; color: var(--text-muted); font-weight:500;
}

/* --- durum noktası --- */
.dot-status{
  width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto;
}
.dot-status.is-active{ background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.16); }
.dot-status.is-trial{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.16); }
.dot-status.is-past{ background:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.16); }
.dot-status.is-off{ background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.16); }

/* --- ince ilerleme çubuğu --- */
.meter{
  height:6px; border-radius:99px; overflow:hidden;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  min-width:70px;
}
.meter > span{
  display:block; height:100%; border-radius:99px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.meter.warn > span{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.meter.danger > span{ background: linear-gradient(90deg, #e5484d, #ff7b7f); }

/* --- zaman tüneli (aktivite akışı) --- */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px;
  background: var(--border);
}
.tl-item{ position:relative; padding:9px 0; }
.tl-item::before{
  content:""; position:absolute; left:-21px; top:14px;
  width:9px; height:9px; border-radius:50%;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft-2), inset 0 0 0 2px var(--accent);
}
.tl-item.ok::before{ box-shadow: 0 0 0 2px rgba(22,163,74,.2), inset 0 0 0 2px #16a34a; }
.tl-item.warn::before{ box-shadow: 0 0 0 2px rgba(245,158,11,.2), inset 0 0 0 2px #f59e0b; }
.tl-item.danger::before{ box-shadow: 0 0 0 2px rgba(229,72,77,.2), inset 0 0 0 2px #e5484d; }
.tl-time{ font-size:11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl-text{ font-size:12.8px; color: var(--text-soft); }
.tl-text strong{ color: var(--text); font-weight:600; }

/* --- mini sütun grafik --- */
.spark{ display:flex; align-items:flex-end; gap:3px; height:38px; }
.spark > i{
  flex:1 1 0; min-width:2px; border-radius:3px 3px 1px 1px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.spark > i.on{ background: var(--accent); }

/* --- kod/monospace hücre --- */
.mono{ font-family: var(--mono-font); font-size:11.5px; letter-spacing:-.01em; }

/* =========================================================
   13. GİRİŞ EKRANI
   ========================================================= */
.auth-body{
  overflow:auto;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(109,94,252,.28), transparent 60%),
    radial-gradient(700px 480px at 92% 108%, rgba(59,110,246,.2), transparent 62%),
    linear-gradient(160deg, #0a0f1e, #070a14 60%);
  color:#e7ecf7;
}
.auth-wrap{
  min-height:100dvh;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}

/* sol taraf */
.auth-brand{
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 44px 52px;
  border-right:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.auth-brand::after{
  content:""; position:absolute; inset:auto -120px -160px auto;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(109,94,252,.25), transparent 65%);
  pointer-events:none;
}
.auth-brand-top{ display:flex; align-items:center; gap:12px; }
.auth-brand-top .brand-text strong{
  font-family: var(--display-font); color:#fff;
  font-size:14px; font-weight:800; letter-spacing:.11em; display:block;
}
.auth-brand-top .brand-text small{
  color: rgba(255,255,255,.4); font-size:9px; font-weight:600; letter-spacing:.18em;
}
.auth-brand-mid h1{
  font-family: var(--display-font);
  font-size: clamp(28px, 3.4vw, 42px); font-weight:800;
  letter-spacing:-.035em; line-height:1.1;
  margin:0 0 12px; color:#fff;
}
.auth-brand-mid > p{
  color: rgba(231,236,247,.6); font-size:14.5px; max-width:440px; margin:0 0 34px;
}
.auth-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.auth-points li{ display:flex; align-items:flex-start; gap:13px; }
.auth-points i{
  width:36px; height:36px; flex:0 0 36px;
  display:grid; place-items:center; border-radius:10px;
  background: rgba(109,94,252,.16); color:#b7abff; font-size:15px;
  box-shadow: inset 0 0 0 1px rgba(167,155,255,.22);
}
.auth-points strong{ display:block; font-size:13.5px; font-weight:600; color:#fff; }
.auth-points span{ font-size:12.5px; color: rgba(231,236,247,.5); }
.auth-brand-foot{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; color: rgba(231,236,247,.38);
}
.auth-dot{ width:3px; height:3px; border-radius:50%; background: currentColor; }

/* sağ taraf */
.auth-form-side{ display:grid; place-items:center; padding:40px 24px; }
.auth-card{
  width:100%; max-width:392px;
  padding:34px 32px 26px;
  background: rgba(17,23,40,.72);
  backdrop-filter: blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
}
.auth-head h2{
  font-family: var(--display-font);
  font-size:22px; font-weight:700; letter-spacing:-.03em;
  margin:0 0 5px; color:#fff;
}
.auth-head p{ font-size:13px; color: rgba(231,236,247,.5); margin:0 0 24px; }

.auth-card .form-label{ color: rgba(231,236,247,.55); }
.auth-field{ position:relative; display:flex; align-items:center; }
.auth-field > i{
  position:absolute; left:12px; font-size:14px;
  color: rgba(231,236,247,.38); pointer-events:none;
}
.auth-field .form-control{
  height:44px; padding-left:38px; padding-right:38px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
  color:#fff; font-size:13.5px; box-shadow:none;
  border-radius: 10px;
}
.auth-field .form-control::placeholder{ color: rgba(231,236,247,.3); }
.auth-field .form-control:focus{
  background: rgba(255,255,255,.07);
  border-color: #6d5efc;
  box-shadow: 0 0 0 3px rgba(109,94,252,.22);
  color:#fff;
}
.auth-field:focus-within > i{ color:#a79bff; }
.auth-eye{
  position:absolute; right:6px;
  width:30px; height:30px; border:0; border-radius:8px;
  background:transparent; color: rgba(231,236,247,.45);
  display:grid; place-items:center; font-size:13px; transition:.15s;
}
.auth-eye:hover{ background: rgba(255,255,255,.07); color:#fff; }

.auth-card .form-check-input{ background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.auth-card .form-check-label{ font-size:12.5px; color: rgba(231,236,247,.6); }
.auth-link{ font-size:11.5px; color:#a79bff; text-decoration:none; font-weight:500; }
.auth-link:hover{ color:#c3b8ff; text-decoration:underline; }

.auth-submit{
  height:44px; font-size:14px; font-weight:600; border-radius:10px;
  box-shadow: 0 10px 26px -10px rgba(109,94,252,.9), inset 0 1px 0 rgba(255,255,255,.18);
}

.auth-alert{
  display:flex; align-items:center; gap:9px;
  padding:10px 13px; margin-bottom:18px;
  border-radius:10px; font-size:12.5px;
  border:1px solid transparent;
}
.auth-alert.error{ background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.28); color:#ff9b9e; }
.auth-alert.warn{ background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.26); color:#fcd34d; }
.auth-alert i{ font-size:14px; flex:0 0 auto; }

.auth-demo{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:20px; padding:11px 13px;
  background: rgba(109,94,252,.1);
  border:1px dashed rgba(167,155,255,.3);
  border-radius:10px;
  font-size:11.5px; color: rgba(231,236,247,.6);
}
.auth-demo i{ color:#a79bff; font-size:14px; margin-top:1px; }
.auth-demo strong{ display:block; color:#fff; font-size:12px; margin-bottom:3px; font-weight:600; }
.auth-demo code{
  font-family: var(--mono-font); font-size:11px;
  background: rgba(0,0,0,.3); color:#c3b8ff;
  padding:1px 5px; border-radius:4px;
}
.auth-demo span{ display:block; margin-top:4px; opacity:.7; }

.auth-foot{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:11px; line-height:1.55; color: rgba(231,236,247,.38);
}
.auth-foot i{ color:#6ee7a8; font-size:12.5px; margin-top:1px; }

@keyframes authShake{
  0%,100%{ transform:none; }
  20%{ transform: translateX(-7px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(2px); }
}
form.shake{ animation: authShake .4s ease; }

@media (max-width: 991.98px){
  .auth-wrap{ grid-template-columns: 1fr; }
  .auth-brand{ display:none; }
  .auth-form-side{ padding:28px 18px; }
}
@media (max-width: 575.98px){
  .auth-card{ padding:26px 20px 20px; border-radius:16px; }
  .auth-head h2{ font-size:20px; }
}

/* =========================================================
   14. MODALLAR
   ========================================================= */
.modal-content{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.modal-header{
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-body{ padding: 16px; }
.modal-footer{
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  gap: 8px;
  background: var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-footer > *{ margin: 0; }
.modal-title{
  font-family: var(--display-font);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.modal-backdrop{ background: #070b14; }
.modal-backdrop.show{ opacity: .55; }

/* Form ile sarmalanmis modallarda duzen bozulmasin.
   .modal-content bir flex konteyner; araya giren <form> header/body/footer'i
   tek kutuya hapsedince modal-body kaydirilamaz ve FOOTER KIRPILIR.
   Tercih edilen kullanim: <form class="modal-content"> ... </form>
   Asagidaki kurallar yine de guvenlik agi olarak form'u seffaf kilar. */
.modal-content > form{
  display: flex; flex-direction: column;
  width: 100%; min-height: 0; max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form{ overflow: hidden; }
.modal-dialog-scrollable .modal-body{ min-height: 0; }

/* Alcak ekranlarda da kaydet butonu her zaman erisilebilir kalsin */
@media (max-height: 760px){
  .modal-dialog{ margin: .75rem auto; }
  .modal-dialog-centered{ min-height: calc(100% - 1.5rem); }
  .modal-dialog-scrollable{ height: calc(100% - 1.5rem); }
}
@media (max-width: 575.98px){
  .modal-dialog{ margin: .5rem; }
  .modal-dialog-centered{ min-height: calc(100% - 1rem); }
  .modal-dialog-scrollable{ height: calc(100% - 1rem); }
  .modal-footer{ position: sticky; bottom: 0; z-index: 2; }
  .modal-footer .btn{ flex: 1 1 auto; }
}