/* ============================================================
   İLETİŞİM — Görsel benzeri düzen, gradyant arka plan
   ============================================================ */

:root{
  --ci-ink: #0b0f17;
  --ci-muted:#6b7a8a;
  --ci-card:#ffffff;
  --ci-pill:#0b0f17;
  --ci-accent:#8d2f2f;
}

.contact-hero{ position:relative; padding: 128px 0 88px }
.contact-hero__bg{
  position:absolute; inset:0; z-index:-1;
  /* Kahverengi → Bordo gradyant */
  background: radial-gradient(1200px 600px at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,0)) ,
              linear-gradient(150deg, #4a2f22 0%, #5a3a2a 30%, #724532 65%, #0b0f17 100%);
}

.contact-hero__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:start }

.contact-hero__left{ color:#e9eef5 }
.contact-title{ margin:0 0 14px 0; color:#fff; font-size: clamp(28px, 4vw, 44px); line-height:1.15 }
.contact-sub{ margin:0 0 24px 0; color:#c7d0db; max-width:640px }

.contact-info{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:18px }
.contact-info__col{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px }
.contact-info__col h3{ margin:0 0 8px 0; color:#fff; font-size:14px }
.contact-info__col p{ margin:0 0 6px 0; color:#e9eef5; font-size:14px }
.contact-info__col a{ color:#e9eef5; text-decoration:none }
.contact-info__col a:hover{ text-decoration:underline }

.contact-card{ background:var(--ci-card); color:var(--ci-ink); border-radius:16px; padding:18px; box-shadow: 0 12px 36px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06) }
.contact-card__header{ font-weight:700; margin:4px 6px 6px 6px }
.contact-card__lead{ margin:0 6px 12px 6px; color:var(--ci-muted); font-size:14px }

.contact-form{ display:grid; gap:12px }
.row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.row.one{ display:grid; grid-template-columns:1fr }

.field{ display:block }
.field input,
.field textarea{
  width:100%; border:1px solid rgba(0,0,0,.15); border-radius:14px; background:#fff;
  padding:12px 14px; font:inherit; color:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa7b6 }
.field input:focus, .field textarea:focus{ border-color:#8d2f2f; box-shadow:0 0 0 3px rgba(141,47,47,.12) }
.field textarea{ resize:vertical; min-height:140px }

.group{ display:grid; gap:8px }
.group__label{ font-size:13px; color:#4b5563; margin:2px 2px }
.pills{ display:flex; flex-wrap:wrap; gap:8px }
.pill{ height:34px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,0,0,.16); background:#fff; cursor:pointer; font:inherit }
.pill:hover{ background:#f4f6f8 }
.pill.is-active{ background:var(--ci-pill); color:#fff; border-color:var(--ci-pill) }

.check{ display:flex; align-items:center; gap:8px; font-size:13px; color:#4b5563 }
.check input{ width:16px; height:16px; accent-color:#0b0f17 }

.submit{ height:44px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#f5f6f8; color:#0b0f17; font-weight:600; cursor:pointer; width:100% }
.submit:hover{ filter:brightness(1.02) }

@media (max-width: 1100px){
  .contact-hero__grid{ grid-template-columns: 1fr }
  .contact-card{ order:2 }
}
@media (max-width: 900px){
  .contact-hero{ padding: 80px 0 56px }
  .contact-info{ grid-template-columns: repeat(2,1fr) }
  .row.two{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .contact-info{ grid-template-columns: 1fr }
}

/* ================== [Harita Bölümü] ================== */
.contact-map{ background:#0f0e0d; color:#e9e9e4; padding:48px 0 }
.contact-map__grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:24px; align-items:start }
.contact-map__text h2{ margin:0 0 8px 0 }
.contact-map__text p{ margin:0 0 10px 0; color:#d0ccc7 }
.map-btn{
  display:inline-grid; place-items:center; height:44px; padding:0 16px;
  border-radius:12px; background:#8d2f2f; color:#e9e9e4; text-decoration:none; font-weight:600;
}
.map-btn:hover{ filter:brightness(1.05) }
.contact-map__embed iframe{ width:100%; height:360px; border:0; border-radius:12px }

@media (max-width: 900px){
  .contact-map__grid{ grid-template-columns:1fr }
  .contact-map__embed iframe{ height:300px }
}