{# ===== WHATSAPP İHBAR HATTI (Modernized) ===== #}
<div class="rounded-xl overflow-hidden" style="background: linear-gradient(135deg, #075e54 0%, #128c7e 50%, #25d366 100%); position: relative;">
    {# Decorative circles #}
    <div style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.08);"></div>
    <div style="position: absolute; bottom: -10px; left: -10px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.06);"></div>

    <div style="padding: 20px; position: relative; z-index: 1;">
        {# Header with icon #}
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;">
            <div style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <i class="fab fa-whatsapp" style="font-size: 26px; color: white;"></i>
            </div>
            <div>
                <h3 style="font-size: 15px; font-weight: 800; color: white; margin: 0; letter-spacing: 0.5px;">İHBAR HATTI</h3>
                <p style="font-size: 11px; color: rgba(255,255,255,0.75); margin: 2px 0 0 0;">Haberleri sen belirle!</p>
            </div>
        </div>

        {# Description #}
        <p style="font-size: 12px; color: rgba(255,255,255,0.85); line-height: 1.5; margin-bottom: 16px;">
            Çevrende haber değeri taşıyan bir olay mı var? Fotoğraf, video veya bilgi gönder, haberini yapalım!
        </p>

        {# WhatsApp Button #}
        <a href="https://wa.me/905538519022?text=Merhaba%2C%20ihbar%20hattiniza%20ulasmak%20istiyorum."
           target="_blank" rel="noopener noreferrer"
           style="display: flex; align-items: center; justify-content: center; gap: 10px; background: white; color: #075e54; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 50px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.2);"
           onmouseover="this.style.transform='scale(1.03)'; this.style.boxShadow='0 6px 20px rgba(0,0,0,0.3)'"
           onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.2)'">
            <i class="fab fa-whatsapp" style="font-size: 22px; color: #25d366;"></i>
            <span>0 (553) 851 90 22</span>
        </a>

        {# Bottom tags #}
        <div style="display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap;">
            <span style="font-size: 10px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 20px;">📸 Fotoğraf</span>
            <span style="font-size: 10px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 20px;">🎥 Video</span>
            <span style="font-size: 10px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); padding: 3px 8px; border-radius: 20px;">📝 Haber</span>
        </div>
    </div>
</div>
