/* Tüm Proje Modalları */
.project-modal {
    border-radius:16px;
    background-color:rgba(255,255,255,0.9);
    box-shadow:0 0 100px rgba(81,48,31,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::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 { padding:30px; position:relative; }

/* Backdrop Efekti */
.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); }
}

/* X Butonu */
.close-modal-x { position:absolute; top:-16px; right:30px; background:var(--color-black); 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-brown); }
.close-modal-x i { font-size:20px; }