:root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #191c1d;
  background: #f8f9fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --blue: #005f9d;
  --blue2: #0079c5;
  --slate: #1a1c1e;
  --yellow: #e9c400;
  --bg: #f8f9fa;
  --card: #fff;
  --border: #e2e8f0;
  --muted: #65717d;
  --soft: #eef3f6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(0,121,197,.24); outline-offset: 2px; }
img { display: block; max-width: 100%; }
.drawer-open { overflow: hidden; }

.brand { display: flex; align-items: center; gap: 14px; min-width: max-content; }
.brand__gok { font-weight: 900; letter-spacing: -.035em; font-size: 22px; line-height: 1; color: var(--slate); }
.brand__gok span { font-weight: 650; }
.brand__divider { width: 1px; height: 28px; background: #bcc6cf; }
.brand__product { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.brand--compact .brand__gok { font-size: 18px; }
.brand--compact .brand__divider { height: 22px; }
.brand--compact .brand__product { font-size: 12px; }

.eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.primary-button, .secondary-button, .icon-text-button, .icon-button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.primary-button { min-height: 48px; padding: 0 20px; border-radius: 5px; background: var(--blue); color: white; font-weight: 750; transition: .2s ease; }
.primary-button:hover { background: #004f84; transform: translateY(-1px); }
.primary-button--hero { min-height: 56px; padding: 0 24px; }
.primary-button--wide { width: 100%; }
.primary-button.is-selected { background: #1e6c4c; }
.secondary-button { min-height: 42px; padding: 0 15px; border-radius: 5px; background: #f2f6f8; color: var(--slate); font-weight: 750; }
.secondary-button:hover { background: #e8eff3; }
.icon-button { width: 42px; height: 42px; border-radius: 5px; background: #f4f6f7; color: var(--slate); }
.icon-text-button { padding: 8px 10px; border-radius: 5px; background: transparent; color: #3c4750; font-weight: 700; }
.icon-text-button:hover { background: #eef2f4; }

/* Landing */
.landing { background: #f8f9fa; overflow: hidden; }
.landing-header { width: min(1480px, calc(100% - 80px)); height: 86px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dde3e8; }
.landing-header__note { font-size: 12px; font-weight: 700; color: #64727c; letter-spacing: .04em; }
.hero { width: min(1480px, calc(100% - 80px)); margin: 0 auto; min-height: 690px; display: grid; grid-template-columns: .87fr 1.13fr; gap: 56px; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; width: 1px; height: 160px; background: #d8dee3; left: 0; bottom: 0; }
.hero__content { padding: 50px 0 70px 44px; position: relative; z-index: 2; }
.hero__kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #53616b; }
.hero__kicker span { width: 24px; height: 4px; background: var(--yellow); }
.hero h1 { margin: 28px 0 26px; font-size: clamp(72px, 7vw, 112px); line-height: .84; letter-spacing: -.075em; font-weight: 850; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lead { max-width: 620px; font-size: 20px; line-height: 1.6; color: #4e5962; margin: 0; }
.hero__actions { display: flex; align-items: center; gap: 26px; margin-top: 38px; }
.hero__micro { display: grid; grid-template-columns: auto auto; gap: 0 10px; align-items: center; padding-left: 18px; border-left: 2px solid var(--yellow); }
.hero__micro strong { grid-row: span 2; font-size: 24px; letter-spacing: -.04em; }
.hero__micro span { max-width: 160px; font-size: 11px; line-height: 1.35; color: #66727c; }
.hero__visual { position: relative; padding: 42px 0 70px; }
.hero__visual::after { content: ""; position: absolute; inset: 8% -20vw 2% 22%; background: #e9eef1; z-index: 0; }
.hero__image { position: relative; z-index: 1; height: 520px; border-radius: 10px 0 0 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(16,31,42,.08); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 50%; }
.hero__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,19,23,.04), transparent 40%, rgba(0,0,0,.04)); }
.hero__plate { position: absolute; z-index: 2; left: -34px; bottom: 34px; width: 380px; display: grid; grid-template-columns: 1fr 1fr; background: var(--slate); color: white; border-left: 5px solid var(--yellow); }
.hero__plate div { padding: 18px 20px; }
.hero__plate div + div { border-left: 1px solid rgba(255,255,255,.14); }
.hero__plate span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #aeb8be; margin-bottom: 6px; }
.hero__plate strong { display: block; font-size: 13px; line-height: 1.35; }

.process-section { background: var(--slate); color: white; padding: 100px max(40px, calc((100vw - 1400px)/2)); }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.section-heading .eyebrow { color: #7dc8f2; }
.section-heading h2 { font-size: clamp(38px, 4vw, 58px); line-height: 1.04; letter-spacing: -.045em; margin: 10px 0 0; }
.section-heading > p { color: #aab3b9; line-height: 1.7; max-width: 520px; margin: 0; }
.process-line { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #43494e; border-bottom: 1px solid #43494e; }
.phase { min-height: 270px; padding: 28px 28px 32px; position: relative; }
.phase + .phase { border-left: 1px solid #43494e; }
.phase--accent::before { content: ""; position: absolute; left: 0; top: -2px; width: 40%; height: 4px; background: var(--yellow); }
.phase__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 54px; }
.phase__top span { font-variant-numeric: tabular-nums; font-weight: 800; color: #6f7a82; font-size: 12px; }
.phase__top small { color: #8e9aa2; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.phase h3 { font-size: 22px; letter-spacing: -.025em; margin: 0 0 13px; }
.phase p { font-size: 13px; line-height: 1.65; color: #9eabb2; margin: 0; }
.process-total { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 18px; margin-top: 28px; color: #7f8a91; font-size: 11px; }
.process-total__line { height: 1px; background: #3b4247; }
.process-total strong { color: #dce2e5; font-size: 12px; letter-spacing: .04em; text-align: center; }

.benefits { width: min(1400px, calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.benefits article { min-height: 300px; padding: 52px 34px; background: white; }
.benefits article + article { border-left: 1px solid var(--border); }
.benefits svg { color: var(--blue); width: 28px; height: 28px; margin-bottom: 42px; }
.benefits h3 { font-size: 18px; margin: 0 0 13px; }
.benefits p { font-size: 13px; color: #69757e; line-height: 1.65; margin: 0; }
.landing-cta { background: var(--blue); color: white; padding: 76px max(40px, calc((100vw - 1400px)/2)); display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.landing-cta .eyebrow { color: #a8d8f4; }
.landing-cta h2 { font-size: clamp(36px, 4vw, 58px); line-height: 1.03; letter-spacing: -.045em; margin: 10px 0 16px; }
.landing-cta p { color: #c4e0f1; margin: 0; }
.primary-button--light { background: white; color: var(--blue); min-width: 230px; }
.primary-button--light:hover { background: #f1f6f9; }
.landing-footer { width: min(1400px, calc(100% - 80px)); margin: 0 auto; min-height: 94px; display: flex; align-items: center; gap: 34px; color: #78848c; font-size: 11px; }
.landing-footer > span:last-child { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.landing-footer svg { width: 16px; }

/* App shell */
.app-shell { min-height: 100vh; background: #f8f9fa; }
.appbar { height: 68px; background: white; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; position: sticky; top: 0; z-index: 30; }
.appbar > .brand { justify-self: center; }
.appbar__meta { justify-self: end; font-size: 11px; font-weight: 700; color: #7a8790; }
.step-strip { position: sticky; top: 68px; z-index: 25; background: white; border-bottom: 1px solid var(--border); }
.step-strip__desktop { width: min(1220px, calc(100% - 64px)); margin: 0 auto; height: 66px; display: grid; grid-template-columns: repeat(6, 1fr); }
.step { display: flex; align-items: center; gap: 8px; color: #9aa4ab; position: relative; font-size: 11px; font-weight: 700; white-space: nowrap; }
.step::after { content: ""; height: 1px; background: #dfe5e9; flex: 1; min-width: 10px; }
.step:last-child::after { display: none; }
.step__index { width: 24px; height: 24px; border: 1px solid #d6dde2; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums; font-size: 10px; }
.step--active { color: var(--blue); }
.step--active .step__index { background: var(--blue); color: white; border-color: var(--blue); }
.step--active::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(100% - 12px); background: var(--yellow); }
.step-strip__mobile { display: none; }

.catalog-page { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 62px 0 100px; }
.catalog-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; margin-bottom: 42px; }
.catalog-intro h1 { font-size: clamp(46px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; margin: 10px 0 0; }
.catalog-intro__aside { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: end; padding-bottom: 7px; }
.catalog-intro__aside p { color: #64717a; line-height: 1.65; margin: 0; max-width: 490px; }
.catalog-count { display: flex; align-items: center; gap: 12px; padding-left: 18px; border-left: 3px solid var(--yellow); }
.catalog-count strong { font-size: 38px; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.catalog-count span { color: #71808a; line-height: 1.35; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.selection-bar { margin-bottom: 24px; padding: 14px 18px; border: 1px solid #a7cddd; border-left: 4px solid var(--blue); background: #eef7fb; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; }
.selection-bar div { display: flex; align-items: baseline; gap: 10px; }
.selection-bar span { font-size: 11px; color: #60737e; }
.selection-bar strong { font-size: 13px; }
.selection-bar button { border: 0; background: transparent; color: var(--blue); font-weight: 800; }
.catalog-tools { display: grid; grid-template-columns: minmax(280px, 1fr) 260px 230px; gap: 12px; padding: 16px; background: #eef2f4; border: 1px solid #e1e6e9; border-radius: 8px; }
.search-box, .select-wrap { background: white; border: 1px solid #dce3e7; border-radius: 5px; min-height: 48px; display: flex; align-items: center; padding: 0 14px; color: #78858e; }
.search-box:focus-within, .select-wrap:focus-within { border-color: #8fbdd7; box-shadow: 0 0 0 3px rgba(0,121,197,.07); }
.search-box input, .select-wrap select { border: 0; outline: 0; background: transparent; width: 100%; color: #25313a; font-size: 13px; }
.search-box input { padding-left: 10px; }
.select-wrap select { appearance: none; padding: 0 10px; cursor: pointer; }
.select-wrap > svg:last-child { width: 16px; }
.catalog-result-meta { display: flex; justify-content: space-between; padding: 22px 2px 16px; color: #7b8790; font-size: 11px; }
.catalog-result-meta strong { color: #34414a; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 0; transition: .22s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #cbd8df; box-shadow: 0 12px 28px rgba(32,50,62,.06); }
.product-card--selected { border-color: #74aac7; box-shadow: inset 0 0 0 1px #74aac7; }
.product-card__media { height: 235px; background: #edf2f4; position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.025); }
.ton-badge { position: absolute; left: 14px; top: 14px; background: rgba(26,28,30,.88); color: white; font-size: 10px; font-weight: 850; letter-spacing: .08em; padding: 7px 9px; border-radius: 4px; backdrop-filter: blur(5px); }
.selected-badge { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 4px; background: var(--yellow); color: #16191a; font-size: 10px; font-weight: 850; padding: 6px 8px; border-radius: 4px; }
.selected-badge svg { width: 14px; height: 14px; }
.product-card__body { padding: 21px; }
.product-card__meta { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.product-card h3 { font-size: 24px; margin: 0; letter-spacing: -.035em; }
.mini-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 22px 0; padding: 14px 0; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }
.mini-specs div { padding: 0 10px; min-width: 0; }
.mini-specs div:first-child { padding-left: 0; }
.mini-specs div + div { border-left: 1px solid #e5e9ec; }
.mini-specs span { display: block; font-size: 9px; line-height: 1.2; color: #88939a; margin-bottom: 4px; }
.mini-specs strong { display: block; font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.product-card__bottom { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.card-price span { display: block; font-size: 9px; color: #89949b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.card-price strong { font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-price--quote strong { font-size: 12px; max-width: 140px; display: block; line-height: 1.3; }
.product-card .secondary-button { font-size: 11px; white-space: nowrap; }
.product-card .secondary-button svg { width: 16px; }
.empty-results { padding: 80px 20px; text-align: center; color: #59656d; }
.empty-results button { display: block; margin: 14px auto 0; border: 0; background: transparent; color: var(--blue); font-weight: 800; }

/* Drawer */
.drawer-layer { position: fixed; inset: 0; z-index: 100; background: rgba(13,19,23,.48); backdrop-filter: blur(3px); display: flex; justify-content: flex-end; animation: fade .18s ease; }
.product-drawer { width: min(690px, 94vw); height: 100%; background: white; overflow-y: auto; box-shadow: -18px 0 50px rgba(0,0,0,.15); animation: slide .28s cubic-bezier(.2,.8,.2,1); }
.drawer-head { position: sticky; top: 0; z-index: 4; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 28px; letter-spacing: -.04em; margin: 4px 0 0; }
.drawer-media { margin: 24px 26px 0; height: 320px; background: #edf2f4; overflow: hidden; border-radius: 8px; position: relative; }
.drawer-media img { width: 100%; height: 100%; object-fit: cover; }
.drawer-media__badge { position: absolute; left: 14px; bottom: 14px; padding: 8px 10px; background: var(--slate); color: white; font-size: 11px; font-weight: 850; letter-spacing: .07em; border-radius: 4px; }
.thumb-row { display: flex; gap: 8px; margin: 10px 26px 0; }
.thumb { width: 72px; height: 52px; padding: 0; border: 2px solid transparent; background: #eef2f4; border-radius: 5px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--active { border-color: var(--blue); }
.drawer-price { margin: 24px 26px 0; padding: 20px 22px; background: #f4f7f8; border-left: 4px solid var(--yellow); display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.drawer-price span { display: block; color: #78848c; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.drawer-price strong { font-size: 23px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.drawer-price small { color: #8a969d; }
.drawer-tabs { display: grid; grid-template-columns: repeat(3,1fr); margin: 30px 26px 0; border-bottom: 1px solid var(--border); }
.drawer-tabs button { border: 0; background: transparent; padding: 13px 6px; color: #76828a; font-size: 12px; font-weight: 800; position: relative; }
.drawer-tabs button.active { color: var(--blue); }
.drawer-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--blue); }
.drawer-content { padding: 24px 26px 130px; }
.spec-group + .spec-group { margin-top: 28px; }
.spec-group h3, .section-inline-title h3 { font-size: 13px; margin: 0 0 10px; }
.spec-group dl { margin: 0; border-top: 1px solid #e8edef; }
.spec-group dl div { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 12px 0; border-bottom: 1px solid #edf0f2; }
.spec-group dt { color: #68757d; font-size: 12px; }
.spec-group dd { margin: 0; font-size: 12px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.section-inline-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e8edef; }
.section-inline-title span { font-size: 10px; color: #87929a; }
.equipment-row, .option-row { min-height: 46px; border-bottom: 1px solid #edf0f2; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.equipment-row svg { width: 16px; color: #2e7958; }
.option-row { justify-content: space-between; }
.option-row strong { font-variant-numeric: tabular-nums; font-size: 11px; }
.source-note { display: flex; gap: 8px; color: #7b878f; font-size: 10px; line-height: 1.5; padding: 14px 0; }
.source-note svg { width: 15px; flex: 0 0 auto; }
.empty-note { color: #7c878e; font-size: 12px; line-height: 1.6; }
.drawer-footer { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(9px); padding: 16px 26px 20px; border-top: 1px solid var(--border); }
.drawer-footer > span { display: block; text-align: center; margin-top: 8px; color: #87929a; font-size: 10px; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
@keyframes slide { from { transform: translateX(30px); opacity:.5 } to { transform:none; opacity:1 } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: .95fr 1.05fr; gap: 30px; }
  .hero__content { padding-left: 10px; }
  .hero h1 { font-size: 76px; }
  .hero__image { height: 450px; }
  .process-line { grid-template-columns: repeat(2,1fr); }
  .phase:nth-child(3) { border-left: 0; border-top: 1px solid #43494e; }
  .phase:nth-child(4) { border-top: 1px solid #43494e; }
  .benefits { grid-template-columns: repeat(2,1fr); }
  .benefits article:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .benefits article:nth-child(4) { border-top: 1px solid var(--border); }
  .step__label { display: none; }
  .step::after { margin-right: 6px; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .catalog-intro { gap: 40px; }
}

@media (max-width: 760px) {
  .landing-header { width: calc(100% - 36px); height: 74px; }
  .landing-header__note { display: none; }
  .hero { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0; }
  .hero__content { padding: 46px 22px 34px; order: 1; }
  .hero__kicker { font-size: 10px; }
  .hero h1 { font-size: clamp(62px, 20vw, 82px); margin: 24px 0 22px; }
  .hero__lead { font-size: 16px; line-height: 1.6; }
  .hero__actions { align-items: stretch; flex-direction: column; gap: 16px; margin-top: 28px; }
  .primary-button--hero { width: 100%; }
  .hero__micro { padding-left: 14px; }
  .hero__visual { width: 100%; padding: 0; order: 2; }
  .hero__visual::after { display: none; }
  .hero__image { height: 330px; border-radius: 0; }
  .hero__plate { position: relative; left: 0; bottom: 0; width: 100%; grid-template-columns: 1fr 1fr; }
  .process-section { padding: 72px 22px; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 42px; }
  .section-heading h2 { font-size: 38px; }
  .process-line { grid-template-columns: 1fr; }
  .phase { min-height: 0; padding: 26px 4px 28px; }
  .phase + .phase, .phase:nth-child(3), .phase:nth-child(4) { border-left: 0; border-top: 1px solid #43494e; }
  .phase__top { margin-bottom: 28px; }
  .process-total { grid-template-columns: auto 1fr auto; }
  .process-total strong { grid-row: 2; grid-column: 1 / -1; }
  .benefits { width: 100%; grid-template-columns: 1fr; border: 0; }
  .benefits article { min-height: 0; padding: 38px 22px; border-bottom: 1px solid var(--border); }
  .benefits article + article, .benefits article:nth-child(3), .benefits article:nth-child(4) { border-left: 0; border-top: 0; }
  .benefits svg { margin-bottom: 22px; }
  .landing-cta { padding: 58px 22px; flex-direction: column; align-items: stretch; }
  .landing-cta h2 { font-size: 38px; }
  .landing-footer { width: calc(100% - 36px); min-height: 110px; flex-wrap: wrap; gap: 16px; padding: 18px 0; }
  .landing-footer > span:last-child { margin-left: 0; width: 100%; }
  .appbar { height: 60px; padding: 0 12px; grid-template-columns: auto 1fr auto; }
  .appbar > .brand { justify-self: center; }
  .appbar .brand__divider, .appbar .brand__product { display: none; }
  .appbar__meta { display: none; }
  .icon-text-button span { display: none; }
  .step-strip { top: 60px; }
  .step-strip__desktop { display: none; }
  .step-strip__mobile { height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 11px; }
  .step-strip__mobile strong { color: var(--blue); }
  .step-strip__mobile span { font-weight: 700; }
  .catalog-page { width: calc(100% - 32px); padding: 38px 0 70px; }
  .catalog-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .catalog-intro h1 { font-size: 48px; }
  .catalog-intro__aside { grid-template-columns: 1fr auto; gap: 18px; }
  .catalog-intro__aside p { font-size: 13px; }
  .catalog-count strong { font-size: 30px; }
  .selection-bar { align-items: flex-start; gap: 12px; }
  .selection-bar div { flex-direction: column; gap: 3px; }
  .catalog-tools { grid-template-columns: 1fr; padding: 10px; }
  .catalog-result-meta { gap: 14px; align-items: flex-start; }
  .catalog-result-meta span:last-child { text-align: right; }
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .product-card__media { height: 225px; }
  .product-card__bottom { align-items: center; }
  .product-drawer { width: 100vw; }
  .drawer-head { padding: 16px 18px; }
  .drawer-media { margin: 16px 16px 0; height: 260px; }
  .thumb-row, .drawer-tabs { margin-left: 16px; margin-right: 16px; }
  .drawer-price { margin: 18px 16px 0; padding: 16px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .drawer-content { padding: 20px 16px 120px; }
  .drawer-footer { padding: 14px 16px 18px; }
}

/* Bekleyen talep durumu */
.pending-page { min-height: 100vh; background: var(--bg); }
.pending-header { width: min(1400px, calc(100% - 80px)); height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.pending-header > span { color: #6f7c85; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pending-hero { width: min(1160px, calc(100% - 80px)); margin: 0 auto; padding: 86px 0 60px; position: relative; }
.pending-hero__signal { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 34px; background: var(--slate); color: white; border-left: 5px solid var(--yellow); }
.pending-hero__signal svg { width: 24px; height: 24px; }
.pending-hero h1 { margin: 15px 0 22px; font-size: clamp(58px, 6.5vw, 96px); line-height: .91; letter-spacing: -.067em; }
.pending-hero h1 em { color: var(--blue); font-style: normal; }
.pending-hero > p { max-width: 780px; color: #58656e; font-size: 17px; line-height: 1.7; margin: 0; }
.pending-actions { display: flex; gap: 12px; margin-top: 34px; }
.pending-home-button { min-height: 56px; padding: 0 22px; border: 1px solid var(--border); background: white; }
.pending-summary { width: min(1160px, calc(100% - 80px)); margin: 0 auto 88px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; border: 1px solid var(--border); background: white; }
.pending-summary article { min-height: 190px; padding: 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.pending-summary article + article { border-left: 1px solid var(--border); }
.pending-summary__primary { border-top: 4px solid var(--blue); }
.pending-summary__label { display: flex; align-items: center; gap: 8px; margin-bottom: auto; color: #74818a; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pending-summary__label svg { width: 16px; height: 16px; color: var(--blue); }
.pending-summary strong { display: block; margin-top: 26px; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pending-summary span { display: block; margin-top: 7px; color: #7b878f; font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pending-explainer { padding: 74px max(40px, calc((100vw - 1160px)/2)); background: var(--slate); color: white; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.pending-explainer .eyebrow { color: #7dc8f2; }
.pending-explainer h2 { max-width: 570px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.045em; margin: 12px 0 0; }
.pending-explainer__text { align-self: end; }
.pending-explainer__text p { color: #aeb8be; line-height: 1.75; margin: 0; font-size: 13px; }
.pending-explainer__text p + p { margin-top: 14px; }

.pending-catalog-notice { margin: -6px 0 24px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border: 1px solid #d8cc76; border-left: 4px solid var(--yellow); background: #fffdf0; border-radius: 7px; }
.pending-catalog-notice__icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--slate); color: white; border-radius: 4px; }
.pending-catalog-notice__icon svg { width: 17px; height: 17px; }
.pending-catalog-notice strong { display: block; font-size: 13px; }
.pending-catalog-notice p { margin: 5px 0 0; color: #68737a; font-size: 11px; line-height: 1.55; }
.pending-catalog-notice button { border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 850; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pending-catalog-notice button svg { width: 16px; }
.step-strip--browse .step--active::before { background: var(--yellow); }
.step-strip--browse .step--locked { opacity: .42; }
.step-strip--browse .step--locked .step__index { background: #f1f3f4; color: #9aa4ab; }
.selection-bar__actions { display: flex !important; gap: 8px !important; align-items: center !important; }
.selection-bar__continue { min-height: 36px; padding: 0 13px !important; display: inline-flex; align-items: center; gap: 6px; background: var(--blue) !important; color: white !important; border-radius: 4px; }
.selection-bar__continue svg { width: 15px; }

@media (max-width: 760px) {
  .pending-header { width: calc(100% - 36px); height: 72px; }
  .pending-header > span { display: none; }
  .pending-hero { width: calc(100% - 36px); padding: 50px 0 42px; }
  .pending-hero__signal { width: 48px; height: 48px; margin-bottom: 25px; }
  .pending-hero h1 { font-size: clamp(48px, 15vw, 68px); }
  .pending-hero > p { font-size: 14px; }
  .pending-actions { flex-direction: column; align-items: stretch; }
  .pending-actions button { width: 100%; }
  .pending-summary { width: calc(100% - 36px); margin-bottom: 56px; grid-template-columns: 1fr; }
  .pending-summary article { min-height: 155px; padding: 24px 22px; }
  .pending-summary article + article { border-left: 0; border-top: 1px solid var(--border); }
  .pending-summary__primary { border-top: 4px solid var(--blue); }
  .pending-explainer { padding: 56px 22px; grid-template-columns: 1fr; gap: 32px; }
  .pending-explainer h2 { font-size: 36px; }
  .pending-catalog-notice { grid-template-columns: auto 1fr; align-items: start; padding: 16px; }
  .pending-catalog-notice button { grid-column: 2; justify-self: start; padding: 0; }
  .selection-bar { flex-direction: column; }
  .selection-bar__actions { width: 100%; flex-direction: row !important; justify-content: space-between; }
  .selection-bar__actions > button { min-height: 36px; }
}

/* v0.3 · Okunabilirlik, sade katalog ve yapılandırma ekranı */
body { font-size: 16px; }
.eyebrow { font-size: 13px; }
.landing-header__note { font-size: 14px; }
.hero__kicker { font-size: 13px; }
.hero__micro span { font-size: 13px; max-width: 190px; }
.hero__plate span { font-size: 12px; }
.hero__plate strong { font-size: 15px; }
.section-heading > p { font-size: 16px; }
.phase__top span, .phase__top small { font-size: 13px; }
.phase p { font-size: 15px; }
.process-total { font-size: 13px; }
.process-total strong { font-size: 14px; }
.benefits p { font-size: 15px; }
.landing-cta p { font-size: 16px; line-height: 1.6; }
.landing-footer { font-size: 13px; }
.appbar__meta { font-size: 13px; }
.step { font-size: 12px; }
.step__index { font-size: 11px; }
.step--complete { color: #567383; }
.step--complete .step__index { border-color: #93b4c7; color: var(--blue); background: #eef7fb; }
.catalog-intro__aside p { font-size: 16px; }
.catalog-count span { font-size: 12px; }
.catalog-result-meta { font-size: 13px; }
.catalog-result-meta--simple { border-top: 1px solid var(--border); padding-top: 18px; }
.product-card__meta { font-size: 12px; }
.mini-specs span { font-size: 11px; }
.mini-specs strong { font-size: 14px; }
.card-price span { font-size: 11px; }
.card-price--quote strong { font-size: 14px; max-width: 170px; }
.product-card .secondary-button { font-size: 13px; }
.ton-badge {
  left: 16px;
  top: 16px;
  background: #005f9d;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .055em;
  padding: 10px 13px;
  border-radius: 5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  backdrop-filter: none;
}
.drawer-media__badge { background: #005f9d; font-size: 14px; padding: 10px 13px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.drawer-price span { font-size: 12px; }
.drawer-price small { font-size: 13px; }
.drawer-tabs button { font-size: 14px; }
.spec-group h3, .section-inline-title h3 { font-size: 15px; }
.spec-group dt, .spec-group dd { font-size: 14px; }
.section-inline-title span { font-size: 12px; }
.equipment-row, .option-row { min-height: 50px; font-size: 14px; }
.option-row strong { font-size: 13px; }
.source-note { font-size: 12px; }
.empty-note { font-size: 14px; }
.drawer-footer > span { font-size: 12px; }
.pending-header > span { font-size: 13px; }
.pending-summary__label { font-size: 12px; }
.pending-summary span { font-size: 13px; }
.pending-explainer__text p { font-size: 15px; }
.pending-catalog-notice strong { font-size: 15px; }
.pending-catalog-notice p { font-size: 14px; }
.pending-catalog-notice button { font-size: 13px; }

/* EKRAN 3 · Makine yapılandırma */
.configuration-page { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 100px; }
.configuration-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 38px; }
.configuration-intro h1 { margin: 10px 0 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.configuration-intro > p { margin: 0 0 8px; max-width: 540px; color: #5e6b74; font-size: 17px; line-height: 1.65; }

.selected-machine-card { display: grid; grid-template-columns: minmax(360px, .82fr) 1.18fr; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 30px; }
.selected-machine-card__media { min-height: 330px; position: relative; overflow: hidden; background: #edf2f4; }
.selected-machine-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ton-badge--configuration { top: 18px; left: 18px; }
.selected-machine-card__body { padding: 30px 34px 32px; display: flex; flex-direction: column; }
.configuration-back-link { align-self: flex-start; border: 0; background: transparent; color: var(--blue); padding: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; }
.configuration-back-link svg { width: 17px; }
.selected-machine-card__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 34px; }
.selected-machine-card__title > div:first-child > span { display: block; color: #75828b; font-size: 13px; font-weight: 750; margin-bottom: 5px; }
.selected-machine-card__title h2 { margin: 0; font-size: clamp(34px, 3.2vw, 48px); letter-spacing: -.045em; }
.configuration-base-price { text-align: right; }
.configuration-base-price span { display: block; color: #75828b; font-size: 12px; font-weight: 750; margin-bottom: 5px; }
.configuration-base-price strong { display: block; font-size: 25px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.configuration-base-price--quote strong { max-width: 240px; font-size: 18px; line-height: 1.3; }
.configuration-key-specs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border: 1px solid var(--border); }
.configuration-key-specs > div { padding: 17px 18px; }
.configuration-key-specs > div + div { border-left: 1px solid var(--border); }
.configuration-key-specs span { display: block; color: #7a8790; font-size: 12px; margin-bottom: 5px; }
.configuration-key-specs strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.included-note { margin-top: 18px; display: flex; align-items: center; gap: 8px; color: #53636d; font-size: 14px; }
.included-note svg { width: 18px; color: #1e7654; }

.configuration-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.options-panel { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 30px; }
.options-panel__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.options-panel__heading h2 { margin: 7px 0 0; font-size: 34px; letter-spacing: -.04em; }
.option-count { color: #738089; font-size: 13px; white-space: nowrap; }
.option-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option-choice { width: 100%; min-height: 78px; border: 1px solid #dce3e8; border-radius: 7px; background: #fff; padding: 14px 15px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; color: #26323a; text-align: left; transition: .16s ease; }
.option-choice:hover { border-color: #a9c6d7; background: #fbfdfe; }
.option-choice--selected { border-color: var(--blue); background: #eef7fb; box-shadow: inset 0 0 0 1px var(--blue); }
.option-choice__check { width: 23px; height: 23px; border: 2px solid #aab7bf; border-radius: 4px; display: grid; place-items: center; color: #fff; background: #fff; }
.option-choice--selected .option-choice__check { background: var(--blue); border-color: var(--blue); }
.option-choice__check svg { width: 16px; }
.option-choice__name { font-size: 14px; font-weight: 750; line-height: 1.3; }
.option-choice > strong { font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.configuration-source-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; color: #74818a; font-size: 13px; line-height: 1.55; }
.configuration-source-note svg { flex: 0 0 auto; width: 18px; }
.configuration-empty-options { padding: 30px; background: #f5f7f8; color: #65727b; font-size: 15px; line-height: 1.6; }

.configuration-summary { position: sticky; top: 156px; background: var(--slate); color: #fff; border-radius: 10px; padding: 27px 25px 24px; border-top: 4px solid var(--yellow); }
.configuration-summary .eyebrow { color: #80c9ef; }
.configuration-summary h2 { margin: 7px 0 24px; font-size: 28px; letter-spacing: -.035em; }
.configuration-summary__rows { border-top: 1px solid #41484d; border-bottom: 1px solid #41484d; }
.configuration-summary__rows > div { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.configuration-summary__rows > div + div { border-top: 1px solid #353c41; }
.configuration-summary__rows span { color: #aeb8be; font-size: 13px; }
.configuration-summary__rows strong { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.configuration-total { padding: 25px 0 22px; }
.configuration-total > span { display: block; color: #aeb8be; font-size: 13px; margin-bottom: 7px; }
.configuration-total > strong { display: block; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
.configuration-total > small { display: block; margin-top: 10px; color: #99a6ad; font-size: 12px; line-height: 1.45; }
.configuration-continue[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.configuration-next-step { margin: 10px 4px 0; text-align: center; color: #9eabb2; font-size: 12px; line-height: 1.5; }
.configuration-page--empty { max-width: 760px; padding-top: 90px; }
.configuration-page--empty h1 { font-size: 54px; margin: 12px 0 18px; letter-spacing: -.05em; }
.configuration-page--empty p { color: #5e6b74; font-size: 17px; line-height: 1.65; margin: 0 0 28px; }

@media (max-width: 1020px) {
  .configuration-intro { gap: 40px; }
  .selected-machine-card { grid-template-columns: .9fr 1.1fr; }
  .configuration-layout { grid-template-columns: 1fr; }
  .configuration-summary { position: static; }
}

@media (max-width: 760px) {
  .eyebrow { font-size: 12px; }
  .hero__kicker { font-size: 11px; }
  .hero__lead { font-size: 18px; }
  .hero__micro span { font-size: 13px; }
  .section-heading > p { font-size: 15px; }
  .phase p, .benefits p { font-size: 15px; }
  .step-strip__mobile { font-size: 13px; }
  .catalog-intro__aside p { font-size: 15px; }
  .catalog-result-meta { font-size: 12px; }
  .product-card__meta { font-size: 12px; }
  .mini-specs span { font-size: 11px; }
  .mini-specs strong { font-size: 14px; }
  .ton-badge { font-size: 15px; padding: 10px 13px; }
  .drawer-tabs button { font-size: 14px; }
  .spec-group dt, .spec-group dd, .equipment-row, .option-row { font-size: 14px; }

  .configuration-page { width: calc(100% - 32px); padding: 38px 0 70px; }
  .configuration-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .configuration-intro h1 { font-size: 48px; }
  .configuration-intro > p { font-size: 16px; }
  .selected-machine-card { grid-template-columns: 1fr; }
  .selected-machine-card__media { min-height: 245px; }
  .selected-machine-card__body { padding: 22px 20px 24px; }
  .selected-machine-card__title { margin-top: 25px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .selected-machine-card__title h2 { font-size: 38px; }
  .configuration-base-price { text-align: left; }
  .configuration-base-price strong { font-size: 23px; }
  .configuration-key-specs { grid-template-columns: 1fr; }
  .configuration-key-specs > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .options-panel { padding: 22px 18px; }
  .options-panel__heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .options-panel__heading h2 { font-size: 31px; }
  .option-choice-grid { grid-template-columns: 1fr; }
  .option-choice { min-height: 74px; }
  .option-choice__name { font-size: 14px; }
  .option-choice > strong { font-size: 13px; }
  .configuration-summary { padding: 24px 20px 22px; }
  .configuration-summary h2 { font-size: 26px; }
  .configuration-total > strong { font-size: 26px; }
  .configuration-page--empty { padding-top: 60px; }
  .configuration-page--empty h1 { font-size: 44px; }
}

/* ------------------------------------------------------------
   EKRAN 4 — Ödeme Koşulları ve Son Kontrol
   ------------------------------------------------------------ */
.payment-page { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 110px; }
.payment-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; margin-bottom: 36px; }
.payment-intro h1 { margin: 10px 0 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.payment-contract-date { max-width: 510px; justify-self: end; width: 100%; padding: 20px 22px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.payment-contract-date label { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: #26333b; margin-bottom: 10px; }
.payment-contract-date label svg { width: 20px; color: var(--blue); }
.payment-contract-date input { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid #cbd5dc; border-radius: 5px; background: #fbfcfd; color: #1d2b33; padding: 0 13px; font: inherit; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.payment-contract-date input:focus { outline: 2px solid rgba(0,95,157,.16); border-color: var(--blue); }
.payment-contract-date p { margin: 10px 0 0; color: #687780; font-size: 14px; line-height: 1.55; }

.payment-order-summary { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.2fr); background: var(--slate); color: #fff; border-radius: 10px; overflow: hidden; border-top: 4px solid var(--yellow); }
.payment-order-summary__identity { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #3a4247; }
.payment-order-summary__identity > span { color: #95a5ae; font-size: 14px; font-weight: 750; }
.payment-order-summary__identity h2 { margin: 6px 0 18px; font-size: 36px; line-height: 1.05; letter-spacing: -.04em; }
.payment-order-summary__identity button { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #80c9ef; font-size: 14px; font-weight: 800; padding: 0; }
.payment-order-summary__identity button svg { width: 17px; }
.payment-order-summary__figures { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.payment-order-summary__figures > div { min-width: 0; padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }
.payment-order-summary__figures > div + div { border-left: 1px solid #3a4247; }
.payment-order-summary__figures span { color: #9eadb5; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.payment-order-summary__figures strong { font-size: 21px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.payment-order-summary__total { background: #22272b; }
.payment-order-summary__total strong { color: #fff; font-size: 28px; letter-spacing: -.035em; }

.payment-key-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 48px; }
.payment-key-card { min-height: 150px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; }
.payment-key-card > span { color: #65747d; font-size: 14px; font-weight: 750; }
.payment-key-card > strong { margin-top: 11px; color: #1d2a32; font-size: 26px; line-height: 1.15; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.payment-key-card > small { margin-top: auto; padding-top: 15px; color: #76848d; font-size: 13px; line-height: 1.45; }
.payment-key-card--primary { border-top: 4px solid var(--blue); }
.payment-key-card--yellow { border-top: 4px solid var(--yellow); background: #fffdf4; }

.payment-structure { padding: 34px 34px 32px; background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }
.payment-structure__heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; margin-bottom: 28px; }
.payment-structure__heading h2 { margin: 7px 0 0; font-size: 36px; letter-spacing: -.04em; }
.payment-structure__heading p { margin: 0; color: #5d6b74; font-size: 16px; line-height: 1.6; max-width: 650px; }
.payment-distribution { margin-bottom: 28px; }
.payment-distribution__bar { height: 18px; display: flex; overflow: hidden; border-radius: 4px; background: #edf1f3; }
.payment-distribution__bar > span { display: block; height: 100%; }
.payment-distribution__down { background: #005f9d; }
.payment-distribution__installments { background: #9ccce6; }
.payment-distribution__delivery { background: #e9c400; }
.payment-distribution__legend { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 11px; color: #52616a; font-size: 13px; font-weight: 700; }
.payment-distribution__legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.legend-dot--down { background: #005f9d; }
.legend-dot--installments { background: #9ccce6; }
.legend-dot--delivery { background: #e9c400; }
.payment-phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #dfe5e9; }
.payment-phase-grid article { min-height: 118px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.payment-phase-grid article + article { border-left: 1px solid #dfe5e9; }
.payment-phase-grid__number { color: #8aa0ad; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.payment-phase-grid strong { display: block; color: #24323a; font-size: 17px; }
.payment-phase-grid p { margin: 6px 0 0; color: #71808a; font-size: 14px; line-height: 1.45; }
.payment-phase-grid__delivery { background: #fffbed; box-shadow: inset 0 3px 0 var(--yellow); }

.payment-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #dfe5e9; border: 1px solid #dfe5e9; border-radius: 8px; overflow: hidden; margin-bottom: 48px; }
.payment-milestones > div { background: #fff; padding: 20px 22px; }
.payment-milestones span { display: block; color: #6d7a83; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.payment-milestones strong { display: block; color: #1f2c34; font-size: 18px; font-variant-numeric: tabular-nums; }
.payment-milestones__accent { box-shadow: inset 0 -4px 0 var(--yellow); }

.payment-schedule { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.payment-schedule__heading { padding: 28px 30px 24px; display: flex; align-items: end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--border); }
.payment-schedule__heading h2 { margin: 6px 0 0; font-size: 36px; letter-spacing: -.04em; }
.payment-proof { display: flex; align-items: center; gap: 10px; color: #5f7079; background: #f5f7f8; border: 1px solid #e0e6e9; border-radius: 7px; padding: 10px 13px; }
.payment-proof svg { width: 20px; }
.payment-proof span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.payment-proof span strong { color: #26343c; font-size: 12px; }
.payment-proof--ok { color: #006c48; background: #f1faf6; border-color: #c8e9db; }
.payment-table-wrap { overflow-x: auto; }
.payment-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.payment-table th { padding: 13px 18px; text-align: left; color: #65737c; background: #f6f8f9; border-bottom: 1px solid #dfe5e9; font-size: 12px; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
.payment-table td { padding: 15px 18px; border-bottom: 1px solid #edf0f2; color: #42515a; font-size: 14px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.payment-table tbody tr:last-child td { border-bottom: 0; }
.payment-table tbody tr:hover td { background: #fbfcfd; }
.payment-table td > strong { color: #24323a; font-size: 14px; }
.payment-table td small { display: block; color: #85929a; font-size: 12px; margin-top: 4px; line-height: 1.4; }
.payment-table__amount { text-align: right !important; white-space: nowrap; }
.payment-table__amount strong { font-size: 15px !important; }
.payment-row--delivery td { background: #fffdf3; border-top: 1px solid #eadb8e; border-bottom-color: #eadb8e; }
.payment-kind { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; font-size: 12px; font-weight: 800; }
.payment-kind--start { color: #005f9d; background: #eaf5fb; }
.payment-kind--production { color: #3d657a; background: #eef4f7; }
.payment-kind--delivery { color: #665600; background: #fff2a8; }
.payment-kind--use { color: #3e6254; background: #eef7f3; }
.payment-mobile-list { display: none; }

.payment-final-check { margin-top: 22px; background: var(--slate); color: #fff; border-radius: 10px; border-top: 4px solid var(--yellow); padding: 28px 30px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 40px; align-items: center; }
.payment-final-check > div:first-child { display: flex; gap: 10px; align-items: flex-start; color: #bec8cd; }
.payment-final-check > div:first-child svg { flex: 0 0 auto; margin-top: 2px; color: #7fc8ee; }
.payment-final-check p { margin: 0; font-size: 15px; line-height: 1.6; }
.payment-final-check p strong { color: #fff; }
.payment-final-check__total { text-align: right; }
.payment-final-check__total span { display: block; color: #aab6bc; font-size: 13px; margin-bottom: 6px; }
.payment-final-check__total strong { display: block; font-size: 27px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.payment-final-check__button { grid-column: 2; min-width: 300px; }
.payment-final-check__button[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.payment-final-check__next { grid-column: 1 / -1; text-align: right; color: #98a5ac; font-size: 12px; margin-top: -12px; }
.payment-prototype-note { margin: 14px 2px 0; display: flex; gap: 8px; align-items: flex-start; color: #78868e; font-size: 13px; line-height: 1.55; }
.payment-prototype-note svg { flex: 0 0 auto; width: 18px; }
.payment-page--empty { max-width: 790px; padding-top: 90px; }
.payment-page--empty h1 { font-size: 54px; line-height: 1.03; margin: 12px 0 18px; letter-spacing: -.05em; }
.payment-page--empty p { color: #5e6b74; font-size: 17px; line-height: 1.65; margin: 0 0 28px; }

@media (max-width: 1060px) {
  .payment-intro { gap: 40px; }
  .payment-order-summary { grid-template-columns: 1fr; }
  .payment-order-summary__identity { border-right: 0; border-bottom: 1px solid #3a4247; }
  .payment-key-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-structure__heading { gap: 30px; }
  .payment-phase-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-phase-grid article:nth-child(3) { border-left: 0; border-top: 1px solid #dfe5e9; }
  .payment-phase-grid article:nth-child(4) { border-top: 1px solid #dfe5e9; }
  .payment-milestones { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .payment-page { width: calc(100% - 32px); padding: 38px 0 76px; }
  .payment-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 26px; }
  .payment-intro h1 { font-size: 46px; }
  .payment-contract-date { justify-self: stretch; padding: 18px; }
  .payment-contract-date label { font-size: 15px; }
  .payment-contract-date p { font-size: 14px; }
  .payment-order-summary__identity { padding: 24px 20px; }
  .payment-order-summary__identity h2 { font-size: 31px; }
  .payment-order-summary__figures { grid-template-columns: 1fr; }
  .payment-order-summary__figures > div { padding: 18px 20px; }
  .payment-order-summary__figures > div + div { border-left: 0; border-top: 1px solid #3a4247; }
  .payment-order-summary__total strong { font-size: 26px; }
  .payment-key-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 34px; }
  .payment-key-card { min-height: 126px; padding: 18px 19px; }
  .payment-key-card > strong { font-size: 25px; }
  .payment-key-card > small { font-size: 14px; }
  .payment-structure { padding: 24px 18px 20px; }
  .payment-structure__heading { grid-template-columns: 1fr; gap: 13px; }
  .payment-structure__heading h2 { font-size: 32px; }
  .payment-structure__heading p { font-size: 15px; }
  .payment-distribution__bar { height: 16px; }
  .payment-distribution__legend { display: grid; gap: 7px; font-size: 13px; }
  .payment-phase-grid { grid-template-columns: 1fr; }
  .payment-phase-grid article { min-height: 96px; padding: 17px; }
  .payment-phase-grid article + article { border-left: 0; border-top: 1px solid #dfe5e9; }
  .payment-phase-grid strong { font-size: 16px; }
  .payment-phase-grid p { font-size: 14px; }
  .payment-milestones { grid-template-columns: 1fr; margin-bottom: 34px; }
  .payment-milestones > div { padding: 17px 19px; }
  .payment-milestones span { font-size: 13px; }
  .payment-milestones strong { font-size: 18px; }
  .payment-schedule__heading { padding: 23px 18px 20px; align-items: flex-start; flex-direction: column; }
  .payment-schedule__heading h2 { font-size: 32px; }
  .payment-proof { width: 100%; box-sizing: border-box; }
  .payment-table-wrap { display: none; }
  .payment-mobile-list { display: grid; gap: 10px; padding: 14px; background: #f5f7f8; }
  .payment-mobile-card { background: #fff; border: 1px solid #dfe5e9; border-radius: 7px; padding: 16px; }
  .payment-mobile-card--delivery { background: #fffdf2; border-color: #e4d378; }
  .payment-mobile-card__top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; color: #6d7c85; font-size: 13px; font-variant-numeric: tabular-nums; }
  .payment-mobile-card__top > span { font-weight: 850; color: var(--blue); }
  .payment-mobile-card h3 { margin: 13px 0 3px; color: #24323a; font-size: 17px; }
  .payment-mobile-card p { margin: 0; color: #74818a; font-size: 14px; line-height: 1.45; }
  .payment-mobile-card__amount { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e8ecef; color: #1f2d35; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
  .payment-final-check { padding: 23px 19px 21px; grid-template-columns: 1fr; gap: 20px; }
  .payment-final-check p { font-size: 15px; }
  .payment-final-check__total { text-align: left; }
  .payment-final-check__total strong { font-size: 26px; }
  .payment-final-check__button { grid-column: 1; min-width: 0; width: 100%; }
  .payment-final-check__next { grid-column: 1; text-align: left; margin-top: -8px; line-height: 1.45; }
  .payment-prototype-note { font-size: 13px; }
  .payment-page--empty { padding-top: 60px; }
  .payment-page--empty h1 { font-size: 43px; }
}

/* EKRAN 5 · İletişim ve kimlik bilgileri */
textarea { font: inherit; resize: vertical; }
button:disabled { cursor: not-allowed; }
.contact-page { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 100px; }
.contact-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; margin-bottom: 38px; }
.contact-intro h1 { margin: 10px 0 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.contact-intro > p { margin: 0 0 8px; max-width: 560px; color: #586872; font-size: 18px; line-height: 1.65; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.contact-form-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.customer-type-heading { padding: 28px 30px 0; }
.customer-type-heading h2 { margin: 7px 0 0; font-size: 34px; letter-spacing: -.04em; }
.customer-type-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 22px 30px 30px; }
.customer-type-option { min-height: 76px; border: 1px solid #dce3e8; border-radius: 7px; background: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left; color: #26343c; }
.customer-type-option:hover { border-color: #aac7d8; background: #fbfdfe; }
.customer-type-option--active { border-color: var(--blue); background: #eef7fb; box-shadow: inset 0 0 0 1px var(--blue); }
.customer-type-option__check { width: 25px; height: 25px; flex: 0 0 auto; border: 2px solid #a9b7bf; border-radius: 50%; display: grid; place-items: center; }
.customer-type-option--active .customer-type-option__check { border-color: var(--blue); background: var(--blue); color: #fff; }
.customer-type-option__check svg { width: 16px; }
.customer-type-option strong { display: block; font-size: 17px; }
.customer-type-option small { display: block; margin-top: 3px; color: #74818a; font-size: 14px; }
.contact-form-section { border-top: 1px solid var(--border); padding: 30px; }
.contact-section-title { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 22px; }
.contact-section-title > span { color: var(--blue); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; padding-top: 3px; }
.contact-section-title h3 { margin: 0; color: #24323a; font-size: 20px; letter-spacing: -.02em; }
.contact-section-title p { margin: 4px 0 0; color: #75828b; font-size: 15px; line-height: 1.45; }
.contact-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.contact-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.contact-field--wide, .contact-field--full { grid-column: 1 / -1; }
.contact-field > span { color: #44535c; font-size: 15px; font-weight: 800; }
.contact-field > span b { color: #b84c3e; }
.contact-field input, .contact-field textarea { width: 100%; border: 1px solid #ccd6dc; border-radius: 5px; background: #fff; color: #1f2c34; font-size: 16px; line-height: 1.45; transition: .16s ease; }
.contact-field input { min-height: 50px; padding: 0 14px; }
.contact-field textarea { min-height: 112px; padding: 12px 14px; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #9aa5ac; }
.contact-field input:focus, .contact-field textarea:focus { outline: 0; border-color: #70a8c8; box-shadow: 0 0 0 3px rgba(0,121,197,.08); }
.field-error { color: #b14034; font-size: 13px; font-weight: 700; line-height: 1.35; }
.document-file-input { display: none; }
.document-dropzone { min-height: 154px; border: 1px dashed #9eb2bd; border-radius: 8px; background: #f9fbfc; padding: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; transition: .16s ease; }
.document-dropzone--active { border-color: var(--blue); background: #edf7fc; box-shadow: inset 0 0 0 1px var(--blue); }
.document-dropzone--error { border-color: #cc756a; background: #fff9f8; }
.document-dropzone > svg { width: 31px; height: 31px; color: var(--blue); }
.document-dropzone strong { display: block; color: #24323a; font-size: 17px; }
.document-dropzone span { display: block; margin-top: 4px; color: #74818a; font-size: 14px; }
.document-attached { min-height: 100px; border: 1px solid #cfd9df; border-radius: 8px; padding: 12px; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 15px; align-items: center; background: #fbfcfd; }
.document-attached--error { border-color: #cc756a; }
.document-attached__icon { width: 78px; height: 72px; border-radius: 5px; background: #edf2f5; overflow: hidden; display: grid; place-items: center; color: var(--blue); }
.document-attached__icon img { width: 100%; height: 100%; object-fit: cover; }
.document-attached__icon svg { width: 31px; height: 31px; }
.document-attached__info { min-width: 0; }
.document-attached__info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #24323a; font-size: 16px; }
.document-attached__info span { display: block; margin-top: 5px; color: #7a8790; font-size: 13px; }
.document-attached__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 260px; }
.document-action { min-height: 36px; padding: 0 9px; border: 0; border-radius: 5px; background: #edf3f6; color: #35515f; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-size: 13px; font-weight: 800; }
.document-action:hover { background: #e2edf2; }
.document-action svg { width: 16px; }
.document-action--danger { color: #a6463d; background: #fbefed; }
.field-error--document { display: block; margin-top: 8px; }
.document-privacy-note { margin-top: 13px; display: flex; gap: 8px; align-items: flex-start; color: #78868f; font-size: 13px; line-height: 1.5; }
.document-privacy-note svg { flex: 0 0 auto; width: 17px; }
.contact-summary-card { position: sticky; top: 158px; background: var(--slate); color: #fff; border-radius: 10px; border-top: 4px solid var(--yellow); padding: 26px; }
.contact-summary-card .eyebrow { color: #8bccef; }
.contact-summary-card h2 { margin: 8px 0 24px; font-size: 28px; letter-spacing: -.035em; }
.contact-summary-card__rows { border-top: 1px solid #394147; }
.contact-summary-card__rows > div { min-height: 58px; padding: 12px 0; border-bottom: 1px solid #394147; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-summary-card__rows span { color: #aab6bc; font-size: 13px; }
.contact-summary-card__rows strong { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.contact-summary-back { margin: 14px 0 0; padding: 0; border: 0; background: transparent; color: #91cceb; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.contact-summary-back svg { width: 16px; }
.contact-readiness { margin: 24px 0 14px; padding: 14px; border: 1px solid #3c474d; border-radius: 7px; display: flex; gap: 10px; align-items: flex-start; background: #202529; }
.contact-readiness--ready { border-color: #426b5a; background: #1e3028; }
.contact-readiness__icon { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #343d42; color: #9fcce3; display: grid; place-items: center; }
.contact-readiness--ready .contact-readiness__icon { background: #28513f; color: #9ee0c2; }
.contact-readiness__icon svg { width: 16px; }
.contact-readiness strong { display: block; font-size: 15px; }
.contact-readiness p { margin: 4px 0 0; color: #aab6bc; font-size: 13px; line-height: 1.45; }
.contact-next-button[disabled] { opacity: .48; transform: none; }
.contact-next-note { display: block; margin-top: 9px; color: #84939b; font-size: 12px; line-height: 1.45; text-align: center; }
.contact-page--empty { max-width: 790px; padding-top: 90px; }
.contact-page--empty h1 { font-size: 54px; line-height: 1.03; margin: 12px 0 18px; letter-spacing: -.05em; }
.contact-page--empty p { color: #5e6b74; font-size: 17px; line-height: 1.65; margin: 0 0 28px; }

@media (max-width: 1040px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-summary-card { position: static; }
  .contact-intro { gap: 40px; }
}

@media (max-width: 760px) {
  .contact-page { width: calc(100% - 32px); padding: 38px 0 76px; }
  .contact-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
  .contact-intro h1 { font-size: 46px; }
  .contact-intro > p { font-size: 16px; }
  .customer-type-heading { padding: 24px 18px 0; }
  .customer-type-heading h2 { font-size: 30px; }
  .customer-type-switch { grid-template-columns: 1fr; padding: 18px; }
  .customer-type-option { min-height: 72px; }
  .contact-form-section { padding: 24px 18px; }
  .contact-section-title h3 { font-size: 19px; }
  .contact-section-title p { font-size: 14px; }
  .contact-field-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-field--wide, .contact-field--full { grid-column: 1; }
  .contact-field > span { font-size: 15px; }
  .contact-field input { min-height: 52px; font-size: 16px; }
  .contact-field textarea { font-size: 16px; }
  .document-dropzone { grid-template-columns: 1fr; justify-items: start; padding: 20px; }
  .document-dropzone .secondary-button { width: 100%; }
  .document-attached { grid-template-columns: 62px minmax(0, 1fr); }
  .document-attached__icon { width: 62px; height: 62px; }
  .document-attached__actions { grid-column: 1 / -1; max-width: none; justify-content: stretch; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .document-action { padding: 0 6px; font-size: 12px; }
  .contact-summary-card { padding: 22px 19px; }
  .contact-summary-card h2 { font-size: 27px; }
  .contact-summary-card__rows span { font-size: 13px; }
  .contact-summary-card__rows strong { font-size: 14px; }
  .contact-page--empty { padding-top: 60px; }
  .contact-page--empty h1 { font-size: 43px; }
}

/* EKRAN 6 · Randevu seçimi */
.appointment-page { width: min(1320px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 100px; }
.appointment-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; margin-bottom: 30px; }
.appointment-intro h1 { margin: 10px 0 0; font-size: clamp(48px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.appointment-intro > p { margin: 0 0 8px; max-width: 560px; color: #586872; font-size: 18px; line-height: 1.65; }
.appointment-test-note { margin-bottom: 18px; border: 1px solid #d7e4eb; border-left: 4px solid var(--blue); border-radius: 7px; background: #f2f8fb; color: #52636e; padding: 13px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.appointment-test-note svg { width: 18px; flex: 0 0 auto; color: var(--blue); margin-top: 1px; }
.appointment-test-note strong { color: #244a60; }
.appointment-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.appointment-picker-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.appointment-section-heading { display: flex; gap: 15px; align-items: flex-start; padding: 28px 30px 18px; }
.appointment-section-number { color: var(--blue); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; padding-top: 5px; }
.appointment-section-heading h2 { margin: 0; color: #24323a; font-size: 27px; letter-spacing: -.03em; }
.appointment-section-heading p { margin: 5px 0 0; color: #75828b; font-size: 15px; line-height: 1.45; }
.appointment-date-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 30px 30px; }
.appointment-date { position: relative; min-height: 132px; border: 1px solid #d6e0e6; border-radius: 8px; background: #fff; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #2c3a42; text-align: left; transition: .16s ease; }
.appointment-date:hover { border-color: #89b4cd; background: #f9fcfd; transform: translateY(-1px); }
.appointment-date > span { font-size: 14px; color: #6e7e87; text-transform: capitalize; margin-bottom: 9px; }
.appointment-date > strong { font-size: 38px; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.appointment-date > small { margin-top: 8px; font-size: 13px; font-weight: 850; color: #6b7880; letter-spacing: .07em; }
.appointment-date > i { position: absolute; top: 10px; right: 10px; width: 27px; height: 27px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.appointment-date > i svg { width: 16px; }
.appointment-date--active { border-color: var(--blue); background: #edf7fc; box-shadow: inset 0 0 0 1px var(--blue); }
.appointment-date--active > strong, .appointment-date--active > small { color: var(--blue); }
.appointment-time-section { border-top: 1px solid var(--border); background: #fbfcfd; min-height: 220px; }
.appointment-section-heading--time { padding-bottom: 16px; }
.appointment-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 30px 30px; }
.appointment-time { min-height: 54px; border: 1px solid #d4dfe5; border-radius: 7px; background: #fff; color: #34454f; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 12px; transition: .16s ease; }
.appointment-time:hover { border-color: #8bb6cf; background: #f4fafd; }
.appointment-time svg { width: 18px; color: #7d8b94; }
.appointment-time strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.appointment-time--active { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 5px 14px rgba(0,95,157,.15); }
.appointment-time--active svg { color: #fff; }
.appointment-time--active svg:last-child { width: 17px; }
.appointment-time-placeholder { margin: 0 30px 30px; min-height: 88px; border: 1px dashed #c8d4db; border-radius: 8px; color: #829099; display: flex; align-items: center; gap: 12px; padding: 18px; background: #fff; font-size: 15px; }
.appointment-time-placeholder svg { color: #9bb2c0; flex: 0 0 auto; }
.appointment-summary-card { position: sticky; top: 158px; background: var(--slate); color: #fff; border-radius: 10px; border-top: 4px solid var(--yellow); padding: 26px; }
.appointment-summary-card .eyebrow { color: #8bccef; }
.appointment-summary-card h2 { margin: 8px 0 20px; font-size: 29px; line-height: 1.1; letter-spacing: -.035em; }
.appointment-summary-main { padding: 17px; border: 1px solid #3c474d; border-radius: 8px; background: #202529; display: flex; gap: 13px; align-items: flex-start; }
.appointment-summary-main > svg { width: 24px; height: 24px; flex: 0 0 auto; color: #83c9ee; }
.appointment-summary-main span, .appointment-summary-main small { display: block; color: #9fadb5; font-size: 13px; }
.appointment-summary-main strong { display: block; margin: 3px 0 4px; font-size: 18px; color: #fff; }
.appointment-summary-rows { margin-top: 16px; border-top: 1px solid #394147; }
.appointment-summary-rows > div { min-height: 56px; padding: 11px 0; border-bottom: 1px solid #394147; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.appointment-summary-rows span { color: #aab6bc; font-size: 13px; }
.appointment-summary-rows strong { color: #fff; font-size: 14px; text-align: right; }
.appointment-payment-impact { margin-top: 18px; padding: 15px; border-radius: 7px; background: #222a2e; border: 1px solid #38464d; }
.appointment-payment-impact .eyebrow { margin-bottom: 8px; font-size: 10px; }
.appointment-payment-impact > div { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appointment-payment-impact span { color: #a7b5bc; font-size: 12px; }
.appointment-payment-impact strong { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.appointment-readiness { margin: 20px 0 13px; padding: 13px; border: 1px solid #3c474d; border-radius: 7px; background: #202529; display: flex; gap: 10px; align-items: flex-start; }
.appointment-readiness > span { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #343d42; color: #9fcce3; }
.appointment-readiness > span svg { width: 16px; }
.appointment-readiness--ready { border-color: #426b5a; background: #1e3028; }
.appointment-readiness--ready > span { background: #28513f; color: #9ee0c2; }
.appointment-readiness strong { display: block; font-size: 15px; }
.appointment-readiness p { margin: 4px 0 0; color: #aab6bc; font-size: 13px; line-height: 1.45; }
.appointment-submit[disabled] { opacity: .48; transform: none; }
.appointment-next-note { display: block; margin-top: 9px; color: #84939b; font-size: 12px; line-height: 1.45; text-align: center; }
.appointment-back-link { width: 100%; margin-top: 14px; min-height: 40px; border: 0; background: transparent; color: #91cceb; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; }
.appointment-back-link:hover { color: #c3e5f7; }
.appointment-back-link svg { width: 16px; }
.appointment-page--empty { max-width: 790px; padding-top: 90px; }
.appointment-page--empty h1 { font-size: 54px; line-height: 1.03; margin: 12px 0 18px; letter-spacing: -.05em; }
.appointment-page--empty p { color: #5e6b74; font-size: 17px; line-height: 1.65; margin: 0 0 28px; }

@media (max-width: 1080px) {
  .appointment-layout { grid-template-columns: 1fr; }
  .appointment-summary-card { position: static; }
  .appointment-date-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  .appointment-page { width: calc(100% - 32px); padding: 38px 0 76px; }
  .appointment-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; }
  .appointment-intro h1 { font-size: 46px; }
  .appointment-intro > p { font-size: 16px; }
  .appointment-test-note { font-size: 13px; }
  .appointment-section-heading { padding: 24px 18px 16px; }
  .appointment-section-heading h2 { font-size: 23px; }
  .appointment-section-heading p { font-size: 14px; }
  .appointment-date-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px 24px; gap: 9px; }
  .appointment-date { min-height: 118px; padding: 13px; }
  .appointment-date > strong { font-size: 34px; }
  .appointment-time-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px 24px; }
  .appointment-time { min-height: 56px; }
  .appointment-time-placeholder { margin: 0 18px 24px; }
  .appointment-summary-card { padding: 22px 19px; }
  .appointment-summary-card h2 { font-size: 27px; }
  .appointment-page--empty { padding-top: 60px; }
  .appointment-page--empty h1 { font-size: 43px; }
}

/* EKRAN 7 · Başvuru tamamlandı */
.completion-page { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 66px 0 100px; }
.completion-hero { max-width: 860px; }
.completion-check { width: 66px; height: 66px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; margin-bottom: 26px; box-shadow: 0 12px 28px rgba(0,95,157,.18); }
.completion-check svg { width: 34px; height: 34px; stroke-width: 2.2; }
.completion-hero h1 { margin: 10px 0 20px; font-size: clamp(54px, 7vw, 88px); line-height: .94; letter-spacing: -.06em; }
.completion-hero h1 em { color: var(--blue); font-style: normal; }
.completion-hero > p { max-width: 780px; margin: 0; color: #5a6972; font-size: 19px; line-height: 1.65; }
.completion-summary { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; margin-top: 40px; }
.completion-summary article { min-height: 150px; border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.completion-summary article > span { color: #708089; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.completion-summary article > span svg { width: 18px; color: var(--blue); }
.completion-summary article > strong { display: block; margin-top: 9px; color: #24323a; font-size: 22px; line-height: 1.2; }
.completion-summary article > small { margin-top: 7px; color: #78868f; font-size: 13px; line-height: 1.45; }
.completion-request-id { border-top: 4px solid var(--yellow) !important; background: #fffef7 !important; }
.completion-request-id > strong { color: var(--blue) !important; font-size: 27px !important; font-variant-numeric: tabular-nums; letter-spacing: .015em; }
.completion-transmission-note { margin-top: 18px; border: 1px solid #d4e3eb; border-left: 4px solid var(--blue); border-radius: 8px; background: #f2f8fb; padding: 17px 18px; display: flex; gap: 13px; color: #51636e; }
.completion-transmission-note > svg { flex: 0 0 auto; color: var(--blue); margin-top: 2px; }
.completion-transmission-note strong { display: block; color: #244a60; font-size: 15px; }
.completion-transmission-note p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; }
.completion-next { margin-top: 32px; padding: 30px; border-radius: 10px; background: var(--slate); color: #fff; display: grid; grid-template-columns: 1fr 320px; gap: 42px; align-items: center; }
.completion-next .eyebrow { color: #86c8ea; }
.completion-next h2 { margin: 8px 0 10px; max-width: 650px; font-size: 31px; line-height: 1.15; letter-spacing: -.035em; }
.completion-next p { margin: 0; color: #acb8be; font-size: 16px; line-height: 1.55; }
.completion-next__status { min-height: 92px; border: 1px solid #3b474d; border-radius: 8px; background: #20262a; padding: 17px; display: flex; gap: 13px; align-items: center; }
.completion-next__status > svg { width: 29px; height: 29px; flex: 0 0 auto; color: #e2cc4b; }
.completion-next__status span { display: block; color: #9eabb2; font-size: 13px; }
.completion-next__status strong { display: block; margin-top: 4px; font-size: 16px; line-height: 1.35; }
.completion-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.pending-prototype-note { max-width: 1180px; margin: 0 auto 18px; border: 1px solid #d4e3eb; border-left: 4px solid var(--blue); border-radius: 8px; background: #f2f8fb; padding: 14px 16px; display: flex; gap: 10px; color: #53646f; font-size: 14px; line-height: 1.5; }
.pending-prototype-note svg { width: 18px; flex: 0 0 auto; color: var(--blue); margin-top: 1px; }
.pending-prototype-note strong { color: #244a60; }
.appointment-next-note--test { color: #9eb3bf; }

@media (max-width: 900px) {
  .completion-summary { grid-template-columns: 1fr; }
  .completion-summary article { min-height: 122px; }
  .completion-next { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 760px) {
  .completion-page { width: calc(100% - 32px); padding: 42px 0 78px; }
  .completion-check { width: 58px; height: 58px; margin-bottom: 20px; }
  .completion-check svg { width: 29px; }
  .completion-hero h1 { font-size: 53px; }
  .completion-hero > p { font-size: 16px; }
  .completion-summary { margin-top: 30px; }
  .completion-summary article { padding: 19px; }
  .completion-request-id > strong { font-size: 23px !important; }
  .completion-transmission-note { padding: 15px; }
  .completion-transmission-note p { font-size: 14px; }
  .completion-next { padding: 23px 19px; }
  .completion-next h2 { font-size: 27px; }
  .completion-next p { font-size: 15px; }
  .completion-actions { display: grid; }
  .completion-actions .primary-button, .completion-actions .secondary-button { width: 100%; justify-content: center; }
  .pending-prototype-note { width: calc(100% - 32px); box-sizing: border-box; }
}

/* v0.8 · Hızlı seçim, mobil fiyat görünürlüğü, randevu zorunluluğu ve cache-safe yayın */
.product-card--clickable { cursor: pointer; }
.product-card--clickable:focus-visible { outline: 3px solid rgba(0,95,157,.22); outline-offset: 3px; }
.product-card--clickable:hover { border-color: #b8ccd8; box-shadow: 0 10px 26px rgba(19,48,64,.08); }
.product-card--clickable:hover .product-card__media img { transform: scale(1.015); }
.product-card__media img { transition: transform .2s ease; }

.options-panel__actions { display: flex; align-items: center; gap: 12px; }
.select-all-options { min-height: 38px; border: 1px solid #9fc1d4; border-radius: 5px; background: #f4f9fc; color: var(--blue); padding: 0 13px; font-size: 13px; font-weight: 850; white-space: nowrap; }
.select-all-options:hover { background: #e9f5fb; border-color: var(--blue); }
.configuration-mobile-total { display: none; }

.payment-intro__date-status { max-width: 510px; justify-self: end; width: 100%; padding: 20px 22px; box-sizing: border-box; background: #fff; border: 1px solid var(--border); border-radius: 8px; display: flex; gap: 13px; align-items: center; }
.payment-intro__date-status > svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--blue); }
.payment-intro__date-status span { display: block; color: #66747d; font-size: 13px; font-weight: 800; }
.payment-intro__date-status strong { display: block; margin-top: 4px; color: #24323a; font-size: 20px; font-variant-numeric: tabular-nums; }
.payment-intro__date-status small { display: block; margin-top: 4px; color: #7a878f; font-size: 13px; line-height: 1.4; }

.payment-appointment-picker { position: relative; z-index: 1; margin-bottom: 22px; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.payment-appointment-picker__heading { padding: 26px 30px 20px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: end; }
.payment-appointment-picker__heading h2 { margin: 7px 0 0; font-size: 34px; letter-spacing: -.04em; }
.payment-appointment-picker__heading p { margin: 0; color: #5e6d76; font-size: 16px; line-height: 1.6; }
.payment-appointment-date-grid { padding-bottom: 24px; }
.payment-date-required { margin: 0 30px 26px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #e1d183; border-left: 4px solid var(--yellow); border-radius: 6px; background: #fffdf2; color: #655b2f; font-size: 14px; font-weight: 750; }
.payment-date-required svg { width: 18px; flex: 0 0 auto; }

.payment-page--date-focus::before { content: ''; position: fixed; inset: 0; z-index: 90; background: rgba(10,16,20,.72); pointer-events: none; animation: paymentFocusShade .25s ease both; }
.payment-appointment-picker--focus { z-index: 91; border-color: #8cc4e1; box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 20px 70px rgba(0,0,0,.35), 0 0 0 8px rgba(0,121,197,.2); animation: paymentCalendarPulse 1s ease-in-out 3; }
@keyframes paymentFocusShade { from { opacity: 0; } to { opacity: 1; } }
@keyframes paymentCalendarPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.006); } }

.payment-plan-placeholder { margin-bottom: 22px; padding: 30px; border: 1px dashed #a9bbc5; border-radius: 10px; background: #f7fafb; display: flex; gap: 16px; align-items: flex-start; color: #5e707b; }
.payment-plan-placeholder > svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--blue); }
.payment-plan-placeholder strong { display: block; color: #25343d; font-size: 18px; }
.payment-plan-placeholder p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }

@media (max-width: 760px) {
  .options-panel__heading { gap: 14px; }
  .options-panel__actions { width: 100%; justify-content: space-between; }
  .select-all-options { min-height: 42px; font-size: 14px; }
  .configuration-page { padding-bottom: 150px; }
  .configuration-mobile-total { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; min-height: 68px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border: 1px solid #364148; border-top: 4px solid var(--yellow); border-radius: 9px; background: rgba(26,28,30,.97); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
  .configuration-mobile-total div { min-width: 0; }
  .configuration-mobile-total span { display: block; color: #aebbc2; font-size: 12px; }
  .configuration-mobile-total strong { display: block; margin-top: 3px; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .configuration-mobile-total small { flex: 0 0 auto; color: #8dc9e9; font-size: 12px; font-weight: 800; text-align: right; }

  .payment-intro__date-status { justify-self: stretch; padding: 17px; }
  .payment-appointment-picker__heading { grid-template-columns: 1fr; gap: 10px; padding: 22px 18px 16px; }
  .payment-appointment-picker__heading h2 { font-size: 30px; }
  .payment-appointment-picker__heading p { font-size: 15px; }
  .payment-appointment-date-grid { padding-bottom: 20px; }
  .payment-date-required { margin: 0 18px 20px; font-size: 13px; }
  .payment-plan-placeholder { padding: 22px 18px; }
}

.finance-brand-line{white-space:nowrap;font-size:clamp(10px,1.55vw,16px);letter-spacing:-.02em}
.brand__logo{display:block;width:auto;height:52px;object-fit:contain}.brand--compact .brand__logo{height:38px}
.appointment-picker-card{background:linear-gradient(145deg,#fff 0%,#f3f8fc 55%,#eef6fb 100%);border:1px solid #c9dce9}
.appointment-date{background:#fff;border-color:#bfd3e0}.appointment-date:hover{border-color:#0079c5;box-shadow:0 8px 22px rgba(0,95,157,.1)}
.appointment-date--active{background:#005f9d;color:#fff;border-color:#005f9d;box-shadow:0 10px 24px rgba(0,95,157,.22)}
.appointment-time{background:#fff;border-color:#bfd3e0}.appointment-time--active{background:#e9c400;color:#191c1d;border-color:#c5a800}
@media(max-width:640px){.finance-brand-line{font-size:clamp(8px,2.65vw,12px)}.brand__logo{height:42px}}

.hero__kicker{white-space:nowrap;font-size:clamp(9px,1.4vw,14px)}

.completion-appointment-details{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:24px;display:grid;gap:14px}
.completion-appointment-details h2{margin:0 0 8px}.completion-appointment-details>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid #eef2f5}
.completion-appointment-details a{text-decoration:none;justify-content:center}


/* v1.2.4 — tema v1.1.1 aynen korunur; yalnız gerekli davranış kuralları */
.finance-brand-line,
.hero__kicker{white-space:nowrap!important;max-width:100%;min-width:0;line-height:1.15;}
.finance-brand-line{font-size:clamp(6px,1.7vw,14px)!important;}
.hero__kicker{font-size:clamp(6px,1.55vw,13px)!important;}
.cancel-request-button{border-color:#d8a8a2;color:#9b392f;background:#fff7f6;}
.cancel-request-button:hover{background:#fcebea;}
.field-error{display:block;color:#b84c3e;font-size:12px;line-height:1.4;margin-top:4px;}
.appointment-submit-error{margin:8px 0 0;text-align:center;}
.contact-field>span small{font:inherit;font-weight:500;color:var(--muted,#687176);}
@media(max-width:760px){.finance-brand-line{font-size:clamp(6px,2.0vw,9px)!important}.hero__kicker{font-size:clamp(6px,1.95vw,9px)!important}}

/* v1.3.0 — Infobip SMS telefon doğrulaması */
.phone-verify-row,.phone-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.phone-verify-button,.phone-code-button{border:0;border-radius:5px;padding:0 16px;min-height:50px;background:#0879bd;color:#fff;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
.phone-verify-button:hover,.phone-code-button:hover{background:#086ca6}
.phone-verify-button:disabled,.phone-code-button:disabled{opacity:.55;cursor:not-allowed}
.phone-verified-label{margin-left:6px;color:#2b8b63!important;font-weight:800!important}
.phone-verify-message{display:block;color:#5c6f78;font-size:12px;line-height:1.45}
.phone-verify-message--ok{color:#2f7d5c;font-weight:700}
.contact-field--phone-verify input:disabled{background:#f2f5f6;color:#56636a}
@media(max-width:620px){
  .phone-verify-row,.phone-code-row{grid-template-columns:1fr}
  .phone-verify-button,.phone-code-button{width:100%}
}
@media(prefers-color-scheme:dark){
  .phone-verify-message{color:#aab6bc}
  .phone-verify-message--ok{color:#9ee0c2}
  .contact-field--phone-verify input:disabled{background:#252b2f;color:#c7d0d4}
}