/* ========== PARLAMA (SHEEN) ANIMASYONU ========== */
.btn-animated {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-animated::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 100% );
        transform: skewX(-20deg);
        z-index: 1;
    }
.btn-animated:hover::after {
        animation: sheen 1.3s forwards;
    }

@keyframes sheen {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

/* ========== GLOW HOVER EFEKTİ ========== */
.btn-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glow:hover:not(:disabled) {
        transform: translateY(-2px) scale(1.03);
    }
.btn-glow:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
    }


/* ========== ANIMATIONS ========== */
.btn-animated_ {
    position: relative;
    overflow: hidden;
}
.btn-animated_::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }
.btn-animated_:hover::after {
        left: 100%;
    }


/* ========== MAIN CREATE BUTTON ========== */
.btn-create {
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    
    color: #111;
    border: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffff !important;
}

    .btn-create:hover {
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.6), 0 0 30px rgba(102, 126, 234, 0.4), 0 6px 20px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px) scale(1.02);        
    }

    .btn-create:active {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
    }

/* ========== ACTION BUTTONS - GRADIENT STYLES ========== */
.btn-action {
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
    z-index: 0;
}

    .btn-action i {
        font-size: 1.1rem;
        position: relative;
        z-index: 2;
    }

/* Info Button (View) - Cyan to Teal */
.btn-info.btn-action {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.3);
}

    .btn-info.btn-action:hover:not(:disabled) {
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.6), 0 0 25px rgba(6, 182, 212, 0.4), 0 6px 20px rgba(6, 182, 212, 0.3);
    }

/* Warning Button (Edit) - Amber to Orange */
.btn-warning.btn-action {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

    .btn-warning.btn-action:hover {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6), 0 0 25px rgba(245, 158, 11, 0.4), 0 6px 20px rgba(245, 158, 11, 0.3);
    }

/* Danger Button (Delete) - Red to Crimson */
.btn-danger.btn-action {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

    .btn-danger.btn-action:hover {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6), 0 0 25px rgba(239, 68, 68, 0.4), 0 6px 20px rgba(239, 68, 68, 0.3);
    }

/* ========== DATATABLES EXPORT BUTTONS ========== */
.dt-buttons .btn {
    margin: 4px 4px 8px 4px;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff !important;
}

/* Copy Button - Charcoal */
.dt-buttons .btn-secondary {
    background: linear-gradient(135deg, #52525b 0%, #27272a 100%);
    box-shadow: 0 4px 12px rgba(82, 82, 91, 0.3);
}

    .dt-buttons .btn-secondary:hover {
        box-shadow: 0 0 15px rgba(82, 82, 91, 0.5), 0 0 25px rgba(82, 82, 91, 0.3);
        transform: translateY(-2px) scale(1.02);
    }

/* Excel Button - Emerald */
.dt-buttons .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

    .dt-buttons .btn-success:hover {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.6), 0 0 25px rgba(16, 185, 129, 0.4);
        transform: translateY(-2px) scale(1.02);
    }

/* PDF Button - Rose */
.dt-buttons .btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

    .dt-buttons .btn-danger:hover {
        box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), 0 0 25px rgba(244, 63, 94, 0.4);
        transform: translateY(-2px) scale(1.02);
    }

/* Print Button - Sky Blue */
.dt-buttons .btn-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

    .dt-buttons .btn-info:hover {
        box-shadow: 0 0 15px rgba(14, 165, 233, 0.6), 0 0 25px rgba(14, 165, 233, 0.4);
        transform: translateY(-2px) scale(1.02);
    }

/* Columns Button - Violet */
.dt-buttons .btn-warning {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

    .dt-buttons .btn-warning:hover {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 0 0 25px rgba(139, 92, 246, 0.4);
        transform: translateY(-2px) scale(1.02);
    }

/* Sheen effect for DataTables buttons */
.dt-buttons .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 100% );
    transform: skewX(-20deg);
    z-index: 1;
}

.dt-buttons .btn:hover::after {
    animation: sheen 1.3s forwards;
}

.dt-buttons .btn:active {
    transform: translateY(0) scale(0.98);
}

/* Text white for button text and icons */
.dt-buttons .btn,
.dt-buttons .btn i,
.dt-buttons .btn span {
    color: #fff !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .btn-action {
        min-width: 36px;
        padding: 6px 10px;
    }

        .btn-action i {
            font-size: 1rem;
        }
}


/* ========== SUBMIT_ BUTTON (Premium Indigo) ========== */
.btn-submit_ {
    position: relative;
    background: linear-gradient(135deg, #00F260, #0575E6);
    border: none;
    padding: 10px 24px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(75, 46, 36, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
}

/* ICON */
.btn-submit_ i {
    color: #ffffff;
    transition: transform .25s ease, opacity .25s ease;
}

/* PREMIUM BORDER */
.btn-submit_::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(0, 242, 96, 0.8),
        rgba(5, 117, 230, 0.8)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* HOVER */
.btn-submit_:hover {
    transform: translateY(-2px);
    background: linear-gradient(
        135deg,
        #00F260 0%,
        #1ecf9f 40%,
        #0575E6 100%
    );
    box-shadow:
        0 18px 52px rgba(5, 117, 230, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.btn-submit_:hover::before {
    opacity: 1;
}

/* ICON HOVER */
.btn-submit_:hover i {
    transform: scale(1.1);
}

/* ACTIVE */
.btn-submit_:active {
    transform: scale(0.97);
    box-shadow: 0 12px 32px rgba(5, 117, 230, 0.4);
}
/* ========== SUBMIT_ BUTTON (Create purple) ========== */
.btn-submit {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 10px 24px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
}

    /* ICON */
    .btn-submit i {
        color: #ffffff;
        transition: transform .25s ease, opacity .25s ease;
    }

    /* PREMIUM BORDER */
    .btn-submit::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9) );
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 1;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
    }

    /* HOVER */
    .btn-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient( 135deg, #7f8cff 0%, #8b5fd6 45%, #764ba2 100% );
        box-shadow: 0 20px 55px rgba(118, 75, 162, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }

        .btn-submit:hover::before {
            opacity: 1;
        }

        /* ICON HOVER */
        .btn-submit:hover i {
            transform: scale(1.12);
        }

    /* ACTIVE */
    .btn-submit:active {
        transform: scale(0.96);
        box-shadow: 0 12px 30px rgba(118, 75, 162, 0.4);
    }
/* ========== delete BUTTON ( red) ========== */
.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(185, 28, 28, 0.35);
    transition: all 0.25s ease;
}

    /* ICON */
    .btn-delete i {
        font-size: 0.9rem;
        transition: transform 0.25s ease;
    }

    /* HOVER */
    .btn-delete:hover {
        background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(127, 29, 29, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    }

    /* ACTIVE */
    .btn-delete:active {
        transform: scale(0.95);
        box-shadow: 0 8px 20px rgba(127, 29, 29, 0.4);
    }

    /* DISABLED (opsiyonel ama önerilir) */
    .btn-delete:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

}
/* ========== BACK BUTTON (Premium Navy) ========== */

.btn-back-pro {
    position: relative;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #000428, #004e92);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 78, 146, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
}

/* ICON + TEXT */
.btn-back-pro i,
.btn-back-pro span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* PREMIUM BORDER (gerçek border gibi) */
.btn-back-pro::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(0, 78, 146, 0.95),
        rgba(0, 4, 40, 0.95)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* HOVER — btn-submit ile aynı mantık */
.btn-back-pro:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #000428 0%, #003a7a 40%, #004e92 100%);
    filter: brightness(1.05) contrast(1.05);
    box-shadow:
        0 18px 52px rgba(0, 78, 146, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn-back-pro:hover::before {
    opacity: 1;
}

.btn-back-pro:hover i {
    transform: translateX(-4px) scale(1.05);
}

/* ACTIVE */
.btn-back-pro:active {
    transform: scale(0.97);
    box-shadow: 0 12px 32px rgba(0, 78, 146, 0.45);
}



/* ========== PREVIEW BUTTON (Premium Pink) ========== */

.btn-preview {
    position: relative;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #b24592, #f15f79);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(178, 69, 146, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
}

/* ICON */
.btn-preview i {
    color: #ffffff;
    transition: transform .25s ease, opacity .25s ease;
}

/* PREMIUM BORDER */
.btn-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(178, 69, 146, 0.9),
        rgba(241, 95, 121, 0.9)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* HOVER */
.btn-preview:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #b24592 0%, #e06286 45%, #f15f79 100%);
    filter: brightness(1.04) contrast(1.05);
    box-shadow:
        0 18px 52px rgba(178, 69, 146, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.btn-preview:hover::before {
    opacity: 1;
}

/* ICON HOVER */
.btn-preview:hover i {
    transform: scale(1.1);
}

/* ACTIVE */
.btn-preview:active {
    transform: scale(0.97);
    box-shadow: 0 12px 32px rgba(178, 69, 146, 0.35);
}


/* ========== VIEW LIVE BUTTON (Premium Emerald) ========== */
.btn-view-live {
    position: relative;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff512f, #f09819);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(245, 152, 25, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    /* ICON */
    .btn-view-live i {
        color: #ffffff;
        transition: transform .25s ease, opacity .25s ease;
    }

    /* PREMIUM BORDER (btn-submit tarzı) */
    .btn-view-live::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient( 135deg, rgba(255, 81, 47, 0.9), rgba(240, 152, 25, 0.9) );
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: -1;
    }

    /* HOVER */
    .btn-view-live:hover {
        transform: translateY(-2px);
        background: linear-gradient( 135deg, #f09819 0%, #ff7a3c 45%, #ff512f 100% );
        filter: brightness(1.05) contrast(1.05);
        box-shadow: 0 18px 52px rgba(255, 81, 47, 0.45);
    }

        .btn-view-live:hover::before {
            opacity: 1;
        }

        .btn-view-live:hover i {
            transform: translateX(4px) scale(1.05);
        }

    /* ACTIVE */
    .btn-view-live:active {
        transform: scale(0.97);
        box-shadow: 0 12px 32px rgba(255, 81, 47, 0.35);
    }

/* ========== STATISTICS LIVE BUTTON (Premium Purple) ========== */
.btn-statistic {
    position: relative;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #42275a, #734b6d);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(66, 39, 90, 0.35);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    /* ICON */
    .btn-statistic i {
        color: #ffffff;
        transition: transform .25s ease, opacity .25s ease;
    }

    /* PREMIUM BORDER */
    .btn-statistic::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient( 135deg, rgba(115, 75, 109, 0.9), rgba(66, 39, 90, 0.9) );
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: -1;
    }

    /* HOVER */
    .btn-statistic:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #2f1a42, #5b3558);
        filter: brightness(1.02) contrast(1.05);
        box-shadow: 0 6px 18px rgba(47, 26, 66, 0.5);
    }

        .btn-statistic:hover::before {
            opacity: 1;
        }

        .btn-statistic:hover i {
            transform: translateX(4px) scale(1.05);
        }

    /* ACTIVE */
    .btn-statistic:active {
        transform: scale(0.97);
        box-shadow: 0 10px 26px rgba(47, 26, 66, 0.4);
    }


/* ========== UPLOAD BUTTON (Premium Mint) ========== */
.btn-upload-files {
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 55%, #059669 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.18);
    transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease, filter .25s ease;
    color: #fff;
}

    .btn-upload-files:hover {
        transform: translateY(-2px);
        background-position: right center;
        box-shadow: 0 16px 45px rgba(52, 211, 153, 0.22);
        filter: brightness(1.03) contrast(1.03);
    }

    .btn-upload-files:disabled {
        background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
        box-shadow: none;
        transform: none;
        filter: none;
    }

/* ========== SHADOW (Premium neutral) ========== */
.bx-shdw {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}