/* KSOS canonical tokens — light default, dark via html[data-theme="dark"]
   Groups: primary/navy · accent/cyan · success · warning/amber · error
           neutral · border · surface · text · focus */

:root {
  --ksos-navy: #0A1B3D;
  --ksos-turquoise: #00BBD3;
  --ksos-white: #FFFFFF;
  --ksos-silver: #A6ACB3;

  --color-bg: #F3F5F8;
  --color-bg-deep: #EEF1F5;
  --color-page: linear-gradient(180deg, #F3F5F8 0%, #EEF1F5 100%);
  --color-surface: var(--ksos-white);
  --color-surface-elevated: var(--ksos-white);
  --color-surface-muted: #EAEEF3;

  --color-text: var(--ksos-navy);
  --color-text-muted: #4A5563;
  --color-text-subtle: #6B7380;
  --color-heading: var(--ksos-navy);

  --color-border: #D5DAE0;
  --color-border-strong: rgba(10, 27, 61, 0.28);

  --color-primary: var(--ksos-navy);
  --color-primary-hover: #07142E;
  --color-primary-text: var(--ksos-white);
  --color-primary-border: var(--ksos-navy);
  --color-secondary-bg: var(--ksos-white);
  --color-secondary-text: var(--ksos-navy);
  --color-secondary-border: var(--ksos-navy);

  --color-accent: var(--ksos-turquoise);
  --color-accent-soft: rgba(0, 187, 211, 0.14);
  --color-accent-border: rgba(0, 187, 211, 0.42);
  --color-focus: var(--ksos-turquoise);
  --color-focus-ring: rgba(0, 187, 211, 0.28);

  --color-disabled-bg: #E6EAEE;
  --color-disabled-text: #5B6573;

  --color-success: #1B7A4A;
  --color-success-soft: rgba(27, 122, 74, 0.12);
  --color-warning: #B45309;
  --color-warning-soft: rgba(180, 83, 9, 0.12);
  --color-danger: #C24141;
  --color-danger-soft: rgba(194, 65, 65, 0.14);
  --color-info: var(--ksos-turquoise);

  --color-table-row-hover: rgba(10, 27, 61, 0.04);
  --color-table-sticky: var(--ksos-white);
  --color-best-buy: #15803d;
  --color-best-sell: #b45309;
  --color-step-completed-bg: #EEF4FA;
  --color-step-completed-border: #17365D;
  --color-step-completed-icon: #DCE8F5;
  --color-step-completed-text: var(--ksos-navy);
  --color-step-active-bg: var(--color-accent-soft);
  --color-step-active-border: var(--color-accent);
  --color-step-active-icon: var(--color-accent);
  --color-step-upcoming-bg: #F8FAFC;
  --color-step-upcoming-border: #D7DEE7;
  --color-step-upcoming-text: #7B8794;
  --color-stale: #B45309;
  --color-suspicious: #C47A3A;
  --color-unavailable: var(--ksos-silver);
  --color-fresh: #1B7A4A;

  --color-overlay: rgba(10, 27, 61, 0.48);
  --color-link: var(--ksos-navy);
  --color-link-hover: var(--ksos-turquoise);
  --color-input-bg: var(--ksos-white);
  --color-input-text: var(--ksos-navy);
  --color-error-text: #B42318;
  --color-shadow: 0 12px 32px rgba(10, 27, 61, 0.08);
  --color-spinner-track: rgba(255, 255, 255, 0.32);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  --radius-control: 12px;
  --radius-panel: 18px;
  --radius-card: 20px;
  --radius-pill: 999px;

  --control-height: 52px;
  --control-height-mobile: 48px;
  --control-pad-y: 12px;
  --control-pad-x: 16px;
  --control-border-width: 1px;
  --focus-ring: 0 0 0 3px var(--color-focus-ring);

  --font-title: 24px;
  --font-section: 20px;
  --font-body: 15px;
  --font-label: 14px;
  --font-helper: 12px;
  --font-button: 14px;
  --font-caption: 12px;
  --content-max: 920px;
  --app-shell-max: 430px;

  --bg: var(--color-bg);
  --card: var(--color-surface);
  --panel-soft: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --info: var(--color-info);
  --input: var(--color-input-bg);
}

html[data-theme="dark"] {
  --color-bg: #07111F;
  --color-bg-deep: #0A1B3D;
  --color-page: linear-gradient(180deg, #07111F 0%, #0A1B3D 100%);
  --color-surface: #0F1C33;
  --color-surface-elevated: #15243F;
  --color-surface-muted: #0C1830;

  --color-text: #F4F6F8;
  --color-text-muted: #C5CBD3;
  --color-text-subtle: var(--ksos-silver);
  --color-heading: var(--ksos-white);

  --color-border: rgba(166, 172, 179, 0.28);
  --color-border-strong: rgba(0, 187, 211, 0.4);

  --color-primary: #0A1B3D;
  --color-primary-hover: #1A3670;
  --color-primary-text: var(--ksos-white);
  --color-primary-border: var(--ksos-turquoise);
  --color-secondary-bg: #15243F;
  --color-secondary-text: #F4F6F8;
  --color-secondary-border: rgba(166, 172, 179, 0.55);

  --color-accent: var(--ksos-turquoise);
  --color-accent-soft: rgba(0, 187, 211, 0.16);
  --color-accent-border: rgba(0, 187, 211, 0.48);
  --color-focus: var(--ksos-turquoise);
  --color-focus-ring: rgba(0, 187, 211, 0.32);

  --color-disabled-bg: #152033;
  --color-disabled-text: #C5CBD3;

  --color-success: #5FBF8A;
  --color-success-soft: rgba(95, 191, 138, 0.14);
  --color-warning: #D4A04A;
  --color-warning-soft: rgba(212, 160, 74, 0.14);
  --color-danger: #E07A7A;
  --color-danger-soft: rgba(224, 122, 122, 0.16);
  --color-info: var(--ksos-turquoise);

  --color-table-row-hover: rgba(0, 187, 211, 0.08);
  --color-table-sticky: #0F1C33;
  --color-best-buy: #4ade80;
  --color-best-sell: #f59e0b;
  --color-step-completed-bg: #15243F;
  --color-step-completed-border: #3A5A8C;
  --color-step-completed-icon: #1A3670;
  --color-step-completed-text: #F4F6F8;
  --color-step-active-bg: var(--color-accent-soft);
  --color-step-active-border: var(--color-accent);
  --color-step-active-icon: var(--color-accent);
  --color-step-upcoming-bg: #0C1830;
  --color-step-upcoming-border: rgba(166, 172, 179, 0.28);
  --color-step-upcoming-text: var(--ksos-silver);
  --color-stale: #D4A04A;
  --color-suspicious: #E0A06A;
  --color-unavailable: var(--ksos-silver);
  --color-fresh: #5FBF8A;

  --color-overlay: rgba(7, 17, 31, 0.72);
  --color-link: #D7E4F2;
  --color-link-hover: var(--ksos-white);
  --color-input-bg: #0C1830;
  --color-input-text: #F4F6F8;
  --color-error-text: #F0A8A8;
  --color-shadow: 0 20px 44px rgba(2, 8, 23, 0.34);
  --color-spinner-track: rgba(255, 255, 255, 0.28);
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
}

body {
  background: var(--color-page);
}

h1, h2, h3, .seo-copy-title, .seo-copy-heading, .faq-title, .faq-question,
.faq-page-title, .rates-title, .rates-currency-heading, .kvkk-title, .kvkk-section h3,
.step-title, .company-insight-title, .compact-info-title, .summary-value,
.rates-bank-name, .rates-mobile-bank-name, .rates-card-bank, .rates-desktop-bank {
  color: var(--color-heading);
}

.desc, .hero-action-copy, .rates-copy, .faq-page-copy, .site-footer-copy,
.site-footer-share-copy, .hint, .consent-hint, .rates-updated, .rates-disclaimer,
.summary-label, .rates-sort-label, .rates-legend, .rates-card-value-label {
  color: var(--color-text-muted);
}

.card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--color-shadow);
}

.seo-copy, .faq-block, .rates-section, .faq-page-section, .site-footer,
.company-insight, .compact-info, .summary-card, .consent-box,
.wizard-footer-main, .step-panel {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

.company-insight {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}

.how-steps, .seo-copy p, .faq-answer, .company-insight-copy, .compact-info-copy,
.kvkk-subtitle, .kvkk-section p, .kvkk-contact-list li, .share-modal-copy,
.share-success-copy, .rates-status {
  color: var(--color-text);
}

.seo-copy-link, .site-footer-link, .kvkk-inline-link, .kvkk-link {
  color: var(--color-link);
  border-bottom-color: var(--color-border);
}

.seo-copy-link:hover, .site-footer-link:hover, .kvkk-link:hover {
  color: var(--color-link-hover);
}

.secondary, .secondary-soft, .form-nav-link, .rates-action-btn, .rates-action-secondary,
.rates-sort-btn, .share-option {
  background: var(--color-secondary-bg);
  color: var(--color-secondary-text);
  border: 1px solid var(--color-secondary-border);
}

.secondary:hover, .secondary-soft:hover, .form-nav-link:hover, .rates-action-btn:hover,
.rates-sort-btn:hover, .share-option:hover {
  background: var(--color-surface-muted);
  color: var(--color-secondary-text);
  border-color: var(--color-accent);
}

.tertiary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 600;
}

.tertiary:hover {
  background: var(--color-surface-muted);
  color: var(--color-heading);
  border-color: var(--color-border);
}

.form-nav-link.is-current, .rates-sort-btn.is-active, .rates-mobile-tab.is-active {
  background: var(--color-accent-soft);
  color: var(--color-heading);
  border-color: var(--color-accent);
  box-shadow: none;
}

.primary, .btn-link.primary, a.primary, button.primary, .rates-action-btn.rates-action-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary-border);
  box-shadow: none;
}

.primary:hover, .btn-link.primary:hover, .rates-action-btn.rates-action-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-text);
  border-color: var(--color-primary-border);
}

button:disabled, .rates-action-btn:disabled, .primary:disabled, input:disabled, select:disabled, textarea:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-border);
  opacity: 1;
  cursor: not-allowed;
}

.primary.is-loading:disabled,
.primary[aria-busy="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary-border);
  opacity: 0.88;
  cursor: wait;
}

.spinner {
  border-color: var(--color-spinner-track);
  border-top-color: var(--color-primary-text);
}

label, .consent-label, .step-label {
  color: var(--color-heading);
  font-weight: 600;
}

.field > label,
.field label:not(.consent-label) {
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-heading);
}

.hint, .consent-hint, .step-copy, .step-status-text {
  font-size: var(--font-helper);
  color: var(--color-text-muted);
}

input, select, textarea, .readonly-field {
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border-color: var(--color-border);
}

select option {
  background: var(--color-input-bg);
  color: var(--color-input-text);
}

input:focus, select:focus, textarea:focus, .readonly-field:focus,
.ksos-select-trigger:focus, button:focus, .btn-link:focus {
  outline: none;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, .readonly-field:focus-visible {
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.field-error {
  color: var(--color-error-text);
}

.kvkk-link:focus-visible, .form-nav-link:focus-visible, .rates-action-btn:focus-visible,
.rates-mobile-tab:focus-visible, .rates-sort-btn:focus-visible, .share-option:focus-visible,
.faq-accordion-trigger:focus-visible, .theme-pref-btn:focus-visible, .kvkk-close:focus-visible,
button:focus-visible, .btn-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.step-indicator,
.step-indicator.is-upcoming {
  background: var(--color-step-upcoming-bg);
  border-color: var(--color-step-upcoming-border);
  box-shadow: none;
  opacity: 0.78;
  transform: none;
}

.step-indicator.is-active {
  background: var(--color-step-active-bg);
  border-color: var(--color-step-active-border);
  box-shadow: 0 0 0 1px var(--color-focus-ring), 0 10px 22px var(--color-focus-ring);
  opacity: 1;
  transform: translateY(-1px);
}

.step-indicator.is-complete {
  background: var(--color-step-completed-bg);
  border-color: var(--color-step-completed-border);
  box-shadow: none;
  opacity: 0.96;
  transform: none;
}

.step-number {
  background: var(--color-surface-muted);
  border-color: var(--color-step-upcoming-border);
  color: var(--color-step-upcoming-text);
  position: relative;
}

.step-indicator.is-upcoming .step-label,
.step-indicator.is-upcoming .step-caption {
  color: var(--color-step-upcoming-text);
}

.step-indicator.is-active .step-number {
  background: var(--color-accent-soft);
  border-color: var(--color-step-active-icon);
  color: var(--color-heading);
}

.step-indicator.is-complete .step-number {
  background: var(--color-step-completed-icon);
  border-color: var(--color-step-completed-border);
  color: var(--color-step-completed-text);
}

.step-indicator.is-active .step-label,
.step-indicator.is-complete .step-label {
  color: var(--color-heading);
}

.step-caption { color: var(--color-text-subtle); }
.step-indicator.is-active .step-caption { color: var(--color-text-muted); }
.step-indicator.is-complete .step-caption,
.step-indicator.is-complete .step-label {
  color: var(--color-step-completed-text);
}

.step-check {
  display: none;
  width: 14px;
  height: 14px;
}

.step-indicator.is-complete .step-index { display: none; }
.step-indicator.is-complete .step-check { display: block; }

.consent-indicator {
  background: var(--color-input-bg);
  border-color: var(--color-border-strong);
}

.consent-checkbox:checked + .consent-row .consent-indicator {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.consent-indicator::after {
  border-right-color: var(--color-primary-text);
  border-bottom-color: var(--color-primary-text);
}

.kvkk-modal { background: var(--color-overlay); }
.kvkk-dialog {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}
.kvkk-header {
  background: var(--color-surface-muted);
  border-bottom-color: var(--color-border);
}
.kvkk-close { color: var(--color-heading); background: transparent; }
.kvkk-section + .kvkk-section { border-top-color: var(--color-border); }
.share-success-block {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
.share-success-block.is-success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}
.share-success-block.is-fallback {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
}
.share-secondary-block { border-top-color: var(--color-border); }
.share-option-icon {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-heading);
}
.share-status { color: var(--color-success); }

.rates-table-wrap, .rates-table-desktop, .rates-mobile-group, .rates-mobile-tabs {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.rates-table th, .rates-table td,
.rates-desktop-table th, .rates-desktop-table td,
.rates-mobile-table th, .rates-mobile-table td {
  border-color: var(--color-border);
}

.rates-table thead th, .rates-desktop-table th, .rates-mobile-table th,
.rates-mobile-group-title {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
}

.rates-table td, .rates-desktop-table td, .rates-card-value,
.rates-mobile-table td:nth-child(2), .rates-mobile-table td:nth-child(3) {
  color: var(--color-text);
}

.rates-table th:first-child,
.rates-table td:first-child {
  background: var(--color-table-sticky);
}

.rates-desktop-table tbody tr:hover > td,
.rates-desktop-table tbody tr:hover > th {
  background-color: var(--color-table-row-hover);
}

.rates-muted, .rates-desktop-rank { color: var(--color-text-muted); }
.rates-value-unavailable, .rates-desktop-status.is-missing, .rates-card-status.is-missing {
  color: var(--color-unavailable);
}

.rates-desktop-status, .rates-card-status { color: var(--color-fresh); }
.rates-desktop-status.is-stale, .rates-card-status.is-stale { color: var(--color-stale); }
.rates-desktop-status.is-suspicious, .rates-card-status.is-suspicious { color: var(--color-suspicious); }

.rates-card-value.is-best-buy, .rates-desktop-table td.is-best-buy { color: var(--color-best-buy); }
.rates-card-value.is-best-sell, .rates-desktop-table td.is-best-sell { color: var(--color-best-sell); }
.rates-legend-dot.is-best-buy { background: var(--color-best-buy); }
.rates-legend-dot.is-best-sell { background: var(--color-best-sell); }

.rates-card-rank {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-heading);
}

.rates-mobile-tab {
  background: transparent;
  color: var(--color-text-muted);
}

.rates-mobile-tab:hover { color: var(--color-heading); border-color: var(--color-accent-border); }

.rates-status {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}

.amount-suffix { color: var(--color-text-subtle); }

.faq-accordion-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.faq-accordion-item.is-open {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-focus-ring);
}

.faq-accordion-trigger { color: var(--color-heading); background: transparent; }
.faq-accordion-trigger:hover { background: var(--color-table-row-hover); }
.faq-accordion-question { color: var(--color-heading); }
.faq-accordion-panel p { color: var(--color-text); }
.faq-accordion-icon { color: var(--color-text-muted); }
.faq-accordion-item.is-open .faq-accordion-icon { color: var(--color-heading); }

.faq-accordion-index {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-heading);
}

.theme-pref-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
  min-height: 36px;
}

.theme-pref {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
}

.theme-pref-btn {
  min-height: 32px;
  min-width: 44px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.theme-pref-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.rates-card {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: var(--color-shadow);
}

.rates-card::after {
  background: none;
}

.readonly-field,
#bankFlowDisplay {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

.wizard-footer-main {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.theme-pref,
.theme-pref-wrap {
  width: auto !important;
}

@media (max-width: 767px) {
  .theme-pref-btn {
    width: auto !important;
    min-height: 32px !important;
    min-width: 44px !important;
    padding: 4px 10px !important;
  }

  html,
  body {
    background: var(--color-bg) !important;
  }

  body {
    background: var(--color-page) !important;
  }

  .card::before {
    background: none;
  }

  .rates-section {
    background: var(--color-surface-muted) !important;
    border-color: var(--color-border) !important;
    box-shadow: none;
  }

  .rates-mobile-tabs,
  .rates-mobile-group {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }

  .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 10px;
    margin: 0 0 10px;
  }

  .page-head h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
  }

  .page-head .desc {
    grid-column: 1 / -1;
    margin: 0;
  }

  .page-head .theme-pref-wrap {
    margin: 0;
    min-height: 0;
  }

  body[data-page="landing"] .theme-pref-wrap {
    margin: 0 0 8px;
    min-height: 0;
    justify-content: flex-end;
  }

  .form-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-muted);
    overflow: hidden;
  }

  .form-nav-link,
  a.form-nav-link,
  span.form-nav-link,
  .btn-link.form-nav-link {
    flex: 1 1 calc(33.33% - 6px);
    width: auto !important;
    min-width: 0;
    min-height: 44px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .stepper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px;
    margin-bottom: 8px;
  }

  .step-indicator {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 44px;
    transform: none;
    opacity: 0.62;
    border-style: dashed;
  }

  .step-indicator.is-active {
    opacity: 1;
    border-style: solid;
    border-width: 2px;
  }

  .step-indicator.is-complete {
    opacity: 1;
    border-style: solid;
  }

  .step-indicator.is-active .step-label {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .step-indicator.is-complete .step-label::after {
    content: none;
  }

  .step-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .step-label {
    font-size: 11px;
    line-height: 1.2;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .wizard-footer {
    background: linear-gradient(180deg, transparent 0%, var(--color-surface) 22%);
  }

  .wizard-actions-left,
  .wizard-actions-right {
    display: contents;
  }

  .wizard-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #nextStepBtn,
  #submitBtn,
  #waAction {
    order: 1;
    width: 100%;
    min-height: 48px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary-border);
    font-weight: 800;
  }

  #shareBtn {
    order: 2;
    width: 100%;
    min-height: 44px;
    background: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border: 1px solid var(--color-secondary-border);
    font-weight: 700;
  }

  #prevStepBtn {
    order: 3;
    width: 100%;
    min-height: 44px;
  }

  #clearBtn {
    order: 4;
    width: auto;
    min-height: 40px;
    align-self: center;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .seo-copy {
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .seo-disclose {
    margin-top: 8px;
  }

  .seo-disclose summary {
    cursor: pointer;
    list-style: none;
    color: var(--color-link);
    font-size: 13px;
    font-weight: 700;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .seo-disclose summary::-webkit-details-marker {
    display: none;
  }

  details.seo-disclose:not([open]) > *:not(summary) {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .rates-card {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 10px;
    padding: 10px 12px;
    align-items: center;
  }

  .rates-card-head {
    min-width: 0;
    overflow: hidden;
  }

  .rates-card-bank {
    font-size: 13px;
    line-height: 1.2;
  }

  .rates-card-values {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 12px;
    row-gap: 2px;
    justify-content: end;
    min-width: max-content;
    overflow: visible;
  }

  .rates-card-values > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .rates-card-values > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .rates-card-values > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .rates-card-values > :nth-child(4) { grid-column: 2; grid-row: 2; }

  .rates-card-value {
    font-size: 15px;
    text-align: right;
    overflow: visible;
  }

  .rates-card-value-label {
    text-align: right;
    overflow: visible;
    white-space: nowrap;
  }
}

@media (max-width: 899px) {
  .rates-sort-mobile {
    display: none !important;
  }

  .rates-toolbar-desktop {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 10px;
  }

  .rates-sort-desktop {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }

  .rates-sort-desktop .rates-sort-label {
    flex: 1 0 100%;
  }

  .rates-sort-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 16px;
    margin: 0 0 12px;
  }

  .page-head h1 { margin: 0 0 6px; }
  .page-head .desc { margin: 0; }
  .page-head .theme-pref-wrap { margin: 0; }

  .seo-disclose > summary {
    display: none !important;
  }

  .seo-disclose .seo-disclose-body,
  .seo-disclose .seo-disclose-body p {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Accessible custom select — native OS popup is hidden */
.ksos-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ksos-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
}

.ksos-select-trigger {
  width: 100%;
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: var(--control-pad-y) var(--control-pad-x);
  border: var(--control-border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-input-bg);
  color: var(--color-input-text);
  font-family: inherit;
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.ksos-select-trigger.is-placeholder {
  color: var(--color-text-subtle);
  font-weight: 600;
}

.ksos-select-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translateY(-2px);
}

.ksos-select.is-open .ksos-select-trigger::after {
  transform: rotate(225deg) translateY(-2px);
}

.ksos-select-trigger:hover {
  border-color: var(--color-accent-border);
}

.ksos-select-trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.ksos-select.is-disabled .ksos-select-trigger {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  border-color: var(--color-border);
}

.field.is-invalid .ksos-select-trigger {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.ksos-select-menu {
  position: fixed;
  z-index: 240;
  left: 0;
  right: auto;
  top: auto;
  max-height: min(280px, 50vh);
  overflow: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: var(--color-shadow);
}

.ksos-select-menu.is-up {
  bottom: auto;
}

.ksos-select-option {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-heading);
  font-family: inherit;
  font-size: var(--font-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ksos-select-option:hover,
.ksos-select-option.is-active {
  background: var(--color-accent-soft);
  color: var(--color-heading);
}

.ksos-select-option:focus {
  outline: none;
}

.ksos-select-option:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ksos-select-option[aria-selected="true"] {
  background: var(--color-accent-soft);
  color: var(--color-heading);
  box-shadow: inset 0 0 0 1px var(--color-accent-border);
}

.ksos-select-option.is-disabled,
.ksos-select-option[aria-disabled="true"] {
  color: var(--color-disabled-text);
  background: transparent;
  cursor: default;
}

.ksos-select--compact .ksos-select-trigger {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

@media (max-width: 899px) {
  .ksos-select-trigger,
  .ksos-select-menu,
  .ksos-select-option {
    width: 100%;
  }
}

/* UI consistency pass — control family, type, spacing, feedback, action bar */
.card {
  border-radius: var(--radius-card);
  overflow: visible;
}

.wizard-form,
.grid,
.field,
.step-panel,
.content {
  overflow: visible;
}

.content {
  padding: var(--space-16);
}

.wizard-form {
  gap: var(--space-16);
}

.grid {
  gap: var(--space-16);
}

.field {
  gap: var(--space-8);
}

h1 {
  font-size: var(--font-title);
  line-height: 1.2;
}

.step-title, .rates-title, .faq-title, .kvkk-title, .seo-copy-title {
  font-size: var(--font-section);
}

.step-panel,
.company-insight, .compact-info, .summary-card, .consent-box,
.wizard-footer-main, .seo-copy, .faq-block, .rates-section, .site-footer {
  border-radius: var(--radius-panel);
  border-color: var(--color-border);
}

.step-panel {
  padding: var(--space-16);
  overflow: visible;
}

input, select, textarea, .readonly-field, #bankFlowDisplay {
  min-height: var(--control-height);
  border-width: var(--control-border-width);
  border-style: solid;
  border-radius: var(--radius-control);
  padding: var(--control-pad-y) var(--control-pad-x);
  font-size: var(--font-body);
  line-height: 1.4;
}

textarea {
  min-height: 116px;
}

.wizard-actions button,
.wizard-actions .btn-link,
.hero-actions .btn-link,
.form-nav-link,
.share-option,
.share-modal-primary {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
  font-size: var(--font-button);
}

.kvkk-close {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
}

.theme-pref {
  border-radius: var(--radius-pill);
}

.field[data-required] > label:not(.consent-label)::after {
  content: " *";
  color: var(--color-error-text);
  font-weight: 700;
}

.field-error {
  display: none;
  font-size: var(--font-helper);
  line-height: 1.45;
  color: var(--color-error-text);
}

.field.is-invalid .field-error {
  display: block;
}

.status {
  color: var(--color-accent);
}

.status.is-success {
  color: var(--color-success);
}

.status.is-loading {
  color: var(--color-text-muted);
}

.error {
  color: var(--color-error-text);
}

.error.is-validation {
  color: var(--color-error-text);
}

.error.is-network,
.error.is-server {
  color: var(--color-danger);
}

.error.is-storage {
  color: var(--color-warning);
}

.wizard-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.wizard-actions-left,
.wizard-actions-right {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.wizard-actions-right {
  margin-left: auto;
}

.stepper {
  gap: var(--space-8);
}

.step-indicator {
  min-height: 72px;
  align-items: center;
  padding: var(--space-12);
  border-radius: var(--radius-control);
}

.step-number {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-meta {
  min-width: 0;
}

.step-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rates-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
}

.rates-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-helper);
  font-weight: 600;
  white-space: nowrap;
}

.rates-legend-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}

.kvkk-modal .kvkk-dialog {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--color-shadow);
}

.share-success-copy {
  color: var(--color-text);
}

.wrap {
  max-width: var(--content-max, 920px);
}

body[data-page="landing"] .form-anchor,
body[data-page="landing"] .wizard-footer,
body[data-page="landing"] #leadForm {
  display: none !important;
}

@media (max-width: 767px) {
  input, select, textarea, .readonly-field, #bankFlowDisplay,
  .ksos-select-trigger {
    min-height: var(--control-height-mobile);
  }

  .wizard-actions button,
  .wizard-actions .btn-link,
  .hero-actions .btn-link,
  .share-option,
  .share-modal-primary {
    min-height: var(--control-height-mobile);
  }

  .wizard-actions-left,
  .wizard-actions-right {
    display: contents;
    margin-left: 0;
  }

  .step-indicator {
    min-height: 64px;
    padding: var(--space-8) var(--space-4);
  }

  .content {
    padding: var(--space-16);
  }
}

@media (max-width: 430px) {
  .wizard-actions-right {
    margin-left: 0;
  }

  .wizard-actions button,
  .wizard-actions .btn-link {
    min-height: var(--control-height-mobile);
  }

  #clearBtn {
    min-height: 44px;
  }
}