/* =========================================================
   BOĞAZİÇİ YATÇILIK — İletişim Sayfası (/iletisim/)
   Yalnızca .contact-page altında scope edilir. Global selector yok.
   ========================================================= */

/* ── Utility (page-scoped bg tokens, inline CSS yerine) ──── */
.contact-page .bg-navy2{background:var(--navy2)}
.contact-page .bg-navy3{background:var(--navy3)}

/* ── Breadcrumb ──────────────────────────────────────────── */
.contact-page .c-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:.82rem;color:var(--muted)}
.contact-page .c-breadcrumb a{color:var(--muted);text-decoration:none;transition:color var(--t)}
.contact-page .c-breadcrumb a:hover{color:var(--gold)}
.contact-page .c-breadcrumb span[aria-current]{color:var(--text)}

/* ── Hero — tipografi ağırlıklı, fotoğrafsız ────────────── */
.contact-page .c-hero{background:var(--navy2);padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,80px)}
.contact-page .c-hero .wrap{max-width:760px}
.contact-page .c-hero h1{font-family:var(--f-head);font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:900;color:var(--white);line-height:1.14;margin-bottom:16px;letter-spacing:-.01em}
.contact-page .c-hero-lead{color:var(--muted);font-size:1.05rem;line-height:1.72;max-width:620px}
.contact-page .c-hero .hero-ctas{margin-top:26px}
.contact-page .c-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}
.contact-page .c-trust li{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:7px}
.contact-page .c-trust li::before{content:'✓';color:var(--gold);font-weight:700}

/* ── Hızlı iletişim kartları ─────────────────────────────── */
.contact-page .qc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-page .qc-kart{display:flex;flex-direction:column;align-items:center;padding:34px 26px;gap:2px}
.contact-page .qc-kart h3{font-family:var(--f-head);color:var(--white);font-size:1.08rem;font-weight:800;margin-bottom:8px}
.contact-page .qc-kart p{color:var(--muted);font-size:.88rem;line-height:1.65;margin-bottom:22px}
.contact-page .qc-kart .btn{margin-top:auto}
.contact-page .qc-kart--wa{border-color:var(--gold-border-hi);background:rgba(201,168,76,.05);box-shadow:var(--sh-glow)}
.contact-page .qc-kart--wa:hover{border-color:rgba(201,168,76,.38)}
@media(max-width:1024px){.contact-page .qc-grid{grid-template-columns:1fr}}

/* ── Teklif için gerekli bilgiler ────────────────────────── */
.contact-page .need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-page .need-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--r);padding:26px}
.contact-page .need-card h3{font-family:var(--f-head);color:var(--gold2);font-size:.95rem;font-weight:800;margin-bottom:8px}
.contact-page .need-card p{color:var(--muted);font-size:.85rem;line-height:1.65;margin:0}
@media(max-width:1024px){.contact-page .need-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.contact-page .need-grid{grid-template-columns:1fr}}

/* ── WhatsApp mesaj şablonu ──────────────────────────────── */
.contact-page .wa-template{max-width:620px;margin:0 auto;background:rgba(37,211,102,.05);border:1px solid rgba(37,211,102,.2);border-radius:var(--r);padding:28px;text-align:center}
.contact-page .wa-template-text{white-space:pre-wrap;text-align:left;font-family:var(--f-body);font-size:.88rem;line-height:1.8;color:var(--text);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:18px 20px;margin:0 0 20px}
@media(max-width:640px){.contact-page .wa-template{padding:20px}}

/* ── İletişim formu — .rez-form/.fg/.form-row zaten global (main.css) ── */
.contact-page .c-form{max-width:760px;margin:0 auto}

/* ── Hizmetlere göre hızlı yönlendirme ───────────────────── */
.contact-page .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-page .svc-kart{display:block;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--r);padding:26px;text-decoration:none;transition:border-color var(--t),transform var(--t)}
.contact-page .svc-kart:hover{border-color:var(--gold-border-hi);transform:translateY(-2px)}
.contact-page .svc-kart h3{font-family:var(--f-head);color:var(--white);font-size:1rem;font-weight:800;margin-bottom:8px}
.contact-page .svc-kart p{color:var(--muted);font-size:.85rem;line-height:1.6;margin:0}
@media(max-width:1024px){.contact-page .svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.contact-page .svc-grid{grid-template-columns:1fr}}

/* ── Çalışma süreci ───────────────────────────────────────── */
.contact-page .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.contact-page .proc-step{text-align:center;padding:0 10px}
.contact-page .proc-num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(201,168,76,.6);color:var(--gold);font-family:var(--f-head);font-weight:900;font-size:1.05rem;margin:0 auto 14px;background:rgba(201,168,76,.07)}
.contact-page .proc-step h3{font-family:var(--f-head);color:var(--white);font-weight:800;font-size:.95rem;margin-bottom:6px}
.contact-page .proc-step p{color:var(--muted);font-size:.83rem;line-height:1.6;margin:0}
@media(max-width:768px){
  .contact-page .proc-grid{grid-template-columns:1fr;gap:22px}
  .contact-page .proc-step{display:flex;align-items:flex-start;gap:16px;text-align:left;padding:0}
  .contact-page .proc-num{margin:0;flex-shrink:0}
}

/* ── İletişim bilgileri — .iletisim-liste zaten global (main.css) ── */
.contact-page .c-info-header{text-align:center;max-width:640px;margin:0 auto}
.contact-page .c-info-liste{max-width:620px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
@media(max-width:640px){.contact-page .c-info-liste{grid-template-columns:1fr}}

/* ── Kapanış CTA — .cta-band zaten global (main.css) ─────── */
.contact-page .cta-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ── Mobil / dar viewport ince ayarlar ───────────────────── */
@media(max-width:480px){
  .contact-page .hero-ctas .btn{width:100%;justify-content:center}
}