/* Ajans AI — UX/UI V1 design system (UIX-001, docs/product/UIX-001_UX_UI_V1.md).
   Dark navy navigation, light content surface, one restrained blue accent, semantic colours only for state.
   No external fonts, no frameworks: the CSP allows only same-origin styles and scripts. */
:root {
  /* neutral */
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f9fafb; --surface-3: #f2f4f7;
  --border: #e4e7ec; --border-strong: #d0d5dd;
  --text: #101828; --text-2: #475467; --text-3: #667085; --text-4: #98a2b3;
  /* navigation */
  --nav-bg: #0f1b2d; --nav-bg-2: #16243a; --nav-bg-3: #1d2e48; --nav-fg: #c3ccda; --nav-fg-2: #7f8ba0; --nav-active: #ffffff; --nav-line: rgba(255,255,255,.07);
  /* accent + semantic */
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eff4ff; --accent-text: #1d4ed8; --accent-ring: rgba(37,99,235,.28);
  --ok: #067647; --ok-soft: #ecfdf3; --warn: #b54708; --warn-soft: #fffaeb; --stop: #b42318; --stop-soft: #fef3f2;
  --ai: #3e4784; --ai-soft: #f0f2fa;
  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* shape, spacing, elevation, layout */
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg: 0 20px 48px -12px rgba(16,24,40,.22);
  --nav-w: 232px; --head-h: 56px; --content-max: 1280px; --gutter: 32px; --drawer-w: 520px;
  /* legacy aliases — every earlier slice (sx-, nb-, OCF dialogs) inherits the system through these */
  --paper: var(--bg); --paper-2: var(--surface); --paper-3: var(--surface-3); --line: var(--border); --line-2: var(--border-strong);
  --ink: var(--text); --ink-2: var(--text-2); --ink-3: var(--text-3); --serif: var(--sans);
  --r-legacy: var(--r); --shadow: var(--shadow-sm);
}

/* ---------- PERSONALIZATION-001 (docs/product/PERSONALIZATION_001_SPEC.md): a person's own look ----------
   Two switches on <html>, both painted from the account (GET /me → preferences; theme-boot.js paints the cached copy
   first): data-theme = light | dark (absent = the device's scheme) and data-accent = navy | orange (absent = blue).
   Everything below only re-assigns tokens; no component knows which theme it is in. */
:root {
  --on-accent: #ffffff;                                     /* text on a solid accent fill */
  --inverse-bg: #101828; --inverse-fg: #ffffff;             /* toast, bulk bar, solid chip */
  --stop-fill: #b42318; --stop-hover: #912018;              /* a danger button's fill and hover (readable with white text in both schemes) */
  --stop-line: var(--stop-line); --warn-line: var(--warn-line); --ok-line: var(--ok-line); --accent-line: var(--accent-line); --ai-line: var(--ai-line);
  --topbar-bg: rgba(255,255,255,.92); --backdrop: rgba(16,24,40,.32);
  /* platform tints (Sosyal Hesaplar, Yayın & Reklam); the solid brand colours stay as they are */
  --p-instagram-fg: #9b3a60; --p-instagram-soft: #f7e8ee; --p-tiktok-soft: #ecebea;
  --p-facebook-fg: #2d4f8f; --p-facebook-soft: #e8edf7; --p-linkedin-fg: #2d5f8a; --p-linkedin-soft: #e7eef5;
  color-scheme: light;
}
/* accents — Lacivert and Turuncu are the logo's own colours (--dgen-navy / --dgen-orange, below). The orange's solid
   fill is deepened one step so white text on it stays readable (WCAG AA 4.5:1); the swatch shows the brand orange. */
:root[data-accent="navy"] { --accent: #242455; --accent-hover: #34348a; --accent-soft: #ecedf7; --accent-text: #242455; --accent-ring: rgba(36,36,85,.3); }
:root[data-accent="orange"] { --accent: #c94f0f; --accent-hover: #b3450c; --accent-soft: #fff1ea; --accent-text: #b3450c; --accent-ring: rgba(232,97,26,.32); }
/* dark scheme — chosen (data-theme="dark") or the device's (no data-theme, prefers-color-scheme: dark). The navigation
   is already navy in both schemes; what changes is the content surface. The two blocks are identical on purpose:
   there is no preprocessor, and a shared token indirection would hide which value a rule ends up with. */
:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #121a2b; --surface-2: #172134; --surface-3: #1d283d;
  --border: #26324a; --border-strong: #354463;
  --text: #e7ecf5; --text-2: #b9c3d4; --text-3: #8d99b0; --text-4: #6b788f;
  --accent: #2563eb; --accent-hover: #3474f0; --accent-soft: rgba(59,130,246,.16); --accent-text: #8fb5ff; --accent-ring: rgba(59,130,246,.42);
  --ok: #4ade80; --ok-soft: rgba(34,197,94,.14); --warn: #fbbf24; --warn-soft: rgba(245,158,11,.14); --stop: #f87171; --stop-soft: rgba(239,68,68,.14); --stop-fill: #c62828; --stop-hover: #d32f2f;
  --ai: #a5b4fc; --ai-soft: rgba(99,102,241,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4); --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.7);
  --inverse-bg: #f2f4f7; --inverse-fg: #101828;
  --stop-line: rgba(248,113,113,.45); --warn-line: rgba(251,191,36,.45); --ok-line: rgba(74,222,128,.45); --accent-line: rgba(59,130,246,.45); --ai-line: rgba(165,180,252,.45);
  --topbar-bg: rgba(18,26,43,.92); --backdrop: rgba(0,0,0,.55);
  --p-instagram-fg: #f2a7c7; --p-instagram-soft: rgba(193,53,132,.18); --p-tiktok-soft: rgba(255,255,255,.1); --p-facebook-fg: #a9c0f0; --p-facebook-soft: rgba(45,79,143,.25); --p-linkedin-fg: #9cc4ea; --p-linkedin-soft: rgba(45,95,138,.25);
  color-scheme: dark;
}
:root[data-theme="dark"][data-accent="navy"] { --accent: #5b5ecb; --accent-hover: #6a6dd6; --accent-soft: rgba(99,102,241,.18); --accent-text: #b3b5ff; --accent-ring: rgba(120,124,230,.45); }
:root[data-theme="dark"][data-accent="orange"] { --accent: #c94f0f; --accent-hover: #d95a1c; --accent-soft: rgba(232,97,26,.16); --accent-text: #ffab7a; --accent-ring: rgba(232,97,26,.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #121a2b; --surface-2: #172134; --surface-3: #1d283d;
  --border: #26324a; --border-strong: #354463;
  --text: #e7ecf5; --text-2: #b9c3d4; --text-3: #8d99b0; --text-4: #6b788f;
  --accent: #2563eb; --accent-hover: #3474f0; --accent-soft: rgba(59,130,246,.16); --accent-text: #8fb5ff; --accent-ring: rgba(59,130,246,.42);
  --ok: #4ade80; --ok-soft: rgba(34,197,94,.14); --warn: #fbbf24; --warn-soft: rgba(245,158,11,.14); --stop: #f87171; --stop-soft: rgba(239,68,68,.14); --stop-fill: #c62828; --stop-hover: #d32f2f;
  --ai: #a5b4fc; --ai-soft: rgba(99,102,241,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4); --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.7);
  --inverse-bg: #f2f4f7; --inverse-fg: #101828;
  --stop-line: rgba(248,113,113,.45); --warn-line: rgba(251,191,36,.45); --ok-line: rgba(74,222,128,.45); --accent-line: rgba(59,130,246,.45); --ai-line: rgba(165,180,252,.45);
  --topbar-bg: rgba(18,26,43,.92); --backdrop: rgba(0,0,0,.55);
  --p-instagram-fg: #f2a7c7; --p-instagram-soft: rgba(193,53,132,.18); --p-tiktok-soft: rgba(255,255,255,.1); --p-facebook-fg: #a9c0f0; --p-facebook-soft: rgba(45,79,143,.25); --p-linkedin-fg: #9cc4ea; --p-linkedin-soft: rgba(45,95,138,.25);
  color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-accent="navy"] { --accent: #5b5ecb; --accent-hover: #6a6dd6; --accent-soft: rgba(99,102,241,.18); --accent-text: #b3b5ff; --accent-ring: rgba(120,124,230,.45); }
  :root:not([data-theme="light"])[data-accent="orange"] { --accent: #c94f0f; --accent-hover: #d95a1c; --accent-soft: rgba(232,97,26,.16); --accent-text: #ffab7a; --accent-ring: rgba(232,97,26,.45); }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 14px/20px var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--sans); margin: 0; color: var(--text); letter-spacing: -.011em; }
h1 { font-size: 24px; line-height: 32px; font-weight: 650; }
h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
h4 { font-size: 14px; line-height: 20px; font-weight: 600; }
p { margin: 0 0 8px; }
a { color: inherit; }
a:not([class]) { color: var(--accent-text); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }
a.small, a.tiny { color: var(--accent-text); text-decoration: none; font-weight: 500; }
a.small:hover, a.tiny:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--inverse-bg); color: var(--inverse-fg); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--text-2); } .dim { color: var(--text-3); } .small { font-size: 13px; line-height: 18px; } .tiny { font-size: 12px; line-height: 16px; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: var(--s3); } .stack-sm { display: flex; flex-direction: column; gap: 6px; } .stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row-tight { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: var(--s4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 16px; height: 16px; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.nav { background: var(--nav-bg); color: var(--nav-fg); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 12px 12px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; text-decoration: none; color: var(--nav-active); }
/* BRAND-001: the D Generation "D." on a white tile (the logo keeps its own colours), name + tagline */
.brand-tile { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; display: grid; place-items: center; }
.brand-tile img { width: 26px; height: 26px; display: block; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand b { display: block; font-size: 14px; line-height: 18px; font-weight: 650; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.brand-text span { display: block; font-size: 11.5px; line-height: 16px; color: var(--nav-fg-2); white-space: nowrap; }
.brand:focus-visible { outline: 2px solid var(--accent-ring, #93b4ff); outline-offset: 2px; border-radius: 8px; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-list + .nav-list { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--nav-line); }
.nav-spacer { flex: 1; min-height: 16px; }
.nav a.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--nav-fg); font-size: 14px; font-weight: 500; }
.nav a.nav-item:hover { background: var(--nav-bg-2); color: #fff; }
.nav a.nav-item svg.i { color: var(--nav-fg-2); }
.nav a.nav-item[aria-current="page"] { background: var(--nav-bg-2); color: var(--nav-active); font-weight: 600; }
.nav a.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a.nav-item[aria-current="page"] svg.i { color: #fff; }
.nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--nav-bg-3); color: #fff; font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-user { margin-top: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--nav-line); display: flex; align-items: center; gap: 10px; }
.nav-user .who { min-width: 0; flex: 1; }
.nav-user .who b { display: block; color: #fff; font-size: 13px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user .who span { display: block; color: var(--nav-fg-2); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user button.icon-btn { color: var(--nav-fg-2); }
.nav-user button.icon-btn:hover:not(:disabled) { background: var(--nav-bg-2); color: #fff; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--head-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.4) blur(8px); }
.topbar .crumbs { color: var(--text-3); font-size: 13px; display: flex; gap: 6px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.topbar .crumbs a { color: var(--text-3); text-decoration: none; } .topbar .crumbs a:hover { color: var(--text); }
.topbar .crumbs b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.search-trigger { display: flex; align-items: center; gap: 8px; width: min(420px, 38vw); height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text-3); font-size: 13px; cursor: text; margin-left: auto; }
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface); }
.search-trigger span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { font-family: var(--sans); font-size: 11px; line-height: 16px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-actions .new-btn { height: 36px; }
.page { padding: 28px var(--gutter) 72px; max-width: calc(var(--content-max) + 2 * var(--gutter)); width: 100%; margin: 0 auto; }
.page:focus { outline: none; }

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .sub, .page > header .sub { color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: 4px; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page > header, .page > div > header:not(.page-head), .page > div > .page-head { margin-bottom: 24px; }
header.spread { margin-bottom: 24px; align-items: flex-end; }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.panel > .panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel > .panel-body { padding: 16px 20px; }
.divide > * + * { border-top: 1px solid var(--border); }
.list-row { padding: 14px 20px; display: flex; gap: 12px; align-items: flex-start; }
.list-row:hover { background: var(--surface-2); }
.section { margin-top: 32px; }
.section > .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section > .section-head h2 { font-size: 16px; line-height: 24px; }
.section > .section-head .count-label { color: var(--text-3); font-size: 13px; margin-left: 6px; font-weight: 500; }

/* ---------- chips & badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; font-size: 12px; font-weight: 500; line-height: 16px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); white-space: nowrap; text-decoration: none; }
.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip.stop { background: var(--stop-soft); border-color: transparent; color: var(--stop); }
.chip.ai { background: var(--ai-soft); border-color: transparent; color: var(--ai); }
.chip.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.chip.solid { background: var(--inverse-bg); color: var(--inverse-fg); border-color: transparent; }
.chip.ghost { border-style: dashed; color: var(--text-3); background: transparent; }
a.chip:hover { border-color: var(--border-strong); color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.stop { background: var(--stop-soft); color: var(--stop); } .badge.info { background: var(--accent-soft); color: var(--accent-text); }
.badge.ai { background: var(--ai-soft); color: var(--ai); } .badge.plain::before { display: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; color: #fff; background: #475467; letter-spacing: .02em; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; } .avatar.lg { width: 48px; height: 48px; font-size: 16px; border-radius: 12px; }
.avatar.square { border-radius: 8px; }
.avatar.c0 { background: #2563eb; } .avatar.c1 { background: #0e7490; } .avatar.c2 { background: #7c3aed; } .avatar.c3 { background: #c2410c; }
.avatar.c4 { background: #047857; } .avatar.c5 { background: #be185d; } .avatar.c6 { background: #4338ca; } .avatar.c7 { background: #475467; }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons ---------- */
button, .btn { font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; height: 36px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-sm); }
button:hover:not(:disabled), .btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
button:active:not(:disabled) { transform: translateY(.5px); }
button.primary, a.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.primary:hover:not(:disabled), a.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.quiet, a.btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); box-shadow: none; padding: 0 10px; }
button.quiet:hover:not(:disabled), a.btn.quiet:hover { background: var(--surface-3); color: var(--text); }
button.danger { background: var(--stop-fill); color: #fff; border-color: var(--stop-fill); }
button.danger:hover:not(:disabled) { background: var(--stop-hover); border-color: var(--stop-hover); }
button.danger-quiet { color: var(--stop); border-color: transparent; background: transparent; box-shadow: none; }
button.danger-quiet:hover:not(:disabled) { background: var(--stop-soft); }
button.ai { background: var(--ai-soft); border-color: transparent; color: var(--ai); box-shadow: none; }
button.sm, .btn.sm { height: 30px; font-size: 13px; padding: 0 10px; }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.icon-btn { width: 36px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); position: relative; }
button.icon-btn.sm { width: 30px; height: 30px; }
button.icon-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
button.icon-btn .pip { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--stop); border: 2px solid var(--surface); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.link-btn { border: 0; background: none; box-shadow: none; height: auto; padding: 0; color: var(--accent-text); font-weight: 500; }
.link-btn:hover:not(:disabled) { background: none; text-decoration: underline; }

/* ---------- menus / popovers ---------- */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 4px; z-index: 70; display: flex; flex-direction: column; }
.menu.up { top: auto; bottom: calc(100% + 6px); }
.menu.left { right: auto; left: 0; }
.menu button, .menu a { height: 34px; justify-content: flex-start; border: 0; box-shadow: none; background: transparent; color: var(--text); font-weight: 500; padding: 0 10px; border-radius: 6px; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.menu button:hover:not(:disabled), .menu a:hover { background: var(--surface-3); }
.menu button.danger-item { color: var(--stop); }
.menu button.danger-item:hover:not(:disabled) { background: var(--stop-soft); }
.menu button:focus-visible, .menu a:focus-visible { outline: none; background: var(--surface-3); }
.menu .sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu .label { padding: 6px 10px 4px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.menu .hint { font-size: 12px; color: var(--text-3); margin-left: auto; }
.popover { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 480px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); z-index: 70; }
.popover > header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }

/* ---------- forms ---------- */
label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); display: block; margin-bottom: 6px; }
input[type=text], input[type=search], input[type=date], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=number], input[type=datetime-local], select, textarea {
  font: inherit; font-size: 14px; line-height: 20px; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
textarea { height: auto; min-height: 88px; padding: 9px 12px; resize: vertical; }
select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--text-4); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
label.row-tight, label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-2); margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; }
.field { display: flex; flex-direction: column; }
.field .req { color: var(--stop); }
.field .tiny.muted, .field .hint { margin-top: 6px; color: var(--text-3); font-size: 12px; line-height: 16px; }
.field-error { font-size: 12px; color: var(--stop); margin-top: 6px; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--stop); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.form-section + .form-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.form-section h4 { margin-bottom: 12px; }
.search-field { position: relative; }
.search-field svg.i { position: absolute; left: 10px; top: 10px; color: var(--text-3); pointer-events: none; }
.search-field input { padding-left: 34px; }

/* filter bar + segmented */
.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filterbar .search-field { width: 280px; }
.filterbar select { width: auto; min-width: 150px; }
.filterbar .grow { flex: 1; }
/* INTEGRATION-002: a filter row with six options (Teklifler) is wider than a 375px screen. It scrolls inside
   itself instead of widening the page — the control looks exactly the same wherever it already fits. */
.segmented { display: inline-flex; padding: 2px; border-radius: var(--r); background: var(--surface-3); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button { height: 30px; border: 0; box-shadow: none; background: transparent; color: var(--text-2); padding: 0 12px; border-radius: 6px; font-size: 13px; flex: 0 0 auto; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.segmented button:hover:not(:disabled):not([aria-pressed="true"]) { background: transparent; color: var(--text); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; align-items: center; flex-wrap: wrap; }
.tabs a, .tabs > button { position: relative; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-3); text-decoration: none; border: 0; background: none; box-shadow: none; border-radius: 0; white-space: nowrap; }
.tabs a:hover, .tabs > button:hover:not(:disabled) { color: var(--text); background: none; }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.tabs .menu-wrap > button { height: 40px; border: 0; background: none; box-shadow: none; color: var(--text-3); padding: 0 10px; border-radius: 0; }
.tabs .menu-wrap > button:hover:not(:disabled) { background: none; color: var(--text); }
.tabs .menu-wrap { margin-left: 2px; }
.tabs .count { font-size: 12px; color: var(--text-3); font-weight: 500; }
.tabs .menu-wrap .menu a { height: 34px; color: var(--text); }
.tabs .menu-wrap .menu a[aria-current="page"]::after { display: none; }

/* ---------- tables ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; overflow-x: auto; max-width: 100%; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--text-3); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tr.clickable { cursor: pointer; }
td.actions { width: 48px; text-align: right; padding-right: 10px; }
td .primary-text { font-weight: 600; color: var(--text); text-decoration: none; }
td .stack-sm { align-items: flex-start; }
td .secondary-text { font-size: 13px; color: var(--text-3); margin-top: 2px; }
tr.muted-row td { opacity: .6; }

/* ---------- states ---------- */
.empty { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 40px 24px; text-align: center; color: var(--text-2); background: var(--surface); }
.empty h3 { margin-bottom: 6px; } .empty p { max-width: 520px; margin: 0 auto; } .empty .btn-row { justify-content: center; margin-top: 16px; }
.empty .empty-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; margin: 0 auto 12px; }
.loading { padding: 8px 0; color: var(--text-3); }
.skeleton { background: linear-gradient(90deg, var(--surface-3) 0%, var(--border) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: var(--r-sm); height: 14px; }
.skeleton.block { height: 64px; border-radius: var(--r); }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.error-box { border: 1px solid var(--stop-line); background: var(--stop-soft); color: var(--stop); border-radius: var(--r); padding: 12px 16px; }
.error-box .mono { color: var(--stop); opacity: .75; margin-top: 4px; }
.notice { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r); padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice.info { background: var(--accent-soft); border-color: var(--accent-line); }
.notice.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.notice b { font-weight: 600; }
.notice .grow > div + div { margin-top: 2px; }
.toast-region { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.toast { background: var(--inverse-bg); color: var(--inverse-fg); padding: 10px 14px; border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 14px; max-width: 420px; }
.toast.bad { background: var(--stop-fill); color: #fff; }

/* ---------- summary figures (quiet, not a KPI rainbow) ---------- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.summary > div, .summary > a { padding: 16px 20px; text-decoration: none; color: inherit; border-left: 1px solid var(--border); }
.summary > :first-child { border-left: 0; }
.summary > a:hover { background: var(--surface-2); }
.summary .n { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary .n.alert { color: var(--stop); }
.summary .l { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* ---------- attention list (Bugün) ---------- */
.greeting h1 { font-size: 28px; line-height: 36px; }
.greeting .sub { font-size: 15px; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 24px; }
.attention { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.attention-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; }
.attention-row + .attention-row { border-top: 1px solid var(--border); }
.attention-row .who { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-decoration: none; }
.attention-row a.who:hover { color: var(--text); }
.attention-row .what { font-size: 15px; line-height: 22px; color: var(--text); font-weight: 500; margin-top: 1px; }
.attention-row .detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.attention-row .lead-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.attention-row .lead-icon.stop { background: var(--stop-soft); color: var(--stop); }
.attention-row .lead-icon.warn { background: var(--warn-soft); color: var(--warn); }
.attention-row .lead-icon.info { background: var(--accent-soft); color: var(--accent-text); }
.attention-row .lead-icon.ok { background: var(--ok-soft); color: var(--ok); }
.attention-row .lead-icon.ai { background: var(--ai-soft); color: var(--ai); }
.attention-more { padding: 12px 20px; border-top: 1px solid var(--border); }
.side-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; }
.side-block + .side-block { margin-top: 16px; }
.side-block h3 { font-size: 14px; line-height: 20px; margin-bottom: 10px; }
.side-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13px; line-height: 18px; }
.side-item + .side-item { border-top: 1px solid var(--border); }
.side-item .t { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; min-width: 44px; }
.ai-note { border-left: 3px solid var(--ai); padding-left: 12px; }
.ai-note .lead { font-size: 12px; font-weight: 600; color: var(--ai); margin-bottom: 4px; }
.ai-note .basis { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.rec-note { border-left: 3px solid var(--accent); padding-left: 12px; }
.rec-note .rec-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text); }
.rec-note .basis { font-size: 12px; line-height: 17px; color: var(--text-2); margin-top: 6px; }
details.provenance { margin-top: 8px; font-size: 12px; line-height: 17px; color: var(--text-3); }
details.provenance > summary { cursor: pointer; color: var(--text-3); list-style: none; }
details.provenance > summary::-webkit-details-marker { display: none; }
details.provenance > summary::before { content: "▸ "; }
details.provenance[open] > summary::before { content: "▾ "; }
details.provenance > summary:hover { color: var(--text); }
details.provenance > div { margin-top: 4px; }

/* ---------- Client 360 ---------- */
.c360-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.c360-head .ident { flex: 1; min-width: 260px; }
.c360-head .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; color: var(--text-3); font-size: 13px; }
.c360-head .meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
.c360-grid > div > .section:first-child { margin-top: 0; }
.c360-grid > aside { padding-top: 0 !important; }
.c360-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.progress { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.progress span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: 1px; }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.step-list li + li { border-top: 1px solid var(--border); }
.step-list .n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 14px 20px; font-size: 13px; line-height: 18px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline li.hi::before { background: var(--accent); }
.timeline .t { display: block; font-size: 12px; color: var(--text-3); }

/* ---------- İçerik calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-toolbar select { width: auto; min-width: 170px; height: 36px; }
.cal-toolbar .period { font-size: 16px; font-weight: 600; min-width: 150px; text-transform: capitalize; }
.cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-day { min-height: 128px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-week .cal-day:nth-child(7) { border-right: 0; }
.cal-day.out { background: var(--surface-2); }
.cal-day.out .d { color: var(--text-4); }
.cal-day .d { font-size: 12px; font-weight: 600; color: var(--text-2); height: 22px; display: flex; align-items: center; }
.cal-day.today .d span { background: var(--accent); color: var(--on-accent); border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }
.cal-week.week-view .cal-day { min-height: 420px; }
.cal-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: center; text-align: left; width: 100%; height: auto; min-height: 44px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); box-shadow: none; font-weight: 400; cursor: pointer; }
.cal-item:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.cal-item .thumb { width: 24px; height: 30px; border-radius: 4px; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; }
.cal-item .avatar { width: 24px; height: 24px; font-size: 9px; border-radius: 6px; }
.cal-item .thumb svg.i { width: 13px; height: 13px; }
.cal-item .l1 { font-size: 11px; line-height: 14px; color: var(--text-3); display: flex; gap: 4px; min-width: 0; }
.cal-item .l1 b { color: var(--text); font-weight: 600; }
.cal-item .l2 { font-size: 12px; line-height: 16px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item .l3 { font-size: 11px; line-height: 14px; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-item .l3 .dot { width: 6px; height: 6px; }
.tone-ok { color: var(--ok); } .tone-warn { color: var(--warn); } .tone-stop { color: var(--stop); } .tone-info { color: var(--accent-text); } .tone-muted { color: var(--text-3); } .tone-ai { color: var(--ai); }
.cal-item.tone-bar-warn { box-shadow: inset 2px 0 0 var(--warn); } .cal-item.tone-bar-stop { box-shadow: inset 2px 0 0 var(--stop); }
.cal-item.tone-bar-ok { box-shadow: inset 2px 0 0 var(--ok); } .cal-item.tone-bar-info { box-shadow: inset 2px 0 0 var(--accent); }
.cal-more { font-size: 12px; color: var(--text-3); padding: 2px 4px; }
.unscheduled { margin-top: 16px; }

/* ---------- drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 80; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 100vw); background: var(--surface); box-shadow: var(--shadow-lg); z-index: 81; display: flex; flex-direction: column; animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer > header { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.drawer > header .grow h2 { font-size: 18px; line-height: 26px; }
.drawer > .drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.drawer > footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; justify-content: flex-end; background: var(--surface); }
.drawer > footer .grow { color: var(--text-3); font-size: 13px; }
.drawer-section + .drawer-section { margin-top: 24px; }
.drawer-section > h4 { font-size: 13px; color: var(--text-2); margin-bottom: 10px; font-weight: 600; }
.stages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.stages .st { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); font-weight: 500; }
.stages .st.done { background: var(--ok-soft); color: var(--ok); }
.stages .st.current { background: var(--accent); color: var(--on-accent); }
.stages .st.current.warn { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.stages .sep { width: 6px; height: 1px; background: var(--border-strong); }
.drawer:focus { outline: none; }
.preview-frame { border-radius: var(--r); background: var(--surface-3); aspect-ratio: 4 / 5; max-height: 300px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: var(--text); border: 1px solid var(--border); overflow: hidden; }
.preview-frame.ratio-9x16 { aspect-ratio: 9 / 16; max-height: 340px; padding: 16px; }
.preview-frame.ratio-9x16 .pf-headline { font-size: 17px; line-height: 22px; }
.preview-frame.ratio-1x1 { aspect-ratio: 1 / 1; }
.preview-frame .pf-top { gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; }
.preview-frame .pf-headline { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; }
.preview-frame .pf-body { font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: 8px; }
.preview-frame .pf-cta { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--text); color: var(--on-accent); }
.preview-frame.empty-preview { align-items: center; justify-content: center; text-align: center; color: var(--text-3); gap: 8px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.facts dt { font-size: 12px; color: var(--text-3); } .facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.caption-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; font-size: 14px; line-height: 21px; white-space: pre-wrap; }
.comment { display: flex; gap: 10px; padding: 10px 0; }
.comment + .comment { border-top: 1px solid var(--border); }
.comment .body { font-size: 14px; line-height: 20px; }
.comment .meta { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.version-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.version-row + .version-row { border-top: 1px solid var(--border); }

/* ---------- queues (Onaylar, Kreatif) ---------- */
.queue-group + .queue-group { margin-top: 28px; }
.queue-group > .group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.queue-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; }
.queue-row.no-check { grid-template-columns: 40px minmax(0, 1fr) auto; }
.queue-row + .queue-row { border-top: 1px solid var(--border); }
.queue-row:hover { background: var(--surface-2); }
.queue-row .thumb { width: 40px; height: 50px; border-radius: 6px; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; }
.queue-row .t1 { font-weight: 600; font-size: 14px; }
.queue-row .t2 { font-size: 13px; color: var(--text-3); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.queue-row .side { display: flex; align-items: center; gap: 8px; }
.bulkbar { position: sticky; bottom: 16px; margin: 16px 0 28px; background: var(--inverse-bg); color: var(--inverse-fg); border-radius: var(--r-lg); padding: 10px 12px 10px 20px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); z-index: 20; }
.bulkbar .grow { font-size: 14px; }
.bulkbar .grow b { font-weight: 600; }
.bulkbar button.quiet { color: var(--inverse-fg); opacity: .8; } .bulkbar button.quiet:hover:not(:disabled) { background: rgba(127,127,127,.18); color: var(--inverse-fg); opacity: 1; }

/* ---------- command palette ---------- */
.palette-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 95; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette { width: min(640px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border); }
.palette .pal-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette .pal-input input { border: 0; box-shadow: none; height: 52px; font-size: 16px; padding: 0; }
.palette .pal-input input:focus { box-shadow: none; }
.palette .pal-list { max-height: 400px; overflow-y: auto; padding: 6px; }
.palette .pal-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.palette .pal-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; border: 0; box-shadow: none; background: transparent; justify-content: flex-start; padding: 0 10px; border-radius: 6px; font-weight: 400; }
.palette .pal-item[aria-selected="true"] { background: var(--accent-soft); }
.palette .pal-item .sub { color: var(--text-3); font-size: 13px; margin-left: auto; }
.palette .pal-empty { padding: 24px; text-align: center; color: var(--text-3); }

/* ---------- dialogs (formDialog / confirmDialog) ---------- */
.modal-backdrop, .sx-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: center; padding: 20px; z-index: 85; }
.modal, .sx-modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal.danger, .sx-modal.danger { border-top: 0; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h3 { font-size: 18px; line-height: 26px; }
.modal-head .small.muted { margin-top: 4px; }
.modal form { display: flex; flex-direction: column; gap: 16px; }
.modal > p { color: var(--text-2); margin: 0; }
.modal.danger .modal-head::before { content: ""; }
.sx-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- legacy canonical components, restyled ---------- */
.action-card { display: grid; grid-template-columns: 3px 1fr auto; gap: 0 16px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px 14px 0; overflow: hidden; }
.action-card .bar { grid-row: 1 / -1; align-self: stretch; background: transparent; }
.action-card.p-URGENT .bar { background: var(--stop); } .action-card.p-HIGH .bar { background: var(--warn); }
.action-card .title { font-weight: 600; }
.action-card .why { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.action-card .meta { margin-top: 8px; }
.action-card .side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-top: 2px; }
.task-final { opacity: .7; }
.gate-note { font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 8px; display: inline-flex; gap: 6px; align-items: flex-start; }
.insight { border-left: 3px solid var(--ai); }
.insight .lead { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.insight .block + .block { margin-top: 10px; }
.caveat { font-size: 12px; color: var(--warn); }
details.evidence, details.more { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
details.evidence > summary, details.more > summary { cursor: pointer; font-size: 13px; color: var(--text-2); list-style: none; font-weight: 500; }
details.evidence > summary::-webkit-details-marker, details.more > summary::-webkit-details-marker { display: none; }
details.evidence > summary::before, details.more > summary::before { content: "▸ "; color: var(--text-3); }
details.evidence[open] > summary::before, details.more[open] > summary::before { content: "▾ "; }
details.evidence .ev { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }

/* INTEGRATIONS-CENTER-V1 — compact operational status, with evidence one disclosure away. */
.int-summary { margin-bottom: 10px; }
.int-safe-note { margin: 0 0 28px; }
.int-category { margin-top: 28px; }
.int-category > h2 { margin-bottom: 12px; font-size: 18px; }
.int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.int-provider { padding: 18px; min-width: 0; }
.int-provider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.int-provider-title { font-size: 16px; font-weight: 650; margin-bottom: 3px; }
.int-provider-head .chip { flex: none; }
.int-provider-glance { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; color: var(--text-2); font-size: 12.5px; }
.int-provider-glance b { color: var(--text); font-weight: 550; }
.int-action { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; line-height: 19px; }
.int-provider-alert { margin-top: 12px; }
.int-detail { margin-top: 12px; }
.int-detail .kv { margin-top: 10px; }
@media (max-width: 820px) { .int-grid { grid-template-columns: 1fr; } }
.gate { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--r); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.gate .who { font-weight: 600; color: var(--warn); }
.dist { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.dist span { display: block; height: 100%; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.dist-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.lineage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.lineage b { color: var(--text-2); font-weight: 600; } .lineage .arrow { color: var(--text-4); }
.scope-banner { display: none; }
.stage-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--text-3); margin: 4px 0 8px; }
.stage-strip .stage { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--surface-3); }
.stage-strip .stage.current { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.stage-strip .stage.done { background: var(--ok-soft); color: var(--ok); }
.stage-strip .arrow { color: var(--border-strong); }
.upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.upload-row input[type=file] { font-size: 13px; max-width: 320px; }
/* CLIENT-DOCUMENTS-UI-001: the Documents filter bar and category picker sit on one line and wrap on a phone */
.doc-filters input[type=search], .doc-filters select, .upload-row select { width: auto; flex: 1 1 180px; max-width: 320px; }
.doc-row { flex-wrap: wrap; } .doc-row > .doc-main { flex: 1 1 240px; min-width: 0; } .doc-name { overflow-wrap: anywhere; }
.member-disabled td { opacity: .65; }
.link-box { font-family: var(--mono); font-size: 12px; word-break: break-all; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; user-select: all; }
.ws-switch { width: auto; height: 30px; font-size: 13px; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* copilot */
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 760px; } .msg.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); padding: 10px 14px; }
.preview { border: 1px solid var(--ai-line); background: var(--ai-soft); border-radius: var(--r); padding: 12px 14px; }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; }
.suggest button { font-size: 13px; height: 32px; }

/* ---------- sign-in & password (same system) ---------- */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 20px; background: var(--bg); }
.signin::after { content: "D Generation AI · Agency Operating System"; font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.brand-lockup { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-logo { display: block; width: 148px; height: auto; aspect-ratio: 569 / 333; margin: 0 auto 20px; }
.brand-tagline { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-3); letter-spacing: .04em; }
.signin .signin-lead { text-align: center; margin-top: 16px; }
/* AUTHUX-001: password show / hide */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-3); border-radius: 6px; cursor: pointer; }
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; color: var(--text); }
.pw-toggle[aria-pressed="true"] { color: var(--accent-text); }
.signin .card { width: min(420px, 100%); padding: 32px; border-radius: 16px; box-shadow: var(--shadow-md); }
.signin h1 { font-size: 24px; line-height: 32px; margin-bottom: 4px; }
.signin form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.signin form button[type=submit], .signin form button.primary { height: 42px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.signin form button[type=submit]:hover:not(:disabled) { background: var(--accent-hover); }
.signin form a.small { color: var(--accent-text); text-decoration: none; }
.signin details.dev { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 13px; color: var(--text-3); }
.signin details.dev summary { cursor: pointer; }
.signin details.dev select, .signin details.dev input { margin: 6px 0; }

/* ---------- Kullanıcılar ---------- */
.team select { min-width: 190px; }
.team .perm-row td { background: var(--surface-2); }
.perm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.danger-zone { border: 1px solid var(--stop-line); border-radius: var(--r); padding: 14px 16px; }
.danger-zone h4 { color: var(--stop); margin-bottom: 4px; }

@media (max-width: 1100px) {
  :root { --gutter: 20px; }
  .today-grid, .c360-grid { grid-template-columns: 1fr; }
  .search-trigger { width: auto; flex: 1; max-width: 360px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .topbar { gap: 8px; }
  .topbar .crumbs { display: none; }
  .search-trigger { min-width: 0; max-width: none; margin-left: 0; }
  .search-trigger kbd { display: none; }
  .topbar-actions .new-btn { width: 36px; padding: 0; justify-content: center; }
  .topbar-actions .new-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .nav .brand { padding: 4px 8px; }
  .nav-list { flex-direction: row; flex-wrap: wrap; }
  .nav-list + .nav-list { margin: 0; padding: 0; border: 0; }
  .nav-spacer { display: none; }
  .nav-user { margin: 0 0 0 auto; border: 0; padding: 0; }
  .action-card { grid-template-columns: 3px 1fr; } .action-card .side { grid-column: 2; text-align: left; align-items: flex-start; }
  .cal-day { min-height: 90px; }
  .attention-row { grid-template-columns: 1fr; }
  .attention-row .lead-icon { display: none; }
}

/* ---------- slices on the system: Sosyal Hesaplar (sx-) and Yeni İşler (nb-) ---------- */
.sx-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 14px; }
.sx-filters > div { min-width: 190px; }
.sx-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sx-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px;  }
.sx-card.attention { border-color: var(--warn); box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }
.sx-card-head { display: flex; gap: 12px; align-items: flex-start; }
.sx-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-handle { font-family: var(--serif); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.sx-card .btn-row { margin-top: auto; }
.sx-status { margin-top: -2px; }
.sx-card-id .row-tight a { overflow-wrap: anywhere; }
.sx-reason { font-size: 13px; color: var(--ink-2); background: var(--warn-soft); border-radius: var(--r-sm); padding: 8px 10px; }
.sx-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.sx-facts dt { color: var(--ink-3); } .sx-facts dd { margin: 0; color: var(--ink); }
.sx-avatar { border-radius: 50%; flex: none; object-fit: cover; background: var(--paper-3); }
span.sx-avatar { display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--paper-2); letter-spacing: .02em; }
.sx-avatar.p-instagram { background: #c13584; }
.sx-avatar.p-tiktok { background: #1c1917; }
.sx-avatar.p-linkedin { background: #2d5f8a; }
.sx-platform { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--paper-3); color: var(--ink-2); }
.sx-platform.p-instagram { color: var(--p-instagram-fg); background: var(--p-instagram-soft); }
.sx-platform.p-tiktok { color: var(--ink); background: var(--p-tiktok-soft); }
.sx-platform.p-facebook { color: var(--p-facebook-fg); background: var(--p-facebook-soft); }
.sx-platform-account { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.sx-platform.p-linkedin { color: var(--p-linkedin-fg); background: var(--p-linkedin-soft); }
.sx-hero h1 { font-size: 24px; margin: 2px 0; }
.sx-hero .btn-row { margin-top: 14px; }
.sx-config { background: var(--warn-soft); color: var(--warn); align-items: center; }
.sx-summary .sx-big { font-family: var(--serif); font-size: 20px; font-weight: 600; }
/* wizard */
.sx-wizard { max-width: 920px; }
.sx-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 18px 0; counter-reset: none; }
.sx-steps li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.sx-steps li .n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line-2); font-size: 12px; background: var(--paper-2); }
.sx-steps li.current { color: var(--ink); font-weight: 600; }
.sx-steps li.current .n { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.sx-steps li.done { color: var(--ok); }
.sx-steps li.done .n { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.sx-platforms { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sx-platform-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--line-2); }
.sx-platform-card.p-instagram { border-top-color: #b3446c; }
.sx-platform-card.p-tiktok { border-top-color: #1c1917; }
.sx-platform-card.p-linkedin { border-top-color: #2d5f8a; }
.sx-platform-card.unavailable { background: var(--paper); }
.sx-platform-card button { align-self: flex-start; margin-top: auto; }
.sx-choices { display: flex; flex-direction: column; gap: 8px; }
.sx-choice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.sx-choice > div { flex: 1; }
.sx-done { text-align: left; }
.sx-done-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sx-done h2 { margin-bottom: 12px; }
@media (max-width: 720px) { .sx-grid { grid-template-columns: 1fr; } .sx-filters > div { min-width: 100%; } }
.sx-scroll { overflow-x: auto; }
.nb-page > header { margin-bottom: 14px; }
.nb-subnav { margin-bottom: 18px; }
.nb-hero { max-width: 760px; padding: 18px 0 6px; }
.nb-hero h2 { font-size: 26px; line-height: 1.15; }
.nb-hero p { margin: 6px 0 0; }
.nb-search { margin-top: 16px; display: flex; gap: 8px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px 6px 6px 16px; box-shadow: inset 0 1px 2px rgba(28,25,23,.05); }
.nb-search input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; padding: 10px 0; }
.nb-search input[type=text]:focus-visible { outline: none; }
.nb-search:focus-within { border-color: var(--ink-3); }
.nb-search button { align-self: center; }
.nb-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nb-filters select { width: auto; font-size: 13px; padding: 6px 28px 6px 10px; color: var(--ink-2); }
.nb-config { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--ink); }
.nb-config b { color: var(--warn); }
.nb-config button { margin-left: auto; }
.nb-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-top: 22px; align-items: start; }
.nb-listbar { margin-bottom: 12px; }
.nb-listbar input[type=search] { width: 220px; }
.nb-listbar select { width: auto; }
.nb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nb-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px;  transition: transform .15s ease, box-shadow .15s ease; }
.nb-card:hover { box-shadow: 0 2px 4px rgba(28,25,23,.06), 0 14px 28px -16px rgba(28,25,23,.3); }
@media (prefers-reduced-motion: reduce) { .nb-card { transition: none; } .nb-card:hover { transform: none; } }
.nb-card .head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.nb-card .name, .nb-qcard .name { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.nb-card .where { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.nb-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.nb-fit { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.nb-fit.f-high { background: var(--accent-soft); color: var(--accent); } .nb-fit.f-medium { background: var(--warn-soft); color: var(--warn); }
.nb-fit.f-low { background: var(--paper-3); color: var(--ink-2); } .nb-fit.f-unknown { border: 1px dashed var(--line-2); color: var(--ink-3); }
.nb-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--paper-3); color: var(--ink-2); white-space: nowrap; }
.nb-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nb-badge.s-reviewing { background: var(--warn-soft); color: var(--warn); } .nb-badge.s-approved { background: var(--ok-soft); color: var(--ok); }
.nb-badge.s-rejected { background: var(--stop-soft); color: var(--stop); } .nb-badge.s-outreach_active { background: var(--ai-soft); color: var(--ai); }
.nb-badge.s-paused { background: var(--warn-soft); color: var(--warn); } .nb-badge.s-converted { background: var(--accent-soft); color: var(--accent); }
.nb-g { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.nb-g.k { background: var(--ok-soft); color: var(--ok); } .nb-g.i { background: var(--ai-soft); color: var(--ai); } .nb-g.m { background: var(--warn-soft); color: var(--warn); }
.nb-ev { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nb-sig { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.nb-sig div { display: flex; gap: 8px; align-items: baseline; }
.nb-sig .svc { font-weight: 600; min-width: 84px; }
.nb-side .nb-recent { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: var(--r-sm); }
.nb-side .nb-recent.cur { background: var(--accent-soft); }
.nb-side .nb-recent .q { font-weight: 600; font-size: 13px; text-decoration: none; }
/* queue */
.nb-qcard { display: grid; grid-template-columns: 4px 1fr auto; gap: 0 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;  }
.nb-qcard .bar { background: var(--line-2); } .nb-qcard.f-high .bar { background: var(--accent); } .nb-qcard.f-medium .bar { background: var(--warn); }
.nb-qcard .body { padding: 14px 0; } .nb-qcard .side { padding: 14px 16px 14px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; min-width: 220px; }
.nb-reasons { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.nb-reasons li { display: flex; gap: 8px; align-items: baseline; }
/* FIRSATLAR (NB-CANONICAL-INTEGRATION-001 §20) — the cockpit reuses the queue card whole; the only new element is
   the rank, which says "this is the first thing" without a second visual language. aria-hidden, because the order
   is already carried by the DOM order for a screen reader. */
.nb-rank { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--text);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Prospect 360 */
.nb-hdr { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.nb-gatebtn { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.nb-value { margin-top: 18px; background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 14px 18px; }
.nb-value h3 { font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.nb-value .vrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.nb-value .vrow:first-of-type { border-top: 0; }
.nb-value .svc { font-weight: 600; }
.nb-cols { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.nb-evrow { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.nb-evrow:first-child { border-top: 0; }
.nb-evrow .src { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nb-evrow .src a { color: var(--accent); overflow-wrap: anywhere; }
.nb-truth { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 6px; }
.nb-truth .y { color: var(--ok); } .nb-truth .n { color: var(--stop); } .nb-truth .z { color: var(--ink-3); }
.nb-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.nb-timeline li { position: relative; font-size: 13px; }
.nb-timeline li::before { content: ""; position: absolute; left: -24px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.nb-timeline li.hi::before { background: var(--accent); }
.nb-timeline .t { color: var(--ink-3); font-size: 12px; }
.nb-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; counter-reset: n; }
.nb-next li { display: flex; gap: 10px; align-items: baseline; }
.nb-next li::before { counter-increment: n; content: counter(n); width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper-2); display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.nb-dup-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.nb-dup-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.nb-today .warn { color: var(--warn); }
@media (max-width: 1100px) { .nb-layout, .nb-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .nb-qcard { grid-template-columns: 4px 1fr; } .nb-qcard .side { grid-column: 2; align-items: flex-start; padding: 0 0 14px 0; } .nb-listbar input[type=search] { width: 100%; } .nb-value .vrow { grid-template-columns: 1fr; gap: 4px; } }

/* UIX-001 refinements for the New Business surface: same product family as the rest of the app */
.stack-sm > button, .stack-sm > .btn { align-self: flex-start; }
.nb-gatebtn { max-width: 340px; }
.nb-hdr .stack-sm { max-width: 340px; }
.nb-hdr .stack-sm .tiny { text-align: right; }
.nb-hero { max-width: 760px; padding: 8px 0 4px; }
.nb-hero h2 { font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -.015em; }
.nb-search { border-radius: var(--r-lg); padding: 6px 6px 6px 16px; box-shadow: var(--shadow-sm); border-color: var(--border-strong); background: var(--surface); }
.nb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.nb-search input[type=text] { box-shadow: none; height: 44px; }
.nb-search input[type=text]:focus { box-shadow: none; }
.nb-card { border-radius: var(--r-lg); padding: 20px; }
.nb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.nb-card .name, .nb-qcard .name { font-size: 16px; font-weight: 600; color: var(--text); }
.nb-card .foot { border-top-style: solid; border-top-color: var(--border); }
.nb-fit.f-high { background: var(--accent-soft); color: var(--accent-text); }
.nb-qcard, .nb-value { border-radius: var(--r-lg); }
.nb-qcard.f-high .bar { background: var(--accent); }
.nb-value { border-left-color: var(--accent); }
.nb-next li::before { background: var(--accent); }
.nb-config { border-color: var(--warn-line); }
.nb-timeline li.hi::before { background: var(--accent); }
.nb-side .nb-recent.cur { background: var(--accent-soft); }
.sx-card, .sx-platform-card { border-radius: var(--r-lg); }
.sx-card.attention { border-color: var(--warn-line); box-shadow: inset 3px 0 0 var(--warn); }
.sx-handle { font-size: 16px; }
.sched-form { margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* ---------- DUX interaction layer (DUX-001, founder order L110): figures that open their records ---------- */
.dx-summary { margin-bottom: 4px; }
.summary > button.dx-metric { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 20px; border-left: 1px solid var(--border); cursor: pointer; text-align: left; position: relative; transition: background .12s ease; }
.summary > button.dx-metric:first-child { border-left: 0; }
.summary > button.dx-metric:hover { background: var(--surface-2); }
.summary > button.dx-metric:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.summary > button.dx-metric[aria-expanded="true"] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.dx-metric .l { display: flex; align-items: center; gap: 4px; }
.dx-metric .dx-chev { color: var(--text-4); opacity: 0; transform: translateX(-2px); transition: opacity .12s ease, transform .12s ease; flex: none; }
.dx-metric:hover .dx-chev, .dx-metric:focus-visible .dx-chev, .dx-metric[aria-expanded="true"] .dx-chev { opacity: 1; transform: none; color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .summary > button.dx-metric, .dx-metric .dx-chev { transition: none; } }
.dx-inline { all: unset; cursor: pointer; color: var(--text-2); border-bottom: 1px dashed var(--border-strong); }
.dx-inline:hover { color: var(--text); border-bottom-color: var(--text-3); }
.dx-inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.dx-line { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: var(--r-sm); cursor: pointer; color: var(--text); text-decoration: none; font-size: 14px; }
.dx-line:hover { background: var(--surface-2); }
.dx-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dx-line[aria-expanded="true"] { background: var(--accent-soft); }
.dx-line.static { cursor: default; } .dx-line.static:hover { background: transparent; }
.dx-line svg.i { color: var(--text-4); flex: none; }
.dx-count { font-weight: 600; min-width: 20px; text-align: right; }
.dx-count.alert, .summary .n.alert { color: var(--stop); }
.dx-ok { display: flex; align-items: center; gap: 6px; color: var(--ok); margin-top: 8px; }
.dx-main { min-width: 0; }
.dx-main > div:first-child > .section { margin-top: 8px; }
.dx-side { min-width: 0; }
.attention-row.dx-row { align-items: start; }
.attention-row.dx-row .what { overflow-wrap: anywhere; }
.attention-row.dx-row a.what { display: block; text-decoration: none; }
.attention-row.dx-row a.what:hover { text-decoration: underline; }
.attention-row.dx-row .lead-icon .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.dx-why { color: var(--text-2) !important; }
.dx-facts { color: var(--text-3); }
.dx-actions { display: flex; align-items: center; gap: 4px; align-self: center; }
.dx-actions .stack-sm { align-items: flex-end; }
.dx-empty { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.dx-empty svg.i { color: var(--ok); flex: none; }
.dx-empty.calm { background: var(--surface-2); }
.dx-explain { margin-bottom: 16px; }
.dx-drawer .attention { border-radius: var(--r); }
.dx-drawer .attention-row { grid-template-columns: 32px minmax(0, 1fr); padding: 14px 16px; }
.dx-drawer .attention-row .lead-icon { width: 32px; height: 32px; }
.dx-drawer .attention-row .dx-actions { grid-column: 2; justify-content: flex-start; margin-top: 8px; }
.dx-request { display: block; text-decoration: none; padding: 8px; margin: 0 -8px; border-radius: var(--r-sm); }
.dx-request:hover { background: var(--surface-2); }
.dx-request + .dx-request { margin-top: 4px; }
.dx-side .nb-today { box-shadow: none; }

/* FOUNDER-DASHBOARD-V2-001 — the founder's main-column blocks. No new token, no new colour, no nested card: one
   surface card that carries the same figure rows and client rows the rest of Bugün already uses. */
.fd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 20px; }
.fd-card > .dx-line, .fd-group > .dx-line { margin: 0; width: 100%; padding: 9px 0; }
.fd-card > .dx-line + .dx-line, .fd-group > .dx-line + .dx-line { border-top: 1px solid var(--border); }
.fd-group + .fd-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fd-group-title { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.fd-card .dx-request { padding: 8px 0; margin: 0; }
.fd-card .dx-request:hover { background: var(--surface-2); margin: 0 -8px; padding: 8px; }
.fd-more { margin-top: 20px; }
@media (max-width: 1100px) { .summary.dx-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .summary > button.dx-metric:nth-child(4) { border-left: 0; } .summary > button.dx-metric:nth-child(n+4) { border-top: 1px solid var(--border); } }
.dx-activity-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px 0; }
.dx-activity { display: flex; gap: 12px; align-items: flex-start; padding: 9px 20px; text-decoration: none; color: var(--text); }
a.dx-activity:hover { background: var(--surface-2); }
a.dx-activity:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dx-activity .lead-icon.sm { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.dx-activity .lead-icon.sm.ok { background: var(--ok-soft); color: var(--ok); } .dx-activity .lead-icon.sm.stop { background: var(--stop-soft); color: var(--stop); } .dx-activity .lead-icon.sm.warn { background: var(--warn-soft); color: var(--warn); }
.dx-act-text { display: block; font-size: 14px; line-height: 20px; }
.dx-act-time { display: block; font-size: 12px; color: var(--text-3); }

/* ---------- OPS-CYCLE-001 (ops-): operating cycle on Bugün, Client 360 › Operasyon, Operasyon, special days ---------- */
.ops-today .section-head a.small { white-space: nowrap; }
.ops-phase { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.ops-figures { margin-bottom: 8px; }
.ops-lines { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 4px 20px; margin-top: 8px; }
.ops-sub { font-size: 14px; line-height: 20px; margin: 20px 0 8px; color: var(--text-2); }
.ops-launches, .card.ops-card.flush { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; padding: 0; }
.ops-launch { display: flex; align-items: center; gap: 12px; padding: 12px 20px; text-decoration: none; color: var(--text); border-top: 1px solid var(--border); }
.ops-launch:first-child { border-top: 0; }
.ops-launch:hover { background: var(--surface-2); }
.ops-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ops-day { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-radar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ops-radar-row, .ops-sd-row { display: flex; gap: 16px; align-items: flex-start; padding: 12px 20px; border-top: 1px solid var(--border); }
.ops-radar-row:first-child, .ops-sd-row:first-child { border-top: 0; }
.ops-radar-date { display: flex; flex-direction: column; min-width: 88px; }
.ops-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.ops-count { all: unset; cursor: pointer; font-size: 13px; color: var(--text-2); border-bottom: 1px dashed var(--border-strong); line-height: 20px; }
.ops-count:hover { color: var(--text); }
.ops-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.ops-count[aria-expanded="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.ops-count .tone-ok { color: var(--ok); } .ops-count .tone-warn { color: var(--warn); } .ops-count .tone-stop { color: var(--stop); }
.ops-delays { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.ops-delays li { display: flex; gap: 8px; align-items: baseline; }
.ops-delays .badge { flex: none; }
.ops-delays.big { font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 20px; gap: 8px; }
.ops-card + .ops-card, .ops-client > .ops-card + .section { margin-top: 16px; }
.ops-card .kv { margin: 14px 0; }
.ops-big { font-size: 20px; line-height: 28px; font-weight: 650; margin-top: 2px; }
.ops-mode { margin-bottom: 8px; }
.ops-deadlines { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ops-step a { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r); border: 1px solid var(--border); text-decoration: none; color: var(--text); height: 100%; background: var(--surface); }
.ops-step a:hover { background: var(--surface-2); }
.ops-step a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ops-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.ops-step-l { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; }
.ops-step-l b { font-size: 13px; line-height: 18px; }
.ops-step-l .tiny { color: var(--text-3); }
.ops-step.done .ops-dot { background: var(--ok-soft); color: var(--ok); }
.ops-step.active .ops-dot { background: var(--accent-soft); color: var(--accent-text); }
.ops-step.active a { border-color: var(--accent-line); }
.ops-step.waiting_client .ops-dot { background: var(--warn-soft); color: var(--warn); }
.ops-step.late .ops-dot { background: var(--stop-soft); color: var(--stop); }
.ops-step.late a { border-color: var(--stop-line); }
.ops-timeline { list-style: none; margin: 12px 0 0; padding: 0; border-left: 2px solid var(--border); }
.ops-timeline li { padding: 4px 0 8px 14px; font-size: 13px; line-height: 18px; position: relative; }
.ops-timeline li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.ops-when { display: block; font-size: 12px; color: var(--text-3); }
.ops-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.ops-item:first-child { border-top: 0; }
.ops-sd-inline { margin-top: 12px; }
.ops-sd-decision { align-items: flex-end; }
.ops-sd-row details.more { margin-top: 4px; }
.ops-sd-row details.more ul { margin: 4px 0 0 16px; padding: 0; }
.ops-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ops-filters select { height: 34px; width: auto; min-width: 180px; }
@media (max-width: 1100px) { .ops-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ops-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-radar-row, .ops-sd-row { flex-wrap: wrap; } }
/* CAP (ops-): creative tasks */
.cap-row { align-items: flex-start; }
.cap-row .lead-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.cap-due { align-items: flex-end; text-align: right; }
.cap-upload h3 { margin-bottom: 4px; }
.cap-upload-grid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.cap-upload-grid select { width: auto; min-width: 260px; }
.cap-upload .stack-sm { margin: 8px 0 12px; }
.cap-upload input[type="text"], .cap-link input { width: 100%; max-width: 520px; }
.cap-link { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cap-thumb { width: 72px; height: 90px; border-radius: var(--r); background: var(--surface-3); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--text-3); }
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cap-version .btn-row { align-self: center; }
.tone-stop { color: var(--stop); }
@media (max-width: 640px) { .cap-due { align-items: flex-start; text-align: left; } }
/* DUX-007: entity links in record rows, task detail facts */
.attention-row.dx-row button.what.dx-link { all: unset; display: block; cursor: pointer; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.attention-row.dx-row button.what.dx-link:hover { text-decoration: underline; }
.attention-row.dx-row button.what.dx-link:focus-visible, .dx-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.dx-facts .dx-person { border-bottom-style: dotted; color: inherit; }
.dx-facts-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0 0 20px; font-size: 14px; }
.dx-facts-grid dt { color: var(--text-3); }
.dx-facts-grid dd { margin: 0; min-width: 0; }
.dx-workload .dx-line .dx-sub { color: var(--text-3); font-size: 12px; margin-left: 6px; }
/* Bugün · Ekipte takılan işler: the name on its own line (never written over), its figures below it */
.dx-workload .dx-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dx-workload .dx-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-workload .dx-who-load { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.dx-workload .dx-who-part { white-space: nowrap; }
.dx-board-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 12px; }
.dx-board-tabs .dx-tab { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--text-2); border: 1px solid transparent; }
.dx-board-tabs .dx-tab:hover { background: var(--surface-3); color: var(--text); }
.dx-board-tabs .dx-tab[aria-pressed="true"] { background: var(--surface); border-color: var(--border-strong); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.dx-board-tabs .dx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-board-tabs .dx-tab .count-label { color: var(--text-3); font-variant-numeric: tabular-nums; }
.dx-board-tabs .dx-tab.alert .count-label { color: var(--stop); font-weight: 600; }
.person-scope { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.dx-workload { margin-top: 12px; }
/* CLIENT-ASSIGNMENT-WORKLOAD-001: the per-client block beside the per-person one — same lines, its own class */
.dx-clientload { margin-top: 12px; }
.dx-clientload .dx-line .dx-sub { color: var(--text-3); font-size: 12px; margin-left: 6px; }
.dx-workload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; }
/* DUX-010: social accounts in the records drawer and on Bugün */
.dx-social .dx-status { font-weight: 600; }
.dx-social .dx-status.ok { color: var(--ok); } .dx-social .dx-status.warn { color: var(--warn); } .dx-social .dx-status.stop { color: var(--stop); }
.dx-social .dx-publication.alert { color: var(--stop); }
.dx-social a.who { overflow-wrap: anywhere; }
.dx-social-block .dx-more { display: inline-block; margin-top: 8px; }
/* below 900px the row icon is hidden (base rule), so drawer rows drop its column instead of squeezing the text into it */
@media (max-width: 900px) {
  .dx-drawer .attention-row { grid-template-columns: minmax(0, 1fr); }
  .dx-drawer .attention-row .dx-actions { grid-column: 1; }
}
/* DUX-011: a report section's evidence */
.dx-evidence-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.dx-evidence .dx-measure { color: var(--text-2); }
/* DUX-012: Bugün is one column when nothing on the side needs a person (UIX-F4) */
.today-grid.dx-solo { grid-template-columns: minmax(0, 1fr); }
.today-grid.dx-solo > .dx-side { display: none; }

/* ---------- OPERATIONS-UX-001 (sch-): Takvim, meetings, shoots, Bugün program, Client 360 schedule ---------- */
.sch-toolbar .sch-date { width: auto; height: 36px; }
.sch-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.sch-chip { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.sch-chip:hover { border-color: var(--border-strong); color: var(--text); }
.sch-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); font-weight: 600; }
.sch-refine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.sch-refine select { width: auto; min-width: 180px; height: 34px; }
.sch-empty { margin-top: 10px; }
/* event tones: restrained, one hue per kind */
.sch-ev { --tone: var(--accent); display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; width: 100%; height: auto; min-height: 30px; padding: 5px 7px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--tone); color: var(--text); font-size: 12px; line-height: 16px; cursor: pointer; }
.sch-ev:hover { background: var(--surface-2); border-color: var(--border-strong); }
.sch-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sch-ev svg.i { width: 14px; height: 14px; margin-top: 1px; color: var(--tone); }
.sch-ev-body { display: flex; flex-direction: column; min-width: 0; }
.sch-ev-l1 { display: flex; gap: 4px; color: var(--text-3); font-size: 11px; min-width: 0; }
.sch-ev-l1 b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sch-ev-l2 { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-ev-l3 { color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-ev.target { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.sch-ev.target .sch-ev-l1 b { color: var(--tone); font-weight: 600; }
.sch-ev.done { opacity: .72; }
.sch-ev.done .sch-ev-l2 { text-decoration: none; }
.sch-ev.cancelled .sch-ev-l2 { text-decoration: line-through; color: var(--text-3); }
.sch-ev.late { box-shadow: inset 3px 0 0 var(--stop); }
.tone-meet { --tone: #2563eb; } .tone-shoot { --tone: #7a5af8; } .tone-pub { --tone: #067647; } .tone-content { --tone: #667085; }
.tone-approval { --tone: #b54708; } .tone-target { --tone: #0e7090; } .tone-special { --tone: #c11574; }
.sch-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); flex: none; }
.sch-legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-3); }
.sch-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sch-cal .cal-day { gap: 3px; }
.sch-cal .cal-day .d { padding: 0; height: 22px; justify-content: flex-start; color: var(--text-2); font-size: 12px; font-weight: 600; }
.sch-fold { grid-template-columns: 16px minmax(0, 1fr); background: var(--surface-2); }
/* week */
.sch-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.sch-col { display: flex; flex-direction: column; gap: 4px; padding: 8px; min-height: 360px; border-right: 1px solid var(--border); min-width: 0; }
.sch-col:last-child { border-right: 0; }
.sch-col.today { background: var(--accent-soft); }
.sch-col-head { display: flex; align-items: baseline; gap: 6px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.sch-col-head .d { font-size: 18px; font-weight: 650; color: var(--text); padding: 0; height: auto; }
.sch-col.today .sch-col-head .d span { color: var(--accent-text); }
.sch-allday { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px dashed var(--border); }
.sch-free { margin-top: 6px; }
/* day */
.sch-day { display: flex; flex-direction: column; gap: 16px; }
.sch-day-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px; }
.sch-day-sec h3 { font-size: 13px; font-weight: 600; color: var(--text-3); margin: 0 0 8px; text-transform: none; }
.sch-dayrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); align-items: start; }
.sch-dayrow:first-of-type { border-top: 0; }
.sch-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; padding-top: 6px; color: var(--text-2); }
.sch-meta { margin-top: 4px; }
.sch-dayrow .sch-ev { font-size: 13px; line-height: 18px; }
.sch-agenda { display: flex; flex-direction: column; gap: 12px; }
.sch-agenda .sch-ev + .sch-ev, .sch-daylist .sch-ev + .sch-ev { margin-top: 6px; }
/* drawers */
.sch-drawer .drawer-section + .drawer-section { margin-top: 18px; }
.sch-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sch-kv { margin: 6px 0 0; }
.sch-text { white-space: pre-wrap; font-size: 14px; line-height: 20px; color: var(--text); }
.sch-people, .sch-shots, .sch-missing { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sch-person { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sch-person .link-btn { margin-left: auto; }
.sch-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.sch-shot label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sch-shot input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.sch-shot .link-btn { margin-left: auto; }
.sch-sub { font-size: 12px; font-weight: 600; color: var(--text-3); margin: 12px 0 4px; }
.sch-missing li { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--warn); }
.sch-inline { display: flex; gap: 8px; margin-top: 6px; }
.sch-inline input { flex: 1; height: 34px; }
.drawer .notice { margin-bottom: 12px; align-items: center; }
.drawer .notice > div { flex: 1; }
/* dialogs */
.modal.modal-wide { width: min(760px, 100%); }
.sch-form { display: flex; flex-direction: column; gap: 12px; }
.sch-form .grid { gap: 12px; }
.sch-form .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sch-form .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sch-form .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); display: grid; }
.sch-form input[type=date], .sch-form input[type=time], .sch-form input[type=url] { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r); font: inherit; background: var(--surface); color: var(--text); }
.sch-form input[type=date]:focus, .sch-form input[type=time]:focus, .sch-form input[type=url]:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.sch-fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px 12px; margin: 0; min-width: 0; }
.sch-fieldset legend { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 0 4px; }
.sch-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sch-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.sch-check input { width: 16px; height: 16px; margin: 0; }
.sch-content { flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; }
.sch-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.sch-team .field { margin: 0; }
/* Bugün */
.sch-today .section-head a.small { white-space: nowrap; }
.sch-program { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.sch-prog-row { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 48px; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface); text-align: left; font-size: 14px; cursor: pointer; }
.sch-prog-row:first-child { border-top: 0; }
.sch-prog-row:hover { background: var(--surface-2); }
.sch-prog-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sch-prog-time { width: 64px; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); flex: none; }
.sch-prog-meta { display: block; margin-top: 2px; }
.sch-prog-all { margin-top: 6px; }
.sch-upcoming, .sch-alerts, .sch-risks { margin-top: 16px; }
.sch-today h3 { font-size: 14px; line-height: 20px; margin: 0 0 6px; font-weight: 600; }
.sch-up-line { display: flex; align-items: baseline; gap: 4px; font-size: 14px; margin: 2px 0; }
.sch-up-label { width: 76px; color: var(--text-3); }
.sch-count b { font-variant-numeric: tabular-nums; }
.sch-alert { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: auto; min-height: 32px; padding: 4px 0; border: 0; background: none; text-align: left; font-size: 14px; color: var(--text); cursor: pointer; }
.sch-alert svg.i { color: var(--warn); }
.sch-alert:hover span { text-decoration: underline; }
.sch-risk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.sch-risk:first-of-type { border-top: 0; }
/* Client 360 */
.sch-c360 { display: flex; flex-direction: column; gap: 6px; }
.sch-c360-line { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-align: left; cursor: pointer; }
.sch-c360-line:hover { background: var(--surface-2); border-color: var(--border-strong); }
.sch-c360-line .grow { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sch-c360-line b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-c360-actions { margin-top: 4px; align-items: center; }
.sch-reminders { border-bottom: 1px solid var(--border); }
@media (max-width: 1100px) { .sch-form .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sch-week { grid-template-columns: 1fr; }
  .sch-col { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .sch-dayrow { grid-template-columns: 72px minmax(0, 1fr); }
  .sch-form .grid-2, .sch-form .grid-3, .sch-form .grid-4 { grid-template-columns: 1fr; }
  .sch-refine select { min-width: 0; flex: 1; }
}
/* CLIENT-LOGO: the client's own mark replaces the initials wherever the brand is worked on */
.avatar.logo { background: #fff; border: 1px solid var(--border); padding: 2px; overflow: hidden; color: transparent; }
.avatar.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar.logo.lg { padding: 4px; }
.field input[type=file] { height: auto; padding: 8px 10px; font-size: 13px; }

/* ---------- PROPOSAL-001 — Teklif Merkezi ---------- */
/* The five D Generation brand tokens (docs/product/PROPOSAL001_SPEC.md §5). The proposal document uses these and
   nothing else; the quality gate refuses a colour outside this palette. */
:root { --dgen-navy: #242455; --dgen-orange: #E8611A; --dgen-turquoise: #CDE3E3; --dgen-paleblue: #8FA8C8; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-decoration: none; color: inherit; }
.stat-tile b { font-size: 22px; line-height: 1.1; }
.stat-tile span { font-size: 12px; color: var(--text-3); }

.prop-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.prop-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-decoration: none; color: inherit; }
.prop-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.prop-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prop-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--text-3); }
.price { font-variant-numeric: tabular-nums; font-weight: 600; }
.price.accent { color: var(--dgen-orange); }

.prop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.prop-head .ident h1 { margin: 0 0 4px; font-size: 24px; }
.prop-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-3); }

.prop-steps { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.prop-step-link { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.prop-step-link .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 700; }
.prop-step-link[data-done="1"] .n { background: var(--dgen-turquoise); color: var(--dgen-navy); }
.prop-step-link[aria-current="step"] { border-color: var(--dgen-navy); background: var(--dgen-navy); color: var(--on-accent); }
.prop-step-link[aria-current="step"] .n { background: var(--dgen-orange); color: var(--on-accent); }
.prop-step .stack { display: flex; flex-direction: column; gap: 14px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card.bad { border-color: var(--stop, #c0392b); }
.btn-row.next { justify-content: flex-end; }

.brief-list { display: flex; flex-direction: column; gap: 6px; }
.brief-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.fact-row, .ref-row, .event-row, .mail-block { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.mail-block { flex-direction: column; gap: 2px; }
.scope-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.scope-lines { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }

/* 375 px: a price stays a readable stacked card, never a shrunken table */
.price-cards { display: flex; flex-direction: column; gap: 8px; }
.price-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.price-figures { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.price-figures s { color: var(--text-3); }

/* the internal costing panel: closed by default, and only ever rendered when the server sent the block */
.internal-panel { border: 1px solid var(--dgen-orange); border-radius: var(--r); background: var(--surface); }
.internal-panel > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 14px; }
.internal-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-table th, .cost-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cost-table td:last-child, .cost-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.quoted-line { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.quoted-line.bad { border-color: var(--dgen-orange); background: rgba(232, 97, 26, .06); }
.gate-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.gate-list li.critical { color: var(--stop, #c0392b); }
.section-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.section-body { white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--text-2); margin: 0 0 8px; }
.missing { color: var(--text-3); font-style: italic; }

/* ---------- the proposal document (A4, print to PDF) ---------- */
.doc-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.doc-sheet { background: #fff; color: #222; max-width: 820px; margin: 0 auto; }
.doc-sheet section { padding: 28px 32px; border-bottom: 1px solid var(--dgen-turquoise); break-inside: avoid; }
.doc-cover { display: grid; grid-template-columns: 40% 60%; gap: 0; padding: 0 !important; min-height: 420px; }
.doc-cover-panel { background: var(--dgen-navy); color: #fff; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.doc-logo { width: 100%; max-width: 190px; height: auto; background: #fff; border-radius: 6px; padding: 8px; }
.doc-tagline { color: var(--dgen-paleblue); font-size: 12px; letter-spacing: .08em; }
.doc-cover-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.doc-eyebrow { font-size: 12px; letter-spacing: .14em; color: var(--dgen-orange); font-weight: 700; }
.doc-cover-body h1 { margin: 0; font-size: 28px; color: var(--dgen-navy); }
.doc-sub { font-size: 14px; color: #444; }
.doc-slogan p { margin: 0 0 4px; font-size: 26px; line-height: 1.25; color: var(--dgen-paleblue); }
.doc-slogan p.last { color: var(--dgen-navy); font-weight: 700; }
.doc-intro { margin-top: 18px; font-size: 13px; color: #333; }
.doc-intro p { margin: 0 0 8px; }
.doc-section h2 { margin: 0 0 12px; font-size: 16px; letter-spacing: .06em; color: var(--dgen-navy); background: var(--dgen-turquoise); padding: 8px 12px; border-radius: 4px; }
.doc-section p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
.doc-package { border: 1px solid var(--dgen-turquoise); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.doc-package-head { background: var(--dgen-navy); color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.doc-price-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--dgen-turquoise); font-size: 13px; }
.doc-price-row b.accent { color: var(--dgen-orange); font-size: 15px; }
.doc-price-row s { color: #888; }
.doc-subtotal { padding: 8px 12px; text-align: right; font-size: 13px; font-weight: 600; color: var(--dgen-navy); }
.doc-note { font-size: 12px; color: #555; }
.doc-closing { background: var(--dgen-navy); color: #fff; display: flex; align-items: center; gap: 16px; }
.doc-closing p { margin: 0; font-size: 12px; color: var(--dgen-paleblue); }
.doc-mark { width: 44px; height: 44px; background: #fff; border-radius: 6px; padding: 4px; }

@media print {
  .no-print, .nav, .topbar, .crumbs { display: none !important; }
  .doc-sheet { max-width: none; }
  .doc-sheet section { break-inside: avoid; page-break-inside: avoid; }
  @page { size: A4 portrait; margin: 12mm; }
}

@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card { flex-direction: column; align-items: flex-start; gap: 6px; }
  .price-figures { justify-content: flex-start; }
  .cost-table thead { display: none; }
  .cost-table tr { display: grid; grid-template-columns: 1fr auto; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .cost-table td { border: 0; padding: 2px 0; }
  .doc-cover { grid-template-columns: 1fr; }
  .prop-head { flex-direction: column; }
}

/* ---------- PERF-001 · Performans ---------- */
/* The portfolio row carries more status than a work-queue row does (attention, measurement, freshness,
   budget, the "do not touch" gate), so it gets its own grid instead of bending .queue-row, and its own
   breakpoint — the same way NEW-BUSINESS-001 scoped .nb-qcard. The global design language is unchanged. */
.perf-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; }
.perf-row + .perf-row { border-top: 1px solid var(--border); }
.perf-row:hover { background: var(--surface-2); }
.perf-row .t1 { font-weight: 600; font-size: 14px; }
.perf-row .t2 { font-size: 13px; color: var(--text-3); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.perf-row .side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* below this width the status column cannot sit beside the name without clipping it, so it moves under it */
@media (max-width: 720px) {
  .perf-row { grid-template-columns: 40px minmax(0, 1fr); }
  .perf-row .side { grid-column: 2; justify-content: flex-start; padding-bottom: 2px; }
}

/* ---------- ACCOUNT-UX-001-R2: identity control, account popover, Hesabım ---------- */
.nav-user .menu-wrap { flex: 1; min-width: 0; }
.nav-user-btn { flex: 1; min-width: 0; width: 100%; height: auto; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--nav-fg-2); text-align: left; cursor: pointer; }
.nav-user-btn:hover:not(:disabled), .nav-user-btn[aria-expanded=true] { background: var(--nav-bg-2); color: #fff; }
.nav-user-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.nav-user-btn .who { display: block; }
.nav-user-btn .icon { flex: none; }
.menu .acct-pop-id { display: flex; align-items: center; gap: 10px; padding: 10px; min-width: 0; max-width: min(300px, calc(100vw - 32px)); }
.acct-pop-text { min-width: 0; display: flex; flex-direction: column; }
.acct-pop-text b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pop-text span { font-size: 12px; line-height: 17px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-pop-text .acct-pop-role { color: var(--text-2, var(--text-3)); margin-top: 2px; }
.acct-id { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; min-width: 0; }
.acct-id-text { min-width: 0; display: flex; flex-direction: column; }
.acct-id-text b { font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
.acct-id-text span { color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.acct-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.acct-value { overflow-wrap: anywhere; min-width: 0; }
.acct-note { flex-basis: 100%; }
.acct-password { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .nav-user .menu-wrap { flex: none; }
  .nav-user-btn { width: auto; max-width: 220px; }
}
@media (max-width: 480px) {
  .nav-user-btn .who { display: none; }
  .acct-password form.grid-3 { grid-template-columns: minmax(0, 1fr); }
  dl.facts.acct-facts { grid-template-columns: minmax(0, 1fr); }
  .acct-id-text b { font-size: 16px; line-height: 22px; }
}

/* ================================================================================================================
 * FINANCE-002 — Finans kokpiti.
 *
 * Deliberately few primitives. The screen's job is to make five figures readable and to keep every "we do not know
 * this" visible next to them, so the only new shapes are a tile, a row of tiles, a month stepper, a disclosure and
 * the entry buttons. Everything else (cards, chips, notices, attention rows, evidence drawers) is the existing
 * design system, unchanged — this lane redesigns nothing.
 * ================================================================================================================ */
/* The separators are drawn by the TILES, not by a gap over a coloured container. A wrapping auto-fit grid leaves
   empty cells on most widths (five tiles rarely divide evenly), and a coloured container paints those grey — a
   solid block of nothing next to the figures. An inset shadow per tile leaves an empty cell as empty space. */
.fin-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.fin-tile { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: inset -1px -1px 0 var(--border); }
.fin-tile-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
/* the figure is the largest thing in the tile; an absence is deliberately NOT, so "kaydedilmedi" never reads as a number */
.fin-tile-value { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.fin-tile-value .num { font-size: inherit; font-weight: inherit; }
.fin-tile-value .dim { font-size: 14px; font-weight: 500; }
.fin-tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 20px; }
.fin-tile.warn { box-shadow: inset 3px 0 0 var(--warn); }
.fin-tile.stop { box-shadow: inset 3px 0 0 var(--stop); }

.fin-pulse-wrap { display: flex; flex-direction: column; gap: var(--s3); }

/* the month stepper: a group, not a form. The label is the widest part so the arrows do not jump between months */
.fin-period { display: inline-flex; align-items: center; gap: 4px; }
.fin-period > b { min-width: 9.5rem; text-align: center; font-size: 14px; }

/* progressive disclosure: everything the first screen refuses to shout is one of these */
.fin-more { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 0; }
.fin-more > summary { cursor: pointer; padding: 12px 16px; font-size: 13px; color: var(--text-2); font-weight: 500; list-style: none; }
.fin-more > summary::-webkit-details-marker { display: none; }
.fin-more > summary::before { content: '▸ '; color: var(--text-4); }
.fin-more[open] > summary::before { content: '▾ '; }
.fin-more > summary:hover { color: var(--text); }
.fin-more > :not(summary) { padding: 0 16px 16px; }
.fin-more > .divide { padding: 0; border-top: 1px solid var(--border); }
.fin-attn, .fin-attn-client { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.fin-attn > summary, .fin-attn-client > summary { cursor: pointer; padding: 12px 16px; font-size: 13px; color: var(--text-2); font-weight: 500; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.fin-attn > summary::-webkit-details-marker, .fin-attn-client > summary::-webkit-details-marker { display: none; }
.fin-attn > summary::before, .fin-attn-client > summary::before { content: "▸"; color: var(--text-4); }
.fin-attn[open] > summary::before, .fin-attn-client[open] > summary::before { content: "▾"; }
.fin-attn > div { padding: 0 12px 12px; }
.fin-attn-client > div { padding: 0 8px 4px; border-top: 1px solid var(--border); }
.fin-attn-name { color: var(--text); }

.fin-entry { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-xs { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 720px) {
  .fin-pulse { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  .fin-tile-value { font-size: 19px; line-height: 25px; }
  .fin-period > b { min-width: 7.5rem; }
}

/* ================================================================================================================
 * COMMERCIAL-FLOW-001 — the commercial journey.
 *
 * Few primitives on purpose (§10): the lifecycle is a state model, not a wizard, so the screen is four phase bars,
 * one next-action card and two disclosures. Everything else is the existing design system, unchanged.
 * ================================================================================================================ */
.cf-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cf-phase { display: flex; flex-direction: column; gap: 6px; }
.cf-phase-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .03em; color: var(--text-3); }
.cf-phase.here .cf-phase-label { color: var(--text); }
.cf-phase-bar { display: flex; gap: 3px; }
/* a step is one of three things and never looks like another: done, skipped, still ahead */
.cf-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.cf-dot.done { background: var(--ok); }
.cf-dot.skipped { background: var(--warn); opacity: .55; }
.cf-phase.here .cf-dot.pending { background: var(--border-strong); }

/* the one sentence, and the one action that follows from it */
.cf-next { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-lg); background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cf-next.ok { border-left-color: var(--ok); }
.cf-next.warn { border-left-color: var(--warn); }
.cf-next-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-next-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
.cf-next-action { font-size: 18px; line-height: 25px; font-weight: 600; color: var(--text); }
.cf-next-why { margin: 0; padding-left: 18px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.cf-next-why li + li { margin-top: 3px; }

.cf-more { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cf-more > summary { cursor: pointer; padding: 12px 16px; font-size: 13px; color: var(--text-2); font-weight: 500; list-style: none; }
.cf-more > summary::-webkit-details-marker { display: none; }
.cf-more > summary::before { content: '▸ '; color: var(--text-4); }
.cf-more[open] > summary::before { content: '▾ '; }
.cf-more > :not(summary) { padding: 0 16px 14px; }
.cf-more > .divide { padding: 0; border-top: 1px solid var(--border); }

.cf-phase-block { padding: 12px 16px; }
.cf-phase-block + .cf-phase-block { border-top: 1px solid var(--border); }
.cf-state-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.cf-state-mark { width: 16px; text-align: center; font-size: 12px; color: var(--text-4); }
.cf-state-mark.done { color: var(--ok); }
.cf-state-mark.skipped { color: var(--warn); }

.cf-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cf-count { padding: 14px 18px; box-shadow: inset -1px 0 0 var(--border); }
.cf-count b { display: block; font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
.cf-count span { font-size: 12px; color: var(--text-3); }

/* the service multi-select in the quick proposal dialog */
.cf-services { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-service { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.cf-service:has(input:checked) { border-color: var(--accent, var(--text)); background: var(--surface-3); font-weight: 500; }

@media (max-width: 720px) {
  .cf-phases { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .cf-next-action { font-size: 16px; line-height: 23px; }
}

/* EMPLOYEE-LEAVE-001 — İzin & Avans. A request row that opens its review is a full-width, left-aligned button. */
.ppl-row { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 56px; padding: 12px 20px; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); text-align: left; font-weight: 400; white-space: normal; justify-content: flex-start; cursor: pointer; }
.ppl-row:hover:not(:disabled) { background: var(--surface-2); }
.ppl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ppl-row .grow { min-width: 0; }
.ppl-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
/* ACTION-CENTER-UI-001 — Bugün · İlgilenmem gereken işler: the existing attention row, as a link to the owning screen */
a.attention-row.ac-row { text-decoration: none; color: inherit; }
a.attention-row.ac-row:hover { background: var(--surface-2); }
a.attention-row.ac-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ac-row .ac-side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ac-lead { margin: 0 0 8px; }
.ac-holes { margin-top: 8px; }
.ac-row .what { overflow-wrap: anywhere; }
@media (max-width: 900px) { .ac-row .ac-side { justify-content: flex-start; } }

/* ---------- PERSONALIZATION-001: photo avatars, Hesabım › Fotoğraf and Görünüm ---------- */
.avatar.photo { padding: 0; overflow: hidden; color: transparent; background: var(--surface-3); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xl { width: 72px; height: 72px; font-size: 22px; }
.acct-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acct-photo-actions label.btn { cursor: pointer; }
.acct-photo-hint { margin-top: 6px; max-width: 560px; }
.pref-card { display: flex; flex-direction: column; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; }
.pref-row:first-child { padding-top: 0; }
.pref-row + .pref-row { border-top: 1px solid var(--border); }
.pref-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 460px; }
.pref-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pref-swatch { height: auto; padding: 5px 12px 5px 6px; gap: 8px; border-radius: 999px; background: var(--surface); }
.pref-swatch-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); flex: none; }
.pref-swatch.blue .pref-swatch-dot { background: #2563eb; } .pref-swatch.navy .pref-swatch-dot { background: #242455; } .pref-swatch.orange .pref-swatch-dot { background: #e8611a; }
.pref-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); font-weight: 600; }
.pref-swatch[aria-pressed="true"] .pref-swatch-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.pref-bar { margin: 14px 0 0; }
.pref-bar .grow span { opacity: .75; }
@media (max-width: 600px) { .pref-row { align-items: flex-start; flex-direction: column; } .acct-id { align-items: flex-start; } }

/* GOOGLE-DRIVE-STORAGE-001 — the in-app Drive selector and the client's Dosya Alanı (tokens only) */
.drive-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-3); }
.drive-crumbs b { color: var(--text); font-weight: 600; }
.drive-sep { color: var(--text-4); }
.drive-browser button.link, .drive-card button.link { background: none; border: 0; padding: 0; height: auto; color: var(--accent-text); font: inherit; cursor: pointer; text-align: left; }
.drive-browser button.link:hover { text-decoration: underline; }
.drive-list { display: flex; flex-direction: column; }
.drive-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.drive-row:first-child { border-top: 0; }
.drive-row:hover { background: var(--surface-2); }
.drive-icon { color: var(--text-3); display: inline-flex; }
.drive-name { font-weight: 500; overflow-wrap: anywhere; }
.drive-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; margin: 0; }
.drive-areas dt { font-size: 12px; color: var(--text-3); }
.drive-areas dd { margin: 2px 0 0; font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.drive-areas dd button.link { font-size: 12px; }
.drive-choice { display: flex; flex-direction: column; gap: 10px; }
.drive-choice label { display: flex; gap: 10px; align-items: flex-start; }
.drive-picked { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }

/* ---------- UX-SIMPLIFICATION-001: six areas, area sub-navigation, choice controls, hubs, Client 360 V1 ---------- */
.area-nav-host { padding: 0 var(--gutter); background: var(--topbar-bg); border-bottom: 1px solid var(--border); }
.area-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; }
.area-nav::-webkit-scrollbar { display: none; }
.area-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--text-3); text-decoration: none; white-space: nowrap; }
.area-nav a svg.i { width: 16px; height: 16px; }
.area-nav a:hover { color: var(--text); }
.area-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.area-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-more { display: none; }
.nav-extra { display: contents; }

.choice { display: flex; flex-direction: column; gap: 8px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.choice-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500; box-shadow: none; cursor: pointer; }
.choice-chip:hover:not(:disabled) { border-color: var(--text-4); color: var(--text); background: var(--surface); }
.choice-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.choice-chip.on svg.i { color: var(--accent-text); }
.choice-chip.more { border-style: dashed; color: var(--text-3); }
.choice-chip.other { border-style: dashed; }
.choice-chip.clear { padding: 0 8px; }
.choice-chip .avatar { margin-left: -6px; }
.choice-chip:disabled { opacity: .55; cursor: default; }
.choice-rec { font-size: 11px; font-weight: 500; color: var(--text-3); }
.choice-other input { width: 100%; }
.choice-pick input { max-width: 220px; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.choice-card { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: none; min-height: 56px; }
.choice-card:hover:not(:disabled) { border-color: var(--text-4); background: var(--surface); }
.choice-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice-card.stop.on { border-color: var(--stop); background: var(--stop-soft); box-shadow: 0 0 0 1px var(--stop) inset; }
.choice-card.warn.on { border-color: var(--warn); background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn) inset; }
.choice-card-icon { color: var(--text-3); flex: 0 0 auto; margin-top: 1px; }
.choice-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-card-text b { font-size: 14px; }
.choice-card-text span { font-size: 12px; color: var(--text-3); line-height: 16px; }
.field .choice-seg { display: inline-flex; }

.hub-grid .hub-card { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.hub-grid .hub-card .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-grid .hub-card:hover { border-color: var(--text-4); }
.hub-icon { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: 0 0 auto; }

.optlib { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.optlib-cats { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--head-h) + 12px); }
.optlib-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text-2); font-size: 14px; }
.optlib-cat:hover { background: var(--surface-2); color: var(--text); }
.optlib-cat.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.optlib-head { align-items: flex-start; margin-bottom: 14px; }
.optlib-table td.actions { white-space: nowrap; }
.muted-row td { opacity: .6; }
@media (max-width: 900px) { .optlib { grid-template-columns: 1fr; } .optlib-cats { position: static; flex-direction: row; flex-wrap: wrap; } }

/* Client 360 V1: the action-first header, five areas, one row of sub pages */
.c360-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent-soft); margin-bottom: 20px; }
.c360-next .eyebrow { color: var(--accent-text); }
.c360-next h2 { font-size: 18px; line-height: 24px; margin: 4px 0 4px; }
.c360-next .why { color: var(--text-2); font-size: 13px; }
.c360-next .alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.c360-next .cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.c360-next .cta .btn { white-space: nowrap; }
.c360-next.quiet { border-color: var(--border); background: var(--surface-2); }
.c360-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: var(--stop-soft); color: var(--stop); font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.c360-alert a { color: inherit; }
.c360-areas { display: flex; gap: 4px; border-bottom: 1px solid var(--border); align-items: center; overflow-x: auto; scrollbar-width: none; }
.c360-areas::-webkit-scrollbar { display: none; }
.c360-areas a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--text-3); text-decoration: none; white-space: nowrap; }
.c360-areas a[aria-current="page"] { color: var(--text); font-weight: 600; }
.c360-areas a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.c360-areas .menu-wrap { margin-left: auto; }
.c360-areas .menu-wrap > button { height: 40px; border: 0; background: none; box-shadow: none; color: var(--text-3); padding: 0 10px; }
.c360-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 0; margin-bottom: 20px; }
.c360-sub a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.c360-sub a:hover { color: var(--text); border-color: var(--text-4); }
.c360-sub a[aria-current="page"] { background: var(--inverse-bg); color: var(--inverse-fg); border-color: transparent; font-weight: 600; }
@media (max-width: 720px) { .c360-next { grid-template-columns: 1fr; } .c360-next .cta { align-items: stretch; } }

/* Phone: the six areas as a bottom bar; the hubs and the account control in a "Menü" sheet above it */
@media (max-width: 900px) {
  :root { --bottom-nav-h: 60px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: var(--bottom-nav-h); z-index: 40; flex-direction: row; align-items: stretch; gap: 0; padding: 0 4px; overflow: visible; border-top: 1px solid var(--nav-line); }
  .nav .brand { display: none; }
  .nav-spacer { display: none; }
  .nav-list.nav-areas { flex: 1; flex-direction: row; gap: 0; }
  .nav-list.nav-areas a.nav-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; height: var(--bottom-nav-h); padding: 4px 2px; font-size: 10px; line-height: 12px; border-radius: 0; min-width: 0; }
  .nav-list.nav-areas a.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .nav-list.nav-areas a.nav-item[aria-current="page"]::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .nav .count { position: absolute; top: 6px; right: 8px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; }
  .nav-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 64px; height: var(--bottom-nav-h); border: 0; border-radius: 0; background: transparent; color: var(--nav-fg); font-size: 10px; box-shadow: none; }
  .nav-more:hover:not(:disabled) { background: var(--nav-bg-2); color: #fff; }
  .nav-more svg.i { color: var(--nav-fg-2); }
  .nav-extra { display: none; position: fixed; left: 8px; right: 8px; bottom: calc(var(--bottom-nav-h) + 8px); z-index: 41; flex-direction: column; gap: 4px; padding: 10px; background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: var(--r); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.35)); }
  .nav.open .nav-extra { display: flex; }
  .nav-extra .nav-list { flex-direction: column; }
  .nav-extra .nav-user { margin: 0; padding: 10px 8px 2px; border-top: 1px solid var(--nav-line); }
  .main { padding-bottom: calc(var(--bottom-nav-h) + 8px); }
  .action-card { grid-template-columns: 3px 1fr; } .action-card .side { grid-column: 2; text-align: left; align-items: flex-start; }
  .cal-day { min-height: 90px; }
  .attention-row { grid-template-columns: 1fr; }
  .attention-row .lead-icon { display: none; }
}

/* CLIENT-ONBOARDING-CHECKLIST-001 — Müşteri Açılış Kontrolü (Client 360 › Özet card + /app/clients/:id/acilis-kontrolu).
   Tokens only; one column on a phone, every action reachable with a thumb. */
.oc-card { display: flex; flex-direction: column; gap: 12px; }
.oc-card-head { display: flex; gap: 12px; align-items: flex-start; }
.oc-card-title { font-weight: 600; font-size: 15px; line-height: 22px; margin-top: 2px; }
.oc-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.oc-figures > div { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.oc-figures b { font-size: 20px; line-height: 26px; font-variant-numeric: tabular-nums; }
.oc-figures span { font-size: 12px; color: var(--text-3); }
.oc-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.oc-ready-tile { padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.oc-ready-tile[data-state="BLOCKED"] { border-color: var(--stop-line); }
.oc-ready-tile[data-state="READY"] { border-color: var(--ok-line); }
.oc-ready-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.oc-bar > span { display: block; height: 100%; background: var(--accent); }
.oc-ready-tile[data-state="READY"] .oc-bar > span { background: var(--ok); }
.oc-blockers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oc-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oc-flow li { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); background: var(--surface); }
.oc-flow li[data-reached="1"] { color: var(--text-2); background: var(--surface-2); }
.oc-flow li[aria-current="step"] { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.oc-inputs { display: flex; flex-direction: column; gap: 4px; }
.oc-items { padding: 0; }
.oc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--head-h) + 12px); }
.oc-item:first-child { border-top: 0; }
.oc-item[data-awaiting="1"] { background: var(--warn-soft); }
.oc-item-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.oc-item-title { font-weight: 500; overflow-wrap: anywhere; }
.oc-item-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oc-item-meta { display: flex; flex-direction: column; gap: 2px; }
.oc-item-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.oc-history { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); }
.oc-history summary { cursor: pointer; width: max-content; }
.oc-filter { display: flex; }
@media (max-width: 720px) {
  .oc-item { grid-template-columns: 1fr; }
  .oc-item-actions { justify-content: flex-start; }
  .oc-item-actions > button { min-height: 40px; }
  .oc-card-head { flex-direction: column; }
  .oc-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* AVATAR-CROP-001: hand-placed square crop under a round frame */
.crop-stage { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: 8px auto 12px; border-radius: 50%; overflow: hidden; background: var(--surface-2, #111); box-shadow: 0 0 0 2px var(--border, rgba(255,255,255,.2)); }
.crop-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-canvas:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.crop-zoom-row { display: flex; align-items: center; gap: 8px; width: min(280px, 100%); margin: 0 auto 4px; }
.crop-zoom { flex: 1; }
.crop-stage.square { border-radius: 12px; background: repeating-conic-gradient(rgba(127,127,127,.25) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }