/* =========================
   Contact Page (İletişim)
   Add to: assets/css/pages/services.css
========================= */

.yr-contact{ padding: clamp(22px, 4vw, 44px) 0; }
.yr-contact__wrap{ display:grid; gap: clamp(16px, 3vw, 26px); }

/* Intro */
.yr-contact__intro{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding: clamp(16px, 2.6vw, 22px);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.yr-contact__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,24,.25);
  background: linear-gradient(135deg, rgba(255,185,64,.16), rgba(255,255,255,1));
  font-weight: 800;
  letter-spacing: .2px;
}

.yr-contact__title{
  margin: 10px 0 8px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.yr-contact__lead{
  margin: 0;
  color: rgba(15,23,42,.78);
  line-height: 1.75;
  font-size: 1.02rem;
  max-width: 82ch;
}

.yr-contact__ctaRow{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* CTA buttons */
.yr-contact .yr-ctaBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  text-decoration:none;
  font-weight: 900;
  line-height: 1;
  background:#fff;
  color:#0f172a;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.yr-contact .yr-ctaBtn--primary{
  border-color: rgba(255,122,24,.45);
  background: linear-gradient(135deg, #ffb940, #ff7a18);
  color: #1a1206;
}

.yr-contact .yr-ctaBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
  border-color: rgba(255,122,24,.35);
}

/* Grid */
.yr-contact__grid{
  display:grid;
  grid-template-columns: 1.05fr 1.2fr 1.05fr;
  gap: clamp(12px, 2vw, 18px);
  align-items: start;
}

@media (max-width: 1020px){
  .yr-contact__grid{ grid-template-columns: 1fr; }
}

/* Side cards */
.yr-contact__side{
  display:grid;
  gap: 12px;
}

.yr-cCard{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
}

.yr-cCard__icon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,122,24,.25);
  background: linear-gradient(135deg, rgba(255,185,64,.18), rgba(255,255,255,1));
  flex: 0 0 auto;
}

.yr-cCard__title{
  font-weight: 900;
  margin-bottom: 4px;
}

.yr-cCard__text{
  color: rgba(15,23,42,.78);
  line-height: 1.6;
}

.yr-cCard__link{
  color: #0f172a;
  text-decoration: none;
  border-bottom: 1px dashed rgba(15,23,42,.35);
}
.yr-cCard__link:hover{ border-bottom-style: solid; }

.yr-cMiniNote{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,185,64,.16), rgba(255,255,255,1));
  border: 1px solid rgba(255,122,24,.20);
  color: rgba(15,23,42,.84);
  box-shadow: 0 14px 40px rgba(0,0,0,.04);
}

/* Form */
.yr-contact__form{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.yr-formHead__kicker{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  font-weight: 900;
  margin-bottom: 10px;
}
.yr-formHead__title{ margin: 0 0 6px; font-size: 1.22rem; }
.yr-formHead__desc{ margin: 0 0 12px; color: rgba(15,23,42,.72); line-height: 1.65; }

.yr-formBox{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
}

/* Fluent Forms styling */
.yr-formBox .ff-el-group{ margin-bottom: 12px; }
.yr-formBox .ff-el-form-control{
  border-radius: 12px;
  border-color: rgba(15,23,42,.14);
}
.yr-formBox .ff-btn{
  border-radius: 14px;
  font-weight: 900;
  padding: 12px 14px;
  border: 1px solid rgba(255,122,24,.45);
  background: linear-gradient(135deg, #ffb940, #ff7a18);
  color: #1a1206;
}
.yr-formBox .ff-btn:hover{ filter: saturate(1.05) contrast(1.02); }

/* Map */
.yr-contact__map{
  position: sticky;
  top: 110px; /* sticky header yüksekliğine göre ayarla */
}

@media (max-width: 1020px){
  .yr-contact__map{ position: static; }
}

.yr-mapCard{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.yr-mapCard__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(255,255,255,1));
}

.yr-mapCard__title{ font-weight: 900; }
.yr-mapCard__open{
  font-weight: 900;
  text-decoration:none;
  color:#0f172a;
  border-bottom: 1px dashed rgba(15,23,42,.35);
}
.yr-mapCard__open:hover{ border-bottom-style: solid; }

.yr-mapCard__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16/12;
  background: rgba(15,23,42,.04);
}
.yr-mapCard__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.yr-mapCard__foot{
  padding: 12px 14px;
  border-top: 1px solid rgba(15,23,42,.10);
}

.yr-mapHint{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(15,23,42,.78);
  line-height: 1.6;
}

/* UX: anchor offset */
#teklif-formu{ scroll-margin-top: 120px; }