/* =========================
   MY RESULTS — BUTTON SYSTEM
   ========================= */

:root {
    --aitm-bg: #0F172A;
    --aitm-bg-2: #111827;
    --aitm-text: #E5E7EB;
    --aitm-muted: rgba(229,231,235,.72);
    --aitm-border: rgba(255,255,255,.14);
    --aitm-border-2: rgba(255,255,255,.10);
    --aitm-primary: #7C3AED; /* premium purple */
    --aitm-primary-2: #A78BFA;
    --aitm-danger: #EF4444;
    --aitm-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* Button base */
.mybtn {
    --_bg: transparent;
    --_fg: var(--aitm-text);
    --_bd: var(--aitm-border);
    --_shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .65rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
    box-shadow: var(--_shadow);
    user-select: none;
    white-space: nowrap;
}

    .mybtn i {
        font-size: 1.05em;
        line-height: 1;
        opacity: .95;
    }

    .mybtn:hover {
        transform: translateY(-1px);
        box-shadow: var(--aitm-shadow);
    }

    .mybtn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .mybtn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(124,58,237,.22);
    }

/* Sizes */
.mybtn-sm {
    padding: .45rem .85rem;
    font-size: .92rem;
}

.mybtn-lg {
    padding: .8rem 1.2rem;
    font-size: 1rem;
}

/* Variants */
.mybtn-ghost {
    --_bg: rgba(255,255,255,.02);
    --_bd: rgba(255,255,255,.14);
    --_fg: var(--aitm-bg);
    /* ghost əsasən light fonda işləyir */
    color: #0F172A;
    background: rgba(15,23,42,.04);
    border-color: rgba(15,23,42,.12);
}

    .mybtn-ghost:hover {
        background: rgba(15,23,42,.07);
        border-color: rgba(15,23,42,.18);
        box-shadow: 0 10px 24px rgba(15,23,42,.12);
    }

.mybtn-primary {
    --_bg: linear-gradient(135deg, var(--aitm-primary), var(--aitm-primary-2));
    --_bd: rgba(255,255,255,.12);
    --_fg: #fff;
    box-shadow: 0 10px 26px rgba(124,58,237,.26);
}

    .mybtn-primary:hover {
        box-shadow: 0 14px 34px rgba(124,58,237,.34);
    }

.mybtn-outline {
    --_bg: rgba(124,58,237,.06);
    --_bd: rgba(124,58,237,.40);
    --_fg: #2e1065;
    color: #2e1065;
}

    .mybtn-outline:hover {
        background: rgba(124,58,237,.10);
        border-color: rgba(124,58,237,.55);
        box-shadow: 0 12px 26px rgba(124,58,237,.16);
    }

.mybtn-dark {
    --_bg: linear-gradient(135deg, var(--aitm-bg), var(--aitm-bg-2));
    --_bd: rgba(255,255,255,.10);
    --_fg: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

    .mybtn-dark:hover {
        border-color: rgba(255,255,255,.16);
        box-shadow: 0 14px 34px rgba(0,0,0,.30);
    }

/* table action button (Bax) – daha "link-ish" amma premium */
.mybtn-view {
    --_bg: rgba(15,23,42,.04);
    --_bd: rgba(15,23,42,.12);
    --_fg: #0F172A;
    padding: .48rem .9rem;
    font-size: .92rem;
}

    .mybtn-view:hover {
        background: rgba(124,58,237,.08);
        border-color: rgba(124,58,237,.35);
        color: #2e1065;
        box-shadow: 0 12px 26px rgba(124,58,237,.14);
    }

/* Full width mobile card button */
.mybtn-block {
    width: 100%;
}

/* Small helper: icon-only */
.mybtn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
}

/* Optional: button group spacing on small screens */
.mybtn-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}