div#oyun-cerceve {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    gap: 1rem;
}

.kart {
    background-color: transparent;
    width: 100px;
    height: 100px;
    perspective: 1000px;
    cursor: pointer;
  }
  
  .kart-cerceve {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .kart.acik .kart-cerceve{
    box-shadow: 0px 0px 7px 0px rgb(220 22 22);
  }

  .kart.acik .kart-cerceve, .kart.eslesti .kart-cerceve {
    transform: rotateY(180deg);
  }
  
  .kart-onyuz, .kart-arkayuz {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .kart-arkayuz {
    transform: rotateY(180deg);
  }