/* Büyük modalın ÜSTÜNE gelsin */
.confirm-layer {
    position: fixed;
    inset: 0;
    z-index: 2000; /* bootstrap modal (1060) üstü */
    background: rgba(2, 6, 23, .58);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Kart */
.confirm-card {
    width: min(560px, 92vw);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,.35); /* mavi ring */
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.18);
    animation: confirm-in .14s ease-out;
}

/* Koyu tema */
.confirm-dark {
    background: #0b1220;
    color: #e5e7eb;
}

/* Başlık: belirgin mavi degrade */
.confirm-header {
    background: linear-gradient(135deg,#1d4ed8,#2563eb);
    color: #fff;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

/* Gövde: koyu ama okunaklı */
.confirm-body {
    padding: 1rem 1.1rem;
    color: #e5e7eb;
}

/* Alt alan */
.confirm-actions {
    padding: .7rem .9rem;
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Küçük animasyon */
@keyframes confirm-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* burdan sonra danger modal */
/* Büyük modalın üstünde, koyu arka plan + blur */
.alert-layer {
    position: fixed;
    inset: 0;
    z-index: 2000; /* bootstrap modal 1060 -> bunun üstüne çık */
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Kart: koyu tema, belirgin gölge ve sıcak ring */
.alert-card {
    width: min(520px, 92vw);
    border-radius: 16px;
    overflow: hidden;
    background: #0b1220; /* koyu gövde -> beyaz modal üstünde net */
    color: #e5e7eb;
    border: 1px solid rgba(249,115,22,.45); /* warm ring (orange) */
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.18);
    animation: alert-in .14s ease-out;
}

/* Başlık: turuncu->kırmızı degrade */
.alert-header {
    background: linear-gradient(135deg,#f97316,#ef4444);
    color: #fff;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ah-left {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ah-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.alert-body {
    padding: 1rem 1.1rem;
    background: #0f172a; /* gövdede bir ton daha açık koyu */
    color: #f8fafc;
    border-left: 4px solid rgba(239,68,68,.65); /* hafif uyarı şeridi */
}

.alert-footer {
    padding: .7rem .9rem;
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    justify-content: flex-end;
}

/* Giriş animasyonu */
@keyframes alert-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}








/* === SCOPED STYLES: mevcut tasarımına dokunmadan === */

#cat-sort {
    font-family: inherit;
    color: inherit;
    padding: 12px;
}

    #cat-sort .cs-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    #cat-sort h4 {
        margin: 0;
        font-weight: 600;
    }

    #cat-sort .cs-actions {
        display: flex;
        gap: 8px;
    }

    #cat-sort .cs-btn {
        padding: 8px 12px;
        border: 1px solid #d0d7de;
        background: #fff;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
    }

        #cat-sort .cs-btn:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

    #cat-sort .cs-btn-primary {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
    }

    #cat-sort .cs-btn-secondary {
        background: #f8f9fa;
    }

    #cat-sort .cs-alert {
        padding: 10px 12px;
        border-radius: 8px;
        margin: 8px 0 16px;
        font-size: 14px;
    }

    #cat-sort .cs-info {
        background: #eef6ff;
        border: 1px solid #b6daff;
    }

    #cat-sort .cs-warn {
        background: #fff7e6;
        border: 1px solid #ffe1a6;
    }

    #cat-sort .cs-layout {
        display: flex;
        gap: 16px;
    }

    #cat-sort .cs-left {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    /* 4/12 */
    #cat-sort .cs-right {
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }
    /* 8/12 */
    #cat-sort .cs-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #cat-sort .cs-card {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 14px;
    }

    #cat-sort .cs-card-header {
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #cat-sort .cs-card-body {
        padding: 12px;
    }

    #cat-sort .cs-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #cat-sort .cs-item {
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin: 6px 0;
        background: #fafafa;
    }

    #cat-sort .cs-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #cat-sort .cs-draggrip {
        user-select: none;
        font-weight: 700;
        opacity: .6;
    }

    #cat-sort .cs-badge {
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    #cat-sort .cs-title {
        font-weight: 600;
    }

    #cat-sort .cs-sub {
        font-size: 12px;
        color: #6b7280;
        margin-top: 4px;
    }

    #cat-sort .cs-empty {
        padding: 8px 12px;
        font-size: 13px;
        color: #6b7280;
        background: #f8fafc;
        border: 1px dashed #e5e7eb;
        border-radius: 8px;
    }

    #cat-sort .cs-hint {
        margin-top: 8px;
        font-size: 12px;
        color: #6b7280;
    }

@media (max-width: 992px) {
    #cat-sort .cs-layout {
        flex-direction: column;
    }

    #cat-sort .cs-left, #cat-sort .cs-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    cursor: pointer;
}

    .btn-close:hover {
        opacity: .75;
    }

    .btn-close:focus {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        opacity: 1;
    }

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}