/* ==========================================================
   ANALYSIS LOADING
========================================================== */


.analysis-loading{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px;

    backdrop-filter:blur(8px);

    background:
       radial-gradient(circle at top left,#234d8c 0%,transparent 45%),

       radial-gradient(circle at bottom right,#0b8c8c 0%,transparent 40%),

       linear-gradient(135deg,#050b15,#081321,#091a2e);

       animation:
       analysisAurora 18s ease infinite;

    z-index:999999;

    overflow:hidden;

}

.analysis-loading.hidden{

    display:none;

}

.analysis-panel{

    width:min(720px,100%);

    max-height:90vh;

    overflow:hidden;

    border-radius:28px;

    padding:40px;

    background:
      rgba(18,29,48,.72);

    backdrop-filter:

      blur(22px);

      -webkit-backdrop-filter:

      blur(22px);

    border: 1px solid rgba(255,255,255,.12);

    display:flex;

    flex-direction:column;

    gap:22px;

    box-sizing:border-box;

    box-shadow:

       0 30px 80px rgba(0,0,0,.45),
       0 0 60px rgba(79,156,255,.12);

    animation:
        panelIn
       .45s cubic-bezier(.2,.8,.2,1);

}

.analysis-logo{

    font-size:52px;

    filter:
       drop-shadow(
       0 0 18px
       rgba(79,156,255,.5)
    );

    animation:

       logoFloat 4s ease-in-out infinite;

    text-align:center;

}

.analysis-title{

    margin:0;

    font-size:34px;

    font-weight:800;

    text-align:center;

    color:white;

    text-shadow:

    0 0 25px

    rgba(79,156,255,.25);

}

.analysis-step{

    margin:0;

    text-align:center;

    color:#b8c5d8;

    font-size:18px;

}

.analysis-progress{

    height:12px;

    border-radius:999px;

    overflow:hidden;

    background:

    rgba(255,255,255,.08);

}

.analysis-progress-fill{

    width:0;

    height:100%;

    position:relative;

    border-radius:999px;

    background:

        linear-gradient(
        90deg,

        #4f9cff,
        #53d4ff,
        #77f6ff
    );

    background-size:
        200% 100%;

    animation:
        gradientMove 2s linear infinite;
        transition:width .35s ease;
}



.analysis-progress-fill::after{

content:"";

position:absolute;

right:0;

top:0;

bottom:0;

width:60px;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.65),

transparent

);

animation:

progressShine

1.4s linear infinite;

}




.analysis-percent{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:white;

}

.analysis-mini-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:14px;

    align-items:stretch;

}

.analysis-mini-card{

    padding:14px 16px;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:92px;

    transition:all .35s;

}

.analysis-mini-title{

    color:#7f91aa;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1.2px;

    margin-bottom:6px;

}

.analysis-mini-value{

    font-size:20px;

    font-weight:800;

    color:white;

    font-family:monospace;

    line-height:1;

}



.analysis-mini-card.analysis-complete{

    border-color:rgba(78,234,129,.45);

    box-shadow:

        0 0 24px rgba(78,234,129,.15);

}



.analysis-characters{

    height:220px;

    overflow:auto;

    border-radius:18px;

    padding:18px;

    background:

    rgba(255,255,255,.04);
 
    backdrop-filter:

    blur(8px);

    border:1px solid rgba(255,255,255,.08);

}



.analysis-characters::-webkit-scrollbar{

width:8px;

}


.analysis-characters::-webkit-scrollbar-thumb{

background:rgba(255,255,255,.15);

border-radius:999px;

}



.analysis-character{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 0;

    color:white;

   animation:
      fadeCharacter
      .35s ease;

}

.analysis-status{

    width:24px;

    text-align:center;

}

.analysis-fact{

padding:18px;

border-radius:18px;

background:rgba(255,255,255,.04);

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.08);

color:#c8d5e7;

line-height:1.6;

}



.pending{

color:#ffca57;

}


.success{

color:#53e66c;

}


.analysis-complete{

border-color:

#39d98a;

box-shadow:

0 0 20px

rgba(57,217,138,.35);

}




@keyframes analysisAurora{

0%{

background-position:
0% 50%,
100% 50%,
50% 50%;

}

50%{

background-position:
100% 50%,
0% 50%,
50% 50%;

}

100%{

background-position:
0% 50%,
100% 50%,
50% 50%;

}

}


@keyframes logoFloat{

0%,100%{

transform:

translateY(0);

}

50%{

transform:

translateY(-8px);

}

}



@keyframes gradientMove{

0%{

background-position:

0%;

}

100%{

background-position:

200%;

}

}




@keyframes fadeCharacter{

from{

opacity:0;

transform:

translateY(8px);

}

to{

opacity:1;

transform:

translateY(0);

}

}



.analysis-panel>*{

position:relative;

z-index:2;

}



.analysis-loading::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(79,156,255,.25),

transparent 70%

);

top:-200px;

left:-150px;

filter:blur(70px);

animation:

blobOne 18s ease-in-out infinite;

}


.analysis-loading::after{

content:"";

position:absolute;

width:550px;

height:550px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,255,200,.15),

transparent 70%

);

right:-150px;

bottom:-180px;

filter:blur(90px);

animation:

blobTwo 22s ease-in-out infinite;

}


@keyframes blobOne{

0%,100%{

transform:

translate(0,0);

}

50%{

transform:

translate(120px,80px);

}

}

@keyframes blobTwo{

0%,100%{

transform:

translate(0,0);

}

50%{

transform:

translate(-140px,-60px);

}

}


.analysis-character{

transition:

all .25s;
}


.analysis-character:hover{

transform:

translateX(6px);

}


@keyframes progressShine{

0%{

transform:

translateX(-60px);

}

100%{

transform:

translateX(60px);

}

}



@keyframes panelIn{

from{

opacity:0;

transform:

translateY(24px)

scale(.96);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}



.analysis-percent{

    font-variant-numeric: tabular-nums;

    transition:
        transform .25s,
        color .25s;

}


.analysis-percent.updating{

    transform:scale(1.08);

    color:#77f6ff;

}


.analysis-mini-value{

    transition:

    transform .18s,

    opacity .18s;

}


.analysis-mini-value.changing{

opacity:.4;

transform:

translateY(-4px);

}


.analysis-character.success{

animation:

successFlash

.45s;

}


@keyframes successFlash{

0%{

background:rgba(83,230,108,.18);

}

100%{

background:transparent;

}

}



@keyframes factChange{

from{

opacity:0;

transform:

translateY(8px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


.fade{

animation:

factChange

.35s;

}



.analysis-logo{

filter:

drop-shadow(

0 0 calc(
30px * var(--analysisGlow,0)
)

rgba(79,156,255,.7)

);

}



.analysis-mini-value.changing{

    opacity:.45;

    transform:translateY(-4px);

}



#result{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .5s ease,
        transform .5s ease;

}

#result:not(.hidden){

    opacity:1;

    transform:translateY(0);

}




.analysis-loading.closing{

    animation:

        loadingClose .55s ease forwards;

}

@keyframes loadingClose{

    from{

        opacity:1;

        backdrop-filter:blur(8px);

    }

    to{

        opacity:0;

        backdrop-filter:blur(0);

    }

}

.analysis-panel{

    transition:

        transform .55s ease,

        opacity .55s ease;

}

.analysis-loading.closing .analysis-panel{

    transform:

        scale(.96);

    opacity:0;

}





/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.analysis-panel{

    width:100%;

    padding:18px;

    border-radius:22px;

}

.analysis-title{

    font-size:30px;

    line-height:1.15;

}

.analysis-step{

    font-size:12px;

}

.analysis-percent{

    font-size:28px;

}

/* üç kart */

.analysis-mini-grid{

    gap:10px;

}

.analysis-mini-card{

    min-height:78px;

    padding:10px;

}

.analysis-mini-title{

    font-size:10px;

    letter-spacing:.8px;

}

.analysis-mini-value{

    font-size:18px;

}


.analysis-characters{

    height:130px;

    padding:12px;

}

.analysis-character{

    gap:8px;

    font-size:14px;

}

.analysis-name{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* bilgi kutusu */

.analysis-fact{

    padding:14px;

    font-size:14px;

    line-height:1.4;

}

}