/* iletisim.css — YapıBak Premium */

.contact{
  height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 18px 22px;
  display: grid;
  place-items: center;
}

.contact-panel{
  width: min(1280px, 96%);
  height: min(690px, calc(100vh - var(--header-h) - var(--footer-h) - 36px));
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 30px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
  position: relative;
}

/* Kart arka planı: YapıBak renk vurgulu premium panel */
.contact-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 520px at 20% 10%, rgba(77,171,247,.18), transparent 60%),
    radial-gradient(1100px 520px at 85% 20%, rgba(32,201,151,.16), transparent 62%),
    linear-gradient(180deg, rgba(245,247,250,.95), rgba(232,236,242,.96));
  z-index:0;
}
.contact-panel > *{ position:relative; z-index:1; }

.panel-header{
  padding: 16px 22px 10px;
}

.panel-title{
  margin: 0;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.6px;
  color: #0b1b33;
}

.panel-title::after{
  content:"";
  display:block;
  width: 150px;
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
}

/* Gövde */
.panel-body{
  padding: 0 18px 18px;
  height: calc(100% - 74px);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
}

/* SOL */
.left-col{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

/* İletişim bilgi kartı: glass + gradient */
.info-card{
  border-radius: 18px;
  padding: 16px 16px;
  position: relative;
  min-height: 190px;

  background:
    radial-gradient(900px 420px at 20% 0%, rgba(77,171,247,.18), transparent 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(32,201,151,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,16,34,.92), rgba(4,10,22,.92));

  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
  overflow: hidden;
}

/* kart içi hafif grain */
.info-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity:.18;
  mix-blend-mode: soft-light;
  pointer-events:none;
}

.info-card *{ position:relative; z-index:1; }

.info-logo{
  position: absolute;
  right: 16px;
  top: 16px;
  height: 60px;
  width: auto;
  opacity: .96;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

/* Bilgi satırları */
.info-grid{
  display: grid;
  gap: 12px;
  padding-right: 92px; /* logo alanı */
}

.info-row{
  display: grid;
  grid-template-columns: 42px 92px 1fr;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,.92);
  font-weight: 750;
  font-size: 14px;
}

.info-row.address{
  align-items: start;
}

.lbl{
  color: rgba(255,255,255,.82);
  font-weight: 850;
}

.val{
  color: rgba(255,255,255,.94);
  line-height: 1.5;
  font-weight: 700;
}

.link{
  color: rgba(255,255,255,.96);
  text-decoration: none;
  font-weight: 900;
}
.link:hover{ text-decoration: underline; }

/* ICON container */
.ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Pseudo SVG ikonlar */
.i{
  width: 22px;
  height: 22px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}

/* Telefon ikonu */
.i.phone{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2320c997' d='M6.6 10.8c1.6 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.1 21 3 13.9 3 5c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.3 1.1L6.6 10.8z'/%3E%3C/svg%3E");
}

/* Mail ikonu */
.i.mail{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234dabf7' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Pin ikonu */
.i.pin{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232dd36f' d='M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 14 6 14s6-9.5 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z'/%3E%3C/svg%3E");
}

/* FORM */
.contact-form{
  display: grid;
  gap: 12px;
}

.field{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.96);
  padding: 0 14px;
  font-weight: 750;
  color: #0b1b33;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.field:focus{
  border-color: rgba(32,201,151,.65);
  box-shadow: 0 0 0 4px rgba(32,201,151,.16), 0 16px 40px rgba(0,0,0,.12);
}

.field.area{
  height: 104px;
  padding: 12px 14px;
  resize: none;
}

/* Gönder butonu: YapıBak gradient */
.send{
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  color: #061b12;
  font-weight: 950;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 22px 60px rgba(32,201,151,.20);
}
.send:hover{ transform: translateY(-1px); }

/* SAĞ: Harita */
.right-col{ height: 100%; }

.map-wrap{
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  background: #fff;
}
.map-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive */
@media (max-width: 980px){
  .contact{ padding: 14px 16px; }
  .contact-panel{ height: auto; }
  .panel-body{
    height: auto;
    grid-template-columns: 1fr;
  }
  .map-wrap{ height: 320px; }
  .info-grid{ padding-right: 0; }
  .info-logo{ position: static; display:block; margin-left:auto; margin-top: 6px; }
}
/* === İLETİŞİM: ekran sığma / taşınca otomatik scroll === */

/* Bu sayfada body/html global overflow:hidden etkisini kır */
html, body{
  overflow: auto !important;
  height: auto !important;
}

/* Header + footer arası alanı doğru hesapla */
.iletisim-main, main.iletisim-main, main{
  height: calc(100vh - var(--header-h) - var(--footer-h));
  overflow: auto;                 /* Sığmazsa scroll açılır */
  -webkit-overflow-scrolling: touch;
}

/* Sayfa iç kart alanı: sığarsa kendini toplar */
.contact-shell, .contact-wrap, .iletisim-wrap{
  width: min(1400px, 100%);
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
}

/* Harita alanı taşmasın: yüksekliği container’a uysun */
.map-box, .contact-map{
  height: 100%;
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
}

/* iframe varsa */
.map-box iframe, .contact-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sol panel de aynı şekilde */
.contact-left, .contact-info{
  height: 100%;
  min-height: 420px;
}

/* Küçük ekran: alt alta geçsin ve scroll doğal çalışsın */
@media (max-width: 980px){
  .contact-shell, .contact-wrap, .iletisim-wrap{
    grid-template-columns: 1fr;
    height: auto;
  }
  .map-box, .contact-map,
  .contact-left, .contact-info{
    min-height: 320px;
  }
}