html,
body {
    margin: 0;
    min-height: 100%;
    background: #f7f9fd;
    color: #111a3b;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.mxos-saas-center-page {
    overflow-x: hidden;
}

.mxsaas-app,
.mxsaas-app * {
    box-sizing: border-box;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    letter-spacing: 0;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.mxsaas-app {
    --blue: #075dff;
    --blue-2: #0a84ff;
    --navy: #07153d;
    --text: #111a3b;
    --muted: #65718b;
    --line: #e6ebf5;
    --bg: #f7f9fd;
    --green: #12ad6a;
    --red: #ef4444;
    --orange: #f58b2a;
    --purple: #7c3aed;
    --cyan: #0ea5e9;
    display: grid;
    grid-template-columns: 274px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg);
}

.mxsaas-app a {
    color: inherit;
    text-decoration: none;
}

.mxsaas-app h1,
.mxsaas-app h2,
.mxsaas-app h3,
.mxsaas-app h4 {
    margin-top: 0;
    color: var(--navy);
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0;
}

.mxsaas-app button,
.mxsaas-app input {
    font: inherit;
}

.mxsaas-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px 12px 0;
    background: #fff;
    border-right: 1px solid var(--line);
}

.mxsaas-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 16px 28px;
}

.mxsaas-mark {
    position: relative;
    width: 44px;
    height: 44px;
}

.mxsaas-mark:before,
.mxsaas-mark:after {
    content: "";
    position: absolute;
    inset: 6px 21px 6px 4px;
    border-radius: 7px;
    background: linear-gradient(145deg, #0a84ff, #6ad3ff);
    transform: skewY(-18deg);
}

.mxsaas-mark:after {
    inset: 6px 4px 6px 21px;
    background: linear-gradient(145deg, #1e4fff, #8ddfff);
    transform: skewY(18deg);
}

.mxsaas-brand strong {
    display: block;
    color: #08143c;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.mxsaas-brand small {
    display: block;
    margin-top: 6px;
    color: #263a70;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
}

.mxsaas-menu-title {
    padding: 0 16px 12px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 900;
}

.mxsaas-nav {
    display: grid;
    gap: 4px;
}

.mxsaas-nav-group {
    border: 1px solid transparent;
    border-radius: 10px;
}

.mxsaas-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #075dff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
}

.mxsaas-nav-toggle i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: #eef4ff;
    color: #075dff;
    font-style: normal;
}

.mxsaas-nav-group.is-open .mxsaas-nav-toggle i,
.mxsaas-acc-item.is-open .mxsaas-acc-toggle b {
    transform: rotate(45deg);
}

.mxsaas-nav-panel {
    display: none;
    gap: 4px;
    padding: 2px 0 8px;
}

.mxsaas-nav-group.is-open .mxsaas-nav-panel {
    display: grid;
}

.mxsaas-nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 39px;
    padding: 0 14px;
    border-radius: 8px;
    color: #27365c;
    font-size: 13px;
    font-weight: 800;
}

.mxsaas-nav a.is-active,
.mxsaas-nav a:hover {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 12px 24px rgba(7, 93, 255, .22);
}

.mxsaas-ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border: 2px solid currentColor;
    border-radius: 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.mxsaas-shortcuts {
    display: grid;
    gap: 9px;
    margin: 18px 8px 0;
    padding: 15px 8px;
    border-top: 1px solid var(--line);
}

.mxsaas-shortcuts b {
    color: var(--blue);
    font-size: 11px;
}

.mxsaas-shortcuts a {
    color: #34405e;
    font-size: 12px;
    font-weight: 760;
}

.mxsaas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    margin-top: auto;
    padding: 0 20px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    font-weight: 850;
}

.mxsaas-footer span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mxsaas-footer i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #11b76f;
}

.mxsaas-main {
    min-width: 0;
}

.mxsaas-topbar {
    display: grid;
    grid-template-columns: 54px minmax(320px, 680px) 1fr auto;
    gap: 18px;
    align-items: center;
    height: 72px;
    padding: 0 28px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.mxsaas-back,
.mxsaas-refresh {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: 22px;
    font-weight: 900;
}

.mxsaas-refresh {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
}

.mxsaas-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(7, 21, 61, .03);
}

.mxsaas-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #142044;
}

.mxsaas-search input::placeholder {
    color: #6d7891;
}

.mxsaas-search kbd {
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    background: #f2f6ff;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.mxsaas-top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mxsaas-top-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #0d1534;
    font-weight: 900;
    cursor: pointer;
}

.mxsaas-top-icon span {
    position: absolute;
    top: -6px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ef123d;
    color: #fff;
    font-size: 10px;
}

.mxsaas-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 198px;
}

.mxsaas-user > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #12164e;
    color: #fff;
    font-weight: 900;
}

.mxsaas-user small,
.mxsaas-user strong {
    display: block;
}

.mxsaas-user small {
    color: #6f7890;
    font-size: 12px;
}

.mxsaas-user strong {
    color: #111a3b;
    font-size: 12px;
}

.mxsaas-page {
    padding: 24px 30px 30px;
}

.mxsaas-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.mxsaas-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mxsaas-title > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e9f3ff, #fff);
    box-shadow: inset 0 0 0 1px #dfe8f7;
    color: var(--blue);
    font-weight: 900;
}

.mxsaas-title h1 {
    margin: 0 0 7px;
    color: #08143c;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: 0;
}

.mxsaas-title p {
    margin: 0;
    color: #677189;
    font-size: 13px;
    font-weight: 600;
}

.mxsaas-date-row {
    display: flex;
    gap: 12px;
}

.mxsaas-date {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #172247;
    font-size: 13px;
    font-weight: 850;
}

.mxsaas-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 17px;
    margin-bottom: 18px;
}

.mxsaas-kpi {
    position: relative;
    min-height: 145px;
    overflow: hidden;
    padding: 18px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 37, 74, .04);
}

.mxsaas-kpi:after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -38px;
    width: 128px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(7, 93, 255, .12), rgba(7, 93, 255, 0));
}

.mxsaas-kpi small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #142455;
    font-size: 12px;
    font-weight: 850;
}

.mxsaas-kpi small em {
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #eef3fb;
    color: #61708a;
    font-size: 9px;
    font-style: normal;
}

.mxsaas-kpi strong {
    display: block;
    margin-top: 16px;
    color: #0d1534;
    font-size: 29px;
    font-weight: 900;
    line-height: 1;
}

.mxsaas-kpi > span {
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.mxsaas-kpi > span.is-down {
    color: var(--red);
}

.mxsaas-kpi b {
    margin-left: 5px;
    color: #5f6c84;
    font-size: 11px;
    font-weight: 760;
}

.mxsaas-kpi svg {
    position: absolute;
    right: 12px;
    bottom: 14px;
    z-index: 1;
    width: 86px;
    height: 44px;
    overflow: visible;
}

.mxsaas-kpi path {
    fill: none;
    stroke: var(--tone, var(--blue));
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mxsaas-kpi-icon {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef4ff;
    color: var(--tone, var(--blue));
    font-size: 18px;
    font-weight: 900;
}

.tone-blue { --tone: var(--blue); }
.tone-green { --tone: var(--green); }
.tone-purple { --tone: var(--purple); }
.tone-orange { --tone: var(--orange); }
.tone-cyan { --tone: var(--cyan); }
.tone-red { --tone: var(--red); }

.mxsaas-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(370px, .95fr) minmax(360px, .78fr);
    gap: 18px;
}

.mxsaas-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 37, 74, .035);
}

.mxsaas-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.mxsaas-card h2 {
    margin: 0;
    color: #121b3f;
    font-size: 16px;
}

.mxsaas-card-head button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.mxsaas-revenue .mxsaas-card-head button {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: #142455;
}

.mxsaas-chart {
    position: relative;
    height: 209px;
    padding: 8px 4px 0;
}

.mxsaas-chart svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mxsaas-axis line {
    stroke: #e9edf5;
    stroke-width: 1;
}

.mxsaas-axis text {
    fill: #53617a;
    font-size: 11px;
    font-weight: 700;
}

.mxsaas-area {
    fill: url(#mxsaasRevenueFade);
}

.mxsaas-line {
    fill: none;
    stroke: var(--blue);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mxsaas-chart circle {
    fill: #fff;
    stroke: var(--blue);
    stroke-width: 4;
}

.mxsaas-tooltip {
    position: absolute;
    top: 86px;
    right: 78px;
    padding: 12px 16px;
    border: 1px solid #e4eaf4;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 16px 32px rgba(17, 37, 74, .11);
}

.mxsaas-tooltip small,
.mxsaas-tooltip strong {
    display: block;
}

.mxsaas-tooltip small {
    color: #58677f;
    font-size: 11px;
}

.mxsaas-tooltip strong {
    color: #101a3c;
    font-size: 17px;
}

.mxsaas-donut-wrap {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 214px;
}

.mxsaas-donut {
    display: grid;
    place-items: center;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: conic-gradient(#075dff 0 41.3%, #1f88ff 41.3% 70%, #11b978 70% 91.4%, #8a35f5 91.4% 100%);
}

.mxsaas-donut:after {
    content: "682\A Toplam";
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fff;
    color: #121b3f;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
    text-align: center;
    white-space: pre;
}

.mxsaas-legend {
    display: grid;
    gap: 16px;
}

.mxsaas-legend div {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    color: #142455;
    font-size: 12px;
    font-weight: 800;
}

.mxsaas-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--tone);
}

.mxsaas-side-stack {
    grid-row: span 2;
    display: grid;
    align-content: start;
    gap: 16px;
}

.mxsaas-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mxsaas-quick-grid a {
    display: grid;
    place-items: center;
    min-height: 70px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: #12204a;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.mxsaas-quick-grid i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--blue);
    font-style: normal;
    font-weight: 900;
}

.mxsaas-market {
    position: relative;
    min-height: 139px;
    overflow: hidden;
    padding: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #075dff, #0e88ff 56%, #1fc7ff);
    color: #fff;
}

.mxsaas-market:after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 20px;
    width: 106px;
    height: 92px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05));
    box-shadow: -38px 18px 0 rgba(148, 51, 234, .55);
}

.mxsaas-market h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.mxsaas-market p {
    max-width: 250px;
    margin: 0;
    color: #e3efff;
    font-size: 12px;
    line-height: 1.45;
}

.mxsaas-market a {
    display: inline-flex;
    margin-top: 16px;
    padding: 10px 13px;
    border-radius: 8px;
    background: #fff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.mxsaas-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}

.mxsaas-status {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 14px 5px;
    border-bottom: 1px solid var(--line);
}

.mxsaas-status:nth-child(odd) {
    padding-right: 16px;
    border-right: 1px solid var(--line);
}

.mxsaas-status:nth-child(even) {
    padding-left: 16px;
}

.mxsaas-status i {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 2px solid #13214a;
    border-radius: 8px;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-status b,
.mxsaas-status small {
    display: block;
}

.mxsaas-status b {
    color: #152147;
    font-size: 12px;
}

.mxsaas-status small {
    margin-top: 2px;
    color: #66728a;
    font-size: 11px;
}

.mxsaas-status em {
    color: #0aa562;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-row {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.mxsaas-activity {
    display: grid;
    gap: 13px;
}

.mxsaas-activity > div {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.mxsaas-activity i {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--tone);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-activity b,
.mxsaas-activity small {
    display: block;
}

.mxsaas-activity b {
    color: #14204a;
    font-size: 12px;
    font-weight: 850;
}

.mxsaas-activity small {
    margin-top: 4px;
    color: #6b758d;
    font-size: 11px;
    font-weight: 700;
}

.mxsaas-package-list {
    display: grid;
    gap: 17px;
}

.mxsaas-package {
    display: grid;
    grid-template-columns: 32px 130px minmax(0, 1fr) 48px;
    gap: 13px;
    align-items: center;
}

.mxsaas-package i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--tone);
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-package b,
.mxsaas-package small {
    display: block;
}

.mxsaas-package b {
    color: #14204a;
    font-size: 12px;
}

.mxsaas-package small {
    margin-top: 3px;
    color: #68738b;
    font-size: 11px;
}

.mxsaas-package div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf8;
}

.mxsaas-package em {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 999px;
    background: var(--tone);
}

.mxsaas-package strong {
    color: #14204a;
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

.mxsaas-bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 37, 74, .035);
}

.mxsaas-bottom article {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 74px;
    padding: 15px 17px;
    border-right: 1px solid var(--line);
}

.mxsaas-bottom article:last-child {
    border-right: 0;
}

.mxsaas-bottom i {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 11px;
    background: #eef4ff;
    color: var(--blue);
    font-style: normal;
    font-weight: 900;
}

.mxsaas-bottom small {
    display: block;
    color: #65718b;
    font-size: 11px;
    font-weight: 760;
}

.mxsaas-bottom strong {
    color: #111a3b;
    font-size: 18px;
}

.mxsaas-bottom em {
    margin-left: 8px;
    color: #11a566;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-bottom em.is-down {
    color: var(--red);
}

.mxsaas-accordion {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 37, 74, .035);
}

.mxsaas-accordion-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
}

.mxsaas-accordion-head h2 {
    margin: 0 0 5px;
    color: #121b3f;
    font-size: 17px;
}

.mxsaas-accordion-head p {
    margin: 0;
    color: #65718b;
    font-size: 12px;
}

.mxsaas-accordion-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.mxsaas-accordion-tools button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    background: #fff;
    color: #14204a;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.mxsaas-accordion-tools span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #075dff;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.mxsaas-acc-item {
    overflow: hidden;
    border: 1px solid #e7edf7;
    border-radius: 14px;
    background: #fbfdff;
}

.mxsaas-acc-toggle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 66px;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: #111a3b;
    text-align: left;
    cursor: pointer;
}

.mxsaas-acc-toggle > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef4ff;
    color: #075dff;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-acc-toggle strong,
.mxsaas-acc-toggle small {
    display: block;
}

.mxsaas-acc-toggle strong {
    color: #111a3b;
    font-size: 14px;
}

.mxsaas-acc-toggle small {
    margin-top: 4px;
    color: #66728a;
    font-size: 12px;
    font-weight: 650;
}

.mxsaas-acc-toggle b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #fff;
    color: #075dff;
    font-size: 18px;
    transition: transform .16s ease;
}

.mxsaas-acc-panel {
    display: none;
    padding: 0 14px 14px 64px;
}

.mxsaas-acc-item.is-open .mxsaas-acc-panel {
    display: block;
}

.mxsaas-subgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mxsaas-subcard {
    min-height: 118px;
    padding: 13px;
    border: 1px solid #e6edf7;
    border-radius: 12px;
    background: #fff;
}

.mxsaas-subcard strong {
    display: block;
    color: #14204a;
    font-size: 13px;
}

.mxsaas-subcard p {
    margin: 8px 0 12px;
    color: #65718b;
    font-size: 12px;
    line-height: 1.45;
}

.mxsaas-subcard em {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: #075dff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-subcard a {
    display: inline-flex;
    margin-left: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f6f9fe;
    color: #14204a;
    font-size: 11px;
    font-weight: 900;
}

.mxsaas-bridge {
    grid-column: 1 / -1;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(17, 37, 74, .035);
}

.mxsaas-bridge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.mxsaas-bridge-head h2 {
    margin: 0 0 5px;
    color: #121b3f;
    font-size: 17px;
}

.mxsaas-bridge-head p {
    margin: 0;
    color: #65718b;
    font-size: 12px;
    line-height: 1.45;
}

.mxsaas-bridge-head strong {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef4ff;
    color: #075dff;
    font-size: 11px;
    white-space: nowrap;
}

.mxsaas-bridge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mxsaas-bridge-grid article {
    min-height: 145px;
    padding: 14px;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.mxsaas-bridge-grid i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 11px;
    background: #eef4ff;
    color: #075dff;
    font-style: normal;
    font-weight: 900;
}

.mxsaas-bridge-grid b,
.mxsaas-bridge-grid small {
    display: block;
}

.mxsaas-bridge-grid b {
    color: #14204a;
    font-size: 13px;
}

.mxsaas-bridge-grid small {
    margin-top: 4px;
    color: #075dff;
    font-size: 11px;
    font-weight: 850;
}

.mxsaas-bridge-grid p {
    margin: 10px 0 0;
    color: #65718b;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1440px) {
    .mxsaas-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mxsaas-side-stack {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: 1fr 1fr;
    }

    .mxsaas-row {
        grid-column: 1 / -1;
    }

    .mxsaas-kpis {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }

    .mxsaas-bottom {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1040px) {
    .mxsaas-app {
        display: block;
    }

    .mxsaas-side {
        position: static;
        height: auto;
    }

    .mxsaas-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mxsaas-nav-panel {
        padding-bottom: 4px;
    }

    .mxsaas-topbar {
        grid-template-columns: 44px 1fr;
        height: auto;
        min-height: 120px;
        padding: 14px;
    }

    .mxsaas-top-actions,
    .mxsaas-user {
        grid-column: 1 / -1;
    }

    .mxsaas-heading {
        display: block;
    }

    .mxsaas-date-row {
        margin-top: 14px;
    }

    .mxsaas-grid,
    .mxsaas-row,
    .mxsaas-side-stack,
    .mxsaas-subgrid,
    .mxsaas-bridge-grid {
        grid-template-columns: 1fr;
    }

    .mxsaas-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .mxsaas-page {
        padding: 16px;
    }

    .mxsaas-kpis,
    .mxsaas-nav,
    .mxsaas-quick-grid,
    .mxsaas-bottom,
    .mxsaas-donut-wrap,
    .mxsaas-subgrid,
    .mxsaas-bridge-grid {
        grid-template-columns: 1fr;
    }

    .mxsaas-accordion {
        padding: 13px;
    }

    .mxsaas-accordion-head {
        display: block;
    }

    .mxsaas-accordion-tools {
        margin-top: 10px;
        justify-content: flex-start;
    }

    .mxsaas-bridge-head {
        display: block;
    }

    .mxsaas-bridge-head strong {
        margin-top: 10px;
        white-space: normal;
    }

    .mxsaas-acc-toggle {
        grid-template-columns: 34px minmax(0, 1fr) 28px;
        padding: 11px;
    }

    .mxsaas-acc-panel {
        padding: 0 11px 11px;
    }

    .mxsaas-bottom article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .mxsaas-package {
        grid-template-columns: 32px 1fr;
    }

    .mxsaas-package div,
    .mxsaas-package strong {
        grid-column: 2;
    }

    .mxsaas-title h1 {
        font-size: 25px;
    }

    .mxsaas-top-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .mxsaas-user {
        min-width: 0;
    }

    .mxsaas-status-grid {
        grid-template-columns: 1fr;
    }

    .mxsaas-status:nth-child(odd),
    .mxsaas-status:nth-child(even) {
        padding-right: 5px;
        padding-left: 5px;
        border-right: 0;
    }
}

/* v6.3.7 SaaS alt bölüm ve merkez görünüm stabilizasyonu */
.mxsaas-app{width:100%;max-width:100%;overflow-x:hidden;}
.mxsaas-side{overflow-y:auto;scrollbar-width:thin;}
.mxsaas-main{min-width:0;max-width:100%;overflow:hidden;}
.mxsaas-page{max-width:100%;overflow:hidden;}
.mxsaas-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr) minmax(300px,.75fr);align-items:start;}
.mxsaas-card,.mxsaas-bottom,.mxsaas-accordion,.mxsaas-bridge{min-width:0;max-width:100%;}
.mxsaas-bottom{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));overflow:visible;}
.mxsaas-bottom article{border-bottom:1px solid var(--line);}
.mxsaas-bottom article:nth-last-child(-n+6){border-bottom:0;}
.mxsaas-accordion,.mxsaas-bridge{overflow:hidden;}
.mxsaas-subgrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.mxsaas-bridge-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.mxsaas-subcard,.mxsaas-bridge-grid article{min-width:0;overflow-wrap:anywhere;}
.mxsaas-subcard a,.mxsaas-subcard em{margin-top:6px;vertical-align:middle;}
.mxsaas-acc-toggle span,.mxsaas-bridge-head p,.mxsaas-card-head h2{min-width:0;overflow-wrap:anywhere;}
.mxsaas-accordion-tools{min-width:0;}
.mxsaas-accordion-tools span{white-space:normal;}
.mxsaas-chart,.mxsaas-donut-wrap,.mxsaas-package-list,.mxsaas-status-grid{min-width:0;max-width:100%;}
.mxsaas-package{grid-template-columns:32px minmax(92px,130px) minmax(0,1fr) minmax(38px,48px);}
.mxsaas-legend div{min-width:0;}
.mxsaas-legend span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:1540px){.mxsaas-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr)}.mxsaas-subscription{min-width:0}.mxsaas-side-stack{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr));}.mxsaas-row{grid-column:1/-1}.mxsaas-bottom article:nth-last-child(-n+6){border-bottom:1px solid var(--line);}}
@media (max-width:1180px){.mxsaas-grid,.mxsaas-row,.mxsaas-side-stack{grid-template-columns:1fr}.mxsaas-topbar{grid-template-columns:44px minmax(0,1fr)}.mxsaas-search{min-width:0}.mxsaas-search kbd{display:none}.mxsaas-bottom{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){.mxsaas-app{overflow-x:hidden}.mxsaas-side{padding-bottom:12px}.mxsaas-brand{padding-left:8px;padding-right:8px}.mxsaas-shortcuts{margin-left:0;margin-right:0}.mxsaas-page{padding:14px}.mxsaas-heading,.mxsaas-date-row,.mxsaas-card-head,.mxsaas-bridge-head{min-width:0}.mxsaas-date-row{flex-wrap:wrap}.mxsaas-bottom{grid-template-columns:1fr}.mxsaas-subcard a{margin-left:0}.mxsaas-package{grid-template-columns:32px minmax(0,1fr)}.mxsaas-donut{margin:auto}.mxsaas-tooltip{display:none}.mxsaas-chart{height:180px}.mxsaas-topbar{padding-left:12px;padding-right:12px}.mxsaas-top-actions{max-width:100%;}.mxsaas-user{width:100%;}}