Xenforo Duyuru Alanı Gümcellendi V5.2 🚀

<div id="gizleme" class="genelDiv">
      <div class="bdiv">
        <button class="buton" onclick="gizleGoster();">X</button>
      </div>
      <div class="duyuruContainer">
        <div class="duyuruicon">
          <i class="fas fa-bullhorn"></i>
        </div>
        <div class="duyuruText">
          <h2 class="duyurubaslik">📢 Duyuru Başlığı 🚀 </h2>
          <div class="metin">
            <b>
              Bu Tasarım Ap Yazılım® Tarafından Kara Üzüm Habbesi Dinlerken Issız Gecelerde Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
              Tasarım İle İlgili Hataları Belirtirseniz Sevinirim <br>
              <button class="iletisimButton"><a href="https://apyazilim.com.tr/" target="_blank">İletişim için tıkla!</a></button>
            </b>
          </div>
        </div>
      </div>
    </div>
    <!--Aşağıdaki Kodlar Duyurunun Kapanmasını Sağlıyor. Doğru Çalışması İçin Değişiklik Yapmayın-->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
          var gizlemeDiv = document.getElementById('gizleme');
          var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
          if (gizlemeDurumu === 'gizli') {
            gizlemeDiv.style.display = 'none';
          } else {
            gizlemeDiv.style.display = 'block';
          }
        });
        function gizleGoster() {
          var gizlemeDiv = document.getElementById('gizleme');
          if (gizlemeDiv.style.display === 'none') {
            gizlemeDiv.style.display = 'block';
            sessionStorage.removeItem('gizlemeDurumu');
          } else {
            gizlemeDiv.style.display = 'none';
            sessionStorage.setItem('gizlemeDurumu', 'gizli');
          }
        }
      </script>

/* Duyuru Alanı */
:root {
        --arkaplan1: @xf-contentAccentBg;
        --arkaplan2: @xf-xentr_infoColor;
        --icon-reng: @xf-buttonCtaBg;
        --uyari-baslik-renk1:@xf-warningFeatureColor;
        --uyari-baslik-renk2:@xf-errorBg;
        --metin-rengi: @xf-textColor;
        --iletisim-metin-reng:@xf-pageBg;
        --iletisim-arka-plan-rengi1 :@xf-contentAccentBg;
        --iletisim-arka-plan-rengi2 :@xf-xentr_infoColor;
        --iletisim-butonu-kenar-renkleri: @xf-buttonCtaBg;
        --duyuru-baslik-degisim-saniye:3s;
        --kapatma-buton-reng:#ffffff;
        --duyuru-kapatma-butonu-arkaplan-renk: rgba(69, 69, 69, 0.199);


        --metin-boyut:18px;
         --mobil-metin-boyut:15px;
        --icon-boyut:80px;
        --mobil-icon-boyut:50px;
        --icon-opaklik: 0.8;
        --icon-aci-derecesi: rotate(-25deg);
        --iletisim-metin-boyut:15px;
    
        --iletisim-buton-genislik:20%;
        --iletisim-buton-yukseklik:32px;
        
        --mobil-iletisim-buton-genislik:60%;
        --mobil-iletisim-buton-yukseklik:38px;
      }
      
      .genelDiv {
        background: linear-gradient(90deg, var(--arkaplan1) 0%, var(--arkaplan2) 100%);
        padding: 5px;
        border-radius: 20px;
        margin-bottom: 15px;
        box-shadow: rgba(0, 0, 0, 0.302) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      }
      
      .duyuruContainer {
        display: flex;
        align-items: center;
      }
      
      .duyuruicon {
        font-size: var(--icon-boyut);
        color: var(--icon-reng);
        transform: var(--icon-aci-derecesi);
        margin-left: 20px;
        opacity: var(--icon-opaklik);
      }
      
      .duyuruText {
      font-weight: bold;
      margin: 0 auto;
    }


    .metin {
        color: var(--metin-rengi);
        padding: 3px;
        text-align: center;
        font-size: var(--metin-boyut);
      }
      
      .iletisimButton {
        border-radius: 10px;
        background: linear-gradient(90deg, var(--iletisim-arka-plan-rengi1) 0%, var(--iletisim-arka-plan-rengi2) 100%);
        border-color: var(--iletisim-butonu-kenar-renkleri);
        width: var(--iletisim-buton-genislik);
        height: var(--iletisim-buton-yukseklik);
        margin-top: 2%;
        text-decoration: none;
        box-shadow: rgba(50, 50, 93, 0.251) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.349) 0px -2px 6px 0px inset;
      }


      .iletisimButton a {
        color: var(--iletisim-metin-reng);
        text-decoration: none;
        font-weight: bold;
        font-size: var(--iletisim-metin-boyut);
      }
      
      
      .buton {
        color: var(--kapatma-buton-reng);
        border: none;
        background-color: var(--duyuru-kapatma-butonu-arkaplan-renk);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        float: right;
      }
      
      .bdiv {
        padding-right: 3px;
      }
      
      #gizleme {
        display: none;
      }
      @keyframes uyaribaslik {
  50% {
    color: var(--uyari-baslik-renk1);
  }
  50% {
    color: var(--uyari-baslik-renk2);
  }
}


.duyurubaslik {
  animation: uyaribaslik var(--duyuru-baslik-degisim-saniye) infinite;
  text-align: center;
}


@media (max-width: 650px){
    .duyuruicon {
    font-size: var(--mobil-icon-boyut);
    color: var(--icon-reng);
    transform: var(--icon-aci-derecesi);
    margin-left: 0px;
    opacity: var(--icon-opaklik);
 }
}


@media (max-width: 650px){
.metin {      
    font-size: var(--mobil-metin-boyut);
 }
}


@media (max-width: 650px){
.iletisimButton {
        width: var(--mobil-iletisim-buton-genislik);
        height: var(--mobil-iletisim-buton-yukseklik);
 }
}