/* OrderRelay · tanıtım sitesi
   Düzen: geniş beyaz alan, tek sütun bölümler; ürün hikâyesini hero'daki slayt anlatır, gerisi sakin kalır. */
:root {
  --paper: #FAF8F4;
  --surface: #FFFFFF;
  --sunk: #F3EFE9;
  --ink: #2E211A;
  --ink-2: #6A5A4F;
  --line: #E7E0D7;
  --acc: #1FB5A8;
  --acc-ink: #12897F;
  --acc-soft: #D9F3F0;
  --on-acc: #2E211A;
  --ok: #3C9A4F;
  --ok-soft: #DDF0E0;
  --warn: #B86A12;
  --warn-soft: #FBEBD6;
  --hl-name: #FCE7C8;
  --hl-addr: #DCEBFA;
  --hl-prod: #D9F3F0;
  --hl-pay: #EADFF7;
  --shadow: 0 1px 2px rgba(46, 33, 26, .06), 0 12px 32px -12px rgba(46, 33, 26, .18);
  --f-disp: "Gabarito", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --f-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
  --max: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17110E; --surface: #211915; --sunk: #1C1512; --ink: #F4EEE8; --ink-2: #B9AA9E; --line: #3A2E27;
    --acc: #2CC9BB; --acc-ink: #5FD8CC; --acc-soft: #173A36; --on-acc: #17110E; --ok: #5DBB70; --ok-soft: #1E3424;
    --warn: #E5A05A; --warn-soft: #3A2A17; --hl-name: #4A3518; --hl-addr: #1E3348; --hl-prod: #173A36; --hl-pay: #33264A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17110E; --surface: #211915; --sunk: #1C1512; --ink: #F4EEE8; --ink-2: #B9AA9E; --line: #3A2E27;
  --acc: #2CC9BB; --acc-ink: #5FD8CC; --acc-soft: #173A36; --on-acc: #17110E; --ok: #5DBB70; --ok-soft: #1E3424;
  --warn: #E5A05A; --warn-soft: #3A2A17; --hl-name: #4A3518; --hl-addr: #1E3348; --hl-prod: #173A36; --hl-pay: #33264A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--acc-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 58ch; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; font: 600 16px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.btn-primary { background: var(--acc); color: var(--on-acc); }
.btn-primary:hover { transform: translateY(-1px); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); text-decoration: none; }
.btn svg { width: 18px; height: 18px; }

/* Üst çubuk */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand span { font: 800 22px/1 var(--f-disp); letter-spacing: -.02em; }
.brand b { color: var(--acc-ink); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--ink); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } }

/* Hero */
.hero { padding-block: 56px 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero h1 { font-size: clamp(38px, 5vw, 60px); }
.hero h1 em { font-style: normal; color: var(--acc-ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-2); }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 16px; height: 16px; color: var(--acc-ink); flex: none; }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero { padding-block: 32px 56px; } }

/* Slayt gösterisi */
.show { display: grid; gap: 14px; min-width: 0; }
.screen { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.screen-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.screen-bar strong { margin-left: 6px; color: var(--ink); font-weight: 600; }
.slides { position: relative; height: 392px; }
/* Giden slayt hızla söner, gelen biraz gecikmeli belirir: iki slaydın yazısı üst üste binmez */
.slide { position: absolute; inset: 0; padding: 22px; display: grid; align-content: start; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .2s, transform .4s ease .2s, visibility 0s; }
@media (max-width: 520px) { .slides { height: 452px; } .slide { padding: 16px; } }
.caption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; }
.cap-step { font: 700 13px/1 var(--f-disp); color: var(--acc-ink); background: var(--acc-soft); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.cap-text { font-size: 15px; color: var(--ink); min-width: 0; }
.cap-ctrl { display: flex; gap: 6px; }
.cap-ctrl button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cap-ctrl button:hover { border-color: var(--ink-2); }
.cap-ctrl svg { width: 16px; height: 16px; }
.bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bars button { height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.bars button span { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bars button span::after { content: ""; display: block; height: 100%; width: 0; background: var(--acc); }
.bars button.done span::after { width: 100%; }
.bars button.on span::after { animation: fill var(--dur, 5.5s) linear forwards; }
.show.paused .bars button.on span::after { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bars button.on span::after { width: 100%; } }

/* Slayt içerikleri */
.chat { display: grid; gap: 8px; }
.chat-who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); padding-bottom: 4px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--hl-name); color: var(--ink); display: grid; place-items: center; font: 700 13px/1 var(--f-disp); }
.bubble { justify-self: start; max-width: 88%; background: var(--sunk); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; }
.bubble.me { justify-self: end; background: var(--acc-soft); border-radius: 16px 16px 4px 16px; }
.paste { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding-top: 4px; }
.paste kbd { font: 600 12px/1 var(--f-body); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 4px 6px; background: var(--surface); color: var(--ink); }

.dmtext { font-size: 14.5px; line-height: 1.9; background: var(--sunk); border-radius: 10px; padding: 12px 14px; }
.dmtext mark { color: var(--ink); border-radius: 4px; padding: 1px 3px; }
.m-name { background: var(--hl-name); } .m-addr { background: var(--hl-addr); } .m-prod { background: var(--hl-prod); } .m-pay { background: var(--hl-pay); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.fields div { display: grid; gap: 1px; min-width: 0; }
.fields dt { color: var(--ink-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.fields dt i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.match { display: grid; gap: 10px; }
.match-row { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.4fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.match-row .q { font-size: 14px; background: var(--sunk); border-radius: 6px; padding: 4px 8px; justify-self: start; }
.match-row svg { width: 18px; height: 18px; color: var(--acc-ink); }
.match-row .p { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.match-row .p b { font-weight: 600; }
.match-row .p span { color: var(--ink-2); font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-acc { background: var(--acc-soft); color: var(--acc-ink); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.check-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
@media (max-width: 520px) { .match-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .match-row svg { transform: rotate(90deg); } }

.order { display: grid; gap: 12px; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-head h4 { margin: 0; font: 700 18px/1.2 var(--f-disp); display: flex; align-items: center; gap: 8px; }
.order-head h4 svg { width: 22px; height: 22px; color: var(--ok); }
.order-lines { display: grid; gap: 6px; font-size: 14px; }
.order-lines div { display: flex; justify-content: space-between; gap: 12px; }
.order-lines span:last-child, .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-lines .muted { color: var(--ink-2); }
.order-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font: 700 18px/1.2 var(--f-disp); }
.order-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }

/* Bölümler */
.section { padding-block: 96px; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; max-width: 680px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
@media (max-width: 640px) { .section { padding-block: 64px; } .sec-head { margin-bottom: 32px; } }

/* Sorun + hesap */
.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pains { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pains li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.pains svg { width: 22px; height: 22px; color: var(--warn); margin-top: 3px; }
.pains b { display: block; font-weight: 600; }
.pains span { color: var(--ink-2); font-size: 16px; }
.calc { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: grid; gap: 20px; }
.calc h3 { font-size: 22px; }
.calc label { display: grid; gap: 8px; font-size: 15px; font-weight: 500; }
.calc .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc output { font: 700 16px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.calc input[type=range] { width: 100%; accent-color: var(--acc); }
.calc-result { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 4px; }
.calc-result strong { font: 800 clamp(40px, 5vw, 52px)/1 var(--f-disp); letter-spacing: -.02em; color: var(--acc-ink); font-variant-numeric: tabular-nums; }
.calc-result span { color: var(--ink-2); font-size: 15px; }
.calc small { color: var(--ink-2); font-size: 13px; }
@media (max-width: 860px) { .cost { grid-template-columns: minmax(0, 1fr); gap: 40px; } .calc { padding: 22px; } }

/* Adımlar */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: 20px; }
.steps li::before { counter-increment: s; content: "0" counter(s); font: 700 14px/1 var(--f-disp); color: var(--acc-ink); letter-spacing: .04em; }
.steps h3 { font-size: 22px; }
.steps p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Özellikler */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; }
.feat { display: grid; gap: 8px; align-content: start; }
.feat svg { width: 26px; height: 26px; color: var(--acc-ink); margin-bottom: 6px; }
.feat h3 { font-size: 19px; letter-spacing: -.01em; }
.feat p { color: var(--ink-2); font-size: 16px; }
.feat .ex { font-size: 14px; color: var(--ink); background: var(--sunk); border-radius: 6px; padding: 6px 10px; justify-self: start; }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .feats { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Güven */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.trust-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.trust-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.trust-list svg { width: 22px; height: 22px; color: var(--acc-ink); margin-top: 2px; }
.trust-list b { display: block; font-weight: 600; }
.trust-list span { color: var(--ink-2); font-size: 15.5px; }
.stat { display: grid; gap: 6px; }
.stat strong { font: 800 clamp(56px, 7vw, 84px)/1 var(--f-disp); letter-spacing: -.03em; color: var(--acc-ink); }
.stat span { color: var(--ink-2); max-width: 40ch; }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Fiyatlar */
.billing { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; background: var(--surface); margin-bottom: 32px; }
.billing button { border: 0; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--f-body); padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.billing em { font-style: normal; color: var(--acc-ink); }
.billing button[aria-pressed="true"] em { color: var(--acc); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.plan.best { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), var(--shadow); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan h3 { font-size: 22px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price strong { font: 800 46px/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price span { color: var(--ink-2); font-size: 15px; }
.plan > p { color: var(--ink-2); font-size: 15.5px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; font-size: 15.5px; }
.plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.plan li svg { width: 18px; height: 18px; color: var(--acc-ink); margin-top: 3px; }
.plan .btn { width: 100%; }
.plans-note { margin-top: 24px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }

/* SSS */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); transition: transform .2s; margin-top: 2px; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 36px 20px 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Beta formu */
.join { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 56px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
.join h2 { font-size: clamp(30px, 3.6vw, 42px); color: var(--paper); }
.join .lead { color: color-mix(in srgb, var(--paper) 75%, var(--ink)); }
.join .eyebrow { color: var(--acc); }
.join-copy { display: grid; gap: 16px; align-content: start; }
.join-perks { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15.5px; }
.join-perks li { display: flex; gap: 10px; align-items: flex-start; }
.join-perks svg { width: 18px; height: 18px; color: var(--acc); flex: none; margin-top: 4px; }
form.beta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.beta .full { grid-column: 1 / -1; }
.beta label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--paper) 85%, var(--ink)); }
.beta input, .beta select, .beta textarea { width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--paper) 22%, var(--ink)); background: color-mix(in srgb, var(--paper) 8%, var(--ink)); color: var(--paper); font: 400 16px/1.4 var(--f-body); padding: 12px 14px; }
.beta textarea { min-height: 88px; resize: vertical; }
.beta input::placeholder, .beta textarea::placeholder { color: color-mix(in srgb, var(--paper) 45%, var(--ink)); }
.beta input:focus, .beta select:focus, .beta textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.beta .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.beta-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.beta-foot small { font-size: 13px; color: color-mix(in srgb, var(--paper) 60%, var(--ink)); max-width: 46ch; }
.beta-msg { grid-column: 1 / -1; border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.beta-msg.ok { background: color-mix(in srgb, var(--acc) 20%, var(--ink)); color: var(--paper); }
.beta-msg.err { background: color-mix(in srgb, #E5484D 22%, var(--ink)); color: var(--paper); }
@media (max-width: 900px) { .join { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; gap: 32px; border-radius: 18px; } }
@media (max-width: 520px) { form.beta { grid-template-columns: minmax(0, 1fr); } }

/* Alt bilgi */
.foot { padding-block: 48px 40px; color: var(--ink-2); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .brand span { font-size: 18px; }
.foot .brand svg { width: 26px; height: 26px; }