/* ===================================
   Floating Social Buttons
   Instagram (ATAS), WhatsApp (TENGAH), FAQ (BAWAH)
   =================================== */

/* Instagram Float Button - PALING ATAS */
.instagram-float {
    position: fixed !important;
    right: 25px !important;
    bottom: 310px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #E1306C 0%, #C13584 50%, #833AB4 100%) !important;
    color: white !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 30px !important;
    box-shadow: 0 6px 20px rgba(225, 48, 108, 0.6) !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.instagram-float:hover {
    transform: scale(1.15) translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(225, 48, 108, 0.8) !important;
    background: linear-gradient(135deg, #833AB4 0%, #5B51D8 100%) !important;
    color: white !important;
}

/* WhatsApp Float Button - TENGAH */
.whatsapp-float {
    position: fixed !important;
    right: 25px !important;
    bottom: 215px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: white !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 32px !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6) !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: pulse 2s infinite !important;
}

.whatsapp-float:hover {
    transform: scale(1.15) translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.8) !important;
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    color: white !important;
}

/* Chat Float Button - PALING BAWAH (FAQ) */
.chat-float {
    position: fixed !important;
    right: 25px !important;
    bottom: 70px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #FFB84D 0%, #FF9500 100%) !important;
    color: #1a1a1a !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 30px !important;
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.6) !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chat-float:hover {
    transform: scale(1.15) translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(255, 165, 0, 0.8) !important;
    background: linear-gradient(135deg, #FF9500 0%, #FF8000 100%) !important;
    color: #1a1a1a !important;
}

/* Badge Animasi Tanda Tanya untuk FAQ */
.chat-float::before {
    content: '?' !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 24px !important;
    height: 24px !important;
    background: #f44336 !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.6) !important;
    animation: badge-bounce 2s infinite !important;
    z-index: 10000 !important;
}

@keyframes badge-bounce {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.15) translateY(-3px);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.8);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet dan iPad (Landscape & Portrait) */
@media (max-width: 991px) {
    .instagram-float,
    .whatsapp-float,
    .chat-float {
        width: 56px !important;
        height: 56px !important;
        font-size: 28px !important;
        right: 20px !important;
    }

    .instagram-float {
        bottom: 285px !important;
    }

    .whatsapp-float {
        bottom: 200px !important;
    }

    .chat-float {
        bottom: 65px !important;
    }

    .chat-float::before {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
        top: -6px !important;
        right: -6px !important;
    }
}

/* Mobile Portrait */
@media (max-width: 576px) {
    .instagram-float,
    .whatsapp-float,
    .chat-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        right: 15px !important;
    }

    /* Jarak SAMA RATA 100px antar button */
    .whatsapp-float {
        bottom: 240px ; /* Paling atas */
    }

    .instagram-float {
        bottom: 160px !important; /* Tengah: 260 - 100 = 160 */
    }

    .chat-float {
        bottom: 60px !important; /* Bawah: 160 - 100 = 60 */
    }

    .chat-float::before {
        width: 20px !important;
        height: 20px !important;
        font-size: 13px !important;
        top: -5px !important;
        right: -5px !important;
    }
}

/* Small Mobile (iPhone SE, Galaxy S8, dll) */
@media (max-width: 360px) {
    /* SEMBUNYIKAN Instagram & WhatsApp jika bertumpuk/layar terlalu kecil */
    .instagram-float,
    .whatsapp-float {
        display: none !important; /* HANYA TAMPILKAN FAQ */
    }

    /* FAQ tetap terlihat dengan ukuran lebih besar */
    .chat-float {
        width: 54px !important;
        height: 54px !important;
        font-size: 26px !important;
        right: 15px !important;
        bottom: 70px !important; /* Posisi lebih tinggi karena sendirian */
    }

    .chat-float::before {
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
        top: -5px !important;
        right: -5px !important;
    }
}

/* Landscape Mode untuk Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    /* SEMBUNYIKAN Instagram & WhatsApp di landscape mode (layar pendek) */
    .instagram-float,
    .whatsapp-float {
        display: none !important; /* HANYA TAMPILKAN FAQ */
    }

    /* FAQ tetap terlihat */
    .chat-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        right: 12px !important;
        bottom: 60px !important; /* Posisi lebih tinggi */
    }

    .chat-float::before {
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
        top: -4px !important;
        right: -4px !important;
    }
}