/* ── FONT FACES (self-hosted, CSP: style-src 'self') ──────────────── */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2 supports variations"),
       url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2 supports variations"),
       url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2 supports variations"),
       url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Page & surface */
  --page-bg:       #f8fafc;
  --panel:         #f1f5f9;
  --inset:         #e2e8f0;
  --border:        #cbd5e1;
  --border-strong: #94a3b8;

  /* Text */
  --text-strongest: #0f172a;
  --text-strong:    #1e293b;
  --text-mid:       #334155;
  --text-muted:     #64748b;

  /* Brand / Indigo */
  --brand:       #4f46e5;
  --brand-hover: #4338ca;
  --brand-soft:  #eef2ff;
  --focus-ring:  #6366f1;

  /* Status */
  --success-text: #15803d;
  --success-bg:   #f0fdf4;
  --success-border: #86efac;
  --error-text:   #b91c1c;
  --error-bg:     #fef2f2;
  --error-border: #fca5a5;

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", monospace;

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  16px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;

  /* Max width */
  --max-w: 1240px;
  --gutter: 48px;
}

/* ── RESET & BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  scrollbar-color: var(--border-strong) var(--panel);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--panel); }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--panel); border-radius: 6px; }

::selection { background: var(--brand-soft); color: var(--brand); }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; }
input, select, textarea { caret-color: var(--brand); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ── SKIP LINK ────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100;
  padding: 10px 16px;
  background: var(--text-strongest);
  color: var(--page-bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.15s;
}
.skip-link:focus { transform: translateY(0); }

/* ── LAYOUT SHELL ─────────────────────────────────────────────────── */
.site-header,
main,
.site-footer { width: min(var(--max-w), calc(100% - var(--gutter))); margin-inline: auto; }

/* ── HEADER ───────────────────────────────────────────────────────── */
.site-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-strongest);
}
.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-strongest);
}
.brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}
.header-link:hover { color: var(--text-strongest); text-decoration: underline; }
.header-link--support { color: var(--brand); font-weight: 600; }
.header-link--support:hover { color: var(--brand-hover); }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.lang-sep { color: var(--border-strong); font-size: 11px; }
.lang-btn {
  border: 0;
  background: transparent;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.lang-btn[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}
.lang-btn:hover:not([aria-pressed="true"]) { background: var(--inset); color: var(--text-strong); }

/* ── STEPPER ──────────────────────────────────────────────────────── */
.stepper {
  padding: 28px 0 0;
}
.stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.stepper-connector {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 24px;
}
.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  background: var(--page-bg);
  color: var(--text-muted);
  position: relative;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.step-num { font-size: 13px; font-weight: 600; }
.step-check { display: none; width: 14px; height: 14px; }
.step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s;
}

/* Active step */
.stepper-item[aria-current="step"] .step-circle {
  border-color: var(--brand);
  color: var(--brand);
  border-width: 2px;
}
.stepper-item[aria-current="step"] .step-label { color: var(--brand); font-weight: 600; }

/* Completed step */
.stepper-item.is-done .step-circle {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.stepper-item.is-done .step-num { display: none; }
.stepper-item.is-done .step-check { display: block; }
.stepper-item.is-done .step-label { color: var(--text-mid); }
.stepper-item.is-done + .stepper-connector { background: var(--brand); }

/* ── UPLOAD SECTION ───────────────────────────────────────────────── */
.upload-section {
  padding-top: var(--space-3xl);
}
.intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  align-items: end;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}
.intro-text h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-strongest);
}
.intro-sub {
  margin: 18px 0 0;
  font-size: 18px;
  color: var(--text-mid);
  max-width: 56ch;
  line-height: 1.6;
}
.trust-note {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  align-self: start;
}

/* AI işleme aydınlatması */
.ai-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}
.ai-disclosure-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--border-strong);
}
.ai-disclosure-text { display: inline; }
.ai-disclosure-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-disclosure-link:hover { color: var(--brand-hover); }

/* Dropzone wrapper */
.dropzone-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Drop zone */
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--panel);
  cursor: pointer;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  transition: border-color 0.18s, background 0.18s;
}
.drop-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.drop-zone:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
  background: var(--brand-soft);
}

.drop-icon {
  width: 48px;
  height: 48px;
  color: var(--border-strong);
  margin-bottom: 6px;
}
.drop-zone.is-dragging .drop-icon,
.drop-zone:hover .drop-icon { color: var(--brand); }
.drop-main {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.drop-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.drop-button {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.drop-zone:hover .drop-button,
.drop-zone.is-dragging .drop-button { background: var(--brand-hover); }

.drop-error {
  padding: 12px 16px;
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 14px;
}

.sample-link {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.sample-link:hover { color: var(--brand-hover); }

/* Ready card */
.ready-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.ready-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--inset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ready-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
.ready-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ready-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ready-size { font-size: 12px; color: var(--text-muted); }
.ready-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.ready-remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  padding: 0;
}
.ready-remove:hover { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.ready-remove svg { width: 14px; height: 14px; }

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { cursor: wait; opacity: 0.55; }
.btn-full { width: 100%; margin-top: var(--space-lg); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-outline:hover { background: var(--inset); border-color: var(--brand); color: var(--brand); }
.btn-outline svg { width: 15px; height: 15px; }
.btn-outline.is-disabled,
.btn-outline[aria-disabled='true'] {
  cursor: default;
  opacity: 0.65;
}
.btn-outline.is-disabled:hover,
.btn-outline[aria-disabled='true']:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--inset); color: var(--text-strong); }

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-text {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.btn-text:hover { color: var(--brand-hover); }

/* ── PROCESSING SECTION ───────────────────────────────────────────── */
.processing-section {
  padding: var(--space-3xl) 0;
}
.processing-card {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--panel);
}
.processing-preview {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--inset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.processing-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.processing-body { flex: 1; min-width: 0; }
.scan-bar {
  position: relative;
  height: 3px;
  background: var(--inset);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.scan-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--brand);
  border-radius: 2px;
  animation: scan 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes scan { to { transform: translateX(163%); } }
.processing-status {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}
.processing-trust {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── REVIEW SECTION ───────────────────────────────────────────────── */
.review-section { padding-top: var(--space-4xl); }
.review-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.review-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-strongest);
}
.review-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
.model-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  overflow-wrap: anywhere;
  max-width: 30ch;
  flex-shrink: 0;
}

/* Review grid */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.1fr);
  gap: var(--space-xl);
  align-items: start;
}

/* Document preview */
.doc-preview {
  position: sticky;
  top: var(--space-lg);
  margin: 0;
}
.doc-preview #preview-slot img {
  display: block;
  width: 100%;
  max-height: 760px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--inset);
}
.doc-preview figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.doc-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-height: 320px;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--inset);
}
.doc-pdf .pdf-badge { font-size: 14px; padding: 10px 14px; }
.doc-pdf-note {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-body);
  color: var(--text-muted);
}

/* Record form */
.record-form {
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #fff;
}

/* ── FORM FIELDS ──────────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.field-label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
}
.span-two { grid-column: span 2; }

input:not([type="file"]):not([type="hidden"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--text-strong);
  padding: 10px 12px;
  transition: border-color 0.15s;
}
input:not([type="file"]):not([type="hidden"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}
input:not([type="file"]):not([type="hidden"]):not([type="month"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--border-strong); }
textarea { resize: vertical; }
.mono-input { font-family: var(--font-mono); font-size: 14px; }

/* Month filter */
#month-filter {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--text-strong);
  padding: 10px 12px;
  font-size: 14px;
}
#month-filter:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Record search (I1 — t_b54d1c03) */
.records-search-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  min-width: 220px;
}
#record-search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  color: var(--text-strong);
  padding: 10px 12px;
  font-size: 14px;
}
#record-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.record-limit-notice {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-mid);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* Line items — dinamik kalem tablosu */
.line-items {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.line-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.line-items-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.line-items-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.items-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.line-items-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.items-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}
.items-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.items-table th,
.items-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  background: #fff;
}
.items-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  white-space: nowrap;
}
.items-table tr:last-child td { border-bottom: 0; }
.items-table tr:hover td { background: var(--panel); }
.items-table td input {
  min-width: 108px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.items-table td input[type="text"] {
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 160px;
}
.items-table .items-td--actions,
.items-table .items-th--actions {
  width: 46px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.btn-remove-item {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-remove-item:hover { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.btn-remove-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn-remove-item svg { width: 13px; height: 13px; }
.items-empty {
  margin: var(--space-md) 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* Sütun görünürlük menüsü */
.columns-wrap { position: relative; }
.columns-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(300px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  padding: var(--space-md);
}
.columns-popover-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.columns-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 232px;
  overflow-y: auto;
}
.columns-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-strong);
  cursor: pointer;
}
.columns-item:hover { background: var(--panel); }
.columns-item input { width: 15px; height: 15px; accent-color: var(--brand); }
.columns-tip {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}
.columns-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-sm) 0;
}
.columns-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.columns-custom-row {
  display: flex;
  gap: 6px;
}
.columns-custom-row select { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }

/* Kayıt düzenleme: onay bölümü tek sütun (önizleme gizliyken) */
.review-grid--no-preview { grid-template-columns: 1fr; }

/* Form alt aksiyon satırı (Vazgeç + Kaydet) */
.form-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.form-actions-row .btn-full {
  flex: 1;
  margin-top: 0;
  min-width: 180px;
}

/* Kayıt listesi satır aksiyonları (düzenle + sil) */
.cell-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-row-action {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-row-action:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.btn-row-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn-row-action svg { width: 15px; height: 15px; }
.btn-row-action:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-remove-row:hover {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

/* Form message */
.form-message {
  min-height: 20px;
  margin-top: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}
.form-message:not(:empty) {
  padding: 12px 16px;
}
.form-message.is-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}
.form-message.is-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
.form-message-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.form-auth-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ── RECORDS SECTION ──────────────────────────────────────────────── */
.records-section {
  padding-top: var(--space-4xl);
  padding-bottom: 100px;
}
.records-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.records-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-strongest);
}
.record-count {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.record-actions {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.records-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  min-width: 160px;
}

.records-heading-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.records-user-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.records-user-email {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
}

/* Records auth card */
.records-auth-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.records-auth-text {
  flex: 1;
  min-width: 0;
}
.records-auth-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strongest);
}
.records-auth-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 48ch;
}
.records-auth-error {
  margin-top: var(--space-sm);
}

/* Auth panel (F5 — e-posta/şifre + Google sekmeleri) */
.records-auth-card--stack {
  flex-direction: column;
  align-items: stretch;
}
.auth-box {
  width: 100%;
  max-width: 460px;
  align-self: flex-start;
}
.auth-form {
  display: grid;
  gap: var(--space-md);
}
.auth-form[hidden] { display: none; }
.auth-google[hidden] { display: none; }
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-md);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  min-width: 0;
  height: 1px;
  background: var(--inset);
}
.auth-or span {
  flex-shrink: 0;
}
.auth-google-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-google-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.auth-feedback { margin-bottom: var(--space-sm); }
.auth-feedback[hidden] { display: none; }
.auth-switch {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.auth-switch[hidden] { display: none; }
.auth-info {
  display: grid;
  gap: var(--space-sm);
}
.auth-info[hidden] { display: none; }
.auth-info-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strongest);
}
.auth-verify-steps {
  margin: var(--space-xs) 0 var(--space-sm);
  padding-left: 1.35rem;
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.6;
}
.auth-verify-steps li + li { margin-top: var(--space-xs); }
.auth-verify-steps li::marker {
  color: var(--brand);
  font-weight: 700;
}
.auth-verify-actions {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.auth-verify-actions .btn-full { margin-top: 0; }
.auth-info-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}
.field-hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}
.auth-policy-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.auth-google-note {
  margin: var(--space-sm) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}
.linklike:hover { color: var(--brand-hover); text-decoration: underline; }

/* ── HESABIM PANELİ (F6 — profil + aktif oturumlar) ──────────────── */
.hesabim-panel {
  margin-bottom: var(--space-xl);
}
.hesabim-panel[hidden] {
  display: none !important;
}
.hesabim-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.hesabim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-xl);
  width: 100%;
  align-items: start;
}
.hesabim-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
.hesabim-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strongest);
}
.hesabim-email-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hesabim-email-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--inset);
  min-height: 42px;
}
.hesabim-email-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hesabim-provider-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.hesabim-provider-badge:empty {
  display: none;
}
.hesabim-provider--google {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid #c7d2fe;
}
.hesabim-provider--email {
  background: var(--panel);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.hesabim-profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.hesabim-profile-form .btn-primary {
  align-self: flex-start;
}
.hesabim-feedback {
  margin-top: 0;
  margin-bottom: 0;
}
.hesabim-feedback[hidden] {
  display: none !important;
}

/* Oturumlar listesi */
.hesabim-sessions-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hesabim-sessions-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.hesabim-sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--space-xs);
}
.hesabim-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--page-bg);
  border: 1px solid transparent;
}
.hesabim-session-row--current {
  background: #fff;
  border-color: var(--border);
}
.hesabim-session-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hesabim-session-primary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.hesabim-session-device {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.hesabim-session-ip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--panel);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.hesabim-session-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.hesabim-session-action {
  flex-shrink: 0;
}
.hesabim-current-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid #c7d2fe;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.hesabim-sessions-empty,
.hesabim-sessions-subnote {
  margin: 0;
  padding: var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.hesabim-sessions-subnote {
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  border-top: 1px solid var(--border);
}
.hesabim-sessions-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-xs);
}
#hesabim-all-end.is-confirming {
  border-color: var(--error-border);
  color: var(--error-text);
  background: var(--error-bg);
}
#hesabim-all-end.is-confirming:hover {
  border-color: var(--error-text);
  background: #fee2e2;
}

/* Table */
.table-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
th {
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-strong);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--panel); }
.numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.records-error {
  margin: var(--space-md);
}
.col-actions {
  width: 88px;
  text-align: center;
  padding: 12px 6px;
}
.cell-actions {
  text-align: center;
  padding: 8px 6px;
  white-space: nowrap;
}
.btn-remove-row {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-remove-row:hover {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}
.btn-remove-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn-remove-row svg {
  width: 14px;
  height: 14px;
}
.btn-remove-row:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Empty state */
.table-empty {
  padding: 56px var(--space-lg);
  text-align: center;
  border-top: 1px solid var(--border);
}
.empty-primary {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}
.empty-sub {
  margin: 6px auto 0;
  max-width: 40ch;
  font-size: 14px;
  color: var(--text-muted);
}

/* Skeleton loading */
.table-loading { padding: var(--space-md); display: flex; flex-direction: column; gap: 10px; }
.skeleton-row {
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--inset);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── DEMO BAR + ABONELIK (IAP senkron — t_1995f91f) ─────────────── */
.demo-bar {
  background: var(--text-strongest);
  color: #f1f5f9;
}
.demo-bar-inner {
  width: min(var(--max-w), calc(100% - var(--gutter)));
  margin-inline: auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 8px 0;
}
.demo-bar-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #cbd5e1;
}
.demo-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.demo-bar-cta:hover { background: var(--brand-hover); }
.demo-bar-cta svg { width: 14px; height: 14px; }
.demo-bar-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.demo-bar-cta.is-disabled {
  background: #475569;
  cursor: default;
}
.demo-bar-cta.is-disabled:hover { background: #475569; }
.demo-bar-cta.is-disabled svg { display: none; }
.demo-bar-cta-note {
  display: block;
  max-width: 340px;
  font-size: 11px;
  line-height: 1.4;
  color: #94a3b8;
  text-align: right;
}

.user-pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.abonelik-kutu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.abonelik-kutu .hesabim-card-title { margin-bottom: 2px; }
.abonelik-satir {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
}
.abone-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.abonelik-metinler { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abonelik-metin { margin: 0; font-size: 13px; color: var(--text-mid); line-height: 1.55; }
.abonelik-plan-ad { font-weight: 600; color: var(--text-strong); }
.abonelik-bit {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.abonelik-cta { align-self: flex-start; }

.auth-app-note { margin: var(--space-md) 0 0; }
.auth-app-note a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.auth-app-note a:hover { color: var(--brand-hover); text-decoration: underline; }
.auth-app-note a.is-disabled {
  color: var(--text-muted);
  cursor: default;
  text-decoration: none;
}
.auth-app-note a.is-disabled:hover {
  color: var(--text-muted);
  text-decoration: none;
}
.abonelik-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── FOOTER ───────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.footer-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strongest);
}
.footer-tagline { font-size: 13px; color: var(--text-muted); }
.footer-links { display: flex; gap: var(--space-lg); }
.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--brand); text-decoration: underline; }
.footer-sep {
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.6;
}
.footer-cta { font-size: 14px; }
.footer-copy {
  width: 100%;
  margin: var(--space-lg) 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── MOBILE ───────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --gutter: 28px; }

  .site-header { height: 64px; }
  .brand-name { display: none; }
  .header-nav { gap: 12px; }
  .header-link { font-size: 12px; }

  /* Stepper compact */
  .stepper-list { gap: 0; }
  .step-label { font-size: 10px; }
  .step-circle { width: 28px; height: 28px; }
  .step-num { font-size: 11px; }
  .stepper-connector { margin: 0 4px; margin-bottom: 20px; }

  /* Intro */
  .intro {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
  .intro-text h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .intro-sub { font-size: 16px; }

  /* Drop zone */
  .drop-zone { min-height: 220px; padding: var(--space-xl) var(--space-md); }

  /* Ready card */
  .ready-card { flex-wrap: wrap; }
  .ready-actions { width: 100%; }
  .btn-primary, .btn-ghost { flex: 1; }

  /* Processing */
  .processing-card { flex-direction: column; align-items: flex-start; padding: var(--space-lg); }

  /* Review */
  .review-section { padding-top: var(--space-3xl); }
  .review-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .model-note { text-align: left; }
  .review-grid { grid-template-columns: 1fr; }
  .doc-preview { position: static; }
  .doc-preview #preview-slot img { max-height: 480px; }
  .record-form { padding: var(--space-md); }
  .field-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .form-actions-row .btn-full { min-width: 0; }
  .review-grid--no-preview .record-form { padding: var(--space-md); }
  .items-table td input[type="text"] { min-width: 140px; }
  .columns-popover { right: auto; left: 0; }

  /* Records */
  .records-section { padding-top: var(--space-3xl); }
  .records-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .records-heading-wrap { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .records-auth-card { flex-direction: column; align-items: stretch; gap: var(--space-md); padding: var(--space-lg); }
  .hesabim-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hesabim-profile-form .btn-primary { width: 100%; }
  .hesabim-session-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .hesabim-session-action { align-self: flex-end; }
  .record-actions { flex-wrap: wrap; width: 100%; }
  .records-month-label { flex: 1; min-width: 140px; }
  .records-search-label { flex: 1; min-width: 200px; }
  .btn-outline { flex: 1; }

  /* Demo bar + plan */
  .demo-bar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: 10px 0; }
  .demo-bar-cta { width: 100%; justify-content: center; }
  .demo-bar-cta-wrap { width: 100%; align-items: stretch; }
  .demo-bar-cta-note { max-width: none; text-align: center; }
  .records-user-bar { flex-wrap: wrap; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .footer-cta { width: 100%; }
}

/* ── REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}