/* WhatsApp Butonu */
.whatsapp-button {
    position: fixed;
    bottom: 90px; /* Instagram butonu için yukarıda yer aç */
    left: 20px;
    background-color: var(--whatsapp-green);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, opacity 0.3s ease;
    opacity: 0; /* Başlangıçta tamamen saydam */
    visibility: hidden; /* Başlangıçta gizli */
    transform: translateY(-100vh); /* Başlangıçta ekranın üstünde */
    animation: waterDropFallWhatsApp 1.6s ease forwards;
    animation-delay: 1.3s; /* Instagram'tan sonra */
    pointer-events: none; /* Animasyon sırasında tıklanamaz */
}

/* Hover durumunda daha opak yap */
.whatsapp-button:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1.1) !important;
}

/* Instagram Butonu */
.instagram-button {
    position: fixed;
    bottom: 20px; /* Sayfanın en altında, WhatsApp butonunun altında */
    left: 20px;
    background-color: var(--instagram-red);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, opacity 0.3s ease;
    opacity: 0; /* Başlangıçta tamamen saydam */
    visibility: hidden; /* Başlangıçta gizli */
    transform: translateY(-100vh); /* Başlangıçta ekranın üstünde */
    animation: waterDropFallInstagram 2s ease forwards;
    animation-delay: 0.7s; /* İlk düşen */
    pointer-events: none; /* Animasyon sırasında tıklanamaz */
}

.instagram-button:hover {
    opacity: 1 !important;
    transform: translateY(0) scale(1.1) !important;
}

/* Sahibinden Butonu */
.sahibinden-button {
    position: fixed;
    bottom: 90px; /* Scroll butonunun üstünde */
    right: 20px;
    background: transparent; /* Arka plan yok */
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    transition: transform 0.2s ease;
    opacity: 1; /* Direkt görünür */
    visibility: visible; /* Direkt görünür */
    pointer-events: auto; /* Hemen tıklanabilir */
}

.sahibinden-button:hover {
    transform: scale(1.1);
}

/* Sahibinden PNG Icon Styling */
.sahibinden-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.sahibinden-button:hover .sahibinden-icon {
    transform: scale(1.1);
}


/* Yukarı Butonu */
.scroll-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--scroll-button-bg);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.scroll-top-button.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top-button:hover {
    transform: scale(1.1);
    background-color: var(--scroll-button-hover);
}

/* Su damlası düşme animasyonu - Instagram */
@keyframes waterDropFallInstagram {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    5% {
        visibility: visible;
        opacity: 0.3;
        pointer-events: none;
    }
    20% {
        transform: translateY(-800px); /* Yukarıda takılma */
        opacity: 0.5;
        pointer-events: none;
    }
    50% {
        transform: translateY(-800px); /* Yukarıda takılma */
        opacity: 0.65;
        pointer-events: none;
    }
    70% {
        transform: translateY(-800px); /* Takılı kalma */
        opacity: 0.7;
        pointer-events: none;
    }
    100% {
        transform: translateY(0); /* Yere düşme */
        opacity: 0.7;
        visibility: visible;
        pointer-events: auto; /* Animasyon bittiğinde tıklanabilir */
    }
}

/* Su damlası düşme animasyonu - WhatsApp (titreşim ile) */
@keyframes waterDropFallWhatsApp {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    5% {
        visibility: visible;
        opacity: 0.3;
        pointer-events: none;
    }
    20% {
        transform: translateY(-800px); /* Instagram'ın takıldığı yerde */
        opacity: 0.45;
        pointer-events: none;
    }
    25% {
        transform: translateY(-820px); /* Yukarı titreşim */
        opacity: 0.45;
        pointer-events: none;
    }
    30% {
        transform: translateY(-780px); /* Aşağı titreşim */
        opacity: 0.45;
        pointer-events: none;
    }
    35% {
        transform: translateY(-810px); /* Yukarı titreşim */
        opacity: 0.45;
        pointer-events: none;
    }
    40% {
        transform: translateY(-790px); /* Aşağı titreşim */
        opacity: 0.5;
        pointer-events: none;
    }
    45% {
        transform: translateY(-805px); /* Yukarı titreşim */
        opacity: 0.5;
        pointer-events: none;
    }
    50% {
        transform: translateY(-795px); /* Aşağı titreşim */
        opacity: 0.55;
        pointer-events: none;
    }
    55% {
        transform: translateY(-800px); /* Ortaya dönme */
        opacity: 0.55;
        pointer-events: none;
    }
    70% {
        transform: translateY(-800px); /* Takılı kalma */
        opacity: 0.6;
        pointer-events: none;
    }
    80% {
        transform: translateY(-800px); /* Biraz daha takılı kalma */
        opacity: 0.6;
        pointer-events: none;
    }
    85% {
        transform: translateY(-400px); /* Hızlı düşme başlangıcı */
        opacity: 0.6;
        pointer-events: none;
    }
    90% {
        transform: translateY(-200px); /* Hızlı düşme devamı */
        opacity: 0.6;
        pointer-events: none;
    }
    95% {
        transform: translateY(-50px); /* Yere yaklaşma */
        opacity: 0.65;
        pointer-events: none;
    }
    100% {
        transform: translateY(0); /* Yere düşme */
        opacity: 0.7;
        visibility: visible;
        pointer-events: auto; /* Animasyon bittiğinde tıklanabilir */
    }
}



@media screen and (max-width: 300px) {
  .whatsapp-button {
    width: 30px;
    height: 30px;
  }
  .instagram-button {
    width: 30px;
    height: 30px;
  }
  .sahibinden-button {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
  .sahibinden-icon {
    width: 20px;
    height: 20px;
  }
  .scroll-top-button {
    width: 20px;
    height: 20px;
  }
}