@charset "utf-8";
/* CSS Document */

/* Ana konteyner */
.social-share-buttons {
    display: flex;
    gap: 10px; /* Butonlar arası boşluk */
    justify-content: center; /* Butonları ortala (isteğe bağlı) */
    margin-top: 20px;
}

/* Tüm butonların ortak stili */
.share-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Buton genişliği */
    height: 40px; /* Buton yüksekliği */
    border-radius: 50%; /* Yuvarlak şekil */
    color: white; /* İkon rengi */
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Yumuşak geçiş efekti */
}

/* Buton üzerine gelindiğinde (Hover) efekti */
.share-btn:hover {
    transform: translateY(-3px); /* Hafifçe yukarı kaydır */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge ekle */
}

/* Her bir sosyal medya platformu için özel arka plan rengi */
.share-btn.facebook {
    background-color: #3b5998; /* Facebook Mavisi */
}

.share-btn.twitter {
    background-color: #000000; /* X (Twitter) Siyahı */
}


/* Genel Buton Stili */
.share-button {
    /* Butonu daire yapmak için eşit yükseklik ve genişlik */
    width: 40px;
    height: 40px;
    
    /* Daire şekli için */
    border-radius: 50%;
    
    /* İkonu ortalamak için Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Bağlantı alt çizgilerini kaldırma */
    text-decoration: none;
    
    /* Yumuşak geçişler için */
    transition: background-color 0.3s ease, transform 0.2s ease;
    
    /* Opsiyonel: Gölge ekleme */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* LinkedIn'e Özgü Stil */
.linkedin-button {
    /* LinkedIn'in resmi rengi */
    background-color: #0077B5; 
    color: white; /* İkon rengi */
    font-size: 24px; /* İkon boyutu */
}

/* Mouse Üzerine Gelme Efekti */
.linkedin-button:hover {
    background-color: #005f92; /* Daha koyu ton */
     transform: translateY(-3px); /* Hafif yukarı kaydır */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gölge efekti ekle */
}

/* İkonun Kendisinin Stili (Opsiyonel ama iyi bir pratik) */
.linkedin-button i {
    line-height: 1; /* İkonun tam olarak ortalanmasına yardımcı olur */
}

.share-btn.pinterest {
    background-color: #bd081c; /* Pinterest Kırmızısı */
}

/* Butonların Konumlandırılması ve Kapsayıcı Stil */
.share-buttons-container {
    display: flex; /* Butonları yan yana sırala */
    gap: 10px; /* Butonlar arasına boşluk koy */
    padding: 20px;
    /* İsteğe bağlı: Buton grubunu sayfanın bir köşesine sabitlemek için */
    /* position: fixed;
    bottom: 20px;
    right: 20px; */
}

/* Tüm Paylaş Butonları için Temel Stil */
.share-button {
    width: 40px; /* Genişlik */
    height: 40px; /* Yükseklik (yuvarlak yapmak için eşit olmalı) */
    display: flex;
    justify-content: center; /* İçeriği yatayda ortala */
    align-items: center; /* İçeriği dikeyde ortala */
    border-radius: 50%; /* Butonu yuvarlak yap */
    color: white; /* İkon rengi */
    font-size: 18px; /* İkon boyutu */
    text-decoration: none; /* Alt çizgiyi kaldır */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Yumuşak geçiş efekti */
}

/* Hover Efekti */
.share-button:hover {
    transform: translateY(-3px); /* Hafif yukarı kaydır */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gölge efekti ekle */
}
/* WhatsApp Paylaşım Butonu için Temel Stil */
.whatsapp-round-button {
    /* Butonu yuvarlak yapmak için en kritik kural */
    border-radius: 50%;
    
    /* Butonun boyutunu belirleyin (genişlik ve yükseklik eşit olmalı) */
    width: 40px;
    height: 40px; 
    
    /* Renklendirme */
    background-color: #25D366; /* WhatsApp yeşili */
    color: white; 
    
    /* Buton içindeki içeriği (simge/metin) ortalama */
    display: flex;
    align-items: center;      /* Dikeyde ortalama */
    justify-content: center;  /* Yatayda ortalama */
    
    /* Diğer stil ayarları */
    text-decoration: none; /* Alt çizgiyi kaldır */
    font-size: 24px;       /* Simge/metin boyutu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge ekle */
    transition: background-color 0.3s; /* Hover efekti için geçiş */
}

/* Hover Efekti (isteğe bağlı) */
.whatsapp-round-button:hover {
    background-color: #1DA851; /* Daha koyu yeşil */
     box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Gölgeyi belirginleştir */
  transform: translateY(-2px); /* Hafifçe yukarı kaydır */
}

/* Simgenin kendisi için stil (eğer Font Awesome gibi bir kütüphane kullanıyorsanız) */
.whatsapp-round-button i {
    line-height: 1;
}
.telegram-button {
  /* Boyutlandırma */
  width: 40px; /* Butonun genişliği */
  height: 40px; /* Butonun yüksekliği */
  
  /* Yuvarlak Şekil */
  border-radius: 50%; /* Butonu tamamen yuvarlak yapar */
  
  /* Renkler */
  background-color: #0088cc; /* Telegram'ın ana rengi */
  color: white; /* İkon rengi */
  
  /* İçeriği (İkonu) Ortala */
  display: flex;
  justify-content: center; /* Yatayda ortala */
  align-items: center; /* Dikeyde ortala */
  
  /* Diğer Stiller */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-size: 24px; /* İkon boyutu */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
  transition: all 0.3s ease; /* Hover efekti için geçiş */
}

/* Hover Efekti */
.telegram-button:hover {
  background-color: #0077b3; /* Hafif koyu bir renk */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Gölgeyi belirginleştir */
  transform: translateY(-2px); /* Hafifçe yukarı kaydır */
}

/* Tıklanma Efekti (Opsiyonel) */
.telegram-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* İkonun Kendisine Özel Bir Stil Gerekirse */
.telegram-button i {
  /* Gerekirse buraya özel stil eklenebilir */
}