/**
 * AYS - Aday Yönetim Sistemi
 *
 * Dosya:
 * assets/css/ays.css
 *
 * Açıklama:
 * AYS ana tasarım sistemi.
 *
 * Tasarım yaklaşımı:
 * - Koyu fakat boğucu olmayan arayüz
 * - Düşük kontrastlı geniş yüzeyler
 * - Kontrollü vurgu renkleri
 * - Operasyon yazılımı hissi
 * - Gereksiz gradient / glow kullanılmaz
 * - Bootstrap üzerine inşa edilir
 */


/* ==========================================================================
   1. TASARIM DEĞİŞKENLERİ
   ========================================================================== */

:root {
    /* =========================================================
       YILMAZLAR KURUMSAL PALET
       Logo ana rengi: #75231D
       ========================================================= */

    --ays-bg: #15181c;
    --ays-bg-soft: #1b1f24;
    --ays-bg-elevated: #272c33;

    --ays-surface: #23282f;
    --ays-surface-hover: #2b3037;
    --ays-surface-active: #343a42;
    --ays-input-bg: #191c21;

    --ays-border: #41474f;
    --ays-border-soft: #353a42;
    --ays-border-strong: #5a626c;

    --ays-text: #ffffff;
    --ays-text-soft: #edf0f3;
    --ays-text-muted: #c6cbd1;
    --ays-text-faint: #a9b0b8;

    --ays-primary: #a23a31;
    --ays-primary-hover: #bd4a40;
    --ays-primary-active: #75231d;
    --ays-primary-soft: rgba(155, 52, 43, 0.20);
    --ays-primary-border: rgba(185, 67, 56, 0.48);

    --ays-success: #54b982;
    --ays-success-soft: rgba(84, 185, 130, 0.15);
    --ays-warning: #e1ad57;
    --ays-warning-soft: rgba(225, 173, 87, 0.16);
    --ays-danger: #e26970;
    --ays-danger-soft: rgba(226, 105, 112, 0.16);
    --ays-info: #67aeca;
    --ays-info-soft: rgba(103, 174, 202, 0.16);
    --ays-purple: #a78bc5;
    --ays-purple-soft: rgba(167, 139, 197, 0.16);

    --ays-sidebar-width: 252px;
    --ays-sidebar-collapsed-width: 0px;
    --ays-topbar-height: 62px;

    --ays-radius-xs: 4px;
    --ays-radius-sm: 6px;
    --ays-radius: 8px;
    --ays-radius-lg: 10px;

    --ays-shadow-sm: 0 2px 7px rgba(0,0,0,.24);
    --ays-shadow: 0 10px 28px rgba(0,0,0,.28);
    --ays-transition: 160ms ease;

    --ays-font:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ==========================================================================
   2. TEMEL
   ========================================================================== */

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;

    background:
        var(--ays-bg);

    color:
        var(--ays-text);

    font-family:
        var(--ays-font);

    font-size:
        14px;

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing:
        border-box;
}

::selection {
    background:
        rgba(185,67,56,.35);

    color:
        #ffffff;
}

a {
    color:
        var(--ays-primary);

    text-decoration:
        none;

    transition:
        color var(--ays-transition);
}

a:hover {
    color:
        var(--ays-primary-hover);
}


/* ==========================================================================
   3. SCROLLBAR
   ========================================================================== */

* {
    scrollbar-width:
        thin;

    scrollbar-color:
        #4a535d
        transparent;
}

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}

::-webkit-scrollbar-track {
    background:
        transparent;
}

::-webkit-scrollbar-thumb {
    background:
        var(--ays-border);

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--ays-border-strong);
}


/* ==========================================================================
   4. GENEL SAYFA YAPISI
   ========================================================================== */

.ays-app {
    min-height:
        100%;
}

.ays-main {
    min-height:
        100%;

    margin-left:
        var(--ays-sidebar-width);

    transition:
        margin-left var(--ays-transition);
}

.ays-content {
    padding:
        22px 24px 36px;
}

.ays-container {
    width:
        100%;

    max-width:
        1700px;

    margin:
        0 auto;
}


/* ==========================================================================
   5. SIDEBAR
   ========================================================================== */

.ays-sidebar {
    position:
        fixed;

    top:
        0;

    left:
        0;

    bottom:
        0;

    z-index:
        1030;

    width:
        var(--ays-sidebar-width);

    display:
        flex;

    flex-direction:
        column;

    background:
        #121418;

    border-right:
        1px solid var(--ays-border-soft);
}

.ays-sidebar-header {
    min-height:
        var(--ays-topbar-height);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 18px;

    border-bottom:
        1px solid var(--ays-border-soft);
}

.ays-logo {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--ays-text);

    font-weight:
        650;

    letter-spacing:
        0.01em;
}

.ays-logo-mark {
    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--ays-border);

    border-radius:
        7px;

    background:
        var(--ays-surface);

    color:
        var(--ays-primary);

    font-size:
        15px;
}

.ays-logo-title {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.2;
}

.ays-logo-title strong {
    font-size:
        15px;

    font-weight:
        650;
}

.ays-logo-title span {
    margin-top:
        2px;

    color:
        var(--ays-text-muted);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.05em;
}

.ays-sidebar-body {
    flex:
        1;

    overflow-y:
        auto;

    padding:
        12px 10px;
}

.ays-menu-title {
    padding:
        14px 10px 7px;

    color:
        var(--ays-text-muted);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;
}

.ays-menu {
    list-style:
        none;

    margin:
        0;

    padding:
        0;
}

.ays-menu-item {
    margin-bottom:
        2px;
}

.ays-menu-link {
    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        8px 11px;

    border:
        1px solid transparent;

    border-radius:
        var(--ays-radius-sm);

    color:
        var(--ays-text-muted);

    transition:
        background var(--ays-transition),
        border-color var(--ays-transition),
        color var(--ays-transition);
}

.ays-menu-link i {
    width:
        20px;

    flex:
        0 0 20px;

    text-align:
        center;

    color:
        var(--ays-text-faint);

    font-size:
        14px;
}

.ays-menu-link:hover {
    background:
        var(--ays-bg-soft);

    color:
        var(--ays-text-soft);
}

.ays-menu-link:hover i {
    color:
        var(--ays-text-muted);
}

.ays-menu-link.active {
    background:
        var(--ays-surface);

    border-color:
        var(--ays-surface-hover);

    color:
        var(--ays-text);
}

.ays-menu-link.active i {
    color:
        var(--ays-primary);
}

.ays-menu-badge {
    margin-left:
        auto;

    min-width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 6px;

    border-radius:
        999px;

    background:
        var(--ays-surface-hover);

    color:
        var(--ays-text-soft);

    font-size:
        10px;

    font-weight:
        600;
}

.ays-sidebar-footer {
    padding:
        12px;

    border-top:
        1px solid var(--ays-border-soft);
}


/* ==========================================================================
   6. TOPBAR
   ========================================================================== */

.ays-topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        1020;

    height:
        var(--ays-topbar-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        0 22px;

    background:
        rgba(23,25,29,.97);

    backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid var(--ays-border-soft);
}

.ays-topbar-left,
.ays-topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.ays-topbar-title {
    color:
        var(--ays-text);

    font-size:
        15px;

    font-weight:
        600;
}

.ays-topbar-subtitle {
    color:
        var(--ays-text-muted);

    font-size:
        12px;
}


/* ==========================================================================
   7. SAYFA BAŞLIĞI
   ========================================================================== */

.ays-page-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        20px;
}

.ays-page-title {
    margin:
        0;

    color:
        var(--ays-text);

    font-size:
        22px;

    line-height:
        1.25;

    font-weight:
        620;

    letter-spacing:
        -0.02em;
}

.ays-page-description {
    max-width:
        760px;

    margin-top:
        5px;

    color:
        var(--ays-text-muted);

    font-size:
        13px;
}


/* ==========================================================================
   8. KART
   ========================================================================== */

.ays-card,
.card {
    background:
        var(--ays-surface);

    border:
        1px solid var(--ays-border-soft);

    border-radius:
        var(--ays-radius);

    box-shadow:
        var(--ays-shadow-sm);

    color:
        var(--ays-text);
}

.ays-card-header,
.card-header {
    padding:
        14px 16px;

    background:
        transparent;

    border-bottom:
        1px solid var(--ays-border-soft);

    color:
        var(--ays-text);
}

.ays-card-title {
    margin:
        0;

    font-size:
        14px;

    font-weight:
        620;
}

.ays-card-subtitle {
    margin-top:
        3px;

    color:
        var(--ays-text-muted);

    font-size:
        12px;
}

.ays-card-body,
.card-body {
    padding:
        16px;
}

.ays-card-footer,
.card-footer {
    padding:
        12px 16px;

    background:
        transparent;

    border-top:
        1px solid var(--ays-border-soft);
}


/* ==========================================================================
   9. METRİK KARTLARI
   ========================================================================== */

.ays-stat {
    height:
        100%;

    padding:
        16px;

    background:
        var(--ays-surface);

    border:
        1px solid var(--ays-border-soft);

    border-radius:
        var(--ays-radius);
}

.ays-stat-label {
    margin-bottom:
        8px;

    color:
        var(--ays-text-muted);

    font-size:
        11px;

    font-weight:
        650;

    text-transform:
        uppercase;

    letter-spacing:
        0.055em;
}

.ays-stat-value {
    color:
        var(--ays-text);

    font-size:
        26px;

    font-weight:
        620;

    letter-spacing:
        -0.025em;

    line-height:
        1;
}

.ays-stat-note {
    margin-top:
        8px;

    color:
        var(--ays-text-muted);

    font-size:
        12px;
}


/* ==========================================================================
   10. FORM
   ========================================================================== */

.form-label {
    margin-bottom:
        6px;

    color:
        var(--ays-text-soft);

    font-size:
        12px;

    font-weight:
        600;
}

.form-control,
.form-select {
    min-height:
        40px;

    background-color:
        var(--ays-input-bg);

    border:
        1px solid var(--ays-border);

    border-radius:
        var(--ays-radius-sm);

    color:
        var(--ays-text);

    font-size:
        13px;

    transition:
        border-color var(--ays-transition),
        background var(--ays-transition),
        box-shadow var(--ays-transition);
}

.form-control:hover,
.form-select:hover {
    border-color:
        var(--ays-border-strong);
}

.form-control:focus,
.form-select:focus {
    background-color:
        var(--ays-surface-hover);

    border-color:
        var(--ays-primary);

    color:
        #ffffff;

    box-shadow:
        0 0 0 3px var(--ays-primary-soft);
}

.form-control::placeholder {
    color:
        var(--ays-text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background:
        var(--ays-bg-soft);

    color:
        var(--ays-text-muted);

    opacity:
        1;
}

.form-text {
    color:
        var(--ays-text-muted);
}

.form-check-input {
    background-color:
        var(--ays-input-bg);

    border-color:
        var(--ays-border);
}

.form-check-input:checked {
    background-color:
        var(--ays-primary);

    border-color:
        var(--ays-primary);
}

.input-group-text {
    background:
        var(--ays-surface);

    border-color:
        var(--ays-border);

    color:
        var(--ays-text-muted);
}


/* ==========================================================================
   11. BUTONLAR
   ========================================================================== */

.btn {
    min-height:
        38px;

    border-radius:
        var(--ays-radius-sm);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        background var(--ays-transition),
        border-color var(--ays-transition),
        color var(--ays-transition);
}

.btn-primary {
    background:
        var(--ays-primary);

    border-color:
        var(--ays-primary);

    color:
        #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background:
        var(--ays-primary-hover);

    border-color:
        var(--ays-primary-hover);
}

.btn-secondary {
    background:
        var(--ays-surface-hover);

    border-color:
        var(--ays-border);

    color:
        var(--ays-text-soft);
}

.btn-secondary:hover {
    background:
        var(--ays-surface-hover);

    border-color:
        var(--ays-border-strong);

    color:
        #ffffff;
}

.btn-outline-secondary {
    border-color:
        #62707d;

    color:
        #d4dae0;
}

.btn-outline-secondary:hover {
    background:
        var(--ays-surface-hover);

    border-color:
        #687786;

    color:
        #ffffff;
}

.btn-danger {
    background:
        #9f5d60;

    border-color:
        #9f5d60;
}

.btn-danger:hover {
    background:
        #ad6669;

    border-color:
        #ad6669;
}

.btn-success {
    background:
        #55896b;

    border-color:
        #55896b;
}

.btn-success:hover {
    background:
        #609776;

    border-color:
        #609776;
}

.btn-icon {
    width:
        38px;

    min-width:
        38px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ==========================================================================
   12. TABLO
   ========================================================================== */

.table {
    --bs-table-bg:
        transparent;

    --bs-table-color:
        var(--ays-text-soft);

    --bs-table-border-color:
        var(--ays-border-soft);

    margin-bottom:
        0;

    color:
        var(--ays-text-soft);

    font-size:
        13px;
}

.table > :not(caption) > * > * {
    padding:
        11px 12px;

    background:
        transparent;

    border-bottom-color:
        var(--ays-border-soft);
}

.table thead th {
    background:
        #252b31;

    color:
        #9099a3;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.055em;

    border-bottom:
        1px solid var(--ays-border);
}

.table tbody tr {
    transition:
        background var(--ays-transition);
}

.table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.018);
}

.ays-table-wrap {
    overflow-x:
        auto;

    border:
        1px solid var(--ays-border-soft);

    border-radius:
        var(--ays-radius);
}


/* ==========================================================================
   13. BADGE / DURUM
   ========================================================================== */

.ays-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        4px 8px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;

    white-space:
        nowrap;
}

.ays-badge-primary {
    background:
        var(--ays-primary-soft);

    border-color:
        rgba(94, 143, 181, 0.25);

    color:
        #8bb4d2;
}

.ays-badge-success {
    background:
        var(--ays-success-soft);

    border-color:
        rgba(104, 167, 131, 0.25);

    color:
        #8dc3a2;
}

.ays-badge-warning {
    background:
        var(--ays-warning-soft);

    border-color:
        rgba(196, 154, 90, 0.27);

    color:
        #d7b77d;
}

.ays-badge-danger {
    background:
        var(--ays-danger-soft);

    border-color:
        rgba(189, 111, 114, 0.27);

    color:
        #d49395;
}

.ays-badge-muted {
    background:
        #30373e;

    border-color:
        #3b444c;

    color:
        #9ca5ae;
}


/* ==========================================================================
   14. PERSONEL / ÇAĞRI DURUMLARI
   ========================================================================== */

.ays-status-dot {
    width:
        8px;

    height:
        8px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        var(--ays-text-muted);
}

.ays-status-online {
    background:
        var(--ays-success);
}

.ays-status-call {
    background:
        var(--ays-danger);
}

.ays-status-busy {
    background:
        var(--ays-warning);
}

.ays-status-silent {
    background:
        var(--ays-purple);
}

.ays-status-offline {
    background:
        #66717b;
}


/* ==========================================================================
   15. AVATAR
   ========================================================================== */

.ays-avatar {
    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 36px;

    overflow:
        hidden;

    background:
        #36404a;

    border:
        1px solid #434e58;

    border-radius:
        50%;

    color:
        #ccd2d8;

    font-size:
        12px;

    font-weight:
        650;
}

.ays-avatar-sm {
    width:
        30px;

    height:
        30px;

    flex-basis:
        30px;

    font-size:
        10px;
}

.ays-avatar-lg {
    width:
        48px;

    height:
        48px;

    flex-basis:
        48px;

    font-size:
        15px;
}


/* ==========================================================================
   16. DROPDOWN
   ========================================================================== */

.dropdown-menu {
    padding:
        6px;

    background:
        #292f35;

    border:
        1px solid var(--ays-border);

    border-radius:
        var(--ays-radius);

    box-shadow:
        var(--ays-shadow);
}

.dropdown-item {
    padding:
        8px 10px;

    border-radius:
        var(--ays-radius-xs);

    color:
        #bbc1c7;

    font-size:
        13px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background:
        var(--ays-surface-hover);

    color:
        #ffffff;
}

.dropdown-divider {
    border-color:
        var(--ays-border-soft);
}


/* ==========================================================================
   17. MODAL
   ========================================================================== */

.modal-content {
    background:
        #292f35;

    border:
        1px solid #414a53;

    border-radius:
        var(--ays-radius-lg);

    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.25);

    color:
        var(--ays-text);
}

.modal-header {
    border-bottom:
        1px solid var(--ays-border-soft);
}

.modal-footer {
    border-top:
        1px solid var(--ays-border-soft);
}

.btn-close {
    filter:
        invert(1);

    opacity:
        0.55;
}


/* ==========================================================================
   18. ALERT
   ========================================================================== */

.alert {
    border-radius:
        var(--ays-radius);

    font-size:
        13px;
}

.alert-primary {
    background:
        var(--ays-primary-soft);

    border-color:
        rgba(94, 143, 181, 0.25);

    color:
        #aec8dc;
}

.alert-success {
    background:
        var(--ays-success-soft);

    border-color:
        rgba(104, 167, 131, 0.25);

    color:
        #abd1b9;
}

.alert-warning {
    background:
        var(--ays-warning-soft);

    border-color:
        rgba(196, 154, 90, 0.25);

    color:
        #dfc28e;
}

.alert-danger {
    background:
        var(--ays-danger-soft);

    border-color:
        rgba(189, 111, 114, 0.25);

    color:
        #dea2a4;
}


/* ==========================================================================
   19. SWEETALERT2 UYUMLULUK
   ========================================================================== */

.swal2-popup {
    background:
        #292f35 !important;

    border:
        1px solid #424b54;

    border-radius:
        10px !important;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.28) !important;

    color:
        var(--ays-text) !important;
}

.swal2-title {
    color:
        var(--ays-text) !important;

    font-size:
        20px !important;

    font-weight:
        620 !important;
}

.swal2-html-container {
    color:
        var(--ays-text-soft) !important;

    font-size:
        13px !important;
}

.swal2-confirm {
    background:
        #507fa3 !important;

    border-radius:
        6px !important;

    box-shadow:
        none !important;
}

.swal2-cancel {
    background:
        #3b434b !important;

    border-radius:
        6px !important;

    box-shadow:
        none !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    background:
        var(--ays-bg-soft) !important;

    border:
        1px solid var(--ays-border) !important;

    color:
        var(--ays-text) !important;

    box-shadow:
        none !important;
}


/* ==========================================================================
   20. TIMELINE
   ========================================================================== */

.ays-timeline {
    position:
        relative;

    padding-left:
        24px;
}

.ays-timeline::before {
    content:
        "";

    position:
        absolute;

    top:
        7px;

    bottom:
        7px;

    left:
        7px;

    width:
        1px;

    background:
        var(--ays-border);
}

.ays-timeline-item {
    position:
        relative;

    padding:
        0 0 18px 8px;
}

.ays-timeline-dot {
    position:
        absolute;

    top:
        5px;

    left:
        -21px;

    width:
        8px;

    height:
        8px;

    border:
        2px solid var(--ays-surface);

    border-radius:
        50%;

    background:
        var(--ays-primary);
}

.ays-timeline-time {
    margin-bottom:
        3px;

    color:
        var(--ays-text-faint);

    font-size:
        11px;
}

.ays-timeline-content {
    color:
        var(--ays-text-soft);

    font-size:
        13px;
}


/* ==========================================================================
   21. BOŞ DURUM
   ========================================================================== */

.ays-empty {
    padding:
        42px 20px;

    text-align:
        center;
}

.ays-empty-icon {
    margin-bottom:
        12px;

    color:
        #65707a;

    font-size:
        30px;
}

.ays-empty-title {
    color:
        var(--ays-text-soft);

    font-size:
        14px;

    font-weight:
        600;
}

.ays-empty-text {
    max-width:
        440px;

    margin:
        5px auto 0;

    color:
        var(--ays-text-muted);

    font-size:
        12px;
}


/* ==========================================================================
   22. AYIRICI
   ========================================================================== */

.ays-divider {
    height:
        1px;

    margin:
        16px 0;

    background:
        var(--ays-border-soft);
}


/* ==========================================================================
   23. yardımcı sınıflar
   ========================================================================== */

.ays-text-muted {
    color:
        var(--ays-text-muted) !important;
}

.ays-text-soft {
    color:
        var(--ays-text-soft) !important;
}

.ays-text-success {
    color:
        var(--ays-success) !important;
}

.ays-text-warning {
    color:
        var(--ays-warning) !important;
}

.ays-text-danger {
    color:
        var(--ays-danger) !important;
}

.ays-bg-surface {
    background:
        var(--ays-surface) !important;
}

.ays-border {
    border:
        1px solid var(--ays-border-soft) !important;
}


/* ==========================================================================
   24. LOADING
   ========================================================================== */

.ays-spinner {
    width:
        18px;

    height:
        18px;

    display:
        inline-block;

    border:
        2px solid rgba(255, 255, 255, 0.2);

    border-top-color:
        var(--ays-primary);

    border-radius:
        50%;

    animation:
        aysSpin 0.7s linear infinite;
}

@keyframes aysSpin {
    to {
        transform:
            rotate(360deg);
    }
}


/* ==========================================================================
   25. FOCUS
   ========================================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        2px solid rgba(94, 143, 181, 0.65);

    outline-offset:
        2px;
}


/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .ays-sidebar {
        transform:
            translateX(-100%);

        transition:
            transform var(--ays-transition);
    }

    body.ays-sidebar-open
    .ays-sidebar {
        transform:
            translateX(0);
    }

    .ays-main {
        margin-left:
            0;
    }

    .ays-content {
        padding:
            18px;
    }
}

@media (max-width: 767.98px) {

    .ays-content {
        padding:
            14px;
    }

    .ays-page-header {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .ays-page-title {
        font-size:
            20px;
    }

    .ays-topbar {
        padding:
            0 14px;
    }

    .ays-card-body,
    .card-body {
        padding:
            14px;
    }
}


/* ==========================================================================
   27. YAZDIRMA
   ========================================================================== */

@media print {

    .ays-sidebar,
    .ays-topbar,
    .no-print {
        display:
            none !important;
    }

    .ays-main {
        margin:
            0 !important;
    }

    body {
        background:
            #fff;

        color:
            #000;
    }

    .ays-card,
    .card {
        border:
            1px solid #ddd;

        box-shadow:
            none;
    }
}

/* ==========================================================================
   AYS - LOGIN
   ========================================================================== */

body.ays-login-page {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    background: var(--ays-bg);
}

.ays-login-shell {
    width: 100%;
    min-height: 100vh;

    display: grid;
    grid-template-columns: 42% 58%;
}


/* ==========================================================================
   SOL TARAF
   ========================================================================== */

.ays-login-brand {
    position: relative;

    min-width: 0;
    min-height: 100vh;

    display: flex;

    background: #1b2025;

    border-right: 1px solid var(--ays-border-soft);

    overflow: hidden;
}

.ays-login-brand::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    bottom: -180px;

    border: 1px solid rgba(255, 255, 255, 0.025);

    border-radius: 50%;
}

.ays-login-brand::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    left: -280px;
    bottom: -280px;

    border: 1px solid rgba(255, 255, 255, 0.018);

    border-radius: 50%;
}

.ays-login-brand-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 44px 56px;
}


/* LOGO */

.ays-login-logo {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ays-login-logo > div {
    display: flex;
    flex-direction: column;
}

.ays-login-logo strong {
    color: var(--ays-text);

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.03em;
}

.ays-login-logo > div > span {
    margin-top: 1px;

    color: var(--ays-text-muted);

    font-size: 10px;
}


/* ANA METİN */

.ays-login-brand-content {
    width: 100%;
    max-width: 510px;

    margin: auto 0;
}

.ays-login-kicker {
    margin-bottom: 18px;

    color: var(--ays-primary);

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 0.16em;
}

.ays-login-brand-content h1 {
    margin: 0;

    max-width: 500px;

    color: var(--ays-text);

    font-size: clamp(36px, 3.2vw, 52px);

    line-height: 1.08;

    font-weight: 570;

    letter-spacing: -0.045em;
}

.ays-login-brand-content p {
    max-width: 470px;

    margin: 22px 0 0;

    color: #8b949e;

    font-size: 14px;

    line-height: 1.75;
}


/* SOL ALT */

.ays-login-system-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: var(--ays-text-faint);

    font-size: 11px;
}

.ays-login-system-info > div {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* ==========================================================================
   SAĞ TARAF
   ========================================================================== */

.ays-login-form-area {
    min-width: 0;
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 48px 70px;

    background: #20252b;
}

.ays-login-box {
    width: 100%;
    max-width: 420px;
}


/* BAŞLIK */

.ays-login-heading {
    margin-bottom: 30px;
}

.ays-login-heading h2 {
    margin: 0;

    color: var(--ays-text);

    font-size: 27px;

    font-weight: 620;

    letter-spacing: -0.025em;
}

.ays-login-heading p {
    margin: 7px 0 0;

    color: var(--ays-text-muted);

    font-size: 13px;
}


/* MOBİL LOGO */

.ays-login-mobile-logo {
    display: none;

    align-items: center;

    gap: 10px;

    margin-bottom: 32px;

    color: var(--ays-text);
}


/* ==========================================================================
   LOGIN FORM
   ========================================================================== */

.ays-login-form-area .form-label {
    margin-bottom: 7px;
}

.ays-login-form-area .input-group {
    flex-wrap: nowrap;
}

.ays-login-form-area .form-control {
    min-height: 46px;

    background: var(--ays-bg-soft);
}

.ays-login-form-area .input-group-text {
    width: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #252b31;

    color: #7f8994;
}

.ays-login-form-area .input-group .btn {
    min-height: 46px;
}

.ays-login-form-area .btn-primary {
    min-height: 46px;

    font-size: 13px;
}


/* GÜVENLİK */

.ays-login-security {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 25px;

    padding-top: 18px;

    border-top: 1px solid var(--ays-border-soft);

    color: var(--ays-text-faint);

    font-size: 11px;

    line-height: 1.55;
}

.ays-login-security i {
    margin-top: 2px;

    color: #77838e;
}


/* ==========================================================================
   TABLET / MOBİL
   ========================================================================== */

@media (max-width: 991.98px) {

    body.ays-login-page {
        overflow: auto;
    }

    .ays-login-shell {
        display: block;
    }

    .ays-login-brand {
        display: none;
    }

    .ays-login-form-area {
        min-height: 100vh;

        padding: 32px 22px;
    }

    .ays-login-mobile-logo {
        display: flex;
    }
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.ays-stat-icon {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    background: #303840;

    border: 1px solid var(--ays-border-soft);
    border-radius: var(--ays-radius-sm);

    color: #8795a2;

    font-size: 14px;
}

.min-width-0 {
    min-width: 0;
}
/* ==========================================================================
   DROPDOWN MENÜLER
   ========================================================================== */

.dropdown-menu {
    background: #252c33;
    border: 1px solid var(--ays-border);
    border-radius: var(--ays-radius-sm);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);

    padding: 6px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 36px;

    padding: 8px 10px;

    border-radius: 6px;

    color: #c6ced6;

    font-size: 12px;
    font-weight: 500;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.dropdown-item i {
    width: 16px;

    color: #7f8c98;

    text-align: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #303840;

    color: #f0f3f5;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: var(--ays-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: rgba(91, 143, 177, 0.16);

    color: #dbe9f2;
}

.dropdown-divider {
    margin: 6px 4px;

    border-top-color: var(--ays-border-soft);

    opacity: 1;
}

.dropdown-header {
    padding: 7px 10px 5px;

    color: #778491;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* Disabled dropdown item */

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--ays-border-strong);

    background: transparent;

    opacity: .65;
}
/* Dropdown hover override */

.ays-topbar .dropdown-menu .dropdown-item:hover,
.ays-topbar .dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #303840 !important;
    color: #f0f3f5 !important;
}

.ays-topbar .dropdown-menu .dropdown-item:hover i,
.ays-topbar .dropdown-menu .dropdown-item:focus i,
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
    color: var(--ays-primary) !important;
}

.ays-topbar .dropdown-menu .dropdown-item {
    cursor: pointer;
}


/* ==========================================================================
   28. OKUNABİLİRLİK / DAHA AYDINLIK ARAYÜZ
   ========================================================================== */

/*
 * Koyu tema korunur; yüzeyler ve metin kontrastı yükseltilir.
 * Amaç: uzun süreli CRM kullanımında göz yorgunluğunu azaltmak.
 */

body {
    font-size: 14px;
    line-height: 1.55;
}

.ays-content {
    padding-top: 24px;
}

/* Sidebar */
.ays-sidebar {
    background: #121418;
}

.ays-menu-title {
    color: #929eaa;
    font-size: 10px;
}

.ays-menu-link {
    color: #c8d0d8;
}

.ays-menu-link i {
    color: #91a0ad;
}

.ays-menu-link:hover {
    background: var(--ays-surface-hover);
    color: #ffffff;
}

.ays-menu-link:hover i {
    color: #b9cad8;
}

.ays-menu-link.active {
    background: #334453;
    border-color: #486176;
    color: #ffffff;
}

/* Topbar */
.ays-topbar {
    background: rgba(38, 45, 53, 0.97);
    border-bottom-color: #46525e;
}

.ays-topbar-title {
    font-weight: 650;
}

.ays-topbar-subtitle {
    color: var(--ays-text-muted);
}

/* Sayfa başlıkları */
.ays-page-title {
    color: #ffffff;
    font-weight: 680;
}

.ays-page-description {
    color: #b5bec8;
}

/* Kartlar */
.ays-card,
.card {
    background: var(--ays-surface);
    border-color: #46525e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ays-card-header,
.card-header {
    background: rgba(255, 255, 255, 0.018);
    border-bottom-color: #46525e;
}

.ays-card-title {
    color: #f8fafc;
    font-weight: 680;
}

.ays-card-subtitle {
    color: #b1bbc5;
}

/* Formlar */
.form-label {
    color: #e1e6eb;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 42px;
    background-color: var(--ays-input-bg);
    border-color: #53606d;
    color: #f5f7f9;
}

.form-control:hover,
.form-select:hover {
    border-color: #6d7b89;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ays-surface-hover);
    border-color: #77add3;
    box-shadow: 0 0 0 3px rgba(111, 168, 209, 0.16);
}

.form-control::placeholder {
    color: #909ca8;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background: #28313a;
    color: #c7cfd7;
    border-color: #46525e;
}

.form-text,
.ays-text-muted {
    color: var(--ays-text-muted) !important;
}

/* Butonlar */
.btn {
    min-height: 40px;
    font-weight: 650;
}

.btn-primary {
    background: #629bc5;
    border-color: #629bc5;
    color: #ffffff;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #76acd2;
    border-color: #76acd2;
    color: #ffffff;
}

.btn-outline-secondary {
    background: var(--ays-surface-hover);
    border-color: #657381;
    color: #e0e5ea;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: #3b4854;
    border-color: #7e8e9e;
    color: #ffffff;
}

/* Dropdownlar */
.dropdown-menu {
    background: var(--ays-surface);
    border-color: #4b5864;
}

.dropdown-item {
    color: #d7dde3;
}

.ays-topbar .dropdown-menu .dropdown-item:hover,
.ays-topbar .dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #3c4854 !important;
    color: #ffffff !important;
}

/* Tablolar */
.table {
    --bs-table-color: #d7dde3;
}

.table thead th {
    background: #2b343d;
    color: var(--ays-text-muted);
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* Badgeler */
.ays-badge {
    font-weight: 650;
}

.ays-badge-primary {
    color: #b9dcf3;
}

.ays-badge-success {
    color: #b6dec5;
}

.ays-badge-warning {
    color: #ead09f;
}

.ays-badge-danger {
    color: #efb2b4;
}

/* Profil / sekme benzeri alanlar */
.nav-link {
    color: #c0c8d0;
}

.nav-link:hover {
    color: #ffffff;
}

/* İnce açıklama metinleri aşırı soluk kalmasın */
small,
.small {
    color: #b0bac4;
}

/* Focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: rgba(119, 173, 211, 0.9);
}

/*
 * AYS - Görev Merkezi
 * Sayfaya özel koyu tema uyumluluk katmanı.
 * Bootstrap'in açık tema yardımcı sınıflarını AYS renk değişkenlerine uyarlar.
 */

#aysGorevUygulamasi {
    color: var(--ays-text, #e7edf4);
}

/* Kartlar */
#aysGorevUygulamasi .card {
    background: var(--ays-surface, #2d3944);
    border: 1px solid var(--ays-border, rgba(255,255,255,.08)) !important;
    color: var(--ays-text, #e7edf4);
}

#aysGorevUygulamasi .card-header {
    color: var(--ays-text, #e7edf4);
    border-bottom-color: var(--ays-border, rgba(255,255,255,.08));
}

#aysGorevUygulamasi .text-muted,
#aysGorevUygulamasi .form-label.text-muted,
#aysGorevUygulamasi .small.text-muted {
    color: var(--ays-text-muted, #9eacb9) !important;
}

#aysGorevUygulamasi .fw-semibold,
#aysGorevUygulamasi .fw-medium,
#aysGorevUygulamasi .fw-bold,
#aysGorevUygulamasi .fs-4 {
    color: var(--ays-text, #e7edf4);
}

/* Filtre alanları */
#aysGorevUygulamasi .form-control,
#aysGorevUygulamasi .form-select {
    background-color: var(--ays-input-bg, #25313b);
    border-color: var(--ays-border, #465563);
    color: var(--ays-text, #e7edf4);
}

#aysGorevUygulamasi .form-control::placeholder {
    color: var(--ays-text-muted, #8f9ba6);
    opacity: .9;
}

#aysGorevUygulamasi .form-control:focus,
#aysGorevUygulamasi .form-select:focus {
    background-color: var(--ays-input-bg, #25313b);
    color: var(--ays-text, #e7edf4);
    border-color: var(--ays-primary, #69a9d3);
    box-shadow: 0 0 0 .2rem rgba(105, 169, 211, .14);
}

#aysGorevUygulamasi .form-select option {
    background: #25313b;
    color: #e7edf4;
}

/* Tablo */
#aysGorevUygulamasi .table {
    --bs-table-color: var(--ays-text, #e7edf4);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ays-border, rgba(255,255,255,.08));
    --bs-table-striped-color: var(--ays-text, #e7edf4);
    --bs-table-hover-color: var(--ays-text, #ffffff);
    --bs-table-hover-bg: rgba(255,255,255,.035);
    color: var(--ays-text, #e7edf4);
    margin-bottom: 0;
}

#aysGorevUygulamasi .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--ays-border, rgba(255,255,255,.08));
}

#aysGorevUygulamasi .table thead,
#aysGorevUygulamasi .table-light,
#aysGorevUygulamasi .table-light > * > * {
    --bs-table-bg: #293640;
    --bs-table-color: #bdc9d4;
    background: #293640 !important;
    color: #bdc9d4 !important;
}

#aysGorevUygulamasi .table thead th {
    color: #bdc9d4 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

#aysGorevUygulamasi .table-danger,
#aysGorevUygulamasi .table-danger > * > * {
    --bs-table-bg: rgba(220,53,69,.10);
    --bs-table-color: var(--ays-text, #e7edf4);
    background-color: rgba(220,53,69,.10) !important;
    color: var(--ays-text, #e7edf4) !important;
}

/* Bootstrap'in açık tema badge'leri koyu zeminde okunur hale gelsin */
#aysGorevUygulamasi .badge.text-bg-light {
    background-color: #3a4854 !important;
    color: #e5edf4 !important;
    border-color: #53616d !important;
}

#aysGorevUygulamasi .badge.text-bg-secondary {
    color: #fff !important;
}

/* Üst sayaç kartları tıklanabilir */
#aysGorevUygulamasi > .row:first-child .card {
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

#aysGorevUygulamasi > .row:first-child a:hover .card {
    transform: translateY(-1px);
    border-color: rgba(105,169,211,.35) !important;
    background: #313f4b;
}

/* Boş tablo durumu */
#aysGorevUygulamasi tbody td.text-muted {
    color: var(--ays-text-muted, #9eacb9) !important;
}

/* Modal - modal kökte olduğu için uygulama seçicisinin dışında */
#gorevDetayModal .modal-content {
    background: var(--ays-surface, #2d3944);
    color: var(--ays-text, #e7edf4);
    border: 1px solid var(--ays-border, rgba(255,255,255,.10));
}

#gorevDetayModal .modal-header,
#gorevDetayModal .modal-footer {
    border-color: var(--ays-border, rgba(255,255,255,.08));
}

#gorevDetayModal .text-muted {
    color: var(--ays-text-muted, #9eacb9) !important;
}

#gorevDetayModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

#gorevDetayModal .table {
    --bs-table-color: var(--ays-text, #e7edf4);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ays-border, rgba(255,255,255,.08));
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(255,255,255,.035);
}

@media (max-width: 991.98px) {
    #aysGorevUygulamasi .table {
        min-width: 980px;
    }
}

.ays-aday-detay-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-color: var(--ays-border-soft);
    color: var(--ays-text-soft);
    background: rgba(255, 255, 255, .018);
    font-size: 11px;
    font-weight: 650;
    border-radius: 7px;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.ays-aday-detay-btn:hover {
    color: var(--ays-text);
    border-color: var(--ays-primary);
    background: rgba(59, 130, 246, .08);
}

/* ============================================================
   KURUMSAL TEMEL NORMALİZASYON
   ============================================================ */
html,body{background:var(--ays-bg);color:var(--ays-text)}
.ays-main,.ays-content{background:var(--ays-bg)}
.ays-sidebar{background:#121418;border-right-color:var(--ays-border-soft)}
.ays-topbar{background:rgba(23,25,29,.97);border-bottom-color:var(--ays-border-soft)}
.ays-card,.card,.modal-content,.offcanvas,.list-group-item{background:var(--ays-surface);color:var(--ays-text);border-color:var(--ays-border-soft)}
.ays-card-header,.card-header,.card-footer,.modal-header,.modal-footer{border-color:var(--ays-border-soft)}
.ays-text-muted,.text-muted,.form-text,small,.small{color:var(--ays-text-muted)!important}
.form-label{color:var(--ays-text-soft)}
.form-control,.form-select,.input-group-text{background:var(--ays-input-bg);border-color:var(--ays-border);color:var(--ays-text)}
.form-control::placeholder{color:var(--ays-text-faint);opacity:1}
.form-control:focus,.form-select:focus{background:var(--ays-input-bg);border-color:var(--ays-primary-hover);color:var(--ays-text);box-shadow:0 0 0 3px var(--ays-primary-soft)}
.form-select option{background:var(--ays-input-bg);color:var(--ays-text)}
.table{--bs-table-color:var(--ays-text-soft);--bs-table-bg:transparent;--bs-table-border-color:var(--ays-border-soft);--bs-table-striped-color:var(--ays-text-soft);--bs-table-striped-bg:rgba(255,255,255,.018);--bs-table-hover-color:#fff;--bs-table-hover-bg:rgba(155,52,43,.10)}
.table>:not(caption)>*>*{color:inherit;border-bottom-color:var(--ays-border-soft)}
.table thead th,.table-light,.table-light>* >*{--bs-table-bg:#1b1e23;--bs-table-color:var(--ays-text-soft);background:#1b1e23!important;color:var(--ays-text-soft)!important}
.dropdown-menu{background:#1b1e23;border-color:var(--ays-border)}
.dropdown-item{color:var(--ays-text-soft)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--ays-primary-soft)!important;color:#fff!important}
.btn-primary{background:var(--ays-primary);border-color:var(--ays-primary);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--ays-primary-hover);border-color:var(--ays-primary-hover);color:#fff}
.btn-outline-secondary{background:#24282e;border-color:var(--ays-border-strong);color:var(--ays-text-soft)}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background:#30353d;border-color:#747d87;color:#fff}
.nav-link{color:var(--ays-text-muted)}
.nav-link:hover,.nav-link:focus{color:#fff}
::selection{background:rgba(155,52,43,.45);color:#fff}
/* ============================================================
   AYS - KURUMSAL MODERN SCROLLBAR
   Yılmazlar logo paleti
   ============================================================ */

:root {
    --ays-scrollbar-track: #17191d;
    --ays-scrollbar-thumb: #75231d;
    --ays-scrollbar-thumb-hover: #9b342b;
    --ays-scrollbar-thumb-active: #b94338;
    --ays-scrollbar-border: #2b3037;
}


/* ------------------------------------------------------------
   Firefox
   ------------------------------------------------------------ */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--ays-scrollbar-thumb)
        var(--ays-scrollbar-track);
}


/* ------------------------------------------------------------
   Chrome / Edge / Safari
   ------------------------------------------------------------ */

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background:
        var(--ays-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #9b342b 0%,
            #75231d 100%
        );

    border: 2px solid
        var(--ays-scrollbar-track);

    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #b94338 0%,
            #8d2b24 100%
        );
}

*::-webkit-scrollbar-thumb:active {
    background:
        var(--ays-scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background:
        var(--ays-scrollbar-track);
}


/* ------------------------------------------------------------
   Ana sayfa scrollbar
   Biraz daha belirgin
   ------------------------------------------------------------ */

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 11px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border-width: 3px;
}


/* ------------------------------------------------------------
   Kart içi / tablo / drawer / modal scrollları
   Daha ince ve modern
   ------------------------------------------------------------ */

.ays-card-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.isci-action-panel::-webkit-scrollbar,
.isci-durum-scroll::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.ays-card-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb,
.isci-action-panel::-webkit-scrollbar-thumb,
.isci-durum-scroll::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb {
    border-width: 1px;
}


/* ------------------------------------------------------------
   Sidebar scrollbar
   Normalde hafif silik, hover'da belirgin
   ------------------------------------------------------------ */

.ays-sidebar {
    scrollbar-color:
        rgba(117, 35, 29, .55)
        transparent;
}

.ays-sidebar::-webkit-scrollbar {
    width: 6px;
}

.ays-sidebar::-webkit-scrollbar-track {
    background:
        transparent;
}

.ays-sidebar::-webkit-scrollbar-thumb {
    background:
        rgba(117, 35, 29, .55);

    border: 0;
    border-radius: 999px;
}

.ays-sidebar:hover::-webkit-scrollbar-thumb {
    background:
        rgba(155, 52, 43, .90);
}


/* ------------------------------------------------------------
   Yatay tablo scrolları
   ------------------------------------------------------------ */

.table-responsive {
    scrollbar-color:
        var(--ays-scrollbar-thumb)
        transparent;
}

.table-responsive::-webkit-scrollbar-track {
    background:
        transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background:
        var(--ays-scrollbar-thumb);

    border: 0;
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background:
        var(--ays-scrollbar-thumb-hover);
}


/* ------------------------------------------------------------
   Drawer / işlem merkezi
   ------------------------------------------------------------ */

.isci-action-panel {
    scrollbar-color:
        var(--ays-scrollbar-thumb)
        var(--ays-surface);
}

.isci-action-panel::-webkit-scrollbar-track {
    background:
        var(--ays-surface);
}


/* ------------------------------------------------------------
   Durum geçmişi scroll
   ------------------------------------------------------------ */

.isci-durum-scroll {
    scrollbar-color:
        var(--ays-scrollbar-thumb)
        transparent;
}

.isci-durum-scroll::-webkit-scrollbar-track {
    background:
        transparent;
}

.isci-durum-scroll::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #9b342b,
            #75231d
        );

    border: 0;
}


/* ------------------------------------------------------------
   Hover sırasında hafif parlama
   ------------------------------------------------------------ */

*::-webkit-scrollbar-thumb:hover {
    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .08);
}
.text-body-secondary {color: rgb(255 255 245) !important}


/* ==========================================================================
   33. FORM VALIDATION
   ========================================================================== */

/* İlk açılışta bütün required alanları kırmızıya boyamamak için çıplak :invalid yok. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control:user-invalid,
.form-select:user-invalid {
    border-color: var(--ays-danger) !important;
    background-color: rgba(226,105,112,.07) !important;
    box-shadow: 0 0 0 3px rgba(226,105,112,.10) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.form-control:user-invalid:focus,
.form-select:user-invalid:focus {
    border-color: var(--ays-danger) !important;
    box-shadow: 0 0 0 3px rgba(226,105,112,.17) !important;
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid,
.form-check-input:user-invalid {
    border-color: var(--ays-danger) !important;
    box-shadow: 0 0 0 3px rgba(226,105,112,.10);
}

.invalid-feedback,
.invalid-tooltip {
    color: var(--ays-danger);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

/* ==========================================================================
   34. DESKTOP SIDEBAR - TAM KAPAT / AÇ
   ========================================================================== */

@media (min-width: 1200px) {
    .ays-sidebar {
        transition: transform var(--ays-transition), box-shadow var(--ays-transition);
    }

    .ays-main {
        transition: margin-left var(--ays-transition);
    }

    .ays-sidebar-collapse-btn {
        position: fixed;
        z-index: 1040;
        top: 50%;
        left: calc(var(--ays-sidebar-width) - 15px);
        width: 30px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--ays-border-soft);
        border-left: 0;
        border-radius: 0 10px 10px 0;
        background: #171a1f;
        color: var(--ays-text-muted);
        box-shadow: 5px 0 14px rgba(0,0,0,.18);
        transform: translateY(-50%);
        cursor: pointer;
        transition: left var(--ays-transition), color var(--ays-transition), background var(--ays-transition);
    }

    .ays-sidebar-collapse-btn:hover {
        color: var(--ays-text);
        background: var(--ays-surface);
    }

    body.ays-sidebar-collapsed .ays-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    body.ays-sidebar-collapsed .ays-main {
        margin-left: 0;
    }

    /*
     * Buton sidebar'ın child'ı. Parent -252px giderken left:252px sayesinde
     * açma kulakçığı viewport'un tam sol kenarında kalır.
     */
    body.ays-sidebar-collapsed .ays-sidebar-collapse-btn {
        left: var(--ays-sidebar-width);
        width: 34px;
        height: 52px;
        border-left: 1px solid var(--ays-border-soft);
        transform: translateY(-50%);
    }

    body.ays-sidebar-collapsed .ays-sidebar-collapse-btn i {
        transform: none !important;
    }

    body.ays-sidebar-collapsed .ays-container {
        max-width: 100%;
    }
}

/* ==========================================================================
   35. GLOBAL RESPONSIVE / TOUCH
   ========================================================================== */

html,
body {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.modal-content {
    max-height: calc(100dvh - 24px);
}

.modal-body {
    overflow-y: auto;
}

@media (max-width: 1199.98px) {
    .ays-sidebar-collapse-btn {
        display: none !important;
    }

    body.ays-sidebar-collapsed .ays-main {
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .ays-container {
        width: 100%;
        max-width: none;
    }

    .modal-dialog:not(.modal-sm) {
        max-width: calc(100% - 24px);
        margin: 12px auto;
    }

    .modal-footer {
        gap: 8px;
        flex-wrap: wrap;
    }

    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 767.98px) {
    .ays-main {
        width: 100%;
        min-width: 0;
    }

    .ays-page-header,
    .ays-page-title-row,
    .ays-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ays-page-title {
        font-size: 20px;
        line-height: 1.25;
    }

    .form-control,
    .form-select,
    .input-group-text,
    .btn {
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 96px;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .table-responsive > .table {
        margin-bottom: 0;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: calc(100% - 16px);
        max-width: none;
        margin: 8px auto;
        min-height: calc(100dvh - 16px);
        display: flex;
        align-items: center;
    }

    .modal-content {
        width: 100%;
        max-height: calc(100dvh - 16px);
    }

    .modal-header,
    .modal-body {
        padding: 14px;
    }

    .modal-footer {
        padding: 12px 14px;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 479.98px) {
    .ays-content {
        padding: 10px;
    }

    .ays-page-title {
        font-size: 19px;
    }

    .ays-card-body,
    .card-body {
        padding: 12px;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: calc(100% - 10px);
        margin: 5px auto;
        min-height: calc(100dvh - 10px);
    }

    .modal-content {
        max-height: calc(100dvh - 10px);
    }
}


/* ==========================================================================
   36. TOPBAR v4 - RESPONSIVE
   ========================================================================== */

/* Flex çocuklarının içerik yüzünden taşmasını engeller. */
.ays-topbar-left,
.ays-topbar-right,
.ays-topbar-page {
    min-width: 0;
}

.ays-topbar-left {
    flex: 1 1 auto;
}

.ays-topbar-page {
    overflow: hidden;
}

.ays-topbar-right {
    flex: 0 0 auto;
}

.ays-topbar-title,
.ays-topbar-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .ays-topbar {
        height: auto;
        min-height: var(--ays-topbar-height);
        padding: 9px 14px;
        gap: 10px;
    }

    .ays-topbar-left {
        gap: 9px;
    }

    .ays-topbar-right {
        gap: 7px;
    }

    /* Tablet/mobilde telefon yazısı yerine telefon ikonu + durum noktası. */
    #telefonAcBtn {
        width: 42px;
        min-width: 42px;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }

    #aysTelefonDurumMetni,
    #aysTelefonDahiliMetni {
        display: none !important;
    }

    #aysTelefonDurumNoktasi {
        margin-right: 0 !important;
    }

    #aysTelefonDurumMenuBtn {
        min-width: 32px;
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media (max-width: 767.98px) {
    .ays-topbar {
        min-height: 58px;
        padding: 8px 10px;
        gap: 8px;
    }

    .ays-topbar-left {
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }

    .ays-topbar-page {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ays-topbar-title {
        font-size: 14px;
        line-height: 1.25;
    }

    .ays-topbar-subtitle {
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1.25;
    }

    .ays-topbar-right {
        flex: 0 0 auto;
        gap: 5px;
    }

    /* Mobil topbar kontrolleri 36px: başlığa alan bırakır ama dokunulabilir kalır. */
    .ays-topbar-right > .btn,
    .ays-topbar-right > a.btn,
    .ays-topbar-right .btn-icon,
    .ays-hizli-basvuru-topbar-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ays-topbar-right .btn-group .btn {
        height: 36px;
        min-height: 36px;
    }

    #telefonAcBtn {
        width: 36px;
        min-width: 36px;
    }

    #aysTelefonDurumMenuBtn {
        width: 26px;
        min-width: 26px;
        padding: 0 5px;
    }

    .ays-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 12px;
    }

    /* Çalışma şartları mobilde ikona dönüşür. */
    .ays-topbar-conditions-btn {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        justify-content: center;
    }

    .ays-topbar .badge.position-absolute {
        font-size: 9px;
        min-width: 17px;
        height: 17px;
        padding: 3px 4px;
    }
}

@media (max-width: 575.98px) {
    /*
     * Telefon ekranında başlık için ikinci satır oluşturuyoruz.
     * 1. satır: hamburger + aksiyon ikonları
     * 2. satır: sayfa başlığı/açıklaması tam genişlik
     */
    .ays-topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas:
            "menu actions"
            "title title";
        align-items: center;
        row-gap: 7px;
        padding: 7px 10px 8px;
    }

    .ays-topbar-left {
        display: contents;
    }

    #aysSidebarToggle {
        grid-area: menu;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        align-self: center;
    }

    .ays-topbar-page {
        grid-area: title;
        width: 100%;
        padding: 6px 2px 0;
        border-top: 1px solid var(--ays-border-soft);
    }

    .ays-topbar-title,
    .ays-topbar-subtitle {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .ays-topbar-title {
        font-size: 15px;
        font-weight: 700;
    }

    .ays-topbar-subtitle {
        font-size: 11px;
        line-height: 1.35;
    }

    .ays-topbar-right {
        grid-area: actions;
        justify-self: end;
        min-width: 0;
        max-width: 100%;
        gap: 4px;
    }

    /* En dar ekranda düşük öncelikli iki aksiyonu topbardan kaldır. */
    #aysBildirimBtn {
        display: none !important;
    }
}

@media (max-width: 399.98px) {
    .ays-topbar {
        grid-template-columns: 40px minmax(0,1fr);
        padding-left: 8px;
        padding-right: 8px;
    }

    .ays-topbar-right {
        gap: 3px;
    }

    .ays-topbar-right > .btn,
    .ays-topbar-right > a.btn,
    .ays-topbar-right .btn-icon,
    .ays-hizli-basvuru-topbar-btn,
    .ays-topbar-conditions-btn,
    #telefonAcBtn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    #aysTelefonDurumMenuBtn {
        width: 24px;
        min-width: 24px;
    }

    .ays-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}
.ays-u-9ff6f6d00d, .ays-u-0e7bf3a5f1 {color: #fff !important;}
.ays-menu-badge {background: #a23a31}
.rapor-section-heading {font-size: 8px !important;}