/* =========================================================
   Contact form additions (TASK-009) — style.css stays untouched
   ========================================================= */

/* Message textarea in the template's underlined field style. */
.field textarea {
  display: block; width: 100%; min-height: 6.5rem; resize: vertical;
  background: transparent; border: 0; border-bottom: 1px solid rgba(51, 52, 58, .2);
  font: 500 .92rem/1.6 var(--font-sans); color: var(--heading);
  padding: 1.1rem 0 .6rem; border-radius: 0; outline: none;
  transition: border-color .35s var(--ease);
}
.field textarea::placeholder { color: var(--text-2); opacity: 1; }
.field textarea:focus { border-color: var(--bronze); }
.field.has-error textarea { border-color: #B3261E; }

/* Server-side field errors; hidden again once the visitor edits the field (contact-form.js drops .has-error). */
.field__error { display: block; font-size: .72rem; line-height: 1.4; color: #B3261E; }
.field__error:empty, .field:not(.has-error) .field__error { display: none; }
.field__error:not(:empty) { margin-top: .35rem; }
.field__error--check { margin-left: 1.85rem; }
.form__note--error { color: #B3261E; }

/* Honeypot: off-screen for people, still present for bots. */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- /iletisim page ---------- */
.contact-page { padding: calc(var(--header-h) + 3.5rem) 0 1rem; background: var(--white); }
@media (min-width: 1024px) { .contact-page { padding-top: calc(var(--header-h) + 5rem); } }
.contact-page .h-section { font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
.contact-info {
  display: grid; gap: 2rem; max-width: 60rem; margin: 3rem auto 0; padding: 0; list-style: none;
}
@media (min-width: 768px) { .contact-info { grid-template-columns: repeat(3, 1fr); } }
.contact-info__item { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.contact-info__label { font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); }
.contact-info__value { font-style: normal; font-size: .95rem; line-height: 1.6; color: var(--heading); }
a.contact-info__value { transition: color .3s; }
a.contact-info__value:hover { color: var(--bronze-deep); }