:root{
  --brand:#5865f2;
  --green:#43b581;
  --yellow:#faa61a;
  --orange:#f47b2a;
  --red:#f04747;
  --text:#2e3338;
  --muted:#7f848c;
  --line:#e3e5e8;
  --white:#fff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
}

body{min-height:100vh}

.wrap{
  width:min(820px,calc(100% - 38px));
  margin:0 auto;
}

/* Discord Status scale */
.top{
  height:300px;
  background:#5865f2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.status-brand-wrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.status-brand-image-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:0;
}

.status-brand-image{
  display:block;
  width:760px !important;
  height:auto !important;
  max-width:88vw !important;
  max-height:250px !important;
  object-fit:contain !important;
  transform:none !important;
}

main.wrap{
  padding-bottom:58px;
}

.status-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-top:10px;
  margin-bottom:10px;
}

.subscribe-btn{
  min-height:35px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.hero{
  padding:0 0 82px;
}

.hero-copy{display:none}

.overall{
  min-height:62px;
  padding:0 19px;
  display:flex;
  align-items:center;
  gap:11px;
  border-radius:3px;
  color:#fff;
  background:var(--green);
  font-size:18px;
  font-weight:400;
}

.overall:before{
  content:"✓";
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  font-size:16px;
}

.overall.degraded,
.overall.partial_outage{background:var(--yellow)}
.overall.degraded:before,
.overall.partial_outage:before{content:"!"}
.overall.maintenance{background:var(--orange)}
.overall.maintenance:before{content:"⚒";font-size:12px}
.overall.major_outage{background:var(--red)}
.overall.major_outage:before{content:"×";font-size:18px}

.section-title{
  margin:0 0 8px;
  display:flex;
  justify-content:flex-end;
  gap:4px;
  color:#8c9198;
  font-size:13px;
}

.section-title a{
  color:var(--brand);
  text-decoration:none;
}

.components{
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  overflow:hidden;
}

.group-title{
  padding:14px 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fafafa;
  color:#4f545c;
  font-size:15px;
  font-weight:600;
}

.group-title:first-child{border-top:0}

.component{
  padding:17px 18px 15px;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.component:last-child{border-bottom:0}

.component-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.component-name{
  color:#3d4147;
  font-size:17px;
  font-weight:400;
}

.state{
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--green);
  font-size:14px;
  font-weight:400;
}

.state:before{display:none!important}
.state.degraded,
.state.partial_outage{color:var(--yellow)}
.state.maintenance{color:var(--orange)}
.state.major_outage{color:var(--red)}

.uptime-row{
  display:block;
  margin-top:10px;
}

.bars{
  width:100%;
  height:32px;
  display:grid;
  grid-template-columns:repeat(90,1fr);
  gap:2px;
  align-items:center;
}

.bar{
  width:100%;
  height:29px;
  border-radius:0;
  opacity:1;
  background:var(--green);
  box-shadow:none;
  transition:none;
}

.bar:hover{transform:none}
.bar.good{background:var(--green)}
.bar.warn{background:var(--yellow)}
.bar.maintenance{background:var(--orange)}
.bar.bad{background:var(--red)}

.uptime{
  display:block;
  margin-top:6px;
  text-align:center!important;
  color:#8d9298;
  font-size:12px;
}

.uptime:before{
  content:"90 gün önce";
  float:left;
  color:#8d9298;
}

.uptime:after{
  content:"Bugün";
  float:right;
  color:#8d9298;
}

.bar-legend{display:none}

/* Current incident */
.incident-current{
  margin:0 0 30px;
  padding:18px;
  border:1px solid #f1d6b1;
  border-radius:3px;
  background:#fffaf2;
}

.incident-current h3{
  margin:0 0 9px;
  font-size:18px;
}

.incident-update{
  padding:11px 0;
  border-top:1px solid #f2eadf;
}

.incident-update:first-of-type{border-top:0}

.incident-update b{
  color:#8b622c;
  font-size:14px;
}

.incident-update p{
  margin:6px 0;
  color:#5d6268;
  font-size:15px;
  line-height:1.55;
}

.incident-update time{
  color:#92979d;
  font-size:12px;
}

/* System metrics */
.system-metrics{
  margin:64px 0 0;
}

.metrics-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.metrics-heading h2{
  margin:0;
  color:#43484f;
  font-size:15px;
  font-weight:400;
}

.metric-tabs{
  display:flex;
  align-items:center;
  gap:7px;
}

.metric-tab{
  min-width:62px;
  height:36px;
  padding:0 14px;
  appearance:none;
  border:0;
  border-radius:18px;
  background:transparent;
  color:#6f747c;
  font:inherit;
  font-size:14px;
  cursor:pointer;
}

.metric-tab.active{
  background:var(--brand);
  color:#fff;
}

.metric-card{
  padding:22px 22px 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
}

.metric-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
  color:#41464d;
  font-size:20px;
}

.metric-card-head strong{
  color:#737982;
  font-size:19px;
  font-weight:400;
}

.response-chart{
  display:block;
  width:100%;
  height:190px;
}

/* Past incidents */
.past{
  margin:72px 0 0;
}

.past>h2{
  margin:0 0 15px!important;
  color:#41464d;
  font-size:15px!important;
  font-weight:400;
}

.day{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

.day h3{
  margin:0 0 7px;
  color:#474c52;
  font-size:19px;
  font-weight:400;
}

.day-empty{
  color:#858a91;
  font-size:15px;
}

.incident h4{
  margin:0 0 7px;
  font-size:17px;
}

.incident p{
  color:#5f646b;
  font-size:15px;
  line-height:1.55;
}

.incident .resolved{
  color:var(--green);
  font-size:14px;
}

.footer{
  margin-top:74px;
  padding:25px 0 36px;
  border-top:1px solid var(--line);
  background:#fff;
  color:#8f949a;
  font-size:12px;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
}

.footer-links{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.footer a{
  color:#747980;
  text-decoration:none;
}

/* Secondary pages */
.page-head{padding:40px 0 22px}
.page-head h1{margin:0 0 8px;font-size:32px;font-weight:400}
.page-head p{margin:0;color:#858a90;font-size:15px}

.month{
  margin:0 0 25px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
}

.month h2{
  margin-top:0;
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
  font-size:19px;
  font-weight:400;
}

.history-item{
  padding:14px 0;
  border-bottom:1px solid #eceef0;
}

.history-item:last-child{border-bottom:0}
.history-item strong{display:block;margin-bottom:5px;font-size:17px}
.history-item small{color:#92979d;font-size:13px}

@media(max-width:760px){
  .top{
    height:220px;
    overflow:hidden;
  }

  .status-brand-image{
    width:520px !important;
    height:auto !important;
    max-width:88vw !important;
    max-height:180px !important;
    transform:none !important;
  }

  .wrap{
    width:min(100% - 22px,820px);
  }

  .bars{gap:1px}
  .bar{height:24px}

  .component{
    padding-left:12px;
    padding-right:12px;
  }

  .component-name{font-size:15px}
  .state{font-size:12px}
  .overall{font-size:16px}

  .metrics-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .metric-card{
    padding:16px 12px 12px;
  }

  .metric-card-head{font-size:17px}
  .response-chart{height:155px}

  .footer-row{flex-direction:column}
}