/* overlay */
.kalkulator-overlay{
  position:fixed;
  inset:0;
  background:
    rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.kalkulator-overlay.show{
  opacity:1;
  visibility:visible;

  /* biar popup lain masih bisa diklik */
  pointer-events:none;
}

/* card */
.kalkulator-card{
  position:fixed;
  width:360px;
  background:#fff;
  border-radius:28px;
  padding:20px;
  box-shadow:
    0 24px 54px rgba(0,0,0,.18);
  transform:
    translateY(18px)
    scale(.97);
  transition:
    transform .22s ease;
  cursor:default;
  user-select:none;
  pointer-events:auto;
}

.kalkulator-overlay.show
.kalkulator-card{
  transform:
    translateY(0)
    scale(1);
}

/* header */
.kalkulator-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  cursor:grab;
}

.kalkulator-header:active{
  cursor:grabbing;
}

.kalkulator-title{
  font-size:20px;
  font-weight:800;
  color:#4f3925;
}

.kalkulator-close{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:#f5f5f5;
  color:#4f3925;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  transition:.18s ease;
}

.kalkulator-close:hover{
  background:#ececec;
}

/* display */
.kalkulator-display{
  width:100%;
  height:74px;
  border:none;
  outline:none;
  background:#faf8f5;
  border-radius:20px;
  padding:0 18px;
  margin-bottom:18px;

  text-align:right;
  font-size:28px;
  font-weight:800;
  color:#4f3925;
}

/* grid */
.kalkulator-grid{
  display:grid;
  grid-template-columns:
    repeat(4,1fr);
  gap:10px;
}

/* button */
.kalkulator-btn{
  height:58px;
  border:none;
  border-radius:18px;
  background:#faf8f5;
  color:#4f3925;
  font-size:20px;
  font-weight:700;
  cursor:pointer;

  transition:
    transform .15s ease,
    background .15s ease;
}

.kalkulator-btn:hover{
  transform:translateY(-1px);
}

.kalkulator-btn:active{
  transform:scale(.96);
}

/* operator */
.kalkulator-btn.operator{
  background:#ead9c3;
}

/* clear */
.kalkulator-btn.clear{
  background:#f5d4d4;
}

/* equal */
.kalkulator-btn.equal{
  background:#b08a5c;
  color:#fff;
}

/* mobile */
@media (max-width:768px){

  .kalkulator-card{
    width:
      calc(100% - 24px);
    max-width:360px;
  }

  .kalkulator-btn{
    height:56px;
  }
}