<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" role="img"
     aria-label="Project timeline: analysis and planning 1-2 weeks, design and prototype 1-2 weeks, development and testing 2-6 weeks, launch and support 1 week, followed by ongoing maintenance">
  <defs>
    <linearGradient id="scAna" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#1a6ef5"/><stop offset="1" stop-color="#00b4d8"/>
    </linearGradient>
    <linearGradient id="scSicak" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ff8a3d"/><stop offset="1" stop-color="#ffc857"/>
    </linearGradient>
    <style>
      .ad  { font: 700 14.5px system-ui, "Segoe UI", Roboto, Arial, sans-serif; fill: #0f2057; }
      .sr  { font: 600 12px system-ui, "Segoe UI", Roboto, Arial, sans-serif; fill: #1557d6; }
      .ac  { font: 400 12px system-ui, "Segoe UI", Roboto, Arial, sans-serif; fill: #64748b; }
      .no  { font: 700 15px system-ui, "Segoe UI", Roboto, Arial, sans-serif; fill: #ffffff; }
      .son { font: 600 12px system-ui, "Segoe UI", Roboto, Arial, sans-serif; fill: #b45309; }
    </style>
  </defs>

  <rect x="0" y="0" width="900" height="300" rx="18" fill="#f7f9fd"/>

  <!-- Zaman ekseni -->
  <rect x="66" y="126" width="768" height="4" rx="2" fill="#e2e8f4"/>
  <rect x="66" y="126" width="620" height="4" rx="2" fill="url(#scAna)"/>
  <path d="M690 128 h140" stroke="#f0b25f" stroke-width="4" stroke-linecap="round" stroke-dasharray="2 10"/>

  <!-- 1 -->
  <g>
    <circle cx="96" cy="128" r="21" fill="url(#scAna)"/>
    <text class="no" x="96" y="133" text-anchor="middle">1</text>
    <text class="ad" x="66" y="184">Analysis and planning</text>
    <text class="sr" x="66" y="204">1-2 weeks</text>
    <text class="ac" x="66" y="226">Needs, competitors and</text>
    <text class="ac" x="66" y="242">audience are mapped</text>
    <rect x="66" y="72" width="96" height="34" rx="9" fill="#ffffff" stroke="#e2e8f4"/>
    <rect x="78" y="82" width="44" height="6" rx="3" fill="#c3cede"/>
    <rect x="78" y="93" width="66" height="6" rx="3" fill="#e2e8f4"/>
  </g>

  <!-- 2 -->
  <g>
    <circle cx="292" cy="128" r="21" fill="url(#scAna)"/>
    <text class="no" x="292" y="133" text-anchor="middle">2</text>
    <text class="ad" x="262" y="184">Design and prototype</text>
    <text class="sr" x="262" y="204">1-2 weeks</text>
    <text class="ac" x="262" y="226">No code is written before</text>
    <text class="ac" x="262" y="242">screens are approved</text>
    <rect x="262" y="72" width="96" height="34" rx="9" fill="#ffffff" stroke="#e2e8f4"/>
    <rect x="272" y="80" width="30" height="18" rx="5" fill="#dbe7fb"/>
    <rect x="308" y="80" width="40" height="7" rx="3.5" fill="#e2e8f4"/>
    <rect x="308" y="91" width="26" height="7" rx="3.5" fill="#e2e8f4"/>
  </g>

  <!-- 3 -->
  <g>
    <circle cx="488" cy="128" r="21" fill="url(#scAna)"/>
    <text class="no" x="488" y="133" text-anchor="middle">3</text>
    <text class="ad" x="458" y="184">Development and testing</text>
    <text class="sr" x="458" y="204">2-6 weeks</text>
    <text class="ac" x="458" y="226">You see interim builds</text>
    <text class="ac" x="458" y="242">in your own browser</text>
    <rect x="458" y="72" width="96" height="34" rx="9" fill="#ffffff" stroke="#e2e8f4"/>
    <path d="M474 82l-7 7 7 7M492 82l7 7-7 7" fill="none" stroke="#1a6ef5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
    <rect x="508" y="85" width="34" height="8" rx="4" fill="#e2e8f4"/>
  </g>

  <!-- 4 -->
  <g>
    <circle cx="684" cy="128" r="21" fill="url(#scAna)"/>
    <text class="no" x="684" y="133" text-anchor="middle">4</text>
    <text class="ad" x="654" y="184">Launch and support</text>
    <text class="sr" x="654" y="204">1 week</text>
    <text class="ac" x="654" y="226">Measurement is set up and</text>
    <text class="ac" x="654" y="242">search engines notified</text>
    <rect x="654" y="72" width="96" height="34" rx="9" fill="#ffffff" stroke="#e2e8f4"/>
    <path d="M668 96l8-14 8 14z" fill="#1a6ef5" opacity=".75"/>
    <rect x="694" y="85" width="44" height="8" rx="4" fill="#e2e8f4"/>
  </g>

  <!-- Süren bakım -->
  <g>
    <circle cx="836" cy="128" r="15" fill="url(#scSicak)"/>
    <path d="M830 128a6 6 0 1 1 6 6" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>
    <path d="M836 121v4h-4" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>
    <text class="son" x="806" y="184">Maintenance</text>
    <text class="ac" x="806" y="206">ongoing</text>
  </g>
</svg>
