/* =========================
   BACKGROUND (CANLI GRADIENT)
========================= */
body {
    background: linear-gradient(-45deg, #eef2ff, #f0f9ff, #fdf2f8, #eef2ff);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================
   FORM KARTI (FLOAT EFFECT)
========================= */
fieldset {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    border-radius: 26px;
    padding: 35px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 25px 70px rgba(0,0,0,0.10);
    animation: floatIn 0.8s ease;
    transition: all 0.4s ease;
}

    fieldset:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 35px 90px rgba(0,0,0,0.14);
    }
/* rating grup */
.rating {
    display: flex !important;
    gap: 12px;
    flex-wrap: wrap;
}

    /* her seçenek */
    .rating label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #fff;
        cursor: pointer;
        font-weight: 700;
        transition: all 0.25s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

        /* hover */
        .rating label:hover {
            transform: translateY(-4px) scale(1.05);
            border-color: #8b5cf6;
            box-shadow: 0 10px 20px rgba(139,92,246,0.2);
        }

    /* seçili */
    .rating input[type="radio"]:checked + label {
        background: linear-gradient(135deg, #8b5cf6, #ef4444);
        color: white;
        border-color: transparent;
        box-shadow: 0 12px 25px rgba(139,92,246,0.35);
    }
/* =========================
   TITLE
========================= */
legend {
    font-size: 1.6rem;
    font-weight: 900;
    color: #111827;
    padding: 0 18px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, #ef4444, #8b5cf6, #06b6d4) 1;
    letter-spacing: 0.5px;
}

/* =========================
   LABEL (SOFT FLOAT)
========================= */
label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin: 18px 0 10px;
    transition: all 0.3s ease;
}

    label:hover {
        color: #8b5cf6;
        transform: translateX(3px);
    }

/* =========================
   MODERN OPTIONS (RADIO/CHECKBOX)
========================= */

/* input gizle */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
    display: none;
}

/* seçenek kart */
.form-control label {
    display: block;
    padding: 14px 16px;
    margin: 10px 0;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.35s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

    /* hover glow */
    .form-control label:hover {
        transform: translateX(8px) scale(1.01);
        box-shadow: 0 12px 30px rgba(139, 92, 246, 0.18);
        border-color: #8b5cf6;
    }

    /* ripple effect */
    .form-control label::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(139,92,246,0.3);
        opacity: 0;
        border-radius: 50%;
        transform: scale(1);
        transition: 0.6s;
    }

    .form-control label:hover::after {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

/* checked state */
.form-control input[type="radio"]:checked + label,
.form-control input[type="checkbox"]:checked + label {
    background: linear-gradient(135deg, #8b5cf6, #ef4444);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.35);
    transform: scale(1.02);
}

/* =========================
   TEXTAREA (FOCUS GLOW)
========================= */
textarea.form-control {
    border-radius: 16px !important;
    border: 2px solid #e5e7eb !important;
    padding: 14px;
    transition: all 0.4s ease;
}

    textarea.form-control:focus {
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 6px rgba(139,92,246,0.12);
        outline: none;
    }

/* =========================
   INFO BOX (FLOAT CARD)
========================= */
div[style*="color: #0D5269"] {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(14,165,233,0.08)) !important;
    border-left: 5px solid #8b5cf6 !important;
    border-radius: 14px;
    padding: 14px;
    transition: all 0.4s ease;
}

    div[style*="color: #0D5269"]:hover {
        transform: translateX(8px);
    }

/* =========================
   BUTTON (ULTRA PREMIUM)
========================= */
.btn-success {
    background: linear-gradient(135deg, #ef4444, #8b5cf6, #06b6d4) !important;
    background-size: 200% 200%;
    animation: buttonGlow 6s ease infinite;
    border: none !important;
    padding: 15px 50px !important;
    border-radius: 999px !important;
    font-weight: 800;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
}

    /* shine */
    .btn-success::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -60%;
        width: 40%;
        height: 200%;
        background: rgba(255,255,255,0.25);
        transform: rotate(25deg);
        transition: 0.6s;
    }

    .btn-success:hover::after {
        left: 120%;
    }

    .btn-success:hover {
        transform: translateY(-6px) scale(1.06);
        box-shadow: 0 25px 60px rgba(139, 92, 246, 0.45);
    }

/* =========================
   LOADING ICON
========================= */
.LoadingIcon {
    width: 28px;
    margin-left: 10px;
    animation: spin 1s linear infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes buttonGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {
    fieldset {
        padding: 20px;
        border-radius: 18px;
    }

    .form-control label {
        font-size: 14px;
    }
}
.LoadingIcon{
    display:none;
}