/* ==========================================================
   HAKLIMI MINIMAL BOTTOM BANNER
========================================================== */

#haklimiPopup{

z-index: 8;

opacity:0;

transition:

transform .45s cubic-bezier(.22,1,.36,1),

opacity .35s;


position:fixed;

left:50%;

bottom:16px;

transform:translate(-50%,150%);

width:min(460px,calc(100% - 24px));

padding:14px 22px;

border-radius:20px;

background:rgba(14,16,20,.82);

backdrop-filter:blur(24px);

-webkit-backdrop-filter:blur(24px);

border:1px solid rgba(255,210,70,.18);

box-shadow:
0 20px 60px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.03) inset;

overflow:hidden;

}



#haklimiPopup::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:1px;

background:

linear-gradient(90deg,

transparent,

rgba(255,210,70,.8),

transparent);

}



#haklimiPopup.show{
    transform:translate(-50%,07%);
    opacity:1;
}



.popup-brand{

display:flex;

justify-content: center;

align-items:center;

gap:8px;

}

.popup-brand-logo{

width:30px;

height:20px;

display:flex;

align-items:center;

justify-content:center;

flex:none;

border-radius:10px;

background:linear-gradient(180deg,#FFD84A,#F4C430);

color:#111;

box-shadow:
0 8px 22px rgba(255,210,70,.30);

transition:.30s;

}

.popup-brand-logo svg{

width:22px;

height:22px;

}

#haklimiPopup:hover .popup-brand-logo{

transform:translateY(-2px);

box-shadow:
0 12px 30px rgba(255,210,70,.40);

}


.popup-brand strong{

font-size:24px;

font-weight:700;

letter-spacing:-.5px;

}



.popup-brand span{

font-size:13px;

opacity:.75;

}



.popup-content{

    min-width:0;

    flex:1;

    display:flex;

    flex-direction:column;

    align-items: center;

    gap:0px;

}

.popup-top{

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.popup-tags{

margin-top:11px;

display:flex;

gap:8px;

flex-wrap:wrap;

}

.tag{

padding:6px 14px;

border-radius:999px;

font-size:12px;

transition:.25s;

animation:float 4s ease-in-out infinite;

}

.tag1{

animation-delay:0s;

}

.tag2{

animation-delay:.6s;

}

.tag3{

animation-delay:1.2s;

}

.tag4{

animation-delay:1.8s;

}

.tag:hover{

background:#FFD84A;

color:#111;

transform:translateY(-3px);

}



.popup-button{

display:inline-flex;

align-items:center;

margin-left:10px;

font-size:15px;

font-weight:700;

color:#FFD84A;

text-decoration:none;

white-space:nowrap;

transition:.25s;

}

.popup-button::after{

content:"→";

margin-left:5px;

transition:.25s;

}

.popup-button:hover{

color:#fff2b5;

}

.popup-button:hover::after{

transform:translateX(5px);

}




#haklimiClose{

position:absolute;

top:10px;

right:10px;

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border:none;

border-radius:50%;

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

color:#fff;

cursor:pointer;

transition:.25s;

z-index:5;

}


#haklimiClose:hover{

background:#FFD84A;

color:#111;

transform:rotate(90deg);

}



@media (max-width:900px){

    #haklimiPopup{

        padding:16px;

    }

    .popup-top{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .popup-bottom{

        flex-direction:column;

        align-items:flex-start;

    }

    .popup-button{

        width:100%;

    }

}

@media (max-width:600px){

    #haklimiPopup{

        width:calc(100% - 16px);

        bottom:8px;

        border-radius:16px;

        padding:14px;

        gap:12px;

    }

    .popup-logo{

        width:20px;

        height:12px;

    }

    .popup-logo img{

        width:20px;

        height:12px;

    }

    .popup-brand strong{

        font-size:16px;

    }

    .popup-tags{

        gap:6px;

    }


    .popup-bottom{

        display:flex;

        justify-content:space-between;

        align-items:start;

        gap:10px;

    }

    .popup-bottom p{

        flex:1;

        font-size:13px;

        line-height:1.4;

        margin:0;

    }

    .popup-button{

        flex:none;

        font-size:13px;

        white-space:nowrap;

    }

}


@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

}