/* =============================================================
 * contact-form.css — İletişim formu + form'lu footer (footer-contact)
 * Koyu zemin (footer) ve açık zemin (Contact sayfası) varyantları
 * ============================================================= */

/* ---- Form (ortak) ---- */
.cform { display: flex; flex-direction: column; gap: var(--sp-5); }
.cform__field { display: flex; flex-direction: column; gap: var(--sp-2); }
.cform label,
.cform legend { font-size: var(--fs-caption); }

.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform textarea,
.cform select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: transparent; font-size: var(--fs-body);
  transition: border-color var(--transition);
}
.cform input:focus,
.cform textarea:focus,
.cform select:focus { outline: none; border-color: var(--c-primary); }
.cform textarea { resize: vertical; min-height: 96px; }

/* Select ok işareti ("keyboard_arrow_down" 12×8 SVG) */
.cform__select { position: relative; }
.cform__select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 8px;
  transform: translateY(-50%); pointer-events: none;
  background: url("/site/assets/img/brand/cform-select-chevron.svg") center / contain no-repeat;
}
.cform select { appearance: none; -webkit-appearance: none; }

/* Checkbox grubu (19×19 kare: default = border Neutral/Border, checked = mavi çerçeve+dolgu SVG) */
.cform__checks { border: 0; padding: 0; margin: 0; }
.cform__checks legend { margin-bottom: var(--sp-3); padding: 0; }
.cform__checks-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5);
}
.cform__check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); cursor: pointer; }
.cform__check input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 19px; height: 19px; border: 1px solid var(--c-border); border-radius: 0;
  cursor: pointer;
}
/* dark (footer-contact): mavi. light (Contact sayfası, 370:243): magenta — iki varyant farklı renk */
.cform--dark .cform__check input:checked {
  border-color: transparent;
  background: url("/site/assets/img/brand/cform-checkbox-checked.svg") center / contain no-repeat;
}
.cform--light .cform__check input:checked {
  border-color: transparent;
  background: url("/site/assets/img/brand/contact/cform-checkbox-checked-magenta.svg") center / contain no-repeat;
}
.cform--dark .cform__check input { border-color: rgba(255,255,255,.3); }

/* Not (sol mavi çizgi) */
.cform__note {
  font-size: var(--fs-caption);
  border-left: 3px solid var(--c-primary); padding-left: var(--sp-3);
}
/* Light form (Contact 370:487): sol çizgi Secondary/100 açık pembe (mavi DEĞİL) */
.cform--light .cform__note { border-left-color: #fbe5f5; }
.cform__submit { width: 100%; margin-top: var(--sp-2); }
.cform__submit:disabled { opacity: .6; cursor: not-allowed; }

/* FormKeep gönderim durum mesajı (JS ile gösterilir/gizlenir) */
.cform__status { font-size: var(--fs-caption); margin: 0; }
.cform__status.is-success { color: #1a7f37; }
.cform__status.is-error { color: #d1242f; }
.cform--dark .cform__status.is-success { color: #4ade80; }
.cform--dark .cform__status.is-error { color: #f87171; }

/* ---- Light varyant (Contact sayfası) ---- */
.cform--light label,
.cform--light legend { color: var(--c-body); }
.cform--light input,
.cform--light textarea,
.cform--light select { color: var(--c-heading); }
.cform--light .cform__note { color: var(--c-body); }

/* ---- Dark varyant (footer) ---- */
.cform--dark label,
.cform--dark legend { color: var(--c-on-dark-muted); }
.cform--dark input,
.cform--dark textarea,
.cform--dark select {
  color: var(--c-on-dark); border-color: rgba(255,255,255,.22);
}
.cform--dark input::placeholder,
.cform--dark textarea::placeholder { color: rgba(255,255,255,.4); }
.cform--dark .cform__select::after,
.cform--dark option { color: #111; }
.cform--dark select option { color: #111; }
.cform--dark .cform__check { color: var(--c-on-dark-muted); }
.cform--dark .cform__note { color: var(--c-on-dark-muted); }

/* =============================================================
 * footer-contact (form'lu büyük footer)
 * ============================================================= */
/* .footer'ın sade-varyant sabit height/absolute konumlarını (components.css) burada override et —
   .fc kendi ayrı .fc__* mimarisini (relatif flow) kullanıyor, 792px sabit yükseklik yanlış olurdu. */
.fc {
  height: auto;
  padding-bottom: var(--sp-8);
}
/* Marka bloğu (541:1879, node 459:296/297/298): logo y=192 (matrix'in 0-289 aralığının İÇİNDE,
   Tasarımda kasıtlı bindirme/overlay), tagline y=242. .footer__matrix position:absolute olduğu için
   akışta yer kaplamıyor — bu yüzden brand-row'un üst boşluğu matrix yüksekliğine göre DEĞİL,
   doğrudan tasarımın y=192 koordinatına göre ayarlanmalı (padding-top:96px yanlıştı, logo'yu
   matrix'in çok daha üstüne, olması gerekenden 96px yukarı çekip Contact Us bandına biniyordu). */
.fc__brand-row {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  padding-top: 192px;
}
.fc__logo { display: block; }
.fc__logo img { display: block; width: 173px; height: 41px; }
/* Tagline (I541:1879;459:298): Inter Medium 26/44, letterSpacing -0.0308em, sağa yaslı */
.fc__tagline {
  font-family: 'Inter', var(--font-body); font-weight: 500; font-size: 26px; line-height: 44px;
  letter-spacing: -0.0308em; color: #595959; text-align: right; margin: 0;
}
.fc__tagline-accent { color: #CFCFCF; }
/* Tasarımda "Contact Us" grid'i y=354'ten başlıyor — matrix bandının bitişinden (289) sonra net
   65px boşluk var. brand-row'un DOM yüksekliği (padding-top 192 + logo 41 + gap 9 + tagline 44 = 286)
   üzerine bu farkı (354-286=68) margin-top olarak ekliyoruz ki grid matrix'e/brand'a binmesin. */
.fc__grid {
  position: relative;
  margin-top: 68px;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9);
  align-items: start;
}
.fc__eyebrow { font-size: var(--fs-caption); color: var(--c-on-dark-muted); margin-bottom: var(--sp-3); }
.fc__title {
  font-family: var(--font-heading); font-size: 36px; line-height: 48px; font-weight: 600;
  color: var(--c-on-dark); margin: 0 0 var(--sp-5);
}
.fc__line { font-size: var(--fs-caption); color: var(--c-on-dark-muted); margin-bottom: 4px; line-height: 1.6; }
.fc__email-accent { color: var(--c-secondary); }
.fc__address { margin-top: var(--sp-2); }

/* 860-1024px arası: sol (iletişim, kısa metin) ve sağ (form, çok daha fazla içerik) 1fr 1fr
   ile eşit paylaşınca sol boş kalıp sağ sıkışıyordu, "kullanışsız" görünüyordu. Breakpoint'i
   1024px'e çıkarıp bu aralığı da tek sütuna (form altta, tam genişlik) düşürdük. */
@media (max-width: 1024px) {
  .fc__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .fc__brand-row { justify-content: flex-start; padding-top: var(--sp-8); }
  .cform__checks-grid { grid-template-columns: 1fr; }
}