/* Aplikasi Kalkulator */

.calc {
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 40px;
}
.calc-disp {
  text-align: right;
  font-size: 84px;
  font-weight: 300;
  padding: 0 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  font-feature-settings: "tnum";
}
.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 14px;
  justify-content: space-between;
}
.ck {
  height: 80px;
  border-radius: 40px;
  font-size: 34px;
  background: #333;
  transition:
    filter 0.2s,
    background 0.2s;
}
.ck:active {
  filter: brightness(1.5);
  transition: none;
}
.ck.fn {
  background: #a5a5a5;
  color: #000;
  font-size: 30px;
}
.ck.op {
  background: #ff9f0a;
  font-size: 40px;
}
.ck.op.active {
  background: #fff;
  color: #ff9f0a;
}
.ck.zero {
  grid-column: span 2;
  text-align: left;
  padding-left: 30px;
}