/* Overlay */
.sa-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 800px at 50% -20%, rgba(22,168,255,0.15), transparent), rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .2s ease;
}
.sa-overlay.sa-show { opacity: 1; }

/* Modal */
.sa-modal {
    width: min(560px, 92vw);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 6px 18px rgba(22,168,255,0.10);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform .22s cubic-bezier(.2,.6,.2,1);
}
.sa-overlay.sa-show .sa-modal { transform: translateY(0) scale(1); }

/* Header */
.sa-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid #eef1f6;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.sa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 18px;
    position: relative;
}
.sa-icon.success { background: #e8f7ef; color: #2ecc71; }
.sa-icon.error   { background: #fdecec; color: #E63946; }

/* Çek işareti / çarpı işareti */
.sa-icon.success::before,
.sa-icon.error::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.sa-icon.success::before {
    /* Check SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.sa-icon.error::before {
    /* Cross SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.sa-icon.success::after,
.sa-icon.error::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(22,168,255,0.08), transparent);
}

.sa-title {
    font: 700 1.1rem/1.3 "Inter","Segoe UI",system-ui,sans-serif;
    color: #0f172a;
    letter-spacing: .2px;
    margin: 0;
}

/* Content */
.sa-content {
    padding: 20px 24px 10px;
    color: #374151;
    font: 400 .98rem/1.6 "Inter","Segoe UI",system-ui,sans-serif;
}

/* Actions */
.sa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    background: #fafbfe;
    border-top: 1px solid #eef1f6;
}
.sa-btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 11px 18px;
    font: 600 .94rem/1 "Inter","Segoe UI",system-ui,sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sa-confirm {
    background: linear-gradient(135deg, #16a8ff, #1c7ed6);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22,168,255,.28);
}
.sa-confirm:hover { transform: translateY(-1px); filter: brightness(1.02); }
.sa-confirm:active { transform: translateY(0); }

.sa-cancel { background:#eef2f7; color:#334155; }

.sa-hidden { display: none; }