/* =============================================================================
   Iktató — DEKORATÍV SÍKFORMÁK (clip-path, árnyék és színátmenet NÉLKÜL).
   Átvéve a far360 shapes.css-éből (csak a hero négy sarokformája).

   Hol jelennek meg: KIZÁRÓLAG a termék-nyitólap heróján. Máshol nem (DESIGN.md
   formanyelv): a munkafelület és a bérlői nyitólap forma nélküli. A formák a tartalom
   ALATT ülnek (z-index 0), pointer-events: none-nal, aria-hidden jelölésű elemeken.

   ELHELYEZÉS: MIND A NÉGY SAROKBAN egy-egy kisebb forma, félig a doboz szélén
   kilógva. A hero belső margója (hero.css) tartja a szöveget a sarkoktól, így forma
   és szöveg SOSEM fedi egymást. 860 px alatt a formák ELTŰNNEK: inkább ne legyen dísz,
   mint hogy olvashatatlan legyen a lap.
   ============================================================================= */
.f-hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.f-hero__shapes span {
  position: absolute;
  display: block;
}

/* mustársárga ötszög: bal fent */
.f-shape--pent {
  left: -2%;
  top: -12%;
  width: 7vw;
  height: 6.6vw;
  max-width: 96px;
  max-height: 92px;
  background: var(--f-mustard);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* világoskék kör: jobb fent */
.f-shape--sky {
  right: -2.5%;
  top: -16%;
  width: 9vw;
  height: 9vw;
  max-width: 126px;
  max-height: 126px;
  border-radius: 50%;
  background: var(--f-sky);
}

/* korallpiros kör: bal lent */
.f-shape--coral {
  left: -2.5%;
  bottom: -16%;
  width: 8vw;
  height: 8vw;
  max-width: 112px;
  max-height: 112px;
  border-radius: 50%;
  background: var(--f-coral);
}

/* tizenhat ágú csillag: jobb lent */
.f-shape--star {
  right: -2%;
  bottom: -14%;
  width: 8.5vw;
  height: 8.5vw;
  max-width: 122px;
  max-height: 122px;
  background: var(--f-primary);
  clip-path: polygon(50% 0, 63% 22%, 88% 12%, 84% 38%, 100% 50%, 84% 62%, 88% 88%, 63% 78%, 50% 100%, 37% 78%, 12% 88%, 16% 62%, 0 50%, 16% 38%, 12% 12%, 37% 22%);
}

/* Keskeny nézetben a szövegoszlop a teljes szélességet elfoglalja: a dísz ELTŰNIK. */
@media (max-width: 860px) {
  .f-hero__shapes { display: none; }
}