.so-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);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
opacity: 0;
transition: opacity .22s ease;
}
.so-perde.acik { opacity: 1; }
.so-perde.hidden { display: none; }
.so-kutu {
position: relative;
display: flex;
flex-direction: column;
width: min(480px, 100%);
max-height: min(620px, 90vh);
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(10px) scale(.985);
transition: transform .26s cubic-bezier(.22, .8, .22, 1);
}
.so-perde.acik .so-kutu { transform: none; }
.so-kapat {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .07);
color: #e9eaee;
font-size: 19px;
line-height: 1;
cursor: pointer;
transition: background .18s ease;
}
.so-kapat:hover { background: rgba(255, 255, 255, .14); }
.so-kapat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.so-govde {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 26px 26px 6px;
}
.so-baslik {
margin: 0 0 6px;
padding-right: 30px;
font: 700 20px/1.25 var(--font-display);
letter-spacing: -.02em;
color: #fff;
}
.so-urun {
margin: 0 0 16px;
font: 400 14px/1.5 var(--font-body);
color: rgba(233, 234, 238, .62);
}
.so-liste {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 11px;
}
.so-liste li {
position: relative;
padding-left: 20px;
font: 400 14.5px/1.55 var(--font-body);
color: rgba(233, 234, 238, .88);
}
.so-liste li::before {
content: '';
position: absolute;
left: 4px;
top: 9px;
width: 5px;
height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, .45);
}
.so-liste a,
.so-onay a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: opacity .18s ease;
}
.so-liste a:hover,
.so-onay a:hover { opacity: .75; }
.so-liste a:focus-visible,
.so-onay a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.so-ayak {
flex: none;
padding: 16px 26px 22px;
text-align: center;
}
.so-al {
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: #fff;
color: #0b0c10;
font: 700 15.5px var(--font-display);
cursor: pointer;
transition: box-shadow .2s ease, transform .2s ease;
}
.so-al:hover { box-shadow: 0 10px 26px rgba(255, 255, 255, .18); transform: translateY(-1px); }
.so-al:active { transform: none; box-shadow: none; }
.so-al:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.so-al:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }
.so-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;
}
.so-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;
}
.so-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;
}
.so-izin-kutu:checked { background: #fff; border-color: #fff; }
.so-izin-kutu:checked::before { transform: rotate(45deg) scale(1); }
.so-izin-kutu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.so-fiyat {
font: 600 14.5px var(--font-display);
color: #0b0c10;
}
.so-onay {
margin: 13px 0 0;
font: 400 12.5px/1.55 var(--font-body);
color: rgba(233, 234, 238, .62);
}
@media (max-width: 480px) {
.so-govde { padding: 22px 20px 4px; }
.so-ayak { padding: 14px 20px 20px; }
.so-baslik { font-size: 18.5px; }
.so-al { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.so-perde, .so-kutu, .so-al, .so-izin-kutu, .so-izin-kutu::before { transition: none; }
.so-kutu { transform: none; }
}