/* =========================================================
   b2bNet — iletisim.css
   Iletisim sayfasi. main.css'ten SONRA yuklenir.

   Yaklasim: kutu yok, cizgi var. Beyaz kart uzerine beyaz
   kart yigmak yerine alanlar ince cizgilerle ayrilir. Form
   alanlari cerceveli kutu degil, alti cizgili satirlardir;
   sayfanin agirlik merkezi formdur.
   ========================================================= */

.b2b-iletisim{
  /* Sabit menunun kapladigi yukseklik. */
  --b2b-ilt-ust:84px;

  --b2b-ilt-zemin:#F6F9FF;
  --b2b-ilt-cizgi:#DCE5F4;
  --b2b-ilt-cizgi-ince:#E9EFFA;
  --b2b-ilt-solgun:#8296B5;

  background:var(--b2b-ilt-zemin);
}

.b2b-iletisim-ic{
  max-width:1100px; margin-inline:auto;
  padding-inline:20px;
  padding-top:calc(var(--b2b-ilt-ust) + 52px);
  padding-bottom:90px;
}
@media (min-width:768px){
  .b2b-iletisim-ic{
    padding-top:calc(var(--b2b-ilt-ust) + 80px);
    padding-bottom:120px;
  }
}

/* kucuk ust etiket — hap degil, duz yazi */
.b2b-ilt-ustluk{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--b2b-mavi-600);
}


/* ---------------------------------------------------------
   1. DUZEN
   Masaustunde iki sutun, aralarinda tek bir ince cizgi.
   Mobilde tek sutun; cizgi yatay ayirac olur.
   --------------------------------------------------------- */
.b2b-iletisim-duzen{
  display:grid; gap:0;
  grid-template-columns:1fr;
}
@media (min-width:940px){
  .b2b-iletisim-duzen{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:start;
  }
  .b2b-ilt-form-alan{ padding:44px 44px 48px; }
}


/* ---------------------------------------------------------
   2. SOL SUTUN
   --------------------------------------------------------- */
.b2b-ilt-metin{ padding-bottom:44px; }
@media (min-width:940px){ .b2b-ilt-metin{ padding:8px 56px 0 0; } }

.b2b-iletisim-baslik{
  margin:18px 0 0;
  font-size:clamp(2rem,4.2vw,2.9rem);
  font-weight:700; line-height:1.1; letter-spacing:-.035em;
  color:var(--b2b-lacivert);
}
.b2b-iletisim-aciklama{
  max-width:40ch; margin:18px 0 0;
  font-size:clamp(1rem,1.4vw,1.1rem);
  line-height:1.66; color:var(--b2b-gri);
}

/* ---- numarali maddeler ----
   Ikon yok. Sirali numara ve ince cizgi, yazi listesi gibi
   okunur; kalabalik gorunmez. */
.b2b-ilt-madde{
  list-style:none; margin:34px 0 0; padding:0;
  border-top:1px solid var(--b2b-ilt-cizgi-ince);
}
.b2b-ilt-madde li{
  display:grid; grid-template-columns:38px minmax(0,1fr);
  gap:6px; align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--b2b-ilt-cizgi-ince);
}
.b2b-ilt-madde-no{
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--b2b-mavi-600);
  font-variant-numeric:tabular-nums;
}
.b2b-ilt-madde-yazi{
  font-size:15.5px; font-weight:500; line-height:1.5;
  color:var(--b2b-lacivert);
}

/* ---- alt kunye ----
   Telefonlar burada; amac formu doldurtmak oldugu icin
   dikkat cekmeden, okunakli bicimde durur. */
.b2b-ilt-kunye{ margin-top:34px; }

.b2b-ilt-kunye-baslik{
  margin:0 0 10px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--b2b-ilt-solgun);
}
.b2b-ilt-kunye-satir{
  margin:0; font-size:14.5px; line-height:1.85; color:var(--b2b-gri);
}
.b2b-ilt-kunye-satir a{
  color:var(--b2b-lacivert); font-weight:600;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.b2b-ilt-kunye-satir a:hover{
  color:var(--b2b-mavi-700);
  border-bottom-color:var(--b2b-mavi-200);
}
.b2b-ilt-kunye-adres{
  margin:10px 0 0;
  font-size:13.5px; line-height:1.6; color:var(--b2b-ilt-solgun);
}


/* ---------------------------------------------------------
   3. FORM
   Cerceveli kutu yerine alti cizgili alanlar.
   --------------------------------------------------------- */
/* Form beyaz bir yuzey uzerinde durur; sayfanin agirlik
   merkezi oldugu belli olsun. Cerceve ve kalin golge yok,
   yalnizca yuzeyi zeminden ayiran cok yumusak bir golge. */
.b2b-ilt-form-alan{
  padding:30px 22px 34px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 60px -46px rgba(11,38,102,.45);
}
@media (min-width:640px){
  .b2b-ilt-form-alan{ padding:36px 32px 40px; border-radius:28px; }
}

.b2b-form-baslik{
  margin:0;
  font-size:1.25rem; font-weight:700; letter-spacing:-.024em;
  color:var(--b2b-lacivert);
}
.b2b-form-yazi{
  margin:8px 0 0;
  font-size:14.5px; line-height:1.6; color:var(--b2b-gri);
}

.b2b-form{ display:grid; gap:26px; margin-top:32px; }

.b2b-form-ikili{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:560px){
  .b2b-form-ikili{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
}

.b2b-alan{ display:block; position:relative; }

.b2b-alan-etiket{
  display:block; margin-bottom:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--b2b-ilt-solgun);
  transition:color .2s ease;
}
.b2b-alan:focus-within .b2b-alan-etiket{ color:var(--b2b-mavi-700); }
.b2b-alan-etiket span{ color:var(--b2b-mavi-500); }

.b2b-giris,
.b2b-secim,
.b2b-metin{
  display:block; width:100%;
  padding:0 0 11px;
  border:0; border-bottom:1px solid var(--b2b-ilt-cizgi);
  border-radius:0; background:transparent; outline:0;
  font-family:inherit; font-size:16px; color:var(--b2b-lacivert);
  transition:border-color .25s ease;
}
.b2b-giris{ min-height:38px; }
.b2b-giris::placeholder,
.b2b-metin::placeholder{ color:#A9B8D2; }

.b2b-metin{
  min-height:96px; padding-top:4px;
  line-height:1.6; resize:vertical;
}

/* Odaklanınca cizgi soldan saga cizilir. Alan yer degistirmez. */
.b2b-alan::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--b2b-mavi-600);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--b2b-gecis);
}
.b2b-alan:focus-within::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  .b2b-alan::after{ transition:none; }
}

/* tarayicinin kendi oku yerine tek bir ok */
.b2b-secim{
  appearance:none; -webkit-appearance:none;
  min-height:38px; padding-right:28px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312306E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:16px 16px;
}
.b2b-secim:invalid{ color:#A9B8D2; }

/* ---- onay ---- */
.b2b-onay{
  display:flex; align-items:flex-start; gap:11px;
  font-size:13.5px; line-height:1.6; color:var(--b2b-gri);
  cursor:pointer;
}
.b2b-onay input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  border:1px solid var(--b2b-ilt-cizgi); border-radius:5px;
  background:#fff; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.b2b-onay input:checked{
  background:var(--b2b-lacivert); border-color:var(--b2b-lacivert);
}
.b2b-onay input:checked::after{
  content:''; display:block;
  width:4px; height:8px; margin:2px auto 0;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.b2b-onay a{
  color:var(--b2b-lacivert); font-weight:600;
  border-bottom:1px solid var(--b2b-ilt-cizgi);
  transition:border-color .2s ease;
}
.b2b-onay a:hover{ border-bottom-color:var(--b2b-mavi-600); }

.b2b-form-gonder{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:4px;
}
.b2b-form-gonder .b2b-buton{ margin-top:0; }
.b2b-form-not{
  margin:0; flex:1 1 200px;
  font-size:12.5px; line-height:1.5; color:var(--b2b-ilt-solgun);
}


/* =========================================================
   6. DOGRUDAN KANALLAR
   Sayfada form yok; sag sutundaki beyaz yuzey telefon,
   e-posta ve adresi tasiyor. Kutu icinde kutu olmasin diye
   kanallar ince cizgilerle ayrilmis satirlar halinde durur.
   ========================================================= */
.b2b-ilt-kanal{
  list-style:none; margin:22px 0 0; padding:0;
  border-top:1px solid var(--b2b-ilt-cizgi-ince);
}
.b2b-ilt-kanal li{
  padding:16px 0;
  border-bottom:1px solid var(--b2b-ilt-cizgi-ince);
}
.b2b-ilt-kanal-etiket{
  display:block; margin-bottom:4px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--b2b-ilt-solgun);
}
.b2b-ilt-kanal-deger{
  display:block;
  font-size:1.15rem; font-weight:700; letter-spacing:-.02em;
  line-height:1.35; color:var(--b2b-lacivert);
  font-variant-numeric:tabular-nums;
}
.b2b-ilt-kanal-deger a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.b2b-ilt-kanal-deger a:hover{
  color:var(--b2b-mavi-700); border-bottom-color:var(--b2b-mavi-200);
}
.b2b-ilt-kanal-yazi{
  display:block; margin-top:5px;
  font-size:13.5px; line-height:1.55; color:var(--b2b-gri);
}

.b2b-ilt-eylem{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:24px;
}
.b2b-ilt-eylem .b2b-buton{ flex:0 1 auto; }

/* Mobilde ust alan durgunken 140px (duyuru seridi + menu). */
@media (max-width:767px){
  .b2b-iletisim{ --b2b-ilt-ust:104px; }
}

/* --cam butonu beyaz yazi + saydam zemin; beyaz panelin uzerinde
   kayboluyordu. Acik yuzeyde kendi rengine cevriliyor.
   Ayrica main.css'te --cam'in margin-top:32px'i var; flex satirini
   84px'e sisirip yanindaki mavi butonu stretch ile geriyordu. */
.b2b-ilt-eylem .b2b-buton--cam{
  margin-top:0;
  background:#EEF4FF;
  color:var(--b2b-mavi-700);
  border:1px solid #DCE7FF;
}
.b2b-ilt-eylem .b2b-buton--cam:hover{
  background:#E2ECFF; border-color:var(--b2b-mavi-200);
}