/* ============================================================================
   NASTEC — İletişim sayfası
   sections.css temel ızgarayı veriyor (.contact-grid, .form-*). Bu dosya
   yerleşimi ve etkileşimi güçlendirir. Renkler tokens.css'ten okunur.
   ========================================================================== */

/* ── Bilgi sütunu ─────────────────────────────────────────────────────────
   Dört düz satır, yanındaki uzun formun karşısında boşlukta kalıyordu.
   Artık her biri kendi kartında; sütun formla aynı görsel ağırlığı taşıyor. */
.contact-details { display: grid; gap: 0.9rem; list-style: none; }

.contact-details__item {
  position: relative;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  background: rgb(var(--c-panel) / 0.52);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgb(var(--c-shadow) / 0.07);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Sol kenarda gökyüzü çubuğu — hover'da açılır */
.contact-details__item::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--sky), var(--cyan));
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.4s var(--ease);
}
.contact-details__item:hover::before { transform: scaleY(1); }
.contact-details__item:hover {
  transform: translateX(3px);
  background: rgb(var(--c-panel) / 0.7);
  border-color: rgb(var(--c-blue) / 0.3);
  box-shadow: 0 14px 34px rgb(var(--c-shadow) / 0.13);
}
.contact-icon {
  background: rgb(var(--c-blue) / 0.12);
  border: 1px solid rgb(var(--c-blue) / 0.28);
  color: var(--accent-ink);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-details__item:hover .contact-icon {
  background: rgb(var(--c-blue) / 0.2);
  transform: scale(1.06);
}
.contact-label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.2rem;
}
.contact-value { display: block; font-weight: 600; line-height: 1.45; }
.contact-link { text-decoration: none; color: var(--accent-ink); }
.contact-link:hover { text-decoration: underline; }

/* ── Yanıt taahhüdü kartı — sütunun altındaki boşluğu doldurur ───────────── */
.contact-promise {
  margin-top: 1.4rem; padding: 1.3rem 1.35rem; border-radius: 16px;
  background: linear-gradient(135deg,
              rgb(var(--c-blue) / 0.12), rgb(var(--c-sand) / 0.10));
  border: 1px solid rgb(var(--c-blue) / 0.22);
}
.contact-promise__t {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  margin-bottom: 0.4rem;
}
.contact-promise__t i, .contact-promise__t svg { color: var(--accent-ink); }
.contact-promise__d { font-size: 0.88rem; line-height: 1.6; color: var(--muted); }

/* ── Form ─────────────────────────────────────────────────────────────────
   Odak halkası camgöbeğinden marka mavisine alındı; alanlar hover'da da
   hafifçe belirginleşiyor, böylece tıklanabilirlik okunuyor. */
.contact-form { padding: clamp(1.6rem, 3vw, 2.4rem); }
.form-input, .form-select, .form-textarea {
  transition: border-color 0.28s var(--ease), box-shadow 0.28s var(--ease),
              background 0.28s var(--ease);
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: rgb(var(--c-blue) / 0.34);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(var(--c-blue) / 0.18);
}
.form-label { color: var(--muted); }

/* Select oku sections.css'te sabit #34d3e8 ile gömülüydü — eski
   camgöbeği. currentColor bir background-image'da çözülmediği için ok, token
   değerinin kendisiyle çizildi. */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8d2fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.form-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }

@media (max-width: 900px) {
  .contact-details { gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-details__item, .contact-icon, .contact-details__item::before {
    transition: none;
  }
  .contact-details__item:hover { transform: none; }
  .contact-details__item:hover .contact-icon { transform: none; }
}