/*
 * Base styles and Dalga 0 components (11 §7). Colours only via tokens.css variables.
 * No inline styles anywhere (CSP style-src 'self'): variants are classes, SVG values attributes.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* long codes / URLs wrap instead of widening the page at 390px */
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--text); }
h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
figure { margin: 0; }
.mono { font-family: var(--font-label); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- page shell: a 56px hairline top bar on white, the canvas below ---- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; min-height: 56px; padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface-1); }
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.topbar-end { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-left: auto; }
.account-nav { gap: var(--space-1); }
.account-nav form { margin: 0; }
/* T1S-V: on a phone "Hesabım" is its person icon (the label stays for screen readers) */
@media (max-width: 720px) { .account-nav .account-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.main { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); }
.eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 600; line-height: 14px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.lang-switch { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 2px; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-3); text-decoration: none; padding: 0 var(--space-2); border-radius: 3px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] { color: var(--accent); background: var(--accent-surface); }
/* T1S-V: a signed-in account's switch is a form (buttons styled like the links) */
form.lang-switch { display: flex; align-items: center; margin: 0; }
.lang-switch button { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-3); background: none; border: 0; cursor: pointer; padding: 0 var(--space-2); border-radius: 3px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }

/* ---- brand mark (11 §6): Meridian Junction + word mark from brand.name ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark { width: 32px; height: 32px; flex: none; display: block; }
.bm-plate { fill: var(--mark-plate); }
.bm-a, .bm-b { fill: none; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.bm-a { stroke: var(--mark-primary); }
.bm-b { stroke: var(--mark-secondary); }
.bm-hub, .bm-pin-a { fill: var(--mark-primary); }
.bm-pin-b { fill: var(--mark-secondary); }
.brand-word { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.025em; color: var(--text); }
.brand-word-tail { color: var(--accent); }
.brand-word::after { content: ""; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--mark-dot); align-self: flex-end; margin-bottom: 3px; }

/* ---- button (kit: 4px micro radius, Space Grotesk 600, solid cobalt / hairline outline) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 18px; border-radius: var(--radius-control); border: 1px solid transparent; font: inherit; font-family: var(--font-label); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); color: var(--accent-ink); }
.btn-primary:active { background: var(--accent-active); }
.btn-secondary { background: var(--surface-1); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg); border-color: var(--control-line); color: var(--text); }
.btn-ghost { background: transparent; color: var(--accent); padding: 0 12px; } /* tertiary: cobalt text so it reads as an action, not as plain text */
.btn-ghost:hover { background: var(--accent-surface); color: var(--accent-hi); }
.btn-danger { background: var(--surface-1); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-surface); color: var(--danger-hi); border-color: var(--danger); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; }

/* ---- pill / tag / badge (kit: low, 4px radius, pastel tint, Space Grotesk) ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; min-height: 24px; border-radius: var(--radius-control); font-family: var(--font-label); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; border: 1px solid transparent; }
.pill .ic { width: 14px; height: 14px; }
.pill-neutral { background: var(--surface-2); color: var(--text-2); }
.pill-outline { background: var(--surface-1); border-color: var(--line-strong); color: var(--text-2); }
.pill-accent { background: var(--accent-surface); color: var(--accent); border-color: var(--accent-line); } /* same case as every other badge: a list mixing "Onay bekleniyor" and "TOPLANTI AYARLANDI" read as two systems */
.pill-signal { background: var(--signal-surface); color: var(--signal-ink); border-color: var(--signal-line); }
.pill-danger { background: var(--danger-surface); color: var(--danger); border-color: var(--danger-line); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: block; }
.badge { border-radius: var(--radius-badge); padding: 2px 6px; font-size: 12px; }

/* ---- card: white, hairline, ≤ 8px radius, no shadow ---- */
.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.card-strong { border-color: var(--accent); }
.card-signal { border-color: var(--signal-line); }
.card-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.card-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.inner { background: var(--surface-2); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); }

/* ---- score ring (R13: band only; the number is internal) ---- */
.score { display: inline-flex; align-items: center; gap: var(--space-3); }
.score-ring { position: relative; width: 64px; height: 64px; flex: none; }
.score-ring svg { width: 100%; height: 100%; display: block; }
.score-track { fill: none; stroke: var(--line); stroke-width: 3.5; }
.score-arc { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.score-strong .score-arc { stroke: var(--accent); }
.score-possible .score-arc { stroke: var(--teal); }
.score-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 18px; font-weight: 600; }

/* ---- network node / line ---- */
.net { display: block; width: 100%; height: auto; max-height: 320px; }
.net-line { stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.net-line-strong { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.net-node { fill: var(--surface-1); stroke: var(--line-strong); stroke-width: 1.5; }
.net-node-self { fill: var(--accent-surface); stroke: var(--accent); stroke-width: 2; }
.net-node-anon { fill: var(--signal-surface); stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 3 3; }
.net-pulse { fill: none; stroke: var(--signal-line); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease-out) infinite; }
.net-label { fill: var(--text-2); font-family: var(--font-body); font-size: 12px; }
.net-initial { fill: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.net-list { margin: 0; padding-left: var(--space-5); color: var(--text-3); font-size: 14px; }
.node { display: inline-flex; align-items: center; gap: var(--space-3); }
.node-dot { width: 40px; height: 40px; flex: none; border-radius: var(--radius-inner); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2); font-family: var(--font-display); font-weight: 700; overflow: hidden; }
.node-dot img { width: 80%; height: 80%; object-fit: contain; }
.node-self .node-dot { border-color: var(--accent); background: var(--accent-surface); color: var(--accent); }
.node-anon .node-dot { border: 1.5px dashed var(--signal); background: var(--signal-surface); color: var(--signal-hi); position: relative; overflow: visible; }
.node-anon .node-dot::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

/* ---- source tag (R16: anonymous sources show "şirket sitesi · <sayfa türü>") ---- */
.source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 12px; color: var(--text-4); text-decoration: none; }
a.source:hover { color: var(--text-2); }
.source .ic { width: 12px; height: 12px; }

/* ---- empty / loading / error states ---- */
.state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); border: 1px dashed var(--line-strong); background: var(--surface-1); }
.state > strong { font-family: var(--font-display); font-weight: 600; }
.state .ic { width: 28px; height: 28px; color: var(--text-3); }
.state h1.state-title { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.state-error { border-style: solid; border-color: var(--danger-line); background: var(--danger-surface); }
.state-error .ic { color: var(--danger); }
.state-loading .ic { color: var(--accent); }
.skeleton { display: block; height: 14px; border-radius: var(--radius-badge); background: var(--surface-2); animation: fade 1.2s ease-in-out infinite alternate; }
.skeleton-wide { width: 100%; }
.skeleton-mid { width: 66%; }
.skeleton-short { width: 40%; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 14px; color: var(--text-2); }
.field > label, .field > legend { font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); }
.field input, .field select, .field textarea { min-height: var(--control-h); padding: 6px 12px; border-radius: var(--radius-control); border: 1px solid var(--control-line); background: var(--surface-1); color: var(--text); font: inherit; font-size: 14px; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus-halo); } /* T1S-F: a visible ring (E2 mini-claim fields, keyboard check) */
.form-error { color: var(--danger); font-size: 14px; }

/* ---- tables (admin / dev) ---- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface-1); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--text-3); background: var(--bg); font-weight: 600; font-family: var(--font-label); font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.table thead th { border-bottom-color: var(--line-strong); }
.table tbody tr:hover > td { background: var(--bg); }
.table-wrap { overflow-x: auto; position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-1); }
.card .table-wrap { border: 0; border-radius: 0; }
.table-wrap > .table tr:last-child > td { border-bottom: 0; }
pre.mail { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); padding: var(--space-4); border-radius: var(--radius-inner); font-family: var(--font-mono); font-size: 13px; margin: 0; }
iframe.mail-html { width: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--mail-paper); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-inner); overflow: hidden; font-size: 12px; }
.swatch span { display: block; height: 44px; }
.swatch code { display: block; padding: 6px 8px; font-family: var(--font-mono); color: var(--text-3); }
.sw-bg { background: var(--bg); } .sw-surface-1 { background: var(--surface-1); } .sw-surface-2 { background: var(--surface-2); }
.sw-surface-3 { background: var(--surface-3); } .sw-line { background: var(--line); } .sw-line-strong { background: var(--line-strong); }
.sw-text { background: var(--text); } .sw-text-2 { background: var(--text-2); } .sw-text-3 { background: var(--text-3); } .sw-text-4 { background: var(--text-4); }
.sw-accent { background: var(--accent); } .sw-signal { background: var(--signal); } .sw-danger { background: var(--danger); }

/* ---- Dalga 1 screens: shared bits ---- */
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; }
.page-head .stack { gap: var(--space-2); }
.lead { font-size: 17px; line-height: 1.6; color: var(--text-3); max-width: 40em; }
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--accent-surface); border: 1px solid var(--accent-line); color: var(--text-2); }
.notice .ic { flex: none; color: var(--accent); margin-top: 2px; }
.notice-signal { background: var(--signal-surface); border-color: var(--signal-line); }
.notice-signal .ic { color: var(--signal-hi); }
.notice-danger { background: var(--danger-surface); border-color: var(--danger-line); color: var(--text); }
.notice-danger .ic { color: var(--danger); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.kv { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.kv dt { color: var(--text-3); font-family: var(--font-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-top: 4px; }
.kv dd { margin: 0; min-width: 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.field-hint { font-size: 13px; color: var(--text-4); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
/* a checkbox row inside a .field: not a text input, not a field label */
.field .check input { min-height: 0; padding: 0; border: 0; box-shadow: none; }
.field .check input:focus { box-shadow: none; }
.field .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* keyboard ring (11 §4); .field input:focus removes the outline */
.field > label.check { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); align-items: flex-start; }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: auto; }
.field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus-halo); }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio-row label { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); cursor: pointer; }
.radio-row label:has(input:checked) { border-color: var(--accent); background: var(--accent-surface); }
.radio-row input { accent-color: var(--accent); }
.mono-num { font-family: var(--font-label); font-variant-numeric: tabular-nums; }
.table td.num, .table th.num { text-align: right; font-family: var(--font-label); font-variant-numeric: tabular-nums; }
.table .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.table .row-actions form { margin: 0; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.inline-form { display: inline; margin: 0; }
details.disclose > summary { cursor: pointer; list-style: none; min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose[open] > summary { margin-bottom: var(--space-3); }
.status { display: inline-flex; align-items: center; min-height: 20px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 1px 8px; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.status-done, .status-confirmed, .status-edited, .status-approved { border-color: var(--teal-line); background: var(--teal-surface); color: var(--teal); }
.status-failed, .status-blocked_robots, .status-cancelled { border-color: var(--danger-line); background: var(--danger-surface); color: var(--danger); }
.status-queued, .status-crawling, .status-searching, .status-extracting, .status-waiting_budget, .status-suggested { border-color: var(--line-strong); color: var(--text-2); }
.status-crawling, .status-searching, .status-extracting { position: relative; overflow: hidden; }
.badge-unverified { display: inline-flex; gap: var(--space-2); align-items: center; padding: 2px 10px; border-radius: var(--radius-control); background: var(--signal-surface); border: 1px solid var(--signal-line); color: var(--signal-ink); font-family: var(--font-label); font-weight: 600; font-size: 12px; }
.badge-verified { display: inline-flex; gap: var(--space-2); align-items: center; padding: 2px 10px; border-radius: var(--radius-control); background: var(--teal-surface); border: 1px solid var(--teal-line); color: var(--teal); font-family: var(--font-label); font-weight: 600; font-size: 12px; }

/* ---- brand tile (logo or monogram; the company's own mark, 11 §1) ---- */
.tile { width: 64px; height: 64px; flex: none; border-radius: var(--radius-card); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-strong); position: relative; }
.tile-logo { background: var(--surface-1); border-color: var(--line); }
.tile img { width: 82%; height: 82%; object-fit: contain; display: block; }
.tile-mono { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text); letter-spacing: -0.02em; }
.tile-mono svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-mono span { position: relative; }
.tile-lg { width: 112px; height: 112px; border-radius: var(--radius-card); }
.tile-lg.tile-mono { font-size: 40px; }
.tile-xl { width: 100%; height: 100%; border-radius: var(--radius-card); }
.tile-xl.tile-mono { font-size: clamp(32px, 7vw, 64px); }

/* ---- completeness ring ---- */
.ring { display: inline-flex; align-items: center; gap: var(--space-3); }
.ring-svg { width: 56px; height: 56px; flex: none; position: relative; }
.ring-svg svg { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 4; }
.ring-arc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- E3 profile ---- */
.profile-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.profile-head .stack { gap: var(--space-1); min-width: 0; }
.profile-head h1 { overflow-wrap: anywhere; }
.profile-meta { font-family: var(--font-label); font-size: 13px; color: var(--text-3); }
.values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.values li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.values .value { color: var(--text); }
.values-stale li { opacity: .72; }
.stamp { font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-badge); padding: 1px 6px; }
.stamp-draft { color: var(--signal-ink); background: var(--signal-surface); border-color: var(--signal-line); }
.source-own .ic, .source-third .ic, .source-upload .ic, .source-owner .ic { opacity: .9; }
.sources { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-3); font-size: 14px; overflow-wrap: anywhere; }
.actions-box { display: flex; flex-direction: column; gap: var(--space-4); }
.prose { max-width: 46em; font-size: 16px; line-height: 1.65; color: var(--text-2); }

/* ---- E19 welcome show ("vay"), docs/design/yon-b/B-Karsilama ---- */
.page-welcome .topbar { border-bottom: 0; }
.wshow { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--space-2) var(--space-5) var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.wshow-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.wshow-bar .cluster { justify-content: flex-end; }
.private-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border: 1px solid var(--line); background: var(--surface-1); border-radius: var(--radius-control); font-family: var(--font-label); font-size: 13px; font-weight: 500; color: var(--text-3); }
.private-pill .ic { width: 16px; height: 16px; }
.wshow-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: var(--space-7); align-items: start; }
.wnet { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }
.wnet-rings, .wnet-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wnet-ring { fill: none; stroke: var(--line-strong); stroke-width: .25; }
.wnet-ring-dash { stroke-dasharray: 1 1.4; }
.wnet-line { stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wnet-line-anon { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.wnet-center { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; }
.wnet-center .tile { box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px var(--accent); }
.wnet-node { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--font-label); font-size: 13px; font-weight: 600; }
.wnet-anon { position: absolute; left: 88%; top: 11%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--signal-hi); }
.hatch { background: var(--signal-surface); }
.wnet-anon-dot { width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed var(--signal); display: flex; align-items: center; justify-content: center; color: var(--signal-hi); }
.wnet-pos-1 { left: 18%; top: 31.5%; } .wnet-pos-2 { left: 50%; top: 13%; } .wnet-pos-3 { left: 82%; top: 31.5%; }
.wnet-pos-4 { left: 82%; top: 68.5%; } .wnet-pos-5 { left: 50%; top: 87%; } .wnet-pos-6 { left: 18%; top: 68.5%; }
.wnet-pos-7 { left: 10%; top: 50%; } .wnet-pos-8 { left: 90%; top: 50%; }
.palette { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; }
.swatch-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 6px; background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-family: var(--font-label); font-size: 13px; }
.swatch-chip svg { width: 22px; height: 22px; display: block; }
.wshow-copy { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-3); }
.phase { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.phase-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block; }
.phase-domain { color: var(--text-3); text-transform: none; letter-spacing: 0; }
.progress { position: relative; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--accent); border-radius: 2px; transform-origin: left center; }
.wshow h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.wshow .summary { font-size: 17px; color: var(--text-2); max-width: 34em; }
.findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.finding { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); }
.finding-num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-control); background: var(--accent-surface); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--font-label); font-size: 12px; font-weight: 600; }
.finding .stack { gap: 4px; min-width: 0; }
.finding-text { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.draft-card { display: flex; flex-wrap: wrap; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: var(--surface-1); }
.draft-side { flex: 1 1 280px; position: relative; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between; background: var(--surface-2); }
.draft-side > svg.draft-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.draft-side > *:not(svg) { position: relative; }
.ink-light { color: var(--ink-on-dark); }
.ink-dark { color: var(--ink-on-light); }
.ink-dark .profile-meta { color: var(--ink-on-light); }
.draft-name { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.025em; line-height: 1.1; overflow-wrap: anywhere; }
.draft-body { flex: 999 1 460px; min-width: 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.draft-accent { display: flex; gap: 6px; }
.draft-accent svg { width: 36px; height: 6px; display: block; }
.profiles-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.hook { border: 1px solid var(--signal-line); border-radius: var(--radius-card); background: var(--surface-1); padding: var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-6); align-items: center; }
.hook h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.12; letter-spacing: -0.025em; }
.hook-eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--signal-hi); text-transform: uppercase; letter-spacing: .06em; }
.ghosts { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.ghost { width: 150px; height: 104px; border-radius: var(--radius-card); border: 1px dashed var(--signal-line); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.ghost span { display: block; height: 8px; border-radius: 4px; background: var(--signal-line); }
.ghost span:nth-child(2) { width: 70%; }
.ghost span:nth-child(3) { width: 45%; }
.ghost-dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--signal); }
.cta-final { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--surface-1); }
.cta-final h2 { font-size: clamp(24px, 3.4vw, 32px); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.cta-top { display: none; }
.wshow-foot { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.wshow-foot a { color: var(--text-3); }
/* playing: scenes hidden until welcome.js reveals them (no JS / reduced motion: everything static) */
.wshow.is-playing [data-reveal]:not(.is-on) { visibility: hidden; opacity: 0; }
.wshow.is-playing [data-reveal].is-on { animation: rise var(--dur-show, 650ms) var(--ease-out) both; }
.wshow.is-playing .wnet-node.is-on, .wshow.is-playing .wnet-center.is-on, .wshow.is-playing .wnet-anon.is-on { animation: pop 550ms var(--ease-out) both; }
.wshow.is-playing .progress-bar { transform: scaleX(var(--p, 0)); transition: transform 500ms ease; }
.wshow .progress-bar.is-scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent-line); opacity: .6; animation: sweep 1.6s linear infinite; }
.wshow.is-playing .js-only { display: inline-flex; }
.js-only { display: none; }
.anon-pulse { animation: pulse-ring 2.4s ease-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--signal-line); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .cta-top { display: flex; }
}
.wshow.is-static .cta-top { display: flex; }

/* ---- E5 opportunity reveal (02 E5 "Açılış anı") ---- */
.opp { display: flex; flex-direction: column; gap: var(--space-4); }
.opp-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.opp-who { position: relative; display: grid; min-width: 0; }
.opp-who > * { grid-area: 1 / 1; }
.reveal-moment .opp-anon { animation: reveal-out 900ms var(--ease-out) 1.4s both; }
.reveal-moment .opp-real { animation: reveal-in 900ms var(--ease-out) 1.4s both; }
@keyframes reveal-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes reveal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.opp:not(.reveal-moment) .opp-anon.is-replaced { display: none; }
.question { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inner); background: var(--surface-2); }
.question-text { font-weight: 600; }

/* ---- E6 stepper + core rows ---- */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); counter-reset: step; }
.stepper li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 4px; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface-1); color: var(--text-3); font-size: 13px; }
.stepper li::before { counter-increment: step; content: counter(step); width: 24px; height: 24px; border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); font-family: var(--font-label); font-size: 12px; font-weight: 600; }
.stepper li[aria-current="step"] { color: var(--text); border-color: var(--accent); background: var(--accent-surface); }
.stepper li[aria-current="step"]::before { border-color: var(--accent); color: var(--accent); background: var(--surface-1); }
.stepper li.is-done::before { background: var(--teal); border-color: var(--teal); color: var(--accent-ink); }
.core-row { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.core-row:first-child { border-top: 0; padding-top: 0; }
.core-row-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; }
.core-row-head h3 { font-size: 16px; }
.core-value { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-2); }
.core-value .stack { gap: 2px; min-width: 0; flex: 1 1 260px; }
.core-value .value { overflow-wrap: anywhere; }
.core-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.core-actions form { margin: 0; }
.edit-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; width: 100%; }
.edit-form .field { flex: 1 1 260px; }
.required-mark { color: var(--signal-hi); font-family: var(--font-label); font-size: 12px; }
.approve-box { position: sticky; bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface-1); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay); }
.approve-box.is-approved { border-color: var(--teal); }

.edit-form .field { min-width: 0; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { max-width: 100%; min-width: 0; width: 100%; }
.ink-light .profile-meta { color: var(--ink-on-dark); }
.draft-body > .btn { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .opp-anon { display: none; }
}
/* ---- motion (11 §5) ---- */
.rise { animation: rise var(--dur) var(--ease-out) both; }
.pop { animation: pop var(--dur) var(--ease-out) both; }
.fade { animation: fade var(--dur) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes scan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- phone width (11 §7: ≥ 360 px, no horizontal scroll) ---- */
@media (max-width: 720px) {
  .main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .wshow { padding: var(--space-2) var(--space-4) var(--space-6); gap: var(--space-6); }
  .wnet { max-width: 360px; }
  .hook, .cta-final, .draft-body, .draft-side { padding: var(--space-5); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: var(--space-2) var(--space-4); }
  .net { display: none; }
  .net-list { padding-left: var(--space-4); }
}
@media (min-width: 721px) {
  .net-list.net-list-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---- Dalga 1/C: E8 needs, E9 candidate cards (B-Adaylar language) ---- */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain > legend { padding: 0; font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }
.need-form .radio-row label { min-height: var(--tap); }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { color: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); color: var(--text-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-label); font-size: 14px; font-weight: 500; }
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.filters { display: flex; flex-direction: column; gap: var(--space-3); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-2); text-decoration: none; font-family: var(--font-label); font-size: 13px; font-weight: 500; }
.chip:hover { border-color: var(--control-line); background: var(--bg); color: var(--text); }
.chip[aria-current="true"] { background: var(--accent-surface); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.need-block { gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.need-head h2 { font-size: 22px; }
.net-box { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.net-box .net-list-fallback { display: none; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }
.match { gap: var(--space-4); animation: rise var(--dur) var(--ease-out) both; }
.match-head { display: flex; gap: var(--space-4); align-items: center; }
.match-who { flex: 1; min-width: 0; gap: var(--space-2); }
.match-who h3 { overflow-wrap: anywhere; }
.card-title { font-size: 18px; flex: 1; min-width: 0; }
.evidence { gap: var(--space-2); }
.quote { background: var(--surface-2); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
p.quote { color: var(--text-2); }
.warn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); color: var(--signal-ink); font-size: 14px; }
.warn-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.warn-list .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.question-pick { padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-2); }
.q-list, .timeline { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.timeline { list-style: none; padding-left: 0; }
@media (max-width: 720px) {
  .net-box .net { display: none; }
  .net-box .net-list-fallback { display: block; }
  .match-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .match { animation: none; } }

/* ---- Dalga 2 / Kol E: iç ekip (E13–E15) ---- */
.page-admin .btn-sm, .page-admin .chip { min-height: var(--control-h); }
.setting-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.setting-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line); min-width: 0; }
.setting-row:first-child { border-top: 0; }
.setting-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.setting-label { font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--text); }
.setting-key { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; } /* T1S-X: the raw key stays visible for the owner */
.setting-hint { margin: 0; }
.setting-control { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.setting-control input, .setting-control select, .setting-control textarea { min-height: var(--control-h); padding: 6px 12px; border-radius: var(--radius-control); border: 1px solid var(--control-line); background: var(--surface-1); color: var(--text); font: inherit; font-size: 14px; flex: 1 1 220px; min-width: 0; max-width: 100%; }
.setting-control input:focus, .setting-control select:focus, .setting-control textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--focus-halo); }
.setting-control textarea { min-height: 96px; resize: vertical; }
.setting-control :disabled { opacity: .7; cursor: not-allowed; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter-bar .field { flex: 1 1 160px; min-width: 0; }
.row-form { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.row-form .field { flex: 1 1 200px; min-width: 0; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; border: 0; padding: 0; margin: 0; min-width: 0; }
.bulk-bar > .field { flex: 1 1 180px; min-width: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist .ic { flex: none; margin-top: 2px; }
.checklist .is-ok .ic { color: var(--teal); }
.checklist .is-open .ic { color: var(--signal-hi); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-4); }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.kpi-label { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.funnel, .bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.funnel-step, .bars li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--space-2) var(--space-3); align-items: center; }
.funnel-step > .mono.muted { grid-column: 1 / -1; font-size: 12px; }
.funnel progress, .bars progress, progress.meter { width: 100%; height: 8px; appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; accent-color: var(--accent); }
.funnel progress::-webkit-progress-bar, .bars progress::-webkit-progress-bar, progress.meter::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--radius-pill); }
.funnel progress::-webkit-progress-value, .bars progress::-webkit-progress-value, progress.meter::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.funnel progress::-moz-progress-bar, .bars progress::-moz-progress-bar, progress.meter::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.transcript-msg { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; }
.transcript-msg.side-candidate { background: var(--surface-2); }
.transcript-msg.side-candidate { border-left: 0; margin-left: var(--space-5); }
.transcript-msg.is-held { border: 1px solid var(--danger-line); background: var(--danger-surface); }
.label-item, .term-item { border: 1px solid var(--line); background: var(--surface-1); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); margin: 0; min-width: 0; }
.label-item legend { padding: 0 var(--space-2); overflow-wrap: anywhere; }
.sla-warn { border-color: var(--signal); }
.sla-late { border-color: var(--danger-line); }
.audit-change { max-width: 420px; overflow-wrap: anywhere; font-size: 12px; }
.text-danger { color: var(--danger); }
.status-pending_review, .status-proposed, .status-draft, .status-open { border-color: var(--signal-line); background: var(--signal-surface); color: var(--signal-ink); }
.status-live, .status-sent, .status-joined, .status-applied { border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent); }
.status-rejected, .status-rolled_back, .status-bounced, .status-expired { border-color: var(--danger-line); background: var(--danger-surface); color: var(--danger); }
@media (max-width: 720px) {
  .transcript-msg.side-candidate { margin-left: 0; }
  .funnel-step, .bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .funnel-step progress, .bars li progress { grid-column: 1 / -1; grid-row: 2; }
  .audit-change { max-width: none; }
}
/* E14 mail catalogue: long template keys wrap at 360px */
.card-head > .stack { min-width: 0; }
.card-head .mono { overflow-wrap: anywhere; }
/* ---- Dalga 2 / B: candidate screens (E2, E3, E4, E5, E6, E19) ---- */
.band { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 2px 10px; border-radius: var(--radius-control); font-family: var(--font-label); font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-2); white-space: nowrap; }
.band-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; display: block; flex: none; }
.band-strong { border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent); }
.band-strong .band-dot { background: var(--accent); }
.opp-head .band { margin-left: auto; }
.qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.qa { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; padding-bottom: 0; }
.qa-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.qa .inner { min-width: 0; }
blockquote.quote { margin: 0; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.answer-draft, .answer-final { margin: 0; overflow-wrap: anywhere; }
.preview { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--text-2); }
.preview .ic { flex: none; color: var(--accent); margin-top: 2px; }
.e2 .card, .e2 .notice, .e2 .inner { min-width: 0; overflow-wrap: anywhere; }
.e2 .notice .stack { min-width: 0; }
.e2 .opp-who { flex: 1 1 240px; } /* phone: the named asker (with its summary) goes under the tile instead of a narrow column beside it */
@media (max-width: 420px) {
  .opp-head .band { margin-left: 0; }
  .e2 .row > .btn, .e2 form.row > .btn { width: 100%; }
}
.fix-inline { margin-top: var(--space-1); }
.fix-inline > summary { min-height: 36px; font-size: 14px; }
.values li { flex-wrap: wrap; }
code.copy { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-2); font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.onb-steps { display: flex; flex-direction: column; gap: var(--space-2); }
.onb-steps .stepper a { color: inherit; text-decoration: none; display: inline-flex; min-height: var(--tap); align-items: center; }
.onb-steps .stepper a:hover { color: var(--text); }
.onb-progress { height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.onb-progress-bar { display: block; height: 100%; background: var(--accent); width: 0; }
.onb-p1 { width: 14%; } .onb-p2 { width: 29%; } .onb-p3 { width: 43%; } .onb-p4 { width: 57%; } .onb-p5 { width: 71%; } .onb-p6 { width: 86%; } .onb-p7 { width: 100%; }
.onb-foot { justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.fact-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.file-name { display: inline-flex; gap: var(--space-2); align-items: center; overflow-wrap: anywhere; }
.select-sm { min-height: 32px; padding: 4px 10px; border-radius: var(--radius-control); border: 1px solid var(--control-line); background: var(--surface-1); color: var(--text); font: inherit; font-size: 14px; }
.hook-net { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.hook-node { width: 88px; height: 88px; border-radius: var(--radius-card); display: inline-flex; align-items: center; justify-content: center; grid-row: 1; }
.hook-node .tile { width: 88px; height: 88px; border-radius: var(--radius-card); }
.hook-node-anon { border: 1.5px dashed var(--signal); color: var(--signal-hi); position: relative; }
.hook-node-anon .ic { width: 36px; height: 36px; }
.hook-node-self { box-shadow: 0 0 0 2px var(--accent); }
.hook-line { grid-row: 1; height: 0; border-top: 1.5px dashed var(--signal); min-width: 32px; }
.hook-label { grid-row: 2; font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--accent); justify-self: center; }
.hook-label-anon { color: var(--signal-hi); grid-column: 1; }
.hook-net .hook-label:not(.hook-label-anon) { grid-column: 3; }
.anon-card { border: 1px dashed var(--signal-line); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); background: var(--signal-surface); min-width: 0; overflow-wrap: anywhere; }
.anon-card-who { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--signal-hi); font-weight: 600; }
.anon-card p { margin: 0; color: var(--text-2); }
@media (max-width: 420px) { .hook { padding: var(--space-4); } .hook-node, .hook-node .tile { width: 64px; height: 64px; } }
.e2 fieldset.field, .card fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
/* ---- Dalga 2/C: member frame (E7 B-Panel), band, panel blocks, E9 polish, E11, E18 ---- */
.mshell { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.mshell-company { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.mshell-who { gap: 2px; min-width: 0; }
.mshell-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; }
.mshell-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.switcher { position: relative; }
.switcher > summary { list-style: none; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher-panel { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); }
.switcher-item { display: flex; gap: var(--space-3); align-items: center; width: 100%; min-height: var(--tap); padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-inner); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.switcher-item:hover { background: var(--surface-2); }
.switcher-item[aria-current="true"] { border-color: var(--accent); background: var(--accent-surface); cursor: default; }
.switcher-item .tile { width: 36px; height: 36px; border-radius: var(--radius-inner); }
.switcher-item .tile-mono { font-size: 14px; }
.switcher-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-2); }
.bell:hover { color: var(--text); border-color: var(--control-line); background: var(--bg); }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--signal-hi); color: var(--accent-ink); font-family: var(--font-label); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.member-pill { display: inline-flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; border: 1px solid var(--line-strong); background: var(--surface-1); border-radius: var(--radius-control); font-size: 14px; color: var(--text-2); min-height: 40px; }
.member-dot { width: 32px; height: 32px; border-radius: 3px; background: var(--accent-surface); border: 1px solid var(--accent-line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 600; font-size: 12px; color: var(--accent); }
.mnav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.mnav-item { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); color: var(--text-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-label); font-size: 14px; font-weight: 500; }
.mnav-item:hover { color: var(--text); }
.mnav-item[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.strip { align-items: center; }
.strip a { color: var(--signal-hi); }

/* band (R13: never a number) */
.band { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; padding: 2px 10px 2px 8px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--text-2); }
.band-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.band-bars span { display: block; width: 4px; border-radius: 2px; background: var(--line-strong); }
.band-bars span:nth-child(1) { height: 6px; }
.band-bars span:nth-child(2) { height: 10px; }
.band-bars span:nth-child(3) { height: 14px; }
.band-possible { border-color: var(--teal-line); color: var(--teal); }
.band-possible .band-bars span:nth-child(-n+2) { background: var(--teal); }
.band-strong { border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent); font-weight: 600; }
.band-strong .band-bars span { background: var(--accent); }

/* network picture polish: labels with a halo, ghost placeholders */
.net-label { paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
.net-label-ghost { fill: var(--text-4); font-family: var(--font-label); font-size: 11px; }
.net-line-ghost { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.net-node-ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 4; }
.net-node-strong { stroke: var(--accent); }

/* E7 panel blocks */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--space-4); align-items: start; }
.block { gap: var(--space-3); }
.block h2 { font-size: 18px; display: flex; gap: var(--space-2); align-items: center; }
.block h2 > .ic { color: var(--accent); }
.block-accent { border-color: var(--accent); }
.block-signal { border-color: var(--signal-line); }
.block > .btn { align-self: flex-start; }
.block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.block-list li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-inner); background: var(--bg); border: 1px solid var(--line); }
.block-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; overflow-wrap: break-word; }
.block-main .node { margin-bottom: var(--space-1); }
.block-big { font-size: 28px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.countdown { display: inline-flex; gap: 6px; align-items: center; color: var(--signal-hi); font-size: 13px; }
.countdown .ic { width: 14px; height: 14px; }
.ring-row { gap: var(--space-4); }
.block .state { padding: var(--space-4); }

/* E9 polish (Dalga 1 screenshot review): names wrap at word boundaries, badges never squeeze */
.match-who h3 { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.match-who .pill, .opp .pill, .status { white-space: nowrap; }
.match-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.match-head .tile { width: 56px; height: 56px; }
.opp-side { display: flex; flex-direction: column; gap: var(--space-3); }
.answer-box { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-2); border: 1px solid var(--line); }
.answer-box .field textarea { min-height: 72px; }
.path-choice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.path-choice label { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); cursor: pointer; }
.path-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-surface); }
.path-choice input { accent-color: var(--accent); }

/* E11 / E18 */
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.member-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-1); border: 1px solid var(--line); }
.member-row .stack { gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.member-row form { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.member-row select, .share-row select { min-height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--control-line); background: var(--surface-1); color: var(--text); font: inherit; font-size: 14px; }
.share-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.share-row .stack { gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.share-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.pref-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pref-table th, .pref-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: left; }
.pref-table th { background: var(--bg); color: var(--text-3); font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pref-table td input { width: 18px; height: 18px; accent-color: var(--accent); }
.quota-meter { display: flex; gap: 6px; }
.quota-meter span { width: 28px; height: 8px; border-radius: 4px; background: var(--line-strong); display: block; }
.quota-meter span.is-left { background: var(--accent); }
@media (max-width: 720px) {
  .mshell-name { font-size: 20px; }
  .share-row { grid-template-columns: auto minmax(0, 1fr); }
  .share-row > select, .share-row > .pill { grid-column: 2; justify-self: start; }
  .pref-table th, .pref-table td { padding: 6px 4px; }
}
/* phone width: long option labels and list tables never push the page sideways (11 §7) */
.main select, .field-select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.field-select { min-height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--control-line); background: var(--surface-1); color: var(--text); font: inherit; font-size: 14px; }
@media (max-width: 720px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .table-stack td { border: 0; padding: 4px 0; }
  .table-stack td[data-label]::before { content: attr(data-label) " · "; color: var(--text-4); font-family: var(--font-label); font-size: 12px; }
}
.block-wide { grid-column: 1 / -1; }
.net-initial-sm { fill: var(--text-3); font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.net-box .net { max-height: 280px; }
@media (max-width: 720px) { .block .net-box { display: none; } }
.opp-head .match-who { flex: 1 1 220px; }
.opp-head > .node { max-width: 100%; min-width: 0; }
.opp-head > .node .stack { min-width: 0; overflow-wrap: break-word; }
/* ---- Dalga 2 / Kol D: E16 tanışma (02 E16; 11 §4: pill / card / 44 px targets) ---- */
.intro-who-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.intro-who-text { flex: 1 1 200px; min-width: 0; gap: var(--space-2); }
.intro-who-text strong { overflow-wrap: anywhere; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.intro-steps li { font-size: 13px; }
.slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.slot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inner); background: var(--surface-1); border: 1px solid var(--line); }
.slot strong { overflow-wrap: anywhere; }
.slot .stack { gap: var(--space-1); min-width: 0; flex: 1 1 220px; }
.slot-gone { opacity: .7; }
.slot-left { border-color: var(--accent); }
.slot-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.slot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.slot-row legend { font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }
.phone-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: var(--space-3); }
.intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.intro-item { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; min-height: var(--tap); color: var(--text); text-decoration: none; }
.intro-item strong { overflow-wrap: anywhere; }
.intro-link { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.intro-link a { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 720px) {
  .slot-row, .phone-row { grid-template-columns: minmax(0, 1fr); }
  .slot .inline-form, .slot .btn { width: 100%; }
}
/* ---- Dalga 2/F: E17 Agent'ım, E10 agent görüşme odası (11 Yön B) ---- */
.agent-strip .card-head h2 { font-size: 18px; }
.agent-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 2px solid var(--line-strong); }
.agent-dot-active { background: var(--teal); border-color: var(--teal); }
.agent-dot-paused, .agent-dot-ready { border-color: var(--accent); }
.agent-dot-declined, .agent-dot-not_created { border-style: dashed; }
.lock-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lock-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-inner); background: var(--bg); border: 1px solid var(--line); color: var(--text-2); overflow-wrap: anywhere; }
.lock-list .ic { width: 16px; height: 16px; flex: none; color: var(--accent); }
.grow { flex: 1 1 12em; min-width: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
fieldset.card { margin: 0; min-width: 0; }
fieldset.card > legend { padding: 0 var(--space-2); }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.chat-msg { max-width: min(46em, 100%); align-self: flex-start; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-inner); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; animation: rise var(--dur) var(--ease-out) both; }
.chat-mine { align-self: flex-end; border-color: var(--accent-line); background: var(--accent-surface); }
.chat-held { border-style: dashed; border-color: var(--signal-line); background: var(--signal-surface); color: var(--signal-ink); }
.chat-who { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-3); } /* a speaker name: not uppercased (lang="tr" would turn "Agentic" into "AGENTİC") */
.chat-msg p { margin: 0; }
.talk-head { gap: var(--space-3); }
.talk-parties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.talk-party { gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.talk-link { flex: 1 1 24px; min-width: 24px; height: 2px; background: var(--accent); border-radius: 2px; }
.talk-anon { border: 1.5px dashed var(--signal); color: var(--signal-hi); background: var(--signal-surface); }
.talk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.talk-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.talk-row-main { flex: 1 1 18em; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.talk-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.summary h3 { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.status-running, .status-waiting_owner { border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent); }
.status-summary_ready { border-color: var(--teal-line); background: var(--teal-surface); color: var(--teal); }
.status-held_for_review, .status-stopped { border-color: var(--signal-line); background: var(--signal-surface); color: var(--signal-ink); }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; } }
/* ---- Dalga 3 / I: E15 filter bar, member tab strip, translated file picker ---- */
/* a .card is a flex column: the filter row must be a row, or align-items: flex-end pushes every field to the right edge */
.filter-bar { flex-direction: row; align-items: flex-end; }
.filter-bar > .cluster { flex: 0 1 auto; }
.mnav { row-gap: 0; }
@media (max-width: 720px) { .mnav-item { padding: 0 var(--space-2); font-size: 14px; } }
/* owner decision 2026-10-23: on a phone the member menu is one row that scrolls sideways (no
   visible scrollbar); scroll-tabs.js brings the current tab into view and fades only the edge
   that hides more tabs. Desktop keeps the wrapping strip. */
@media (max-width: 720px) {
  .mnav { position: relative; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--space-6); }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav-item { flex: 0 0 auto; white-space: nowrap; }
  .mnav-item:focus-visible { outline-offset: -2px; }
  /* the edge fade is an alpha mask (flat SVG files, no gradient in CSS): solid + a 32px edge */
  .mnav.fade-r { -webkit-mask-image: url("../img/edge-solid.svg"), url("../img/edge-fade-r.svg"); -webkit-mask-position: left top, right top; -webkit-mask-size: calc(100% - var(--space-6)) 100%, var(--space-6) 100%; -webkit-mask-repeat: no-repeat; mask-image: url("../img/edge-solid.svg"), url("../img/edge-fade-r.svg"); mask-position: left top, right top; mask-size: calc(100% - var(--space-6)) 100%, var(--space-6) 100%; mask-repeat: no-repeat; }
  .mnav.fade-l { -webkit-mask-image: url("../img/edge-fade-l.svg"), url("../img/edge-solid.svg"); -webkit-mask-position: left top, right top; -webkit-mask-size: var(--space-6) 100%, calc(100% - var(--space-6)) 100%; -webkit-mask-repeat: no-repeat; mask-image: url("../img/edge-fade-l.svg"), url("../img/edge-solid.svg"); mask-position: left top, right top; mask-size: var(--space-6) 100%, calc(100% - var(--space-6)) 100%; mask-repeat: no-repeat; }
  .mnav.fade-l.fade-r { -webkit-mask-image: url("../img/edge-fade-l.svg"), url("../img/edge-solid.svg"), url("../img/edge-fade-r.svg"); -webkit-mask-position: left top, center top, right top; -webkit-mask-size: var(--space-6) 100%, calc(100% - 2 * var(--space-6)) 100%, var(--space-6) 100%; -webkit-mask-repeat: no-repeat; mask-image: url("../img/edge-fade-l.svg"), url("../img/edge-solid.svg"), url("../img/edge-fade-r.svg"); mask-position: left top, center top, right top; mask-size: var(--space-6) 100%, calc(100% - 2 * var(--space-6)) 100%, var(--space-6) 100%; mask-repeat: no-repeat; }
}
.file-pick { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; min-width: 0; max-width: 100%; }
.file-pick-face { display: none; }
.file-pick.is-ready .file-pick-face { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; min-width: 0; max-width: 100%; }
.file-pick.is-ready .file-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.file-pick.is-ready .file-pick-input:focus-visible + .file-pick-face .file-pick-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-pick.is-ready .file-pick-input:hover + .file-pick-face .file-pick-btn { border-color: var(--control-line); background: var(--bg); color: var(--text); }
.file-pick-names { color: var(--text-3); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.file-pick.has-files .file-pick-names { color: var(--text); }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 50; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-2); }
/* E19: "Tekrar oynat" stays after "Atla" (the skip control only while the show plays) */
.wshow.is-animated .js-only { display: inline-flex; }
.wshow.is-animated:not(.is-playing) [data-skip] { display: none; }
.wshow.is-over [data-skip] { display: none; } /* the show finished on its own: nothing left to skip */
.filter-bar .field input, .filter-bar .field select { height: var(--control-h); box-sizing: border-box; }

/* ---- T1S-G: internal team frame — side menu, page head, dashboard, company tabs, own form pages ---- */
.admin-shell { flex: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } /* phone: the menu row keeps its own height on a short page */
.admin-page { min-width: 0; }
.admin-page > .main { max-width: 1180px; margin: 0; }
.admin-page > .main-narrow { max-width: 760px; }
.side { min-width: 0; }
.side > .side-nav { display: none; }
.side-menu { border-bottom: 1px solid var(--line); background: var(--surface-1); }
.side-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); color: var(--text-2); }
.side-menu > summary::-webkit-details-marker { display: none; }
.side-menu > summary .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.side-menu > summary strong { color: var(--text); font-weight: 600; }
.side-menu > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease-out); }
.side-menu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.side-menu > summary:focus-visible { outline-offset: -2px; }
.side-menu .side-body { padding: 0 var(--space-3) var(--space-4); }
.side-body { display: flex; flex-direction: column; gap: var(--space-4); }
.side-group { display: flex; flex-direction: column; gap: var(--space-1); }
.side-group-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0 var(--space-3); font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.side-group-title .ic { width: 14px; height: 14px; color: var(--text-3); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-link { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--text-2); text-decoration: none; font-size: 14px; border: 1px solid transparent; }
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link[aria-current="page"] { background: var(--accent-surface); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.side-foot { padding: var(--space-2) var(--space-3) 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.side-foot form { margin: 0; }
@media (min-width: 1024px) {
  .admin-shell { grid-template-columns: 252px minmax(0, 1fr); align-content: stretch; }
  .side-menu { display: none; }
  .side { background: var(--surface-1); border-right: 1px solid var(--line); }
  .side > .side-nav { display: flex; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: var(--space-5) var(--space-3) var(--space-6); }
  .admin-page > .main { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (max-width: 1023px) {
  .side-link { min-height: var(--tap); }
}

/* page head: breadcrumb, title, lead, own buttons */
.admin-head { align-items: flex-start; }
.admin-head > .stack { flex: 1 1 24em; min-width: 0; }
.admin-head h1 { font-size: clamp(26px, 3.4vw, 34px); overflow-wrap: anywhere; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-3); } /* crumbs carry company names: not uppercased */
.crumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--text-4); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-2); }
.confirm-subject { font-size: 22px; overflow-wrap: anywhere; }

/* dashboard: equal grids (every card of a grid has the same width and height) */
.dash-title { font-size: 12px; font-family: var(--font-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dash-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-auto-rows: 1fr; align-items: stretch; }
.dash-grid > li { display: flex; min-width: 0; }
.dash-grid > li > .card, .dash-grid > .card { flex: 1; min-width: 0; height: 100%; }
.dash-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.dash-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); grid-auto-rows: auto; }
.dash-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); grid-auto-rows: auto; }
.dash-card { gap: var(--space-2); padding: var(--space-4) var(--space-5); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.dash-card:hover { border-color: var(--line-strong); background: var(--bg); color: var(--text); }
.dash-top { display: flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.dash-top .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.dash-label { min-width: 0; overflow-wrap: anywhere; }
.dash-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash-value-sm { font-size: 22px; overflow-wrap: anywhere; }
.dash-ctx { font-size: 14px; color: var(--text-3); margin-top: auto; }
.dash-card.is-todo .dash-value { color: var(--text); }
.dash-card.is-warn { border-color: var(--signal-line); }
.dash-card.is-warn .dash-top .ic, .dash-card.is-warn .dash-value { color: var(--signal-hi); }
.dash-card.is-alert { border-color: var(--danger-line); background: var(--danger-surface); }
.dash-card.is-alert .dash-top .ic, .dash-card.is-alert .dash-value { color: var(--danger-hi); }
.dash-card.is-live { border-color: var(--accent-line); }
.dash-card.is-live .dash-value { color: var(--accent); }
.dash-panel { gap: var(--space-3); min-width: 0; }
.dash-panel h3 { font-size: 17px; }
.dash-others { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.meter { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.meter-bar { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); }
.is-warn .meter-bar { background: var(--signal); }
.is-alert .meter-bar { background: var(--danger); }
.meter-10 { width: 10%; } .meter-20 { width: 20%; } .meter-30 { width: 30%; } .meter-40 { width: 40%; } .meter-50 { width: 50%; }
.meter-60 { width: 60%; } .meter-70 { width: 70%; } .meter-80 { width: 80%; } .meter-90 { width: 90%; } .meter-full { width: 100%; }
.mini-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mini-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; font-size: 14px; }
.mini-funnel progress { grid-column: 1 / -1; width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.mini-funnel progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--radius-pill); }
.mini-funnel progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.mini-funnel progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.kv-tight { grid-template-columns: minmax(7em, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.kv-tight dt { font-family: var(--font-body); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text-3); padding-top: 0; }
.kv-tight dd { text-align: right; font-size: 14px; overflow-wrap: anywhere; }
.newest-list li, .event-list li { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.newest-list li:last-child, .event-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.newest-list .mono, .event-list .mono { font-size: 13px; overflow-wrap: anywhere; }
.dash-grid-compact { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

/* company page: summary facts and the tab bar */
.co-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 1px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; } /* hairlines on the cells, so an empty last slot stays white */
.co-facts > div { background: var(--surface-1); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; outline: 1px solid var(--line); }
.co-facts dt { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.co-facts dd { margin: 0; overflow-wrap: anywhere; }
.co-tabs { row-gap: 0; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-3); font-size: 12px; font-weight: 600; }
.tab[aria-current="page"] .tab-count { background: var(--accent); color: var(--accent-ink); }
.embedded-profile > .profile-head { display: none; }
.row-link { color: var(--text); text-decoration: none; }
.row-link:hover { color: var(--accent); text-decoration: underline; }

/* review queue: the bulk bar is one row of fields (it used to be a column of 180px-tall items) */
.bulk-bar { flex-direction: row; align-items: flex-end; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bulk-bar > legend { float: left; width: 100%; padding: 0 0 var(--space-2); }
.bulk-bar > .field { flex: 1 1 180px; }
.bulk-bar > .cluster { flex: 0 0 auto; }

/* internal screens: a focused field shows the focus ring too (not only the border colour) */
.page-admin .field input:focus-visible, .page-admin .field select:focus-visible, .page-admin .field textarea:focus-visible, .page-admin .filter-bar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* phone: tables become labelled blocks (no horizontal scroll, nothing cut off) */
@media (max-width: 720px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .table-stack td { border: 0; padding: 0; text-align: left; overflow-wrap: anywhere; min-width: 0; }
  .table-stack td:first-child { grid-column: 1 / -1; }
  .table-stack td.num { text-align: left; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .table-wrap:has(> .table-stack) { margin: 0; padding: 0; overflow: visible; }
  .table-wrap > .table-stack tr { padding-left: var(--space-3); padding-right: var(--space-3); }
  .table-stack tbody tr:hover > td { background: transparent; }
  .head-actions { width: 100%; }
  .dash-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid-compact .dash-card { padding: var(--space-3) var(--space-4); }
  .dash-value { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .dash-card, .side-menu > summary::after { transition: none; } }

/* ---- homepage frame kept here (T3-D1-C): the layout's wide footer (T1S-X). The homepage's own
   rules moved to css/home.css, loaded only on the homepage. ---- */
.page-home .shell { background: var(--bg); }
.home-footer { border-top: 1px solid var(--line); margin-top: auto; background: var(--surface-1); }
.home-footer-inner { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; }
.home-footer-inner > .muted { flex: 1 1 260px; font-size: 14px; }
.home-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.home-footer-nav a { color: var(--text-2); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; font-size: 14px; }
.home-footer-nav a:hover { color: var(--accent); }
.home-copy { width: 100%; font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) { .home-footer-inner { padding: var(--space-5) var(--space-4); } }

/* T1S-M — alpha legal pages (/yasal/*) and the legal links of forms and the home footer */
.legal { max-width: 860px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.legal-nav a { color: var(--text-3); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; font-family: var(--font-label); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.legal-nav a:hover { color: var(--accent); }
.legal-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.legal-head { gap: var(--space-2); }
.legal-updated { font-size: 14px; }
.legal-identity .kv { font-size: 15px; }
.legal-fill { font-family: var(--font-label); font-size: 0.9em; color: var(--signal-ink); background: var(--signal-surface); border: 1px dashed var(--signal-line); border-radius: var(--radius-control); padding: 0 var(--space-1); }
.legal-body { color: var(--text-2); }
.legal-body h2 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); scroll-margin-top: var(--space-5); color: var(--text); }
.legal-body p, .legal-body ul { margin: 0 0 var(--space-4); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body a { color: var(--accent); }
.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; background: var(--surface-1); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.legal-table tr:last-child > td { border-bottom: 0; }
.legal-table th { color: var(--text-3); background: var(--bg); font-family: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border-bottom-color: var(--line-strong); }
.legal-table td.mono { white-space: nowrap; font-size: 13px; }
.legal-note a { color: var(--text-2); }
.legal-note a:hover { color: var(--accent); }
.home-footer-legal a { font-size: 14px; color: var(--text-3); }

/* T1S-X — the compact footer of every page (layout.php; the homepage keeps its wide one) */
.site-footer { border-top: 1px solid var(--line); margin-top: auto; background: var(--surface-1); }
.site-footer-inner { max-width: 1180px; margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: center; justify-content: space-between; }
.site-footer .home-footer-nav a { min-height: var(--tap); }
.site-footer-copy { font-size: 12px; color: var(--text-3); }
.site-footer-contact { overflow-wrap: anywhere; }
.home-none-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.error-actions { padding-top: 0; }
@media (max-width: 720px) {
  .site-footer-inner { padding: var(--space-3) var(--space-4); }
}
@media (max-width: 720px) {
  .legal-table td.mono { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- T1S-R motion (11 §5): calm entrance, progressive enhancement (assets/js/motion.js adds
   .motion to <html>; without it — no script, reduced motion — everything is static and visible).
   Transform/opacity only, ≤ 800 ms, ease-out; the hero's two agent dots are the only loop. ---- */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-anim] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .motion [data-anim].is-in { opacity: 1; transform: none; }
  .motion [data-anim="1"] { transition-delay: 70ms; }
  .motion [data-anim="2"] { transition-delay: 140ms; }
  .motion [data-anim="3"] { transition-delay: 210ms; }
  .motion [data-anim="4"] { transition-delay: 280ms; }
  .motion [data-anim="5"] { transition-delay: 350ms; }

  /* the Meridian Junction mark draws itself (home, onboarding, first screens) */
  .motion .brand-mark.is-drawing .bm-a, .motion .brand-mark.is-drawing .bm-b { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease-out) forwards; }
  .motion .brand-mark.is-drawing .bm-b { animation-delay: 150ms; }
  .motion .brand-mark.is-drawing .bm-hub-g { opacity: 0; transform-box: fill-box; transform-origin: center; animation: settle 450ms var(--ease-out) 450ms forwards; }

  /* E6 onboarding: the progress bar fills from the left, finished steps tick in, the current step lifts */
  .motion .onb-progress-bar { transform-origin: left center; animation: grow-x 700ms var(--ease-out) 150ms both; }
  .motion .stepper li.is-done::before { animation: tick 320ms var(--ease-out) both; }
  .motion .stepper li:nth-child(2)::before { animation-delay: 60ms; }
  .motion .stepper li:nth-child(3)::before { animation-delay: 120ms; }
  .motion .stepper li:nth-child(4)::before { animation-delay: 180ms; }
  .motion .stepper li:nth-child(5)::before { animation-delay: 240ms; }
  .motion .stepper li:nth-child(6)::before { animation-delay: 300ms; }
  .motion .stepper li:nth-child(7)::before { animation-delay: 360ms; }
  .motion .stepper li[aria-current="step"] { animation: rise 450ms var(--ease-out) 200ms both; }
}
.stepper li.is-done::before { content: "\2713"; font-family: var(--font-body); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes agent-a { from { transform: none; } to { transform: translateX(62px); } }
@keyframes agent-b { from { transform: none; } to { transform: translateX(-62px); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tick { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* T1S-R: the member frame (company bar + tab strip) always spans the page head, also on E6 step pages */
.page-head > .mshell, .page-head > .mnav { flex: 1 1 100%; }
/* sign-in and similar single-form pages: a focused, centred card instead of a full-width slab */
.main > form.card:only-child { width: 100%; max-width: 480px; margin: var(--space-6) auto 0; }

/* ---- uppercase labels vs. names and codes (T1S-R UI pass) ----
 * Uppercase labels follow the page language: with lang="tr", "i" becomes "İ". Right for Turkish
 * words, wrong for proper names (company names) and technical codes. Those are never uppercased. */
.caps-none, .eyebrow.mono, dt.mono, .table th.mono { text-transform: none; letter-spacing: .01em; }
.eyebrow.caps-none { font-size: 12px; }
.notif-open { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* E14 settings: the row a save / refusal points at (URL #fragment) stays marked, the notice is above it */
.setting-row:target { outline: 2px solid var(--accent-line); outline-offset: 6px; border-radius: var(--radius-control); scroll-margin-top: var(--space-7); }
.confirm-key { font-size: clamp(17px, 4.6vw, 22px); overflow-wrap: anywhere; } /* a setting key: fits a phone line instead of breaking before its last letter */
@media (max-width: 480px) { .talk-link { display: none; } } /* the parties stack on a phone: a connector line between rows means nothing */

@media (max-width: 420px) {
  .topbar { gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); }
  .topbar-end { gap: var(--space-2); }
  .brand { gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-word { font-size: 18px; }
}
/* ---- live dot (agent talk room E10, homepage stage) and the member talk header's party block ---- */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-surface); flex: none; }
.talk-party { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .motion .live-dot { animation: live 1.8s ease-out infinite; } }
@keyframes live { 0% { box-shadow: 0 0 0 0 var(--teal-line); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---- T2-D application form (#basvuru, /basvuru, status / confirm / password pages, admin queue) ---- */
.apply-page { max-width: 820px; }
.apply-back { margin: 0; }
.apply-card { padding: var(--space-6); }
.apply-form { gap: var(--space-5); }
.apply-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4) var(--space-5); }
.apply-grid .field input, .apply-grid .field select { font-size: 16px; min-height: 44px; }
.apply-interest { border: 0; margin: 0; padding: 0; min-width: 0; }
.apply-interest > legend { padding: 0; margin-bottom: var(--space-2); }
.apply-kvkk { margin: 0; }
.apply-submit { align-items: center; gap: var(--space-3); }
.apply-submit > .btn { min-height: 44px; }
/* the honeypot: off-screen for people, still in the form for bots */
.apply-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.apply-steps, .apply-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--space-3) var(--space-5); }
.apply-steps li, .apply-track li { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-2); min-width: 0; }
.apply-step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); border: 1px solid var(--accent-line); background: var(--accent-surface); color: var(--accent); font-size: 13px; font-weight: 600; }
.apply-track li.is-done .apply-step-num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.apply-track li.is-current { color: var(--text); font-weight: 600; }
.apply-track li.is-current .apply-step-num { border-color: var(--accent); }
.apply-renew { margin-top: var(--space-3); max-width: 420px; }
.apply-withdraw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.apply-withdraw .field-hint { margin: 0; flex: 1 1 260px; }
.apply-bulk { border: 1px solid var(--line); margin: 0; }
.apply-bulk > legend { font-family: var(--font-label); font-size: 13px; font-weight: 600; padding: 0 var(--space-2); }
.home-apply { gap: var(--space-5); scroll-margin-top: var(--space-5); padding: var(--space-6); }
.home-apply-head { gap: var(--space-3); max-width: 52em; }
@media (max-width: 720px) {
  .apply-card, .home-apply { padding: var(--space-5) var(--space-4); }
  .apply-submit > .btn { width: 100%; }
}
@media (max-width: 480px) { .topbar-apply { display: none; } }
/* ---- T2-C: OAuth consent + E17b "AI bağlantıları" (member/ai.php, member/_ai_connect.php, oauth/*) ---- */
.page-oauth .main { max-width: 640px; }
.oauth-consent .kv { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
.oauth-consent .kv dd { overflow-wrap: anywhere; }
.radio-card { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--surface-1); cursor: pointer; overflow-wrap: anywhere; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-surface); }
.radio-card input { accent-color: var(--accent); margin-top: 4px; flex: none; }
.oauth-consent .check-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ai-platform .steps-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ai-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4); }
.ai-platform { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); min-width: 0; }
.ai-list { list-style: none; margin: 0; padding: 0; }
.ai-item { border-top: 1px solid var(--line); padding-top: var(--space-4); min-width: 0; }
.ai-item:first-child { border-top: 0; padding-top: 0; }
.ai-connect input[readonly] { width: 100%; }
.ai-kvkk { overflow-wrap: anywhere; }
/* ---- T2-G: AI connect screen — platform picker, per-connection address, live checklist ---- */
.ai-connect .h3 { font-size: 18px; }
.ai-connect .h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
.ai-pick-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ai-pick-group legend { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--space-2); padding: 0; }
.ai-pick-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-2); }
.ai-pick-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--tap); padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ai-pick-btn:hover { border-color: var(--control-line); background: var(--bg); }
.ai-pick-btn:focus-visible { outline: none; box-shadow: var(--focus-halo); }
.ai-pick-btn[aria-current="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ai-pick-btn[aria-current="true"] strong { color: var(--accent); }
.ai-pick-sub { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.ai-steps { border-top: 1px solid var(--line); padding-top: var(--space-5); min-width: 0; }
.ai-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ai-copy-row { display: flex; gap: var(--space-2); align-items: stretch; min-width: 0; }
.ai-copy-row > input, .ai-copy-row > code { flex: 1 1 auto; min-width: 0; }
.ai-copy-row .btn { flex: 0 0 auto; }
.ai-code-row { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); align-items: flex-start; min-width: 0; }
.ai-code-row code { width: 100%; }
.ai-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ai-check { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-2); min-width: 0; }
.ai-check-mark { flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px dashed var(--line-strong); color: transparent; }
.ai-check-mark svg { width: 14px; height: 14px; }
.ai-check[data-state="done"] { border-color: var(--teal-line); background: var(--teal-surface); }
.ai-check[data-state="done"] .ai-check-mark { border: 0; background: var(--teal); color: var(--ink-on-dark); }
.ai-check[data-state="wait"] .ai-done, .ai-check[data-state="done"] .ai-wait { display: none; }
.ai-check .muted { display: block; font-size: 13px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ai-js-only { display: none; }
.ai-js .ai-js-only { display: inline-flex; }
.ai-js .ai-nojs-only { display: none; }
.oauth-locked { display: flex; gap: var(--space-2); align-items: flex-start; }
@media (max-width: 480px) {
  .ai-copy-row { flex-direction: column; }
  .ai-copy-row .btn { align-self: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .ai-check, .ai-check-mark { transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
}
@media (max-width: 720px) { .oauth-consent .kv { grid-template-columns: minmax(0, 1fr); } }
/* ---- T2-B: member frame (left menu, slim top bar, phone "Menü" panel, focus frame) ----
 * One navigation for signed-in member screens (layout.php + member/_shell.php). ≥960px: an
 * always-open grouped column beside the page; below: the top bar's "Menü" opens a full-height
 * panel (<details>, no script). Every target is at least 44px (--tap). */
.member-shell { flex: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.member-page { min-width: 0; }
.member-page > .main { max-width: 1120px; margin: 0; }
.member-focus { flex: 1; width: 100%; }
.mside { display: none; min-width: 0; }
.mside-nav, .mside-panel { gap: var(--space-4); }
.mside-company { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.mside-who { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.mside-who .tile { width: 40px; height: 40px; flex: none; border-radius: var(--radius-inner); }
.mside-who .tile-mono { font-size: 15px; } /* the 24px monogram of the 64px tile overflows 40px */
.mside-who-text { gap: 4px; min-width: 0; align-items: flex-start; }
.mside-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.mside-switcher > summary { width: 100%; justify-content: center; min-height: var(--tap); }
.mside-switcher .switcher-panel { left: 0; right: auto; }
.mside-pill { display: flex; flex-direction: column; gap: 6px; min-height: var(--tap); justify-content: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-line); border-radius: var(--radius-control); background: var(--accent-surface); color: var(--accent); text-decoration: none; font-family: var(--font-label); font-size: 13px; font-weight: 600; }
.mside-pill:hover { color: var(--accent-hi); border-color: var(--accent); }
.mside-pill-bar { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--surface-1); overflow: hidden; }
.mside-pill-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.mside-p1 { width: 10%; } .mside-p2 { width: 20%; } .mside-p3 { width: 30%; } .mside-p4 { width: 40%; } .mside-p5 { width: 50%; }
.mside-p6 { width: 60%; } .mside-p7 { width: 70%; } .mside-p8 { width: 80%; } .mside-p9 { width: 90%; } .mside-p10 { width: 100%; }
.mside-nav .side-link, .mside-panel .side-link { min-height: var(--tap); gap: var(--space-2); }
.mside-nav .side-link .ic, .mside-panel .side-link .ic { width: 16px; height: 16px; flex: none; }
.side-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--signal-hi); color: var(--accent-ink); font-family: var(--font-label); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.mside-foot { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-3); }
.mside-foot .lang-switch { padding: 0 var(--space-3); }
.mside-foot .lang-switch button { min-height: var(--tap); min-width: var(--tap); }
.mside-logout { width: 100%; min-height: var(--tap); justify-content: flex-start; }
.mside-strip { margin: 0; border-radius: 0; }
.mside-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); color: var(--text); font-family: var(--font-label); font-size: 14px; font-weight: 600; }
.mside-menu > summary::-webkit-details-marker { display: none; }
.mside-menu > summary .ic { width: 18px; height: 18px; color: var(--accent); }
.mside-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.mside-panel { position: fixed; z-index: 20; top: 56px; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-4) var(--space-7); background: var(--surface-1); border-top: 1px solid var(--line); }
.topbar-member .bell { width: var(--tap); height: var(--tap); }
.topbar nav.mside-panel { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-4); } /* not the .topbar nav row */
.topbar-focus .switcher-panel { right: 0; }
.focus-company { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 600; }
.focus-company .tile { width: 32px; height: 32px; border-radius: var(--radius-inner); }
.focus-company .tile-mono { font-size: 12px; }
.focus-company-name { overflow-wrap: anywhere; }
@media (max-width: 720px) { .focus-company-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 960px) {
  .member-shell { grid-template-columns: 260px minmax(0, 1fr); align-content: stretch; }
  .mside { display: block; background: var(--surface-1); border-right: 1px solid var(--line); }
  .mside > .mside-nav { display: flex; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: var(--space-5) var(--space-3) var(--space-6); }
  .mside-menu { display: none; }
  .member-page > .main { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ---- T2-B: Ağım (network map + grouped list) and Görünürlük ---- */
.netmap { display: block; width: 100%; height: auto; max-height: 460px; }
.netmap-edge { stroke: var(--line-strong); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.netmap-edge-confirmed { stroke: var(--accent); stroke-width: 2; }
.netmap-edge-suggested { stroke-dasharray: 5 5; }
.netmap-edge-anon { stroke: var(--signal); stroke-dasharray: 3 4; }
.netmap-node { fill: var(--surface-1); stroke: var(--line-strong); stroke-width: 1.5; }
.netmap-node-confirmed { stroke: var(--accent); }
.netmap-node-suggested { stroke-dasharray: 3 3; }
.netmap-node-anon { fill: var(--signal-surface); stroke: var(--signal); stroke-dasharray: 3 3; }
.netmap-node-more { fill: var(--surface-2); stroke: var(--line-strong); }
.netmap-node-ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 3 4; }
.netmap-self { fill: var(--accent-surface); stroke: var(--accent); stroke-width: 2; }
.netmap-initial { fill: var(--text-3); font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.netmap-initial-self { fill: var(--accent); font-size: 18px; }
.netmap-label { fill: var(--text-2); font-family: var(--font-body); font-size: 11px; paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round; }
.netmap-group { fill: var(--text-3); font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.netmap-box { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); }
.netmap-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); }
.netmap-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-line { display: inline-block; width: 24px; height: 0; border-top: 2px solid var(--accent); }
.legend-line-suggested { border-top: 2px dashed var(--line-strong); }
.legend-line-anon { border-top: 2px dashed var(--signal); }
.net-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.net-chips .chip { min-height: var(--tap); }
.net-chips .chip[aria-current="true"] { border-color: var(--accent); background: var(--accent-surface); color: var(--accent); font-weight: 600; }
.net-group { display: flex; flex-direction: column; gap: var(--space-3); }
.net-group-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; justify-content: space-between; }
.net-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.net-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-1); }
.net-row-suggested { border-style: dashed; }
.net-row-anon { border-color: var(--signal-line); background: var(--signal-surface); }
.net-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 16em; }
.net-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.net-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.net-row-actions form { margin: 0; display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.net-row-actions .btn, .net-row-actions select { min-height: var(--tap); }
.net-empty { display: grid; gap: var(--space-4); justify-items: start; }
.net-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vis-options { display: grid; gap: var(--space-3); }
.vis-option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-1); cursor: pointer; min-height: var(--tap); }
.vis-option:has(input:checked) { border-color: var(--accent); background: var(--accent-surface); }
.vis-option input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.share-row > span[aria-hidden="true"]:first-child { width: 18px; } /* a locked row keeps the checkbox column */
.share-row > .stack:last-child { align-items: flex-end; }
.net-empty .netmap-box { justify-self: stretch; }
.share-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 13px; }
.share-lock .ic { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .netmap-box { display: none; } /* phones: the grouped list only (design §6) */
  .share-row > .stack:last-child { grid-column: 2; align-items: flex-start; }
}
/* T2-E E14 §4 model routes: provider · model · limit · reasoning · thinking side by side, one column on a phone */
.route-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.route-task + .route-task { border-top: 1px solid var(--line); padding-top: var(--space-3); }
/* T2-H E14 §1b candidate pool: criteria check lists wrap into columns, tag pills under a domain */
.cand-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 var(--space-3); }
.cand-tags { margin-top: var(--space-1); gap: var(--space-1); }
.cand-pipeline { justify-content: space-between; align-items: center; }
.cand-pipeline .notice, .cand-pipeline p { margin: 0; }

/* ==== T3-D1-C — Tur 3 görsel katman (11 §1, §2, §5, §9): "aydınlık kontrol odası" ====
 * Shared by every screen: bands and patterns, wire–node–packet, AI chip, agent badge, the agent
 * icon node and the super agent mascot (components/mascot.php). Gradients only as var(--grad-…)
 * (tokens.css); motion only transform/opacity, only under prefers-reduced-motion: no-preference.
 * The homepage's own rules live in css/home.css. */

/* bands and patterns (never behind a form) */
.band-tint-cobalt { background-color: var(--tint-cobalt); }
.band-tint-teal { background-color: var(--tint-teal); }
.bg-sky { background: var(--grad-sky); } /* the setup opening only (11 §1); the hero has its own rule */
.bg-grid-dots { background-image: url("../img/grid-dots.svg"); background-size: 24px 24px; }
.bg-grid-lines { background-image: url("../img/grid-lines.svg"); background-size: 48px 48px; }

/* wire – node – packet */
.wire { position: relative; display: block; height: 2px; min-width: 16px; background: var(--line-strong); }
.wire-dashed { height: 0; background: none; border-top: 2px dashed var(--accent-line); }
.wire-anon { height: 0; background: none; border-top: 2px dashed var(--signal); }
.wire-double { height: 6px; background: none; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--teal); }
.wire-live { background: var(--grad-wire); }
.wire-fade { background: var(--grad-fade); }
.wire-node { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); flex: none; }
.wire-node.is-live { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-halo); }
.packet-track { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.packet { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--circuit); opacity: 0; }

/* the AI-suggestion chip (source chip mapping, 11 §2: AI önerisi = indigo) and the "working" strip */
.chip-ai { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-badge); border: 1px solid var(--agent-line); background: var(--agent-surface); color: var(--agent); font-family: var(--font-label); font-size: 12px; font-weight: 600; }
.chip-ai .ic { width: 14px; height: 14px; }
.agent-strip { display: block; height: 3px; border-radius: 2px; background: var(--grad-wire); }
.super-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-control); background: var(--grad-agent); color: var(--accent-ink); }

/* agent icons: the live node is the one filled shape */
.ic .ic-node { fill: var(--teal); stroke: none; }
.ic .ic-node-accent { fill: var(--accent); }
.ic .ic-node-signal { fill: var(--signal); }
.ic-agent-ai { color: var(--agent); }

/* the company's agent: its own mark + an antenna-node badge (11 §9.1) */
.tile-agent { position: relative; display: inline-flex; flex: none; }
.agent-badge { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 3px solid var(--surface-1); }
.agent-badge::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 5px; margin-left: -1px; background: var(--text); }

/* the company panel's top band (component only, D2-B lays it out) */
.agent-band { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); }
.agent-band .tile { width: 48px; height: 48px; font-size: 18px; }
.agent-band-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.agent-band-name { font-family: var(--font-display); font-size: 16px; }
.agent-band-net { flex: none; margin-left: auto; }
.agent-band-net .net-wire { fill: none; stroke: var(--accent-line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.agent-band-net .net-dot { fill: var(--surface-1); stroke: var(--accent-line); stroke-width: 1.5; }
@media (max-width: 720px) { .agent-band-net { display: none; } }
.state-mascot { align-items: center; text-align: center; }

/* ---- mascot (components/mascot.php): A head · C pose · mini cut; five states via data-state ---- */
.mascot { display: inline-flex; flex: none; line-height: 0; }
.mascot svg { display: block; overflow: visible; }
.mascot-with-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mascot-label { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.mascot-mini { border-radius: 22%; background: var(--grad-agent); }
.mascot[data-state="idle"] .m-opt:not(.m-on-idle),
.mascot[data-state="thinking"] .m-opt:not(.m-on-thinking),
.mascot[data-state="talking"] .m-opt:not(.m-on-talking),
.mascot[data-state="success"] .m-opt:not(.m-on-success),
.mascot[data-state="warning"] .m-opt:not(.m-on-warning) { display: none; }
.mascot .m-stalk { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.mascot .m-node { fill: var(--teal); }
.mascot .m-halo { fill: none; stroke: var(--agent); stroke-width: 1.5; opacity: .45; }
.mascot .m-ear { fill: var(--grid-dot); }
.mascot .m-plate { fill: var(--tint-cobalt); stroke: var(--accent-line); stroke-width: 1.5; }
.mascot .m-bracket-a, .mascot .m-bracket-b { fill: none; stroke-width: 6; stroke-linecap: round; }
.mascot .m-bracket-thin { stroke-width: 4; }
.mascot .m-bracket-a { stroke: var(--mark-primary); }
.mascot .m-bracket-b { stroke: var(--mark-secondary); }
.mascot .m-visor { fill: var(--text); }
.mascot .m-eye { fill: var(--eye); }
.mascot .m-scan { fill: var(--eye); opacity: .35; }
.mascot .m-eye-arc { fill: none; stroke: var(--eye); stroke-width: 3.5; stroke-linecap: round; }
.mascot .m-eye-arc-sm { stroke-width: 2.6; }
.mascot .m-eye-line { fill: none; stroke: var(--eye); stroke-width: 1.4; stroke-linecap: round; }
.mascot .m-hub { fill: var(--accent); }
.mascot .m-bar { fill: var(--accent); }
.mascot .m-eq-light .m-bar, .mascot-mini .m-bar { fill: var(--surface-1); }
.mascot .m-dot { fill: var(--agent); }
.mascot .m-badge-disc { stroke: var(--surface-1); stroke-width: 3; }
.mascot .m-badge-ok .m-badge-disc, .mascot circle.m-badge-ok { fill: var(--teal); }
.mascot .m-badge-warn .m-badge-disc, .mascot circle.m-badge-warn { fill: var(--signal); }
.mascot circle.m-badge { stroke: var(--surface-1); stroke-width: 1.5; }
.mascot .m-badge-mark { fill: none; stroke: var(--surface-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mascot .m-badge-dot { fill: var(--surface-1); }
.mascot .m-mini-node { fill: var(--surface-1); }
.mascot .m-band, .mascot .m-mic { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; }
.mascot .m-mic { stroke-width: 2.5; }
.mascot .m-cup { fill: var(--teal); }
.mascot .m-neck { fill: var(--line-strong); }
.mascot .m-body { fill: var(--accent); }
.mascot .m-chest { fill: var(--surface-1); }
.mascot .m-core { fill: var(--teal); }
/* the antenna / mic node says what the agent does: indigo = AI working, cobalt = speaking, amber = needs you */
.mascot[data-state="thinking"] .m-node, .mascot[data-state="thinking"] .m-core { fill: var(--agent); }
.mascot[data-state="talking"] .m-node { fill: var(--accent); }
.mascot[data-state="warning"] .m-node, .mascot[data-state="warning"] .m-core { fill: var(--signal); }
.mascot .m-blink, .mascot .m-bar, .mascot .m-badge, .mascot .m-scan, .mascot .m-dot { transform-box: fill-box; transform-origin: center; }
.mascot-head .m-scan { --scan-run: 54px; }
.mascot-pose .m-scan { --scan-run: 37px; }
@media (prefers-reduced-motion: no-preference) {
  .mascot[data-state="idle"] .m-blink { animation: blink 180ms var(--ease-in-out) 700ms 1; }
  .mascot[data-state="thinking"] .m-scan { animation: scan-x 1.6s var(--ease-in-out) infinite alternate; }
  .mascot[data-state="thinking"] .m-dot { animation: blip 1.2s ease-in-out infinite; }
  .mascot[data-state="thinking"] .m-dot:nth-child(2) { animation-delay: .2s; }
  .mascot[data-state="thinking"] .m-dot:nth-child(3) { animation-delay: .4s; }
  .mascot[data-state="talking"] .m-bar { animation: eq 540ms var(--ease-in-out) infinite alternate; }
  .mascot[data-state="talking"] .m-bar:nth-child(2) { animation-delay: 90ms; }
  .mascot[data-state="talking"] .m-bar:nth-child(3) { animation-delay: 180ms; }
  .mascot[data-state="talking"] .m-bar:nth-child(4) { animation-delay: 270ms; }
  .mascot[data-state="talking"] .m-bar:nth-child(5) { animation-delay: 360ms; }
  .mascot[data-state="success"] .m-badge, .mascot[data-state="warning"] .m-badge { animation: tick 240ms var(--ease-settle) 1 both; }
}
@keyframes blink { 0%, 100% { transform: none; } 50% { transform: scaleY(.1); } }
@keyframes scan-x { from { transform: none; } to { transform: translateX(var(--scan-run, 0)); } }
@keyframes blip { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes eq { from { transform: scaleY(.45); } to { transform: none; } }
@keyframes trace { from { transform: scaleX(0); } to { transform: none; } }
@keyframes packet { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes pulse-halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
/* T3-D1-D E17 rehearsal (06 §11): a held sandbox answer sentence by sentence; every mark is also
   written out (.prova-mark), colour is never the only signal */
.prova { color: var(--text); }
.prova-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.prova-s { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-inner); background: var(--bg); overflow-wrap: anywhere; }
.prova-sourced { border-left-color: var(--teal); background: var(--teal-surface); }
.prova-unsourced { border-left-color: var(--signal); background: var(--signal-surface); }
.prova-locked { border-left-color: var(--danger); background: var(--danger-surface); }
.prova-mark { font-family: var(--font-label); font-size: .8125rem; font-weight: 600; }
.prova-sourced .prova-mark { color: var(--teal); }
.prova-unsourced .prova-mark { color: var(--signal-ink); }
.prova-locked .prova-mark { color: var(--danger-hi); }
.prova-add { justify-self: start; min-height: var(--tap); display: inline-flex; align-items: center; }
.prova-out { margin: 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--accent-line); background: var(--accent-surface); border-radius: var(--radius-inner); overflow-wrap: anywhere; }
.prova-out-none { border-left-color: var(--line-strong); background: var(--bg); }
.prova-out-title { margin: 0; }

/* ---- T3-D0b: /bot page (robots.txt examples, the User-Agent string) ---- */
pre.code-sample { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; background: var(--surface-2); padding: var(--space-4); border-radius: var(--radius-inner); font-family: var(--font-mono); font-size: 13px; margin: 0 0 var(--space-4); }
.page-bot code.bot-ua { overflow-wrap: anywhere; word-break: break-word; }
/* ---- /T3-D0b ---- */
/* ---- T3-D3-B-kampanya: E14 "Pilot kampanyaları" review queue rows ---- */
.k-queue { list-style: none; margin: 0; padding: 0; }
.k-item { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--surface-1); gap: var(--space-2); }
.k-item input[type="text"] { min-width: 12em; }
/* ---- /T3-D3-B-kampanya ---- */