<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 640" role="img"
     aria-label="Web sitesi, özel yazılım paneli, yapay zekâ chatbot ve ölçüm katmanlarının birbirine bağlandığı soyut sistem çizimi">
  <defs>
    <linearGradient id="hsAna" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4d8dff"/><stop offset="1" stop-color="#22d3ee"/>
    </linearGradient>
    <linearGradient id="hsSicak" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ff8a3d"/><stop offset="1" stop-color="#ffc857"/>
    </linearGradient>
    <linearGradient id="hsCam" x1="0" y1="0" x2="0.6" y2="1">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0.035"/>
    </linearGradient>
    <linearGradient id="hsAlan" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4d8dff" stop-opacity="0.42"/>
      <stop offset="1" stop-color="#4d8dff" stop-opacity="0"/>
    </linearGradient>
    <radialGradient id="hsIsik1" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#4d8dff" stop-opacity="0.42"/><stop offset="1" stop-color="#4d8dff" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="hsIsik2" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#22d3ee" stop-opacity="0.34"/><stop offset="1" stop-color="#22d3ee" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="hsIsik3" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stop-color="#ff8a3d" stop-opacity="0.20"/><stop offset="1" stop-color="#ff8a3d" stop-opacity="0"/>
    </radialGradient>
    <style>
      .hs-baslik { font: 700 17px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#ffffff }
      .hs-alt    { font: 400 12.5px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#9db4dd }
      .hs-govde  { font: 400 12px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#8ba1c9 }
      .hs-dugme  { font: 700 12px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#06122c }
      .hs-dugme2 { font: 600 12px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#cfe0ff }
      .hs-url    { font: 400 11.5px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#8fa5cc }
      .hs-kart   { font: 700 13px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#ffffff }
      .hs-kucuk  { font: 400 11px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#8ba1c9 }
      .hs-rozet  { font: 700 10px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#06122c }
      .hs-mesaj  { font: 400 11px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#dbe6fb }
      .hs-mesaj2 { font: 600 11px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#06122c }
    </style>
  </defs>

  <!-- Arka ışık lekeleri -->
  <ellipse cx="250" cy="210" rx="270" ry="220" fill="url(#hsIsik1)"/>
  <ellipse cx="580" cy="430" rx="230" ry="200" fill="url(#hsIsik2)"/>
  <ellipse cx="620" cy="140" rx="160" ry="140" fill="url(#hsIsik3)"/>

  <!-- Bağlantı çizgileri (katmanlar arası akış) -->
  <g fill="none" stroke="#7fb0ff" stroke-opacity="0.42" stroke-width="1.4" stroke-dasharray="4 6">
    <path d="M556 214 C 620 214, 636 252, 636 286"/>
    <path d="M300 442 C 300 500, 344 520, 402 520"/>
    <path d="M604 372 C 604 424, 560 452, 502 452"/>
  </g>

  <!-- ============ ANA PANEL (web sitesi) ============ -->
  <g>
    <rect x="46" y="92" width="512" height="352" rx="20" fill="url(#hsCam)" stroke="#ffffff" stroke-opacity="0.16"/>
    <!-- üst çubuk -->
    <path d="M46 112a20 20 0 0 1 20-20h472a20 20 0 0 1 20 20v26H46z" fill="#ffffff" fill-opacity="0.06"/>
    <g fill="#ffffff" fill-opacity="0.3">
      <circle cx="72" cy="115" r="4.5"/><circle cx="90" cy="115" r="4.5"/><circle cx="108" cy="115" r="4.5"/>
    </g>
    <rect x="130" y="105" width="210" height="20" rx="10" fill="#ffffff" fill-opacity="0.09"/>
    <text class="hs-url" x="142" y="119">kurumsal-siteniz.com</text>
    <rect x="452" y="105" width="74" height="20" rx="10" fill="url(#hsAna)" fill-opacity="0.75"/>
    <text class="hs-rozet" x="489" y="119" text-anchor="middle">Teklif Al</text>

    <!-- sol içerik -->
    <text class="hs-baslik" x="74" y="184">Kurumsal Web Sitesi</text>
    <text class="hs-alt"    x="74" y="206">E-ticaret · özel yazılım · SEO</text>
    <text class="hs-govde"  x="74" y="238">Ziyaretçi ne yaptığınızı</text>
    <text class="hs-govde"  x="74" y="256">ilk ekranda görür.</text>
    <text class="hs-govde"  x="74" y="274">Formlar çalışır, talep panele düşer.</text>
    <rect x="74" y="292" width="104" height="32" rx="9" fill="url(#hsAna)"/>
    <text class="hs-dugme"  x="126" y="313" text-anchor="middle">Teklif Al</text>
    <rect x="188" y="292" width="112" height="32" rx="9" fill="none" stroke="#ffffff" stroke-opacity="0.28"/>
    <text class="hs-dugme2" x="244" y="313" text-anchor="middle">Fiyat hesapla</text>

    <!-- sağ: grafik kutusu -->
    <rect x="306" y="164" width="216" height="160" rx="14" fill="#0b1730" fill-opacity="0.5" stroke="#ffffff" stroke-opacity="0.10"/>
    <path d="M322 292 L 362 262 L 398 274 L 438 226 L 474 240 L 506 200 L 506 308 L 322 308 Z" fill="url(#hsAlan)"/>
    <path d="M322 292 L 362 262 L 398 274 L 438 226 L 474 240 L 506 200" fill="none" stroke="url(#hsAna)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="506" cy="200" r="5" fill="#22d3ee"/>
    <circle cx="506" cy="200" r="10" fill="#22d3ee" fill-opacity="0.22"/>
    <text class="hs-kart"  x="322" y="190">Organik trafik</text>
    <text class="hs-kucuk" x="322" y="208">son 6 ay</text>

    <!-- alt: satırlar -->
    <g>
      <rect x="74" y="352" width="448" height="30" rx="9" fill="#ffffff" fill-opacity="0.05"/>
      <text class="hs-mesaj" x="88" y="371">Randevu talebi</text>
      <text class="hs-kucuk" x="206" y="371">web formundan geldi</text>
      <rect x="452" y="359" width="58" height="16" rx="8" fill="#22d3ee" fill-opacity="0.85"/>
      <text class="hs-rozet" x="481" y="371" text-anchor="middle">yeni</text>
      <rect x="74" y="390" width="448" height="30" rx="9" fill="#ffffff" fill-opacity="0.05"/>
      <text class="hs-mesaj" x="88" y="409">Sipariş #2043</text>
      <text class="hs-kucuk" x="206" y="409">bayi panelinden girildi</text>
      <rect x="436" y="397" width="74" height="16" rx="8" fill="#ff8a3d" fill-opacity="0.9"/>
      <text class="hs-rozet" x="473" y="409" text-anchor="middle">hazırlanıyor</text>
    </g>
  </g>

  <!-- ============ CHATBOT KARTI ============ -->
  <g>
    <rect x="556" y="248" width="176" height="140" rx="18" fill="#0d1a38" fill-opacity="0.92" stroke="#ffffff" stroke-opacity="0.16"/>
    <circle cx="584" cy="278" r="13" fill="url(#hsAna)"/>
    <path d="M578 274.5h12M578 279h12M578 283.5h8" stroke="#0d1a38" stroke-width="1.8" stroke-linecap="round"/>
    <text class="hs-kart"  x="606" y="276">Yapay Zekâ</text>
    <text class="hs-kucuk" x="606" y="292">7/24 yanıt verir</text>
    <!-- mesaj balonları -->
    <path d="M574 308h86a10 10 0 0 1 10 10v14a10 10 0 0 1-10 10h-70l-12 10v-10h-4a10 10 0 0 1-10-10v-14a10 10 0 0 1 10-10z" fill="#ffffff" fill-opacity="0.08"/>
    <text class="hs-mesaj" x="584" y="322">Fiyat alabilir</text>
    <text class="hs-mesaj" x="584" y="336">miyim?</text>
    <path d="M586 350h114a10 10 0 0 1 10 10v14a10 10 0 0 1-10 10h-114a10 10 0 0 1-10-10v-14a10 10 0 0 1 10-10z" fill="url(#hsAna)" fill-opacity="0.85"/>
    <text class="hs-mesaj2" x="596" y="371">Hesaplayıcıya bakalım</text>
  </g>

  <!-- ============ HIZ GÖSTERGESİ ============ -->
  <g>
    <rect x="402" y="470" width="212" height="112" rx="18" fill="#0d1a38" fill-opacity="0.92" stroke="#ffffff" stroke-opacity="0.16"/>
    <g transform="translate(452 526)">
      <circle r="34" fill="none" stroke="#ffffff" stroke-opacity="0.12" stroke-width="8"/>
      <circle r="34" fill="none" stroke="url(#hsAna)" stroke-width="8" stroke-linecap="round"
              stroke-dasharray="203 214" transform="rotate(-90)"/>
      <text x="0" y="7" text-anchor="middle"
            font-family="system-ui, 'Segoe UI', Roboto, Arial, sans-serif" font-size="22" font-weight="700" fill="#ffffff">95</text>
    </g>
    <text class="hs-kart"  x="500" y="512">Mobil hız</text>
    <text class="hs-kucuk" x="500" y="530">PageSpeed ölçümü</text>
    <g>
      <rect x="502" y="540" width="14" height="14" rx="4" fill="#22d3ee" fill-opacity="0.7"/>
      <rect x="522" y="540" width="14" height="14" rx="4" fill="#22d3ee" fill-opacity="0.45"/>
      <rect x="542" y="540" width="14" height="14" rx="4" fill="#ffffff" fill-opacity="0.14"/>
    </g>
  </g>

  <!-- ============ KOD / OTOMASYON ROZETİ ============ -->
  <g>
    <rect x="150" y="470" width="216" height="96" rx="18" fill="#0d1a38" fill-opacity="0.9" stroke="#ffffff" stroke-opacity="0.14"/>
    <path d="M180 506l-12 12 12 12M206 506l12 12-12 12M198 500l-10 36"
          fill="none" stroke="url(#hsAna)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    <text class="hs-kart"  x="236" y="504">Özel yazılım</text>
    <text class="hs-kucuk" x="236" y="522">bayi paneli</text>
    <text class="hs-kucuk" x="236" y="538">API entegrasyonu</text>
    <circle cx="338" cy="484" r="6" fill="url(#hsSicak)"/>
  </g>

  <!-- Serbest noktalar -->
  <g fill="#ffffff" fill-opacity="0.5">
    <circle cx="52" cy="474" r="3"/><circle cx="700" cy="196" r="2.5"/><circle cx="722" cy="452" r="3"/>
  </g>
</svg>
