/* ===== ANIMATION ===== */
@keyframes contact-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== INPUT & TEXTAREA ===== */
#contactForm input.form-control,
#contactForm textarea.form-control {
    font-size: 14px !important;
    padding: 10px 15px !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    color: #1a1d1f !important;
    background-color: #f0f2f5 !important;
    border: 1px solid #d0d5dd !important;
}

    #contactForm input.form-control:focus,
    #contactForm textarea.form-control:focus {
        border-color: #0563bb !important;
        background-color: #f8f9fb !important;
        outline: none !important;
        box-shadow: none !important;
    }

#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: #8a92a0 !important;
    opacity: 1 !important;
}

/* ===== BUTTON ===== */
#sendBtn {
    background: linear-gradient(135deg, #1a8fe3 0%, #0563bb 50%, #044d9a 100%) !important;
    border: none !important;
    padding: 14px 40px !important;
    color: #fff !important;
    border-radius: 50px !important;
    width: 100% !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(5, 99, 187, 0.4) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

    #sendBtn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
        transition: left 0.5s ease;
    }

    #sendBtn:hover {
        background: linear-gradient(135deg, #4faee8 0%, #1a8fe3 50%, #0563bb 100%) !important;
        box-shadow: 0 6px 28px rgba(5, 99, 187, 0.65), 0 0 40px rgba(5, 99, 187, 0.28) !important;
        transform: translateY(-2px) !important;
    }

        #sendBtn:hover::after {
            left: 100%;
        }

    #sendBtn:disabled {
        opacity: 0.7 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

/* ===== DARK MODE ===== */
body.dark-mode #contactForm input.form-control,
body.dark-mode #contactForm textarea.form-control {
    background-color: #1e2433 !important;
    border-color: #2e3a50 !important;
    color: #e0e6f0 !important;
}

    body.dark-mode #contactForm input.form-control:focus,
    body.dark-mode #contactForm textarea.form-control:focus {
        border-color: #0563bb !important;
        background-color: #232b3e !important;
    }

body.dark-mode #contactForm input::placeholder,
body.dark-mode #contactForm textarea::placeholder {
    color: #5a6a80 !important;
}

/* ===== LOADING ===== */
/* ID selector — HTML'deki id="contactLoading" ile birebir eşleşir */
#contactLoading {
    display: none !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    #contactLoading.active {
        display: flex !important;
    }

#contactSpinner {
    width: 20px;
    height: 20px;
    border: 3px solid #0563bb;
    border-top-color: transparent;
    border-radius: 50%;
    animation: contact-spin 1s linear infinite;
}

/* ===== ALERTS ===== */
#contactError {
    display: none;
    background: #df1529;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#contactSuccess {
    display: none;
    background: #059652;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}