/* elements.css — Font-style ikon seti (mask tabanlı) */
.el {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  background: currentColor; /* rengi text renginden alır */
  /* gizli; emoji okunurluğu: */
  font-style: normal; font-weight: normal;
}

/* WebKit ve standart mask */
.el { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
       mask-repeat: no-repeat; mask-position: center; mask-size: contain; }

.el-fire  { -webkit-mask-image: url('../svgs/fire.svg');  mask-image: url('../svgs/fire.svg'); }
.el-earth { -webkit-mask-image: url('../svgs/earth.svg'); mask-image: url('../svgs/earth.svg'); }
.el-air   { -webkit-mask-image: url('../svgs/air.svg');   mask-image: url('../svgs/air.svg'); }
.el-water { -webkit-mask-image: url('../svgs/water.svg'); mask-image: url('../svgs/water.svg'); }

/* İsteğe bağlı: boyut yardımcı sınıfları */
.el-xl { width: 2em; height: 2em; }
.el-2xl { width: 3em; height: 3em; }