/* ==========================================================================
   İLETİŞİM — tasarım ASVARIS sitesine native olarak gömülüdür (#dc-root).
   Bu dosya yalnızca duyarlı davranışı ve site ile çakışmaları giderir;
   renk ve tipografi tasarımın kendi stillerindedir (helmet bloğu).
   ========================================================================== */

.iletisim-dc { display: block; width: 100%; margin: 0; padding: 0; }
#dc-root { display: block; width: 100%; }
#dc-root img { max-width: 100%; }

/* Sabit başlık altında kalan çapaları düzelt (#form) */
#dc-root section[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------- 1200px ve altı ------ */
@media (max-width: 1200px) {
  #dc-root section { padding-left: 28px !important; padding-right: 28px !important; }
  #dc-root .il-2col { gap: 48px !important; }
  /* Fotoğraflar dar ekranda CTA metnini ezmesin */
  #dc-root .il-cta-media { height: 280px !important; }
  #dc-root .il-cta-card { padding: 52px 56px !important; }
}

/* --------------------------------------------------- 980px ve altı ------- */
@media (max-width: 980px) {
  /* Form ve başlık tek kolona insin; başlık formun üstünde dursun */
  #dc-root .il-2col { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  #dc-root .il-aside { order: -1; padding-top: 8px !important; }

  /* Portreler ve yüzen düğmeler kartın üstüne binmesin;
     düğmeler DOM'da karttan önce geldiği için sırayı flex ile düzeltiyoruz */
  #dc-root .il-cta-wrap { display: flex; flex-direction: column; }
  #dc-root .il-cta-media { display: none !important; }
  #dc-root .il-cta-card { order: 1; padding: 44px 34px !important; min-height: 0 !important; }
  #dc-root .il-cta-pills { order: 2; position: static !important; margin-top: 18px; justify-content: flex-start; }

  #dc-root section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* --------------------------------------------------- 760px ve altı ------- */
@media (max-width: 760px) {
  #dc-root section { padding-left: 20px !important; padding-right: 20px !important; }

  #dc-root h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  #dc-root h2 { font-size: clamp(23px, 6.2vw, 33px) !important; }

  /* Ad/Soyad ikilisi dar ekranda sıkışıyor */
  #dc-root .il-fields { grid-template-columns: minmax(0, 1fr) !important; }
  #dc-root .il-logos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --------------------------------------------------- hareket tercihi ----- */
@media (prefers-reduced-motion: reduce) {
  #dc-root *,
  #dc-root *::before,
  #dc-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Referans logo duvari — otomatik renklenme dalgasi
   Dalga sol ustten sag alta ilerler; yanan logolar sonmez, birikerek renklenir.
   Tamami yandiktan sonra 2 sn beklenir, hepsi birlikte soner, 2 sn sonra tekrarlar.
   Zamanlama js/iletisim-referans.js icindedir; buradaki degiskenleri o surer.
   Sablondaki satir ici filter/opacity'yi ezmek icin !important gerekiyor.
   ========================================================================== */
#dc-root .il-logos.ref-dalga-acik > div {
  filter: grayscale(var(--ref-gri, 1)) !important;
  opacity: var(--ref-op, .85) !important;
  transition: filter .55s ease, opacity .55s ease !important;
}

/* Uzerine gelince kutu her durumda tam renkli */
#dc-root .il-logos.ref-dalga-acik > div:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

/* Hareket azaltma tercihi: dalga calismaz, kutular sabit gri kalir */
@media (prefers-reduced-motion: reduce) {
  #dc-root .il-logos.ref-dalga-acik > div { transition: none !important; }
}