/* Ana Overlay İzolasyonu */
.sspop-overlay * { box-sizing: border-box !important; }

.sspop-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
    z-index: 99999999 !important; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; box-sizing: border-box !important; font-family: inherit;
}
.sspop-overlay.sspop-active { opacity: 1; }
.sspop-no-overlay { pointer-events: none !important; }
.sspop-no-overlay .sspop-content { pointer-events: auto !important; }

/* Kutu İçeriği */
.sspop-content {
    background: #fff; padding: 40px 30px; position: relative; width: 90%; margin: 0 !important; 
    max-height: 95vh; overflow-y: auto;
    /* transition kaldırıldı çünkü JavaScript animasyon motoru yönetecek */
}

/* İçerik Merkezleme ve Taşma Koruması */
.sspop-inner * { text-align: center; }
.sspop-inner img { max-width: 100%; height: auto; margin: 0 auto; display: block; }

/* Kapatma Butonu İzolasyonu */
.sspop-close {
    position: absolute !important; appearance: none !important; -webkit-appearance: none !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; z-index: 100 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; line-height: 1 !important; min-width: unset !important; min-height: unset !important;
}
.sspop-close svg { width: 1em !important; height: 1em !important; display: block !important; fill: currentColor !important; }
.sspop-close:hover { opacity: 0.7 !important; transform: scale(1.05) !important; }

/* ŞABLONLAR ve KONUMLANDIRMA */
.sspop-tpl-classic { box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important; }
.sspop-tpl-minimal { box-shadow: none !important; border: 1px solid #eee !important; }
.sspop-tpl-banner { max-width: 100% !important; width: 100% !important; text-align: center; }
.sspop-pos-center { align-items: center; justify-content: center; }
.sspop-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.sspop-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.sspop-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.sspop-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.sspop-pos-top-bar { align-items: flex-start; justify-content: center; }
.sspop-pos-bottom-bar { align-items: flex-end; justify-content: center; }

/* =========================================================================
   YENİ: PROFESYONEL ANİMASYON MOTORU (JS'ten Tetiklenir)
========================================================================= */
/* FADE (Solma) */
@keyframes sspopAnimIn_fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sspopAnimOut_fade { from { opacity: 1; } to { opacity: 0; } }

/* ZOOM (Büyüme/Küçülme) */
@keyframes sspopAnimIn_zoom { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sspopAnimOut_zoom { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.6); } }

/* BOUNCE (Zıplayarak Gelme) */
@keyframes sspopAnimIn_bounce { 
    0% { opacity: 0; transform: translateY(60px); } 
    60% { opacity: 1; transform: translateY(-15px); } 
    80% { transform: translateY(5px); } 
    100% { transform: translateY(0); } 
}

/* SLIDE UP (Aşağıdan Yukarı Kayma) */
@keyframes sspopAnimIn_slideup { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }

/* SLIDE DOWN (Çıkarken Aşağı Kayma) */
@keyframes sspopAnimOut_slidedown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100px); } }

/* FLIP (Dönerek Açılma) */
@keyframes sspopAnimIn_flip { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0deg); } }
@keyframes sspopAnimOut_flip { from { opacity: 1; transform: perspective(400px) rotateX(0deg); } to { opacity: 0; transform: perspective(400px) rotateX(90deg); } }