/* social_icons.css */

.social-icon-container {
    position: fixed;
    right: 25px; 
    bottom: 35px; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    gap: 15px;
    z-index: 10000;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    background: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    width: 55px; 
    height: 55px;
    /* Akıcı açılış için özel geçiş hızı */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border: none;
}

/* İKON GENEL STİLİ */
.social-icon i {
    font-size: 24px; 
    position: absolute;
    right: 0; 
    width: 55px; 
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border-radius: 50%;
    z-index: 5;
    transition: all 0.3s ease;
}

/* YAZI GENEL STİLİ */
.social-text {
    margin-right: 65px; 
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333; /* Kapalıyken koyu renk */
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.4s ease;
}

/* --- HOVER DURUMU (PROFESYONEL RENK GEÇİŞLERİ) --- */

.social-icon:hover {
    width: 240px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Yazıyı görünür yap ve beyaza çevir */
.social-icon:hover .social-text {
    opacity: 1;
    color: #ffffff;
    transform: translateX(0);
}

/* WHATSAPP */
.whatsapp i { background-color: #25D366; }
.whatsapp:hover { background-color: #25D366; }

/* INSTAGRAM */
.instagram i { 
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); 
}
.instagram:hover { 
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); 
}

/* FACEBOOK */
.facebook i { background-color: #1877F2; }
.facebook:hover { background-color: #1877F2; }

/* İkonun hoverda büyüme efekti */
.social-icon:hover i {
    transform: scale(1.1);
}

/* ==========================================================================
   TABLET VE MOBİL OPTİMİZASYONU
   ========================================================================== */

/* --- TABLET (1024px Altı) --- */
@media (max-width: 1024px) {
    .social-icon-container {
        right: 20px;
        bottom: 30px;
    }
}

/* --- TELEFON (768px Altı) --- */
@media (max-width: 768px) {
    /* Mobilde hover efektini tamamen kapatıyoruz çünkü dokunmatik ekranlarda sorun yaratır */
    .social-icon:hover {
        width: 55px; 
        background-color: #ffffff;
    }
    
    .social-icon:hover .social-text {
        opacity: 0;
        color: #333;
    }

    /* JS ile eklenecek 'active' sınıfı: Tıklandığında açılmayı bu sağlar */
    .social-icon.active {
        width: 220px !important; 
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .social-icon.active .social-text {
        opacity: 1 !important;
        color: #ffffff !important;
        transform: translateX(0);
    }

    /* İlgili ikonun rengini aktifken değiştirir */
    .social-icon.active.whatsapp { background-color: #25D366; }
    .social-icon.active.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .social-icon.active.facebook { background-color: #1877F2; }

    /* Metin boyutunu mobilde biraz küçültüyoruz */
    .social-text {
        font-size: 13px;
        margin-right: 60px;
    }
}

/* --- KÜÇÜK TELEFONLAR (480px Altı) --- */
@media (max-width: 480px) {
    .social-icon-container {
        right: 15px;
        bottom: 20px;
        gap: 10px;
    }
    .social-icon {
        width: 50px;
        height: 50px;
    }
    .social-icon i {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    .social-icon.active {
        width: 190px !important;
    }
}

/* ===================================================
   📱 1. MOBİL DİKEY (Portrait - 0px - 480px)
   (Standart akıllı telefonların dik duruşu)
   =================================================== */
@media screen and (max-width: 480px) {
    /* Buraya gelecek kodlar sadece küçük telefonlarda çalışır */
}

/* ===================================================
   📱 2. MOBİL YATAY (Landscape - 481px - 767px)
   (Telefon yan çevrildiğinde veya büyük 'Plus' modeller)
   =================================================== */
@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
    /* Ekran yüksekliği azaldığı için padding ve font küçültmeleri buraya */
}

/* ===================================================
   平板 3. TABLET DİKEY (Portrait - 768px - 1024px)
   (iPad ve benzeri tabletlerin dik duruşu)
   =================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Slaytların kart görünümüne geçtiği ana kırılma noktası */
}

/* ===================================================
   平板 4. TABLET YATAY / KÜÇÜK LAPTOP (1025px - 1280px)
   (iPad Pro Yatay veya 13" MacBook Air gibi ekranlar)
   =================================================== */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    /* Masaüstü tasarımın biraz daha daraltılmış hali */
}