:root{
  --brand:#0b2a7a;
  --brand-dark:#081d54;
  --card:#1e4f86;
  --text:#111827;
  --muted:#6b7280;
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family: Arial, Helvetica, sans-serif; color:var(--text); background:#f6f8fb; }
.container{ width:min(1200px, 92%); margin:0 auto; }

/* TOPBAR */
.topbar{ background:var(--brand-dark); color:#fff; font-size:14px; }
.topbar-inner{ display:flex; gap:30px; align-items:center; padding:10px 0; }
.topbar-item{ display:flex; align-items:center; gap:8px; }
.topbar a{ color:#fff; text-decoration:none; opacity:.95; }
.topbar a:hover{ opacity:1; }

/* HEADER */
.header{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:10; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo{ height:56px; width:auto; display:block; }

.nav{ display:flex; gap:16px; }
.nav-link{
  text-decoration:none;
  color:#111;
  font-weight:800;
  font-size:13px;
  padding:8px 12px;
  border-radius:10px;
  transition:.2s;
}
.nav-link:hover{ background:rgba(11,42,122,.08); color:var(--brand); }
.nav-link.active{ background:rgba(11,42,122,.10); color:var(--brand); }

/* HERO */
.contact-hero{
  position:relative;
  min-height: 520px;
  overflow:hidden;
}
.contact-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform: scale(1.02);
}
.contact-hero-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.contact-hero-content{
  position:relative;
  padding: 70px 0 40px;
  color:#fff;
}
.contact-hero-content h1{
  font-size: clamp(32px, 4vw, 54px);
  line-height:1.05;
  font-weight: 900;
  margin-bottom: 14px;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.hero-mini-link{
  display:inline-block;
  color:#d7ecff;
  font-weight:800;
  text-decoration:none;
  margin-bottom: 22px;
}
.hero-mini-link:hover{ text-decoration:underline; }

/* INFO CARDS */
.info-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top: 10px;
}
.info-card{
  background: rgba(11,42,122,.80);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.info-card h3{
  font-size: 14px;
  font-weight: 900;
  letter-spacing:.4px;
  margin-bottom: 10px;
}
.info-card p{
  font-size: 13px;
  opacity:.95;
  margin: 4px 0;
}

/* DOWN ARROW */
.down-arrow{
  margin: 18px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  color:#fff;
  font-size:26px;
  cursor:pointer;
  transition:.2s;
}
.down-arrow:hover{ background: rgba(255,255,255,.22); }

/* BODY */
.contact-body{
  padding: 36px 0 60px;
}

/* FORM */
.contact-form{
  background:#fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  margin-top: -28px; /* örnekteki gibi hero altına yaklaşsın */
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
}
.contact-form textarea{ resize: vertical; }

.form-actions{
  display:flex;
  justify-content:center;
  margin-top: 12px;
}
.btn-submit{
  border:none;
  background: var(--brand);
  color:#fff;
  font-weight:900;
  padding: 10px 22px;
  border-radius: 10px;
  cursor:pointer;
  transition:.2s;
}
.btn-submit:hover{ filter:brightness(.95); }

/* MAP */
.map-wrap{
  margin-top: 18px;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}
.map-wrap iframe{
  width:100%;
  height: 340px;
  border:0;
  display:block;
}

/* FOOTER */
.footer{
  background:#0d0d0d;
  color:#aaa;
  text-align:center;
  padding: 26px 10px;
  font-size: 14px;
}


/* RESPONSIVE */
@media(max-width:900px){
  .info-cards{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .contact-hero-content{ padding: 46px 0 26px; }
}
/* === TAŞMA (horizontal overflow) FIX === */
html, body { max-width: 100%; overflow-x: hidden; }

/* Flex içindeki çocuklar taşmayı sever -> min-width:0 şart */
.topbar-inner,
.header-inner { min-width: 0; }

/* Topbar satırı küçük ekranda alt alta düşebilsin */
.topbar-inner{
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Topbar item'lar uzun metinde taşmasın */
.topbar-item{
  min-width: 0;
  max-width: 100%;
}
.topbar-item a{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;   /* uzun mail/telefon kırılır */
  word-break: break-word;
}

/* Header menü küçük ekranda sığmazsa wrap olsun */
.nav{
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Grid taşması riskine karşı */
.info-cards{ min-width: 0; }
.contact-form{ min-width: 0; }

/* Form içindeki input/textarea güvenli */
.contact-form input,
.contact-form select,
.contact-form textarea{
  min-width: 0;
}

/* === TELEFON NUMARASI KOYU MAVİ (tel linki) FIX === */
/* Topbar'daki linkler zaten beyaz: bunu daha "kesin" yapıyoruz */
.topbar a,
.topbar a:visited,
.topbar a:hover,
.topbar a:active{
  color:#fff;
}

/* Eğer telefon numarası sayfanın başka yerindeyse (form dışında bir link) */
a[href^="tel:"],
a[href^="tel:"]:visited{
  color: inherit;
  text-decoration: none;
}
a[href^="tel:"]:hover{ text-decoration: underline; }
/* ===== MOBIL HEADER GÖRÜNTÜSÜNÜ TOPARLA ===== */
@media (max-width: 700px){

  /* Header düzeni */
  .header-inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
  }

  /* Logo biraz küçülsün */
  .logo{
    height: 44px;
  }

  /* Menü ortalı ve düzgün sarılsın */
  .nav{
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Linkleri aynı “pill” görünümüne sok */
  .nav-link{
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(11,42,122,.06);
    border: 1px solid rgba(11,42,122,.12);
  }

  .nav-link.active{
    background: rgba(31,182,255,.18); /* accent */
    border-color: rgba(31,182,255,.35);
    color: var(--brand);
  }

  /* Topbar çok sıkışmasın, ortalansın */
  .topbar-inner{
    justify-content: center;
    gap: 14px;
    padding: 10px 0;
  }
}