/*
 * Lead form (BUILD.md §9, §13.1): the inline bar and the three-step brief.
 * From site.css: .suw-btn, .suw-chip, .lk, .suw-hit and .arrow. Block CSS prints before
 * site.css, so every override of those is scoped under .suw-lead-form to win.
 */

/* What view.js or the server hides with the hidden attribute stays hidden. */
.suw-lead-form [hidden] {
	display: none !important;
}

.suw-lead-form__form {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Honeypot: out of sight and reach for people; bots still find and fill it (BUILD §13.2). */
.suw-lead-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.suw-lead-form__input::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Error messages: view.js (or the server) fills a field's span; empty spans take no room. */
.suw-lead-form__alert {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.suw-lead-form__alert:not(:has(> :not(:empty))),
.suw-lead-form__error:empty {
	display: none;
}

.suw-lead-form__error {
	display: flex;
	align-items: center;
	gap: var(--s-2-5);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-md);
	background: var(--bad-bg);
	color: var(--bad-ink);
	font-size: var(--body-sm);
	font-weight: 600;
	line-height: var(--lh-list);
}

/* The design's alert icon (Iletisim L149). */
.suw-lead-form__error::before {
	content: '';
	flex: none;
	width: var(--s-4);
	height: var(--s-4);
	background: currentColor;
	-webkit-mask: var(--suw-alert-mask);
	mask: var(--suw-alert-mask);
	--suw-alert-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* A message about the whole form sits in one inner span, so its mailto link (view.js) flows
   with the text instead of becoming a flex item of its own. */
.suw-lead-form__error > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.suw-lead-form__error a {
	color: inherit;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* While view.js sends, the button says "Sending…" and takes no more presses (aria-disabled). */
.suw-lead-form__submit[aria-disabled='true'] {
	cursor: progress;
}

.suw-lead-form__notice-link {
	color: var(--ink);
	font-weight: 700;
}

/* "* Required" explains the asterisk after the required fields' labels, once per form. */
.suw-lead-form__required {
	color: var(--muted);
	font-size: var(--small);
	font-weight: 600;
}

/* The polite status line of both forms: "Sending…" while a submit waits for the proof of work
   (view.js). */
.suw-lead-form__status {
	color: var(--ink);
	font-size: var(--small);
	font-weight: 700;
	line-height: var(--lh-list);
}

.suw-lead-form__status:empty {
	display: none;
}

/* ==========================================================================
   Inline: site and email in one bar (hero and closing CTA)
   ========================================================================== */

.suw-lead-form--inline {
	width: 100%;
	max-width: 640px; /* component constant: form bar width (design 620–640px) */
}

.suw-lead-form--inline .suw-lead-form__form {
	gap: var(--s-3);
}

.suw-lead-form__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-1);
	border: 1px solid var(--ink);
	border-radius: 32px; /* component constant: form bar radius (DECISIONS §8.1) */
	background: var(--paper);
	color: var(--ink);
	transition: box-shadow var(--dur-fast) var(--ease);
}

.suw-lead-form__bar:focus-within {
	box-shadow: var(--focus-ring);
}

.suw-lead-form__bar:has([aria-invalid='true']) {
	border-color: var(--bad);
}

/* Inside the white bar the focus ring stays ink, also on dark sections. */
.suw-lead-form .suw-lead-form__bar :focus-visible {
	outline-color: var(--ink);
}

/* The fields share a row while they fit. Their large grow factor leaves the button its own
   width on a shared row, and a button that wraps fills its row. */
.suw-lead-form--inline .suw-lead-form__field {
	display: flex;
	flex: 1000 1 180px;
	flex-direction: column;
	gap: var(--s-0-5);
	min-width: 0;
	padding: var(--s-1-5) var(--s-4);
	border-radius: var(--pill);
	cursor: text;
}

/* Wider than a phone, the site field (short placeholder) asks for less room than the email
   field, so the bar keeps to one row from about 1265px in English and 1325px in Turkish, whose
   button is wider (one row at 1440px, as in the TR design). Both placeholders still show
   whole. The fields grow alike, so a roomy row keeps them equal; phones keep the 180px above
   (fields stacked at 390px, as in the design). */
@media (width > 560px) {
	.suw-lead-form--inline .suw-lead-form__field {
		flex-basis: 150px; /* component constant: site field */
	}

	.suw-lead-form--inline .suw-lead-form__field:has(> [type='email']) {
		min-width: 180px; /* component constant: email field */
	}
}

/* The focused field gets the 2px ring (BUILD §20); the input inside draws none. */
.suw-lead-form--inline .suw-lead-form__field:focus-within {
	outline: 2px solid var(--ink);
}

.suw-lead-form--inline .suw-lead-form__label {
	color: var(--muted);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.suw-lead-form--inline .suw-lead-form__field:has([aria-invalid='true']) .suw-lead-form__label {
	color: var(--bad-ink);
}

.suw-lead-form--inline .suw-lead-form__input {
	width: 100%;
	min-width: 0;
	padding: var(--s-0-5) 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: var(--body);
	font-weight: 500;
}

.suw-lead-form--inline .suw-lead-form__input:focus {
	outline: 2px solid transparent;
}

.suw-lead-form__divider {
	flex: none;
	width: 1px;
	height: var(--s-8);
	background: var(--line-soft);
}

.suw-lead-form--inline .suw-lead-form__submit {
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--s-2-5);
	min-height: var(--control-h);
	padding: 0 var(--s-5);
	border: 0;
	border-radius: var(--pill);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.suw-lead-form--inline .suw-lead-form__submit svg {
	flex: none;
	color: var(--accent);
	transition: transform var(--dur-slow) var(--ease-spin);
}

.suw-lead-form--inline .suw-lead-form__submit:hover svg,
.suw-lead-form--inline .suw-lead-form__submit:focus-visible svg {
	transform: rotate(360deg);
}

.suw-lead-form__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-5);
}

.suw-lead-form__note {
	color: var(--muted);
	font-size: var(--small);
	font-weight: 600;
}

.suw-lead-form__thanks {
	color: var(--ink);
	font-size: var(--small);
	font-weight: 700;
}

.suw-lead-form__thanks:empty {
	display: none;
}

.suw-lead-form__book {
	color: var(--ink);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-meta);
}

.suw-lead-form--inline .suw-lead-form__error {
	padding: var(--s-2) var(--s-3);
	font-size: var(--small);
}

.suw-lead-form--inline .suw-lead-form__notice {
	color: var(--muted);
	font-size: var(--label);
	font-weight: 500;
	line-height: var(--lh-body);
}

/*
 * Dark: a white bar without a border, the yellow button, light text around it. The form
 * brings its own ink background, so the light text keeps its contrast (WCAG 1.4.3) on any
 * section: no grey reaches 4.5:1 on both paper and ink (the best gets 4.4:1). On a dark
 * section the ink panel is invisible and adds no padding; on any other it shows as a card.
 */
.suw-lead-form--dark {
	background: var(--ink);
	color: var(--ivory);
}

.suw-lead-form--dark:not(:is(.suw-section--dark, .is-style-suw-section-dark) *) {
	padding: var(--s-6);
	border-radius: var(--radius-lg);
}

.suw-lead-form--dark .suw-lead-form__bar {
	border-color: transparent;
}

.suw-lead-form--dark .suw-lead-form__bar:focus-within {
	box-shadow: 0 0 0 4px var(--line-on-dark);
}

.suw-lead-form--dark .suw-lead-form__bar:has([aria-invalid='true']) {
	box-shadow: 0 0 0 2px var(--bad);
}

.suw-lead-form--dark .suw-lead-form__submit {
	background: var(--accent);
	color: var(--ink);
	font-weight: 800;
}

.suw-lead-form--dark .suw-lead-form__submit svg {
	color: currentColor;
}

.suw-lead-form--dark .suw-lead-form__note,
.suw-lead-form--dark .suw-lead-form__notice,
.suw-lead-form--dark .suw-lead-form__required {
	color: var(--muted-dark);
}

.suw-lead-form--dark .suw-lead-form__thanks,
.suw-lead-form--dark .suw-lead-form__status,
.suw-lead-form--dark .suw-lead-form__book,
.suw-lead-form--dark .suw-lead-form__notice-link {
	color: var(--paper);
}

.suw-lead-form--dark :focus-visible {
	outline-color: var(--paper);
}

@media (width <= 560px) {
	.suw-lead-form__divider {
		display: none;
	}
}

/* ==========================================================================
   Brief: three steps on a white card (Başlayalım panel A)
   ========================================================================== */

.suw-lead-form--brief {
	/* The design's clamp(24px, 4vw, 56px) from spacing tokens (lead-form.md Q8). */
	padding: clamp(var(--s-6), 4vw, var(--s-14));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.suw-lead-form--brief .suw-lead-form__form {
	gap: var(--s-8);
}

.suw-lead-form__step {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.suw-lead-form__intro {
	display: flex;
	flex-direction: column;
	gap: var(--s-3-5);
}

.suw-lead-form__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2) var(--s-4);
}

.suw-lead-form__title {
	/* Component constant: the design's step title; the nearest token (--h3-lg) is 15% smaller
	   at 1440px (DECISIONS §8.1, one-off large headings). */
	font-size: clamp(2.2rem, 4vw, 3.5rem);
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--tr-heading);
}

/* Focus lands on the titles when a step opens or the form is sent. They are not controls,
   so they draw no ring. */
.suw-lead-form__title:focus,
.suw-lead-form__done-title:focus {
	outline: none;
}

.suw-lead-form__step-label {
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
	text-transform: uppercase;
}

.suw-lead-form__progress {
	height: var(--s-1);
	overflow: hidden;
	border-radius: var(--s-0-5);
	background: var(--line-soft);
}

.suw-lead-form__progress-fill {
	display: block;
	height: 100%;
	background: var(--ink);
	transform: scaleX(var(--suw-progress));
	transform-origin: left;
	animation: suw-lead-form-progress var(--dur) var(--ease);
}

/* A new step's bar grows (or shrinks) from the previous step's share; view.js sets it. */
@keyframes suw-lead-form-progress {
	from {
		transform: scaleX(var(--suw-progress-from, var(--suw-progress)));
	}
}

.suw-lead-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
}

.suw-lead-form__step[data-step='3'] .suw-lead-form__fields {
	gap: var(--s-5);
}

.suw-lead-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--s-5);
}

.suw-lead-form--brief .suw-lead-form__field,
.suw-lead-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--s-2-5);
	min-width: 0;
}

.suw-lead-form__group {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.suw-lead-form--brief .suw-lead-form__label {
	padding: 0;
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
	text-transform: uppercase;
}

.suw-lead-form__group > .suw-lead-form__label {
	margin-bottom: var(--s-2-5);
}

/* Field borders meet the 3:1 non-text contrast of WCAG 1.4.11 (--muted-2, not --line). */
.suw-lead-form--brief .suw-lead-form__input {
	width: 100%;
	min-height: var(--input-h);
	padding: 0 var(--s-5);
	border: 1px solid var(--muted-2);
	border-radius: var(--radius-md);
	background: var(--paper);
	color: var(--ink);
	font-size: var(--body-lg);
	font-weight: 500;
	transition: border-color var(--dur-fast) var(--ease);
}

.suw-lead-form--brief .suw-lead-form__input:focus {
	border-color: var(--ink);
}

.suw-lead-form--brief .suw-lead-form__input[aria-invalid='true'] {
	border-color: var(--bad);
}

.suw-lead-form--brief textarea.suw-lead-form__input {
	min-height: 0;
	padding: var(--s-4) var(--s-5);
	line-height: var(--lh-body);
	resize: vertical;
}

/* Chips: each radio or checkbox sits hidden before its .suw-chip label (BUILD §13.1 B).
   site.css marks a picked one (input:checked + .suw-chip), in forced colours too. */
.suw-lead-form__chips {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1-5);
}

.suw-lead-form__choice {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.suw-lead-form .suw-lead-form__chip {
	font-size: var(--body-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* site.css turns any hovered chip ink; an unpicked choice only darkens its border. */
.suw-lead-form .suw-lead-form__choice:not(:checked) + .suw-lead-form__chip:hover {
	border-color: var(--ink);
	background: var(--paper);
	color: var(--ink);
}

.suw-lead-form .suw-lead-form__choice:focus-visible + .suw-lead-form__chip {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* Goals: "+" until picked, then "✓". */
.suw-lead-form__mark {
	flex: none;
}

.suw-lead-form__mark--check,
.suw-lead-form__choice:checked + .suw-lead-form__chip .suw-lead-form__mark--plus {
	display: none;
}

.suw-lead-form__choice:checked + .suw-lead-form__chip .suw-lead-form__mark--check {
	display: block;
}

.suw-lead-form--brief .suw-lead-form__notice {
	max-width: 48em;
	color: var(--text-2);
	font-size: var(--body-sm);
	font-weight: 500;
	line-height: var(--lh-body);
}

.suw-lead-form__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line-soft);
}

.suw-lead-form--brief .suw-lead-form__nav .suw-btn {
	margin-left: auto;
}

.suw-lead-form__time {
	color: var(--muted);
	font-size: var(--small);
	font-weight: 600;
}

.suw-lead-form__back {
	align-items: center;
	gap: var(--s-2-5);
	min-height: var(--control-h);
	padding: 0 var(--s-5);
	border: 1px solid var(--ink);
	border-radius: var(--pill);
	background: transparent;
	color: var(--ink);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Step states. Without view.js the steps stack, with a rule between them, and only the
   submit button shows. That includes a page with JavaScript whose view.js was blocked or
   failed, so these rules do not follow html.js. Once view.js has set up the brief it marks
   the block root .is-ready, and from then on (and in the editor preview) the form's
   data-step shows one step, its progress bar and the right buttons. Until view.js runs, the
   stacked steps may show for a frame.
   -------------------------------------------------------------------------- */

.suw-lead-form--brief .suw-lead-form__back,
.suw-lead-form--brief .suw-lead-form__next,
.suw-lead-form--brief .suw-lead-form__progress {
	display: none;
}

.suw-lead-form__step + .suw-lead-form__step {
	padding-top: var(--s-8);
	border-top: 1px solid var(--line-soft);
}

.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *) .suw-lead-form__progress {
	display: block;
}

.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__step
	+ .suw-lead-form__step {
	padding-top: 0;
	border-top: 0;
}

.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__form:not([data-step='1'])
	:is(.suw-lead-form__step[data-step='1'], .suw-lead-form__time),
.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__form:not([data-step='2'])
	.suw-lead-form__step[data-step='2'],
.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__form:not([data-step='3'])
	:is(.suw-lead-form__step[data-step='3'], .suw-lead-form__submit) {
	display: none;
}

.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__form:not([data-step='1'])
	.suw-lead-form__back,
.suw-lead-form--brief:is(.is-ready, .editor-styles-wrapper *)
	.suw-lead-form__form:not([data-step='3'])
	.suw-lead-form__next {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   Summary screen after sending (shown by phase 5, or by the server state)
   -------------------------------------------------------------------------- */

.suw-lead-form__done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-6);
}

.suw-lead-form__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px; /* component constant: done badge (lead-form.md §5) */
	height: 72px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
}

.suw-lead-form__done-title {
	font-size: var(--h2);
	font-weight: 300;
	line-height: var(--lh-heading);
	/* Component constant: the design's -0.055em has no token (lead-form.md §5). */
	letter-spacing: -0.055em;
}

.suw-lead-form__done-sub {
	max-width: 32em;
	color: var(--muted);
	font-size: var(--body-lg);
	font-weight: 500;
	line-height: var(--lh-body);
}

.suw-lead-form__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 0 var(--s-8);
	width: 100%;
	border-top: 1px solid var(--ink);
}

.suw-lead-form__summary > div {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
	padding-block: var(--s-3-5);
	border-bottom: 1px solid var(--line-soft);
}

.suw-lead-form__summary dt {
	color: var(--muted);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.suw-lead-form__summary dd {
	font-size: var(--body);
	font-weight: 600;
	overflow-wrap: anywhere;
}