/* Tasarım dili: DataFluvia (DatafluviaUI/static/Css/Datafluvia/Tokens.css, DesignPack) */

@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("Fonts/Montserrat-LatinExt.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("Fonts/Montserrat-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("Fonts/JetBrainsMono-LatinExt.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("Fonts/JetBrainsMono-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block;
  src: url("Fonts/FontAwesomeSolid.woff2") format("woff2");
}

:root {
  --canvas: #F6F8FC;
  --surface: #FFFFFF;
  --sunk: #F2F4F7;
  --sideBg: #F8FAFD;
  --sideLine: #E2E8F4;
  --line: #E4E7EC;
  --lineStrong: #D0D5DD;

  --inkStrong: #07112B;
  --ink: #101828;
  --body: #475467;
  --muted: #667085;
  --navy: #14264D;

  --primary: #365CF5;
  --primaryFill: #2747D7;
  --primaryFillHover: #1E3AAF;
  --primarySoft: #E4EAFF;

  --success: #067647; --successSoft: #DCFAE6;
  --warning: #B54708; --warningSoft: #FEF0C7;
  --danger: #B42318;  --dangerSoft: #FEE4E2;
  --info: #175CD3;    --infoSoft: #D1E9FF;

  --radiusControl: 12px;
  --radiusCard: 18px;
  --radiusTile: 20px;
  --pill: 999px;

  --shadowCard: 0 4px 6px rgba(7,17,43,.03), 0 18px 48px rgba(7,17,43,.07);
  --shadowSoft: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.04);
  --shadowRaised: 0 2px 4px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.08);
  --shadowFloat: 0 12px 32px rgba(7,17,43,.14);
  --shadowControl: 0 2px 5px rgba(7,17,43,.07);
  --shadowInset: inset 0 1px 2px rgba(7,17,43,.10), inset 0 0 0 1px rgba(7,17,43,.02);
  --focusHalo: 0 0 0 3px rgba(54,92,245,.14);

  --ease: cubic-bezier(.2,.8,.2,1);
  --fontUi: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fontMono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.55 var(--fontUi);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--inkStrong); font-weight: 650; letter-spacing: -.02em; margin: 0; }
a { color: var(--primaryFill); }
code {
  font-family: var(--fontMono); font-size: 11.5px; color: var(--navy);
  background: var(--sunk); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px;
}
small { font-size: 11px; color: var(--muted); font-weight: 500; }
.muted { color: var(--muted); }
.strong { color: var(--inkStrong); font-weight: 600; }
.danger { color: var(--danger); }

.icon {
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal;
  font-size: var(--iconSize, 15px); line-height: 1; display: inline-block;
  -webkit-font-smoothing: antialiased;
}


button, input, select, textarea { font-family: inherit; }
kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
  font: 600 10px var(--fontUi); color: #C3CCE3; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
[hidden] { display: none !important; }

/* ---------- App shell: üst navbar ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 24px -12px rgba(16,24,40,.12);
}
.nav__inner {
  height: 64px; padding-inline: 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkStrong); justify-self: start; }
.nav__wordmark { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.nav__wordmark small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.brandMark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(160deg, #365CF5 0%, #1E3AAF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(39,71,215,.30);
}
.brandMark--glow { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 6px rgba(85,119,255,.12), 0 10px 30px rgba(85,119,255,.45); }

.nav__menu {
  display: flex; gap: 4px; padding: 4px; border-radius: 14px;
  background: var(--sunk); box-shadow: var(--shadowInset);
}
.nav__item {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px;
  color: var(--body); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.nav__item .icon { color: var(--muted); transition: color .16s var(--ease); }
.nav__item:hover { color: var(--inkStrong); background: rgba(255,255,255,.7); }
.nav__item.is-active {
  background: #fff; color: var(--inkStrong);
  box-shadow: 0 1px 1px rgba(16,24,40,.05), 0 6px 14px -6px rgba(30,50,90,.22), inset 0 -1px 0 rgba(206,219,238,.6);
}
.nav__item.is-active .icon { color: var(--primaryFill); }

.nav__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.chip--quiet { box-shadow: none; background: transparent; color: var(--muted); }
.nav__user {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 5px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); box-shadow: var(--shadowControl);
  transition: box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.nav__user:hover, .nav__user[aria-expanded="true"] { border-color: var(--lineStrong); box-shadow: var(--shadowRaised); }
.nav__userName { font-size: 13px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__caret { color: var(--muted); transition: transform .2s var(--ease); }
.nav__user[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.main { flex: 1; padding: 24px; }
.page { display: flex; flex-direction: column; gap: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: var(--pill); border: 1px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 500; color: var(--body); box-shadow: var(--shadowControl);
}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--primaryFill);
  background: linear-gradient(180deg, #F2F6FF, #E4EAFF); box-shadow: inset 0 0 0 1px rgba(54,92,245,.12);
}
.avatar--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11.5px; }

/* ---------- Menu (kendi dropdown'ımız) ---------- */
.menu { position: relative; }
.menu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 220px; max-height: 380px; overflow-y: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadowFloat);
  transform-origin: top; animation: menuIn .14s var(--ease);
}
.menu__panel--end { left: auto; right: 0; transform-origin: top right; }
.menu__panel--wide { min-width: 320px; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu__header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu__header > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.menu__header b { font-size: 13px; color: var(--inkStrong); }
.menu__label { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.menu__label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.menu__row { display: flex; align-items: center; gap: 2px; }
.menu__row > .menu__item { flex: 1; min-width: 0; }
.menu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: 9px;
  border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .12s var(--ease);
}
.menu__item:hover, .menu__item:focus-visible { background: var(--sunk); outline: 0; }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--dangerSoft); }
.menu__itemText { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.menu__itemText b { font-weight: 600; font-size: 13px; color: var(--inkStrong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__itemText small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__itemText--code b { font: 500 11.5px var(--fontMono); }
.menu__itemText small.is-mono { font-family: var(--fontMono); font-size: 10.5px; }
.menu__icon {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.menu__icon:hover { background: var(--dangerSoft); color: var(--danger); }
.menu__empty { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px; font-size: 12.5px; color: var(--muted); }
.countPill {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill);
  font-size: 10.5px; font-weight: 700; background: var(--primarySoft); color: var(--primaryFill);
}

/* ---------- Page head ---------- */
.pageHead {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 14px 20px; border-radius: 14px;
  background: linear-gradient(100deg, #FFF 0%, #F6F9FE 100%); border: 1px solid #E3E9F2;
  box-shadow: 0 1px 2px rgba(11,23,57,.04), 0 10px 28px rgba(11,23,57,.05);
}
.pageHead__icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(180deg, #F2F6FF, #E4EAFF); box-shadow: inset 0 0 0 1px rgba(54,92,245,.10); color: var(--primary);
  position: relative; z-index: 1;
}
.pageHead__text { position: relative; z-index: 1; }
.pageHead h1 { font-size: 20px; line-height: 1.2; }
.pageHead p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pageHead__aside { margin-left: auto; position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; }
.pageHead__waves {
  position: absolute; right: 0; bottom: 0; width: 62%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.pageHead__waves .far { fill: #EDF3FF; }
.pageHead__waves .near { fill: #DCE8FF; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radiusCard);
  box-shadow: var(--shadowSoft); padding: 18px 20px;
}
.tileIcon {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: #E7F0F9; color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(16,24,40,.06);
}
.tileIcon--primary { background: var(--primarySoft); color: var(--primaryFill); }

/* KPI tile */
.kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kpi {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 14px;
  padding: 18px 20px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radiusTile); box-shadow: var(--shadowCard);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadowRaised); }
.kpi.is-active { border-color: rgba(54,92,245,.45); box-shadow: 0 0 0 3px rgba(54,92,245,.10), var(--shadowCard); }
.kpi__icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: #E7F0F9; color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(16,24,40,.06);
}
.kpi__icon--primary { background: var(--primarySoft); color: var(--primaryFill); }
.kpi__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 100%; }
.kpi__label .badge { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kpi__value { justify-self: end; font-size: 32px; font-weight: 650; letter-spacing: -.03em; line-height: 1; color: var(--inkStrong); font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.field--grow { flex: 1; min-width: 220px; }
.field__label { font-size: 12px; font-weight: 600; color: var(--ink); display: flex; gap: 6px; align-items: baseline; }
.field__control {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  background: #F5F7FA; border: 1px solid var(--line); border-radius: var(--radiusControl);
  box-shadow: var(--shadowInset); color: var(--muted);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.field__control:focus-within { background: #fff; border-color: rgba(54,92,245,.55); box-shadow: var(--focusHalo); color: var(--primary); }
.field__control input, .field__control select {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 500 13.5px var(--fontUi); color: var(--ink); padding: 9px 0;
}
.field__control select { cursor: pointer; }
.field__control input::placeholder { color: #98A2B3; }
.field__control--sm { min-height: 32px; padding: 0 10px; border-radius: 10px; }
.field__control--sm input { padding: 5px 0; font-size: 12.5px; }


/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative; width: 44px; height: 26px; flex: none; border-radius: var(--pill);
  background: #E4E7EC; box-shadow: var(--shadowInset); transition: background .2s var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(7,17,43,.18); transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focusHalo); }
.switch--labeled { align-self: end; min-height: 40px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 18px; border-radius: var(--radiusControl);
  font: 600 13.5px var(--fontUi); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink); cursor: pointer;
  transition: background .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease), color .14s var(--ease);
}
.button:hover { background: #fff; box-shadow: var(--shadowControl); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 0; box-shadow: var(--focusHalo); }
.button--primary { background: var(--primaryFill); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(54,92,245,.28); }
.button--primary:hover { background: var(--primaryFillHover); box-shadow: 0 8px 20px rgba(54,92,245,.34); }
.button--secondary { background: #fff; }
.button--ghost { background: transparent; border-color: transparent; color: var(--body); }
.button--ghost:hover { background: var(--sunk); box-shadow: none; }
.button--danger { background: var(--dangerSoft); color: var(--danger); border-color: transparent; }
.button--danger:hover { background: #FDD3CF; }
.button--sm { min-height: 32px; padding: 5px 12px; font-size: 12.5px; border-radius: 10px; }
.button--lg { min-height: 52px; font-size: 15px; border-radius: 14px; }
.button--block { width: 100%; }

/* ---------- Badges / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--pill);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--sunk); color: var(--body);
}
.badge--sm { padding: 1px 8px; font-size: 11px; }
.badge--neutral { background: var(--sunk); color: var(--body); }
.badge--primary { background: var(--primarySoft); color: var(--primaryFill); }
.badge--success { background: var(--successSoft); color: var(--success); }
.badge--warning { background: var(--warningSoft); color: var(--warning); }
.badge--danger { background: var(--dangerSoft); color: var(--danger); }
.badge--info { background: var(--infoSoft); color: var(--info); }

.status {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadowControl);
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--success { color: var(--success); }
.status--success i { box-shadow: 0 0 0 4px rgba(6,118,71,.14); animation: pulse 2s infinite; }
.status--warning { color: var(--warning); }
.status--danger { color: var(--danger); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(6,118,71,0); } }

/* ---------- Banner / toast / empty ---------- */
.banner { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; }
.banner--danger { background: var(--dangerSoft); color: var(--danger); }
.banner--rail { border-left: 3px solid currentColor; }

.toasts { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.toast {
  width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 18px; box-shadow: var(--shadowFloat); font-size: 13.5px; font-weight: 500; color: var(--ink);
  animation: toastIn .2s var(--ease); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast--success { border: 1px solid rgba(6,118,71,.2); background: linear-gradient(100deg, #DCFAE6 0%, #EEFCF3 45%, #fff 88%); }
.toast--error { border: 1px solid rgba(180,35,24,.2); background: linear-gradient(100deg, #FEE4E2 0%, #FFF1F0 45%, #fff 88%); }
.toast__icon { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadowControl); }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast__text { flex: 1; }
.toast__close { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.toast__close:hover { background: rgba(16,24,40,.06); }
.toast.is-leaving { opacity: 0; transform: translateY(-10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

.emptyState {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px;
  background: var(--surface); border: 1px dashed var(--lineStrong); border-radius: var(--radiusCard);
}
.emptyState__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--muted); }
.emptyState h3 { font-size: 16px; }
.emptyState p { margin: 0; max-width: 52ch; color: var(--body); font-size: 13.5px; }


/* ---------- Şifre göster ---------- */
.field__reveal {
  width: 32px; height: 32px; margin-right: -6px; flex: none; display: grid; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease);
}
.field__reveal:hover { background: rgba(16,24,40,.06); color: var(--inkStrong); }
.field__reveal:focus-visible { outline: 0; box-shadow: var(--focusHalo); }
.field__reveal[aria-pressed="true"] { color: var(--primaryFill); }

/* ---------- Select (kendi dropdown'ımız) ---------- */
.select { position: relative; min-width: 220px; }
.select > select { display: none; }
.select__trigger {
  width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer; text-align: left;
  background: #F5F7FA; border: 1px solid var(--line); border-radius: var(--radiusControl); box-shadow: var(--shadowInset);
  color: var(--muted); font: 500 13.5px var(--fontUi);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.select__trigger:hover { border-color: var(--lineStrong); }
.select__trigger:focus-visible, .select.is-open .select__trigger { outline: 0; background: #fff; border-color: rgba(54,92,245,.55); box-shadow: var(--focusHalo); color: var(--primary); }
.select__value { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__caret { color: var(--muted); font-size: 9px; transition: transform .2s var(--ease); }
.select.is-open .select__caret { transform: rotate(180deg); }
.select__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%; max-height: 320px; overflow: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadowFloat);
  animation: menuIn .14s var(--ease);
}
.select--up .select__panel { top: auto; bottom: calc(100% + 6px); }
.select__search { margin-bottom: 6px; }
.select__option {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); font: 500 13px var(--fontUi); text-align: left; cursor: pointer; white-space: nowrap;
}
.select__option:hover, .select__option.is-focused { background: var(--sunk); }
.select__option[aria-selected="true"] { color: var(--primaryFill); font-weight: 600; background: var(--primarySoft); }
.select__optionLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.select__optionCount { font: 500 11px var(--fontMono); color: var(--muted); }
.select__check { width: 14px; font-size: 11px; opacity: 0; }
.select__option[aria-selected="true"] .select__check { opacity: 1; }
.select__empty { padding: 10px; font-size: 12.5px; color: var(--muted); }
.select--sm { min-width: 86px; }
.select--sm .select__trigger { min-height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; }
.select--sm .select__option { min-height: 32px; font-size: 12.5px; }

/* ---------- Saat seçici ---------- */
.timeField { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.timeField > input { cursor: pointer; font-variant-numeric: tabular-nums; }
.timeRange { gap: 6px; min-width: 250px; }
.timeRange .timeField > input { width: 100%; text-align: center; }
.timeRange__sep { color: var(--muted); font-size: 12px; }
.timePop {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 45; width: 268px; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadowFloat); color: var(--ink);
  animation: timeIn .16s var(--ease); cursor: default;
}
.timePop--seconds { width: 330px; }
.timePop--start { left: -12px; transform: none; }
@keyframes timeIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } }
.timePop--start { animation-name: menuIn; }
.timePop__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.timePop__title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.timePop__display {
  font: 600 26px/1 var(--fontMono); letter-spacing: -.02em; color: var(--inkStrong); font-variant-numeric: tabular-nums;
}
.timePop__display span { color: var(--lineStrong); margin: 0 1px; }
.timePop__display.is-empty { color: var(--lineStrong); }
.timePop__cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 0 12px; }
.timePop__col { display: flex; flex-direction: column; gap: 4px; }
.timePop__colLabel { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.timePop__list {
  position: relative; height: 196px; overflow-y: auto; scroll-snap-type: y proximity; scrollbar-width: none;
  padding: 80px 4px; border-radius: 12px; background: var(--sunk); box-shadow: var(--shadowInset);
  -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
}
.timePop__list::-webkit-scrollbar { display: none; }
.timePop__cell {
  display: block; width: 100%; height: 36px; border: 0; border-radius: 9px; background: transparent; scroll-snap-align: center;
  font: 500 15px var(--fontMono); color: var(--body); cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .12s var(--ease), color .12s var(--ease), transform .12s var(--ease);
}
.timePop__cell:hover { background: #fff; color: var(--inkStrong); }
.timePop__cell.is-selected {
  background: var(--primaryFill); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(54,92,245,.32); transform: scale(1.04);
}
.timePop__presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 0; }
.timePop__preset {
  height: 26px; padding: 0 10px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: 500 11.5px var(--fontMono); color: var(--body); transition: all .12s var(--ease);
}
.timePop__preset:hover { border-color: rgba(54,92,245,.45); color: var(--primaryFill); background: var(--primarySoft); }
.timePop__foot { display: flex; gap: 6px; padding: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.timePop__foot .button:last-child { margin-left: auto; }

/* ---------- Flatpickr (DataFluvia DatePicker.css uyarlaması) ---------- */
.flatpickr-calendar {
  --fpCell: 40px;
  width: calc(var(--fpCell) * 7 + 20px); padding: 14px 10px 10px; font-family: var(--fontUi); font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadowFloat); z-index: 45;
}
.flatpickr-calendar.open { margin-top: 8px; animation: menuIn .14s var(--ease); }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-innerContainer, .flatpickr-rContainer { width: 100%; }
.flatpickr-days, .flatpickr-days .dayContainer { width: calc(var(--fpCell) * 7); min-width: calc(var(--fpCell) * 7); max-width: calc(var(--fpCell) * 7); }
.flatpickr-months { position: relative; align-items: center; padding: 0 2px 10px; }
.flatpickr-months .flatpickr-month { height: 36px; color: var(--inkStrong); }
.flatpickr-current-month { padding-top: 6px; font-size: 14px; font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-weight: 700; color: var(--inkStrong); font-family: var(--fontUi); }
.flatpickr-current-month .flatpickr-monthDropdown-months { border-radius: 8px; padding: 2px 4px; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover { background: var(--sunk); border-radius: 8px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  top: 50%; transform: translateY(calc(-50% - 5px)); width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; color: var(--body); fill: currentColor; transition: background .12s var(--ease);
}
.flatpickr-months .flatpickr-prev-month { left: 0; }
.flatpickr-months .flatpickr-next-month { right: 0; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--sunk); color: var(--primaryFill); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: currentColor; }
.flatpickr-months svg { width: 12px; height: 12px; }
span.flatpickr-weekday { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.flatpickr-day {
  max-width: var(--fpCell); height: var(--fpCell); line-height: var(--fpCell); border: 0; border-radius: 11px;
  color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; transition: background .12s var(--ease), color .12s var(--ease);
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--sunk); color: var(--inkStrong); }
.flatpickr-day.today { box-shadow: inset 0 0 0 1px var(--lineStrong); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--sunk); color: var(--inkStrong); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--primaryFill); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(54,92,245,.32);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #B4BCCB; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #D0D5DD; background: transparent; cursor: not-allowed; }
.datePicker__input { cursor: pointer; }

/* ---------- Gün gezgini ---------- */
.dayNav { display: flex; align-items: center; gap: 6px; }
.dayNav__field { background: #fff; box-shadow: var(--shadowControl); min-width: 200px; }
.dayNav__step {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--body); box-shadow: var(--shadowControl); text-decoration: none; transition: all .14s var(--ease);
}
.dayNav__step:hover { color: var(--primaryFill); border-color: rgba(54,92,245,.4); }
.dayNav__step.is-disabled { opacity: .4; pointer-events: none; }

/* KPI pay çubuğu */
.kpi__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--pill); background: var(--sunk); overflow: hidden; box-shadow: var(--shadowInset); }
.kpi__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6C8BFF, var(--primaryFill)); }

/* ---------- Filtre çubuğu ---------- */
.filterBar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filterBar__actions { display: flex; gap: 8px; margin-left: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.toolbar__lead { align-self: center; }
.toolbar__actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- Sorgu stüdyosu ---------- */
.studio { padding: 0; }
.studio__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; }
.studio__toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 8px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer; text-align: left; color: inherit;
}
.studio__toggle:hover { background: var(--sunk); }
.studio__title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.studio__title b { font-size: 14.5px; font-weight: 700; color: var(--inkStrong); }
.studio__title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio.is-open .studio__title small { color: var(--primaryFill); }
.studio__caret { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); transition: transform .2s var(--ease); }
.studio.is-open .studio__caret { transform: rotate(180deg); }
.studio__tools { display: flex; gap: 6px; }
.studio__tools .button .icon:last-child { font-size: 8px !important; color: var(--muted); }
.studio__body, .studio__foot { display: none; }
.studio.is-open .studio__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; padding: 0 16px; }
.studio__editorForm { display: flex; min-width: 0; }
.studio__editorForm .editor { flex: 1; min-width: 0; }
.studio.is-open .studio__foot { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-top: 14px; border-top: 1px solid var(--line); background: #FAFBFD; border-radius: 0 0 var(--radiusCard) var(--radiusCard); }
.studio__spacer { flex: 1; }
.tileIcon--dark { background: linear-gradient(160deg, #1D3462, #07112B); color: #9AB0FF; }
.saveForm { display: flex; gap: 6px; align-items: center; }
.saveForm .field__control { width: 300px; background: #fff; }

.editor {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #0B1329;
  border: 1px solid #1B2648; box-shadow: 0 18px 40px -18px rgba(7,17,43,.5), inset 0 1px 0 rgba(255,255,255,.04);
  transition: box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.editor:focus-within { border-color: #365CF5; box-shadow: 0 0 0 3px rgba(54,92,245,.25), 0 18px 40px -18px rgba(7,17,43,.5); }
.editor__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: #0E1833; border-bottom: 1px solid #1B2648; }
.editor__dots { display: flex; gap: 6px; }
.editor__dots i { width: 10px; height: 10px; border-radius: 50%; background: #25325A; }
.editor__dots i:first-child { background: #F97066; } .editor__dots i:nth-child(2) { background: #FDB022; } .editor__dots i:last-child { background: #32D583; }
.editor__file { font: 500 12px var(--fontMono); color: #8B98BD; }
.editor__spacer { flex: 1; }
.editor__action {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px;
  border: 1px solid #22305A; background: transparent; color: #A9B5D6; font: 600 11.5px var(--fontUi); cursor: pointer;
}
.editor__action:hover { background: #17224A; color: #fff; }
.editor__action.is-done { color: #32D583; border-color: rgba(50,213,131,.4); }
.editor__body { flex: 1; display: flex; min-height: 220px; max-height: 460px; overflow: auto; }
.editor__gutter {
  margin: 0; padding: 14px 10px 14px 14px; min-width: 44px; text-align: right; user-select: none;
  font: 13px/1.7 var(--fontMono); color: #3B4A78; background: #0B1329; border-right: 1px solid #16213F; position: sticky; left: 0;
}
.editor__input {
  flex: 1; min-width: 0; min-height: 220px; resize: none; border: 0; outline: 0; padding: 14px 16px; overflow: hidden;
  font: 13px/1.7 var(--fontMono); color: #DCE3F5; background: transparent; tab-size: 2; white-space: pre; caret-color: #7C9BFF;
}
.editor__input::selection { background: rgba(124,155,255,.3); }
.editor__foot { display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 14px; background: #0E1833; border-top: 1px solid #1B2648; }
.editor__hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6F7DA6; }
.editor__pos { font: 500 11px var(--fontMono); color: #6F7DA6; }

.schema {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px;
  background: var(--sunk); border: 1px solid var(--line); height: 440px; min-height: 0;
}
.schema__head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--inkStrong); }
.schema__search { background: #fff; }
.schema__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.schema__column {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 500 12px var(--fontMono); color: var(--navy);
}
.schema__column:hover { background: #fff; box-shadow: var(--shadowSoft); color: var(--primaryFill); }
.schema__column small { font: 600 9.5px var(--fontUi); letter-spacing: .05em; color: var(--muted); }
.schema__tip { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.schema__tip code { font-size: 10px; word-break: break-all; }

/* ---------- Data table (DataFluvia dp-datatable) ---------- */
/* SQL çalışınca #results'a inilir; sabit navbar başlığı örtmesin */
.results { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }
.dataTable {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radiusCard);
  box-shadow: var(--shadowSoft); overflow: hidden;
}
.dataTable__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dataTable__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dataTable__title h2 { font-size: 15px; margin-right: 4px; }
.dataTable__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dataTable__search { width: 260px; background: #fff; }
.dataTable__search input::-webkit-search-cancel-button { cursor: pointer; }
.dataTable__wrap { overflow: auto; max-height: 68vh; }
.dataTable__noMatch { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 36px; color: var(--muted); font-size: 13px; }
.dataTable__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: #FAFBFD; }
.dataTable__size { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dataTable__count { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dataTable__count b { color: var(--inkStrong); }
.dataTable__pages { display: flex; align-items: center; gap: 4px; }
.dataTable__page {
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--body); font: 500 12.5px var(--fontUi);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease);
}
.dataTable__page:hover:not(:disabled) { background: #fff; border-color: var(--line); }
.dataTable__page.is-current { background: var(--primarySoft); border-color: #B7C6FF; color: var(--primaryFill); font-weight: 700; }
.dataTable__page:disabled { opacity: .4; cursor: default; }
.dataTable__ellipsis { padding: 0 4px; color: var(--muted); font-size: 12px; }
.dataTable .emptyState { border: 0; border-radius: 0; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--body); }
.table th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  padding: 11px 16px; background: #F7F8FA; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--inkStrong); }
.table__sort {
  display: inline-flex; align-items: center; gap: 6px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.table__sort:hover { background: #EDEFF3; color: var(--inkStrong); }
.table__sortIcon { opacity: .35; transition: opacity .12s var(--ease), transform .2s var(--ease); }
.table__sort:hover .table__sortIcon { opacity: .7; }
.table th[aria-sort="ascending"] .table__sortIcon, .table th[aria-sort="descending"] .table__sortIcon { opacity: 1; color: var(--primaryFill); }
.table td {
  padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle;
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .14s var(--ease); }
.table tbody tr:hover td { background: #F7F9FD; }
.table .is-null { color: #C0C6D1; }
.table .is-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--fontMono); font-size: 12.5px; }
.table .is-mono { font-family: var(--fontMono); font-size: 12px; color: var(--navy); }
.table .is-wrap { white-space: normal; }
.table .is-right { text-align: right; }
.jsonCell summary { cursor: pointer; color: var(--primaryFill); font-weight: 600; font-size: 12px; list-style: none; display: inline-flex; gap: 6px; align-items: center; padding: 2px 8px; border-radius: 7px; background: var(--primarySoft); }
.jsonCell summary::-webkit-details-marker { display: none; }
.jsonCell pre {
  font: 11px/1.5 var(--fontMono); white-space: pre-wrap; max-width: 620px; margin: 8px 0 0; padding: 10px 12px;
  background: #0B1329; color: #DCE3F5; border-radius: 10px;
}
.fileTag {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 2px 8px; border-radius: 8px;
  font: 500 11.5px var(--fontMono); background: var(--sunk); color: var(--navy); border: 1px solid var(--line);
}
.fileTag.is-missing { opacity: .55; text-decoration: line-through; }

/* ---------- Jobs ---------- */
.jobGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.jobCard { display: flex; flex-direction: column; gap: 16px; border-radius: var(--radiusTile); box-shadow: var(--shadowCard); transition: opacity .2s; }
.jobCard.is-off .tileIcon, .jobCard.is-off .jobCard__time { opacity: .55; }
.jobCard--accent { background: linear-gradient(160deg, #FFFFFF 0%, #F4F7FF 100%); border-color: #DCE4FB; }
.jobCard__head { display: flex; gap: 12px; align-items: flex-start; }
.jobCard__head > div { flex: 1; }
.jobCard__head h2 { font-size: 15px; }
.jobCard__head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.jobCard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.jobCard__next { display: flex; flex-direction: column; line-height: 1.3; }
.jobCard__next b { font: 500 12.5px var(--fontMono); color: var(--inkStrong); }

/* ---------- Users ---------- */
.userCell { display: inline-flex; align-items: center; gap: 10px; }
.inlineForm { display: flex; gap: 6px; align-items: center; }
.inlineForm .field__control { width: 170px; }
.rowActions { display: flex; gap: 6px; justify-content: flex-end; }


/* ---------- Auth split ---------- */
.authSplit { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.authBrand {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: clamp(28px, 3vw, 52px); background: #030A1C; color: #EAEEF9;
}
.authBrand::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(56% 44% at 50% 50%, rgba(85,119,255,.24), transparent 72%),
    radial-gradient(48% 42% at 4% 4%, rgba(91,63,214,.20), transparent 70%),
    radial-gradient(80% 46% at 44% 106%, rgba(20,38,77,.74), transparent 72%);
}
.authBrand::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(60% 50% at 50% 50%, #000, transparent 78%);
}
.authBrand__logo { justify-self: start; display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.authBrand__body { align-self: center; width: 100%; max-width: 460px; display: flex; flex-direction: column; }
.authBrand__eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; margin-bottom: 20px;
  border-radius: var(--pill); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #BFCBFF;
  background: rgba(85,119,255,.12); box-shadow: inset 0 0 0 1px rgba(154,176,255,.22);
}
.authBrand h1 { color: #fff; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.authBrand h1 em { font-style: normal; background: linear-gradient(90deg, #9AB0FF, #C4B5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.authBrand__body > p { color: #A7B3CE; font-size: 15px; margin: 16px 0 32px; max-width: 42ch; }
.authBrand__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.authBrand__list li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.authBrand__list li > span {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(85,119,255,.16); color: #9AB0FF; box-shadow: inset 0 0 0 1px rgba(154,176,255,.18);
}
.authBrand__list li div { display: flex; flex-direction: column; line-height: 1.35; }
.authBrand__list b { font-size: 13.5px; font-weight: 600; color: #EEF1FA; }
.authBrand__list small { color: #8E9AB9; font-size: 12px; font-weight: 500; }
.authBrand__trust { justify-self: start; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: #7B89AB; }

.authPane {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px 24px; background: #EEF2F9;
}
.authPane::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(38% 34% at 78% 18%, rgba(108,139,255,.30), transparent 70%),
    radial-gradient(34% 30% at 18% 84%, rgba(196,181,253,.34), transparent 70%),
    radial-gradient(30% 26% at 90% 90%, rgba(125,211,252,.22), transparent 70%);
  filter: blur(8px);
}
.authPane::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(20,38,77,.10) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 85%);
}
.authPane__card {
  width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 36px 34px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(20,38,77,.05), 0 30px 70px -20px rgba(20,38,77,.28);
}
.authPane__card .form, .authPane__card .banner { width: 100%; }
.authPane__badge {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, #365CF5, #1E3AAF); box-shadow: 0 10px 24px rgba(39,71,215,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.authPane__title { font-size: 26px; font-weight: 700; }
.authPane__lede { margin: -6px 0 8px; color: var(--body); }
.authPane__foot { margin: 0; font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.field__control--well {
  min-height: 50px; border-radius: 14px; background: rgba(241,244,250,.9); border-color: rgba(214,221,235,.9);
  box-shadow: inset 2px 2px 5px rgba(35,52,90,.08), inset -2px -2px 5px rgba(255,255,255,.7);
}
.field__control--well:focus-within { background: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__menu { justify-self: center; }
  .chip--quiet, .nav__wordmark small { display: none; }
  .studio.is-open .studio__body { grid-template-columns: 1fr; }
  .schema { max-height: 260px; }
}
@media (max-width: 1024px) {
  .authSplit { grid-template-columns: 40fr 60fr; }
  .authBrand__list, .authBrand__body > p { display: none; }
}
@media (max-width: 760px) {
  .nav__inner { height: auto; padding: 10px 14px; grid-template-columns: 1fr auto; row-gap: 10px; }
  .nav__menu { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; }
  .nav__item { padding: 0 12px; }
  .nav__item span, .nav__userName { display: none; }
  .main { padding: 14px; }
  .authSplit { grid-template-columns: 1fr; }
  .authBrand { min-height: 200px; }
  .pageHead__aside { margin-left: 0; }
  .pageHead { flex-wrap: wrap; }
  .studio__head { flex-wrap: wrap; }
  .saveForm .field__control { width: auto; flex: 1; }
  .studio.is-open .studio__foot { flex-wrap: wrap; }
  .dataTable__tools, .dataTable__search { width: 100%; }
}