.kpi-action-group {
    display: inline-flex;
    gap: 0.15rem;
}
.kpi-btn {
    position: relative;
    overflow: hidden;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid;
    font-size: 1rem;
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.kpi-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,0.55), transparent 70% );
        transform: translateX(-140%);
        transition: transform 0.6s ease;
        pointer-events: none;
    }
.kpi-btn:hover {
        transform: translateY(-4px) scale(1.06);
    }
.kpi-btn:hover::before {
            transform: translateX(140%);
        }
.kpi-btn i {
        position: relative;
        z-index: 2;
        transition: transform 0.25s ease;
    }
.kpi-btn:hover i {
        transform: scale(1.12) rotate(3deg);
    }
.kpi-btn:active {
        transform: scale(0.93);
    }
.kpi-btn-info {
    color: #0284c7;
    border-color: #0284c7;
}
.kpi-btn-info:hover {
        background: linear-gradient(135deg, #0284c7, #06b6d4);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 0 1px rgba(14,165,233,0.25), 0 4px 10px rgba(14,165,233,0.25), 0 8px 18px rgba(14,165,233,0.35);
    }
.kpi-btn-warning {
    color: #f59e0b;
    border-color: #f59e0b;
}
.kpi-btn-warning:hover {
        background: linear-gradient(135deg, #f59e0b, #facc15);
        /*color: #1f2937;*/
        color:#fff;
        border-color: transparent;
        box-shadow: 0 0 0 1px rgba(245,158,11,0.25), 0 4px 10px rgba(245,158,11,0.25), 0 8px 18px rgba(245,158,11,0.35);
    }
.kpi-btn-danger {
    color: #ef4444;
    border-color: #ef4444;
}
.kpi-btn-danger:hover {
        background: linear-gradient(135deg, #ef4444, #b91c1c);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 0 1px rgba(239,68,68,0.25), 0 4px 10px rgba(239,68,68,0.25), 0 8px 18px rgba(239,68,68,0.35);
    }

.btn-filter-pro {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0.35rem;
    padding: 0.45rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    z-index: 1;
    background: linear-gradient(135deg, #2563eb, #0891b2);
    background-size: 140% 140%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.18), 0 2px 6px rgba(37,99,235,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}
.btn-filter-pro:hover {
        color: #fff;
        transform: translateY(-2px);
        background-position: right center;
        box-shadow: 0 8px 16px rgba(0,0,0,0.22), 0 4px 10px rgba(37,99,235,0.3);
    }
.btn-filter-pro:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
        color:#fff;
    }
.btn-filter-pro::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient( 120deg, transparent 40%, rgba(255,255,255,0.22), transparent 60% );
        transform: translateX(-120%);
        transition: transform 0.5s ease;
        color:#fff;
    }
.btn-filter-pro:hover::after {
        transform: translateX(120%);
        color:#fff;
    }
.btn-filter-pro i {
        transition: transform 0.2s ease;
    }
.btn-filter-pro:hover i {
        transform: scale(1.08);
        color:#fff;
    }

.btn-recalc {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    /* Ana renk */
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    border: 1.5px solid transparent;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(107,114,128,0.25), 0 8px 18px rgba(107,114,128,0.35);
}
.btn-recalc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,0.35), transparent 70% );
        transform: translateX(-130%);
        transition: transform 0.6s ease;
    }
.btn-recalc:hover::before {
        transform: translateX(130%);
    }
.btn-recalc:hover {
        transform: translateY(-2px) scale(1.03);
        /* Hover'da daha koyu premium ton */
        background: linear-gradient(135deg, #6b7280, #4b5563);
        color: #ffffff;
        box-shadow: 0 6px 14px rgba(75,85,99,0.30), 0 10px 24px rgba(75,85,99,0.42);
    }
.btn-recalc:active {
        transform: scale(0.96);
    }

.btn-add {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #ffffff;
    border: 1px solid rgba(34,197,94,.42);
    /* Metallic emerald */
    background: linear-gradient( 180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 40% ), linear-gradient( 135deg, #166534 0%, #15803d 45%, #16a34a 100% );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 5px rgba(21,128,61,.22), 0 2px 4px rgba(22,163,74,.18);
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-add::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 115deg, transparent 25%, rgba(255,255,255,.30) 48%, rgba(255,255,255,.08) 52%, transparent 75% );
        transform: translateX(-150%);
        transition: transform 0.7s ease;
    }
.btn-add:hover::before {
        transform: translateX(150%);
    }
.btn-add:hover {
        transform: translateY(-1.5px) scale(1.02);
        /* aynı ton korunuyor */
        background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,0) 42% ), linear-gradient( 135deg, #14532d 0%, #15803d 45%, #16a34a 100% );
        border-color: rgba(34,197,94,.55);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.20), 0 3px 7px rgba(34,197,94,.24), 0 2px 5px rgba(21,128,61,.20);
    }
.btn-add:active {
        transform: scale(0.96);
    }

.btn-pdf {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 45%, #f87171 100%);
    border: 1px solid #dc2626;
    color: #ffffff;
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease;
}
.btn-pdf::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, transparent, rgba(255,255,255,0.25), transparent );
        transform: translateX(-140%);
        transition: transform 0.55s ease;
    }
.btn-pdf:hover::before {
        transform: translateX(140%);
    }
.btn-pdf:hover {
        background: linear-gradient(135deg, #7f1d1d, #dc2626);
        box-shadow: 0 3px 8px rgba(239,68,68,0.25), 0 4px 10px rgba(239,68,68,0.18);
        transform: translateY(-1.5px) scale(1.02);
    }
.btn-pdf:active {
        transform: scale(0.96);
    }

.btn-edit {
    position: relative;
    overflow: hidden;
    border-radius: 0.45rem;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.12);
    /* Metallic petrol / cyan */
    background: linear-gradient( 180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 42% ), linear-gradient( 135deg, #0f766e 0%, #0891b2 100% );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 5px rgba(8,145,178,.22), 0 4px 9px rgba(15,118,110,.18);
    transition: transform .28s cubic-bezier(.25,.8,.25,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.btn-edit::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 115deg, transparent 25%, rgba(255,255,255,.30) 48%, rgba(255,255,255,.08) 52%, transparent 75% );
        transform: translateX(-150%);
        transition: transform .8s ease;
    }
.btn-edit:hover::before {
        transform: translateX(150%);
    }
.btn-edit:hover {
        transform: translateY(-3px);
        background: linear-gradient( 180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 20%, rgba(255,255,255,0) 44% ), linear-gradient( 135deg, #115e59 0%, #0e7490 100% );
        border-color: rgba(255,255,255,.15);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.20), 0 5px 11px rgba(14,116,144,.28), 0 3px 6px rgba(15,118,110,.22);
    }
.btn-edit:active {
        transform: scale(.97);
    }

.btn-read {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* INFO / CYAN-BLUE GRADIENT */
    background: linear-gradient(135deg, #164e63 0%, #0891b2 45%, #22d3ee 100%);
    border: 1px solid #0891b2;
    color: #ffffff;
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease;
}
.btn-read::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, transparent, rgba(255,255,255,0.25), transparent );
        transform: translateX(-140%);
        transition: transform 0.55s ease;
    }
.btn-read:hover::before {
        transform: translateX(140%);
    }
.btn-read:hover {
        background: linear-gradient(135deg, #0e7490, #22d3ee);
        box-shadow: 0 3px 8px rgba(34,211,238,0.30), 0 4px 10px rgba(34,211,238,0.20);
        transform: translateY(-1.5px) scale(1.02);
        color:#fff;
    }
.btn-read:active {
        transform: scale(0.96);
    }

.btn-delete {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* DENGELİ KIRMIZI GRADIENT */
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #f87171 100%);
    border: 1px solid #dc2626;
    color: #ffffff;
    transition: transform 0.2s cubic-bezier(.25,.8,.25,1), box-shadow 0.2s ease, background 0.25s ease;
}
.btn-delete::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, transparent, rgba(255,255,255,0.25), transparent );
        transform: translateX(-140%);
        transition: transform 0.5s ease;
    }
.btn-delete:hover::before {
        transform: translateX(140%);
    }
.btn-delete:hover {
        background: linear-gradient(135deg, #991b1b, #ef4444);
        box-shadow: 0 3px 8px rgba(239,68,68,0.30), 0 4px 10px rgba(239,68,68,0.20);
        transform: translateY(-1.5px) scale(1.05);
        color:#fff;
    }
.btn-delete:active {
        transform: scale(0.92);
    }
.btn-delete i {
        line-height: 1;
    }

.btn-detail {
    position: relative;
    overflow: hidden;
    border-radius: 0.45rem;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    /* Metallic coffee tone */
    background: linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22% ), linear-gradient( 135deg, #5f4636 0%, #7b5a45 45%, #8c6a52 100% );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 4px 10px rgba(95,70,54,.22), 0 8px 18px rgba(123,90,69,.18);
    transition: transform .28s cubic-bezier(.25,.8,.25,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.btn-detail::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 115deg, transparent 25%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.08) 52%, transparent 75% );
        transform: translateX(-160%);
        transition: transform .85s ease;
    }  
.btn-detail:hover::before {
        transform: translateX(160%);
    }
.btn-detail:hover {
        transform: translateY(-2px);
        background: linear-gradient( 180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 24% ), linear-gradient( 135deg, #523c2f 0%, #6e503d 45%, #7d5c46 100% );
        border-color: rgba(255,255,255,.16);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22), 0 12px 24px rgba(82,60,47,.26), 0 5px 12px rgba(110,80,61,.22);
    }
.btn-detail:active {
        transform: scale(.97);
    }

.btn-add,
.btn-edit,
.btn-read {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}

.btn-back {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: transform 0.25s cubic-bezier(.25,.8,.25,1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    /* Warm bronze / copper metallic */
    background: linear-gradient( 135deg, #92400e 0%, #d97706 45%, #f59e0b 100% );
    border: 1.5px solid rgba(255,255,255,0.08);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 10px rgba(180,83,9,0.24), 0 8px 18px rgba(146,64,14,0.30);
}
.btn-back::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,0.35), transparent 70% );
        transform: translateX(-130%);
        transition: transform 0.6s ease;
    }
.btn-back:hover::before {
        transform: translateX(130%);
    }
.btn-back:hover {
        transform: translateY(-2px) scale(1.03);
        /* Hover’da daha koyu bronz */
        background: linear-gradient( 135deg, #78350f 0%, #b45309 45%, #d97706 100% );
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(120,53,15,0.30), 0 10px 24px rgba(146,64,14,0.40);
    }
.btn-back:active {
        transform: scale(0.96);
    }

.btn-save {
    position: relative;
    overflow: hidden;
    border-radius: 0.45rem;
    padding: 0.5rem 1.15rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform .28s cubic-bezier(.25,.8,.25,1), box-shadow .28s ease, background .28s ease;
    /* Deep Blue / Trust tone */
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 10px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-save::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80% );
        transform: translateX(-140%);
        transition: transform .8s ease;
    }
.btn-save:hover::before {
        transform: translateX(140%);
    }
.btn-save:hover {
        transform: translateY(-3px);
        /* Hover’da daha derin mavi */
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        box-shadow: 0 10px 22px rgba(30,64,175,.28), 0 4px 10px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.06);
    }
.btn-save:active {
        transform: scale(.97);
    }

/*hover animasyonları*/
/*.btn-animated {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-animated::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 25%;
        height: 100%;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 100%);
        transform: skewX(-20deg);
    }
.btn-animated:hover::after {
        animation: sheen var(--speed, 2.5s) infinite;
    }
.glow:hover {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.25), 0 0 10px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) scale(1.02);
}
.glow:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
}
.reflect {
    position: relative;
}
.reflect::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 80%;
        background: inherit;
        transform: scaleY(-1);
        filter: blur(4px) opacity(0.3);
        border-radius: inherit;
        pointer-events: none;
    }
@keyframes sheen {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }*/