/* İletişim page — contact card + message form (inc/contact.php).
   Enqueued only on pages embedding [atolyeman_contact_form]. Every colour,
   space and radius comes from tokens.css, so the page morphs per segment. */

.at-contact {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: var(--at-space-12);
	align-items: start;
	margin-top: var(--at-space-8);
}

/* ---- Contact card ---- */
.at-contact__card {
	background: var(--at-surface);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius);
	padding: var(--at-space-8);
}
.at-contact__card-title {
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	font-weight: 500;
	margin: 0 0 var(--at-space-6);
}
.at-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--at-space-6);
}
.at-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--at-space-4);
	margin: 0;
}
.at-contact__icon {
	color: var(--at-accent);
	flex: none;
	display: inline-flex;
	margin-top: 2px;
}
.at-contact__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.at-contact__text strong {
	font-size: var(--at-fs-100);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--at-text-muted);
}
.at-contact__text span,
.at-contact__text a {
	font-size: var(--at-fs-200);
	line-height: var(--at-lh-body);
	color: var(--at-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.at-contact__text a:hover { color: var(--at-accent); }
.at-contact__note {
	margin: var(--at-space-8) 0 0;
	padding-top: var(--at-space-6);
	border-top: 1px solid var(--at-border);
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	line-height: var(--at-lh-body);
}

/* ---- Form ---- */
.at-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--at-space-4) var(--at-space-6);
}
.at-field { margin: 0; display: flex; flex-direction: column; gap: var(--at-space-2); }
.at-field--full { grid-column: 1 / -1; }
.at-field label {
	font-size: var(--at-fs-200);
	font-weight: 600;
	color: var(--at-text);
}
.at-field label span { color: var(--at-accent); }
.at-contact__form input[type="text"],
.at-contact__form input[type="email"],
.at-contact__form input[type="tel"],
.at-contact__form select,
.at-contact__form textarea {
	width: 100%;
	/* Blocksy pins form controls to a 40px height, which clipped the <select>'s
	   text once our padding was added. Let the padding define the height. */
	height: auto;
	min-height: 46px;
	padding: var(--at-space-3) var(--at-space-4);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	background: var(--at-surface);
	color: var(--at-text);
	font-family: var(--at-font-sans);
	font-size: var(--at-fs-200);
	line-height: var(--at-lh-body);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.at-contact__form textarea { resize: vertical; min-height: 150px; }
.at-contact__form input:focus,
.at-contact__form select:focus,
.at-contact__form textarea:focus {
	outline: none;
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
}

.at-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--at-space-3);
	margin-top: var(--at-space-6);
	color: var(--at-text-muted);
	font-size: var(--at-fs-100);
	line-height: var(--at-lh-body);
}
.at-contact__consent input { margin-top: 3px; flex: none; accent-color: var(--at-accent); }
.at-contact__consent a { color: var(--at-accent); }

.at-contact__submit { margin-top: var(--at-space-6); }

/* Feedback banner shown after the ?mesaj= redirect. */
.at-contact__feedback {
	margin: 0 0 var(--at-space-6);
	padding: var(--at-space-4) var(--at-space-6);
	border-radius: var(--at-radius-sm);
	border: 1px solid var(--at-border);
	background: var(--at-surface);
	font-size: var(--at-fs-200);
}
.at-contact__feedback--ok {
	border-color: var(--at-accent);
	color: var(--at-accent);
}
.at-contact__feedback--hata {
	border-color: #b4552d;
	color: #b4552d;
}

/* Honeypot — off-screen rather than display:none so bots still find it. */
.at-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.at-contact {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--at-space-8);
	}
	/* Form first on a phone: visitors arrive here to write, not to read. */
	.at-contact__form-wrap { order: -1; }
}
@media (max-width: 560px) {
	.at-contact__grid { grid-template-columns: 1fr; }
	.at-contact__card { padding: var(--at-space-6); }
	.at-contact__submit { width: 100%; }
}