.am-perde {
position: fixed;
inset: 0;
z-index: 140;
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;
}
.am-perde.hidden { display: none; }
.am-perde.acik { opacity: 1; }
.am-kutu {
position: relative;
display: flex;
flex-direction: column;
width: min(440px, 100%);
max-height: min(560px, 88vh);
box-sizing: border-box;
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;
overflow: hidden;
transform: translateY(14px) scale(.985);
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.am-perde.acik .am-kutu { transform: none; }
.am-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;
}
.am-kapat:hover { background: rgba(255, 255, 255, .14); color: #ffffff; }
.am-govde {
position: relative;
flex: 1 1 auto;
min-height: 0;
padding: 26px 26px 22px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.am-govde::-webkit-scrollbar { width: 8px; }
.am-govde::-webkit-scrollbar-track { background: transparent; }
.am-govde::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .16);
border-radius: 99px;
border: 2px solid transparent;
background-clip: content-box;
}
.am-govde::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); background-clip: content-box; }
.am-baslik {
margin: 0 0 16px;
padding-right: 30px;
font: 700 20px/1.25 var(--font-display);
letter-spacing: -.02em;
color: #ffffff;
}
.am-ozet {
margin: 0;
font: 400 15px/1.55 var(--font-body);
color: rgba(233, 234, 238, .85);
}
.am-liste {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.am-liste li {
position: relative;
padding-left: 18px;
font: 400 14.5px/1.5 var(--font-body);
color: rgba(233, 234, 238, .78);
}
.am-liste li::before {
content: "";
position: absolute;
left: 3px;
top: .62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(233, 234, 238, .38);
}
.am-liste a,
.am-eposta {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, .35);
}
.am-liste a:hover,
.am-eposta:hover { text-decoration-color: #ffffff; }
.am-ayak {
flex: none;
padding: 4px 26px 22px;
text-align: center;
}
.am-abone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 200px;
height: 48px;
padding: 0 26px;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #0b0c10;
font: 700 15.5px var(--font-display);
letter-spacing: -.01em;
cursor: pointer;
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.am-abone:hover {
background: #ffffff;
box-shadow: 0 10px 26px rgba(255, 255, 255, .18);
transform: translateY(-1px);
}
.am-abone:active { transform: none; box-shadow: none; }
.am-abone:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.am-abone:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }
.am-izin {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 0 0 16px;
text-align: left;
font: 400 13.5px/1.5 var(--font-body);
color: rgba(233, 234, 238, .86);
cursor: pointer;
}
.am-izin-kutu {
-webkit-appearance: none;
appearance: none;
flex: none;
display: grid;
place-content: center;
width: 19px;
height: 19px;
margin: 1px 0 0;
border: 1.5px solid rgba(255, 255, 255, .6);
border-radius: 6px;
background: transparent;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.am-izin-kutu::before {
content: '';
width: 5px;
height: 10px;
margin-top: -2px;
border: solid #0b0c10;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform .12s ease;
}
.am-izin-kutu:checked { background: #fff; border-color: #fff; }
.am-izin-kutu:checked::before { transform: rotate(45deg) scale(1); }
.am-izin-kutu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.am-fiyat {
font: 600 14.5px var(--font-display);
color: #0b0c10;
}
.am-giris {
margin: 13px 0 0;
font: 400 13px var(--font-body);
color: rgba(233, 234, 238, .48);
}
.am-giris-btn {
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: rgba(233, 234, 238, .78);
font: inherit;
text-decoration: none;
}
.am-giris-btn:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.am-not {
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .08);
font: 400 11.5px/1.5 var(--font-body);
color: rgba(233, 234, 238, .38);
}
.am-not a {
color: rgba(233, 234, 238, .62);
text-decoration: underline;
text-underline-offset: 2px;
}
.am-not a:hover { color: #ffffff; }
@media (max-width: 720px) {
.am-perde {
align-items: flex-end;
padding: 0;
}
.am-kutu {
width: 100%;
max-height: 82vh;
border-radius: 22px 22px 0 0;
border-bottom: 0;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.am-perde.acik .am-kutu { transform: none; }
.am-govde { padding: 22px 18px 18px; }
.am-baslik { font-size: 19px; }
.am-ayak { padding: 4px 18px 20px; }
.am-abone { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.am-perde, .am-kutu, .am-abone, .am-izin-kutu, .am-izin-kutu::before { transition: none; }
}