/* =============================================================================
   Biosmyrna — Form katmanı

   Ölçü kaynağı: docs/06-visual-design/COMPONENT_LIBRARY.md §7
   Akış kaynağı: docs/04-site-architecture/USER_FLOWS.md §3

   🔴 E8 — Her alanın GÖRÜNÜR etiketi vardır; placeholder etiket yerine geçmez.
   🔴 E9 — Hata mesajı renkten bağımsız olarak METİNLE de verilir.
   🔴 Kenarlık `ink-400` — `ink-200` 3:1 eşiğini geçmez, kullanılmaz.
   ============================================================================= */

.form { display: flex; flex-direction: column; gap: var(--space-5); }

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 600px) {
	.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.label {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}
/* Zorunluluk: yıldız yerine açıklayıcı işaret + metin */
.label__required {
	margin-inline-start: var(--space-1);
	font-size: 12px;
	font-weight: 400;
	color: var(--status-error);
}

.input,
.select,
.textarea {
	inline-size: 100%;
	min-block-size: var(--input-height);
	padding: 9px 11px;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-form);
	color: var(--text);
	font-size: var(--text-body);
	font-family: var(--font-body);
}
.textarea { min-block-size: 130px; resize: vertical; line-height: var(--lh-body); }

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); opacity: 1; }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
	outline: var(--focus-width) solid var(--focus-ring);
	outline-offset: 0;
	border-color: var(--focus-ring);
}

.input[disabled],
.select[disabled],
.textarea[disabled] { background: var(--surface-alt); color: var(--text-muted); }

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--status-error); border-width: var(--border-width-strong); }

.field__hint { font-size: var(--text-caption); color: var(--text-muted); }

/* E9 — hata metni her zaman yazıyla */
.field__error {
	display: flex;
	gap: var(--space-2);
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--status-error);
}
.field__error::before { content: '!'; font-weight: 700; }

/* ── Onay kutusu — §7.3 ─────────────────────────────────────────────────── */

.checkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	/* 🔴 Kutu küçük, tıklama alanı 44 px'e genişletilir */
	min-block-size: var(--touch-min);
	padding-block: var(--space-2);
	cursor: pointer;
}
.checkbox input {
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 4px;
	accent-color: var(--action-primary-bg);
}
.checkbox__text { font-size: var(--text-body-sm); color: var(--text-secondary); }

/* ── Seçim çipi — §7.2 ──────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input {
	position: absolute;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
.chip__label {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	padding-inline: var(--space-4);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius-form);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
	cursor: pointer;
}
.chip input:checked + .chip__label {
	border-color: var(--action-secondary-border);
	background: var(--action-soft-bg);
	color: var(--heading-brand);
	font-weight: 600;
}
.chip input:focus-visible + .chip__label {
	outline: var(--focus-width) solid var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ── Bal küpü — T3: görünmez, engel değil ───────────────────────────────── */

.honeypot {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Durum bildirimleri — C52 ───────────────────────────────────────────── */

.notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border-inline-start: 3px solid var(--divider);
	background: var(--surface-alt);
	font-size: var(--text-body-sm);
}
.notice--success { border-inline-start-color: var(--action-primary-bg); }
.notice--error   { border-inline-start-color: var(--status-error); color: var(--status-error); }
.notice__title { font-weight: 600; margin-block-end: var(--space-1); }

/* ── Kademeli açılır ayrıntı — USER_FLOWS §3.2 ──────────────────────────── */

.form-details {
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
}
.form-details__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-block-size: var(--touch-min);
	font-size: var(--text-body-sm);
	font-weight: 500;
	color: var(--link);
	cursor: pointer;
	list-style: none;
}
.form-details__summary::-webkit-details-marker { display: none; }
.form-details[open] .form-details__summary { margin-block-end: var(--space-5); }

/* ── Teklif listesi ─────────────────────────────────────────────────────── */

.quote-list { display: flex; flex-direction: column; gap: var(--space-3); }
.quote-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: var(--border-width) solid var(--divider);
	border-radius: var(--radius-md);
	background: var(--surface-raised);
}
.quote-list__name { flex: 1; font-size: var(--text-body-sm); font-weight: 500; }
.quote-list__remove {
	background: none;
	border: 0;
	color: var(--text-muted);
	cursor: pointer;
	min-inline-size: var(--touch-min);
	min-block-size: var(--touch-min);
}
.quote-list__remove:hover { color: var(--status-error); }

/* ── Süreç şeffaflığı — USER_FLOWS §3.0.3 (süre taahhüdü verilmez) ──────── */

.process { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process__step {
	padding-block-start: var(--space-3);
	border-block-start: var(--border-width-strong) solid var(--accent);
}
.process__num { font-family: var(--font-heading); font-size: 20px; color: var(--heading-brand); }
.process__text { font-size: var(--text-body-sm); color: var(--text-secondary); margin-block-start: var(--space-1); }

/* ── Hazırlık kontrol listesi — USER_FLOWS §3.3 ─────────────────────────── */

.checklist {
	background: var(--surface-warm);
	border: var(--border-width) solid var(--surface-warm-line);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}
.checklist ul { margin-block-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.checklist li {
	display: flex;
	gap: var(--space-2);
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
.checklist li::before { content: '·'; font-weight: 700; color: var(--accent); }