/* =========================================
   1. GENEL AYARLAR & FONT VE ARKA PLAN
   ========================================= */
@import url('blscolors.css');
@import url('blsiconlib/icons.css');

html body {
    /* Genel Arka Plan */
    background-color: var(--neutral-50) !important;
}

body,
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, textarea, label,
li, strong, b, small {
    /* Genel Font Ailesi */
    font-family: var(--font-family-base);
}

/* Introjs Kütüphanesi Font Override */
.introjs-tooltipReferenceLayer * {
    font-family: var(--font-family-base) !important;
}

/* =========================================
   2. NAVİGASYON (HEADER & SIDEBAR)
   ========================================= */
.third-menu {
    padding-left: 15px !important;
    color: var(--primary-900) !important;
}
/* Sidebar ve Header Arka Planı */
.page-sidebar,
.page-header.navbar .page-logo {
    background-color: var(--neutral-50) !important;
}

    /* Sidebar Menü Linkleri (Genel ve Kapalıyken Hover) */
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
    .page-sidebar .page-sidebar-menu > li > a {
        border-top: 0px !important;
        color: var(--primary-600) !important;
    }

/* Menü Başlıkları (title ve subtitle) */
.title, .subtitle {
    font-weight: 500;
    font-size: 16px !important;
    color: var(--primary-600) !important;
}

.subtitle {
    margin-left: 10px;
}

/* Yan Menü Öğeleri Düzeni */
.yanMenuItem {
    display: flex !important;
}

.chevron {
    margin-left: auto; /* İkonu sağa yaslar */
}

/* Menü Öğesi Görünümü ve Hover */
.nav-link {
    border-radius: 16px !important;
}

.sub-menu .nav-item {
    text-decoration: dotted;
}

.nav-item > a:hover .subtitle {
    background-color: var(--primary-50) !important;
}

.sub-menu {
    margin-left: 10px !important;
}
/* Alt Menü (Sub-menu) Active/Open/Hover Stilleri */
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a {
    background-color: var(--primary-50) !important;
}

/* Ana Menü Öğesi Açıkken (li.open) */
.page-sidebar .page-sidebar-menu > li.open > a {
    background-color: var(--primary-500) !important;
    color: white !important;
}

    /* Açık Menü Başlık ve İkon Renkleri */
    .page-sidebar .page-sidebar-menu > li.open > a .title {
        color: white !important;
    }

    .page-sidebar .page-sidebar-menu > li.open > a .chevron,
    .page-sidebar .page-sidebar-menu > li.open > a .yanMenuIcon {
        filter: brightness(0) invert(1); /* İkonu beyaz yapar */
    }

/* Bildirim Zili */
.duyuru-bell {
    color: var(--primary-600) !important;
}

/* =========================================
   3. DARK MODE TOGGLE (AÇ-KAPAT) STİLLERİ
   ========================================= */

/* Kapsayıcı ve Hizalama */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    padding: 4px 0px;
}

/* Toggle Bileşeni */
.toggle {
    position: relative;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

    .toggle input {
        display: none;
    }

    /* Slider (Arka Plan) */
    .toggle .slider {
        position: absolute;
        inset: 0;
        background: var(--neutral-200);
        border-radius: 20px !important;
        transition: 0.3s ease;
    }

        /* İkonlar */
        .toggle .slider i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            transition: .3s ease;
            color: var(--primary-600);
        }

        /* Sun İkonu (Güneş) */
        .toggle .slider .sun {
            left: 6px;
            opacity: 1;
        }

        /* Moon İkonu (Ay) */
        .toggle .slider .moon {
            right: 6px;
            opacity: 0;
        }

    /* Dark Mode Aktif Olduğunda */
    .toggle input:checked + .slider {
        background: var(--primary-500);
    }

        /* İkon Değişimi (Güneş Gizlenir, Ay Görünür) */
        .toggle input:checked + .slider .sun {
            opacity: 0;
        }

        .toggle input:checked + .slider .moon {
            opacity: 1;
            color: white;
        }

/* =========================================
   4. BUTONLAR
   ========================================= */
/* Primary Buton  pill*/
.btn-bilsoft-primary-pill {
    border-radius: 58px !important;
    text-decoration: none;
    background-color: var(--primary-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-primary-pill:hover,
    .btn-bilsoft-primary-pill:focus {
        background-color: var(--primary-600);
        color: white;
    }

/* Primary Buton */
.btn-bilsoft-primary {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--primary-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-primary:hover,
    .btn-bilsoft-primary:focus {
        background-color: var(--primary-600);
        color: white;
    }
/* Secondary Buton pill*/
.btn-bilsoft-secondary-pill {
    border-radius: 58px !important;
    text-decoration: none;
    background-color: var(--orange-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-secondary-pill:hover,
    .btn-bilsoft-secondary-pill:focus {
        background-color: var(--orange-600);
        color: white;
    }

/* Secondary Buton */
.btn-bilsoft-secondary {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--orange-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-secondary:hover,
    .btn-bilsoft-secondary:focus {
        background-color: var(--orange-600);
        color: white;
    }
/* Primary Outline Buton */
.btn-bilsoft-primary-outline-pill {
    border-radius: 58px !important;
    text-decoration: none;
    background-color: var(--primary-25);
    color: var(--primary-400);
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-primary-outline-pill:hover,
    .btn-bilsoft-primary-outline-pill:focus {
        color: var(--primary-900);
    }

/* Primary Outline Buton */
.btn-bilsoft-primary-outline {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--primary-25);
    color: var(--primary-400);
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-primary-outline:hover,
    .btn-bilsoft-primary-outline:focus {
        color: var(--primary-900);
    }
/* Secondary Outline Buton (Pill) */
.btn-bilsoft-secondary-outline-pill {
    border-radius: 58px !important;
    text-decoration: none;
    background-color: var(--orange-25);
    color: var(--orange-400);
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-secondary-outline-pill:hover,
    .btn-bilsoft-secondary-outline-pill:focus {
        color: var(--orange-900);
        background-color: var(--orange-50);
    }

/* Secondary Outline Buton (Normal) */
.btn-bilsoft-secondary-outline {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--orange-25);
    color: var(--orange-400);
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-secondary-outline:hover,
    .btn-bilsoft-secondary-outline:focus {
        color: var(--orange-900);
        background-color: var(--orange-50);
    }


.btn-bilsoft-vazgec {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--neutral-200);
    color: var(--neutral-300);
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-vazgec:hover,
    .btn-bilsoft-vazgec:focus {
        color: var(--neutral-400);
        background-color: var(--neutral-300);
    }


/* Primary Buton */
.btn-bilsoft-danger {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--error-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}

    .btn-bilsoft-danger:hover,
    .btn-bilsoft-danger:focus {
        background-color: var(--error-600);
        color: white;
    }
/* =========================================
   5. FORM ELEMANLARI (INPUT & DROPDOWN)
   ========================================= */

/* Genel Input Stili */
.blsinput {
    margin-bottom: 8px !important;
    border-radius: 6px !important;
    border: 0.5px solid var(--neutral-200) !important;
    width: 100%;
}
    .blsinput:focus {
        border: 0.5px solid var(--primary-600) !important;
        color:var(--neutral-900) !important;
    }
/* Custom Dropdown İkonu (Select Elemanı) */
.custom-select-icon {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../bilsoft-design/icons/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 30px !important;
}

    .custom-select-icon::-ms-expand {
        display: none; /* IE için */
    }

/* =========================================
   6. AÇILIR PANEL (DRAWER) STİLLERİ
   ========================================= */

/* Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 5000;
}

/* Panel */
.drawer-panel {
    position: absolute;
    right: -900px; /* Başlangıçta dışarıda */
    top: 0;
    width: 580px;
    height: 100%;
    background: var(--white);
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    padding: 24px;
    overflow-y: auto;
    transition: right .35s ease;
}

/* Header */
.drawer-header {
    display: flex;
    justify-content: space-between;
}

    .drawer-header h3 {
        font-size: 22px;
        font-weight: 600;
        color: var(--neutral-700);
    }

.drawer-close {
    border: none;
    background: none;
    font-size: 20px;
    color: var(--neutral-400);
    cursor: pointer;
}

/* Body */
.drawer-body {
    padding-right: 8px;
}

/* Footer */
.drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--neutral-200);
}

/* Footer Butonları */
.btn-cancel {
    background: var(--neutral-100);
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--neutral-300);
}

.btn-draft {
    background: var(--warning-50);
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--warning-100);
}

.btn-save {
    background: var(--primary-500);
    color: #fff;
    padding: 8px 25px;
    border-radius: 8px;
    border: none;
}

/* Açık Durum */
.drawer-open .drawer-panel {
    right: 0 !important;
}

.drawer-open {
    display: block !important;
}

/* =========================================
   7. KULLANICI AVATAR VE DURUM
   ========================================= */

/* Avatar Kapsayıcısı ve Konumlandırma */
.avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.initials-avatar {
    background-color: var(--primary-50);
    color: var(--primary-600);
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* Çevrimiçi Durum Noktası */
.online-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    background-color: #38c172;
    border: 2px solid white;
}

/* Kullanıcı Adı ve Durum Metin Kapsayıcısı */
.username-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-right: 10px;
}

.username {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.user-status-text {
    font-size: 12px;
    color: #7f96ac;
}

/* =========================================
   8. SAYFA BAŞLIKLARI VE ARAMA ÇUBUĞU
   ========================================= */

/* Breadcrumb Navigasyonu */
.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 14px !important;
    background-color: transparent !important;
}

.homeicon {
    margin-right: 5px !important;
}

/* Ana Başlık (H1) */
.top-bread {
    color: var(--primary-600, #003B95);
    font-size: var(--Heading-H1-Size, 24px);
    font-weight: var(--Heading-H1-Weight, 600);
    line-height: 32px;
    margin-bottom: 20px;
}

.sayfa-alt-baslik {
    color: var(--primary-600, #003B95);
    font-size: var(--Heading-H3-Size, 18px);
    font-weight: var(--Heading-H3-Weight, 500);
    line-height: 26px;
}

.sayfa-alt-baslik-form {
    color: var(--primary-800, #003B95);
    font-size: var(--Heading-H3-Size, 18px);
    font-weight: var(--Heading-H3-Weight, 500);
    line-height: 26px;
}
.zorunlu-alan {
    color: var(--primary-700, #02387E);
    font-size:  12px;
    font-style: normal;
    font-weight:  400;
    line-height: 18px; /* 150% */
}
/* Arama Çubuğu */
.search-bar-top {
    width: 100%;
}

.search-wrapper {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding-left: 36px !important;
    padding-right: 36px !important;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #dcdce6;
    font-size: 14px;
    color: #444;
}

    .search-input:focus {
        border-color: #8aa4d6;
        box-shadow: 0 0 0 2px rgba(75, 114, 228, 0.2);
    }

.icon-left {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    opacity: 0.6;
}

.icon-right {
    position: absolute;
    top: 50%;
    right: 12px;
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0.5;
}

    .icon-right:hover {
        opacity: 0.8;
    }

/* =========================================
   9. TABLO VE SAYFALAMA (PAGINATION)
   ========================================= */
.table-sag {
    display: flex;
    justify-content: flex-end
}

.detail-column {
    gap: 10px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
}
/* Tablo Scroll ve Alt Çizgi */
.table-scrollable {
    border-bottom: 1px solid #e7ecf1;
    border: none !important;
}

/* Tablo Alt Bölümü (Footer) */
.table-footer {
    position: relative !important;
}

/* Sayfalama Kapsayıcısı */
.paging_bootstrap_full_number {
    display: flex;
    align-items: center;
}

.sayfalamabuton {
    border-radius: 6px !important;
}

/* Veri Gösterim Bilgisi (Sol) */
.verigosterim {
    position: absolute;
    left: 15px;
    top: 0;
    display: flex;
    align-items: center;
}

/* Sayfalama Numaraları (Orta) */
.sayfalama-numara {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Diğer */
.button-group-right {
    float: right !important;
}

.dropdown-menu li {
    border-bottom: 1px solid var(--neutral-200, #E4E4E7);
}

    .dropdown-menu li a {
        color: #000 !important;
    }

.toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.top-buttons {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
}

.bottom-buttons {
    flex-wrap: wrap;
}

.gosterilecek-kayit {
    display: inline-block;
    padding: 0px 4px;
    margin: 0 4px;
    border: 1px solid #c2cad8;
    width: auto;
    height: 22px;
}


/*BADGES*/
.badge {
    font-size: 14px !important;
    font-weight: 300;
    height: 20px !important;
    color: #fff;
    padding: 2px 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    text-align: center;
    vertical-align: middle;
}

.odendi {
    color: white;
    background: var(--success-500, #12B76A) !important;
}

.odenecek {
    color: white;
    background: var(--error-500, #12B76A) !important;
}

.nakit {
    color: white;
    background: var(--success-400, #12B76A) !important;
}

.taksit {
    color: white;
    background: var(--primary-400, #12B76A) !important;
}

.acik-hesap {
    color: white;
    background: var(--neutral-400, #12B76A) !important;
}

.kredi-karti {
    color: white;
    background: var(--teal-400, #12B76A) !important;
}

.havale {
    color: white;
    background: var(--purple-400, #12B76A) !important;
}

.cek {
    color: white;
    background: var(--orange-400, #12B76A) !important;
}
.onaylandi {
    color: white;
    background: var(--success-600) !important;
}
.onay-bekliyor {
    color: white;
    background: var(--orange-600) !important;
}
.taslak {
    color: white;
    background: var(--neutral-600) !important;
}
.kuyrukta {
    color: white;
    background: var(--primary-600) !important;
}
.gibe-gonderilecek {
    color: white;
    background: var(--purple-600) !important;
}
.earsiv-iptal {
    color: white;
    background: var(--error-600) !important;
}
.hata {
    color: white;
    background: var(--error-600) !important;
}
.default {
    color: white;
    background: var(--neutral-400) !important;
}
.aktif {
    color: white;
    background: var(--success-500) !important;
}
.bakimda {
    color: white;
    background: var(--neutral-500) !important;
}
.bs-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

    .bs-icon.zoom-out {
        mask-image: url('../bilsoft-design/icons/zoom-out.svg');
    }


.alt-ayrac {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-bottom: 1px solid var(--primary-100);
    margin-bottom: 20px !important;
}

.filtrele {
    margin-left: 10px;
}

    .filtrele:hover {
        color: var(--orange-900) !important;
    }

.arainput
{
    height:54px !important;
}

.zorunlu-uyari {
    display: none; /* Boşken gizle, JS doldurunca görünür */
}

.uyari-kutu {
    color: var(--primary-700, #02387E);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px; /* Altına biraz boşluk */
}

    .uyari-kutu .yildiz {
        color: red;
        font-weight: bold;
        font-size: 14px;
    }


/* --- Değişkenler --- */
:root {
    --primary-500: #0056b3;
    --primary-25: #eef5ff;
    --primary-200: #bfdbfe;
}

.label_checkbox {
    display: flex;
}

    .label_checkbox input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        /* GÜNCELLEME: Boyut küçültüldü (24px -> 18px) */
        width: 18px;
        height: 18px;
        border: 2px solid var(--primary-200);
        background-color: var(--primary-25);
        border-radius: 4px !important; /* Radius da orantılı küçüldü */
        cursor: pointer;
        position: relative;
        transition: all 0.2s ease-in-out;
        margin: 0;
        /* GÜNCELLEME: Siyah focus çizgisini kaldır */
        outline: none;
    }

        /* Hover */
        .label_checkbox input[type="checkbox"]:hover {
            border-color: var(--primary-500);
        }

        /* GÜNCELLEME: Tıklandığında/Focus olduğunda siyah çizgi yerine hafif mavi gölge */
        .label_checkbox input[type="checkbox"]:focus {
            box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2); /* Primary rengin saydam hali */
        }

        /* Checked (Seçili) */
        .label_checkbox input[type="checkbox"]:checked {
            background-color: var(--primary-500);
            border-color: var(--primary-500);
        }

        /* Tik İşareti Ayarları */
        .label_checkbox input[type="checkbox"]::after {
            content: '';
            position: absolute;
            /* GÜNCELLEME: Tik işareti yeni boyuta göre yeniden ortalandı */
            left: 5px;
            top: 1px;
            width: 4px;
            height: 9px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(0);
            opacity: 0;
            transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
        }

        .label_checkbox input[type="checkbox"]:checked::after {
            opacity: 1;
            transform: rotate(45deg) scale(1);
        }

.page-footer {
    background: var(--white) !important;
}
/* --- MEVCUT MODAL YAPISINI BOZMADAN YAPILAN DÜZELTMELER --- */

/* 1. Header Kapsayıcısı */
.drawer-header {
    padding: 15px 20px;
    background-color: var(--white); /* Arkaplan beyaz olsun */
    display: flex;
    flex-direction: column;
}

/* 2. Üst Satır (İkonlar için Flex Yapısı) */
.drawer-header-top {
    display: flex;
    justify-content: space-between; /* Biri en sağa, biri en sola yaslanır */
    margin-bottom: 15px; /* Başlık ile arasındaki boşluk */
    width: 100%; /* Genişliğin tamamını kapla */
}

/* 3. İkon Ayarları (Eski float'ları eziyoruz) */
/* Normalde float olan classları bu header içinde resetliyoruz */
.drawer-header .modal-back,
.drawer-header .modal-close {
    float: none !important; /* Float'ı iptal et */
    margin-top: 0 !important; /* Gereksiz üst boşluğu al */
    margin-bottom: 0 !important;
    font-size: 22px;
    cursor: pointer;
    color: var(--neutral-500);
}

/* 4. Başlık Ayarları */
.drawer-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-800);
    margin: 0;
    line-height: 1.2;
    display: block; /* Alt satıra indiğinden emin olmak için */
}

/* --- DİĞER STANDART AYARLARIN (Buralar Doğru) --- */

.modal.modal-sagdan .modal-dialog {
    position: fixed;
    margin: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease-out;
}

.modal.modal-sagdan.in .modal-dialog {
    transform: translate3d(0, 0, 0);
}

.modal.modal-sagdan .modal-content {
    height: 100%;
    border-radius: 0 !important;
    border: none;
    border-left: 1px solid #ddd;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

/* Body Kısmı (Scroll edilebilir alan) */
.modal.modal-sagdan .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Sadece burası scroll olur */
    padding: 20px;
}
/* Cari Modal'ı diğerlerinin üzerine çıkar */
#cariModal {
    z-index: 10060 !important; /* Standart modal değeri 1050'dir, bunu artırıyoruz */
}

.artibuton {
    cursor: pointer;
    min-width: 40px;
    text-align: center;
    background-color: var(--orange-25);
    color: var(--orange-400);
    border:none !important;
}

.container, .container-fluid
{
    margin-bottom:15px;
}

/*Swal*/
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--primary-400);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover {
    border-radius: 6px !important;
    text-decoration: none;
    background-color: var(--primary-600);
    color: white;
    font-size: 15px;
    display: inline-flex; /* İçeriği esnek kutu modeline çevirir */
    gap: 4px; /* İkon ile yazı arasına boşluk bırakır */
}
.swal2-popup
{
    border-radius:6px !important;
}

.introjs-button {
    border:none !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    background-color: var(--primary-25) !important;
    color: var(--primary-400) !important;
    font-size: 15px !important;
    display: inline-flex !important; /* İçeriği esnek kutu modeline çevirir */
}
    .introjs-button:hover {
        color: var(--primary-900) !important;
        background-color: var(--primary-50) !important;
    }


.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--neutral-100) ;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #ffffff;
}