/* clip.partners coming soon. Tokens and recipes follow the main app's
   packages/ui/src/styles.css (dark theme) and docs/brand/MARKA_YONERGESI.md. */

/* Archivo Expanded 800-900 subset, the main app's file. `optional` never swaps
   after first paint, so a late font cannot reflow the headline (CLS). */
@font-face {
  font-family: 'Archivo Expanded';
  src: url(/assets/fonts/archivo-expanded-800-900.woff2) format('woff2');
  font-weight: 800 900;
  font-stretch: 125%;
  font-display: optional;
}
/* Geist variable, the latin and latin-ext files next/font serves the main app. */
@font-face {
  font-family: Geist;
  src: url(/assets/fonts/geist-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist;
  src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
/* The metric-matched fallback next/font generates for Geist: the swap does not move text. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

:root {
  color-scheme: dark;
  --background: #0a0a0b;
  --surface: #111113;
  --muted: #161619;
  --border: #232327;
  --foreground: #f4f4f5;
  --muted-foreground: #a1a1aa;
  --subtle-foreground: #8b8b94;
  --input: #66666e;
  --faint: #2e2e33;
  --ring: #fac834;
  --highlight: #fac834;
  --primary: #eb7a44;
  --primary-foreground: #0a0a0b;
  --danger: #f87171;
  --fire: linear-gradient(90deg, #eb7a44, #fac834);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --sans:
    Geist, 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}
/* Until script.js has wired the form (no JS, or the script failed to load) the
   switch and form stay invisible but keep their space, so the swap cannot shift
   layout; invisible controls cannot be focused, so the form never posts natively. */
html:not(.js) .js-only {
  visibility: hidden;
}
.js .needs-js {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Main-app `display` recipe: Archivo Expanded, uppercase; only local faces after it. */
.display {
  font-family: 'Archivo Expanded', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  font-stretch: 125%;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Decorative backdrop: a 12 px dot grid over the Gece stage. A few soft shapes drift
   slowly behind it and show only through the dots (the mask), so the light seems to pass
   over the grid; the centre stays calmer. Neutral only: Ateş stays on the action and the
   headline's one word. Still under reduced motion, gone in forced colours. */
.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgb(245 245 246 / 0.07);
  -webkit-mask: radial-gradient(circle, #000 0.9px, transparent 1.4px) 0 0 / 12px 12px;
  mask: radial-gradient(circle, #000 0.9px, transparent 1.4px) 0 0 / 12px 12px;
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 55% at 50% 50%, rgb(10 10 11 / 0.7), transparent);
}
.backdrop span {
  position: absolute;
  background: linear-gradient(135deg, rgb(245 245 246 / 0.42), rgb(245 245 246 / 0.08));
  animation: backdrop-drift var(--t) ease-in-out infinite alternate;
  will-change: transform;
}
.backdrop span:nth-child(1) {
  --t: 46s;
  --dx: 22vw;
  --dy: 12vh;
  --r: 30deg;
  top: 6%;
  left: -8%;
  width: 30vmax;
  height: 30vmax;
  border-radius: 50%;
}
.backdrop span:nth-child(2) {
  --t: 58s;
  --dx: -18vw;
  --dy: -14vh;
  --r: -50deg;
  right: 2%;
  bottom: -10%;
  width: 26vmax;
  height: 26vmax;
  border-radius: 50%;
  background: none;
  border: 4vmax solid rgb(245 245 246 / 0.26);
}
.backdrop span:nth-child(3) {
  --t: 52s;
  --dx: 16vw;
  --dy: -18vh;
  --r: 70deg;
  top: 62%;
  left: 4%;
  width: 24vmax;
  height: 14vmax;
  border-radius: 3vmax;
}
.backdrop span:nth-child(4) {
  --t: 64s;
  --dx: -20vw;
  --dy: 16vh;
  --r: -90deg;
  top: 4%;
  right: 6%;
  width: 20vmax;
  height: 20vmax;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.backdrop span:nth-child(5) {
  --t: 40s;
  --dx: -14vw;
  --dy: 20vh;
  --r: 0deg;
  top: 30%;
  right: 30%;
  width: 11vmax;
  height: 11vmax;
  border-radius: 50%;
}
@keyframes backdrop-drift {
  to {
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r));
  }
}

/* One screen: header, the stage filling the rest, the band only when there is room. */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
  flex: none;
}
/* Protection space of half the C on every side; the image stays 176 px (13 px tall). */
.logo {
  display: block;
  margin-left: -8px;
  padding: 8px;
  border-radius: 4px;
}
.logo img {
  display: block;
  width: 176px;
  height: auto;
}
.logo:focus-visible {
  outline-offset: 0;
}

/* Links to / and /en, styled like the landing's nav links: muted text, Ateş underline on the
   current one. */
.lang {
  display: flex;
  margin-right: -8px;
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--muted-foreground);
  text-decoration: none;
}
.lang a:hover {
  color: var(--foreground);
}
.lang a[aria-current='page'] {
  color: var(--foreground);
  text-decoration: underline 2px var(--primary);
  text-underline-offset: 8px;
}

.stage {
  flex: 1 0 auto;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 4px 0 20px;
}

/* text-hero: clamp(32px, 7vw, 88px) / 0.9, -0.02em; also held to the screen height. */
.hero {
  font-weight: 900;
  font-size: clamp(2rem, min(7vw, 10.5dvh), 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
/* text-fire in the dark theme: one word in Ateş. The padding lets the painted box run
   past glyph ink that overhangs the advance (the kerned W of VIEW.); the negative
   margin keeps the following text where it was. */
.fire {
  padding-right: 0.25em;
  margin-right: -0.25em;
  background: var(--fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  margin-top: 16px;
  max-width: 46ch;
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* The cookie question (analytics.js): a modal dialog on the first visit that stays until the
   visitor accepts or closes it; closing declines, and nothing from Google loads before "Kabul
   et". The page stays usable either way. "Çerez tercihleri" under the lead reopens it. */
.prefs {
  display: none;
}
.consent-js .prefs {
  display: inline-flex;
}
.cookies {
  width: min(420px, calc(100vw - 32px));
  margin: auto auto 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted-foreground);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.6);
}
/* It opens with focus on itself (analytics.js), so no button is preselected or ringed. */
.cookies:focus-visible {
  outline: none;
}
.cookies::backdrop {
  background: rgb(10 10 11 / 0.6);
}
.cookies-title {
  padding-right: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
}
.cookies-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.cookies-accept {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-weight: 600;
  cursor: pointer;
}
.cookies-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted-foreground);
  cursor: pointer;
}
.cookies-close:hover {
  background: var(--muted);
  color: var(--foreground);
}
/* A quiet text button under the lead: its 24 px target overhangs below instead of growing
   the intro. */
.prefs {
  align-items: center;
  min-height: 24px;
  margin: 4px 0 -4px -4px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.prefs:hover {
  color: var(--foreground);
}

.card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.card h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.needs-js {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-size: 14px;
  text-align: center;
  color: var(--muted-foreground);
}

form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Step head: the step title, the count in highlight (the guideline's step numbers) and a
   thin Ateş meter under both. */
.step-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
}
.step-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
}
.count {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--highlight);
}
.track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.fill {
  height: 100%;
  background: var(--fire);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 300ms var(--ease-out-expo);
}
[data-step='2'] .fill {
  transform: scaleX(0.4);
}
[data-step='3'] .fill {
  transform: scaleX(0.6);
}
[data-step='4'] .fill {
  transform: scaleX(0.8);
}
[data-step='5'] .fill {
  transform: none;
}

.step {
  display: grid;
  gap: 12px;
}
.field,
.link {
  display: grid;
  gap: 4px;
  align-content: start;
}
/* Links 2 and 3: the input with its remove button beside it. */
.removable {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
}
.removable .error {
  grid-column: 1 / -1;
}
label,
legend {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
}
legend {
  padding: 0;
  margin-bottom: 8px;
}
.hint,
.note {
  font-weight: 400;
  color: var(--subtle-foreground);
}
.note {
  margin-top: -2px;
  font-size: 12px;
  line-height: 1.4;
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: 12px;
  background: var(--surface);
  font-size: 16px;
}
input::placeholder {
  color: var(--subtle-foreground);
  opacity: 1;
}
[aria-invalid='true'] {
  border-color: var(--danger) !important;
}

.select {
  position: relative;
}
.select select {
  appearance: none;
  padding-right: 34px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Chips: native radios and checkboxes. The invisible input covers the whole pill, so the
   tap target is the pill; the drawn mark (ring for one choice, box for several) never
   changes the pill's width, so ticking one cannot reflow the rows. Selected: highlight
   border on the muted surface, like the main app's option cards, plus the filled mark.
   Each question lays its pills on an equal-width grid, so every row is full: two columns
   by default, three for platforms, five for account counts, and three over two for the
   five-step ranges. */
.chips {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 8px;
}
.cols-3 {
  --cols: 3;
}
.cols-5 {
  --cols: 5;
}
.cols-3-2 {
  --cols: 6;
}
.cols-3-2 .chip {
  grid-column: span 2;
}
.cols-3-2 .chip:nth-child(n + 4) {
  grid-column: span 3;
}
.chip {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Mark and label centred in the pill; the tick (::after) shares the mark's grid cell. */
.chip span {
  display: grid;
  flex: 1;
  grid-template-columns: auto auto;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--input);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.chip span::before {
  content: '';
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--muted-foreground);
  border-radius: 50%;
}
.chip [type='checkbox'] + span::before {
  border-radius: 4px;
}
.chip:hover span {
  background: var(--muted);
}
.chip :checked + span {
  border-color: var(--highlight);
  background: var(--muted);
}
.chip :checked + span::before {
  border-color: var(--highlight);
  background: var(--highlight);
  box-shadow: inset 0 0 0 3px var(--muted);
}
.chip [type='checkbox']:checked + span::before {
  box-shadow: none;
}
.chip [type='checkbox']:checked + span::after {
  content: '';
  grid-area: 1 / 1;
  justify-self: center;
  width: 4px;
  height: 8px;
  border: solid var(--primary-foreground);
  border-width: 0 2px 2px 0;
  transform: translateY(-15%) rotate(45deg);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Ghost buttons: text only, muted fill on hover. */
.add,
.remove {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.add {
  justify-self: start;
  margin-left: -10px;
}
.remove {
  color: var(--muted-foreground);
}
.add:hover,
.remove:hover {
  background: var(--muted);
  color: var(--foreground);
}

.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 10px;
  align-items: start;
}
/* Drawn box: the native dark checkbox border is under 3:1 on the card. */
.consent input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--input);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
/* Highlight, like the main app's checkboxes; Ateş stays on the one action. */
.consent input:checked {
  border-color: transparent;
  background: var(--highlight);
}
.consent input:checked::before {
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border-right: 2px solid var(--primary-foreground);
  border-bottom: 2px solid var(--primary-foreground);
  transform: rotate(45deg);
}
.consent .error {
  grid-column: 2;
}
.consent label a,
.cookies a {
  color: var(--highlight);
  text-underline-offset: 2px;
}
.consent label {
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted-foreground);
  cursor: pointer;
}

.error {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--danger);
}
.summary {
  padding: 8px 12px;
  border: 1px solid var(--danger);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}
/* Count and links run as one inline flow, so the summary costs as few lines as it can. */
.summary p,
.summary ul,
.summary li {
  display: inline;
}
.summary p {
  margin-right: 8px;
  font-weight: 600;
}
.summary p::after {
  content: ':';
}
.summary ul {
  padding: 0;
}
.summary li:not(:last-child) {
  margin-right: 12px;
}
.summary a {
  display: inline-block;
  padding: 3px 0;
  border-radius: 4px;
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Once a step has shown errors (until the step changes): tighter rows, and the decorative
   band gives its room to the form. Kept while the errors are fixed, so nothing jumps. */
.is-fixing form,
.is-fixing .step {
  gap: 10px;
}
.is-fixing .group {
  gap: 6px;
}
.is-fixing legend {
  margin-bottom: 6px;
}
.is-fixing .band {
  display: none;
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Back (secondary) and the view's one Ateş action (primary). */
.actions {
  display: flex;
  gap: 10px;
}
.primary,
.secondary {
  min-height: 44px;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 200ms var(--ease-out-expo);
}
.primary {
  flex: 1;
  border: 0;
  background: var(--fire);
  color: var(--primary-foreground);
}
.secondary {
  padding: 8px 20px;
  border: 1px solid var(--input);
  background: transparent;
}
.primary:hover {
  filter: brightness(1.06);
}
.secondary:hover {
  background: var(--muted);
}
.primary:active,
.secondary:active {
  transform: scale(0.98);
}
/* Busy while sending: muted fill and subtle text, as the guideline's disabled state. */
.primary[aria-disabled='true'] {
  background: var(--muted);
  color: var(--subtle-foreground);
  cursor: progress;
  filter: none;
  transform: none;
}
.status:empty {
  display: none;
}
.status {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-foreground);
}
.status.is-error {
  color: var(--danger);
}

.done {
  margin-top: 12px;
}
.done h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
}
.done p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted-foreground);
}

/* The landing's decorative category band, shown only when the screen has room for it. */
.band {
  display: none;
  flex: none;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 18px 0 20px;
  border-top: 1px solid var(--border);
  font-size: 22px;
  font-weight: 900;
  /* Archivo's normal line height, fixed: the fallback face would make the band taller. */
  line-height: 24px;
  white-space: nowrap;
  /* Fade the cut-off end; the 1 px top strip keeps the border line whole. */
  -webkit-mask-image:
    linear-gradient(#000 0 1px, transparent 0), linear-gradient(90deg, #000 80%, transparent);
  mask-image:
    linear-gradient(#000 0 1px, transparent 0), linear-gradient(90deg, #000 80%, transparent);
}
/* The landing's recipe for decorative faint words (WCAG 1.4.3 exempts decoration). */
.band .dim {
  background: var(--faint);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.band i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
}
@media (min-height: 820px) {
  .band {
    display: flex;
  }
}

/* Phones while the form is being filled in (steps 2-5, or step 1 once it has shown errors):
   the hero keeps only a compact headline (the text-title size) and the card title goes to
   screen readers, so each step fits one screen. Step 1 and the success message show the
   full hero. Pills get a little narrower so a row of them fits the 294 px card. */
@media (max-width: 639px) {
  .is-filling .lead,
  .is-filling .prefs,
  .is-filling .band {
    display: none;
  }
  .is-filling .stage {
    align-content: start;
    gap: 12px;
    padding-top: 8px;
  }
  .is-filling .hero {
    margin-top: 0;
    font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem);
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .is-filling .form-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .is-filling form {
    margin-top: 0;
  }
  .chips {
    gap: 6px;
  }
  .chip span {
    column-gap: 6px;
    padding: 0 4px;
    font-size: 13px;
  }
  .chip span::before {
    width: 12px;
    height: 12px;
  }
  .chip [type='checkbox']:checked + span::after {
    width: 3px;
    height: 7px;
  }
}

/* Very narrow screens: pills flow and wrap instead of keeping their columns. */
@media (max-width: 359px) {
  .chips {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Narrower than 320 px (a phone at 200% zoom): the header shows the app icon (see the
   <picture> in index.html), and the stage, pill labels and buttons may wrap, so the page
   scrolls down but never sideways. */
@media (max-width: 319px) {
  .logo img {
    width: 32px;
  }
  .stage,
  .step-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .chip span {
    white-space: normal;
  }
  .actions {
    flex-wrap: wrap;
  }
}

/* Short phones (360x640, 375x667): the headline steps down to text-display
   (clamp(26px, 4.5vw, 56px) / 0.92, the guideline's one-step rule) and the card
   title is left to screen readers, so the whole form stays on one screen. */
@media (max-width: 639px) and (max-height: 700px) {
  .bar {
    height: 56px;
  }
  .stage {
    gap: 16px;
    padding-bottom: 12px;
  }
  .hero {
    font-size: clamp(1.625rem, 4.5vw, 3.5rem);
    line-height: 0.92;
    letter-spacing: -0.015em;
  }
  .lead {
    margin-top: 12px;
  }
  /* The lead keeps its last sentence on screen (opening soon, join the list); the first two
     stay in the page for screen readers and search. */
  .form-title,
  .lead-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  form {
    margin-top: 0;
  }
  .chip span {
    min-height: 36px;
  }
  /* The summary keeps its count; the messages under the fields say what to fix. */
  .summary {
    padding: 4px 12px;
  }
  .summary p {
    margin: 0;
  }
  .summary p::after {
    content: none;
  }
  .summary ul {
    display: none;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
  .lead {
    font-size: 18px;
    line-height: 1.625;
  }
  .card {
    padding: 24px;
  }
  .card h2 {
    font-size: 20px;
  }
  .prefs {
    font-size: 13px;
  }
  .step-title {
    font-size: 20px;
  }
  label,
  legend {
    font-size: 14px;
  }
  .note {
    font-size: 13px;
  }
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='url'],
  select {
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
  }
  .step {
    gap: 16px;
  }
  /* All steps share one cell and the hidden ones keep their space invisibly, so the card
     is as tall as its tallest step and the step title and Ateş bar never move. */
  .steps {
    display: grid;
  }
  .step {
    grid-area: 1 / 1;
    align-content: start;
  }
  .step[hidden] {
    display: grid !important;
    visibility: hidden;
  }
  form {
    gap: 16px;
    margin-top: 16px;
  }
  .primary,
  .secondary {
    min-height: 52px;
    font-size: 16px;
  }
}

/* Tablets: stacked, but the card keeps a form-sized width. While the form is filled in, the
   lead keeps only its last sentence on screen, so steps with errors still fit. */
@media (min-width: 640px) and (max-width: 899px) {
  .card {
    max-width: 560px;
  }
  .is-filling .lead-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Desktop: headline left, form right. */
@media (min-width: 900px) {
  .bar {
    height: 72px;
  }
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    align-items: center;
    gap: 56px;
    padding: 8px 0 32px;
  }
  .hero {
    font-size: clamp(2rem, min(6.2vw, 10.5dvh), 5.5rem);
  }
  /* "İçerik üret." (8.5em wide) keeps one line: wrapped, the Ç's cedilla touches the Ü below. */
  .intro {
    container-type: inline-size;
  }
  .hero:lang(tr) {
    font-size: min(clamp(2rem, min(6.2vw, 10.5dvh), 5.5rem), 11.5cqi);
  }
}

/* Forced colours drop backgrounds and shadows: selected pills get a Highlight outline and a
   filled mark, and the buttons keep a visible edge. */
@media (forced-colors: active) {
  .backdrop {
    display: none;
  }
  .chip :checked + span,
  .chip :checked + span::before {
    forced-color-adjust: none;
    border-color: Highlight;
  }
  .chip :checked + span {
    background: Canvas;
    color: CanvasText;
    box-shadow: inset 0 0 0 1px Highlight;
  }
  .chip :checked + span::before {
    background: Highlight;
    box-shadow: inset 0 0 0 3px Canvas;
  }
  .chip [type='checkbox']:checked + span::after {
    border-color: HighlightText;
  }
  .primary,
  .secondary,
  .cookies-accept,
  .cookies-close {
    border: 1px solid ButtonText;
  }
  /* The logo's white letters need their Gece plate on a light forced canvas. */
  .logo {
    forced-color-adjust: none;
    background: var(--background);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
  .backdrop span {
    animation: none;
  }
}

/* Privacy notice pages (/kvkk, /privacy): ordinary scrolling text on the same stage. */
.legal {
  max-width: 72ch;
  padding: 24px 0 64px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.legal h1 {
  margin-bottom: 8px;
  font-size: clamp(1.625rem, 4.5vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.legal h2 {
  margin: 32px 0 8px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--foreground);
}
.legal p,
.legal ul {
  margin-top: 8px;
}
.legal ul {
  padding-left: 20px;
}
.legal a {
  color: var(--highlight);
  text-underline-offset: 2px;
}
.legal strong {
  color: var(--foreground);
}