.gm-perde {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 4vh, 40px) clamp(12px, 4vw, 40px);
background: rgba(4, 6, 12, .70);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
opacity: 0;
transition: opacity .22s ease;
}
.gm-perde.hidden { display: none; }
.gm-perde.acik { opacity: 1; }
.gm-kutu {
position: relative;
width: min(420px, 100%);
box-sizing: border-box;
padding: 34px clamp(22px, 5vw, 30px) 28px;
border-radius: 22px;
background: #16181d;
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: 0 40px 110px rgba(0, 0, 0, .60);
color: #e9eaee;
transform: translateY(14px) scale(.985);
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.gm-perde.acik .gm-kutu { transform: none; }
.gm-kapat {
position: absolute;
top: 13px;
right: 13px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: #9ea3ad;
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.gm-kapat:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }
.gm-baslik {
margin: 0 0 7px;
padding-right: 30px;
font: 700 20px/1.25 var(--font-display);
letter-spacing: -.02em;
color: #ffffff;
}
.gm-alt {
margin: 0 0 20px;
font: 400 13.5px/1.55 var(--font-body);
color: rgba(233, 234, 238, .55);
}
.gm-form { display: block; }
.gm-etiket {
display: block;
margin: 0 0 7px 4px;
font: 600 12px var(--font-display);
letter-spacing: .02em;
color: rgba(233, 234, 238, .55);
}
.gm-girdi {
display: block;
width: 100%;
box-sizing: border-box;
height: 48px;
padding: 0 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .05);
color: #ffffff;
font: 400 15px var(--font-body);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.gm-girdi::placeholder { color: rgba(233, 234, 238, .32); }
.gm-girdi:focus {
outline: none;
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .55);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
}
.gm-girdi--kod {
text-align: center;
letter-spacing: .32em;
text-transform: uppercase;
font-weight: 700;
}
.gm-btn {
display: block;
width: 100%;
margin-top: 14px;
height: 48px;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #0b0c10;
font: 700 15.5px var(--font-display);
letter-spacing: -.01em;
cursor: pointer;
transition: box-shadow .18s ease, transform .18s ease;
}
.gm-btn:hover { box-shadow: 0 10px 26px rgba(255, 255, 255, .18); transform: translateY(-1px); }
.gm-btn:active { transform: none; box-shadow: none; }
.gm-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.gm-btn[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.gm-hata {
margin: 14px 0 0;
padding: 11px 15px;
border-radius: 14px;
background: rgba(248, 113, 113, .10);
border: 1px solid rgba(248, 113, 113, .28);
font: 400 13px/1.5 var(--font-body);
color: #fca5a5;
}
.gm-hata[hidden] { display: none; }
.gm-not {
margin: 16px 0 0;
font: 400 13px var(--font-body);
color: rgba(233, 234, 238, .48);
}
.gm-not a { color: rgba(233, 234, 238, .78); text-decoration: underline; text-underline-offset: 2px; }
.gm-not a:hover { color: #fff; }
.gm-link {
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: rgba(233, 234, 238, .85);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.gm-link:hover { color: #ffffff; }
.gm-link[disabled] { opacity: .4; cursor: default; }
.gm-geri {
margin-top: 14px;
padding: 0;
border: 0;
background: none;
font: 400 13px var(--font-body);
color: rgba(233, 234, 238, .48);
cursor: pointer;
}
.gm-geri:hover { color: #ffffff; }
@media (max-width: 720px) {
.gm-perde { align-items: flex-end; padding: 0; }
.gm-kutu {
width: 100%;
border-radius: 22px 22px 0 0;
border-bottom: 0;
padding: 28px 20px 24px;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.gm-perde.acik .gm-kutu { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.gm-perde, .gm-kutu, .gm-btn { transition: none; }
}