/* ============================================================
   MUHASEBE THEME — DESIGN TOKENS  (theme.css)
   ------------------------------------------------------------
   This is THE single file to edit when re-skinning the theme.
   Every color, radius, shadow and font in the kit reads from
   one of these CSS custom properties. Change a value here and
   the whole app (dashboard, tables, forms, POS, charts) follows.

   The optional runtime theme switcher (ui.js → MDUI.applyTweaks)
   overrides these same variables at the document level, so any
   palette you add there must use the exact same variable names.
   ============================================================ */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  /* ---- surfaces & ink ---- */
  --bg: #eef2f8;          /* app background            */
  --surface: #ffffff;     /* cards, inputs             */
  --surface-2: #f5f8fc;   /* subtle fills, hovers      */
  --ink: #0d1830;         /* primary text              */
  --ink-2: #5b6680;       /* secondary text            */
  --ink-3: #8a93ab;       /* tertiary / captions       */
  --line: #e5e9f1;        /* hairline borders          */
  --line-strong: #d3d9e6; /* control borders           */

  /* ---- brand / primary ---- */
  --primary: #2563eb;
  --primary-600: #2f6bef;
  --primary-700: #1d4ed8;
  --primary-tint: #e8eefc;
  --primary-tint-2: #d6e2fb;
  --grad-2: #1d4ed8;      /* 2nd stop of brand gradients */
  --grid: #eef2f8;        /* chart gridlines           */

  /* ---- accent (secondary brand colour) ---- */
  --accent: #d97706;
  --accent-tint: #fdf2e0;

  /* ---- semantic: money in / out, warnings ---- */
  --pos: #1d6fe0;         /* incoming / positive       */
  --pos-tint: #e6effc;
  --neg: #d12a4e;         /* outgoing / negative       */
  --neg-tint: #fbe9ed;
  --warn: #b9770a;        /* attention                 */
  --warn-tint: #fbf0db;

  /* ---- shape & elevation ---- */
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(13, 24, 48, .04), 0 8px 24px -12px rgba(13, 24, 48, .12);
  --shadow-lg: 0 1px 2px rgba(13,24,48,.05), 0 24px 48px -20px rgba(13,24,48,.22);

  /* ---- sidebar (navy rail) ---- */
  --side-grad-1: #102a63; /* sidebar gradient top      */
  --side-grad-2: #0c2050; /* sidebar gradient bottom   */
  --side-w: 264px;        /* expanded width            */
  --side-w-rail: 76px;    /* collapsed width           */

  /* ---- type ---- */
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;  /* UI / body     */
  --font-num: "Space Grotesk", system-ui, sans-serif;     /* numbers / mono */
}
/* ============================================================
   MUHASEBE THEME — BASE COMPONENTS  (base.css)
   ------------------------------------------------------------
   Reusable, token-driven primitives: cards, chips, buttons,
   segmented controls, tables, notes, KPI/list/calendar blocks,
   and the page shell (.app / .main / .iconbtn / .crumb).

   Load order in every page:
     theme.css  (tokens)  →  base.css  (this)  →  shell.css (sidebar)
   The navy sidebar itself is styled in shell.css.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* ---- surfaces ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* ---- chips / pills ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  letter-spacing: .01em; white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }
.chip.pos { background: var(--pos-tint); color: var(--pos); }
.chip.neg { background: var(--neg-tint); color: var(--neg); }
.chip.warn { background: var(--warn-tint); color: var(--warn); }
.chip.muted { background: var(--surface-2); color: var(--ink-2); }
.chip.primary { background: var(--primary-tint); color: var(--primary-700); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 10px 14px; border-radius: 11px; cursor: pointer;
  transition: all .15s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--primary); color: var(--primary-700); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); padding: 8px 10px; }
.btn-ghost:hover { background: var(--surface-2); color: var(--primary-700); border-color: transparent; }
/* ---- segmented control (currency / tabs) ---- */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-2);
  border: none; background: transparent; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  transition: all .15s ease;
}
.seg button:hover { color: var(--primary-700); }
.seg button.active { background: var(--surface); color: var(--primary-700); box-shadow: 0 1px 3px rgba(12,31,28,.12); }
/* ---- tables ---- */
table.t { width: 100%; border-collapse: collapse; }
table.t th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); padding: 0 12px 10px; border-bottom: 1px solid var(--line);
}
table.t td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
table.t tr:last-child td { border-bottom: none; }
table.t tbody tr { transition: background .12s ease; }
table.t tbody tr:hover { background: var(--surface-2); }
.t-right { text-align: right; }
/* ---- misc ---- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.muted-txt { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 13px; }
.divider { height: 1px; background: var(--line); border: none; margin: 0; }
/* plain-language note strip */
.note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--primary-tint); color: var(--primary-700);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; line-height: 1.45; font-weight: 500;
}
.note.amber { background: var(--accent-tint); color: var(--warn); }
.note.green { background: var(--pos-tint); color: var(--pos); }
.note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.note b { font-weight: 800; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5ea; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b4c0dd; }
/* tooltip for charts */
.chart-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: #0d1830; color: #fff; font-size: 12px; line-height: 1.4;
  padding: 8px 11px; border-radius: 9px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
  transform: translate(-50%, -115%); white-space: nowrap; opacity: 0; transition: opacity .12s ease;
}
.chart-tip .k { color: #a9c2f2; font-weight: 600; }
.chart-tip .v { font-family: var(--font-num); font-weight: 600; }
/* =================== shared dashboard components =================== */
/* section header */
.sec-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px 13px; gap: 12px; flex-wrap: wrap; }
.sec-head .ttl { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sec-head .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.sec-foot { padding: 13px 20px; }
.pad { padding: 0 20px 18px; }
.chart-wrap { padding: 6px 14px 10px; }
.legend { display: flex; gap: 16px; align-items: center; }
.legend .it { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.linkbtn { color: var(--primary-700); font-weight: 700; font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.linkbtn svg { width: 15px; height: 15px; }
.tabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.tabs button { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); border: none; background: transparent; padding: 7px 13px; border-radius: 7px; cursor: pointer; transition: all .14s; }
.tabs button:hover { color: var(--primary-700); }
.tabs button.active { background: var(--surface); color: var(--primary-700); box-shadow: 0 1px 3px rgba(13,24,48,.12); }
/* recent movements 2-column (full width) */
.twocol { display: grid; grid-template-columns: 1fr 1fr; }
.twocol .listrow:nth-child(odd) { border-right: 1px solid var(--line); }
.twocol .listrow:nth-last-child(-n+2) { border-bottom: none; }
/* özet (minimal) */
.oz-eyebrow { color: #bcd2fb; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.oz-title { font-size: 22px; font-weight: 800; margin: 9px 0 2px; letter-spacing: -.02em; }
.oz-net { font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -.03em; margin: 6px 0 6px; }
.oz-line { font-size: 14px; font-weight: 500; line-height: 1.5; }
.oz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* quick actions */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.qa { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 13px 13px; cursor: pointer; transition: all .15s ease; font-family: var(--font-ui); text-align: left; }
.qa:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.qa-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.qa-ic svg { width: 19px; height: 19px; }
.qa-tx { font-size: 13.5px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.qa-tx small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
/* kpi */
.kpi { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.kpi-head { display: flex; align-items: center; gap: 10px; }
.kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.kpi-ic svg { width: 19px; height: 19px; }
.kpi-lab { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.kpi-desc { font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.kpi-big { font-family: var(--font-num); font-weight: 700; font-size: 27px; letter-spacing: -.02em; }
.kpi-big .unit { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.kpi-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
/* list rows */
.listrow { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.listrow:last-child { border-bottom: none; }
.lr-av { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.lr-av svg { width: 18px; height: 18px; }
.lr-meta { min-width: 0; flex: 1; }
.lr-nm { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-nt { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.lr-amt { font-weight: 700; font-size: 15px; text-align: right; }
.lr-tm { font-size: 11.5px; color: var(--ink-3); font-weight: 600; min-width: 38px; text-align: right; }
.up-day { font-family: var(--font-num); font-weight: 700; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; text-align: center; min-width: 50px; line-height: 1.15; }
.up-day small { display: block; font-family: var(--font-ui); font-size: 9.5px; color: var(--ink-3); font-weight: 600; }
/* low stock */
.ls-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.ls-row:last-child { border-bottom: none; }
.ls-nm { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
/* agenda strip */
.agenda { display: grid; grid-template-columns: repeat(4, 1fr); }
.ag { padding: 15px 18px; border-right: 1px solid var(--line); }
.ag:last-child { border-right: none; }
.ag-day { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ag-d { font-family: var(--font-num); font-weight: 700; font-size: 17px; }
.ag-w { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ag-ev { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; }
.ag-ev .ag-bar { width: 3px; height: 28px; border-radius: 3px; flex: none; }
.ag-ev small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
/* calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-grid.head { border-bottom: 1px solid var(--line); }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); padding: 9px 0; }
.cal-cell { min-height: 64px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-n { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cal-cell.out .cal-n { color: var(--ink-3); opacity: .5; }
.cal-cell.today { background: var(--primary-tint); }
.cal-big .cal-cell { min-height: 96px; padding: 8px 10px; }
.cal-big .cal-n { font-size: 14px; }
.cal-big .cal-ev { font-size: 11px; padding: 4px 7px; }
.cal-cell.today .cal-n { color: var(--primary-700); font-weight: 700; background: var(--primary); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.cal-evs { display: flex; flex-direction: column; gap: 3px; }
.cal-ev { font-size: 10px; font-weight: 700; line-height: 1.2; padding: 3px 5px; border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); border-left: 2px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* =================== page shell (content side) =================== */
/* .app grid + the navy sidebar live in shell.css. */
.main { padding: 24px 30px 40px; min-width: 0; }
.iconbtn { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); transition: all .14s; }
.iconbtn:hover { color: var(--primary-700); border-color: var(--primary); }
.iconbtn svg { width: 18px; height: 18px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--primary-700); }
.crumb b { color: var(--ink); }
.crumb svg { width: 14px; height: 14px; }
/* ============================================================
   Muhasebe Dashboard — Reusable FORM CONTROL library
   Loaded after base.css. All controls are theme-aware (var tokens)
   so they follow Tema / Tip / Karakter tweaks automatically.
   Every form in the app reuses these classes.
   ============================================================ */

/* ---------- page topbar (search + global actions) ---------- */
.fbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.fbar .titleblock { min-width: 0; }
.fbar .titleblock .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fbar .titleblock h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 0; line-height: 1.1; }
.fbar .grow { flex: 1; }
.gsearch { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 13px; min-width: 230px; max-width: 320px; flex: 1 1 240px; transition: border-color .15s, box-shadow .15s; }
.gsearch:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.gsearch svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.gsearch input { border: none; outline: none; background: none; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink); width: 100%; }
.gsearch input::placeholder { color: var(--ink-3); font-weight: 500; }
.btn-accent { background: linear-gradient(135deg, var(--primary-600), var(--grad-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -8px var(--primary); }
.btn-accent:hover { filter: brightness(1.06); color: #fff; }
.btn-soft { background: var(--primary-tint); border-color: transparent; color: var(--primary-700); }
.btn-soft:hover { background: var(--primary-tint-2); border-color: transparent; color: var(--primary-700); }
/* ---------- form section card ---------- */
.fcard { margin-bottom: 18px; overflow: hidden; }
.fcard-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.fcard-head .fc-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-tint); color: var(--primary-700); display: grid; place-items: center; flex: none; }
.fcard-head .fc-ic svg { width: 18px; height: 18px; }
.fcard-head .ttl { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.fcard-head .sub { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.fcard-head .head-act { margin-left: auto; }
.fcard-body { padding: 20px 22px; }
.fcard.tint .fcard-head { background: var(--accent-tint); border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.fcard.tint .fcard-head .fc-ic { background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent); }
/* ---------- grid ---------- */
.fgrid { display: grid; gap: var(--fg, 18px) 18px; }
.fgrid.c2 { grid-template-columns: 1fr 1fr; }
.fgrid.c3 { grid-template-columns: repeat(3, 1fr); }
.fgrid.c4 { grid-template-columns: repeat(4, 1fr); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.span-all { grid-column: 1 / -1; }
/* ---------- field + label ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 5px; line-height: 1.2; }
.field-label .req { color: var(--neg); font-weight: 800; font-size: 14px; line-height: 0; transform: translateY(2px); }
.field-label .opt { color: var(--ink-3); font-weight: 600; font-size: 11px; margin-left: 2px; }
.field-label .info { width: 14px; height: 14px; color: var(--ink-3); cursor: help; }
/* ---------- base input / textarea ---------- */
.input, .textarea {
  width: 100%; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 13px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); font-weight: 500; }
.input:hover, .textarea:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line-strong)); }
.input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.input:disabled, .textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.input[readonly] { background: var(--surface-2); }
.textarea { resize: vertical; min-height: 64px; line-height: 1.5; font-weight: 500; }
/* ---------- validation states ---------- */
.field.is-error .input, .field.is-error .textarea, .field.is-error .ctl,
.input.is-error, .textarea.is-error { border-color: var(--neg); }
.field.is-error .input:focus, .field.is-error .textarea:focus, .field.is-error .ctl:focus-within { box-shadow: 0 0 0 3.5px var(--neg-tint); }
.field.is-warn .input, .field.is-warn .ctl { border-color: var(--warn); }
.field.is-success .input, .field.is-success .ctl { border-color: var(--pos); }
.field.is-success .input:focus { box-shadow: 0 0 0 3.5px var(--pos-tint); }
.field-msg { font-size: 11.5px; font-weight: 600; display: flex; align-items: flex-start; gap: 5px; line-height: 1.35; }
.field-msg svg { width: 13px; height: 13px; flex: none; margin-top: .5px; }
.field-msg.err { color: var(--neg); }
.field-msg.ok { color: var(--pos); }
.field-msg.warn { color: var(--warn); }
.field-msg.hint { color: var(--ink-3); font-weight: 500; }
/* ---------- select (native, custom chevron) ---------- */
.select { position: relative; display: block; }
.select select {
  width: 100%; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 38px 11px 13px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.select select:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line-strong)); }
.select select:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.select .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
/* ---------- combo (searchable / picker look-alike) ---------- */
.ctl { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 12px; transition: border-color .15s, box-shadow .15s; cursor: text; }
.ctl:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line-strong)); }
.ctl:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.ctl .lead, .ctl .trail { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ctl input { border: none; outline: none; background: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); width: 100%; padding: 11px 0; min-width: 0; }
.ctl input::placeholder { color: var(--ink-3); font-weight: 500; }
.ctl.picker { cursor: pointer; }
.ctl.picker .val { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); padding: 11px 0; }
.ctl.picker .val.ph { color: var(--ink-3); font-weight: 500; }
/* ---------- affix input (prefix / suffix unit) ---------- */
.affix { display: flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.affix:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.affix input { border: none; outline: none; background: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); width: 100%; padding: 11px 13px; min-width: 0; }
.affix .unit { display: grid; place-items: center; padding: 0 13px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); }
.affix .unit.lead { border-right: 1px solid var(--line); }
.affix .unit.trail { border-left: 1px solid var(--line); }
.affix.is-error { border-color: var(--neg); }
/* ---------- stepper (number with +/-) ---------- */
.stepper { display: flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.stepper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-tint); }
.stepper input { border: none; outline: none; background: none; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--ink); width: 100%; padding: 11px 12px; min-width: 0; }
.stepper input::placeholder { font-family: var(--font-ui); color: var(--ink-3); font-weight: 500; }
.stepper .unit { display: grid; place-items: center; padding: 0 11px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-left: 1px solid var(--line); }
.stepper .steps { display: flex; flex-direction: column; border-left: 1px solid var(--line); flex: none; }
.stepper .steps button { border: none; background: var(--surface-2); color: var(--ink-2); width: 32px; flex: 1; display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.stepper .steps button:hover { background: var(--primary-tint); color: var(--primary-700); }
.stepper .steps button:active { background: var(--primary-tint-2); }
.stepper .steps button:first-child { border-bottom: 1px solid var(--line); }
.stepper .steps button svg { width: 12px; height: 12px; }
/* ---------- segment toggle (Aktif/Pasif, Açık/Kapalı) ---------- */
.toggle { display: inline-flex; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.toggle.fill { display: flex; width: 100%; }
.toggle.fill button { flex: 1; }
.toggle button { border: none; background: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 8px 18px; border-radius: calc(var(--radius-sm) - 4px); cursor: pointer; transition: all .15s; white-space: nowrap; }
.toggle button:hover:not(.on) { color: var(--ink); }
.toggle button.on { color: #fff; box-shadow: 0 2px 6px -1px rgba(13,24,48,.22); }
.toggle button.on { background: var(--primary); }
.toggle button.on.tone-pos { background: var(--pos); }
.toggle button.on.tone-neg { background: var(--neg); }
.toggle button.on.tone-warn { background: var(--warn); }
/* ---------- price tier row (Hariç / Dahil / currency) ---------- */
.price-row { display: grid; grid-template-columns: 1fr 1fr 46px; gap: 8px; align-items: stretch; }
.price-row.no-cur { grid-template-columns: 1fr 1fr; }
.price-cell { display: flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.price-cell:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.price-cell .tag { display: grid; place-items: center; padding: 0 11px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-right: 1px solid var(--line); }
.price-cell input { border: none; outline: none; background: none; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--ink); width: 100%; padding: 10px 11px; text-align: right; min-width: 0; }
.price-cur { display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); cursor: pointer; transition: all .14s; }
.price-cur:hover { border-color: var(--primary); color: var(--primary-700); }
.price-cur svg { width: 17px; height: 17px; }
.price-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 14px 0 7px; display: flex; align-items: center; gap: 7px; }
.price-label .badge { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--primary-700); background: var(--primary-tint); padding: 2px 7px; border-radius: 6px; }
/* ---------- input + attached button (Vergi No + E-Fatura Sorgusu) ---------- */
.input-join { display: flex; align-items: stretch; }
.input-join > .input:not(:last-child), .input-join > .affix:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-join > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1.5px; flex: none; }
/* ---------- file upload ---------- */
.fileinput { display: flex; align-items: stretch; background: var(--surface-2); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .15s, background .15s; }
.fileinput:hover { border-color: var(--primary); background: var(--primary-tint); }
.fileinput .browse { display: flex; align-items: center; gap: 8px; background: var(--surface); border: none; border-right: 1px solid var(--line); padding: 11px 16px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.fileinput .browse svg { width: 16px; height: 16px; }
.fileinput .browse:hover { color: var(--primary-700); }
.fileinput .fname { display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
/* rich dropzone variant */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; background: var(--surface-2); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 24px 18px; cursor: pointer; transition: all .15s; }
.dropzone:hover { border-color: var(--primary); background: var(--primary-tint); }
.dropzone .dz-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--primary-700); display: grid; place-items: center; }
.dropzone .dz-ic svg { width: 21px; height: 21px; }
.dropzone .dz-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dropzone .dz-t b { color: var(--primary-700); }
.dropzone .dz-s { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
/* ---------- checkbox / switch ---------- */
.checkrow { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch { width: 42px; height: 24px; border-radius: 99px; background: var(--line-strong); position: relative; flex: none; transition: background .18s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,24,48,.3); transition: transform .18s; }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(18px); }
.checkrow .ck-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* ---------- form footer (sticky save bar) ---------- */
.ffoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); margin: 0 -1px -1px; z-index: 5; }
.ffoot .req-note { font-size: 12px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.ffoot .req-note .req { color: var(--neg); font-weight: 800; }
.ffoot .spacer { flex: 1; }
.btn-save { font-size: 14.5px; font-weight: 800; padding: 12px 26px; }
.btn-lg { padding: 13px 22px; font-size: 14.5px; }
.btn-block { width: 100%; }
/* ---------- tabs (Yön B grouping) ---------- */
.ftabs { display: flex; gap: 4px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow); overflow-x: auto; }
.ftabs button { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--ink-2); border: none; background: none; padding: 10px 15px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: all .14s; }
.ftabs button svg { width: 16px; height: 16px; }
.ftabs button:hover:not(.active) { background: var(--surface-2); color: var(--ink); }
.ftabs button.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px -4px var(--primary); }
.ftabs button .tcount { font-family: var(--font-num); font-size: 11px; font-weight: 700; background: rgba(255,255,255,.22); padding: 1px 6px; border-radius: 99px; }
.ftabs button:not(.active) .tcount { background: var(--surface-2); color: var(--ink-3); }
.fpane { display: none; }
.fpane.active { display: block; animation: fpane-in .2s ease; }
@keyframes fpane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* ---------- dense modifier (Yön B compact) ---------- */
.dense { --fg: 13px; }
.dense .fcard { margin-bottom: 14px; }
.dense .fcard-head { padding: 12px 18px; }
.dense .fcard-head .fc-ic { width: 30px; height: 30px; }
.dense .fcard-body { padding: 15px 18px; }
.dense .fgrid { gap: 13px 14px; }
.dense .field { gap: 5px; }
.dense .input, .dense .textarea, .dense .select select { padding: 9px 11px; font-size: 13.5px; }
.dense .ctl input, .dense .ctl.picker .val { padding: 9px 0; font-size: 13.5px; }
.dense .affix input, .dense .stepper input, .dense .price-cell input { padding: 9px 11px; font-size: 13.5px; }
.dense .toggle button { padding: 7px 14px; font-size: 12.5px; }
.dense .fcard-head .ttl { font-size: 14.5px; }
/* helpers */
.field-row { display: flex; align-items: center; gap: 10px; }
.muted-strong { color: var(--ink-2); font-weight: 700; }
.fsep { height: 1px; background: var(--line); border: none; margin: 4px 0 2px; grid-column: 1 / -1; }
.subhead { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 -4px; display: flex; align-items: center; gap: 9px; }
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* keep shared sidebar brand on one tidy line within forms */
.side .brand .nm { white-space: nowrap; }
.side .brand .sub { white-space: nowrap; }
.fbar .titleblock .eyebrow, .fbar .titleblock h1 { white-space: nowrap; }
/* ---- barcode bar: input + gramajlı toggle + üret + qr ---- */
.barkod-bar { display: flex; align-items: stretch; gap: 8px; }
.barkod-bar > .ctl { flex: 1; min-width: 0; }
.barkod-bar > .btn { flex: none; }
.gram-toggle { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; flex: none; transition: border-color .15s; }
.gram-toggle:hover { border-color: var(--primary); }
.gram-toggle .switch { flex: none; }
.qr-btn { flex: none; width: 46px; padding: 0; display: grid; place-items: center; }
.qr-btn svg { width: 20px; height: 20px; }
/* ---- camera scan modal (reusable) ---- */
.scan-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(8,16,34,.55); backdrop-filter: blur(3px); padding: 24px; }
.scan-modal.open { display: flex; animation: fpane-in .18s ease; }
.scan-dialog { width: 430px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.scan-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.scan-head .fc-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-tint); color: var(--primary-700); display: grid; place-items: center; flex: none; }
.scan-head .fc-ic svg { width: 18px; height: 18px; }
.scan-head .ttl { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.scan-head .x { margin-left: auto; }
.scan-body { padding: 18px; }
.scan-view { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: #0b1220; display: grid; place-items: center; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 20% 14%; border: 2px solid rgba(255,255,255,.92); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(7,12,26,.34); pointer-events: none; }
.scan-frame::before, .scan-frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid var(--primary); }
.scan-frame::before { top: -3px; left: -3px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.scan-frame::after { bottom: -3px; right: -3px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }
.scan-line { position: absolute; left: 14%; right: 14%; height: 2px; background: var(--primary); box-shadow: 0 0 10px 1px var(--primary); animation: scanmove 2.1s ease-in-out infinite; pointer-events: none; }
@keyframes scanmove { 0%, 100% { top: 22%; } 50% { top: 76%; } }
.scan-ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 11px; align-items: center; justify-content: center; text-align: center; color: #9fb3d8; font-size: 13px; font-weight: 600; line-height: 1.45; padding: 26px; }
.scan-ph svg { width: 34px; height: 34px; opacity: .8; }
.scan-foot { display: flex; gap: 10px; padding: 0 18px 18px; }
/* end of form control library */

/* ---- numbered step badge (section headers) ---- */
.step-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 15px; display: grid; place-items: center; flex: none; box-shadow: 0 4px 10px -3px var(--primary); }
/* ============================================================
   AUTH — animated brand side (işlem akışı animasyonu)
   Giriş & şifre sıfırlama ekranlarının sol panelinde kullanılır.
   ============================================================ */

.auth { display: grid; grid-template-columns: 1.06fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }
/* ---------- left brand panel ---------- */
.brandside {
  position: relative; overflow: hidden; padding: 44px 50px;
  display: flex; flex-direction: column; gap: 26px;
  background: linear-gradient(158deg, var(--side-grad-1), var(--side-grad-2));
  color: #fff;
}
@media (max-width: 900px) { .brandside { display: none; } }
.brandside::before, .brandside::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.brandside::before { width: 540px; height: 540px; right: -200px; top: -180px;
  background: radial-gradient(circle at center, rgba(47,107,239,.5), transparent 62%); animation: bsFloatA 18s ease-in-out infinite; }
.brandside::after { width: 380px; height: 380px; left: -140px; bottom: -140px;
  background: radial-gradient(circle at center, rgba(47,107,239,.28), transparent 60%); animation: bsFloatB 22s ease-in-out infinite; }
@keyframes bsFloatA { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-26px,34px) scale(1.08);} }
@keyframes bsFloatB { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(30px,-28px) scale(1.12);} }
.bs-grid { position: absolute; inset: -2px;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 72% 24%, #000, transparent 80%); animation: bsGridPan 26s linear infinite; }
@keyframes bsGridPan { from{ background-position: 0 0;} to{ background-position: 46px 46px;} }
.bs-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bs-sheen::after { content:""; position: absolute; top: -60%; width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent); transform: rotate(9deg); animation: bsSheen 9s ease-in-out infinite; }
@keyframes bsSheen { 0%{ left: -55%;} 55%,100%{ left: 135%;} }
.anim-in { opacity: 0; transform: translateY(15px); animation: bsRiseIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s;}
.d2{ animation-delay:.13s;}
.d3{ animation-delay:.22s;}
.d4{ animation-delay:.32s;}
@keyframes bsRiseIn { to{ opacity:1; transform:none;} }
/* brand row */
.bs-brand { position: relative; display: flex; align-items: center; gap: 13px; }
.bs-brand .logo { width: 48px; height: 48px; border-radius: 13px; background: var(--primary);
  display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 19px;
  box-shadow: 0 10px 26px -8px rgba(47,107,239,.7); animation: bsLogoGlow 3.6s ease-in-out infinite; }
@keyframes bsLogoGlow { 0%,100%{ box-shadow: 0 10px 26px -8px rgba(47,107,239,.7);} 50%{ box-shadow: 0 12px 34px -6px rgba(47,107,239,.95);} }
.bs-brand .nm { font-weight: 800; font-size: 17px; line-height: 1.1; white-space: nowrap; }
.bs-brand .sub { font-size: 12px; color: #9bb8ee; font-weight: 600; margin-top: 2px; }
/* headline — swaps per scene */
.bs-lead { position: relative; max-width: 440px; min-height: 128px; }
.bs-lead .eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8fb0e8;
  display: inline-flex; align-items: center; gap: 8px; }
.bs-lead .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 0 4px rgba(110,231,183,.18); }
.bs-lead h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 14px 0 0; white-space: nowrap; }
.bs-lead p { font-size: 14px; line-height: 1.6; color: #c3d4f1; font-weight: 500; margin: 12px 0 0; }
.bs-lead .swap { transition: opacity .4s ease, transform .4s ease; }
.bs-lead.swapping .swap { opacity: 0; transform: translateY(8px); }
/* ============ animated flow stage ============ */
.flowstage { position: relative; flex: 1; min-height: 300px; display: flex; align-items: center; }
.flowcard {
  position: relative; width: 100%; max-width: 428px; background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13); border-radius: 20px; padding: 16px; backdrop-filter: blur(8px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); overflow: hidden;
}
.flowcard .win-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.flowcard .win-bar .dots { display: flex; gap: 6px; }
.flowcard .win-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.flowcard .win-bar .wt { margin-left: 6px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #dbe6fb; }
.flowcard .win-bar .wt .wi { width: 24px; height: 24px; border-radius: 7px; background: rgba(47,107,239,.32); display: grid; place-items: center; color: #cfe0ff; }
.flowcard .win-bar .wt .wi svg { width: 14px; height: 14px; }
.flowcard .win-bar .live { margin-left: auto; font-family: var(--font-num); font-size: 10.5px; font-weight: 700; color: #9bb8ee; }
/* scenes stacked */
.scene { display: none; }
.scene.active { display: block; }
/* generic animated row */
.frow { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); margin-top: 8px;
  opacity: 0; transform: translateY(10px); }
.frow.show { animation: rowIn .5s cubic-bezier(.2,.75,.25,1) forwards; }
@keyframes rowIn { to { opacity: 1; transform: none; } }
.frow .ri { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #cfe0ff; }
.frow .ri svg { width: 17px; height: 17px; }
.frow .rt { flex: 1; min-width: 0; }
.frow .rt .a { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .rt .b { font-size: 11px; font-weight: 600; color: #9bb8ee; margin-top: 2px; font-family: var(--font-num); }
.frow .rv { font-family: var(--font-num); font-weight: 700; font-size: 14px; flex: none; }
.frow .qty { font-family: var(--font-num); font-weight: 700; font-size: 12.5px; color: #6ee7b7; background: rgba(110,231,183,.14);
  padding: 3px 9px; border-radius: 999px; flex: none; }
/* ---- scene 1: barcode scan ---- */
.scanbar { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22); overflow: hidden; }
.scanbar .barcode { flex: 1; height: 40px; display: flex; align-items: stretch; gap: 2px; }
.scanbar .barcode i { background: #dbe6fb; border-radius: 1px; opacity: .85; }
.scanbar .bc-label { font-family: var(--font-num); font-size: 11px; font-weight: 700; color: #9bb8ee; white-space: nowrap; }
.scanbar .scanline { position: absolute; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; left: 14px;
  background: linear-gradient(#7fb0ff, #cfe0ff); box-shadow: 0 0 14px 3px rgba(127,176,255,.8); }
.scene1.active .scanbar .scanline { animation: scanSweep 1.5s ease-in-out infinite; }
@keyframes scanSweep { 0%,100% { left: 14px; } 50% { left: calc(100% - 90px); } }
/* ---- counter chip ---- */
.flowfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); }
.flowfoot .ff-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(110,231,183,.15); color: #6ee7b7; }
.flowfoot .ff-ic svg { width: 16px; height: 16px; }
.flowfoot .ff-tx { font-size: 12.5px; font-weight: 700; color: #dbe6fb; }
.flowfoot .ff-tx b { color: #fff; }
.flowfoot .ff-val { margin-left: auto; font-family: var(--font-num); font-weight: 700; font-size: 17px; }
/* ---- scene 2: totals ---- */
.totrow { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; font-size: 12.5px; font-weight: 600; color: #b9cdf2; }
.totrow .tv { font-family: var(--font-num); font-weight: 700; color: #eaf1fd; }
.totrow.grand { margin-top: 6px; padding: 11px 13px; border-radius: 12px; background: rgba(47,107,239,.28); border: 1px solid rgba(127,176,255,.3); }
.totrow.grand .tl { font-size: 13px; font-weight: 800; color: #fff; }
.totrow.grand .tv { font-size: 18px; color: #fff; }
/* stamp badge (e-fatura sent / tahsil edildi) */
.stamp { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; background: rgba(110,231,183,.16); border: 1px solid rgba(110,231,183,.4);
  color: #6ee7b7; font-size: 12.5px; font-weight: 800; opacity: 0; transform: scale(.8) rotate(-6deg); }
.stamp svg { width: 15px; height: 15px; }
.stamp.pop { animation: stampPop .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stampPop { to { opacity: 1; transform: scale(1) rotate(-4deg); } }
/* ---- scene 3: collection progress ---- */
.balbox { padding: 13px 14px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.balbox .bl-top { display: flex; align-items: center; justify-content: space-between; }
.balbox .bl-top .bl-k { font-size: 12px; font-weight: 700; color: #9bb8ee; }
.balbox .bl-top .bl-v { font-family: var(--font-num); font-weight: 700; font-size: 20px; }
.balbox .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); margin-top: 12px; overflow: hidden; }
.balbox .bar .fill { height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #2f6bef, #6ee7b7);
  transform: scaleX(1); transform-origin: left; transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.balbox .bl-note { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11px; font-weight: 600; color: #9bb8ee; font-family: var(--font-num); }
/* ============ flow tabs / progress ============ */
.bs-tabs { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.bs-tabrow { display: flex; gap: 9px; }
.bs-tab { flex: 1; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 13px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background .2s, border-color .2s; }
.bs-tab:hover { background: rgba(255,255,255,.09); }
.bs-tab .ti { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #bcd2f5; transition: background .2s, color .2s; }
.bs-tab .ti svg { width: 16px; height: 16px; }
.bs-tab .tl { font-size: 12px; font-weight: 700; color: #b9cdf2; line-height: 1.2; }
.bs-tab.on { background: rgba(47,107,239,.24); border-color: rgba(127,176,255,.4); }
.bs-tab.on .ti { background: var(--primary); color: #fff; }
.bs-tab.on .tl { color: #fff; }
.bs-tab .prog { display: none; }
.bs-progress { height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.bs-progress .pf { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #7fb0ff, #6ee7b7); }
.bs-progress .pf.run { transition: width linear; }
/* footer + apps */
.bs-apps { position: relative; max-width: 440px; }
.bs-apps .lab { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fb0e8; margin-bottom: 11px; }
.bs-apps .row { display: flex; gap: 11px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 11px; padding: 9px 17px 9px 13px; border-radius: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s; }
.store:hover { background: rgba(255,255,255,.12); border-color: rgba(127,176,255,.4); transform: translateY(-2px); }
.store .glyph { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.store .glyph svg { width: 24px; height: 24px; }
.store .tx small { display: block; font-size: 10px; font-weight: 600; color: #9bb8ee; line-height: 1.2; }
.store .tx b { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.bs-foot { position: relative; display: flex; align-items: center; gap: 16px; font-size: 12px; color: #8aa6da; font-weight: 600; }
.bs-foot .dotsep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .brandside::before, .brandside::after, .bs-grid, .bs-sheen::after, .bs-brand .logo,
  .scene1.active .scanbar .scanline { animation: none !important; }
  .anim-in { opacity: 1; transform: none; animation: none !important; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); font-family: var(--font-ui); color: var(--ink); }
a { color: var(--primary-700); }
a:hover { color: var(--primary); }
/* ---------- right form panel ---------- */
  .formside { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.formcard { width: 100%; max-width: 396px; }
.mobile-brand { display: none; align-items: center; gap: 11px; margin-bottom: 30px; }
@media (max-width: 900px) { .mobile-brand { display: flex; } }
.mobile-brand .logo { width: 42px; height: 42px; border-radius: 12px; background: var(--primary);
    display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-weight: 700; font-size: 17px; }
.mobile-brand .nm { font-weight: 800; font-size: 15.5px; }
.mobile-brand .sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.fc-head { margin-bottom: 26px; }
.fc-head h2 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fc-head p { font-size: 14px; color: var(--ink-2); font-weight: 500; margin: 8px 0 0; }
.frm { display: flex; flex-direction: column; gap: 18px; }
.frm .input { height: 54px; font-size: 15.5px; padding: 0 16px; border-radius: var(--radius-sm); }
.pwfield .input { padding-right: 50px; }
.field-label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; display: block; }
.pwfield { position: relative; }
.pwfield .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; background: none; border-radius: 9px; cursor: pointer;
    color: var(--ink-3); display: grid; place-items: center; transition: background .14s, color .14s; }
.pw-toggle:hover { background: var(--surface-2); color: var(--ink-2); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.show .eye-on { display: none; }
.pw-toggle.show .eye-off { display: block; }
.frm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -3px; }
.remember { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-strong);
    background: var(--surface); flex: none; display: grid; place-items: center; transition: all .14s; }
.remember .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all .14s; }
.remember input:checked + .box { background: var(--primary); border-color: var(--primary); }
.remember input:checked + .box svg { opacity: 1; transform: scale(1); }
.remember input:focus-visible + .box { box-shadow: 0 0 0 3.5px var(--primary-tint); }
.remember .lb { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.link { font-size: 13px; font-weight: 700; color: var(--primary-700); text-decoration: none; }
.link:hover { text-decoration: underline; }
.btn-login { width: 100%; height: 50px; border: none; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-600), var(--grad-2)); color: #fff;
    font-family: var(--font-ui); font-size: 15px; font-weight: 800; letter-spacing: .01em; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 14px 28px -12px var(--primary); transition: filter .14s, transform .14s; margin-top: 4px; }
.btn-login:hover { filter: brightness(1.07); }
.btn-login:active { transform: translateY(1px); }
.btn-login svg { width: 18px; height: 18px; }
/* store badges */
  .getapp { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.getapp .lab { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; text-align: center; }
.getapp .row { display: flex; gap: 11px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border-radius: 12px;
    background: var(--ink); color: #fff; text-decoration: none; transition: transform .16s, filter .16s; }
.store:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; }
.store .glyph { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.store .glyph svg { width: 23px; height: 23px; }
.store .tx small { display: block; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.72); line-height: 1.2; }
.signup { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 26px; }
.signup a { color: var(--primary-700); font-weight: 700; text-decoration: none; }
.signup a:hover { text-decoration: underline; }
.copy { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 30px; }
.formside { display: flex; flex-direction: column; padding: 28px 30px 34px; position: relative; overflow-y: auto; }
.fs-top { display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fs-top a { font-weight: 700; text-decoration: none; }
.fs-top a:hover { text-decoration: underline; }
.formcard { width: 100%; max-width: 470px; margin: auto; padding: 14px 0; }
.mobile-brand { display: none; align-items: center; gap: 11px; margin-bottom: 24px; }
/* mobile stepper (dots) — shown small screens; desktop uses left panel steps */
  .fc-head { margin-bottom: 24px; }
.fc-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fc-head p a { font-weight: 700; text-decoration: none; }
.fc-head p a:hover { text-decoration: underline; }
/* progress dots (top of form) */
  .stepdots { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.stepdots .sd { display: flex; align-items: center; gap: 10px; }
.stepdots .sd .n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-num); font-size: 13.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-3); border: 1.5px solid var(--line); transition: all .25s; }
.stepdots .sd.done .n { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); border-color: transparent; color: var(--pos); }
.stepdots .sd.on .n { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-tint); }
.stepdots .sd .n svg { width: 15px; height: 15px; }
.stepdots .bar { flex: 1; height: 2px; background: var(--line); margin: 0 8px; border-radius: 2px; overflow: hidden; }
.stepdots .bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.stepdots .bar.fill i { width: 100%; }
.field-label .req { color: var(--neg); }
.field-label .note { font-weight: 500; font-size: 11.5px; color: var(--ink-3); margin-left: 6px; }
.frm .input, .frm select.input { height: 54px; font-size: 15.5px; padding: 0 16px; border-radius: var(--radius-sm); width: 100%; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 18px; padding-right: 42px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: none; border-radius: 9px; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; }
.pw-toggle svg { width: 19px; height: 19px; }
/* password strength */
  .pw-strength { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.pw-strength .track { flex: 1; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pw-strength .track i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s, background .25s; }
.pw-strength .lbl { font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; min-width: 44px; text-align: right; }
.terms { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; user-select: none; margin-top: 2px; }
.terms input { position: absolute; opacity: 0; pointer-events: none; }
.terms .box { width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); flex: none; display: grid; place-items: center; transition: all .14s; margin-top: 1px; }
.terms .box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.6); transition: all .14s; }
.terms input:checked + .box { background: var(--primary); border-color: var(--primary); }
.terms input:checked + .box svg { opacity: 1; transform: scale(1); }
.terms .lb { font-size: 13.5px; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.terms .lb a { font-weight: 700; text-decoration: none; }
.terms .lb a:hover { text-decoration: underline; }
/* demo code box */
  .demo-input { text-align: center; letter-spacing: .3em; font-family: var(--font-num); font-weight: 700; text-transform: uppercase; }
.frm-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.frm-foot .sp { flex: 1; }
.btn-prev { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px; border: none; border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--primary-700); font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .14s; }
.btn-prev:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.btn-prev svg { width: 17px; height: 17px; }
.btn-next { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--primary-600), var(--grad-2)); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 14px 28px -12px var(--primary); transition: filter .14s, transform .14s; }
.btn-next:hover { filter: brightness(1.07); }
.btn-next:active { transform: translateY(1px); }
.btn-next svg { width: 18px; height: 18px; }
.step { display: none; }
.step.on { display: block; animation: stepIn .35s cubic-bezier(.2,.7,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* success state */
  .done-wrap { text-align: center; padding: 20px 0; }
.done-ic { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); animation: donePop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes donePop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.done-ic svg { width: 38px; height: 38px; }
.done-wrap h2 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.done-wrap p { font-size: 14px; color: var(--ink-2); font-weight: 500; margin: 10px 0 26px; line-height: 1.6; }
.btn-login { width: 100%; height: 52px; border: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--primary-600), var(--grad-2)); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 28px -12px var(--primary); text-decoration: none; }
.btn-login:hover { filter: brightness(1.07); color: #fff; }
.formside { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
    color: var(--ink-2); text-decoration: none; margin-bottom: 24px; transition: color .14s; }
.back-link:hover { color: var(--primary-700); }
.back-link svg { width: 16px; height: 16px; }
.fc-ic-lg { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-tint); color: var(--primary-700);
    display: grid; place-items: center; margin-bottom: 20px; }
.fc-ic-lg svg { width: 27px; height: 27px; }
.fc-ic-lg.ok { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.fc-head p { font-size: 14px; color: var(--ink-2); font-weight: 500; margin: 8px 0 0; line-height: 1.6; }
.fc-head p b { color: var(--ink); font-weight: 700; }
.hint { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 8px; line-height: 1.5; }
.btn-login { width: 100%; height: 50px; border: none; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-600), var(--grad-2)); color: #fff;
    font-family: var(--font-ui); font-size: 15px; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 14px 28px -12px var(--primary); transition: filter .14s, transform .14s; margin-top: 4px; }
.btn-alt { width: 100%; height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-size: 14px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: border-color .14s, background .14s; text-decoration: none; }
.btn-alt:hover { border-color: var(--primary); background: var(--surface-2); }
.btn-alt svg { width: 18px; height: 18px; color: var(--primary-700); }
.getapp { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.helpnote { display: flex; gap: 11px; margin-top: 22px; padding: 14px 16px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.55; }
.helpnote svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; margin-top: 1px; }
.helpnote a { color: var(--primary-700); font-weight: 700; text-decoration: none; }
.helpnote a:hover { text-decoration: underline; }
.sentbox { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--primary-tint);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: var(--radius-sm); margin-bottom: 22px; }
.sentbox svg { width: 18px; height: 18px; color: var(--primary-700); flex: none; }
.sentbox .em { font-size: 13.5px; font-weight: 700; color: var(--primary-700); word-break: break-all; }
.resend { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 22px; }
.resend button { border: none; background: none; color: var(--primary-700); font-family: var(--font-ui); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.resend button:hover { text-decoration: underline; }
.hidden { display: none !important; }