/* ===========================================
   BA.UI - Button
   =========================================== */

/* ------------------------------------------
   CSS Variables
------------------------------------------ */

:root {
    --ba-btn-height       : 36px;
    --ba-btn-radius       : var(--ba-control-radius, 999px);
    --ba-btn-font-size    : 14px;
    --ba-btn-font-weight  : 600;
    --ba-btn-padding-x    : 20px;
    --ba-btn-transition   : background .18s ease,
                            color .18s ease,
                            border-color .18s ease,
                            opacity .18s ease;
}

/* ------------------------------------------
   Base
------------------------------------------ */

.ba-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    height          : var(--ba-btn-height);
    padding         : 0 var(--ba-btn-padding-x);
    border          : 2px solid transparent;
    border-radius   : var(--ba-btn-radius);
    font-size       : var(--ba-btn-font-size);
    font-weight     : var(--ba-btn-font-weight);
    line-height     : 1;
    white-space     : nowrap;
    cursor          : pointer;
    text-decoration : none;
    transition      : var(--ba-btn-transition);
    user-select     : none;
}

.ba-btn:focus-visible {
    outline        : 2px solid var(--ba-primary, #304FFE);
    outline-offset : 3px;
}

.ba-btn:disabled,
.ba-btn.is-disabled {
    opacity        : .45;
    cursor         : not-allowed;
    pointer-events : none;
}

.ba-btn.is-loading {
    opacity        : .75;
    pointer-events : none;
    cursor         : wait;
}

/* ------------------------------------------
   Sizes
------------------------------------------ */

.ba-btn--lg {
    height     : 48px;
    font-size  : 15px;
    padding    : 0 24px;
}

/* ------------------------------------------
   Variants — Filled
------------------------------------------ */

/* Primary */
.ba-btn--primary {
    background : var(--ba-primary, #304FFE);
    color      : #fff;
}

.ba-btn--primary:hover {
    background : #1a3be0;
}

/* Dark */
.ba-btn--dark {
    background : #1A1A1A;
    color      : #fff;
}

.ba-btn--dark:hover {
    background : #333;
}

/* Danger */
.ba-btn--danger {
    background : #E53935;
    color      : #fff;
}

.ba-btn--danger:hover {
    background : #c62828;
}

/* Success */
.ba-btn--success {
    background : #2E7D32;
    color      : #fff;
}

.ba-btn--success:hover {
    background : #1b5e20;
}

/* ------------------------------------------
   Variants — Outlined
------------------------------------------ */

/* Outlined Primary */
.ba-btn--outlined {
    background   : transparent;
    border-color : var(--ba-primary, #304FFE);
    color        : var(--ba-primary, #304FFE);
}

.ba-btn--outlined:hover {
    background : rgba(48, 79, 254, .06);
}

/* Outlined Dark */
.ba-btn--outlined-dark {
    background   : transparent;
    border-color : #1A1A1A;
    color        : #1A1A1A;
}

.ba-btn--outlined-dark:hover {
    background : #F5F6F8;
}

/* Outlined Danger */
.ba-btn--outlined-danger {
    background   : transparent;
    border-color : #E53935;
    color        : #E53935;
}

.ba-btn--outlined-danger:hover {
    background : rgba(229, 57, 53, .06);
}

/* ------------------------------------------
   Variants — Ghost (border yok)
------------------------------------------ */

.ba-btn--ghost {
    background : transparent;
    color      : #3C4043;
}

.ba-btn--ghost:hover {
    background : #F5F6F8;
}

.ba-btn--ghost-primary {
    background : transparent;
    color      : var(--ba-primary, #304FFE);
}

.ba-btn--ghost-primary:hover {
    background : rgba(48, 79, 254, .06);
}

/* ------------------------------------------
   Sizes
------------------------------------------ */

/* Small */
.ba-btn--sm {
    height     : 36px;
    padding    : 0 16px;
    font-size  : 13px;
}

/* Large */
.ba-btn--lg {
    height     : 56px;
    padding    : 0 32px;
    font-size  : 17px;
}

/* Full width */
.ba-btn--block {
    width : 100%;
}

/* ------------------------------------------
   Icon Button (ba-icon-button)
------------------------------------------ */

.ba-icon-button {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : var(--ba-btn-height);
    height          : var(--ba-btn-height);
    border          : 0;
    border-radius   : 50%;
    background      : transparent;
    color           : #3C4043;
    cursor          : pointer;
    flex-shrink     : 0;
    position        : relative;
    transition      : var(--ba-btn-transition);
}

.ba-icon-button:hover {
    background : #F5F6F8;
    color      : var(--ba-primary, #304FFE);
}

.ba-icon-button:focus-visible {
    outline        : 2px solid var(--ba-primary, #304FFE);
    outline-offset : 2px;
}

.ba-icon-button.is-active {
    background : #F5F6F8;
    color      : var(--ba-primary, #304FFE);
}

.ba-icon-button:disabled,
.ba-icon-button.is-disabled {
    opacity        : .4;
    cursor         : not-allowed;
    pointer-events : none;
}

/* İkon boyutu */
.ba-icon-button .ba-icon {
    width          : 22px;
    height         : 22px;
    pointer-events : none;
}

/* Modifier — sm */
.ba-icon-button--sm {
    width  : 36px;
    height : 36px;
}

.ba-icon-button--sm .ba-icon {
    width  : 18px;
    height : 18px;
}

/* Modifier — lg */
.ba-icon-button--lg {
    width  : 56px;
    height : 56px;
}

.ba-icon-button--lg .ba-icon {
    width  : 26px;
    height : 26px;
}

/* Modifier — filled */
.ba-icon-button--filled {
    background : #F5F6F8;
}

.ba-icon-button--filled:hover {
    background : #EAECF0;
}

/* Modifier — primary */
.ba-icon-button--primary {
    background : var(--ba-primary, #304FFE);
    color      : #fff;
}

.ba-icon-button--primary:hover {
    background : #1a3be0;
    color      : #fff;
}

/* Badge */
.ba-icon-button__badge {
    position      : absolute;
    top           : 6px;
    right         : 6px;
    min-width     : 16px;
    height        : 16px;
    padding       : 0 4px;
    border-radius : 999px;
    background    : #E53935;
    color         : #fff;
    font-size     : 10px;
    font-weight   : 700;
    line-height   : 16px;
    text-align    : center;
    pointer-events: none;
}

/* ------------------------------------------
   Responsive
------------------------------------------ */

@media (max-width: 992px) {

    .ba-btn {
        height    : 44px;
        font-size : 14px;
    }

    .ba-icon-button {
        width  : 40px;
        height : 40px;
    }
}



/* ===========================================
   BA.UI - Button — Legacy Aliases
   AcenteV2 eski sınıflarını yeni sisteme köprüler.
   Yeni ekranlarda doğrudan ba-btn--* kullanın.
   =========================================== */

/* ba-btn-red-ara → ba-btn--danger (büyük, "Ara" butonu) */
.ba-btn-red-ara {
    background : #E53935;
    color      : #fff;
    min-width  : 100px;
}
.ba-btn-red-ara:hover {
    background : #c62828;
    color      : #fff;
}

/* ba-btn-red → ba-btn--danger */
.ba-btn-red {
    background : #E53935;
    color      : #fff;
}
.ba-btn-red:hover {
    background : #c62828;
    color      : #fff;
}

/* ba-btn-dark → ba-btn--dark */
.ba-btn-dark {
    background : #1A1A1A;
    color      : #fff;
}
.ba-btn-dark:hover {
    background : #333;
    color      : #fff;
}

/* ba-btn-dark-blue → ba-btn--primary */
.ba-btn-dark-blue {
    background : var(--ba-primary, #304FFE);
    color      : #fff;
}
.ba-btn-dark-blue:hover {
    background : #1a3be0;
    color      : #fff;
}

/* ba-btn-unfilled → ba-btn--ghost */
.ba-btn-unfilled {
    background   : transparent;
    border-color : transparent;
    color        : #3C4043;
}
.ba-btn-unfilled:hover {
    background : #F5F6F8;
}

/* ba-btn-unfilled-dark → ba-btn--outlined-dark */
.ba-btn-unfilled-dark {
    background   : transparent;
    border       : 2px solid #1A1A1A;
    color        : #1A1A1A;
}
.ba-btn-unfilled-dark:hover,
.ba-btn-unfilled-dark.active {
    background : #1A1A1A;
    color      : #fff;
}
/* active durumunda iç form elemanları */
.ba-btn-unfilled-dark.active .ba-form-group .form-control,
.ba-btn-unfilled-dark.active .ba-form-group i {
    color : #fff;
}

/* ba-btn-disable → disabled state */
.ba-btn-disable {
    opacity        : .45;
    cursor         : not-allowed;
    pointer-events : none;
    background     : #9E9E9E;
    color          : #fff;
    border-color   : transparent;
}