:root{--mt-system-ink:#122238;--mt-system-muted:#64748b;--mt-system-line:#dbe5ee;--mt-system-bg:#f4f7fb;--mt-system-card:#fff;--mt-system-brand:#147d78}
body.system-data-page{background:var(--mt-system-bg)!important;color:var(--mt-system-ink)}
body.system-data-page>header,body.system-data-page .pageHeader,body.system-data-page main>.head{min-height:76px;height:auto!important;background:var(--mt-system-card)!important;color:var(--mt-system-ink)!important;border-bottom:1px solid var(--mt-system-line);box-shadow:0 4px 14px rgba(15,34,56,.04);padding:18px 24px!important}
body.system-data-page>header strong,body.system-data-page>header h1,body.system-data-page .pageHeader h1,body.system-data-page main>.head h1{color:var(--mt-system-ink)!important}
body.system-data-page>header .muted,body.system-data-page>header p,body.system-data-page .pageHeader p,body.system-data-page main>.head p{color:var(--mt-system-muted)!important}
body.system-data-page>main,body.system-data-page>main.wrap{width:auto!important;max-width:none!important;margin:24px 0 32px!important;padding:0 24px!important}
body.system-data-page .card,body.system-data-page .panel{background:var(--mt-system-card)!important;border:1px solid var(--mt-system-line)!important;border-radius:12px!important;box-shadow:0 7px 18px rgba(15,34,56,.05)!important}
body.system-data-page .head,body.system-data-page .card-head{border-bottom-color:var(--mt-system-line)!important}
body.system-data-page button.outline,body.system-data-page header .btn{border:1px solid var(--mt-system-line)!important;background:#fff!important;color:var(--mt-system-ink)!important}
@media(max-width:760px){body.system-data-page>header,body.system-data-page .pageHeader{padding:15px 16px!important}body.system-data-page>main,body.system-data-page>main.wrap{margin:16px 0 28px!important;padding:0 12px!important}}

/* Sistem ve veri sayfalarında ortak mobil içerik ritmi */
body.system-data-page>main,
body.system-data-page>main.wrap,
body.system-data-page :where(.card,.panel,.head,.card-head){min-width:0}

@media(max-width:920px){
  body.system-data-page>header,
  body.system-data-page .pageHeader,
  body.system-data-page main>.head{
    padding-left:calc(18px + env(safe-area-inset-left,0px))!important;
    padding-right:calc(18px + env(safe-area-inset-right,0px))!important;
  }
  body.system-data-page>main,
  body.system-data-page>main.wrap{
    padding-right:calc(18px + env(safe-area-inset-right,0px))!important;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))!important;
    padding-left:calc(18px + env(safe-area-inset-left,0px))!important;
  }
}

@media(max-width:760px){
  body.system-data-page>header,
  body.system-data-page .pageHeader,
  body.system-data-page main>.head{
    display:flex;
    flex-direction:column;
    align-items:stretch!important;
    gap:12px!important;
    padding:14px calc(14px + env(safe-area-inset-right,0px)) 14px calc(14px + env(safe-area-inset-left,0px))!important;
  }
  body.system-data-page>header>*,
  body.system-data-page .pageHeader>*,
  body.system-data-page main>.head>*{min-width:0;max-width:100%}
  body.system-data-page :where(.head,.card-head){
    align-items:flex-start!important;
    flex-wrap:wrap;
    gap:12px!important;
  }
  body.system-data-page>main,
  body.system-data-page>main.wrap{
    margin:14px 0 0!important;
    padding:0 calc(12px + env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))!important;
  }
  body.system-data-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,button,.btn,a.button){
    min-height:48px;
  }
  body.system-data-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){
    max-width:100%;
    font-size:16px;
  }
  body.system-data-page :where(button,.btn,a.button){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    touch-action:manipulation;
  }
  body.system-data-page .actions{
    align-items:stretch;
    max-width:100%;
  }
}

@media(max-width:520px){
  body.system-data-page .actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  body.system-data-page .actions>:where(button,.btn,a.button),
  body.system-data-page>header>:where(button,.btn,a.button),
  body.system-data-page .pageHeader>:where(button,.btn,a.button),
  body.system-data-page main>.head>:where(button,.btn,a.button){width:100%}
  body.system-data-page :where(.card,.panel){border-radius:10px!important}
}