/* CSS untuk tombol-tombol sosial */
.social-menu {
     position: fixed;
     bottom: 20px;
     left: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column-reverse;
     /* Menempatkan tombol utama di bawah */
     align-items: flex-start;
}

/* Checkbox untuk toggle */
.social-toggle {
     display: none;
}

/* Tombol utama */
.social-label {
     background-color: #333;
     color: #fff;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     cursor: pointer;
     transition: transform 0.3s ease;
}

/* Social button container */
.social-buttons {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 10px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     /* Dimulai dari bawah */
     transition: all 0.3s ease;
}

/* Social buttons ketika checkbox diceklis */
.social-toggle:checked~.social-buttons {
     opacity: 1;
     visibility: visible;
     transform: translateY(-10px);
     /* Naik ke atas */
}

.social-button {
     display: flex;
     align-items: center;
     gap: 10px;
     background-color: #25d366;
     /* Default WhatsApp color */
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 10px;
     text-align: left;
     cursor: pointer;
     width: 180px;
     transition: transform 0.3s ease;
}

.social-button.phone {
     background-color: #34b7f1;
     /* Warna Telepon */
}

.social-button img {
     width: 30px;
     height: 30px;
}

.social-button span {
     display: inline-block;
     flex-grow: 1;
}

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

/* Animasi rotasi untuk tombol utama */
.social-label:hover {
     transform: rotate(90deg);
}

.social-button.tokopedia {
     background-color: #42b549;
     /* Warna Tokopedia */
}

.social-button.shopee {
     background-color: #f36d38;
     /* Warna Shopee */
}