/* ==========================================================================
   contact.css — page-specific layer for iletisim.html (İletişim)
   Built from Figma Designs/Contact Page.png (1280px frame).

   Loads after styles.css (tokens + shared chrome) and polish.css (motion).
   The page-hero band and footer trim mirror hakkimizda.css so this page stays
   self-contained; if a third interior page lands, factor these into a shared
   pages.css.
   ========================================================================== */

/* --------------------------------------------------------------- page hero */
.page-hero {
  margin-top: 20px;
  padding: 62px 60px 66px;
  border-radius: var(--r-panel);
  background: var(--surface-hero);
}
.page-hero__title {
  font: 700 clamp(34px, 4.2vw, 46px)/1.08 var(--font-head);
  color: var(--navy-head);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.page-hero__sub {
  margin-top: 14px;
  max-width: 460px;
  font: 400 18px/24px var(--font-body);
  color: var(--ink-hero);
}

/* --------------------------------------------------------------- layout */
.section--contact { padding-top: 74px; padding-bottom: 24px; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px;
  align-items: start;
}

/* --------------------------------------------------------------- form */
.form { margin-top: 26px; }

/* .field / .field__label / .field__input live in styles.css (shared with the
   home page's newsletter dialog); only the form layout is here. */
.form > .field + .field,
.form > .consent + .field { margin-top: 22px; }
.form > .field + .consent { margin-top: 14px; }
.field__textarea { min-height: 152px; resize: vertical; }

/* "Ben:" select. Long options are cut with an ellipsis when closed on narrow
   screens; the open list always shows them in full. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326333a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.form__note {
  margin-top: 24px;
  font: 400 15px/1.5 var(--font-body);
  color: #45575f;
}
.form__note a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }


.form__actions { margin-top: 18px; }
.form { position: relative; }

/* Inline status after a submit attempt. */
.form__status {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--surface-hero);
  border: 1px solid var(--ring-light);
  font: 500 16px/1.45 var(--font-body);
  color: var(--ink-deep);
}
.form__status[data-state="error"] {
  background: #fdf1ef;
  border-color: #f0c9c2;
  color: #7a1f12;
}

/* --------------------------------------------------------------- info card */
.info-card {
  padding: 32px;
  border: 1px solid #dfeaee;
  border-radius: var(--r-panel);
  background: #f6fbfc;
}
.info-card__title {
  font: 700 22px/1.2 var(--font-head);
  color: var(--ink-blue);
}

.info-group { margin-top: 22px; }
.info-group__label {
  font: 600 15px/1.2 var(--font-body);
  color: var(--teal);
}
.info-group__value {
  margin-top: 5px;
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink-blue);
}
.info-group__value a { color: inherit; text-decoration: none; }
.info-group__value a:hover { color: var(--teal); }

/* --------------------------------------------------------------- footer trim */
.page-contact .footer { padding-top: 0; }
.page-contact .footer__grid {
  padding-top: 58px;
  border-top: 1px solid #e6edf0;
}

/* ==========================================================================
   Responsive — mirrors the breakpoints in styles.css.
   ========================================================================== */

@media (max-width: 1040px) {
  .page-hero { padding: 52px 44px 56px; }
  .contact { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}

@media (max-width: 860px) {
  .section--contact { padding-top: 60px; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .info-card { max-width: 520px; }
}

@media (max-width: 620px) {
  .page-hero { margin-top: 12px; padding: 40px 26px 44px; }
  .info-card { padding: 26px; }
}