/* Shared icon set: single-colour SVGs used as masks, so every icon takes the text colour (currentColor) in both themes.
   Usage: <i class="icon icon-masal" aria-hidden="true"></i>. Size with --icon-size, colour with color. */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Order steps */
.icon-kahramanlar { --icon: url('../assets/icons/step-kahramanlar.svg'); }
.icon-cizim-stili { --icon: url('../assets/icons/step-cizim-stili.svg'); }
.icon-masal { --icon: url('../assets/icons/step-masal.svg'); }
.icon-dokunuslar { --icon: url('../assets/icons/step-dokunuslar.svg'); }
.icon-tamamla { --icon: url('../assets/icons/step-tamamla.svg'); }

/* Story touches */
.icon-pet { --icon: url('../assets/icons/idea-pet.svg'); }
.icon-toy { --icon: url('../assets/icons/idea-toy.svg'); }
.icon-color { --icon: url('../assets/icons/idea-color.svg'); }
.icon-food { --icon: url('../assets/icons/idea-food.svg'); }
.icon-music { --icon: url('../assets/icons/idea-music.svg'); }

/* Brands (single-colour only; the multi-colour Google "G" stays an <img>) */
.icon-apple { --icon: url('../assets/brands/apple.svg'); }
.icon-linkedin { --icon: url('../assets/brands/linkedin.svg'); }
.icon-instagram { --icon: url('../assets/brands/instagram.svg'); }
.icon-youtube { --icon: url('../assets/brands/youtube.svg'); }