/* Ön kayıt sayfası — Bringom Yön A (IE-0076). Plan: kanit/IE-0076/tasarim-plani.md. Fiziksel sol/sağ yok (RTL). */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 900; font-display: swap; src: url(fonts/montserrat-latin-900-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 900; font-display: swap; src: url(fonts/montserrat-latin-ext-900-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --indigo: #2B33E0; --safran: #FFB020; --sahne: #FFF7E8; --tinte: #0F1233;
  --paprika: #FF5B3A; --nane: #12B37A; --himmel: #4CC3FF;
  --bg: var(--sahne); --fg: var(--tinte); --muted: #4A4E6E; --card: #fff; --line: #E6DCC8;
  --link: var(--indigo); --field: #fff; --err: #C8341A;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: var(--tinte); --fg: var(--sahne); --muted: #B9BCD6; --card: #1C2160; --line: #3A3F7A;
  --link: var(--himmel); --field: var(--tinte); --err: #FF8A70;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: Montserrat, system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
/* Montserrat'ın glifi olmayan yazılar (Latin dışı; vi/yo/ig'nin noktalı harfleri yüklenen alt kümede yok) sistem yazısıyla. UI-21 denetler. */
:root:is(:lang(ru), :lang(uk), :lang(mk), :lang(el), :lang(bg), :lang(zh), :lang(ja), :lang(ko), :lang(hi), :lang(th), :lang(vi),
  :lang(bn), :lang(ur), :lang(ta), :lang(te), :lang(mr), :lang(kn), :lang(ar), :lang(fa), :lang(he), :lang(kk), :lang(ky),
  :lang(ps), :lang(am), :lang(ti), :lang(yo), :lang(ig)) body { font-family: system-ui, sans-serif; }
a { color: var(--link); }
img { display: block; max-inline-size: 100%; block-size: auto; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--himmel); outline-offset: 2px; }

.wrap { max-inline-size: 1120px; margin-inline: auto; padding-inline: 16px; }

/* Sahne: Indigo bant. Tek cesur öğe slogan çipidir; geri kalanı sakin. */
.hero { background: var(--indigo); color: var(--sahne); padding-block: 16px 72px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.logo { inline-size: 132px; }
.tools { display: flex; gap: 8px; }
.pill, .theme {
  min-block-size: 44px; padding-inline: 14px; border: 2px solid rgb(255 247 232 / .55); border-radius: 999px;
  background: transparent; color: var(--sahne); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
/* Dar ekranda tema düğmesi yalnız işaret; ad aria-label'da kalır. */
@media (max-width: 479px) {
  .theme { min-inline-size: 44px; padding-inline: 0; font-size: 20px; line-height: 1; }
  .theme span { display: none; }
  .theme::before { content: "◐"; font-family: system-ui, sans-serif; }
}
.pill option { background: var(--card); color: var(--fg); }
.theme[aria-pressed="true"] { background: var(--sahne); color: var(--indigo); border-color: var(--sahne); }

.grid { display: grid; gap: 24px; margin-block-start: 28px; }
.slogan {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2em .3em;
  font-size: clamp(44px, 12vw, 72px); font-style: italic; font-weight: 900; line-height: 1; letter-spacing: -.01em;
}
.chip { display: inline-block; padding: .1em .5em .16em; border-radius: 999px; color: var(--tinte); }
.chip.paprika { background: var(--paprika); }
.chip.safran { background: var(--safran); }
.chip.nane { background: var(--nane); }
.chip.himmel { background: var(--himmel); }
.schnell { color: var(--sahne); }
.title { margin-block: 24px 6px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.lead { max-inline-size: 38ch; }
.photo img { border-radius: 20px; aspect-ratio: 1400 / 965; object-fit: cover; }

/* Kart sahnenin üstüne biner; gölge yalnız burada, Tinte tonlu. */
.card {
  position: relative; max-inline-size: 560px; margin-block-start: -48px; padding: 24px;
  background: var(--card); border-radius: 20px; box-shadow: 0 12px 32px rgb(15 18 51 / .14);
}
:root[data-theme="dark"] .card { box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.card h2 { margin-block-end: 8px; font-size: 22px; line-height: 1.25; }
.card p + p, .card p + button { margin-block-start: 12px; }
.muted { color: var(--muted); }
/* Teklif kartı: tarih ve koşul formun üstünde, iki temada da Safran üstüne Tinte (kontrast ~10:1). */
.deal { margin-block-end: 20px; padding: 14px 16px; border-radius: 14px; background: var(--safran); color: var(--tinte); }
.deal .launch { font-size: 18px; font-weight: 800; line-height: 1.3; }
.deal .terms { margin-block-start: 4px; color: var(--tinte); font-size: 15px; font-weight: 600; }

form { display: grid; gap: 12px; }
label { font-size: 14px; font-weight: 700; }
input[type="email"], #postal-code {
  inline-size: 100%; min-block-size: 48px; padding: 10px 14px; font: inherit;
  border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--fg);
}
input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
#postal-code { inline-size: 7em; letter-spacing: .08em; }
input[type="email"]:focus-visible, #postal-code:focus-visible { border-color: var(--indigo); }
input[type="email"][aria-invalid="true"], #postal-code[aria-invalid="true"] { border-color: var(--paprika); }
/* Onaydan sonra açılır; onay iletisinden ince bir çizgiyle ayrılır. */
.postal { margin-block-start: 20px; padding-block-start: 20px; border-block-start: 2px solid var(--line); }
.postal .muted { font-size: 14px; }
.purpose { color: var(--muted); font-size: 13px; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13px; font-weight: 400; }
.consent input { flex: none; inline-size: 22px; block-size: 22px; margin: 1px 0 0; accent-color: var(--indigo); }
.consent strong { color: var(--fg); }
button[type="submit"], #confirm-btn, #unsub-btn {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding-inline: 20px;
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  background: var(--indigo); color: var(--sahne); font: inherit; font-weight: 700;
}
:root[data-theme="dark"] :is(button[type="submit"], #confirm-btn, #unsub-btn) { background: var(--safran); color: var(--tinte); }
button:disabled { opacity: .6; cursor: progress; }
.msg { min-block-size: 1.5em; font-size: 14px; font-weight: 700; }
.terms { color: var(--muted); font-size: 13px; }
.field-err { margin-block-start: -6px; color: var(--err); font-size: 14px; font-weight: 700; }
.consent:has([aria-invalid="true"]) input { outline: 2px solid var(--paprika); outline-offset: 2px; }
#back { color: var(--muted); }
/* Bal küpü: görünmez ama type=hidden değil (botlar onu atlar). */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* "Neden": sıra değil, dört ayrı vaat; işaret numara değil renk çizgisi. */
.why { padding-block: 40px 8px; max-inline-size: 720px; }
.why h2 { margin-block-end: 6px; font-size: 24px; line-height: 1.2; }
.why .intro { margin-block-end: 18px; color: var(--muted); }
.why ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.why li { padding-inline-start: 16px; border-inline-start: 4px solid var(--safran); }
.why li:nth-child(2) { border-inline-start-color: var(--nane); }
.why li:nth-child(3) { border-inline-start-color: var(--paprika); }
.why li:nth-child(4) { border-inline-start-color: var(--himmel); }
.why h3 { margin-block-end: 2px; font-size: 16px; }
.why p { color: var(--muted); font-size: 15px; }
.closing { padding-block: 32px 8px; }
.closing h2 { font-size: 24px; line-height: 1.2; }
body:not(.signup) .closing { display: none; }

.foot { display: flex; flex-wrap: wrap; gap: 16px; padding-block: 24px 32px; font-size: 14px; }
.foot a { color: var(--muted); }
.noscript { padding: 16px; }

@media (min-width: 960px) {
  .hero { padding-block-end: 96px; }
  .grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .main { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .card { margin-block-start: -72px; padding: 32px; }
  .closing { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both .15s; }
  @keyframes pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
}