/* ==================== İLETİŞİM SAYFASI ==================== */
:root{
  --il-kirmizi:#E1121A;
  --il-siyah:#111214;
  --il-gri:#6b7280;
  --il-acikgri:#f4f5f7;

  /* Header yüksekliği — şeffaf header panelin üstüne binmesin diye.
     Sitendeki header daha yüksek/alçaksa SADECE bu değeri değiştir. */
  --il-header:110px;

  /* Koyu panelin yüksekliği. Kavisin yarıçapı buradan hesaplanıyor,
     bu yüzden panel ne kadar genişlerse genişlesin kavis bozulmaz. */
  --il-panel-h:clamp(460px, 40vw, 620px);
}

/* =========================================================
   1. BÖLÜM : HERO (koyu bilgi paneli + harita) — TAM GENİŞLİK
   ========================================================= */
.il-hero{
  padding-top:var(--il-header);
  background:#fff;
}

.il-hero-box{
  position:relative;
  background:#fff;
}

/* --- CANLI HARİTA (iframe) --- */
.il-harita{
  position:relative;
  width:80%;
  margin-left:auto;
  height:calc(var(--il-panel-h) + 90px);
  overflow:hidden;
}
.il-harita iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  filter:grayscale(1) contrast(1.04);
  transition:filter .6s ease;
}
/* üzerine gelince renklenir */
.il-harita:hover iframe{
  filter:grayscale(0) contrast(1);
}

/* kenarlarda beyaza erime — tıklamayı engellemesin diye pointer-events:none */
.il-harita::before,
.il-harita::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
}
/* alt kenar */
.il-harita::before{
  left:0; right:0; bottom:0;
  height:35%;
  background:linear-gradient(to top,
    #fff 0%,
    rgba(255,255,255,.80) 35%,
    rgba(255,255,255,0) 100%);
}
/* sağ kenar */
.il-harita::after{
  top:0; bottom:0; right:0;
  width:18%;
  background:linear-gradient(to left,
    #fff 0%,
    rgba(255,255,255,0) 100%);
}

/* sol koyu panel: haritanın üstünde durur, altta harita devam eder.
   Kavisin yatay yarıçapı = yüksekliğin yarısı → her genişlikte daire yayı. */
.il-panel{
  position:absolute;
  left:0;
  top:0;
  width:50%;
  max-width:860px;
  height:var(--il-panel-h);
  z-index:2;
  display:flex;
  align-items:center;
  background:var(--il-siyah);
  border-top-right-radius:calc(var(--il-panel-h) / 2) 50%;
  border-bottom-right-radius:calc(var(--il-panel-h) / 2) 50%;
}
.il-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
}
.il-panel-ic{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:60px;
  padding-bottom:60px;
  padding-right:14%;
  /* örnekteki gibi ekranın soluna yakın başlar */
  padding-left:clamp(24px, 7vw, 120px);
}

/* breadcrumb */
.il-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  color:rgba(255,255,255,.75);
  margin-bottom:14px;
}
.il-breadcrumb a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  transition:color .2s ease;
}
.il-breadcrumb a:hover{ color:#fff; }
.il-bc-home{ display:inline-flex; align-items:center; }
.il-bc-home svg{ width:18px; height:18px; display:block; }
.il-bc-sep{ opacity:.6; }
.il-bc-current{ color:#fff; }

/* başlık */
.il-hero-title{
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:48px;
  line-height:1.1;
  color:#fff;
  margin:0 0 34px;
  letter-spacing:-.5px;
}
.il-hero-title::after{
  content:"";
  display:block;
  width:54px; height:4px;
  background:var(--il-kirmizi);
  border-radius:2px;
  margin-top:20px;
}

/* iletişim bilgileri */
.il-bilgiler{
  list-style:none;
  margin:0 0 36px;
  padding:0;
  display:grid;
  gap:20px;
}
.il-bilgiler li{ display:flex; align-items:flex-start; gap:14px; }
.il-bilgiler a,
.il-bilgi-yazi{
  font-size:16.5px;
  line-height:1.5;
  color:#fff;
  text-decoration:none;
  transition:color .2s ease;
}
.il-bilgiler a:hover{ color:var(--il-kirmizi); }

.il-ikon{
  flex:0 0 38px;
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, background .25s ease;
}
.il-bilgiler li:hover .il-ikon{
  border-color:var(--il-kirmizi);
  background:var(--il-kirmizi);
}
.il-ikon svg{
  width:18px; height:18px;
  fill:none; stroke:#fff;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* butonlar */
.il-hero-butonlar{
  display:flex; align-items:center;
  gap:26px; flex-wrap:wrap;
}

.il-buton{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--il-kirmizi);
  color:#fff;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border:0;
  cursor:pointer;
  padding:13px 15px 13px 28px;
  border-radius:999px;
  transition:background .25s ease, transform .25s ease;
}
.il-buton:hover{ background:#c20f16; color:#fff; transform:translateY(-2px); }
.il-buton-ok{
  flex:0 0 28px;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.il-buton-ok::before{
  content:"";
  width:7px; height:7px;
  border-right:2px solid #fff;
  border-top:2px solid #fff;
  transform:rotate(45deg);
  margin-left:-2px;
}

.il-link{
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; font-weight:700; font-size:15px;
  text-decoration:none;
  transition:color .2s ease;
}
.il-link:hover{ color:var(--il-kirmizi); }
.il-link i{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-4px;
  transition:transform .25s ease;
}
.il-link:hover i{ transform:rotate(45deg) translate(2px,2px); }


/* =========================================================
   2. BÖLÜM : GALERİ + İLETİŞİM FORMU
   ========================================================= */
.il-form-bolum{ padding:80px 0; }

/* --- bölüm başlığı --- */
.il-etiket{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--il-kirmizi);
  margin-bottom:10px;
}
.il-baslik{
  font-family:'Nunito', sans-serif;
  font-weight:800;
  font-size:38px;
  line-height:1.15;
  color:var(--il-siyah);
  margin:0 0 16px;
  letter-spacing:-.4px;
}
.il-baslik::after{
  content:"";
  display:block;
  width:48px; height:4px;
  background:var(--il-kirmizi);
  border-radius:2px;
  margin-top:18px;
}
.il-ozet{
  font-size:16px;
  line-height:1.7;
  color:var(--il-gri);
  margin:0 0 34px;
  max-width:560px;
}

/* --- galeri: üst üste binen deste (hakkımızda ile aynı mantık) --- */
.il-galeri{
  position:relative;
  height:420px;
  max-width:560px;
}
.il-gal-item{
  position:absolute;
  top:50%;
  left:calc(var(--i) * 30px);
  width:calc(100% - (var(--n) - 1) * 30px);
  height:86%;
  border-radius:18px;
  overflow:hidden;
  background:var(--il-acikgri);
  box-shadow:0 18px 44px rgba(17,18,20,.20);
  z-index:var(--i);
  transform:translateY(-50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 2.2deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.il-gal-item img{
  display:block;
  width:100%; height:100%;
  min-width:0; min-height:0;
  object-fit:cover;
}
.il-galeri:hover .il-gal-item{
  transform:translateY(-50%)
            rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4.5deg))
            translateX(calc((var(--i) - (var(--n) - 1) / 2) * 14px));
}
.il-gal-item:hover{
  z-index:99 !important;
  transform:translateY(-52%) rotate(0deg) scale(1.04) !important;
  box-shadow:0 26px 60px rgba(17,18,20,.30);
}

/* --- form --- */
.il-form .il-alan{ margin-bottom:0; }
.il-form label{
  display:block;
  font-weight:700;
  font-size:14.5px;
  color:var(--il-siyah);
  margin-bottom:8px;
}
.il-form input[type="text"],
.il-form input[type="email"],
.il-form input[type="tel"],
.il-form textarea{
  width:100%;
  background:var(--il-acikgri);
  border:1px solid transparent;
  border-radius:12px;
  padding:13px 16px;
  font-size:15.5px;
  color:var(--il-siyah);
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.il-form textarea{ resize:vertical; min-height:120px; }
.il-form input:focus,
.il-form textarea:focus{
  background:#fff;
  border-color:var(--il-kirmizi);
}
.il-form input::placeholder,
.il-form textarea::placeholder{ color:#a3a8b0; }

.il-form-alt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
  margin-top:28px;
}

/* onay kutusu */
.il-onay{
  display:flex; align-items:center; gap:11px;
  cursor:pointer; margin:0;
}
.il-onay input{ position:absolute; opacity:0; width:0; height:0; }
.il-onay-kutu{
  flex:0 0 22px;
  width:22px; height:22px;
  border:1.5px solid #c9ccd1;
  border-radius:6px;
  position:relative;
  transition:border-color .2s ease, background .2s ease;
}
.il-onay-kutu::after{
  content:"";
  position:absolute;
  left:6px; top:4px;
  width:5px; height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0);
  transition:transform .2s ease;
}
.il-onay input:checked + .il-onay-kutu{
  background:var(--il-kirmizi);
  border-color:var(--il-kirmizi);
}
.il-onay input:checked + .il-onay-kutu::after{ transform:rotate(45deg) scale(1); }
.il-onay input:focus-visible + .il-onay-kutu{
  outline:2px solid var(--il-kirmizi);
  outline-offset:3px;
}
.il-onay-yazi{ font-size:14px; color:var(--il-gri); }
.il-onay-yazi a{ color:var(--il-siyah); font-weight:700; text-decoration:none; }
.il-onay-yazi a:hover{ color:var(--il-kirmizi); }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1199px){
  .il-panel{ width:60%; }
  .il-harita{ width:90%; }
  .il-panel-ic{ padding-right:16%; padding-left:32px; }
  .il-hero-title{ font-size:42px; }
}

@media (max-width:991px){
  :root{ --il-header:84px; }
  .il-harita{
    width:100%;
    margin:0;
  }
  .il-harita{ height:300px; }
  .il-panel{
    position:static;
    width:100%;
    max-width:none;
    height:auto;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }
  .il-panel-ic{ padding:44px 28px; }
  .il-hero-title{ font-size:38px; margin-bottom:28px; }

  .il-form-bolum{ padding:60px 0; }
  .il-galeri{ height:340px; max-width:100%; margin-bottom:44px; }
  .il-baslik{ font-size:32px; }
}

@media (max-width:575px){
  .il-panel-ic{ padding:36px 22px; }
  .il-hero-title{ font-size:29px; }
  .il-breadcrumb{ font-size:13px; }
  .il-bilgiler{ gap:16px; }
  .il-galeri{ height:260px; }
  .il-gal-item{ left:calc(var(--i) * 18px); width:calc(100% - (var(--n) - 1) * 18px); }
  .il-baslik{ font-size:26px; }
  .il-form-alt{ flex-direction:column; align-items:flex-start; }
  .il-form-alt .il-buton{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion:reduce){
  .il-gal-item, .il-buton, .il-link i, .il-ikon{ transition:none; }
  .il-galeri:hover .il-gal-item{ transform:translateY(-50%); }
  .il-buton:hover{ transform:none; }
}