@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* === PALET & TEMEL DEĞİŞKENLER === */
:root {
    --clr-primary: #5AA9FF;
    --clr-accent: #B76CFD;
    --clr-bg: #F8FAFC;
    --clr-text: #111827;
    --clr-text-2: #64748B;
    --clr-success: #26B050;
    --clr-danger: #EF4444;
    --clr-warning: #F59E0B;
    --ring-primary: 0 0 0 3px rgba(90,169,255,.30);
    --shadow-soft: 0 1px 3px rgba(0,0,0,.08);
    --border-muted: 1px solid rgba(20,33,61,.14);
}

/* TIPOGRAFİ & GENEL */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--clr-text);
    background: #fff; /* istersen var(--clr-bg) */
}

html, body {
    height: 100%;
    overflow: hidden; /* mevcut düzenine sadık */
    display: flex;
    flex-direction: column;
}

/* METİN SEÇİM RENGİ */
::selection {
    background: rgba(90,169,255,.25);
    color: #0b1220;
}

/* LİNKLER */
a {
    color: var(--clr-primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* FORM DOĞRULAMA */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--clr-success);
    outline-offset: 2px;
    border-radius: 6px;
}

.invalid {
    outline: 2px solid var(--clr-danger);
    outline-offset: 2px;
    border-radius: 6px;
}

.validation-message {
    color: var(--clr-danger);
}

/* BUTON-LİNK */
.button-link {
    text-decoration: none;
    color: var(--clr-primary);
}

    .button-link:hover {
        text-decoration: underline;
    }

/* BLAZOR HATA BAR */
#blazor-error-ui {
    background: #EAF4FF; /* primary’nin açık tonu */
    border-top: var(--border-muted);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #0b1220;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem;
        color: var(--clr-primary);
    }

/* BAŞLIK BLOĞU */
.title {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: .625rem;
}

    .title.title-secondary {
        padding-top: .313rem;
        padding-bottom: 0;
        color: var(--clr-text-2);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: .3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0;
    color: var(--clr-text-2);
}

/* LAYOUT BLOKLARI */
.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    max-width: 100%;
    background: #fff;
}

/* ICON MASK */
.icon {
    width: var(--icon-width);
    height: var(--icon-height);
    background-color: currentcolor;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-mask-image);
    mask-image: var(--icon-mask-image);
}

/* ODAK HALKASI (GENEL) */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
    box-shadow: var(--ring-primary);
    border-radius: 8px;
}

/* YARDIMCI SINIFLAR */
.text-muted {
    color: var(--clr-text-2) !important;
}

.bg-soft-primary {
    background: rgba(90,169,255,.10) !important;
}

.border-muted {
    border: var(--border-muted) !important;
}

/* Küçük dokunuş: başlıklara hafif anti-alias */
h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Grid/Tablo başlıkları – Gradient yok, solid primary */
.dxbl-grid thead tr,
.dxbl-table thead tr,
.table thead tr {
    background: #5AA9FF !important; /* solid mavi */
}

.dxbl-grid thead th,
.dxbl-table thead th,
.table thead th {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 12px !important;
    text-align: center;
    font-weight: 600;
}

    .dxbl-grid thead th:first-child,
    .dxbl-table thead th:first-child,
    .table thead th:first-child {
        border-top-left-radius: 10px;
    }

    .dxbl-grid thead th:last-child,
    .dxbl-table thead th:last-child,
    .table thead th:last-child {
        border-top-right-radius: 10px;
    }

.dxbl-grid thead,
.dxbl-table thead,
.table thead {
    box-shadow: inset 0 -1px rgba(0,0,0,.06);
}

    /* Link ve ikonlar beyaz */
    .dxbl-grid thead th a,
    .dxbl-table thead th a,
    .table thead th a {
        color: #fff !important;
        text-decoration: none;
    }

    .dx-icon, .dxbl-icon, .dx-icon-filter,
    .dxbl-grid thead .dx-icon {
        color: #fff !important;
        opacity: .9;
    }

/* Tablo gövdesi */
.dxbl-grid, .dxbl-table, .table {
    background: #fff;
    border: 1px solid rgba(20,33,61,.12);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(16,24,40,.10);
    overflow: hidden;
}

    /* Hover satır efekti */
    .dxbl-grid tbody tr:hover,
    .dxbl-table tbody tr:hover,
    .table tbody tr:hover {
        background: rgba(90,169,255,.08) !important; /* açık mavi hover */
    }


/* TOOLBAR / HEADER – solid primary */
.dxbl-toolbar,
.dx-toolbar,
.card-header,
.panel-heading {
    background: #5AA9FF !important; /* düz mavi */
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 10px rgba(90,169,255,.25);
}

    .dxbl-toolbar .dx-toolbar-label,
    .dx-toolbar .dx-toolbar-label,
    .card-header h1, .card-header h2, .card-header h3,
    .card-header h4, .card-header h5, .card-header .card-title {
        color: #fff !important;
        font-weight: 600;
        margin: 0;
    }

    /* Toolbar içindeki input */
    .dxbl-toolbar .dx-texteditor,
    .dx-toolbar .dx-texteditor,
    .dxbl-toolbar input[type="search"],
    .dx-toolbar input[type="search"] {
        background: #ffffff !important;
        color: #2c3e50 !important;
        border: 1px solid rgba(255,255,255,.6) !important;
        border-radius: 6px !important;
    }

        .dxbl-toolbar .dx-texteditor.dx-state-focused,
        .dx-toolbar .dx-texteditor.dx-state-focused,
        .dxbl-toolbar input[type="search"]:focus,
        .dx-toolbar input[type="search"]:focus {
            border-color: #5AA9FF !important;
            box-shadow: 0 0 0 2px rgba(90,169,255,.25) !important;
        }

/* FORM CAPTION – solid primary */
.dxbl-form-layout .dxbl-flgroup-caption,
.dxbl-form-layout .dxbl-flgroup-caption.text-bg-primary,
.text-bg-primary:not(.dxbl-menu) {
    background: #5AA9FF !important; /* düz mavi */
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 12px !important;
    box-shadow: 0 3px 8px rgba(90,169,255,.25);
}

    .dxbl-form-layout .dxbl-flgroup-caption .dxbl-flcaption,
    .text-bg-primary:not(.dxbl-menu) .dxbl-flcaption {
        color: #ffffff !important;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

/* GRID ALT ŞERİDİ – soft mavi arka plan */
.dxbl-grid .dxbl-grid-pager,
.dxbl-grid .dxbl-grid-footer,
.dxbl-grid .dxbl-grid-bottom-panel,
.dxbl-grid .dxbl-grid-statusbar {
    background: rgba(90,169,255,.06) !important; /* çok açık mavi */
    border-top: 1px solid rgba(20,33,61,.08) !important;
    padding: 8px 12px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* PAGER (DevExpress Blazor + türevleri) — Gradient YOK, solid primary */

/* Ortak buton/sayfa görünümü */
.dxbl-pager button,
.dxbl-pager a,
.dxbl-pager .dxbl-button,
.dxbl-pager .dx-button,
.dxbl-pager .dxbl-page,
.dxbl-pager .dx-page {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid rgba(20,33,61,.12) !important;
    border-radius: 999px !important; /* pill */
    padding: 6px 12px !important;
    min-width: 36px;
    min-height: 32px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: all .2s ease;
}

    /* Hover: hafif mavi */
    .dxbl-pager button:hover,
    .dxbl-pager a:hover,
    .dxbl-pager .dxbl-button:hover,
    .dxbl-pager .dx-button:hover,
    .dxbl-pager .dxbl-page:hover,
    .dxbl-pager .dx-page:hover {
        background: rgba(90,169,255,.12) !important;
        border-color: rgba(90,169,255,.35) !important;
    }

    /* Aktif/Seçili sayfa: solid primary */
    .dxbl-pager .dxbl-selected,
    .dxbl-pager .dx-page.dx-selection,
    .dxbl-pager .dxbl-button.dxbl-selected,
    .dxbl-pager .active,
    .dxbl-pager .active > * {
        background: #5AA9FF !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(90,169,255,.25);
    }

/* İkonlar */
.dxbl-pager .dx-icon,
.dxbl-pager .dxbl-icon {
    color: inherit !important;
    opacity: .9;
}

/* Page size / combobox */
.dxbl-pager select,
.dxbl-pager .dxbl-selectbox,
.dxbl-pager .dxbl-combobox,
.dxbl-pager .dx-texteditor {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid rgba(20,33,61,.12) !important;
    border-radius: 10px !important;
    min-height: 32px;
    transition: all .2s ease;
}

    /* Focus: mavi halka */
    .dxbl-pager select:focus,
    .dxbl-pager .dxbl-selectbox.dx-state-focused,
    .dxbl-pager .dxbl-combobox.dx-state-focused,
    .dxbl-pager .dx-texteditor.dx-state-focused {
        outline: none !important;
        border-color: #5AA9FF !important;
        box-shadow: 0 0 0 3px rgba(90,169,255,.30) !important;
    }

/* Bootstrap .pagination için eşleşen stil */
.pagination .page-link {
    border: 1px solid rgba(20,33,61,.12);
    color: #334155;
    background: #fff;
    border-radius: 999px !important;
    margin: 0 3px;
    padding: 6px 12px;
    transition: all .2s ease;
}

    .pagination .page-link:hover {
        background: rgba(90,169,255,.12);
        border-color: rgba(90,169,255,.35);
    }

.pagination .active .page-link {
    background: #5AA9FF !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 10px rgba(90,169,255,.25);
}

/* DxSearchBox — Gradient yok, düz renkli */
.card-header .dxbl-searchbox,
.dxbl-searchbox {
    --accent1: #5AA9FF; /* primary mavi */
}

    .card-header .dxbl-searchbox .dxbl-texteditor,
    .dxbl-searchbox .dxbl-texteditor,
    .card-header .dxbl-searchbox .dxbl-editor,
    .dxbl-searchbox .dxbl-editor {
        background: #fff !important;
        border: 1px solid rgba(20,33,61,.22) !important;
        border-radius: 999px !important;
        min-height: 34px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
        transition: all .2s ease !important;
    }

    .card-header .dxbl-searchbox .dxbl-texteditor-input-container input,
    .dxbl-searchbox .dxbl-texteditor-input-container input {
        padding: 6px 34px 6px 36px !important; /* solda ikon boşluğu */
        font-size: 14px !important;
        color: #334155 !important;
    }

    /* Hover: hafif mavi border */
    .card-header .dxbl-searchbox .dxbl-texteditor:hover,
    .dxbl-searchbox .dxbl-texteditor:hover {
        border-color: rgba(90,169,255,.45) !important;
    }

    /* Focus: düz mavi halka */
    .card-header .dxbl-searchbox .dxbl-texteditor.dx-state-focused,
    .dxbl-searchbox .dxbl-texteditor.dx-state-focused,
    .card-header .dxbl-searchbox .dxbl-texteditor:focus-within,
    .dxbl-searchbox .dxbl-texteditor:focus-within {
        border-color: var(--accent1) !important;
        box-shadow: 0 0 0 3px rgba(90,169,255,.35) !important;
        outline: none !important;
    }

    /* Search icon mavi */
    .card-header .dxbl-searchbox .dx-icon-search,
    .dxbl-searchbox .dx-icon-search {
        color: var(--accent1) !important;
        opacity: .9;
    }

    /* Clear icon gri */
    .card-header .dxbl-searchbox .dx-icon-clear,
    .dxbl-searchbox .dx-icon-clear {
        color: #94a3b8 !important;
        opacity: .85;
    }

    /* Placeholder */
    .card-header .dxbl-searchbox ::placeholder,
    .dxbl-searchbox ::placeholder {
        color: #8a93a5;
        opacity: .95;
    }



/* GLOBAL MODAL THEME (DxPopup / DxDialog / Bootstrap)  — Gradient YOK */

.dxbl-overlay,
.dxbl-popup-backdrop,
.modal-backdrop.show {
    background: rgba(17,24,39,.45) !important;
    backdrop-filter: blur(2px);
}

.dxbl-popup,
.dxbl-dialog,
.modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.25) !important;
    overflow: hidden;
}

    /* Header: solid primary */
    .dxbl-popup .dxbl-popup-header,
    .dxbl-dialog .dxbl-dialog-header,
    .modal-header {
        background: #5AA9FF !important; /* primary */
        color: #fff !important;
        padding: 12px 16px !important;
        border: none !important;
    }

    .dxbl-popup .dxbl-popup-title,
    .dxbl-dialog .dxbl-dialog-title,
    .modal-title {
        color: #fff !important;
        font-weight: 700;
        letter-spacing: .2px;
        margin: 0;
    }

    /* Body & Footer */
    .dxbl-popup .dxbl-popup-body,
    .dxbl-dialog .dxbl-dialog-body,
    .modal-body {
        background: #fff;
        padding: 16px 18px !important;
    }

    .dxbl-popup .dxbl-popup-footer,
    .dxbl-dialog .dxbl-dialog-footer,
    .modal-footer {
        background: #fff;
        border-top: 1px solid rgba(20,33,61,.08) !important;
        padding: 12px 16px !important;
    }

    /* Inputs */
    .dxbl-popup .dx-texteditor,
    .dxbl-popup .dxbl-texteditor,
    .dxbl-dialog .dx-texteditor,
    .dxbl-dialog .dxbl-texteditor,
    .modal-body .form-control {
        background: #fff !important;
        color: #334155 !important; /* text */
        border-radius: 12px !important;
        min-height: 38px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
        transition: all .2s ease !important;
        border: 1px solid rgba(20,33,61,.18) !important;
    }

        /* Focus: solid mavi halka */
        .dxbl-popup .dx-texteditor.dx-state-focused,
        .dxbl-popup .dxbl-texteditor.dx-state-focused,
        .dxbl-dialog .dx-texteditor.dx-state-focused,
        .dxbl-dialog .dxbl-texteditor.dx-state-focused,
        .modal-body .form-control:focus {
            border-color: #5AA9FF !important;
            box-shadow: 0 0 0 3px rgba(90,169,255,.30) !important;
            outline: none !important;
        }

    /* Placeholder tonu */
    .dxbl-popup ::placeholder,
    .dxbl-dialog ::placeholder,
    .modal-body ::placeholder {
        color: #8a93a5;
        opacity: .95;
    }

    /* Butonlar */
    .dxbl-popup .dxbl-button.dxbl-default,
    .dxbl-dialog .dxbl-button.dxbl-default,
    .dxbl-popup .dxbl-button.dxbl-primary,
    .dxbl-dialog .dxbl-button.dxbl-primary,
    .modal-footer .btn-primary {
        background: #5AA9FF !important; /* Primary solid mavi */
        border: none !important;
        color: #fff !important;
        border-radius: 12px !important;
        padding: 8px 16px !important;
        font-weight: 700;
        box-shadow: 0 6px 14px rgba(90,169,255,.35); /* mavi gölge */
        transition: transform .15s ease, box-shadow .2s ease, opacity .15s;
    }

        .dxbl-popup .dxbl-button.dxbl-default:hover,
        .dxbl-dialog .dxbl-button.dxbl-default:hover,
        .dxbl-popup .dxbl-button.dxbl-primary:hover,
        .dxbl-dialog .dxbl-button.dxbl-primary:hover,
        .modal-footer .btn-primary:hover {
            transform: translateY(-1px);
            opacity: .95;
            box-shadow: 0 10px 20px rgba(90,169,255,.45); /* hover gölge */
        }

    /* Secondary butonlar (Beyaz arka plan) */
    .dxbl-popup .dxbl-button:not(.dxbl-primary),
    .dxbl-dialog .dxbl-button:not(.dxbl-primary),
    .modal-footer .btn-secondary {
        background: #ffffff !important;
        color: #334155 !important;
        border: 1px solid rgba(20,33,61,.18) !important;
        border-radius: 12px !important;
        padding: 8px 16px !important;
        font-weight: 600;
        transition: background .2s ease, color .2s ease, border .2s ease;
    }

        .dxbl-popup .dxbl-button:not(.dxbl-primary):hover,
        .dxbl-dialog .dxbl-button:not(.dxbl-primary):hover,
        .modal-footer .btn-secondary:hover {
            background: #f1f5f9 !important; /* slate-100 */
            border-color: rgba(20,33,61,.35) !important;
        }

/* Tab’li form düzeni (DxFormLayoutTabPages) */
.dxbl-tabs,
.dxbl-fltabs {
    border-bottom: 1px solid rgba(20,33,61,.08) !important;
}

    .dxbl-tabs .dxbl-tab.dxbl-active,
    .dxbl-fltabs .dxbl-tab.dxbl-active {
        color: #ff7e5f !important; /* turuncu vurgu */
        font-weight: 700;
    }

        .dxbl-tabs .dxbl-tab.dxbl-active::after,
        .dxbl-fltabs .dxbl-tab.dxbl-active::after {
            content: "";
            display: block;
            height: 3px;
            border-radius: 3px;
            margin-top: 6px;
            background: #ff7e5f !important; /* düz renk */
        }

@media (max-width: 576px) {
    .dxbl-popup .dxbl-popup-body,
    .dxbl-dialog .dxbl-dialog-body,
    .modal-body {
        padding: 12px !important;
    }
}

}
/* POPUP / DIALOG FORM – INPUT TEMA (Gradient Yok) */

.dxbl-popup .dxbl-popup-body {
    background: #fff;
    padding: 16px 18px !important;
}

/* Label stilleri */
.dxbl-popup .dxbl-formlayout .dxbl-flcaption,
.dxbl-popup .dx-field-item-label,
.dxbl-popup .dxbl-label {
    color: #475569 !important; /* slate-600 */
    font-weight: 600;
    margin-right: 10px;
}

/* Placeholder */
.dxbl-popup ::placeholder {
    color: #9aa4b2;
    opacity: .95;
}

/* Hover & Focus – düz turuncu vurgu */
.dxbl-popup .dx-texteditor:hover,
.dxbl-popup .dxbl-selectbox:hover,
.dxbl-popup .dxbl-combobox:hover,
.dxbl-popup textarea:hover {
    border-color: #ff7e5f !important;
}

.dxbl-popup .dx-texteditor.dx-state-focused,
.dxbl-popup .dxbl-selectbox.dx-state-focused,
.dxbl-popup .dxbl-combobox.dx-state-focused,
.dxbl-popup textarea:focus {
    border-color: #ff7e5f !important;
    box-shadow: 0 0 0 2px rgba(255,126,95,.35) !important;
    outline: none !important;
}

/* Select/Combo ikonları */
.dxbl-popup .dxbl-selectbox .dx-icon,
.dxbl-popup .dxbl-combobox .dx-icon {
    color: #ff7e5f !important;
    opacity: .9;
}

/* Validation */
.dxbl-popup .dxbl-editor.dx-invalid,
.dxbl-popup .dx-texteditor.dx-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.25) !important;
}

.dxbl-popup .dxbl-validation-message {
    color: #b91c1c !important;
    font-size: 12px;
}

/* Satır aralıkları */
.dxbl-popup .dxbl-formlayout .dxbl-flitem,
.dxbl-popup .dx-field-item {
    margin-bottom: 10px;
}

/* Textarea */
.dxbl-popup textarea {
    min-height: 40px;
    resize: vertical;
    border-radius: 12px !important;
}

/* Primary / Kaydet butonu – düz turuncu */
.dxbl-popup .dxbl-button.dxbl-default,
.dxbl-popup .dxbl-button.dxbl-primary {
    background: #ff7e5f !important; /* düz renk */
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(255,126,95,.35);
    transition: transform .15s ease, box-shadow .2s ease, opacity .15s;
}

    .dxbl-popup .dxbl-button.dxbl-default:hover,
    .dxbl-popup .dxbl-button.dxbl-primary:hover {
        transform: translateY(-1px);
        opacity: .95;
        box-shadow: 0 6px 14px rgba(255,126,95,.45);
    }

/* Close (x) butonu */
.dxbl-popup .dxbl-popup-header .dx-icon {
    color: #ff7e5f !important; /* turuncu düz */
    opacity: .9;
}

/* Inputs */
/*.dxbl-popup .dx-texteditor,
.dxbl-popup .dxbl-texteditor,
.dxbl-popup .dxbl-selectbox,
.dxbl-popup .dxbl-combobox,
.dxbl-popup .dxbl-datebox,
.dxbl-popup textarea,
.dxbl-popup input[type="text"],
.dxbl-popup input[type="number"],
.dxbl-popup input[type="date"] {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid rgba(20,33,61,.18) !important;
    border-radius: 12px !important;
    width: 100%;
    transition: all .2s ease !important;
}*/

    /* Hover & Focus – tek çizgi */
    .dxbl-popup .dx-texteditor.dx-state-focused,
    .dxbl-popup .dxbl-selectbox.dx-state-focused,
    .dxbl-popup .dxbl-combobox.dx-state-focused,
    .dxbl-popup textarea:focus {
        box-shadow: inset 0 0 0 2px #ff7e5f !important;
    }
/*.dxbl-text-edit{
    border:0;
}*/
/* TABPAGE — Solid, kompakt boyutlar (yazılar normal ağırlıkta) */
:root {
    --clr-primary: #5AA9FF;
    --clr-secondary: #3DDC97;
    --clr-accent: #B76CFD;
    --clr-bg: #F8FAFC;
    --clr-text: #111827;
    --clr-text-2: #64748B;
    --clr-dark: #1E293B;
    --tab-font-size: .85rem;
    --tab-font-weight: 400; /* normal yazı kalınlığı */
    --tab-h-pad: .6rem;
    --tab-v-pad: .45rem;
    --tab-gap: .4rem;
    --tab-radius: .6rem;
    --tabbar-v-pad: .15rem;
    --tablist-margin-b: 8px;
    --tabpanel-pad: .75rem .9rem;
    --tabpanel-radius: .8rem;
    --tabpanel-min-h: auto;
    --tab-fg: var(--clr-text);
    --tab-fg-active: #fff;
    --tab-bg: var(--clr-bg);
    --tab-bg-hover: rgba(17,24,39,.05);
    --tab-active-bg: var(--clr-primary);
    --tab-active-border: var(--clr-accent);
    --tab-sep: #e5e7eb;
    --tab-shadow: 0 4px 10px rgba(90,169,255,.18);
    --tab-panel-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* Tab bar */
.dxbl [role="tablist"],
.dxbl-tabcontrol [role="tablist"],
.dxbl-fl [role="tablist"] {
    display: flex;
    gap: var(--tab-gap);
    border-bottom: 1px solid var(--tab-sep);
    margin-bottom: var(--tablist-margin-b);
    padding: var(--tabbar-v-pad) .25rem;
    background: var(--tab-bg);
}

/* Tab */
.dxbl [role="tab"],
.dxbl-tabcontrol [role="tab"],
.dxbl-fl [role="tab"] {
    position: relative;
    padding: var(--tab-v-pad) var(--tab-h-pad);
    font-weight: var(--tab-font-weight); /* 400 */
    font-size: var(--tab-font-size);
    color: var(--tab-fg);
    cursor: pointer;
    border-radius: var(--tab-radius) var(--tab-radius) 0 0;
    transition: all .15s ease;
    user-select: none;
    line-height: 1.1;
}

    .dxbl [role="tab"]:hover,
    .dxbl-tabcontrol [role="tab"]:hover,
    .dxbl-fl [role="tab"]:hover {
        background: var(--tab-bg-hover);
        color: var(--clr-dark);
    }

    /* Aktif tab */
    .dxbl [role="tab"][aria-selected="true"],
    .dxbl-tabcontrol [role="tab"][aria-selected="true"],
    .dxbl-fl [role="tab"][aria-selected="true"] {
        color: var(--tab-fg-active) !important;
        background: var(--tab-active-bg) !important;
        box-shadow: var(--tab-shadow);
        font-weight: 500; /* aktif tab çok hafif öne çıksın */
    }

        .dxbl [role="tab"][aria-selected="true"]::after,
        .dxbl-tabcontrol [role="tab"][aria-selected="true"]::after,
        .dxbl-fl [role="tab"][aria-selected="true"]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background: var(--tab-active-border);
            border-radius: 2px 2px 0 0;
        }

/* Panel */
.dxbl [role="tabpanel"],
.dxbl-tabcontrol [role="tabpanel"],
.dxbl-fl [role="tabpanel"] {
    background: #fff;
    border-radius: 0 0 var(--tabpanel-radius) var(--tabpanel-radius);
    box-shadow: var(--tab-panel-shadow);
    padding: var(--tabpanel-pad);
    color: var(--clr-text-2);
    min-height: var(--tabpanel-min-h);
    font-weight: 400; /* içerik yazıları da normal */
}

/* ====== PAW DOWN OVERRIDE (en sona ekle) ====== */

/* Hover'da yönü koru (eski 45°/-50°'yi ez) */
.page:hover::before {
  transform: rotate(180deg) translateX(20px) translateY(-15px) scale(1.2) !important;
  opacity: .6 !important;
}
.page:hover::after {
  transform: rotate(180deg) translateX(-25px) translateY(20px) scale(0.8) !important;
  opacity: .4 !important;
}

/* Sidebar patileri: temel dönüşü 180° civarına çek */
.sidebar-paws .paw {
  transform: translate(var(--dx,0), 18px) scale(.92) rotate(172deg) !important;
}
.sidebar-paws .paw:nth-child(2n) {
  transform: translate(var(--dx,0), 18px) scale(.88) rotate(190deg) !important;
}
.sidebar-paws .paw:nth-child(3n) {
  transform: translate(var(--dx,0), 18px) scale(.95) rotate(166deg) !important;
}

/* Topbar yürüyen patiler: varsayılan rotasyonu 180° yap */
.topbar-paws .paw {
  --rot: 180deg !important;
}
/* Paralel hatlar: 180° etrafında küçük oynamalar */
.topbar-paws .paw.track-1 { --rot: 174deg !important; }
.topbar-paws .paw.track-2 { --rot: 186deg !important; }
.topbar-paws .paw.track-3 { --rot: 177deg !important; }

/* ========== Keyframe'leri 180° kaydır — isimler aynı kalır, böylece mevcut referanslar çalışır ========== */

/* Önceden: 15°,25°,5°,20°  →  Aşağı bakan: 195°,205°,185°,200° */
@keyframes floatPaw1 {
  0%, 100% { transform: rotate(195deg) translateY(0px) scale(1);   opacity: 0.10; }
  25%      { transform: rotate(205deg) translateY(-10px) scale(1.1); opacity: 0.15; }
  50%      { transform: rotate(185deg) translateY(-15px) scale(0.9); opacity: 0.20; }
  75%      { transform: rotate(200deg) translateY(-5px)  scale(1.05);opacity: 0.12; }
}

/* Önceden: -20°,-35°,-10°  →  160°,145°,170° */
@keyframes floatPaw2 {
  0%, 100% { transform: rotate(160deg) translateX(0px)    scale(1);   opacity: 0.08; }
  33%      { transform: rotate(145deg) translateX(15px)   scale(1.2); opacity: 0.12; }
  66%      { transform: rotate(170deg) translateX(-10px)  scale(0.8); opacity: 0.15; }
}

/* Önceden: 30°,45°,15°,35°,20° → 210°,225°,195°,215°,200° */
@keyframes floatPaw3 {
  0%, 100% { transform: rotate(210deg) translateX(0px)   translateY(0px)  scale(1);    opacity: 0.07; }
  20%      { transform: rotate(225deg) translateX(-20px) translateY(10px) scale(1.15); opacity: 0.10; }
  40%      { transform: rotate(195deg) translateX(25px)  translateY(-12px)scale(0.85); opacity: 0.12; }
  60%      { transform: rotate(215deg) translateX(-15px) translateY(-8px) scale(1.10); opacity: 0.08; }
  80%      { transform: rotate(200deg) translateX(18px)  translateY(15px) scale(0.95); opacity: 0.09; }
}

/* Önceden: -45°,-60°,-30° → 135°,120°,150° */
@keyframes floatPaw4 {
  0%, 100% { transform: rotate(135deg) scale(1);             opacity: 0.05; }
  30%      { transform: rotate(120deg) translateY(-20px) scale(1.3); opacity: 0.08; }
  70%      { transform: rotate(150deg) translateY(25px)  scale(0.7); opacity: 0.10; }
}