@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

:root {
    --accent: #EA600B;
    --accent-soft: rgba(234,96,11,.15);
    --text: #333;
    --muted: #888;
    --field: #f8f9fb;
    --border: #e3e6eb;
}

/* =====================
   PAGE
===================== */
body {
    font-family: 'Nunito', sans-serif;
    color: var(--text);
    background: radial-gradient(900px 500px at 5% -10%, rgba(255,154,60,.22), transparent 55%), radial-gradient(800px 450px at 95% 15%, rgba(234,96,11,.18), transparent 60%), radial-gradient(700px 500px at 50% 100%, rgba(255,210,163,.25), transparent 65%), linear-gradient(180deg, #ffffff 0%, #fff9f4 100%);
    background-attachment: fixed;
}

/* =====================
   TABLE RESET
===================== */
.AlseinTable,
.AlseinTable tr,
.AlseinTable td {
    display: block;
    width: 100%;
}

    /* =====================
   ROW (FLEX – TEK SİSTEM)
===================== */
    .AlseinTable tr {
        display: flex;
        align-items: center;
        gap: 28px;
        padding: 20px 0;
        border-bottom: 1px solid var(--border);
    }

    /* yıldız kolonunu gizle */
    .AlseinTable td:nth-child(3n+1) {
        display: none;
    }

    /* =====================
   LABEL
===================== */
    .AlseinTable td:nth-child(3n+2) {
        width: 240px;
        font-size: 15px;
        font-weight: 600;
        color: #555;
        flex-shrink: 0;
    }

    /* =====================
   INPUT AREA
===================== */
    .AlseinTable td:nth-child(3n) {
        flex: 1;
        max-width: 1100px; /* 👈 GÖZLE GÖRÜLEN GENİŞLİK */
    }


    /* =====================
   INPUT STYLE
===================== */
    .form-control,
    .AlseinTable input,
    .AlseinTable select,
    .AlseinTable textarea {
        width: 100% !important;
        height: 54px;
        padding: 14px 120px; /* ❗ 120px HATASI YOK */
        font-size: 16px;
        border-radius: 16px;
        border: 2px dashed #EC7806;
        background: var(--field);
        color: var(--text);
        transition: all .25s ease;
    }

/* textarea */
textarea.form-control {
    height: 120px;
}

/* hover */
.form-control:hover {
    background: #fff;
}

/* focus */
.form-control:focus,
.AlseinTable input:focus,
.AlseinTable select:focus,
.AlseinTable textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* focus olunca label */
.AlseinTable tr:focus-within td:nth-child(3n+2) {
    color: var(--accent);
}

/* =====================
   PLACEHOLDER (INPUT / TEXTAREA)
===================== */
.form-control::placeholder,
.AlseinTable input::placeholder,
.AlseinTable textarea::placeholder {
    font-size: 13px;
    color: #9aa0a6;
}

.form-control:focus::placeholder,
.AlseinTable input:focus::placeholder,
.AlseinTable textarea:focus::placeholder {
    color: #c0c4c8;
}

/* =====================
   SELECT – "SEÇİNİZ" FIX
===================== */
.AlseinTable select {
    font-size: 16px;
    color: #333;
    letter-spacing: 0;
    white-space: nowrap;
}

    .AlseinTable select:has(option[value=""]:checked) {
        font-size: 14px;
        color: #9aa0a6;
    }

    .AlseinTable select option {
        white-space: normal;
    }

/* =====================
   FIELDSET
===================== */
fieldset {
    border: none;
    padding: 36px 0;
}

/* =====================
   LEGEND – PREMIUM ANIMATED
===================== */
legend {
    position: relative;
    display: inline-block;
    margin: 0 auto 42px;
    padding: 10px 26px;
    font-size: 30px;
    font-weight: 700;
    background: linear-gradient( 120deg, #EA600B, #ff9a3c, #ffd2a3, #ff9a3c, #EA600B );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: legendGradient 6s ease-in-out infinite;
}

    legend::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 60%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient( 90deg, transparent, rgba(234,96,11,.6), rgba(255,154,60,.9), rgba(234,96,11,.6), transparent );
        transform: translateX(-50%);
        animation: legendLine 3.5s ease-in-out infinite;
    }

    legend::before {
        content: "";
        position: absolute;
        inset: -12px -18px;
        border-radius: 16px;
        background: rgba(255,154,60,.08);
        opacity: 0;
        z-index: -1;
        animation: legendGlowSoft 4.5s ease-in-out infinite;
    }






/* =====================
   LOADING SPINNER
===================== */

.LoadingIcon {
    display: none;
    width: 46px;
    height: 46px;
    margin: 0 auto;
}

/* spinner'ı ortala */
.loading-wrapper {
    position: relative;
    min-height: 80px;
}

/* buton loading durumundayken */
.loading-active .btn-success {
    opacity: .6;
    pointer-events: none;
}

/* küçük fade animasyonu */
.LoadingIcon {
    animation: spinFade .6s ease;
}

@keyframes spinFade {
    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
















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

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

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

@keyframes legendLine {
    0%,100% {
        opacity: .4;
        width: 40%;
    }

    50% {
        opacity: 1;
        width: 65%;
    }
}

@keyframes legendGlowSoft {
    0%,100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* =====================
   INFO BOX
===================== */
.col-md-12 > div[style*="background-color: #EA600B"] {
    background: #fff5ec !important;
    color: #333 !important;
    border: 1px solid #ffd9bf;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(234,96,11,.15);
}

/* =====================
   BUTTON
===================== */
.btn-success {
    background: linear-gradient(135deg,#ff9a3c,#EA600B);
    border: none;
    border-radius: 999px;
    padding: 16px 50px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 14px 36px rgba(234,96,11,.35);
    transition: all .3s ease;
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 50px rgba(234,96,11,.45);
    }

/* =====================
   MOBILE
===================== */
@media(max-width:768px) {
    .AlseinTable tr {
        display:flex;
        align-items: stretch;
        gap: 10px;
    }

    .form-control, .AlseinTable input, .AlseinTable select, .AlseinTable textarea {
        
        text-align: center;
        padding: 14px 0;
    }
}