<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #f8f8f8; border-radius: 8px;">
    <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3009.691803197292!2d28.802111300000004!3d41.031998200000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa51cb42cfb01%3A0xb77bdf337527d720!2sEka%20Sunucu%20Bili%C5%9Fim%20Sistemleri!5e0!3m2!1str!2str!4v1738758617553!5m2!1str!2str"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

📌 Bu Ne Sağlıyor ve Extra Ne Yapıldı?


✅ Tamamen responsive: Mobil, tablet, masaüstü her cihazda sorunsuz görünür.
✅ Genişlik otomatik ayarlanıyor: Küçük ekranlarda harita taşma yapmaz.
✅ Daha şık ve modern görünüm: Arka plan rengi ve border-radius ile daha kurumsal bir görünüm kazandırıldı.
Bu kodu WordPress’te veya HTML sayfanın içine doğrudan ekleyebilirsiniz.
  • %100 genişlikte olacak: Ekran boyutuna göre otomatik ölçeklenecek.
  • Oran korunacak: Mobilde düzgün görünmesi için 16:9 oranı ayarlandı.
  • Tüm tarayıcılarda sorunsuz çalışacak.