/* Tüm Proje Modalları */
.project-modal {
    border-radius:16px;
    background-color:rgba(255,255,255,0.9);
    box-shadow:0 0 100px rgba(12,77,112,0.3);
    position:fixed;
	padding:0;
	border:0;
    inset:0;
    margin:auto;
    width:min(92vw,720px);
    height:fit-content;
    overflow:visible;
	opacity:0;
    transform:scale(0.7);
    transition: 
        opacity 0.3s ease, 
        transform 0.3s cubic-bezier(.2,.8,.2,1), 
        display 0.3s allow-discrete, 
        overlay 0.3s allow-discrete;
}
.project-modal.narrow {width:min(92vw,480px);}
.project-modal::before { content:""; position:absolute; inset:0; background:url(../images/logo-icon-line.png) no-repeat right 60px top 30px / auto 100%; z-index:-100; opacity:0.1; }

.project-modal[open] { opacity:1; transform:scale(1); }

.modal-container { max-height:calc(100vh - 40px); padding:30px; position:relative; overflow:hidden; overflow-y:auto; }

.project-modal::backdrop {
    background:rgba(255,255,255,0);
    backdrop-filter:blur(0px);
    transition: 
        background 0.3s ease, 
        backdrop-filter 0.3s ease, 
        display 0.3s allow-discrete, 
        overlay 0.3s allow-discrete;
}

.project-modal[open]::backdrop { background:rgba(255,255,255,0.4); backdrop-filter:blur(20px); }

@starting-style {
    .project-modal[open] { opacity:0; transform:scale(0.7); }
    .project-modal[open]::backdrop { background:rgba(0,0,0,0); backdrop-filter:blur(0px); }
}



/* Modal Search */

.modal-search { margin-top:10px; position:relative; display:flex; align-items:center; gap:8px; }
	.modal-search .input { flex:1; border-radius:24px; }
	.modal-search .button { width:80px; margin-left:auto; }
		.modal-search .button i { margin-right:auto; background-color:transparent; color:var(--color-white); }


/* X Butonu */
.close-modal-x { position:absolute; top:-16px; right:30px; background:var(--color-dark); color:var(--color-white); width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:100; }
.close-modal-x:hover { background:var(--color-red); }
.close-modal-x i { font-size:20px; }



@media only screen and (max-width:540px) {

.modal-search { flex-direction:column; gap:12px; }
.modal-search .input { float:left; width:100%; flex:auto; }
.modal-search .button { width:100%; }

}