<svg viewBox="0 0 480 360" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="featureSyncTitle">
  <title id="featureSyncTitle">Offline rejim va avtomatik sinxronizatsiya</title>

  <circle cx="240" cy="180" r="150" fill="#eff6ff"/>

  <!-- device (laptop) -->
  <rect x="120" y="150" width="160" height="104" rx="10" fill="#ffffff" stroke="#e5e7eb" stroke-width="2"/>
  <rect x="136" y="166" width="128" height="10" rx="5" fill="#d1d5db"/>
  <rect x="136" y="184" width="90" height="10" rx="5" fill="#d1d5db"/>
  <rect x="136" y="202" width="110" height="10" rx="5" fill="#d1d5db"/>
  <rect x="100" y="254" width="200" height="14" rx="7" fill="#e5e7eb"/>

  <!-- cloud -->
  <g>
    <path d="M300 100c-4-18-20-30-39-30-15 0-28 8-35 20-3-1-6-2-10-2-16 0-29 13-29 29 0 2 0 4 1 6-11 3-19 13-19 25 0 15 12 27 27 27h96c16 0 29-13 29-29 0-13-9-24-21-27z" fill="#ffffff" stroke="#2563eb" stroke-width="2.5"/>
  </g>

  <!-- sync arrows -->
  <g stroke="#2563eb" stroke-width="3" stroke-linecap="round" fill="none">
    <path d="M212 118a28 28 0 0 1 48-14"/>
    <path d="M260 104l4-10 10 3"/>
    <path d="M268 142a28 28 0 0 1-48 14"/>
    <path d="M220 156l-4 10-10-3"/>
  </g>

  <!-- status badge: saved -->
  <g>
    <rect x="300" y="220" width="130" height="40" rx="20" fill="#f0fdf4" stroke="#16a34a" stroke-width="1.5"/>
    <circle cx="322" cy="240" r="7" fill="#16a34a"/>
    <path d="M318 240l3 3 6-6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="378" y="245" font-family="Inter, Arial, sans-serif" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="600">Saqlandi</text>
  </g>

  <circle cx="90" cy="120" r="4" fill="#bfdbfe"/>
  <circle cx="410" cy="140" r="4" fill="#bfdbfe"/>
  <circle cx="380" cy="90" r="4" fill="#bfdbfe"/>
</svg>
