/* ==========================================================================
   PIXION — Süreç Zekâsı sayfası
   Tasarım ASVARIS sitesine native olarak gömülüdür (#dc-root).
   Bu dosya yalnızca duyarlı (responsive) davranışı ve site ile
   çakışmaları giderir; renk/tipografi tasarımın kendi stillerindedir.
   ========================================================================== */

/* Tasarım bloğu site gövdesinin tam genişliğini kullanır */
.pixion-sz { display: block; width: 100%; margin: 0; padding: 0; }
#dc-root { display: block; width: 100%; }
#dc-root img { max-width: 100%; }

/* Site başlığı sabitse bölüm çapaları başlığın altında dursun */
#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; }
}

/* --------------------------------------------------- 980px ve altı ------- */
@media (max-width: 980px) {
  /* İki/çok kolonlu tasarım gridleri alt alta iner */
  #dc-root .pxz-2col { grid-template-columns: minmax(0, 1fr) !important; }
  #dc-root .pxz-4col { grid-template-columns: minmax(0, 1fr) !important; }

  /* Girdiler → Süreç Zekâsı → Çıktılar akışı dikey sıralanır */
  #dc-root .pxz-flow { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  /* Aradaki bağlantı okları dikeyde anlamsız kalır */
  #dc-root .pxz-flow > div:nth-child(2),
  #dc-root .pxz-flow > div:nth-child(4) { display: none !important; }

  /* Geniş diyagramlar sayfayı taşırmasın, kendi içinde kaysın */
  #dc-root .pxz-wrap { overflow-x: auto; overflow-y: visible; }
  #dc-root .pxz-wide { min-width: max-content; }

  #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; }

  /* Başlık ölçekleri mobilde küçülür */
  #dc-root h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  #dc-root h2 { font-size: clamp(24px, 6.4vw, 34px) !important; }
  #dc-root h3 { font-size: clamp(18px, 5vw, 24px) !important; }

  /* Hero: dairesel döngü görseli listeye dönüşür */
  #dc-root .pxz-hero-ring { padding: 0 !important; }
  #dc-root .pxz-hero-art {
    aspect-ratio: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #dc-root .pxz-hero-art > span,
  #dc-root .pxz-hero-art > svg { display: none !important; }
  #dc-root .pxz-hero-art > div:last-child { width: 168px !important; order: -1; }
  #dc-root .pxz-cyc {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    text-align: left !important;
    top: auto !important; left: auto !important;
    padding-left: 18px;
    position: relative !important;
  }
  #dc-root .pxz-cyc::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; border-radius: 50%; background: #0AA7AD;
  }
  #dc-root .pxz-cyc span {
    color: #55676B !important;
    text-shadow: none !important;
  }
}

/* --- Simülasyon çerçevesi -------------------------------------------------
   Simülasyon sayfası kendi içinde duyarlıdır; dar ekranda çerçeve yüksekliği
   ekrana oranlanır, tam ekran bağlantısı zaten bölüm başlığında yer alır.   */
@media (max-width: 760px) {
  #dc-root #simulasyon iframe { height: 78vh !important; min-height: 480px; }
}

/* --- Fotoğraflı koyu bantlar (#anlat, #ajan) -------------------------------
   Masaüstünde fotoğraf sağ yarıda maskeyle durur; dar ekranda metnin altına
   geldiği için okunurluk adına arka plan dokusuna indirilir.                */
@media (max-width: 980px) {
  #dc-root #anlat > img,
  #dc-root #ajan  > img {
    width: 100% !important;
    opacity: .16 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  #dc-root #anlat > div,
  #dc-root #ajan  > div { padding: 56px 28px !important; }
}
@media (max-width: 760px) {
  #dc-root #anlat > div,
  #dc-root #ajan  > div { padding: 48px 20px !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;
  }
}