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

/* ================================
   🎨 RENK PALETİ – YUMUŞATILMIŞ
================================ */
:root {
    --ana-mor: #6f5fa7;
    --koyu-mor: #4a3f7a;
    --acik-mor: #b7a9e4;
    --soft-mavi: #a9c4e8;
    --soft-pembe: #f3c6dd;
    --logo-yesili: #27ae60;
    --cam-beyaz: rgba(255,255,255,0.88);
    --gecis: all .45s cubic-bezier(.25,.8,.25,1);
}

/* ================================
   🌌 ARKA PLAN
================================ */
body {
    font-family: 'Consolas', monospace;
    margin: 0;
    min-height: 100vh;
    background: radial-gradient( circle at top left, #c7bff0, #8a7bc4 40%, #4a3f7a 75% );
    background-attachment: fixed;
    color: #2d3436;
}

/* ================================
   🧊 ANA PANEL – CAM EFEKT
================================ */
#UPnlGenel {
    background: var(--cam-beyaz) !important;
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 30px;
    padding: 50px;
    max-width: 1100px;
    width: 100%;
    margin: auto;
    box-shadow: 0 40px 100px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.35);
    animation: panelGiris 1s ease-out;
}

/* ================================
   📦 FIELDSET
================================ */
fieldset {
    border: 2px dashed rgba(111, 95, 167, 0.35) !important;
    border-radius: 22px;
    padding: 35px !important;
    margin-bottom: 40px !important;
    background: linear-gradient( 135deg, rgba(255,255,255,0.35), rgba(169,196,232,0.18) );
    transition: var(--gecis);
}

    fieldset:hover {
        border-color: var(--ana-mor) !important;
        background: linear-gradient( 135deg, rgba(255,255,255,0.5), rgba(183,169,228,0.25) );
        box-shadow: 0 15px 40px rgba(74,63,122,0.12);
    }

/* ================================
   🏷 LEGEND
================================ */
legend {
    all: unset;
    display: inline-block;
    padding: 14px 32px !important;
    background: linear-gradient( 135deg, var(--ana-mor), var(--soft-mavi) );
    color: #fff !important;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    box-shadow: 0 10px 25px rgba(74,63,122,0.35);
    margin-bottom: 25px;
}

/* ================================
   🧠 FORM INPUT – GENİŞ & CAM
================================ */
.form-control {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px !important;
    font-weight: 500;
    width: 100% !important;
    max-width: 620px;
    min-width: 500px;
    margin-left: 2rem;
    padding: 16px 26px !important;
    border-radius: 16px !important;
    background: linear-gradient( 135deg, rgba(183,169,228,0.28), rgba(255,255,255,0.22), rgba(169,196,232,0.25) ) !important;
    border: 1.5px solid rgba(111, 95, 167, 0.35) !important;
    color: #3b224a !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.25), 0 6px 18px rgba(74,63,122,0.18);
    transition: var(--gecis);
}

    /* Placeholder */
    .form-control::placeholder {
        color: rgba(74,63,122,0.55);
    }

    /* Hover */
    .form-control:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(74,63,122,0.28), inset 0 1px 1px rgba(255,255,255,0.3);
    }

    /* Focus */
    .form-control:focus {
        outline: none !important;
        background: linear-gradient( 135deg, rgba(183,169,228,0.45), rgba(255,255,255,0.3), rgba(243,198,221,0.35) ) !important;
        border-color: var(--ana-mor) !important;
        box-shadow: 0 0 0 4px rgba(169,196,232,0.35), 0 18px 35px rgba(111,95,167,0.35);
        transform: translateY(-3px) scale(1.01);
    }

    /* Disabled */
    .form-control:disabled,
    .form-control[readonly] {
        background: linear-gradient( 135deg, rgba(220,220,220,0.35), rgba(255,255,255,0.25) ) !important;
        color: rgba(74,63,122,0.45) !important;
        box-shadow: none;
    }

/* ================================
   📊 TABLO
================================ */
.AlseinTable {
    border-collapse: separate;
    border-spacing: 0 12px;
}

    .AlseinTable td:nth-child(3n+2) {
        background: linear-gradient( 135deg, rgba(183,169,228,0.22), rgba(255,255,255,0.85) ) !important;
        border: 1px solid rgba(111, 95, 167, 0.15) !important;
        color: var(--koyu-mor) !important;
        border-radius: 14px !important;
        padding: 14px 22px !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

/* ================================
   ✅ BUTON
================================ */
.btn-submit {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 64px;
    border-radius: 60px;
    background: linear-gradient( 135deg, var(--ana-mor), var(--soft-mavi) );
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff !important;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(111,95,167,0.35), inset 0 1px 1px rgba(255,255,255,0.35);
    transition: all .45s cubic-bezier(.25,.8,.25,1);
}

    /* ✨ shine efekti */
    .btn-submit::before {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0) );
        transform: skewX(-25deg);
        transition: all .9s ease;
    }

    /* hover */
    .btn-submit:hover::before {
        left: 130%;
    }

    .btn-submit:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 22px 45px rgba(111,95,167,0.5), inset 0 1px 1px rgba(255,255,255,0.45);
    }

    /* loading state */
    .btn-submit.loading {
        pointer-events: none;
        opacity: 0.9;
    }

    .btn-submit .btn-loading {
        display: none;
    }

    .btn-submit.loading .btn-text {
        display: none;
    }

    .btn-submit.loading .btn-loading {
        display: inline-flex;
    }

    /* focus */
    .btn-submit:focus {
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(169,196,232,0.45), 0 26px 55px rgba(111,95,167,0.55);
    }

/* mobile */
@media (max-width: 768px) {
    .btn-submit {
        width: 100%;
        padding: 18px 22px;
    }
}







/* ================================
   🧭 SCROLLBAR
================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, var(--ana-mor), var(--soft-mavi) );
    border-radius: 10px;
}

/* ================================
   🎬 ANİMASYON
================================ */
@keyframes panelGiris {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* ================================
   📱 MOBİL
================================ */
@media (max-width: 768px) {
    #UPnlGenel {
        padding: 25px;
    }

    /* TD'ler yan yana kalsın */
    .AlseinTable {
        border-spacing: 0 8px;
    }

        .AlseinTable td {
            display: table-cell;
            width: auto;
            padding: 12px 14px !important;
            font-size: 14px;
            white-space: nowrap;
        }

    .form-control {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

   
}