/* ==== Design language tokens (D0, 2026-11-14) ===================================================
   Guide: TASARIM-DILI.md in the vault. Calm surfaces, colour on tags and icons (Attio), one
   primary button per view, rows before cards, monospaced figures for times, numbers and money. */
:root {
  color-scheme: only light;
  /* Palette (kept) */
  --burgundy: #380f17;
  --red: #8f0b13;
  --cream: #efdfc5;
  --ink: #252b2b;
  --slate: #4c4f54;
  /* Surfaces: 0 page, 1 panel, 2 inset / hover; nav is the side menu */
  --bg: #f5ecdc;
  --s0: var(--bg);
  --s1: #fcf8ef;
  --s2: #f1e6d3;
  --s-nav: #efe3cf;
  --hover: rgb(37 43 43 / .05);
  --panel: var(--s1);
  --raised: var(--s2);
  /* Lines: soft for panels and row dividers, line for rules, control-line for inputs */
  --line-soft: #e4d8c6;
  --line: #cfc2b1;
  --control-line: #998b7e;
  /* Text: 1 primary, 2 secondary, 3 meta */
  --t1: var(--ink);
  --t2: var(--slate);
  --t3: #6e655c;
  --text: var(--t1);
  --muted: var(--t2);
  --accent: var(--burgundy);
  --accent-text: var(--cream);
  --accent-hover: #4f1823;
  --accent-tint: rgb(56 15 23 / .075);
  /* Tones for tags and icons */
  --success: #33403a;
  --success-bg: #e4e5dc;
  --warning: var(--red);
  --warning-bg: #f6e3dd;
  --danger: var(--red);
  --danger-bg: #f5d7d7;
  --info: #3d5a68;
  --info-bg: #e2e7e4;
  --amber: #7d4f17;
  --amber-bg: #f2e2c6;
  --focus: var(--burgundy);
  /* Green: task-kind cards only (Mustafa, 2026-11-12) */
  --select: #2f6b4f;
  --select-bg: #e6efe7;
  /* Calendar tones (--cal-*) are defined in the "Task calendar" section; the home agenda uses them too. */
  /* Type: system sans for text, monospace for times, record numbers and amounts */
  --sans: system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --fs-1: .8rem;     /* 12px meta, tags */
  --fs-2: .867rem;   /* 13px secondary */
  --fs-3: .933rem;   /* 14px rows, buttons */
  --fs-4: 1rem;      /* 15px body */
  --fs-5: 1.067rem;  /* 16px section title */
  --fs-6: 1.5rem;    /* 22.5px page title */
  --fs-7: 1.867rem;  /* 28px greeting */
  /* Space, radius, shadow, control height */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-1: 5px; --r-2: 7px; --r-3: 10px;
  --shadow-pop: 0 1px 2px rgb(37 43 43 / .06), 0 14px 32px -14px rgb(37 43 43 / .32);
  --h-control: 34px;
  --h-small: 28px;
  font: 400 15px/1.5 var(--sans);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
h1 { font-size: var(--fs-6); line-height: 1.2; letter-spacing: -.022em; }
h2 { font-size: var(--fs-5); line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: var(--fs-4); line-height: 1.35; }
h1, h2, h3, strong { font-weight: 650; }
.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 40; inset: 8px auto auto 8px; padding: 8px 12px; border-radius: var(--r-2); background: var(--s1); box-shadow: var(--shadow-pop); }
.eyebrow { color: var(--t3); font-size: var(--fs-2); font-weight: 600; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }

/* ==== Shell: side menu, top bar, bottom menu ==================================================== */
.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; align-self: start; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 12px; overflow-y: auto; background: var(--s-nav); border-right: 1px solid var(--line-soft); }
/* Brand: the VekilimHazır lockup image (robe-V mark + "ekilim / Hazır"); the mark alone where the
   width is short. The logo keeps its own colours; the app palette is unchanged. */
.brand { display: flex; align-items: center; flex: none; color: var(--text); text-decoration: none; border-radius: var(--r-2); }
.brand img { display: block; width: auto; }
.brand-logo { height: 40px; }
.brand-mark { height: 28px; }
.sidebar .brand { align-self: start; min-height: 50px; padding: 2px 6px; margin-bottom: 8px; }
.button.compose { width: 100%; justify-content: flex-start; margin-bottom: 14px; padding-inline: 9px; }
.compose .icon { color: var(--burgundy); }
.compose[aria-current=page] { background: var(--accent-tint); border-color: rgb(56 15 23 / .22); color: var(--burgundy); }
.menu { display: grid; gap: 1px; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 9px; border-radius: var(--r-2);
  color: var(--t2); font-size: var(--fs-3); text-decoration: none; }
.menu a .icon { width: 17px; height: 17px; color: var(--t3); }
.menu a:hover { background: var(--hover); color: var(--t1); }
.menu a[aria-current=page] { background: var(--accent-tint); color: var(--burgundy); font-weight: 600; }
.menu a[aria-current=page] .icon { color: var(--burgundy); }
.menu-count { margin-left: auto; color: var(--t3); font-family: var(--mono); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.menu a[aria-current=page] .menu-count { color: var(--burgundy); }
.side-foot { display: grid; gap: 1px; margin-top: auto; padding-top: 10px; }
.side-account { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px; padding: 6px 8px; border-radius: var(--r-2);
  color: var(--t1); text-decoration: none; box-shadow: 0 -1px 0 var(--line-soft); }
.side-account:hover { background: var(--hover); }
.side-account[aria-current=page] { background: var(--accent-tint); }
.side-account[aria-current=page] strong { color: var(--burgundy); }
.side-who { display: grid; min-width: 0; line-height: 1.25; }
.side-who strong { overflow: hidden; font-size: var(--fs-3); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.side-who small { color: var(--t3); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-note { padding: 6px 9px 0; color: var(--t3); font-size: var(--fs-1); }
.side-note a { color: inherit; }
.avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--burgundy); color: var(--cream);
  font-size: .72rem; font-weight: 650; letter-spacing: .02em; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  padding: 0 clamp(14px, 3vw, 32px); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.topbar .brand { display: none; }
.topbar > nav { flex: 1; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-3); }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--t3); text-decoration: none; }
.crumbs a:hover { color: var(--t1); }
.crumbs [aria-current] { overflow: hidden; color: var(--t1); font-weight: 600; text-overflow: ellipsis; }
/* Earlier crumbs give way first (they shrink a hundred times faster), so the current page stays readable. */
.crumbs li:not(:last-child) { flex: 0 100 auto; }
.crumbs li:last-child { flex: 0 1 auto; }
.crumbs a, .crumbs [aria-current] { min-width: 0; }
.crumbs a { overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.icon-button { position: relative; display: grid; place-items: center; width: var(--h-control); height: var(--h-control); padding: 0;
  border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--t2); text-decoration: none; }
.icon-button:hover { background: var(--hover); color: var(--t1); }
.icon-button[aria-current=page] { background: var(--accent-tint); color: var(--burgundy); }
.bell-count { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--burgundy);
  color: var(--cream); font-family: var(--mono); font-size: .66rem; font-weight: 650; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
main { width: min(1120px, 100%); padding: clamp(18px, 3.2vw, 32px) clamp(16px, 3.2vw, 36px) 32px; margin-inline: auto; overflow-wrap: anywhere; }
main:focus { outline: none; }
.mobile-nav { display: none; }
/* ==== Layout primitives ========================================================================= */
.stack { display: grid; gap: var(--sp-4); align-content: start; }
.compact { display: grid; gap: var(--sp-2); align-content: start; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2) 10px; align-items: center; }
.spread { justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
/* Space under a block that opens the page (header, notice, filter row). */
.heading { margin-bottom: var(--sp-5); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-2); }
.money { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.wallet-balance { padding: 16px; border-radius: 10px; background: var(--burgundy); color: var(--cream); }
.wallet-amount { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.wallet-history { grid-column: 1 / -1; }
.tokmak-track { display: flex; flex-wrap: wrap; gap: 8px; }
.tokmak-stamp { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--s2); color: var(--t3); }
.tokmak-stamp .icon { width: 16px; height: 16px; }
.tokmak-stamp.earned { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }

/* ==== Surfaces and headers ====================================================================== */
/* Panel: one quiet surface for a group (a form, a list, a fact sheet). Not for every item. */
.panel { min-width: 0; padding: clamp(14px, 2vw, 20px); background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.panel.flush { padding: 0; overflow: hidden; }
.hero { background: var(--s2); }
.category, .listing-card { color: var(--text); text-decoration: none; }
.category:hover, .listing-card:hover { border-color: var(--line); background: #fdfaf4; }
/* Page header: title and one optional line. The section lives in the top bar breadcrumb. */
.page-head { display: grid; gap: 4px; }
.page-head p { max-width: 70ch; color: var(--t2); font-size: var(--fs-3); }
/* Section header: title, a count in mono, an optional text link on the right. */
.section { display: grid; gap: 10px; align-content: start; min-width: 0; }
.section-head { display: flex; align-items: baseline; gap: 8px; min-height: 26px; }
.section-head h2 { font-size: var(--fs-4); font-weight: 650; letter-spacing: -.005em; }
.section-count { color: var(--t3); font-family: var(--mono); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.section-head .more { margin-left: auto; }
/* Text link with an arrow: secondary navigation ("Tümünü gör", "Takvimde aç"). */
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--t2); font-size: var(--fs-2); font-weight: 550; text-decoration: none; white-space: nowrap; }
.more .icon { width: 15px; height: 15px; }
.more:hover { color: var(--burgundy); }
.court-options { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px 12px; min-width: 0; margin: 0; }
.court-options legend { padding-inline: 4px; }
.court-options label { min-height: 38px; }
.date-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; min-width: 0; margin: 0; }
.date-steps legend { padding-inline: 6px; font-weight: 650; color: var(--text); }
.field-hint.error { color: var(--danger); font-weight: 600; }
.field-hint.warn { color: var(--warning); }
/* Character counter under a field's right edge (input/area "limit"): quiet until 90 % of the limit. */
.field-foot { display: flex; align-items: baseline; gap: 12px; }
.field-foot .field-hint { flex: 1; min-width: 0; }
.char-count { margin-left: auto; color: var(--t3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .15s; }
.char-count.is-near { color: var(--warning); font-weight: 550; }
input:disabled { opacity: .55; cursor: not-allowed; }

/* Date-time picker */
.picker { display: grid; gap: 5px; align-content: start; min-width: 0; }
.field-label { color: var(--muted); }
.picker-anchor { position: relative; }
.picker-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 5px 11px; border: 1px solid var(--control-line); border-radius: var(--r-2); background: var(--panel); color: var(--text); text-align: left; }
.picker-trigger:hover:not(:disabled) { border-color: var(--ink); }
.picker-trigger[aria-expanded=true] { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgb(56 15 23 / .12); }
.picker-trigger .icon { color: var(--slate); }
.picker-trigger .icon:last-child { margin-left: auto; width: 17px; }
.picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-value.placeholder { color: var(--muted); }
.picker-trigger:disabled { background: var(--raised); border-style: dashed; border-color: var(--line); opacity: 1; }
.picker-trigger:disabled .picker-value, .picker-trigger:disabled .icon { color: #9a8f84; }
.picker-pop { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: 520px; max-width: calc(100vw - 32px); display: grid; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.picker-head { display: flex; align-items: center; justify-content: space-between; }
.picker-head strong { font-size: 1rem; letter-spacing: -.01em; }
.picker-nav { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); }
.picker-nav:hover:not(:disabled) { background: var(--raised); }
.picker-nav:disabled { opacity: .3; }
.picker-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.weekday { padding-bottom: 4px; text-align: center; color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.day { position: relative; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.day:hover:not(:disabled) { background: var(--raised); }
.day:disabled { color: #b9ad9f; opacity: 1; }
.day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); }
.day.is-mark { box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.day[aria-pressed=true] { background: var(--burgundy); color: var(--cream); font-weight: 650; }
.day[aria-pressed=true]::after { background: var(--cream); }
.picker-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .8rem; }
.picker-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mark-dot { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.picker-body { display: grid; grid-template-columns: 284px minmax(0, 1fr); }
.picker-cal { display: grid; gap: 12px; align-content: start; padding-right: 16px; }
.picker-rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.rail-head { display: grid; line-height: 1.25; }
.rail-head small { color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.rail-head strong { font-size: 1rem; letter-spacing: -.01em; }
.rail-empty { align-self: center; padding: 24px 6px; color: var(--muted); font-size: .86rem; text-align: center; }
.time-entry { display: flex; align-items: center; justify-content: center; gap: 2px; height: 42px; border: 1px solid var(--control-line); border-radius: 9px; background: var(--panel); font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.time-entry:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgb(56 15 23 / .12); }
.time-entry.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(143 11 19 / .1); }
.time-entry > span { color: var(--muted); }
.seg, .seg:hover, .seg:focus-visible { width: 2.4ch; min-height: 30px; padding: 0; border: 0; border-radius: 5px; box-shadow: none; background: transparent; text-align: center; font: inherit; }
.seg:focus { background: var(--raised); }
.seg::placeholder { color: #c2b6a8; }
.time-error { min-height: 0; color: var(--danger); font-size: .78rem; font-weight: 600; }
.time-error:empty { display: none; }
.time-list { flex: 1 1 0; min-height: 0; contain: size; display: grid; align-content: start; gap: 2px; margin: 0; padding: 2px 4px 2px 0; overflow-y: auto; list-style: none; position: relative;
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 14px), transparent); }
.slot { width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-variant-numeric: tabular-nums; }
.slot:hover { background: var(--raised); }
.slot[aria-selected=true] { background: var(--burgundy); color: var(--cream); font-weight: 650; }
textarea[aria-invalid=true], textarea[aria-invalid=true]:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(143 11 19 / .1); }
.picker-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.picker-foot .row { justify-content: flex-end; gap: 8px; }
.picker-summary { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.picker-foot .button { min-height: 36px; padding: 5px 14px; }
.picker-backdrop { display: none; }

/* Quiet, native-free controls */
select { appearance: none; padding-right: 36px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c4f54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center / 17px; }
input[type=number] { appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; }
input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--t2); }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 2px rgb(56 15 23 / .1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4b6a3; border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--slate); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #c4b6a3 transparent; } }
/* ==== Tags: colour lives here and in icons, not on surfaces ===================================== */
.tag { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 22px; padding: 1px 7px; border-radius: var(--r-1);
  background: var(--s2); color: var(--t1); font-size: var(--fs-1); font-weight: 600; line-height: 1.3; }
.row-trail .tag, .section-head .tag { white-space: nowrap; }
.tag.good, .notice.good { color: var(--success); background: var(--success-bg); }
.tag.warn, .notice.warn { color: var(--warning); background: var(--warning-bg); }
.tag.bad, .notice.bad { color: var(--danger); background: var(--danger-bg); }
.tag.info { color: var(--info); background: var(--info-bg); }
.tag.amber { color: var(--amber); background: var(--amber-bg); }
.tag.plain { padding-inline: 0; background: transparent; color: var(--t3); font-weight: 550; }
/* A dot before the label when the colour itself carries the state (Attio status). */
.tag.dot::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.notice { padding: 9px 12px; border-radius: var(--r-2); background: var(--s2); font-size: var(--fs-3); }

/* ==== Buttons: primary (one per view) / secondary (default) / ghost / text ====================== */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; min-height: var(--h-control);
  padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); color: var(--t1);
  font-size: var(--fs-3); font-weight: 550; line-height: 1.25; text-align: center; text-decoration: none;
  box-shadow: 0 1px 0 rgb(37 43 43 / .04); transition: background-color .12s, border-color .12s, color .12s; }
.button .icon { width: 16px; height: 16px; }
.button:hover:not(:disabled), .listing-card:hover .button { background: #fffcf6; border-color: var(--control-line); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; box-shadow: none; }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
/* A primary that cannot be pressed yet is not the step to take: it reads as a secondary button
   and fills once it is enabled (rating sent after a star, request sent after the checkbox). */
.button.primary:disabled { background: var(--s1); border-color: var(--line); color: var(--t2); font-weight: 550; }
/* .ghost predates this language and means "outlined, no fill": kept as the secondary look. */
.button.ghost { background: transparent; }
/* Quiet: no border until hover; toolbars, dismiss and "show more" actions. */
.button.quiet { background: transparent; border-color: transparent; color: var(--t2); box-shadow: none; }
.button.quiet:hover:not(:disabled) { background: var(--hover); border-color: transparent; color: var(--t1); }
.button[aria-pressed=true], .button[aria-current=true], .button[aria-current=page] { background: var(--accent-tint); border-color: rgb(56 15 23 / .22); color: var(--burgundy); }
.button.danger { color: var(--danger); border-color: rgb(143 11 19 / .32); }
.button.danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }
.button.small { min-height: var(--h-small); padding: 2px 9px; font-size: var(--fs-2); }
.button.wide { width: 100%; min-height: 40px; }
/* Text button: inline action inside a sentence or a row ("Okundu işaretle"). */
.text-button { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.text-button:hover { text-decoration-thickness: 2px; }

/* ==== Facts, lists, counters ==================================================================== */
.facts { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 7px 14px; font-size: var(--fs-3); }
.facts dt { color: var(--t3); }
.facts dd { margin: 0; }
.list { padding: 0; list-style: none; }
.list > li { padding-block: 10px; border-bottom: 1px solid var(--line-soft); }
.list > li:last-child { border-bottom: 0; }
/* Row list: a collection of records inside one panel; the whole row is the link. */
.rowlist { display: grid; margin: 0; padding: 0; list-style: none; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.rowlist > li + li { border-top: 1px solid var(--line-soft); }
.rowlink { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 9px 14px;
  color: var(--t1); text-decoration: none; }
.rowlink:hover { background: #fffcf6; }
.rowlink:focus-visible { outline-offset: -2px; border-radius: var(--r-3); }
.row-lead { display: grid; place-items: center; align-self: start; height: 21px; color: var(--t3); }
.row-lead .icon { width: 17px; height: 17px; }
.row-main { display: grid; gap: 1px; min-width: 0; }
.row-title { overflow: hidden; font-size: var(--fs-3); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { overflow: hidden; color: var(--t3); font-size: var(--fs-2); text-overflow: ellipsis; white-space: nowrap; }
.row-trail { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.row-go { color: var(--t3); }
.rowlink:hover .row-go { color: var(--burgundy); }
/* Tone of the leading icon */
.is-warn .row-lead, .row-lead.warn { color: var(--red); }
.row-lead.info { color: var(--info); }
.row-lead.amber { color: var(--amber); }
.row-lead.accent { color: var(--burgundy); }
/* Counters: a figure and its label, no box. Linked counters open the matching filter. */
.metrics { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.metric { display: grid; gap: 0; min-width: 0; color: var(--t1); text-decoration: none; }
.metric strong { font-size: 1.35rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric span { color: var(--t3); font-size: var(--fs-2); }
.metric[href]:hover strong, .metric[href]:hover span { color: var(--burgundy); }
/* Ledger: label on the left, a figure on the right; for account numbers. */
.ledger { display: grid; margin: 0; }
.ledger > div, .ledger > a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--t1); font-size: var(--fs-3); text-decoration: none; }
.ledger > :last-child { border-bottom: 0; }
.ledger dt { color: var(--t2); }
.ledger dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ledger dd small { color: var(--t3); font-size: var(--fs-1); font-weight: 500; }
.ledger a:hover dt { color: var(--burgundy); }
/* Empty state: says what is empty and what to do next. */
.empty-state { display: grid; justify-items: start; gap: 6px; padding: 18px 18px 18px; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.empty-state > .icon { width: 20px; height: 20px; margin-bottom: 2px; color: var(--t3); }
.empty-state strong { font-size: var(--fs-3); }
.empty-state p { color: var(--t2); font-size: var(--fs-3); }
.empty-state .row { margin-top: 6px; }
.empty-note { padding: 14px 16px; color: var(--t2); font-size: var(--fs-3); background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }

/* ==== Fields ==================================================================================== */
label.field { display: grid; gap: 5px; color: var(--t2); font-size: var(--fs-3); }
input, select, textarea { width: 100%; min-width: 0; min-height: 36px; padding: 6px 10px; color: var(--text); background: var(--s1);
  border: 1px solid var(--control-line); border-radius: var(--r-2); font-size: var(--fs-4); }
textarea { resize: none; field-sizing: content; min-height: 96px; max-height: 320px; overflow-y: auto; line-height: 1.5; }
::placeholder { color: var(--slate); opacity: .45; }
input[type=checkbox] { appearance: none; flex: none; width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; border: 1.5px solid var(--control-line); border-radius: 4px; background: var(--panel) center / 12px no-repeat; cursor: pointer; transition: background-color .12s, border-color .12s; }
input[type=checkbox]:hover { border-color: var(--ink); }
input[type=checkbox]:checked { border-color: var(--burgundy); background-color: var(--burgundy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efdfc5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type=checkbox]:indeterminate { border-color: var(--burgundy); background-color: var(--burgundy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efdfc5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
details summary { min-height: 34px; padding-block: 6px; color: var(--t1); font-size: var(--fs-3); font-weight: 550; cursor: pointer; }
details summary:hover { color: var(--burgundy); }
details > summary { display: flex; align-items: center; gap: 10px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin-inline: 3px 1px; border-right: 1.6px solid var(--t3); border-bottom: 1.6px solid var(--t3); transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.diff > div { padding: 10px; border-radius: var(--r-2); background: var(--s2); }
/* Choice controls: option cards, segmented switch, amount pills, menus */
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group > legend { padding: 0; margin-bottom: 7px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1000px) { .choice-group.cards .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice-face, .tag, .chip-tag, .optional { overflow-wrap: normal; hyphens: manual; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-face { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 32px 8px 12px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--panel); color: var(--text); line-height: 1.3; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choice-face > .icon:first-child { color: var(--slate); }
.choice-face > .icon:last-child { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; color: var(--burgundy); opacity: 0; }
.choice:hover .choice-face { border-color: var(--ink); }
.choice input:checked + .choice-face { border-color: var(--burgundy); background: #f6ebe4; box-shadow: inset 0 0 0 1px var(--burgundy); color: var(--burgundy); font-weight: 650; }
.choice input:checked + .choice-face > .icon { color: var(--burgundy); opacity: 1; }
/* Task-kind cards only: selected in green (Mustafa, 2026-11-12). */
.cards .choice input:checked + .choice-face { border-color: var(--select); background: var(--select-bg); box-shadow: inset 0 0 0 1px var(--select); color: var(--select); }
.cards .choice input:checked + .choice-face > .icon { color: var(--select); }
.choice input:focus-visible + .choice-face { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Five task kinds (2026-11-15): one row from 1200 px, three plus two below that, and on phones
   two columns with "Diğer" across both. */
@media (min-width: 1200px) { .choice-group.cards.kinds .choices { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 591px) and (max-width: 1199px) { .choice-group.cards.kinds .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 590px) { .kinds .choice:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.choice-group.segmented .choices { display: inline-flex; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.segmented .choice-face { min-height: 28px; padding: 3px 13px; border: 0; border-radius: 6px; font-size: var(--fs-3); background: transparent; color: var(--muted); }
.segmented .choice-face > .icon:last-child { display: none; }
.segmented .choice:hover .choice-face { color: var(--ink); }
.segmented .choice input:checked + .choice-face { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(37 43 43 / .14), inset 0 0 0 1px var(--line); }
.segmented .choice input[value=urgent]:checked + .choice-face { color: var(--red); }
.segmented .choice input[value=urgent]:checked + .choice-face > .icon { color: var(--red); }
/* Search filter: links drawn like the segmented switch; the current one is marked */
.seg-links { display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.seg-links a { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 3px 13px; border-radius: 6px; font-size: var(--fs-3); color: var(--muted); text-decoration: none; white-space: nowrap; }
.seg-links a:hover { color: var(--ink); }
.seg-links a[aria-current=page] { background: var(--panel); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgb(37 43 43 / .14), inset 0 0 0 1px var(--line); }
.seg-links a:focus-visible { outline-offset: 1px; }
@media (max-width: 590px) { .seg-links { width: 100%; } .seg-links a { flex: 1; padding-inline: 8px; } }
/* Filters with more options than fit a phone scroll sideways; soft edges show there is more
   (scroll shadows that only appear while content is hidden on that side). */
@media (max-width: 590px) {
  .seg-links.is-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 12px; scrollbar-width: none;
    background: linear-gradient(to right, var(--raised) 30%, rgb(241 230 211 / 0)) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--raised) 30%, rgb(241 230 211 / 0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(37 43 43 / .2), transparent) left / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(37 43 43 / .2), transparent) right / 10px 100% no-repeat scroll,
      var(--raised); }
  .seg-links.is-scroll::-webkit-scrollbar { display: none; }
  .seg-links.is-scroll a { flex: none; padding-inline: 14px; }
}
.choice-group.pills .choices { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.pills .choice-face { justify-content: center; min-height: 36px; padding: 6px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pills .choice-face > .icon:last-child { display: none; }
.select-menu { display: grid; gap: 5px; align-content: start; min-width: 0; }
.menu-pop { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: 100%; min-width: 260px; max-width: calc(100vw - 32px); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.menu-search { display: flex; align-items: center; gap: 8px; margin: -6px -6px 6px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.menu-search .icon { width: 17px; color: var(--slate); }
.menu-search input, .menu-search input:hover, .menu-search input:focus-visible { min-height: 38px; padding: 0; border: 0; box-shadow: none; background: transparent; }
.menu-list { max-height: 288px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.menu-group { padding: 8px 10px 4px; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.menu-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 34px; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; }
.menu-option > span { display: grid; line-height: 1.3; }
.menu-option small { color: var(--muted); font-size: .78rem; font-weight: 400; }
.menu-option .icon { width: 16px; height: 16px; color: var(--burgundy); visibility: hidden; }
.menu-option[aria-selected=true] { font-weight: 650; }
.menu-option[aria-selected=true] .icon { visibility: visible; }
.menu-option:hover, .menu-option:focus-visible { background: var(--raised); outline: none; }
.menu-empty { padding: 12px 10px; color: var(--muted); font-size: .86rem; }
/* Links under the sample-account list: account pages, then sign-up and the landing page. */
.menu-foot { display: grid; gap: 1px; margin: 6px -6px 0; padding: 6px 6px 0; border-top: 1px solid var(--line-soft); }
.menu-foot:last-child { margin-bottom: -6px; padding-bottom: 6px; }
.menu-link { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 5px 9px; border-radius: 6px; color: var(--t1); font-size: var(--fs-3); text-decoration: none; }
.menu-link:hover, .menu-link:focus-visible { background: var(--hover); outline: none; }
.menu-link:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.menu-link .icon { width: 16px; height: 16px; color: var(--t3); }
.compact-menu { display: flex; align-items: center; gap: 8px; }
.compact-menu .field-label { font-size: .85rem; white-space: nowrap; }
.compact-menu .picker-trigger { width: auto; max-width: 230px; min-height: 32px; padding-block: 3px; font-size: var(--fs-3); }
.compact-menu .menu-pop { left: auto; right: 0; width: 240px; }

.peer-preview { display: grid; gap: 2px; width: fit-content; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.parties { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.parties h3 { margin-bottom: 6px; font-size: .95rem; }
.party { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.party:last-of-type { border-bottom: 0; }
.party-who { display: grid; gap: 1px; min-width: 0; }
.party-role { color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.party-who .tag { margin-left: 6px; padding: 2px 7px; font-size: .72rem; vertical-align: 2px; }
.registry-link { display: inline-flex; align-items: center; gap: 3px; color: var(--t2); white-space: nowrap; }
.registry-link .icon { width: 13px; height: 13px; }
.registry-link:hover { color: var(--burgundy); }
.party-phone { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.party-phone .icon { width: 16px; height: 16px; }
.party-phone.call { padding: 7px 12px; border: 1px solid var(--control-line); border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; }
.party-phone.call:hover { border-color: var(--burgundy); color: var(--burgundy); background: #f6ebe4; }

.check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.spec-tree { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; overflow-wrap: normal; }
.spec-group + .spec-group { border-top: 1px solid var(--line); }
.spec-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.spec-head .check { flex: 1; min-height: 40px; }
.spec-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.spec-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--slate); }
.spec-toggle:hover { background: var(--raised); color: var(--ink); }
.spec-toggle .icon { transition: transform .15s; }
.spec-toggle[aria-expanded=true] .icon { transform: rotate(180deg); }
.spec-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; padding: 2px 14px 10px 42px; background: var(--raised); border-top: 1px solid var(--line); }
.spec-items[hidden] { display: none; }
.spec-items .check { min-height: 38px; font-size: .93rem; }
.chip-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip-tag { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--slate); font-size: .78rem; line-height: 1.4; }
.chip-tag.more { color: var(--muted); }

@media (max-width: 800px) {
  .layout { display: block; }
  .sidebar { display: none; }
  .topbar { min-height: 50px; }
  .topbar .brand { display: flex; }
  .crumbs li:not(:last-child) { display: none; }
  .crumbs li + li::before { content: none; }
  main { padding-bottom: 98px; }
  /* Bottom menu: icons with short labels; the current page is burgundy, nothing is filled. */
  .mobile-nav { position: fixed; z-index: 12; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--line-soft); background: var(--s1); }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 48px; padding: 4px 1px;
    border-radius: var(--r-2); color: var(--t3); font-size: .7rem; font-weight: 550; text-align: center; text-decoration: none; }
  .mobile-nav a .icon { width: 20px; height: 20px; }
  .mobile-nav a[aria-current=page] { color: var(--burgundy); font-weight: 650; }
  .mobile-nav a:active { background: var(--hover); }
  .mobile-nav :focus-visible { outline-offset: -2px; }
}
@media (max-width: 590px) {
  .grid, .date-steps { grid-template-columns: minmax(0, 1fr); }
  /* Task-type cards stack icon over label so the label gets the card's full width. */
  .cards .choice-face { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 11px 30px 11px 12px; }
  .kinds .choice:last-child:nth-child(odd) .choice-face { flex-direction: row; align-items: center; gap: 10px; }
  .picker-backdrop { display: block; position: fixed; z-index: 19; inset: 0; background: rgb(37 43 43 / .38); }
  .picker-pop { position: fixed; z-index: 20; inset: auto 0 0; top: auto; width: auto; max-width: none; max-height: 88dvh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px -16px rgb(37 43 43 / .45); }
  .menu-pop { position: fixed; z-index: 20; inset: auto 0 0; top: auto; width: auto; min-width: 0; max-width: none; padding: 10px 12px max(14px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .compact-menu .menu-pop { inset: auto 0 0; width: auto; }
  .menu-search { margin: -10px -12px 6px; padding: 0 16px; }
  .menu-list { max-height: 55dvh; }
  .menu-option { min-height: 42px; }
  .topbar .compact-menu .field-label { display: none; }
  .picker-pop::before { content: ""; justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--line); }
  .day { height: 42px; }
  .picker-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .picker-cal { padding-right: 0; }
  .picker-rail { display: grid; grid-template-columns: auto minmax(0, 132px); align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .picker-rail .time-error, .picker-rail .time-list, .picker-rail .rail-empty { grid-column: 1 / -1; }
  .time-list { flex: none; contain: none; max-height: 196px; }
  .topbar { gap: 6px; padding-inline: 12px 8px; }
  .top-actions { gap: 4px; }
  /* Phones: visible controls stay small, the touch area grows to about 40 px. */
  .button { min-height: 36px; }
  .button.small { min-height: 32px; }
  input, select, textarea { min-height: 40px; font-size: 16px; }
  .picker-trigger { min-height: 40px; }
  .icon-button { width: 38px; height: 38px; }
}

/* Undo window for final approvals (Gmail-style "Undo") */
.undo-strip { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px 14px; border-radius: 10px; background: var(--burgundy); color: var(--cream); overflow: hidden; box-shadow: 0 8px 18px -12px rgb(56 15 23 / .55); }
.undo-strip.fresh { animation: undo-in .22s ease-out; }
.undo-strip > .icon { opacity: .75; }
.undo-strip p { flex: 1; min-width: 0; line-height: 1.35; }
.undo-strip strong { font-variant-numeric: tabular-nums; }
.undo-button { flex: none; min-height: 40px; padding: 6px 16px; border: 1px solid rgb(239 223 197 / .45); border-radius: 8px; background: transparent; color: var(--cream); font-weight: 650; letter-spacing: .01em; }
.undo-button:hover { background: var(--cream); border-color: var(--cream); color: var(--burgundy); }
.undo-button:focus-visible { outline-color: var(--cream); outline-offset: 2px; }
.undo-bar { position: absolute; inset: auto 0 0; height: 3px; background: var(--cream); opacity: .5; transform-origin: left; animation-name: undo-drain; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes undo-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes undo-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .undo-strip.fresh { animation: none; }
  .undo-bar { display: none; }
}

/* Company line under every page */
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }
.site-foot { width: min(1120px, 100%); margin: auto auto 0; padding: 4px clamp(16px, 3.2vw, 36px) 20px; color: var(--t3); font-size: var(--fs-1); }
.site-foot p { padding-top: 12px; border-top: 1px solid var(--line-soft); }
@media (max-width: 800px) {
  main { padding-bottom: 12px; }
  .site-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* ---- Ratings ------------------------------------------------------------------------ */
/* Plain, peer-only score: one quiet line, no badges or highlight colours. */
.rating-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rating-score { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.rating-score .icon { width: 14px; height: 14px; fill: var(--burgundy); stroke: var(--burgundy); }
.rating-score strong { font-variant-numeric: tabular-nums; }
.rating-scope { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: var(--t3); font-size: var(--fs-1); }
.rating-scope .icon { width: 12px; height: 12px; }
.rating-own { display: grid; gap: 3px; padding: 10px 12px; border-radius: 9px; background: var(--raised); }
.rating-card .row.spread { flex-wrap: wrap; }
/* Star input: radio buttons under custom stars; arrow keys move between them. */
.star-input { min-width: 0; margin: 0; padding: 0; border: 0; }
.star-input > legend { padding: 0; margin-bottom: 4px; }
.star-row { display: flex; align-items: center; gap: 2px; margin-left: -7px; }
.star { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--control-line); cursor: pointer; }
.star input { position: absolute; opacity: 0; pointer-events: none; }
.star .icon { width: 30px; height: 30px; fill: transparent; transition: fill .12s, color .12s; }
.star.on { color: var(--burgundy); }
.star.on .icon { fill: var(--burgundy); }
.star-row:has(.star:hover) .star { color: var(--burgundy); }
.star-row:has(.star:hover) .star .icon { fill: var(--burgundy); }
.star-row .star:hover ~ .star { color: var(--control-line); }
.star-row .star:hover ~ .star .icon { fill: transparent; }
.star:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 0; }
.star-value { min-width: 4ch; margin-left: 8px; font-variant-numeric: tabular-nums; }
.stars-static { display: inline-flex; gap: 1px; color: var(--control-line); }
.stars-static .icon { width: 18px; height: 18px; }
.stars-static .on { color: var(--burgundy); }
.stars-static .on .icon { fill: var(--burgundy); }
.rating-note { padding: 9px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--raised); overflow-wrap: anywhere; }
/* ---- Subscription plans, limits and ads (P6) ---- */
.plans { container-type: inline-size; display: grid; gap: 18px; margin-block: 36px; }
.plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.plans-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plans-period legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.save-note { padding: 3px 9px; border-radius: 999px; background: #f6ebe4; color: var(--burgundy); font-size: .76rem; font-weight: 650; white-space: nowrap; }
.plan-usage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: .86rem; }
.plan-usage > div { display: flex; align-items: baseline; gap: 7px; }
.plan-usage dt { color: var(--muted); }
.plan-usage dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-usage dd.full { color: var(--red); }
.plan-usage .plan-usage-title { margin-right: auto; }
.plan-usage .plan-usage-title dt { color: var(--ink); font-weight: 650; }
.plan-usage .plan-usage-title dd { padding: 1px 7px; border-radius: 5px; background: var(--raised); font-size: .78rem; }

/* Each plan is a case folder: a tab with the plan name sits on the top-left edge. */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; padding-top: 31px; }
.plan { --plan-bg: var(--panel); --plan-line: var(--line); --plan-text: var(--ink); --plan-muted: var(--muted); --plan-rule: var(--line);
  position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 20px 20px;
  background: var(--plan-bg); color: var(--plan-text); border: 1px solid var(--plan-line); border-radius: 0 14px 14px 14px; }
.plan:focus { outline: none; }
.plan:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.plan-pro { --plan-bg: var(--burgundy); --plan-line: var(--burgundy); --plan-text: var(--cream); --plan-muted: rgb(239 223 197 / .74); --plan-rule: rgb(239 223 197 / .2);
  filter: drop-shadow(0 18px 22px rgb(56 15 23 / .22)); }
.plan-ultra { --plan-bg: var(--ink); --plan-line: var(--ink); --plan-text: var(--cream); --plan-muted: rgb(239 223 197 / .68); --plan-rule: rgb(239 223 197 / .16); }
.plan-tab { position: absolute; z-index: 1; left: -1px; bottom: calc(100% - 1px); display: flex; align-items: center; height: 32px; margin: 0; padding: 0 6px 0 16px;
  background: var(--plan-bg); color: var(--plan-text); border: 1px solid var(--plan-line); border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; }
.plan-tab::after { content: ""; position: absolute; z-index: -1; top: -1px; right: -17px; width: 24px; height: calc(100% + 1px); background: var(--plan-bg);
  border-top: 1px solid var(--plan-line); border-right: 1px solid var(--plan-line); border-radius: 0 7px 0 0; transform: skewX(28deg); transform-origin: bottom left; }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 26px; }
.plan-note { color: var(--plan-muted); font-size: .88rem; }
.plan-flag { flex: none; padding: 2px 9px; border: 1px solid rgb(239 223 197 / .55); border-radius: 999px; font-size: .72rem; font-weight: 650; letter-spacing: .04em; }
/* Launch offer: the struck list price and a small outlined "%50 indirim" mark above the price. */
.plan-was { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 6px; color: var(--plan-muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.plan-was s { text-decoration-thickness: 1px; }
.plan-off { padding: 1px 7px; border: 1px solid currentColor; border-radius: var(--r-1); color: var(--plan-text); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.plan-price { display: flex; align-items: flex-end; gap: 7px; line-height: 1; }
.plan-amount { font-size: 2.55rem; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.plan-unit { display: grid; padding-bottom: 3px; color: var(--plan-muted); font-size: .78rem; font-weight: 600; line-height: 1.25; }
.plan-sub { min-height: 1.5em; margin-top: 8px; color: var(--plan-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.plan-features { display: grid; gap: 10px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--plan-rule); }
.plan-features li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; font-size: .92rem; line-height: 1.35; }
.plan-features li.no { color: var(--plan-muted); }
.plan-mark { display: grid; place-items: center; width: 28px; height: 22px; }
.plan-mark .icon { width: 17px; height: 17px; }
.plan-features li.no .plan-mark::before { content: ""; width: 11px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: .75; }
/* A feature the plan has but charges per use: the check is muted and the price follows the name. */
.plan-features li.paid .plan-mark { color: var(--plan-muted); }
.plan-fee { color: var(--plan-muted); white-space: nowrap; }
.plan-line strong { font-weight: 700; }
/* The "?" after a plan row and its bubble (hint(), showHint() in app.js). The icon keeps the line
   weight of the icon set and the row's colour, faint until it is pointed at or open; the bubble is
   smoked ink with cream text and an arrow, readable on the cream, burgundy and ink cards alike. */
.hint { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 0 -4px 2px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .5; vertical-align: middle; cursor: help; transition: opacity .12s; }
.hint::before { content: ""; position: absolute; inset: -6px; }
.hint .icon { width: 15px; height: 15px; }
.hint:hover, .hint.is-open, .hint:focus-visible { opacity: 1; }
.hint:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
:is(.plan-pro, .plan-ultra) .hint:focus-visible { outline-color: var(--cream); }
.hint-pop { position: fixed; z-index: 70; top: 0; left: 0; width: max-content; max-width: min(264px, calc(100vw - 16px)); padding: 8px 11px;
  border: 1px solid rgb(239 223 197 / .18); border-radius: var(--r-2); background: var(--ink); color: var(--cream); box-shadow: var(--shadow-pop);
  font-size: var(--fs-2); font-weight: 450; line-height: 1.45; text-align: left; pointer-events: none; }
.hint-pop[hidden] { display: none; }
.hint-pop::after { content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); width: 9px; height: 9px; margin: -5px 0 0 -5px; background: var(--ink);
  border: solid rgb(239 223 197 / .18); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.hint-pop.is-below::after { top: auto; bottom: 100%; margin: 0 0 -5px -5px; border-width: 1px 0 0 1px; }
.plan-foot { display: grid; gap: 7px; margin-top: auto; padding-top: 4px; }
.plan-foot .button { width: 100%; min-height: 38px; }
.plan-pro .plan-cta, .plan-ultra .plan-cta { background: var(--cream); border-color: var(--cream); color: var(--burgundy); font-weight: 650; }
.plan-ultra .plan-cta { color: var(--ink); }
.plan-pro .plan-cta:hover, .plan-ultra .plan-cta:hover { background: #fbf3e4; border-color: #fbf3e4; }
.plan-standard .plan-cta { background: var(--burgundy); border-color: var(--burgundy); font-weight: 650; }
.plan-standard .plan-cta:hover { background: var(--ink); border-color: var(--ink); }
/* Moving to a smaller plan is a secondary action: outlined, never filled. */
.plan .plan-cta.is-down, .plan .plan-cta.is-down:hover { background: transparent; border-color: var(--plan-muted); color: var(--plan-text); font-weight: 600; }
.plan .plan-cta.is-down:hover { border-color: var(--plan-text); }
:is(.plan-pro, .plan-ultra) :focus-visible { outline-color: var(--cream); }
.plan-current { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px dashed var(--plan-muted); border-radius: 8px; font-weight: 650; }
.plan-current .icon { width: 17px; height: 17px; }
.plan-renew { min-height: 1.4em; color: var(--plan-muted); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Trainee campaign: a ticket with notched sides and a perforated stub. */
.coupon { --notch: 13px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); background: var(--cream); color: var(--ink); border-radius: 12px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.coupon-main { display: grid; gap: 8px; padding: 20px 24px 20px 32px; }
.coupon-main h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.coupon-terms { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--slate); font-size: .88rem; font-variant-numeric: tabular-nums; }
.coupon-terms strong { color: var(--burgundy); }
.coupon-terms s { color: var(--muted); }
.coupon-stub { display: grid; align-content: center; justify-items: start; gap: 4px; padding: 18px 32px 18px 24px; border-left: 2px dashed rgb(56 15 23 / .28); }
.coupon.is-active { background: #f2e3cd; }

@container (max-width: 760px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .plan-was.is-empty { display: none; }
  .coupon { grid-template-columns: minmax(0, 1fr); }
  .coupon-main { padding: 20px 28px 16px; }
  .coupon-stub { padding: 16px 28px 20px; border-left: 0; border-top: 2px dashed rgb(56 15 23 / .28); }
}

/* Confirmation drawer: a side panel on desktop, a bottom sheet on phones. */
.drawer-backdrop { position: fixed; z-index: 30; inset: 0; background: rgb(37 43 43 / .42); }
.drawer { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; gap: 18px;
  padding: 26px 24px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -24px 0 48px -24px rgb(37 43 43 / .45);
  animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.drawer-close:hover { background: var(--raised); }
.drawer-sum { display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: var(--raised); font-variant-numeric: tabular-nums; }
.drawer-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 650; }
.drawer-total span:last-child { font-size: 1.2rem; }
.drawer-total small { color: var(--muted); font-size: .75rem; font-weight: 600; }
/* Order lines and the promotion code (Stripe Checkout pattern). */
.sum-lines { display: grid; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-3); }
.sum-lines > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sum-lines dt { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.sum-lines dd { margin: 0; white-space: nowrap; text-align: right; }
.sum-lines dd s { margin-right: 4px; color: var(--t3); }
.sum-note { color: var(--t3); font-size: var(--fs-1); }
.sum-promo dt { grid-template-columns: auto auto; align-items: center; column-gap: 10px; }
.sum-promo .sum-note { grid-column: 1 / -1; }
.sum-promo dd { color: var(--success); font-weight: 600; }
.promo-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 7px; border-radius: var(--r-1); background: var(--accent-tint); color: var(--burgundy); font-size: var(--fs-2); font-weight: 650; }
.promo-chip .icon { width: 13px; height: 13px; }
.sum-promo .text-button { font-size: var(--fs-2); }
.promo { display: grid; justify-items: start; gap: 6px; font-size: var(--fs-3); }
.promo-form { justify-items: stretch; }
.promo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.promo-row input { min-width: 0; text-transform: none; }
.promo-row .button { min-height: 36px; }
.drawer-actions { display: grid; gap: 8px; margin-top: auto; }
.drawer-actions .button { width: 100%; }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer.is-shown { animation: none; }
/* Payment drawer steps: billing (first paid plan only), then payment. */
.drawer-steps { display: flex; gap: 18px; margin: -6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .86rem; }
.drawer-steps li { display: inline-flex; align-items: center; gap: 7px; }
.drawer-steps li > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--control-line); border-radius: 50%; font-size: .74rem; font-weight: 700; }
.drawer-steps li > span .icon { width: 13px; height: 13px; }
.drawer-steps li[aria-current="step"] { color: var(--ink); font-weight: 650; }
.drawer-steps li[aria-current="step"] > span, .drawer-steps li.done > span { border-color: var(--burgundy); background: var(--burgundy); color: var(--cream); }
.drawer .choice-group > legend { display: flex; align-items: center; gap: 8px; }
.drawer .choice-group > legend .tag { padding: 1px 7px; font-size: .7rem; }
.pay-channel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pay-channel > .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--burgundy); }
.pay-channel strong { display: block; line-height: 1.35; }
.pay-billing { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pay-billing .field-label { font-size: .82rem; }
.pay-billing .button { flex: none; min-height: 36px; padding-block: 4px; }
.bill-office { min-width: 0; margin: 0; padding: 0; border: 0; }
.bill-office[hidden] { display: none; }

/* Plan limits on actions */
.limit-action { display: grid; justify-items: start; gap: 8px; }
.quota { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.row > .limit-action { display: contents; }
.limit-lock { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); font-size: .88rem; font-variant-numeric: tabular-nums; }
.limit-lock .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--burgundy); }
.limit-lock a { font-weight: 650; white-space: nowrap; }
.locked-view { display: grid; justify-items: start; gap: 14px; max-width: 560px; padding: 26px; }
.locked-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--burgundy); color: var(--cream); }
.locked-view h2 { font-variant-numeric: tabular-nums; }

/* Ad slot (Standard plan): labelled, quiet, the same weight as any other side block. */
.ad-slot { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-3); background: transparent; }
.ad-slot strong { font-size: var(--fs-3); }
.ad-label { margin-bottom: 4px; color: var(--t3); font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.ad-slot a { margin-top: 4px; font-size: var(--fs-2); }

@media (max-width: 590px) {
  .drawer { top: auto; left: 0; width: auto; max-height: 88dvh; padding: 18px 18px max(18px, env(safe-area-inset-bottom)); border-left: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px -16px rgb(37 43 43 / .45); animation-name: sheet-in; }
  .drawer-actions { margin-top: 0; }
  .plan-usage .plan-usage-title { width: 100%; }
}
/* Sign-in, sign-up and bar-ID verification (P2) */
body.auth-mode .sidebar, body.auth-mode .topbar, body.auth-mode .mobile-nav { display: none; }
body.auth-mode .layout { display: block; }
body.auth-mode main { padding-bottom: clamp(18px, 4vw, 40px); }
body.auth-mode .site-foot { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.auth { display: grid; gap: 16px; width: min(440px, 100%); margin: clamp(0px, 4vh, 48px) auto 0; }
.auth.wide { width: min(600px, 100%); }
.auth-brand { justify-self: center; margin-bottom: 4px; }
.auth-brand .brand-logo { height: 46px; }
.auth-card { gap: 18px; }
.auth-card h1 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); }
.auth-switch { color: var(--muted); text-align: center; }
.auth-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.auth-actions .grow { flex: 1; }
.auth-actions .button:not(.primary) { background: transparent; color: var(--ink); border-color: var(--line); }
.auth-actions .button:not(.primary):hover { background: var(--raised); border-color: var(--control-line); }
.field-hint:empty { display: none; }
input[aria-invalid=true], input[aria-invalid=true]:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(143 11 19 / .1); }
input::-ms-reveal, input::-ms-clear { display: none; }
.password-field { display: grid; gap: 5px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 38px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--slate); }
.password-toggle:hover { background: var(--raised); color: var(--ink); }

/* Sample accounts on the sign-in page */
.account-list { display: grid; margin: 0 -8px; padding: 0; list-style: none; }
.account-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.account-row:hover { background: var(--raised); }
.account-row .avatar { width: 38px; height: 38px; font-size: .85rem; }
.account-who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.account-who small { overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

/* Sign-up progress */
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--line); color: var(--muted); font-size: .88rem; font-weight: 600; line-height: 1.2; }
.stepper li.done, .stepper li.current { border-color: var(--burgundy); color: var(--ink); }
.stepper li.current { color: var(--burgundy); }
.step-dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .74rem; font-variant-numeric: tabular-nums; }
.stepper li.done .step-dot { border-color: var(--burgundy); background: var(--burgundy); color: var(--cream); }
.step-dot .icon { width: 13px; height: 13px; }

/* Date-only picker (traineeship end): the calendar without the time rail */
.picker-pop.date-only .picker-cal { padding-right: 0; }
@media (min-width: 591px) { .picker-pop.date-only { width: 320px; } }

/* Bar-ID method cards (selected in burgundy; green stays on task-kind cards only) */
.methods .choice-face { min-height: 60px; }
.methods .choice-face > .icon:first-child { width: 22px; height: 22px; }

/* NFC read (simulated) */
.nfc { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.nfc-copy { min-width: 0; }
.nfc-copy:focus { outline: none; }
.nfc-copy .button { margin-top: 4px; }
.nfc-copy .button.ghost { background: transparent; }
.nfc-stage { position: relative; height: 150px; }
.nfc-phone { position: absolute; top: 4px; left: 18px; width: 78px; height: 140px; border: 2px solid var(--ink); border-radius: 16px; background: var(--panel); transition: border-color .3s; }
.nfc-phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 22px; height: 4px; margin-left: -11px; border-radius: 4px; background: var(--line); }
.nfc-phone > .icon { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: var(--burgundy); opacity: 0; transition: opacity .3s; }
.nfc-waves, .nfc-waves::before, .nfc-waves::after { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--burgundy); border-radius: 50%; opacity: 0; }
.nfc-waves::before, .nfc-waves::after { content: ""; top: -2px; left: -2px; margin: 0; }
.nfc-card { position: absolute; right: 0; bottom: 6px; display: grid; place-items: center; width: 96px; height: 60px; border-radius: 9px; background: var(--burgundy); color: var(--cream); box-shadow: 0 10px 18px -10px rgb(37 43 43 / .6); transform: rotate(-8deg); transition: transform .5s ease; }
.nfc-card .icon { width: 30px; height: 30px; }
.nfc[data-nfc=reading] .nfc-card { animation: nfc-tap 1.2s ease-in-out infinite alternate; }
.nfc[data-nfc=reading] .nfc-waves, .nfc[data-nfc=reading] .nfc-waves::before, .nfc[data-nfc=reading] .nfc-waves::after { animation: nfc-wave 1.6s ease-out infinite; }
.nfc[data-nfc=reading] .nfc-waves::before { animation-delay: .5s; }
.nfc[data-nfc=reading] .nfc-waves::after { animation-delay: 1s; }
.nfc[data-nfc=done] .nfc-card { transform: translate(4px, -2px) rotate(-12deg); }
.nfc[data-nfc=done] .nfc-phone { border-color: var(--burgundy); }
.nfc[data-nfc=done] .nfc-phone > .icon { opacity: 1; }
.nfc .facts { margin-top: 4px; font-size: .92rem; }
@keyframes nfc-tap { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(-34px, -44px) rotate(-3deg); } }
@keyframes nfc-wave { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nfc-card, .nfc-waves, .nfc-waves::before, .nfc-waves::after { animation: none !important; transition: none; }
  .nfc[data-nfc=reading] .nfc-card { transform: translate(-34px, -44px) rotate(-3deg); }
}

/* Consents */
.consent-info { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--raised); }
.consent-info > .icon { margin-top: 2px; color: var(--slate); }
.consents { display: grid; border: 1px solid var(--line); border-radius: 12px; }
.consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 12px 14px; }
.consent + .consent { border-top: 1px solid var(--line); }
.consent .check { align-items: flex-start; min-height: 0; }
.consent .check input { margin-top: 2px; }
.consent .text-button { margin-top: 1px; white-space: nowrap; font-size: .9rem; }
.consent .field-hint { grid-column: 1 / -1; padding-left: 28px; }
.optional { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 6px; background: var(--raised); color: var(--muted); font-size: .76rem; font-weight: 600; vertical-align: 1px; }

/* Legal text drawer */
.legal-sheet { position: fixed; inset: 0 0 0 auto; width: min(580px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--text); box-shadow: -20px 0 50px -24px rgb(37 43 43 / .5); }
.legal-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: legal-in .2s ease-out; }
.legal-sheet::backdrop { background: rgb(37 43 43 / .4); }
.legal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.legal-body { display: grid; align-content: start; gap: 18px; padding: 18px 22px 24px; overflow-y: auto; line-height: 1.6; }
.legal-body:focus { outline: none; }
.legal-body section { display: grid; gap: 8px; }
.legal-body h3 { font-size: 1rem; }
.legal-foot { display: flex; justify-content: flex-end; padding: 12px 22px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@keyframes legal-in { from { transform: translateX(24px); opacity: 0; } }

/* Verification lock and renewal call */
.verify-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid rgb(143 11 19 / .22); border-radius: var(--r-3); background: #fbf1ec; }
.verify-banner > .icon { align-self: start; width: 18px; height: 18px; margin-top: 2px; color: var(--red); }
.verify-banner > div { display: grid; gap: 2px; min-width: 0; }
.panel .verify-banner { grid-template-columns: auto minmax(0, 1fr); }
.panel .verify-banner > .button { grid-column: 2; }
.verify-banner strong { font-size: var(--fs-3); }
.verify-banner p { color: var(--t2); font-size: var(--fs-2); }
.verify-banner.renew { border-color: var(--line-soft); background: var(--s1); }
.verify-banner.renew > .icon { color: var(--t3); }
.panel .verify-banner { margin: 0; }
form.is-locked { opacity: .5; filter: grayscale(.4); user-select: none; }
form.is-locked .button.primary { background: var(--s1); border-color: var(--line); color: var(--t2); font-weight: 550; }

@media (max-width: 590px) {
  .auth-pair { grid-template-columns: minmax(0, 1fr); }
  .stepper li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: .8rem; }
  .nfc { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nfc-stage { width: 170px; }
  .nfc .facts { text-align: left; }
  .nfc-copy { justify-items: center; }
  .consent { grid-template-columns: minmax(0, 1fr); }
  .consent .text-button { justify-self: start; margin-left: 28px; }
  .legal-sheet { inset: auto 0 0; width: 100vw; height: 92dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; }
  .legal-sheet[open] { animation-name: sheet-up; }
  .verify-banner { grid-template-columns: auto minmax(0, 1fr); }
  .verify-banner > .button, .panel .verify-banner > .button { grid-column: 1 / -1; width: 100%; }
  .auth-actions .grow { display: none; }
  .auth-actions .button { white-space: nowrap; }
  .auth-actions .button.primary { flex: 1 1 100%; order: -1; }
  .auth-actions .button:not(.primary) { flex: 1; }
}
@keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } }

/* ---- Task calendar ------------------------------------------------------------------ */
/* Quiet grid, colour only on entries (Google Calendar / Notion Calendar / Cal.com). */
/* Colour system (Mustafa, 2026-11-15). Tasks take the colour of the account's side, deadlines the
   colour of their state. Saturated enough to tell apart on cream, dark enough that every tone passes
   WCAG AA (4.5:1) as text on the panel, the weekend and the selected day, also on its own 12 % fill.
   Green is used here for "confirmed / paid" only: the project keeps green for task-kind cards
   elsewhere, the calendar is the agreed exception. Colour is never alone: an arrow, a check, a
   warning sign or a word carries the same meaning (colour blindness). */
:root {
  --cal-given: #7d2440;    /* task I gave: wine */
  --cal-taken: #145d63;    /* task I took: petrol */
  --cal-open: #655850;     /* my open listing, not a task yet: taupe, dashed */
  --cal-next: #574a8a;     /* next hearing: violet */
  --cal-ready: #7a5108;    /* preparation check waiting: ochre */
  --cal-due: #2c5687;      /* payment due, waiting: blue */
  --cal-deadline: #545c10; /* application deadline of my listing: olive */
  --cal-done: #2a6247;     /* confirmed, paid or reported paid: green */
  --cal-late: #a61f17;     /* missed or overdue: red */
  --cal-attn: #953c08;     /* waits for a decision (urgent, change, dispute, cancel): orange */
  --cal-fill: 12%;
}
.ev-given { --ev: var(--cal-given); }
.ev-taken { --ev: var(--cal-taken); }
.ev-open { --ev: var(--cal-open); }
.ev-next { --ev: var(--cal-next); }
.ev-ready { --ev: var(--cal-ready); }
.ev-due { --ev: var(--cal-due); }
.ev-deadline { --ev: var(--cal-deadline); }
.ev-done { --ev: var(--cal-done); }
.ev-late { --ev: var(--cal-late); }
.ev-attn { --ev: var(--cal-attn); }
.cal { --cal-line: #e4d9c9; --cal-weekend: #f8f1e5; --cal-picked: #f3e6dc; --cal-hour: 52px; display: grid; gap: 14px; min-width: 0; }
/* Past entries are muted without opacity, so their text keeps its contrast: a paler fill and bar,
   meta-grey text; the sign keeps the tone. */
.cal .is-faded { --cal-fill: 4%; }
.cal :is(.cal-chip, .cal-block, .cal-card, .cal-row).is-faded { border-left-color: color-mix(in srgb, var(--ev) 45%, var(--panel)); }
.cal .is-faded :is(b, .cal-block-time, .cal-type, .cal-row-time, .cal-card-time) { color: var(--t3); }
.cal .is-faded :is(.cal-chip, .cal-block-time, .cal-type) .icon, .cal-chip.is-faded > .icon { color: var(--ev); }
.cal .cal-row.is-faded .cal-row-bar { background: color-mix(in srgb, var(--ev) 45%, var(--panel)); }
.cal-marker.is-faded::before { border-top-color: color-mix(in srgb, var(--ev) 45%, var(--panel)); }
.cal .cal-marker.is-faded span { border-color: color-mix(in srgb, var(--ev) 45%, var(--panel)); color: var(--t3); }
.cal-dot.is-faded { background: color-mix(in srgb, var(--ev) 50%, var(--panel)); }
/* Overdue and still open (late preparation check, unpaid fee past due): never faded; the red tone,
   a warning sign and a thin red ring so it reads as "needs attention" next to finished entries. */
.cal-chip.is-late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-late) 55%, transparent); }
.cal-row.is-late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-late) 22%, transparent); }
.cal .cal-card.is-late { border-color: color-mix(in srgb, var(--cal-late) 35%, transparent); border-left-color: var(--ev); }
/* Waits for a decision: a thin orange ring around the dot on phones. */
.cal-dot.has-flag { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 2.5px var(--cal-attn); }
/* Open listing on its task day: a placeholder, dashed and unfilled, not a confirmed task. */
.cal-chip.is-placeholder { background: transparent; border-left-style: dotted; outline: 1px dashed color-mix(in srgb, var(--ev) 45%, transparent); outline-offset: -1px; }
.cal-dot.is-placeholder { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ev); }
:is(.cal-swatch.is-placeholder, .is-placeholder .cal-swatch) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ev); outline: 1px dashed var(--ev); outline-offset: -1px; }
/* State words and attention signs (agenda, day detail, day view). */
.cal-state, .cal-flag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; border-radius: var(--r-1);
  font-size: var(--fs-1); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.cal-state { background: color-mix(in srgb, var(--ev) 12%, var(--panel)); color: var(--ev); }
.cal-flag { background: color-mix(in srgb, var(--cal-attn) 11%, var(--panel)); color: var(--cal-attn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-attn) 30%, transparent); }
:is(.cal-state, .cal-flag) .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.cal-flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.cal-flag-marks { display: inline-flex; flex: none; gap: 1px; margin-left: auto; padding-left: 2px; color: var(--cal-attn); }
.cal-flag-marks .icon { width: 11px; height: 11px; stroke-width: 2.3; }
/* Colour key: a quiet button beside the period arrows, the key opens under it. */
.cal-key { position: relative; }
.cal .cal-key-btn { display: inline-flex; align-items: center; width: auto; gap: 6px; padding: 0 11px; font-size: .9rem; font-weight: 500; }
.cal-key-btn .icon { width: 16px; height: 16px; color: var(--t2); }
.cal-key-btn[aria-expanded=true] { background: var(--accent-tint); border-color: var(--control-line); }
.cal-key-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px;
  width: 460px; max-width: calc(100vw - 32px); padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.cal-key-pop[hidden] { display: none; }
.cal-key-group h3 { margin: 0 0 6px; color: var(--t3); font-size: var(--fs-1); font-weight: 650; }
.cal-key-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal-key-group li { display: flex; align-items: center; gap: 8px; color: var(--t1); font-size: var(--fs-2); line-height: 1.3; }
.cal-key-sample, .cal-key-flag { display: inline-grid; place-items: center; flex: none; width: 24px; height: 17px; border-radius: 3px; }
.cal-key-sample { border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 16%, var(--panel)); color: var(--ev); }
.cal-key-sample.is-placeholder { background: transparent; border-left-style: dotted; outline: 1px dashed color-mix(in srgb, var(--ev) 55%, transparent); outline-offset: -1px; }
.cal-key-flag { background: color-mix(in srgb, var(--cal-attn) 11%, var(--panel)); color: var(--cal-attn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-attn) 30%, transparent); }
.cal-key-sample .icon, .cal-key-flag .icon { width: 11px; height: 11px; stroke-width: 2.3; }
.cal-key-note { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--t3); font-size: var(--fs-1); }
.cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.cal-title { display: grid; gap: 2px; min-width: 0; }
.cal-title h1 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-variant-numeric: tabular-nums; }
.cal-title-short { display: none; }
.cal-nav { display: flex; align-items: center; gap: 6px; padding-bottom: 2px; }
.cal-btn { min-height: 36px; padding: 5px 12px; font-size: .9rem; }
.cal-btn .icon { width: 16px; height: 16px; }
.cal-icon { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); }
.cal-icon:hover { background: var(--raised); border-color: var(--control-line); }
.cal-views { margin-left: auto; }
.cal-views .choice-group > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cal-views .segmented .choice-face { min-height: 34px; padding: 5px 14px; font-size: .9rem; }
.cal-swatch { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--ev); }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 16px; align-items: start; }
.cal-layout.is-agenda { grid-template-columns: minmax(0, 1fr); }
.cal-view { min-width: 0; }

/* Month */
.cal-month { overflow: hidden; border: 1px solid var(--cal-line); border-radius: 14px; background: var(--panel); }
.cal-weekdays, .cal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays { border-bottom: 1px solid var(--cal-line); }
.cal-weekdays span { padding: 8px 10px; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.cal-weekdays .is-weekend { background: var(--cal-weekend); }
.cal-cells { grid-auto-rows: minmax(108px, auto); }
.cal-cell { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px 3px 7px; border: 0; border-right: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line); border-radius: 0; background: var(--panel); color: var(--ink); text-align: left; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cal-cell.is-weekend { background: var(--cal-weekend); }
.cal-cell:hover { background: #f5ecdf; }
.cal-cell[aria-pressed=true] { background: var(--cal-picked); box-shadow: inset 0 0 0 1.5px rgb(56 15 23 / .32); }
.cal-cell:focus-visible { z-index: 1; outline-offset: -2px; }
.cal-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
:is(.cal-cell, .cal-dayhead)[aria-current=date] .cal-num { background: var(--burgundy); color: var(--cream); }
.cal-cell.is-outside .cal-num { color: #b2a693; }
/* Days of the next or previous month: quieter, without opacity so the text keeps its contrast. */
.cal-cell.is-outside .cal-chip { --cal-fill: 4%; border-left-color: color-mix(in srgb, var(--ev) 45%, var(--panel)); }
.cal-cell.is-outside .cal-chip :is(b, span) { color: var(--t3); }
.cal-cell.is-outside .cal-dots { opacity: .45; }
.cal-chips { display: grid; gap: 2px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 1px 3px 1px 4px; border-left: 3px solid var(--ev); border-radius: 4px; background: color-mix(in srgb, var(--ev) var(--cal-fill), var(--panel)); font-size: .7rem; line-height: 1.5; white-space: nowrap; }
.cal-chip b { flex: none; margin-right: 1px; color: var(--ev); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cal-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-chip > .icon { width: 10px; height: 10px; margin-right: -1px; color: var(--ev); stroke-width: 2.4; }
.cal-more { padding-left: 6px; color: var(--muted); font-size: .71rem; font-weight: 650; }
.cal-dots { display: none; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev); }

/* Week and day: hour grid */
.cal-time-scroll { isolation: isolate; overflow-x: auto; border: 1px solid var(--cal-line); border-radius: 14px; background: var(--panel); scroll-padding-left: 54px; }
.cal-time { --gutter: 54px; }
.cal-time-head, .cal-time-body { display: grid; grid-template-columns: var(--gutter) repeat(var(--days), minmax(0, 1fr)); }
.cal-time-head { border-bottom: 1px solid var(--cal-line); }
.cal-gutter-head, .cal-gutter { background: var(--panel); }
.cal-dayhead { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-left: 1px solid var(--cal-line); border-radius: 0; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.cal-dayhead .cal-num { width: 32px; height: 32px; color: var(--ink); font-size: 1rem; letter-spacing: 0; }
.cal-dayhead.is-weekend { background: var(--cal-weekend); }
.cal-dayhead:hover { background: #f5ecdf; }
.cal-dayhead[aria-pressed=true] { background: var(--cal-picked); }
.cal-dayhead:focus-visible { outline-offset: -2px; }
.cal-time.is-single .cal-dayhead { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; padding-inline: 14px; }
.cal-time-body { padding: 10px 0 12px; }
.cal-gutter, .cal-col { position: relative; height: calc(var(--hours) * var(--cal-hour)); }
.cal-gutter span { position: absolute; top: calc(var(--top) * var(--cal-hour)); right: 8px; transform: translateY(-50%); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.cal-col { border-left: 1px solid var(--cal-line); border-bottom: 1px solid var(--cal-line); background-image: repeating-linear-gradient(to bottom, var(--cal-line) 0 1px, transparent 1px var(--cal-hour)); }
.cal-col.is-weekend { background-color: var(--cal-weekend); }
.cal-col.is-selected { background-color: rgb(56 15 23 / .03); }
.cal-block { position: absolute; z-index: 1; top: calc(var(--top) * var(--cal-hour) + 1px); left: calc(var(--lane) * (100% - 6px) / var(--lanes) + 3px);
  width: calc((100% - 6px) / var(--lanes) - 2px); height: calc(var(--len) * var(--cal-hour) - 2px); display: flex; flex-flow: column wrap; align-content: flex-start; gap: 1px 20px; overflow: hidden;
  padding: 4px 7px; border: 0; border-left: 3px solid var(--ev); border-radius: 6px; background: color-mix(in srgb, var(--ev) var(--cal-fill), var(--panel)); color: var(--ink); text-align: left; font-size: .74rem; line-height: 1.25; }
.cal-block:hover { background: color-mix(in srgb, var(--ev) calc(var(--cal-fill) + 6%), var(--panel)); }
.cal-block:focus-visible { z-index: 3; outline-offset: 1px; }
.cal-block > * { flex: none; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block > span { color: var(--slate); }
.cal-block strong { font-size: .78rem; }
.cal-block > .cal-block-time { display: flex; align-items: center; gap: 3px; color: var(--ev); font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-block .icon { width: 12px; height: 12px; }
.cal-block-time > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-block-time > .cal-flag { flex: none; min-height: 18px; margin-left: 4px; padding: 0 6px; overflow: visible; }
/* Week columns are narrow: the time never shortens, the attention signs may. */
.cal-time:not(.is-single) .cal-block-time > span { flex: none; }
.cal-block-time > .cal-flag-marks { flex: 0 1 auto; min-width: 0; overflow: hidden; padding-left: 3px; }
.cal-block.is-proposed { border: 1.5px dashed color-mix(in srgb, var(--ev) 55%, transparent); background: rgb(252 248 239 / .7); }
.cal-block.is-placeholder { border: 1px dashed color-mix(in srgb, var(--ev) 55%, transparent); border-left: 3px dotted var(--ev); background: rgb(252 248 239 / .75); }
.cal-block.is-placeholder:hover { background: color-mix(in srgb, var(--ev) 8%, var(--panel)); }
.cal-time.is-single .cal-block { padding: 6px 10px; font-size: .8rem; }
/* Same layer as the now line but later in the column, so a marker label sits on top of it
   while both stay under the sticky time gutter (z-index 5) on mobile. */
.cal-marker { position: absolute; z-index: 4; top: calc(var(--top) * var(--cal-hour)); left: 0; right: 0; display: flex; align-items: center; height: 22px; padding: 0; border: 0; background: transparent; transform: translateY(-50%); }
.cal-marker::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ev); }
.cal-marker span { position: relative; max-width: calc(100% - 8px); margin-left: 4px; padding: 0 6px; overflow: hidden; border: 1px solid var(--ev); border-radius: 5px; background: color-mix(in srgb, var(--ev) 8%, var(--panel)); color: var(--ev); font-size: .68rem; font-weight: 650; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-marker:hover span { background: color-mix(in srgb, var(--ev) 14%, var(--panel)); }
.cal-marker span .icon { width: 10px; height: 10px; margin: 0 3px 1px 0; vertical-align: middle; stroke-width: 2.4; }
.cal-marker:focus-visible { outline-offset: 0; }
.cal-now { position: absolute; z-index: 4; top: calc(var(--top) * var(--cal-hour)); left: 0; right: 0; border-top: 1.5px solid var(--red); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }

/* Agenda */
.cal-agenda { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--cal-line); border-radius: 14px; background: var(--panel); }
.cal-agenda-day { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 14px; padding: 12px 16px; border-bottom: 1px solid var(--cal-line); }
.cal-agenda-day:last-child { border-bottom: 0; }
.cal-agenda-date { display: flex; align-items: center; align-self: start; gap: 10px; padding-top: 4px; font-size: .88rem; font-weight: 600; }
.cal-agenda-label { display: grid; line-height: 1.3; }
.cal-agenda-label small { color: var(--muted); font-size: .76rem; font-weight: 500; }
.cal-agenda-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 1.12rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-agenda-num.is-today { background: var(--burgundy); color: var(--cream); }
.cal-today-label { color: var(--red); font-weight: 650; }
.cal-rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cal-row { display: grid; grid-template-columns: 96px 4px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.cal-row:hover { background: var(--raised); }
.cal-row-time { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-row-bar { align-self: stretch; border-radius: 4px; background: var(--ev); }
.cal-row-main { display: grid; gap: 1px; min-width: 0; }
.cal-row-go { display: grid; color: var(--muted); }
.cal-row-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.cal-row-go .icon { width: 16px; height: 16px; }
.cal-type { display: inline-flex; align-items: center; gap: 5px; color: var(--ev); font-size: .74rem; font-weight: 650; letter-spacing: .02em; }
.cal-type .icon { width: 13px; height: 13px; }

/* Selected day: side panel on desktop, bottom sheet on phones */
.cal-detail { position: sticky; top: 16px; display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--cal-line); border-radius: 14px; background: var(--panel); }
.cal-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cal-detail-head h2 { font-size: 1.1rem; }
.cal-detail-head h2:focus { outline: none; }
.cal-close, .cal-backdrop { display: none; }
.cal-events { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cal-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--cal-line); border-left: 3px solid var(--ev); border-radius: 10px; background: var(--panel); }
.cal-card:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.cal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-card-time { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-card h3 { font-size: .98rem; }
.cal-proposal { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 8px; background: var(--warning-bg); color: var(--warning); font-size: .82rem; font-weight: 600; }
.cal-proposal .icon { width: 16px; height: 16px; margin-top: 1px; }
.cal-facts { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: .86rem; }
.cal-facts dt { color: var(--muted); }
.cal-facts dd { margin: 0; }
.cal-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 10px; color: var(--muted); text-align: center; }
.cal-empty .icon { width: 28px; height: 28px; opacity: .55; }
.cal-empty-wide { padding: 56px 10px; border: 1px dashed var(--line); border-radius: 14px; background: var(--panel); }

@media (max-width: 1150px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-detail { position: static; }
}
@media (max-width: 590px) {
  .cal { --cal-hour: 50px; gap: 12px; }
  .cal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title nav" "views views"; align-items: center; gap: 2px 12px; }
  .cal-title { display: contents; }
  .cal-title h1 { grid-area: title; overflow: hidden; font-size: 1.375rem; text-overflow: ellipsis; white-space: nowrap; }
  .cal-title-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cal-title-short { display: inline; }
  .cal-nav { grid-area: nav; padding-bottom: 0; }
  .cal-views { grid-area: views; margin: 8px 0 0; }
  .cal-views .choice-group.segmented .choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .cal-views .segmented .choice-face { justify-content: center; padding-inline: 6px; }
  .cal-key-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cal .cal-key-btn { width: 36px; padding: 0; }
  .cal-key-pop { right: 0; left: auto; width: calc(100vw - 32px); max-width: 420px; gap: 12px 14px; padding: 12px 14px; }
  .cal-weekdays span { padding: 6px 0; text-align: center; font-size: .66rem; }
  .cal-cells { grid-auto-rows: 54px; }
  .cal-cell { align-items: center; gap: 4px; padding: 5px 2px; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; justify-content: center; gap: 3px; }
  .cal-time { --gutter: 44px; }
  .cal-time:not(.is-single) { min-width: 620px; }
  .cal-time-scroll { scroll-padding-left: 44px; scroll-snap-type: x proximity; }
  .cal-gutter-head, .cal-gutter { position: sticky; left: 0; z-index: 5; }
  .cal-dayhead, .cal-col { scroll-snap-align: start; }
  .cal-agenda-day { grid-template-columns: minmax(0, 1fr); padding: 10px 8px; }
  .cal-row { grid-template-columns: 46px 4px minmax(0, 1fr) 16px; gap: 6px 10px; padding: 8px 6px; }
  .cal-row-time { align-self: start; font-size: .84rem; }
  .cal-row-bar { grid-row: 1 / span 2; grid-column: 2; }
  .cal-row-status { grid-column: 3; grid-row: 2; justify-content: flex-start; }
  .cal-row-go { grid-column: 4; grid-row: 1 / span 2; }
  .cal-detail { display: none; }
  .cal-detail.is-open { position: fixed; z-index: 31; inset: auto 0 0; top: auto; display: grid; max-height: 82dvh; overflow-y: auto; padding: 10px 16px max(18px, env(safe-area-inset-bottom));
    border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px -16px rgb(37 43 43 / .45); animation: cal-sheet-up .18s ease-out; }
  .cal-detail.is-open::before { content: ""; justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--line); }
  .cal-backdrop { display: block; position: fixed; z-index: 30; inset: 0; background: rgb(37 43 43 / .42); }
  .cal-close { display: grid; margin: -6px -8px 0 0; }
}
@keyframes cal-sheet-up { from { transform: translateY(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cal-detail.is-open { animation: none; } }
/* ---- Landing page (#tanitim) --------------------------------------------------------- */
/* Own full-width layout: no side menu, top bar or bottom menu. Same palette and type family
   as the app, set larger and looser. The one bold element is the task record in "Nasıl
   çalışır", whose stamp changes as the reader scrolls. */
body.landing-mode .sidebar, body.landing-mode .topbar, body.landing-mode .mobile-nav { display: none; }
body.landing-mode .layout { display: block; }
body.landing-mode main { width: 100%; max-width: none; padding: 0; overflow-wrap: break-word; }
body.landing-mode main > .notice { width: min(1180px, calc(100% - 2 * var(--lp-gutter))); margin: 14px auto 0; }
body.landing-mode .site-foot { width: min(1180px, 100%); padding: 4px var(--lp-gutter) max(22px, env(safe-area-inset-bottom)); }
body.landing-mode .site-foot p { border-top: 0; }
:root { --lp-gutter: clamp(18px, 5vw, 56px); --lp-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
.lp { --lp-dim: rgb(239 223 197 / .72); }
.lp-wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--lp-gutter); }
.lp-mono { font-family: var(--lp-mono); font-size: .92em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lp-eyebrow { color: var(--burgundy); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lp h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); line-height: 1.02; letter-spacing: -.048em; font-weight: 720; }
.lp h1 span { display: block; color: var(--burgundy); }
.lp h2 { font-size: clamp(1.75rem, 3.3vw, 2.65rem); line-height: 1.08; letter-spacing: -.036em; font-weight: 700; max-width: 21ch; }
.lp h3 { letter-spacing: -.012em; }
.lp .button { min-height: 46px; padding-inline: 18px; }
.lp-note { color: var(--muted); font-size: .86rem; }
.lp :focus-visible { outline-offset: 3px; }

/* Bar */
.lp-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.lp-bar-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.lp-jump { display: flex; gap: 22px; margin-inline: auto; }
.lp-jump a { color: var(--ink); text-decoration: none; font-size: .92rem; }
.lp-jump a:hover { text-decoration: underline; }
.lp-jump a { white-space: nowrap; }
/* Six section links since Hakkımızda joined (2026-11-15): tighter, the tour button icon only. */
@media (min-width: 981px) and (max-width: 1280px) {
  .lp-bar-in { gap: 16px; }
  .lp-jump { gap: 14px; }
  .lp-jump a { font-size: .86rem; }
  .lp-bar .tour-launch { width: 38px; padding: 0; justify-content: center; }
  .lp-bar .tour-launch span { display: none; }
}
.lp-bar-actions { display: flex; gap: 8px; margin-left: auto; }
.lp-brand .brand-logo { height: 44px; }
.lp-bar .button { min-height: 40px; padding: 6px 14px; }
.lp-jump + .lp-bar-actions { margin-left: 0; }

/* Hero: the thesis and an attorney's diary page with two hearings at the same hour */
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(44px, 9vh, 112px) clamp(56px, 10vh, 120px); }
.lp-hero-copy { display: grid; gap: 22px; }
.lp-lede { max-width: 52ch; font-size: 1.12rem; line-height: 1.6; color: var(--slate); }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lp-textlink { display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding-inline: 8px; color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.lp-diary { margin: 0; display: grid; gap: 12px; }
.lp-diary-page { position: relative; padding: 22px 22px 18px 58px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgb(37 43 43 / .45); }
.lp-diary-page::before { content: ""; position: absolute; inset: 0 auto 0 44px; width: 1px; background: rgb(143 11 19 / .35); }
.lp-diary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.lp-diary-head span { color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-diary-head strong { font-size: 1.35rem; letter-spacing: -.02em; }
.lp-diary-rows { list-style: none; padding: 0; }
.lp-diary-rows li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lp-diary-rows time { color: var(--muted); font-size: .85rem; padding-top: 2px; }
.lp-diary-rows span { display: grid; color: var(--muted); font-size: .88rem; }
.lp-diary-rows strong { color: var(--ink); font-size: .98rem; }
.lp-diary-rows .is-handed strong { text-decoration: line-through; text-decoration-color: var(--burgundy); text-decoration-thickness: 1.5px; color: var(--slate); }
.lp-diary-rows em { grid-column: 2; width: fit-content; padding: 3px 9px; border: 1.5px solid var(--burgundy); border-radius: 4px; color: var(--burgundy); font-style: normal; font-size: .8rem; font-weight: 650; }
.lp-diary-rows .is-handed::before { content: ""; position: absolute; left: -36px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--burgundy); }
.lp-diary-rows .is-blank { min-height: 44px; border-bottom: 0; }
.lp-diary figcaption { color: var(--muted); font-size: .88rem; }

/* Sections */
.lp-sec { padding-block: clamp(64px, 10vw, 124px); border-top: 1px solid var(--line); scroll-margin-top: 68px; }
.lp-sec:focus, .lp-hero:focus { outline: none; }
.lp-sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 60px); }

/* Problem */
.lp-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.lp-problem-lead { display: grid; gap: 16px; }
.lp-problem-lead > p:not([class]) { font-size: 1.06rem; line-height: 1.6; }
.lp-msg-meta { color: var(--muted); font-size: .78rem; }
.lp-msg { margin: -8px 0 0; padding: 16px 18px; max-width: 46ch; background: var(--panel); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; font-size: 1.08rem; line-height: 1.5; }
.lp-fails > div { padding: 18px 0; border-top: 1px solid var(--line); }
.lp-fails > div:last-child { border-bottom: 1px solid var(--line); }
.lp-fails dt { font-size: 1.08rem; font-weight: 680; letter-spacing: -.01em; }
.lp-fails dd { margin: 4px 0 0; color: var(--slate); }

/* How it works: steps on the left, the sticky task record on the right */
.lp-dark { background: var(--ink); color: var(--cream); border-top: 0; }
.lp-dark .lp-eyebrow { color: var(--lp-dim); }
.lp-dark :focus-visible { outline-color: var(--cream); }
.lp-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.lp-steps { grid-column: 1; grid-row: 1; list-style: none; padding: 0; }
.lp-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 46vh; padding-top: 6px; }
.lp-step:last-child { min-height: 30vh; }
.lp-step-no { color: var(--lp-dim); font-size: .95rem; padding-top: 6px; transition: color .3s; }
.lp-step-body { display: grid; gap: 10px; align-content: start; max-width: 50ch; transition: opacity .3s; }
.lp-step h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; letter-spacing: -.025em; }
.lp-step p { color: var(--lp-dim); line-height: 1.62; }
.lp-step .lp-step-note { padding-left: 12px; border-left: 2px solid rgb(239 223 197 / .35); font-size: .92rem; }
.lp-step:not(.is-active) .lp-step-body { opacity: .42; }
.lp-step.is-active .lp-step-no { color: var(--cream); }
.lp-excerpt { display: none; }

.lp-record { grid-column: 2; grid-row: 1; position: sticky; top: 96px; color: var(--ink); }
.lp-rec-tab { width: fit-content; padding: 7px 16px 6px; border-radius: 9px 9px 0 0; background: var(--cream); color: var(--burgundy); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lp-rec-sheet { position: relative; display: grid; gap: 16px; padding: 20px 22px 18px; border-radius: 0 12px 12px 12px; background: var(--panel); border-top: 6px solid var(--cream); }
.lp-rec-sheet::after { content: ""; position: absolute; z-index: -1; inset: 10px -8px -8px 8px; border-radius: 12px; background: var(--cream); opacity: .5; }
.lp-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.lp-rec-no { color: var(--muted); font-size: .85rem; }
.lp-stamp { display: inline-block; padding: 5px 11px 4px; border: 2px solid var(--burgundy); border-radius: 5px; box-shadow: inset 0 0 0 2px var(--panel), inset 0 0 0 3px var(--burgundy);
  color: var(--burgundy); font-family: var(--lp-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: rotate(-5deg); }
.lp-stamp.is-pressed { animation: lp-press .42s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes lp-press { 0% { opacity: 0; transform: rotate(-5deg) scale(1.5); } 60% { opacity: 1; transform: rotate(-5deg) scale(.95); } 100% { transform: rotate(-5deg) scale(1); } }
.lp-rec-title { display: grid; gap: 2px; }
.lp-rec-title strong { font-size: 1.18rem; letter-spacing: -.02em; }
.lp-rec-title span { color: var(--muted); font-size: .88rem; }
.lp-rec-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.lp-rec-dates dt, .lp-rec-row dt { color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.lp-rec-dates dd { margin: 2px 0 0; font-size: .84rem; }
.lp-rec-rows { display: grid; }
.lp-rec-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.lp-rec-row:last-child { border-bottom: 0; }
.lp-rec-row dd { margin: 0; font-size: .88rem; line-height: 1.4; transition: color .3s; }
.lp-rec-row.is-new dd { color: var(--burgundy); font-weight: 650; }
.lp-rec-row.is-new::before { content: ""; position: absolute; left: -14px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--burgundy); }
.lp-dash { color: var(--line); }
.lp-rec-foot { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.lp-rec-progress { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; list-style: none; padding: 0; }
.lp-rec-progress li { height: 3px; border-radius: 2px; background: var(--line); transition: background .3s; }
.lp-rec-progress li.is-done { background: var(--burgundy); }

/* Details */
.lp-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 52px); }
.lp-detail { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.lp-detail h3 { font-size: 1.1rem; }
.lp-detail p { color: var(--slate); line-height: 1.6; }
.lp-reveal { display: grid; gap: 6px; margin-top: 4px; }
.lp-reveal > span { display: grid; padding: 8px 12px; border: 1px dashed var(--control-line); border-radius: 8px; font-size: .9rem; }
.lp-reveal > span + span { border: 1px solid var(--ink); background: var(--panel); }
.lp-reveal small { color: var(--muted); font-size: .74rem; }
.lp-detail-plans { grid-column: 1 / -1; }
.lp-plans { display: grid; gap: 14px; }
.lp-plans table { width: min(820px, 100%); border-collapse: collapse; font-size: .93rem; }
.lp-plans th, .lp-plans td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.lp-plans thead th { font-size: 1rem; border-bottom: 2px solid var(--ink); }
.lp-plans tbody th { color: var(--slate); font-weight: 500; }
.lp-plans td { font-variant-numeric: tabular-nums; }
.lp-plans .lp-note { max-width: 82ch; }

/* Legal frame */
.lp-caveat { max-width: 72ch; margin-bottom: 28px; padding-left: 14px; border-left: 3px solid var(--burgundy); color: var(--slate); }
.lp-law-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 12px clamp(20px, 3vw, 40px); padding: 22px 0; border-top: 1px solid var(--line); }
.lp-law-row:last-child { border-bottom: 1px solid var(--line); }
.lp-law-row h3 { font-size: 1.02rem; }
.lp-law-rule { color: var(--slate); line-height: 1.55; }
.lp-law-answer { line-height: 1.55; }
.lp-law-answer span { display: block; margin-bottom: 2px; color: var(--burgundy); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Roadmap */
.lp-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin-bottom: 22px; }
.lp-road li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 34px; }
.lp-road li::before { content: ""; position: absolute; top: 7px; left: 0; right: -32px; height: 2px; background: var(--line); }
.lp-road li:last-child::before { right: 0; }
.lp-road-mark { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); }
.lp-road .is-now .lp-road-mark { background: var(--burgundy); border-color: var(--burgundy); box-shadow: 0 0 0 4px rgb(56 15 23 / .14); }
.lp-road-when { color: var(--burgundy); font-size: .8rem; font-weight: 650; }
.lp-road h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.lp-road p:last-child { color: var(--slate); line-height: 1.58; }

/* Team and closing call */
.lp-close { background: var(--burgundy); color: var(--cream); }
.lp-close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); padding-block: clamp(60px, 9vw, 110px); }
.lp-close .lp-eyebrow { color: var(--lp-dim); }
.lp-team { display: grid; gap: 14px; align-content: start; }
.lp-founders { display: grid; gap: 10px; list-style: none; padding: 8px 0 0; }
.lp-founders li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgb(239 223 197 / .25); }
.lp-founders img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; }
.lp-founder-text { display: grid; gap: 2px; }
.lp-founders strong { font-size: 1.05rem; font-weight: 650; }
.lp-founders span span { color: var(--lp-dim); font-size: .9rem; }
.lp-close .lp-team-more { display: inline-flex; align-items: center; gap: 4px; width: fit-content; color: var(--cream); }
.lp-team-more .icon { width: 16px; height: 16px; }
.lp-final { display: grid; gap: 16px; align-content: start; }
.lp-close-logo { display: block; width: auto; height: 60px; margin-bottom: 6px; }
.lp-final p { color: var(--lp-dim); max-width: 44ch; line-height: 1.6; }
.lp-close .button.primary { background: var(--cream); border-color: var(--cream); color: var(--burgundy); }
.lp-close .button.primary:hover { background: var(--panel); border-color: var(--panel); }
.lp-close .button.ghost { color: var(--cream); border-color: rgb(239 223 197 / .55); }
.lp-close .button.ghost:hover { background: rgb(239 223 197 / .12); border-color: var(--cream); }
.lp-close :focus-visible { outline-color: var(--cream); }

/* Sign-in and sign-up: back to the landing page */
.auth-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 4px; }
.auth-head .auth-brand { margin: 0; }
.auth-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--ink); font-size: .9rem; text-decoration: none; }
.auth-back:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .lp-jump { display: none; }
  .lp-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-law-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-law-row h3 { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .lp-bar { position: static; }
  .lp-sec { scroll-margin-top: 0; }
  .lp-hero-in, .lp-problem, .lp-close-in { grid-template-columns: minmax(0, 1fr); }
  .lp-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* On phones the record shrinks to a sticky strip: number, stamp and progress. */
  .lp-record { grid-column: 1; position: sticky; top: 0; z-index: 2; margin-inline: calc(-1 * var(--lp-gutter)); padding: 10px var(--lp-gutter); background: var(--ink); }
  .lp-rec-tab, .lp-rec-title, .lp-rec-dates, .lp-rec-rows { display: none; }
  .lp-rec-sheet { gap: 8px; padding: 10px 14px; border-radius: 10px; border-top: 0; }
  .lp-rec-sheet::after { display: none; }
  .lp-steps { grid-row: 2; }
  .lp-step, .lp-step:last-child { min-height: 0; padding-block: 26px; grid-template-columns: 40px minmax(0, 1fr); }
  .lp-step:not(.is-active) .lp-step-body { opacity: 1; }
  .lp-excerpt { display: grid; gap: 6px; margin-top: 4px; padding: 10px 12px; border: 1px solid rgb(239 223 197 / .2); border-radius: 10px; background: rgb(239 223 197 / .06); }
  .lp-excerpt > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; font-size: .86rem; }
  .lp-excerpt dt { color: var(--lp-dim); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
  .lp-excerpt dd { margin: 0; color: var(--cream); }
  .lp-road { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-road li { padding: 0 0 0 34px; }
  .lp-road li::before { inset: 18px auto -28px 7px; width: 2px; height: auto; }
  .lp-road li:last-child::before { display: none; }
}
@media (max-width: 590px) {
  .lp-details, .lp-law-row { grid-template-columns: minmax(0, 1fr); }
  .lp-law-row { gap: 6px; }
  .lp-diary-page { padding: 18px 16px 14px 44px; }
  .lp-diary-page::before { left: 32px; }
  .lp-diary-rows .is-handed::before { left: -27px; }
  .lp-diary-rows li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 10px; }
  .lp-bar .button { padding-inline: 11px; white-space: nowrap; }
  .lp-bar-in { gap: 10px; }
  /* The two icon buttons (tour, app) and the two account buttons fit beside the logo at 360 px. */
  .lp-brand .brand-logo { height: 38px; }
  .lp-bar-actions { gap: 6px; }
  .lp-plans { margin-inline: calc(-1 * var(--lp-gutter)); padding-inline: var(--lp-gutter); overflow-x: auto; }
  .lp-plans table { font-size: .84rem; }
  .lp-plans th, .lp-plans td { padding: 8px 6px; }
  .lp-lede { font-size: 1.04rem; }
  .lp h1 { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-stamp.is-pressed { animation: none; }
  .lp-step-no, .lp-step-body, .lp-rec-row dd, .lp-rec-progress li { transition: none; }
}

/* ---- Authority document (yetki belgesi, H2) ---- */
.authority:focus { outline: none; }
.doc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.doc-steps li { position: relative; display: grid; justify-items: start; align-content: start; gap: 6px; }
.doc-steps li > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--control-line); border-radius: 50%; background: var(--panel); font-size: .72rem; font-weight: 700; }
.doc-steps li > span .icon { width: 13px; height: 13px; }
.doc-steps li:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 30px; right: 0; height: 1px; background: var(--line); }
.doc-steps li.done:not(:last-child)::after { background: var(--burgundy); }
.doc-steps li.done > span:first-child { border-color: var(--burgundy); background: var(--burgundy); color: var(--cream); }
.doc-steps li[aria-current="step"] { color: var(--ink); font-weight: 650; }
.doc-steps li[aria-current="step"] > span:first-child { border-color: var(--burgundy); color: var(--burgundy); }

.doc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.doc-fields > legend { margin-bottom: 8px; padding: 0; font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.doc-fields > .picker { grid-column: 1 / -1; }
.doc-actions .notice { width: 100%; }

/* The sheet: A4 proportions, quiet paper look, serif body like a filed document. */
.doc-sheet { display: grid; align-content: start; gap: 14px; width: 100%; min-width: 0; aspect-ratio: 210 / 297; padding: 34px 32px 22px; border: 1px solid var(--line); border-radius: 4px;
  background: #fffdf8; color: #1c1f1f; box-shadow: 0 1px 2px rgb(37 43 43 / .06), 0 10px 24px -18px rgb(37 43 43 / .4);
  font: 400 .8rem/1.5 "Times New Roman", Times, Georgia, serif; overflow-wrap: anywhere; }
.doc-head { display: grid; justify-items: center; gap: 3px; padding-bottom: 12px; border-bottom: 1.5px solid #1c1f1f; text-align: center; }
.doc-kicker, .doc-ref { color: #4c4f54; font-size: .72rem; letter-spacing: .02em; }
.doc-title { font: 700 1.16rem/1.2 "Times New Roman", Times, Georgia, serif; letter-spacing: .24em; }
.doc-sec { display: grid; gap: 5px; }
.doc-sec h4 { margin: 0; font-size: .8rem; font-weight: 700; }
.doc-rows { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 2px 10px; }
.doc-rows dt { color: #4c4f54; }
.doc-rows dd { margin: 0; }
.doc-text { margin: 0; }
.doc-fine { color: #4c4f54; font-size: .74rem; }
.doc-note { display: block; margin-top: 1px; color: var(--burgundy); font: 600 .68rem/1.35 system-ui, "Segoe UI", sans-serif; }
.doc-client { display: grid; gap: 2px; }
.doc-hand { color: #87796f; font-size: .68rem; font-style: italic; }
.doc-local { display: inline-flex; align-items: center; gap: 4px; color: var(--burgundy); font: 600 .68rem/1.3 system-ui, "Segoe UI", sans-serif; }
.doc-local .icon { width: 12px; height: 12px; }
.doc-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: auto; padding-top: 10px; }
.doc-sign { display: grid; align-content: start; gap: 4px; }
.doc-sign-role { color: #4c4f54; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.doc-sign-line { display: block; min-height: 40px; padding-top: 26px; border-bottom: 1px solid #1c1f1f; color: #87796f; font-size: .72rem; font-style: italic; }
.doc-stamp { display: inline-flex; align-items: flex-start; gap: 6px; width: fit-content; padding: 5px 9px; border: 1.5px solid var(--burgundy); border-radius: 4px;
  color: var(--burgundy); transform: rotate(-1.2deg); font: 500 .7rem/1.3 system-ui, "Segoe UI", sans-serif; }
.doc-stamp .icon { width: 14px; height: 14px; margin-top: 1px; }
.doc-stamp b { display: block; font-weight: 700; letter-spacing: .03em; }
.doc-stamp small { display: block; font-size: .66rem; }
.doc-foot { padding-top: 8px; border-top: 1px solid #cfc2b1; color: #87796f; font-size: .66rem; text-align: center; }
.doc-foot .mono { font-family: var(--mono); font-size: .64rem; }
.doc-blank { display: inline-block; min-width: 60%; min-height: 1.3em; border-bottom: 1px dotted #1c1f1f; }
/* A signature voided by a later change of terms: dashed red, struck, no tilt. */
.doc-stamp.is-void { border-color: var(--danger); border-style: dashed; color: var(--danger); transform: none; }
.doc-stamp.is-void s { text-decoration-thickness: 1px; }
.doc-previous { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.doc-previous > summary { width: fit-content; color: var(--t2); font-size: var(--fs-2); cursor: pointer; }
.doc-previous[open] > summary { margin-bottom: 10px; }
.doc-previous .doc-sheet { opacity: .82; }

@media (min-width: 591px) {
  .authority .button, .doc-form .button { min-height: 36px; padding-block: 5px; }
}
@media (max-width: 590px) {
  .doc-sheet { aspect-ratio: auto; padding: 22px 16px 16px; font-size: .84rem; }
  .doc-rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-rows dt { margin-top: 4px; font-size: .74rem; }
  .doc-fields { grid-template-columns: minmax(0, 1fr); }
  .doc-steps { font-size: .74rem; }
  .doc-actions .button { width: 100%; }
}

/* "PDF indir": only the document is printed, on A4, without the on-screen notes. */
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 18mm 20mm; }
  body.printing-doc { background: #fff; }
  body.printing-doc > :not(#print-root) { display: none !important; }
  body.printing-doc #print-root { display: block; }
  #print-root .doc-sheet { aspect-ratio: auto; min-height: 255mm; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: #000; font-size: 11pt; gap: 5mm; }
  #print-root .doc-title { font-size: 16pt; }
  #print-root .doc-kicker, #print-root .doc-ref, #print-root .doc-sign-role { font-size: 9pt; }
  #print-root .doc-fine, #print-root .doc-foot { font-size: 8.5pt; }
  #print-root .doc-rows { grid-template-columns: 32% minmax(0, 1fr); }
  #print-root .doc-sec h4 { font-size: 11pt; }
  #print-root .doc-stamp { transform: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #print-root .doc-sign-line { min-height: 22mm; }
}

/* Personal data panel (#verilerim, H3) */
.vr { display: grid; gap: 16px; }
.vr > .heading { margin-bottom: 0; }
.vr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vr-meta .text-button { font-size: .88rem; }
.vr-pending { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.vr-section > .row.spread { align-items: baseline; }
.vr-small, .vr-actions .button { min-height: 34px; padding: 4px 12px; font-size: .88rem; }
.vr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-actions .icon { width: 16px; height: 16px; }
.button.ghost.vr-danger { color: var(--danger); }
.button.ghost.vr-danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }
.vr-cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Inventory: data, purpose and legal basis, retention */
.vr-inv-head, .vr-inv-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .72fr); gap: 22px; }
.vr-inv-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.vr-inv-head + .vr-inv { margin-top: -16px; }
.vr-inv-row { align-items: start; padding-block: 14px; }
.vr-inv-cat h3 { margin-bottom: 6px; font-size: .98rem; }
.vr-values { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.vr-values dt { color: var(--muted); }
.vr-values dd { margin: 0; }
.vr-inv-why p, .vr-inv-keep p { font-size: .9rem; }
.vr-basis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vr-basis .tag { padding: 2px 7px; border: 1px solid var(--line); background: transparent; font-size: .74rem; }
.vr-inv-keep .tag { margin-top: 6px; padding: 2px 7px; font-size: .72rem; }
.vr-none { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--raised); }
.vr-none h3 { font-size: .95rem; }
.vr-none ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin: 0; padding: 0; list-style: none; }
.vr-none li { display: flex; gap: 9px; }
.vr-none li .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--red); }
.vr-none li div { display: grid; gap: 1px; font-size: .9rem; }

/* Visibility matrix */
.vr-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vr-matrix-wrap { overflow-x: auto; }
.vr-matrix { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vr-matrix :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.vr-matrix thead th { color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; vertical-align: bottom; }
.vr-matrix tbody th { font-weight: 600; }
.vr-matrix tbody tr:last-child > * { border-bottom: 0; }
.vr-matrix tr > :nth-child(5) { background: var(--raised); }
.vr-mark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vr-mark .icon { width: 16px; height: 16px; }
.vr-mark.yes .icon { color: var(--burgundy); }
.vr-mark.part .icon { color: var(--slate); }
.vr-mark.no { color: var(--muted); }
.vr-mark.no .icon { color: #9a8f84; }
.vr-now { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.vr-now h3 { font-size: .95rem; }
.vr-now-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding-block: 8px; font-size: .92rem; }
.vr-now-row a { font-weight: 650; font-variant-numeric: tabular-nums; }

/* Permissions and rights */
.vr-consent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.vr-consent-text { display: grid; gap: 1px; }
.vr-consent > .tag { justify-self: end; }
.vr-consent-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vr-consent-actions .text-button { font-size: .88rem; }
.vr-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.vr-request > div { display: grid; gap: 1px; min-width: 0; }
#vr-requests:focus { outline: none; }
.vr-rights-list summary { min-height: 36px; padding-block: 6px; }
.vr-rights-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 8px; padding-block: 7px; font-size: .9rem; }
.vr-rights-list li > .muted { grid-column: 2; }
.vr-letter { color: var(--burgundy); font-weight: 700; }
.vr-apply { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.vr-apply h3 { font-size: .95rem; }
.vr-apply .facts { font-size: .88rem; }

/* Correction and deletion drawers */
.vr-drawer h3 { font-size: .95rem; }
.vr-drop { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vr-drop li { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.vr-drop .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--muted); }
.vr-kept li { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; font-size: .9rem; }
.vr-kept-time { display: grid; text-align: right; font-weight: 600; white-space: nowrap; }
.vr-kept-time small { color: var(--muted); font-size: .74rem; font-weight: 500; }
.vr-drawer .choice-group.pills .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vr-drawer .pills .choice-face { min-height: 36px; padding: 6px 8px; font-size: .88rem; }

@media (max-width: 980px) {
  .vr-none ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .vr-inv-head { display: none; }
  .vr-inv-head + .vr-inv { margin-top: 0; }
  .vr-inv-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vr-cell-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; margin-bottom: 2px; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 590px) {
  .vr-none ul { grid-template-columns: minmax(0, 1fr); }
  .vr-matrix thead { display: none; }
  .vr-matrix, .vr-matrix tbody, .vr-matrix tr, .vr-matrix :is(th, td) { display: block; }
  .vr-matrix tr { padding-block: 10px; border-bottom: 1px solid var(--line); }
  .vr-matrix tbody tr:last-child { border-bottom: 0; }
  .vr-matrix :is(th, td) { padding: 0; border: 0; }
  .vr-matrix tr > :nth-child(5) { background: none; }
  .vr-matrix tbody th { padding-bottom: 4px; }
  .vr-matrix td { display: flex; justify-content: space-between; gap: 12px; padding-block: 3px; }
  .vr-matrix td::before { content: attr(data-label); color: var(--muted); }
  .vr-now-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vr-drawer .choice-group.pills .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Task record (audit trail), disputes and the printable record export */
.trail > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 12px; padding-block: 9px; }
.trail-time { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; padding-top: 1px; }
.trail-body { display: grid; gap: 2px; min-width: 0; }
.trail-actor { font-weight: 650; }
.trail-actor.is-system { color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.trail-note { white-space: pre-line; }
.trail-hash { color: var(--muted); font: .72rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; }
.trail-older > summary { min-height: 36px; padding-block: 6px; font-size: .9rem; }
.trail-older[open] > .trail { border-bottom: 1px solid var(--line); }
.trail-integrity { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.trail-integrity .icon { width: 16px; height: 16px; color: var(--ink); }
.trail-integrity code { font: .8rem ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); }
.trail-integrity.is-broken, .trail-integrity.is-broken .icon { color: var(--danger); font-weight: 600; }
.reasons .choice-face { min-height: 52px; }
.choice input:disabled + .choice-face { opacity: .45; cursor: not-allowed; }
.choice:has(input:disabled) { cursor: not-allowed; }
.trail-n { color: var(--ink); font-weight: 650; }
.record-doc .facts { grid-template-columns: 170px minmax(0, 1fr); }
.dispute-note { white-space: pre-line; }
.record-doc { gap: 20px; }
.record-logo { display: block; width: auto; height: 40px; margin-bottom: 10px; }
.record-doc h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.record-doc h2 { font-size: 1.02rem; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.record-doc .facts dd { overflow-wrap: anywhere; }
.record-events > li { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 590px) {
  .trail > li, .record-events > li { grid-template-columns: minmax(0, 1fr); }
  .record-doc .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .record-doc .facts dd { margin-bottom: 8px; }
}
@media print {
  body.record-mode { background: #fff; }
  body.record-mode :is(.sidebar, .topbar, .mobile-nav, .site-foot, .record-tools, main > .notice) { display: none !important; }
  body.record-mode .layout { display: block; }
  body.record-mode main { width: auto; padding: 0; }
  body.record-mode .record-doc { border: 0; padding: 0; background: #fff; }
  body.record-mode .record-events > li { break-inside: avoid; }
}

/* ---- Home (#home) ---------------------------------------------------------------------------- */
/* Two columns: what needs the lawyer (expected steps, today and tomorrow) on the left, listings
   and account figures on the right. One column below 1100 px; phones keep the same order. */
.home-head { display: grid; gap: 3px; }
.home-head h1 { font-size: var(--fs-7); letter-spacing: -.028em; }
.home-head p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--t2); font-size: var(--fs-3); }
.home-demo { color: var(--t3); font-size: var(--fs-1); }
.home-demo::before { content: "·"; margin-right: 10px; color: var(--line); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 32px; align-items: start; }
.home-col { display: grid; gap: 30px; min-width: 0; }
.section-foot { color: var(--t3); font-size: var(--fs-2); }
.section-foot a { color: var(--t2); }
.rowlink .row-trail .button { pointer-events: none; }
.rowlink:hover .row-trail .button { border-color: var(--control-line); color: var(--burgundy); }
.home-side .rowlink { grid-template-columns: 18px minmax(0, 1fr) auto; padding-inline: 12px; }
.home-side .ledger { padding-block: 4px; }
.ledger.panel { padding-inline: 14px; }
.home-side .row-title { white-space: normal; }

/* Docket: today and tomorrow, times in mono, the entry type as a coloured bar (calendar colours). */
.docket { display: grid; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.docket-day + .docket-day { border-top: 1px solid var(--line-soft); }
.docket-date { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 4px; font-size: var(--fs-2); font-weight: 650; }
.docket-date span { color: var(--t3); font-weight: 500; }
.docket-rows { display: grid; margin: 0; padding: 0 0 6px; list-style: none; }
.docket-row { display: grid; grid-template-columns: 64px 3px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 7px 14px;
  color: var(--t1); text-decoration: none; }
.docket-row:hover { background: #fffcf6; }
.docket-row:focus-visible { outline-offset: -2px; }
.docket-time { display: grid; align-self: start; padding-top: 1px; color: var(--t1); font-size: var(--fs-2); font-weight: 600; line-height: 1.35; white-space: nowrap; }
.docket-time small { color: var(--amber); font-size: inherit; font-weight: 600; }
.docket-bar { align-self: stretch; border-radius: 2px; background: var(--ev); }
.docket-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--ev); font-size: var(--fs-1); font-weight: 650; }
.docket-kind .icon { width: 12px; height: 12px; }
.docket-row.is-faded { opacity: .55; }
.docket-row.is-late .docket-time { color: var(--red); }
.docket-now { display: flex; align-items: center; gap: 8px; height: 18px; padding: 0 14px; color: var(--red); font-size: var(--fs-1); font-weight: 650; }
.docket-now .mono { width: 64px; }
.docket-now::after { content: ""; flex: 1; height: 1.5px; background: var(--red); opacity: .7; }
.docket-none { padding: 4px 14px 12px 105px; color: var(--t3); font-size: var(--fs-2); }

@media (max-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 590px) {
  .home-head h1 { font-size: var(--fs-6); }
  .home-col { gap: 26px; }
  .rowlink, .home-side .rowlink { grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; }
  .row-title, .row-meta { white-space: normal; }
  .rowlink .row-trail { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
  .rowlink .row-trail .money { margin-left: auto; }
  .docket-row { grid-template-columns: 50px 3px minmax(0, 1fr); gap: 4px 10px; padding: 9px 12px; }
  .docket-row .row-trail { grid-column: 3; justify-content: flex-start; margin-top: 4px; }
  .docket-time { font-size: var(--fs-1); }
  .docket-now { padding-inline: 12px; }
  .docket-now .mono { width: 50px; }
  .docket-none { padding-left: 12px; }
  .docket-date { padding-inline: 12px; }
  .menu-foot { margin-inline: -12px; padding-inline: 12px; }
}

/* ---- Tevkil İşlemlerim ---- */
/* The task register (#tasks): one ledger grouped by whose move it is (Linear's grouped list),
   with the same column grid in every group so it reads like a docket book. Colour sits only on
   the stage ring and the step tag (Attio). The ledger is a size container: narrow widths fold
   the other party into the meta line, and below 680 px a row becomes two lines plus its step. */
.tk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tk-search { position: relative; display: flex; align-items: center; width: min(100%, 280px); color: var(--t3); }
.tk-search > .icon { position: absolute; left: 10px; width: 16px; height: 16px; pointer-events: none; }
.tk-search input { min-height: var(--h-control); padding-left: 32px; font-size: var(--fs-3); }
.tk-search input::-webkit-search-decoration, .tk-search input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
.tk-ledger { container: tk-ledger / inline-size; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.tk-cols, .tk-row { display: grid; grid-template-columns: 18px 50px minmax(0, 1fr) 148px 82px 108px 186px; column-gap: 12px; align-items: center; padding-inline: 14px; }
.tk-cols { min-height: 32px; color: var(--t3); font-size: var(--fs-1); font-weight: 600; }
.tk-end { text-align: right; }
.tk-group { border-top: 1px solid var(--line-soft); }
.tk-group-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px 7px; background: var(--s2); font-size: var(--fs-2); font-weight: 650; }
.tk-group-head .tag { align-self: center; }
.tk-rows { margin: 0; padding: 0; list-style: none; }
.tk-rows > li { border-top: 1px solid var(--line-soft); }
.tk-row { min-height: 56px; padding-block: 8px; color: var(--t1); text-decoration: none; }
.tk-row:hover { background: #fffcf6; }
.tk-row:focus-visible { outline-offset: -2px; }
/* Overdue or disputed: a thin red rule on the leading edge, nothing louder. */
.tk-row.is-alert { box-shadow: inset 2px 0 0 var(--red); }
.tk-stage { display: grid; place-items: center; align-self: start; height: 21px; color: var(--t3); }
.tk-ring { width: 16px; height: 16px; }
.tk-stage.mine { color: var(--amber); }
.tk-stage.late { color: var(--red); }
.tk-stage.wait { color: var(--info); }
.tk-stage.good { color: var(--success); }
.tk-no { align-self: start; padding-top: 2px; color: var(--t2); font-size: var(--fs-2); }
.tk-main, .tk-who, .tk-when, .tk-fee, .tk-step { display: grid; gap: 1px; min-width: 0; align-self: start; }
.tk-title, .tk-who > span { overflow: hidden; font-size: var(--fs-3); text-overflow: ellipsis; white-space: nowrap; }
.tk-title { font-weight: 600; }
.tk-meta, .tk-row small { overflow: hidden; color: var(--t3); font-size: var(--fs-2); text-overflow: ellipsis; white-space: nowrap; }
.tk-meta > span { white-space: nowrap; }
.tk-m-when::before, .tk-m-who::before { content: "·"; margin-inline: 5px; color: var(--line); }
.tk-m-no, .tk-m-when, .tk-m-who { display: none; }
.tk-when .num { font-size: var(--fs-3); }
.tk-fee { justify-items: end; text-align: right; }
.tk-fee .money { font-size: var(--fs-3); }
.tk-fee small.is-late, .tk-step small.is-late { color: var(--red); font-weight: 600; }
.tk-fee small.is-good { color: var(--success); }
.tk-step { justify-items: start; }
.tk-step .tag { max-width: 100%; }
.tk-step-text { overflow: hidden; color: var(--t2); font-size: var(--fs-2); text-overflow: ellipsis; white-space: nowrap; }
.tk-step.done .tk-step-text, .tk-step.good .tk-step-text { color: var(--t3); }
.tk-none { display: grid; justify-items: start; gap: 8px; padding: 16px 14px; border-top: 1px solid var(--line-soft); color: var(--t2); font-size: var(--fs-3); }
.tk-none[hidden], .tk-group[hidden], .tk-rows > li[hidden] { display: none; }

/* Medium widths: the other party moves into the meta line. */
@container tk-ledger (max-width: 820px) {
  .tk-cols, .tk-row { grid-template-columns: 18px 50px minmax(0, 1fr) 82px 100px 160px; }
  .tk-cols > :nth-child(4), .tk-who { display: none; }
  .tk-meta .tk-m-who { display: inline; }
}
/* Phones and narrow panes: two lines (task and fee, then record no, court, time and party),
   then the step with the payment state on its right. Text wraps at spaces instead of being cut. */
@container tk-ledger (max-width: 680px) {
  .tk-cols { display: none; }
  .tk-row { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "stage title money" ". meta meta" ". step pay"; gap: 2px 10px; padding: 10px 12px; }
  .tk-main, .tk-fee { display: contents; }
  .tk-stage { grid-area: stage; }
  .tk-title { grid-area: title; }
  .tk-meta { grid-area: meta; }
  .tk-fee .money { grid-area: money; justify-self: end; }
  .tk-fee small { grid-area: pay; justify-self: end; align-self: center; margin-top: 4px; }
  .tk-step { grid-area: step; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; }
  .tk-no, .tk-who, .tk-when { display: none; }
  .tk-title, .tk-meta, .tk-step-text, .tk-row small { white-space: normal; }
  .tk-meta .tk-m-no, .tk-meta .tk-m-when, .tk-meta .tk-m-who { display: inline; }
  .tk-meta .tk-m-no + span::before { content: "·"; margin-inline: 5px; color: var(--line); }
  .tk-group-head { padding-inline: 12px; }
}
@media (max-width: 590px) {
  .tk-bar { display: grid; gap: 10px; }
  .tk-search { width: 100%; }
  .tk-search input { min-height: 40px; font-size: 16px; }
}
/* ---- Profil ---- */
/* Header reads like a bar register entry: name, status · bar · sicil, verification, membership.
   Counters and the score sit beside it behind a hairline. Views below use .seg-links. */
.pf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 20px 32px; align-items: start;
  padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.pf-id { display: grid; gap: 6px; min-width: 0; }
.pf-id h1 { font-size: var(--fs-7); letter-spacing: -.028em; overflow-wrap: anywhere; }
.pf-register { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--t1); font-size: var(--fs-4); }
.pf-register > span + span::before { content: "·"; margin-inline: 8px; color: var(--t3); }
.pf-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; color: var(--t2); font-size: var(--fs-2); }
.pf-since { margin-top: 2px; }
.pf-since a { display: inline-flex; align-items: center; gap: 3px; color: var(--t2); }
.pf-since a:hover { color: var(--burgundy); }
.pf-since .icon { width: 13px; height: 13px; }
.pf-quiet { color: var(--t3); font-size: var(--fs-2); }
.pf-standing { display: grid; gap: 14px; align-content: start; min-width: 0; padding-left: 28px; border-left: 1px solid var(--line-soft); }
.pf-score { display: grid; gap: 4px; }
.pf-score-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pf-score-line .rating-score strong { font-size: 1.2rem; font-weight: 600; }
.pf-score-line .rating-score .icon { width: 15px; height: 15px; }
.pf-note { display: flex; gap: 6px; color: var(--t2); font-size: var(--fs-2); line-height: 1.45; }
.pf-note .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--t3); }
.pf-head.is-new { grid-template-columns: minmax(0, 1fr); }
.pf-head + .verify-banner { margin-top: -4px; }
.pf-tabs { margin-bottom: 26px; }
.pf-view { min-width: 0; }

/* Mesleki: specialty tree beside the courts list; one save for both. */
.pf-form { display: grid; gap: 20px; min-width: 0; }
.pf-pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 32px; align-items: start; }
.pf-pro .section-foot { margin-top: -4px; }
.pf-pro .spec-tree { border-color: var(--line-soft); border-radius: var(--r-3); background: var(--s1); }
.pf-pro .spec-group + .spec-group, .pf-pro .spec-items { border-color: var(--line-soft); }
.pf-pro .spec-items { background: var(--s0); }
.pf-pro .spec-count { font-family: var(--mono); color: var(--t3); }
.pf-court { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; cursor: pointer; }
.pf-court:hover { background: #fffcf6; }
.pf-court .row-title, .pf-court .row-meta { white-space: normal; }
.pf-actions { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* Bildirimler: setting rows with a switch on the right (Linear, Google settings). */
.pf-switches { max-width: 720px; }
.pf-switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 58px; padding: 10px 14px; }
.pf-switch-label { display: grid; gap: 1px; min-width: 0; cursor: pointer; }
.pf-switch-label .row-title, .pf-switch-label .row-meta { white-space: normal; }
input.pf-switch[type=checkbox] { width: 34px; height: 20px; min-height: 20px; border: 0; border-radius: 999px;
  background: var(--line) radial-gradient(circle at 10px 50%, var(--s1) 7px, transparent 7.5px) no-repeat; transition: background-color .12s; }
input.pf-switch[type=checkbox]:hover { background-color: var(--control-line); }
input.pf-switch[type=checkbox]:checked { background: var(--burgundy) radial-gradient(circle at 24px 50%, var(--s1) 7px, transparent 7.5px) no-repeat; }
input.pf-switch[type=checkbox]:checked:hover { background-color: var(--accent-hover); }
.pf-form:has(.pf-switches) .pf-actions { max-width: 720px; }

/* Görünürlük: the signature view. Each row sets what the account sees against what a colleague
   sees; the eye icon carries the colour (visible, conditional, hidden). */
.pf-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 32px; align-items: start; }
.pf-compare { display: grid; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.pf-compare-row { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; padding: 10px 14px; font-size: var(--fs-3); }
.pf-compare-row + .pf-compare-row { border-top: 1px solid var(--line-soft); }
.pf-compare-head { padding-block: 8px; color: var(--t3); font-size: var(--fs-2); font-weight: 600; }
.pf-compare-head > :last-child { padding-left: 26px; }
.pf-compare-name { color: var(--t2); }
.pf-compare-own, .pf-compare-other { min-width: 0; overflow-wrap: anywhere; }
.pf-compare-other { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.pf-other-text { display: grid; gap: 1px; min-width: 0; }
.pf-other-text small { color: var(--t3); font-size: var(--fs-1); }
.pf-compare-other.no .pf-other-text { color: var(--t3); }
.pf-mark { display: grid; place-items: center; height: 21px; }
.pf-mark .icon { width: 16px; height: 16px; }
.pf-mark.yes { color: var(--success); }
.pf-mark.part { color: var(--amber); }
.pf-mark.no { color: var(--t3); }
.pf-compare .chip-tags { margin-top: 0; }
.pf-cell-label { display: none; }
.pf-peer { display: grid; gap: 3px; padding: 14px 16px; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.pf-peer .metrics { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* Hesap: one calm column, as in a settings page. */
.pf-account { display: grid; gap: 28px; max-width: 720px; }
.pf-account .ledger.panel { padding-block: 4px; }
.pf-rowbutton { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.pf-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pf-session p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-session p > .icon { color: var(--t3); }
.pf-session .row-title { white-space: normal; overflow-wrap: anywhere; }

/* The comparison needs about 640 px for its three columns; below that the card goes under it. */
@media (max-width: 1200px) {
  .pf-vis { grid-template-columns: minmax(0, 1fr); }
  .pf-peer { max-width: 420px; }
}
@media (max-width: 1000px) {
  .pf-pro, .pf-head { grid-template-columns: minmax(0, 1fr); }
  .pf-standing { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 590px) {
  .pf-id h1 { font-size: var(--fs-6); }
  .pf-register { font-size: var(--fs-3); }
  .pf-head { padding-bottom: 18px; }
  .pf-compare-head { display: none; }
  .pf-compare-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
  .pf-compare-name { color: var(--t1); font-weight: 600; }
  .pf-compare-own { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  .pf-compare-other { grid-template-columns: 76px 18px minmax(0, 1fr); }
  .pf-cell-label { display: block; color: var(--t3); font-size: var(--fs-2); }
  .pf-switch-row, .pf-court { padding-inline: 12px; }
  .pf-actions .button, .pf-session .button { width: 100%; }
  .pf-standing { gap: 10px; padding-top: 14px; }
  /* Rows here keep the chevron on the same line. */
  .pf-account .rowlink { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .pf-account .rowlink .row-trail { grid-column: auto; margin-top: 0; }
}
/* ---- Arama ---- */
/* Search (#search): a thin filter bar and the open listings as a day-by-day cause list. Every
   class is sr-*; shared components are used as they are. On phones the filters move into a
   bottom sheet. */
.sr-page { display: grid; gap: 12px; min-width: 0; }
.sr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* On desktop the sheet is only a grouping: its filters wrap in the same row as the search field. */
.sr-sheet { display: contents; }
.sr-sheet-head, .sr-sheet-foot, .sr-open, .sr-pop-title, .sr-backdrop { display: none; }

/* Search field: a quiet box with the icon inside; the browser's own clear button is hidden. */
.sr-search { display: flex; align-items: center; gap: 7px; width: 248px; height: var(--h-control); padding: 0 10px; border: 1px solid var(--control-line);
  border-radius: var(--r-2); background: var(--s1); color: var(--t3); cursor: text; }
.sr-search .icon { width: 16px; height: 16px; }
.sr-search input, .sr-search input:hover, .sr-search input:focus-visible { min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: var(--fs-3); }
.sr-search input::-webkit-search-cancel-button { display: none; }
.sr-search:hover { border-color: var(--t2); }
.sr-search:focus-within { border-color: var(--burgundy); box-shadow: 0 0 0 2px rgb(56 15 23 / .1); }

/* Filter buttons: label, then the chosen value; a chosen filter is burgundy on a tint. */
.sr-filter { position: relative; min-width: 0; }
.sr-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: var(--h-control); padding: 0 9px 0 11px; border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--s1); color: var(--t1); font-size: var(--fs-3); font-weight: 550; white-space: nowrap; }
.sr-trigger:hover { border-color: var(--control-line); background: #fffcf6; }
.sr-trigger .icon { width: 15px; height: 15px; color: var(--t3); }
.sr-trigger[aria-expanded=true] { border-color: var(--control-line); }
.sr-trigger-value { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.sr-trigger-value:empty { display: none; }
.sr-trigger-value::before { content: "·"; margin-right: 6px; color: var(--t3); font-weight: 400; }
.sr-trigger[data-active] { background: var(--accent-tint); border-color: rgb(56 15 23 / .22); color: var(--burgundy); }
.sr-trigger[data-active] .icon, .sr-trigger[data-active] .sr-trigger-value::before { color: var(--burgundy); }
.sr-mode legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-clear { min-height: var(--h-control); }
.sr-clear[hidden], .sr-open-count[hidden] { display: none; }

/* Panel under a filter button */
.sr-pop { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; display: none; gap: 4px; width: 288px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.sr-filter.is-open .sr-pop { display: grid; }
.sr-filter-sort .sr-pop { left: auto; right: 0; width: 210px; }
.sr-pop-search { display: flex; align-items: center; gap: 8px; margin: -6px -6px 0; padding: 0 12px; border-bottom: 1px solid var(--line-soft); color: var(--t3); }
.sr-pop-search .icon { width: 16px; height: 16px; }
.sr-pop-search input, .sr-pop-search input:hover, .sr-pop-search input:focus-visible { min-height: 38px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: var(--fs-3); }
.sr-pop-search input::-webkit-search-cancel-button { display: none; }
.sr-pop-tools { display: flex; align-items: center; gap: 8px; padding: 6px 4px 4px; }
.sr-pop-tools .button[aria-pressed=true] { background: var(--accent-tint); border-color: rgb(56 15 23 / .22); color: var(--burgundy); }
.sr-options { display: grid; margin: 0; padding: 0; list-style: none; max-height: 300px; overflow-y: auto; }
.sr-group { padding: 8px 9px 3px; color: var(--t3); font-size: var(--fs-1); font-weight: 650; }
.sr-option { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 34px; padding: 5px 9px;
  border-radius: 6px; color: var(--t1); font-size: var(--fs-3); cursor: pointer; }
.sr-option:hover { background: var(--s2); }
.sr-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.sr-option input[type=checkbox]:focus-visible { outline: none; }
.sr-option-text { display: grid; min-width: 0; line-height: 1.3; }
.sr-option-text small { color: var(--t3); font-size: var(--fs-1); }
.sr-option-count { color: var(--t3); font-size: var(--fs-1); }
.sr-option.is-disabled { color: var(--t3); cursor: default; opacity: .6; }
.sr-option.is-disabled:hover { background: transparent; }
/* Single choice: the radio is hidden and a tick marks the chosen row (burgundy). */
.sr-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.sr-option input[type=radio] + .icon { width: 16px; height: 16px; color: var(--burgundy); visibility: hidden; }
.sr-option input[type=radio]:checked + .icon { visibility: visible; }
.sr-option:has(input:checked) { color: var(--burgundy); font-weight: 600; }

/* Result head: the count on the left, the view quota and the sort on the right. */
.sr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: var(--h-control); }
.sr-total { color: var(--t2); font-size: var(--fs-3); }
.sr-total .mono { color: var(--t1); font-weight: 600; }
.sr-quota { color: var(--t3); font-size: var(--fs-2); }
.sr-quota a { color: var(--t2); }
.sr-quota a:hover { color: var(--burgundy); }
.sr-filter-sort { margin-left: auto; }
.sr-filter-sort .sr-trigger { border-color: transparent; background: transparent; color: var(--t2); }
.sr-filter-sort .sr-trigger:hover, .sr-filter-sort .sr-trigger[aria-expanded=true] { background: var(--hover); color: var(--t1); }
.sr-filter-sort .sr-trigger-value { color: var(--t1); }
.sr-filter-sort .sr-trigger-value::before { content: none; }

/* The cause list: one panel, a heading per task day, aligned columns. */
.sr-list { container-type: inline-size; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.sr-day + .sr-day { border-top: 1px solid var(--line-soft); }
.sr-day-head { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px 5px; font-size: var(--fs-2); font-weight: 650; }
.sr-day-head span:not(.section-count) { color: var(--t3); font-weight: 500; }
.sr-day-head .section-count { font-size: var(--fs-1); }
.sr-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.sr-rows > li + li { border-top: 1px solid var(--line-soft); }
.sr-day .sr-rows { padding-bottom: 2px; }
.sr-day .sr-rows > li + li { border-top-color: rgb(228 216 198 / .6); }
.sr-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 132px minmax(96px, 150px) 84px; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px;
  color: var(--t1); text-decoration: none; }
.sr-row:hover { background: #fffcf6; }
.sr-row:focus-visible { outline-offset: -2px; border-radius: var(--r-3); }
.sr-when { display: grid; align-self: start; padding-top: 1px; line-height: 1.35; }
.sr-when .mono { font-size: var(--fs-2); font-weight: 600; }
.sr-when small { color: var(--t3); font-size: var(--fs-1); white-space: nowrap; }
.sr-sub { display: contents; }
.sr-left { display: grid; line-height: 1.3; }
.sr-left-time { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-left-time .icon { width: 13px; height: 13px; color: var(--t3); }
.sr-left small { color: var(--t3); font-size: var(--fs-1); white-space: nowrap; }
.sr-left.is-soon .sr-left-time, .sr-left.is-soon .icon { color: var(--red); }
.sr-left.is-near .sr-left-time, .sr-left.is-near .icon { color: var(--amber); }
.sr-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.sr-tags .tag { white-space: nowrap; }
.sr-row .money { justify-self: end; font-size: var(--fs-3); }

/* Narrow list (tablet, phone, or a narrow window beside the side menu): two lines per row. */
@container (max-width: 640px) {
  .sr-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 12px; }
  .sr-when { grid-row: 1 / span 2; }
  .sr-row .row-main { grid-column: 2; }
  .sr-row .money { grid-column: 3; grid-row: 1; align-self: start; }
  .sr-row .row-title, .sr-row .row-meta { white-space: normal; }
  .sr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; grid-column: 2 / -1; margin-top: 3px; }
  .sr-left { display: flex; align-items: baseline; gap: 6px; }
  .sr-day-head { padding-inline: 12px; }
}

/* Phones: search and a "Filtrele" button; the filters open in a bottom sheet. */
@media (max-width: 590px) {
  .sr-tools { flex-wrap: nowrap; }
  .sr-search { flex: 1; width: auto; height: 40px; }
  .sr-search input, .sr-search input:hover, .sr-search input:focus-visible { font-size: 16px; }
  .sr-open { display: inline-flex; flex: none; min-height: 40px; }
  .sr-open-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--burgundy); color: var(--cream); font-size: .7rem; line-height: 18px; text-align: center; }
  .sr-sheet { display: none; }
  .sr-page.is-sheet .sr-sheet { position: fixed; z-index: 20; inset: auto 0 0; display: grid; flex: none; gap: 20px; max-height: 88dvh; padding: 0 16px; overflow-y: auto;
    overscroll-behavior: contain; background: var(--s1); border-radius: 12px 12px 0 0; box-shadow: 0 -12px 40px -16px rgb(37 43 43 / .45); }
  .sr-page.is-sheet .sr-backdrop, .sr-page.has-pop .sr-backdrop { position: fixed; z-index: 19; inset: 0; display: block; background: rgb(37 43 43 / .38); }
  .sr-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-inline: -16px; padding: 10px 8px 8px 16px;
    background: var(--s1); border-bottom: 1px solid var(--line-soft); }
  .sr-sheet-head h2 { font-size: var(--fs-4); }
  .sr-sheet-foot { position: sticky; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-inline: -16px;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: var(--s1); border-top: 1px solid var(--line-soft); }
  .sr-sheet-foot .primary { width: 100%; }
  .sr-sheet .sr-trigger, .sr-sheet .sr-clear { display: none; }
  .sr-sheet .sr-pop { position: static; display: grid; width: auto; max-width: none; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .sr-sheet .sr-pop-title, .sr-mode legend { position: static; display: block; width: auto; height: auto; margin-bottom: 4px; overflow: visible; clip-path: none;
    color: var(--t1); font-size: var(--fs-3); font-weight: 650; }
  .sr-sheet .sr-pop-search { margin: 0 0 2px; padding: 0 10px; border: 1px solid var(--control-line); border-radius: var(--r-2); }
  .sr-sheet .sr-pop-search input { min-height: 38px; font-size: 16px; }
  .sr-sheet .sr-options { max-height: none; overflow: visible; }
  .sr-option { min-height: 42px; }
  .sr-mode .choice-group.segmented .choices { display: flex; width: 100%; }
  .sr-mode .choice { flex: 1; }
  .sr-mode .choice-face { justify-content: center; min-height: 32px; }
  /* The sort panel opens as a small bottom sheet. */
  .sr-filter-sort .sr-pop { position: fixed; z-index: 20; inset: auto 0 0; top: auto; width: auto; max-width: none; padding: 10px 12px max(14px, env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0; }
  .sr-filter-sort .sr-pop-title { display: block; padding: 2px 9px 6px; font-size: var(--fs-3); font-weight: 650; }
  .sr-head { gap: 2px 10px; }
  .sr-quota { order: 3; flex-basis: 100%; }
  body.sr-lock { overflow: hidden; }
}
/* ---- Yardım ve Destek ---------------------------------------------------------------------------------- */
/* Help centre (#support). Main column: search, topic index, answers, legal texts. Side column:
   the account's requests and the new-request form. The side column comes second in the DOM so
   phones show requests right after the search; on wide screens it spans every row on the right. */
.help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto auto 1fr; column-gap: 30px;
  grid-template-areas: "search side" "topics side" "answers side" "legal side"; align-items: start; }
.help-search { display: block; grid-area: search; }
.help-topics { grid-area: topics; margin-top: 12px; }
.help-answers { grid-area: answers; margin-top: 30px; }
.help-legal { grid-area: legal; margin-top: 32px; }
.help-grid [hidden] { display: none; }
.help-side { grid-area: side; display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Search: the page's entry point. Own clear button; the browser's one is hidden. */
.help-search-box { position: relative; display: flex; align-items: center; }
.help-search-box > .icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--t3); pointer-events: none; }
.help-search-box input { height: 40px; padding: 6px 44px 6px 38px; }
.help-search-box input::-webkit-search-cancel-button { appearance: none; display: none; }
.help-clear { position: absolute; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--t3); cursor: pointer; }
.help-clear .icon { width: 16px; height: 16px; }
.help-clear:hover { background: var(--hover); color: var(--t1); }
.help-key { position: absolute; right: 11px; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--s0); color: var(--t3); font: 600 var(--fs-1)/18px var(--mono); text-align: center; pointer-events: none; }
.help-search-box:focus-within .help-key, .help-clear:not([hidden]) + .help-key { display: none; }
@media (pointer: coarse), (max-width: 590px) { .help-key { display: none; } }

/* Topic index: six thin rows in a hairline grid; the chosen topic in the selection tint. */
.help-topics ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.help-topics li { display: grid; background: var(--s1); }
.help-topic { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 11px; color: var(--t1); font-size: var(--fs-3); font-weight: 550;
  line-height: 1.3; text-decoration: none; }
.help-topic > .icon { flex: none; width: 17px; height: 17px; color: var(--t3); }
.help-topic .section-count { margin-left: auto; padding-left: 6px; }
.help-topic:hover { background: #fffcf6; }
.help-topic:focus-visible { outline-offset: -2px; }
.help-topic[aria-current] { background: var(--accent-tint); color: var(--burgundy); }
.help-topic[aria-current] > .icon, .help-topic[aria-current] .section-count { color: var(--burgundy); }
.help-topic.is-none { color: var(--t3); }

/* Answers: grouped by topic, one row list per group, own chevron on the right. */
#help-faq-body { display: grid; gap: 22px; }
.help-group { display: grid; gap: 8px; min-width: 0; }
.help-group-head { display: flex; align-items: center; gap: 7px; color: var(--t2); font-size: var(--fs-2); font-weight: 650; }
.help-group-head .icon { width: 15px; height: 15px; color: var(--t3); }
.help-faq-list { background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.help-faq + .help-faq { border-top: 1px solid var(--line-soft); }
.help-lead { display: grid; flex: none; place-items: center; color: var(--t3); }
.help-lead .icon { width: 16px; height: 16px; }
.help-q { flex: 1; min-width: 0; }
.help-faq > summary { justify-content: space-between; gap: 12px; min-height: 48px; padding: 11px 14px; font-weight: 600; line-height: 1.4; }
.help-faq > summary::before { display: none; }
.help-faq > summary > .icon { flex: none; width: 16px; height: 16px; color: var(--t3); transition: transform .15s; }
.help-faq > summary:hover { background: #fffcf6; color: var(--t1); }
.help-faq > summary:focus-visible { outline-offset: -2px; border-radius: var(--r-3); }
.help-faq[open] > summary > .icon { transform: rotate(180deg); color: var(--burgundy); }
.help-a { display: grid; gap: 8px; padding: 0 14px 14px; color: var(--t2); font-size: var(--fs-3); line-height: 1.55; }
.help-a > p:not(.help-basis) { max-width: 74ch; }
.help-faq mark { padding-inline: 1px; border-radius: 2px; background: rgb(56 15 23 / .1); color: inherit; }
/* Basis: where the rule lives. Opens the legal text at the cited article. */
.help-basis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: var(--fs-2); line-height: 1.4; }
.help-basis > span { color: var(--t3); }
.help-basis .more { margin-left: auto; }
.legal-body .help-cited { margin-inline: -8px; padding: 4px 8px; border-radius: var(--r-2); background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--burgundy); }

/* Requests: row list in the side column; the request text under its title. */
.help-side .rowlink { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; padding-inline: 12px; }
.help-side .row-title, .help-side .row-meta { white-space: normal; }
.help-side .row-meta .num { white-space: nowrap; }
.help-req-note { margin-top: 3px; color: var(--t2); font-size: var(--fs-2); line-height: 1.45; }
.help-side div.rowlink:focus { outline: none; }
.help-speed { display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; }
.help-speed .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--amber); }
.help-speed strong { color: var(--t1); font-weight: 600; }
.help-new .icon { width: 16px; height: 16px; }

/* New request form: topics as a single-column list of rows, the selected row in burgundy. */
.help-compose { display: grid; gap: 14px; }
.help-compose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-compose-head h2 { font-size: var(--fs-4); font-weight: 650; }
.help-topic-choice .choices { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--control-line); border-radius: var(--r-2); overflow: hidden; background: var(--s1); }
.help-topic-choice .choice-face { min-height: 36px; gap: 9px; padding: 6px 34px 6px 10px; border: 0; border-radius: 0; background: transparent; font-size: var(--fs-3); }
.help-topic-choice .choice + .choice .choice-face { border-top: 1px solid var(--line-soft); }
.help-topic-choice .choice-face > .icon:first-child { width: 16px; height: 16px; color: var(--t3); }
.help-topic-choice .choice-face > .icon:last-child { top: 50%; margin-top: -7px; }
.help-topic-choice .choice:hover .choice-face { border-color: var(--line-soft); background: #fffcf6; }
.help-topic-choice .choice input:checked + .choice-face { border-color: var(--line-soft); background: var(--accent-tint); box-shadow: none; color: var(--burgundy); font-weight: 600; }
.help-topic-choice .choice input:checked + .choice-face > .icon:first-child { color: var(--burgundy); }
.help-topic-choice .choice input:focus-visible + .choice-face { outline-offset: -2px; }
.help-locked { margin-top: 6px; }
.help-route { padding: 8px 10px; border-radius: var(--r-2); background: var(--s2); color: var(--t2); font-size: var(--fs-2); line-height: 1.45; }
.help-route a { color: var(--burgundy); font-weight: 600; }

/* Legal texts: rows that open the document sheet. */
.help-doc { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.help-legal .row-go .icon { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .help-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "search" "side" "topics" "answers" "legal"; }
  .help-side { margin-top: 24px; }
  .help-topics { margin-top: 28px; }
}
@media (max-width: 590px) {
  .help-topics ul { grid-template-columns: minmax(0, 1fr); }
  .help-legal .rowlink { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .help-legal .rowlink .row-trail { grid-column: auto; margin-top: 0; }
  .help-faq > summary { padding: 11px 12px; }
  .help-a { padding: 0 12px 13px; }
  .help-basis .more { margin-left: 0; }
}

/* ==== Law mode (H1): top bar switch, numbered markers, note panel ===============================
   Markers sit in one absolutely positioned layer, so the page never moves; nothing shows while
   the mode is off. The panel is a quiet side column on desktop (it pushes the workspace from
   1180 px up) and a bottom sheet on phones. Editorial: citation in small caps, readable answer. */
.law-toggle { display: inline-flex; align-items: center; gap: 6px; height: var(--h-control); padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; color: var(--t2); font-size: var(--fs-3); font-weight: 550; white-space: nowrap; }
.law-toggle:hover { background: var(--hover); color: var(--t1); }
.law-toggle[aria-pressed=true] { border-color: rgb(56 15 23 / .22); background: var(--accent-tint); color: var(--burgundy); }
.law-glyph { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; line-height: 1; }
.law-toggle-count { min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--burgundy); color: var(--cream); font-size: .7rem; font-weight: 650; line-height: 18px; text-align: center; }

.law-layer { position: absolute; z-index: 11; top: 0; left: 0; width: 0; height: 0; display: none; }
body.law-on .law-layer { display: block; }
.law-marker { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--burgundy); border-radius: 50%;
  background: var(--s1); color: var(--burgundy); font-family: var(--mono); font-size: .66rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg); cursor: pointer; }
.law-marker::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.law-marker:hover { background: var(--accent-tint); }
.law-marker.is-current { background: var(--burgundy); color: var(--cream); }
.law-marker:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.law-focus { position: absolute; border: 1.5px dashed rgb(56 15 23 / .55); border-radius: var(--r-2); pointer-events: none; }
.law-float { display: none; }
body.law-open .law-float { display: none !important; }
body.law-on.auth-mode .law-float, body.law-on.landing-mode .law-float { position: fixed; z-index: 26; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: inline-flex;
  align-items: center; gap: 6px; height: var(--h-control); padding: 0 12px; border: 1px solid rgb(56 15 23 / .22); border-radius: var(--r-2); background: var(--s1);
  color: var(--burgundy); font-size: var(--fs-2); font-weight: 600; box-shadow: var(--shadow-pop); }

.law-panel { position: fixed; z-index: 26; top: 0; right: 0; bottom: 0; width: 360px; display: flex; flex-direction: column; background: var(--s1);
  border-left: 1px solid var(--line-soft); }
.law-panel[hidden] { display: none; }
.law-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 10px 0 22px; border-bottom: 1px solid var(--line-soft); }
.law-kicker { color: var(--t3); font-size: var(--fs-2); font-weight: 600; }
.law-kicker .mono { margin-left: 4px; color: var(--t2); }
.law-close { width: var(--h-control); padding: 0; justify-content: center; }
.law-body { flex: 1; display: grid; align-content: start; gap: 16px; padding: 20px 22px 28px; overflow-y: auto; overscroll-behavior: contain; }
.law-body:focus { outline: none; }
.law-body:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.law-body h2 { font-size: var(--fs-6); font-weight: 650; line-height: 1.22; letter-spacing: -.02em; }
/* Citations keep their own case everywhere ("m.4/2(ç)", never "M.4/2(Ç)"). */
.law-cite { margin-top: -8px; font-size: var(--fs-4); font-weight: 600; }
.law-cite a { color: var(--burgundy); text-decoration-thickness: 1px; }
.law-away { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: var(--r-2); background: var(--s2); color: var(--t2); font-size: var(--fs-2); }
.law-block { display: grid; gap: 4px; }
.law-block h3 { color: var(--t3); font-size: var(--fs-2); font-weight: 600; }
.law-block p { color: var(--t1); font-size: var(--fs-4); line-height: 1.6; }
.law-ask { padding-left: 12px; border-left: 2px solid var(--burgundy); }
.law-ask p { color: var(--t2); }
.law-sources { color: var(--t3); font-size: var(--fs-2); }
.law-sources a { color: var(--t2); }
.law-steps { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; }
.law-steps .button { gap: 2px; }
.law-steps .icon { width: 15px; height: 15px; }
.law-list { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.law-list h3, .law-index summary { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-3); font-weight: 650; }
.law-list ol { display: grid; gap: 1px; margin: 0 -8px; padding: 0; list-style: none; }
.law-list button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; gap: 0 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--t1); font-size: var(--fs-3); text-align: left; }
.law-list button:hover { background: var(--hover); }
.law-list button[aria-current] { background: var(--accent-tint); color: var(--burgundy); }
.law-list small { grid-column: 2; color: var(--t3); font-size: var(--fs-1); }
.law-num { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; font-size: .66rem; font-weight: 650; }
.law-index { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.law-index summary { cursor: pointer; }
.law-index > ul { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.law-index h4 { margin: 0 0 2px; color: var(--t3); font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; }
.law-index ul ul { display: grid; gap: 1px; margin: 0 -8px; padding: 0; list-style: none; }
.law-index a { display: grid; gap: 0; padding: 5px 8px; border-radius: var(--r-2); color: var(--t1); font-size: var(--fs-3); text-decoration: none; }
.law-index a:hover { background: var(--hover); }
.law-index a[aria-current] { color: var(--burgundy); font-weight: 600; }
.law-index a small { color: var(--t3); font-size: var(--fs-1); font-weight: 400; }
.law-foot { color: var(--t3); font-size: var(--fs-1); }
.law-foot .text-button { font-size: inherit; }

@media (min-width: 1180px) {
  body.law-open .workspace { margin-right: 360px; }
}
@media (min-width: 801px) and (max-width: 1179px) {
  .law-panel { box-shadow: var(--shadow-pop); }
}
@media (max-width: 800px) {
  .law-toggle { width: 38px; padding: 0; justify-content: center; position: relative; }
  .law-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .law-toggle-count { position: absolute; top: 2px; right: 0; min-width: 16px; line-height: 16px; box-shadow: 0 0 0 2px var(--bg); }
  .law-panel { top: auto; left: 0; width: auto; max-height: 58dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 40px -16px rgb(37 43 43 / .45); }
  .law-head { min-height: 46px; padding-left: 16px; }
  .law-body { padding: 14px 16px max(20px, env(safe-area-inset-bottom)); gap: 14px; }
  .law-body h2 { font-size: 1.25rem; }
  body.law-open .workspace { padding-bottom: 58dvh; }
  body.law-on.auth-mode .law-float, body.law-on.landing-mode .law-float { bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media print {
  .law-layer, .law-panel, .law-toggle, .law-float { display: none !important; }
  body.law-open .workspace { margin-right: 0; padding-bottom: 0; }
}

/* ==== Guided tour (H5) ==========================================================================
   Presentation mode in tour.js: a soft veil with a rounded opening around the element in focus and
   a bubble beside it (a bottom sheet on phones). Blocks catch clicks outside the opening only. */
.tour-launch { gap: 6px; padding-inline: 10px; font-size: var(--fs-3); }
.tour-launch .icon { width: 17px; height: 17px; color: var(--burgundy); }
body.tour-on .tour-launch { visibility: hidden; }
/* During the tour the law markers stay pressable above the veil and the law panel opens above it;
   the bubble keeps clear of the panel (tour.js, bubbleEdge). */
body.tour-on .law-layer { z-index: 61; }
body.tour-on .law-panel { z-index: 63; }
body.tour-on { padding-bottom: var(--tour-room, 0px); }
.tour[hidden] { display: none; }
.tour-block { position: fixed; z-index: 60; }
.tour-ring { position: fixed; z-index: 61; pointer-events: none; border-radius: var(--r-3);
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px rgb(56 15 23 / .62), 0 0 0 200vmax rgb(37 27 25 / .44);
  transition: left .28s cubic-bezier(.3, .7, .2, 1), top .28s cubic-bezier(.3, .7, .2, 1), width .28s cubic-bezier(.3, .7, .2, 1), height .28s cubic-bezier(.3, .7, .2, 1); }
.tour-ring.is-empty { box-shadow: 0 0 0 200vmax rgb(37 27 25 / .44); }
/* A step's far control (tour.js `mark`) gets its own thin ring; the page between it and the light stays dark. */
.tour-mark { position: fixed; z-index: 61; pointer-events: none; border-radius: var(--r-2); box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px rgb(56 15 23 / .62); }
.tour.is-ending .tour-marks { display: none; }
.tour.is-ending .tour-ring { box-shadow: 0 0 0 200vmax rgb(37 27 25 / .5); }
.tour-pop { position: fixed; z-index: 62; display: grid; gap: 10px; width: min(372px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 14px 16px 14px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
  transition: left .28s cubic-bezier(.3, .7, .2, 1), top .28s cubic-bezier(.3, .7, .2, 1); }
.tour-pop:focus { outline: none; }
.tour-pop.is-in { animation: tour-in .2s ease-out; }
@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tour-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tour-count { flex: none; font-family: var(--mono); font-size: var(--fs-2); font-variant-numeric: tabular-nums; color: var(--burgundy); font-weight: 600; }
.tour-where { flex: 1; min-width: 0; overflow: hidden; color: var(--t3); font-size: var(--fs-2); white-space: nowrap; text-overflow: ellipsis; }
.tour-x { flex: none; width: var(--h-small); min-height: var(--h-small); padding: 0; margin: -4px -6px -4px 0; }
.tour-x .icon { width: 16px; height: 16px; }
.tour-bar { height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.tour-bar span { display: block; height: 100%; background: var(--burgundy); transition: width .28s ease; }
.tour-pop h2 { font-size: var(--fs-5); line-height: 1.3; }
.tour-body { color: var(--t1); font-size: var(--fs-3); line-height: 1.5; }
.tour-why { display: grid; gap: 2px; padding: 9px 11px; border-left: 2px solid var(--burgundy); border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--s2);
  color: var(--t2); font-size: var(--fs-2); line-height: 1.5; }
.tour-why span { color: var(--burgundy); font-size: var(--fs-1); font-weight: 650; }
.tour-foot { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.tour-foot .grow { flex: 1; }
.tour-end { width: min(420px, calc(100vw - 24px)); padding: 18px 18px 16px; }
.tour-end h2 { font-size: var(--fs-6); }
.tour-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.tour-end-actions .quiet { margin-left: auto; }
@media (max-width: 800px) {
  .tour-launch { width: 38px; min-height: 38px; padding: 0; }
  .tour-launch span { display: none; }
}
@media (max-width: 590px) {
  .tour-pop.is-sheet, .tour-end.is-sheet { inset: auto 0 0 0; width: 100%; max-height: 62dvh; padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 14px 14px 0 0; transition: none; }
  .tour-pop.is-sheet::before { content: ""; justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--line); }
  .tour-pop.is-sheet.is-in { animation-name: tour-up; }
  .tour-foot .button { min-height: 38px; }
  .tour-end-actions { display: grid; }
  .tour-end-actions .button { width: 100%; }
  .tour-end-actions .quiet { margin-left: 0; }
}
@keyframes tour-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-pop, .tour-bar span { transition: none; }
  .tour-pop.is-in, .tour-pop.is-sheet.is-in { animation: none; }
}

/* ==== Top bar when it runs short (U) ==============================================================
   The bar measures itself, not the window: the law panel narrows it on desktop, a phone narrows it
   everywhere. Below 760 px the tour and law switches keep only their icons and the account label
   goes; below 560 px only the current crumb stays and the account menu shrinks to its avatar (Linear,
   Notion mobile). The data-tour hooks stay on the same elements. */
.topbar { container: topbar / inline-size; }
.top-avatar { display: none; }
@container topbar (max-width: 760px) {
  .tour-launch { width: 38px; padding: 0; justify-content: center; }
  .tour-launch span { display: none; }
  .law-toggle { position: relative; width: 38px; padding: 0; justify-content: center; }
  .law-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .law-toggle-count { position: absolute; top: 2px; right: 0; min-width: 16px; line-height: 16px; box-shadow: 0 0 0 2px var(--bg); }
  .top-account .field-label { display: none; }
}
@container topbar (max-width: 560px) {
  .crumbs li:not(:last-child) { display: none; }
  .crumbs li + li::before { content: none; }
  .top-account .picker-trigger { width: 38px; min-height: 38px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .top-account .picker-trigger:hover { border-color: transparent; background: var(--hover); }
  .top-account .picker-value, .top-account .picker-trigger > .icon { display: none; }
  .top-account .top-avatar { display: grid; }
  .top-account.is-current .picker-trigger { background: var(--accent-tint); }
  .top-account.is-current .top-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--burgundy); }
}
.authority-none { display: flex; align-items: center; gap: 6px; padding: 0 2px; }

/* ==== Install guide, phone strip and device notifications (PWA, lane D) ======================== */
/* App page (#uygulama): icon and name, two numbered steps with their state, "Telefonda aç" on
   desktop. Signed out it sits under the landing page's plain bar (.app-bare). */
.app-page { display: grid; gap: 20px; max-width: 680px; }
.app-head { display: flex; align-items: center; gap: 14px; }
.app-icon { flex: none; width: 56px; height: 56px; border: 1px solid var(--line-soft); border-radius: 13px; }
.app-title { display: grid; gap: 2px; min-width: 0; }
.app-title h1 { margin: 0; font-size: var(--fs-6); line-height: 1.2; }
.app-title p { margin: 0; color: var(--t3); font-size: var(--fs-2); overflow-wrap: anywhere; }
.app-steps { display: grid; margin: 0; padding: 0; list-style: none; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.app-step { display: grid; gap: 8px; padding: 18px; }
.app-step + .app-step { border-top: 1px solid var(--line-soft); }
.app-step-no { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--control-line); border-radius: 50%; background: var(--s0);
  color: var(--t1); font-size: var(--fs-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.app-step-no .icon { width: 15px; height: 15px; }
.app-step.is-done .app-step-no { border-color: transparent; background: var(--success-bg); color: var(--success); }
.app-step-body { display: grid; gap: 8px; min-width: 0; padding-left: 42px; }
.app-step-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; }
.app-step-head h2 { margin: 0; font-size: var(--fs-4); font-weight: 650; line-height: 1.35; }
.app-step-head h2:focus { outline: none; }
.app-step-trail { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.app-step-trail .tag .icon { width: 13px; height: 13px; }
.app-step-meta { margin: 0; color: var(--t2); font-size: var(--fs-3); line-height: 1.5; }
.app-step-note { margin: 2px 0 0; color: var(--t3); font-size: var(--fs-2); line-height: 1.45; }
.app-step .install-steps { margin-top: 2px; background: none; }
.app-step .install-more summary { width: fit-content; }
.app-share { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.app-share > .row-lead { padding-top: 2px; color: var(--t2); }
.app-share > .row-lead .icon { width: 19px; height: 19px; }
.app-share-main { display: grid; gap: 4px; min-width: 0; }
.app-share h2 { margin: 0; font-size: var(--fs-4); font-weight: 650; }
.app-url { margin: 2px 0 0; color: var(--t1); font-size: var(--fs-3); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.app-bare-in { padding-block: clamp(28px, 6vw, 56px) 24px; }
.app-bare .app-page { margin-inline: auto; }
/* The landing bar's app link: icon and label, the icon alone where the bar is short of room. */
.lp-bar .lp-app { gap: 6px; padding-inline: 10px; font-size: var(--fs-3); }
.lp-app .icon { width: 17px; height: 17px; color: var(--burgundy); }
@media (min-width: 981px) and (max-width: 1200px), (max-width: 590px) {
  .lp-bar .lp-app { width: 38px; padding: 0; justify-content: center; }
  .lp-app span { display: none; }
}
.push-section + .stack { margin-top: 24px; }
.push-panel { background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); overflow: hidden; }
.device-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 56px; padding: 10px 14px; }
.device-row .row-title, .device-row .row-meta { white-space: normal; }
.device-row .row-trail { flex-wrap: wrap; }
.install-steps { display: grid; margin: 0; padding: 0; list-style: none; background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.install-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 11px 14px; font-size: var(--fs-3); line-height: 1.5; }
.install-steps li + li { border-top: 1px solid var(--line-soft); }
.install-steps b { color: var(--t1); font-weight: 650; }
.install-no { color: var(--t3); font-weight: 650; font-variant-numeric: tabular-nums; }
.push-panel .install-steps { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; }
.install-more summary { padding: 4px 0; color: var(--t2); font-size: var(--fs-2); cursor: pointer; }
.install-more .install-steps { margin-top: 8px; }
.install-strip { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 6px 8px 12px;
  background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.install-strip img { width: 24px; height: auto; }
.install-strip p { display: grid; gap: 1px; min-width: 0; margin: 0; font-size: var(--fs-3); line-height: 1.35; }
.install-strip strong { font-weight: 600; }
.install-strip span { color: var(--t3); font-size: var(--fs-2); }
.install-strip .strip-close { width: 32px; padding: 0; justify-content: center; }
.install-strip .strip-close .icon { width: 16px; height: 16px; }
@media (max-width: 590px) {
  .device-row { grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; }
  .device-row .row-trail { grid-column: 2; justify-content: flex-start; gap: 6px 8px; margin-top: 6px; }
  .app-step { padding: 14px; }
  .app-step-head { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; }
  .app-step-trail { grid-column: 2; justify-content: flex-start; }
  .app-step-trail .button { flex: 1; }
  .app-step-body { padding-left: 40px; }
  .app-share { grid-template-columns: 20px minmax(0, 1fr); padding: 14px; }
  .app-share > .button { grid-column: 1 / -1; margin-top: 8px; }
}

/* ==== About (#hakkimizda) ====================================================================== */
/* Two founder cards, photo beside the text; stacked on phones. Signed out it sits under the
   landing page's plain bar (.app-bare), like the app page. */
.about-page { display: grid; gap: 28px; max-width: 920px; }
.app-bare .about-page { margin-inline: auto; }
.about-head h1 { max-width: 24ch; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; }
.about-head > p:last-child { max-width: 62ch; color: var(--t2); font-size: var(--fs-4); line-height: 1.55; }
.about-eyebrow { margin: 0 0 4px; color: var(--burgundy); font-size: var(--fs-2); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.about-people { display: grid; gap: 20px; }
.about-person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px;
  background: var(--s1); border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2, 10px); background: var(--s0); }
.about-text { display: grid; gap: 12px; min-width: 0; }
.about-text header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.about-text h2 { margin: 0; flex-basis: 100%; font-size: var(--fs-6); line-height: 1.2; }
.about-role { margin: 0; color: var(--t2); font-size: var(--fs-3); }
.about-text > p { margin: 0; color: var(--t1); font-size: var(--fs-4); line-height: 1.62; max-width: 64ch; }
.about-close { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--r-3); }
.about-close h2 { margin: 0; font-size: var(--fs-4); font-weight: 650; }
.about-close p { margin: 0; color: var(--t2); line-height: 1.55; max-width: 64ch; }
@media (max-width: 640px) {
  .about-person { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .about-photo { width: min(220px, 70%); }
}